/* Angèle Payen, site A: de la carte à la semelle. Les tokens de design.md, rien d'autre. */

@font-face {
  font-family: "Commissioner";
  src: url("assets/fonts/commissioner-flar60-latin.woff2") format("woff2");
  font-weight: 350 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("assets/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --platre: #F3F2EE;
  --encre: #22201F;
  --sauge: #ADA88E;
  --rose-poudre: #DDB0A8;
  --vieux-rose: #A8756C;
  --bordeaux: #6B2632;
  --bordeaux-fonce: #551C27;

  --f-titre: "Commissioner", "Segoe UI", system-ui, sans-serif;
  --f-texte: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;

  --t-affiche: clamp(44px, 7vw, 88px);
  --t-section: clamp(32px, 4.2vw, 52px);
  --t-sous: 26px;
  --t-chapo: 21px;
  --t-texte: 18px;
  --t-petit: 15px;
  --t-etiquette: 15px;

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 72px; --e-9: 112px;

  --r-bouton: 6px;
  --r-photo: 20px;

  --duree: 0.9s;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
  --courbe-trait: cubic-bezier(0.65, 0, 0.35, 1);

  --entete: 64px;
  --gouttiere: 20px;
  --pouce: 84px;
  --bande: var(--e-8);
  --mesure: 30em;
}

@media (min-width: 960px) {
  :root { --gouttiere: 48px; --bande: var(--e-9); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + var(--e-4)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--platre);
  color: var(--encre);
  font: 400 var(--t-texte)/1.6 var(--f-texte);
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--f-titre); font-variation-settings: "FLAR" 60, "VOLM" 0; color: var(--encre); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
figure { margin: 0; }
a { color: inherit; }

h2 { font-size: var(--t-section); font-weight: 400; line-height: 1.1; }
h3 { font-size: var(--t-sous); font-weight: 500; line-height: 1.25; }
.chapo { font-size: var(--t-chapo); line-height: 1.5; max-width: var(--mesure); }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: var(--gouttiere); top: -100px; z-index: 100; background: var(--platre); padding: var(--e-3) var(--e-4); font: 600 var(--t-etiquette)/1.3 var(--f-texte); }
.saut:focus { top: var(--e-2); }

:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

.enveloppe { max-width: 1200px; margin: 0 auto; padding: 0 var(--gouttiere); }

/* Le bouton plein: le même, trois fois. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--e-5);
  background: var(--bordeaux); color: var(--platre);
  font: 600 var(--t-etiquette)/1.3 var(--f-texte);
  text-decoration: none; text-align: center;
  border-radius: var(--r-bouton);
  transition: background-color 200ms ease-out;
}
.bouton:active { background: var(--bordeaux-fonce); transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .bouton:hover { background: var(--bordeaux-fonce); }
}

/* Le lien: un trait de 1px, puis un second de 2px qui se dessine dessous. */
.lien {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  padding-bottom: 7px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px;
  transition: background-size 300ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .lien:hover { background-size: 100% 2px; }
}

/* En-tête */
.entete { position: sticky; top: 0; z-index: 40; height: var(--entete); background: var(--platre); }
.entete-in { max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 var(--gouttiere); display: flex; align-items: center; gap: var(--e-5); }
.entete-logo { display: block; margin-right: auto; flex: none; }
.entete-logo img { height: 56px; width: auto; }
.menu-bouton {
  flex: none; min-height: 44px; padding: 0 var(--e-4);
  background: transparent; color: var(--encre); border: 1px solid var(--encre); border-radius: var(--r-bouton);
  font: 600 var(--t-etiquette)/1.3 var(--f-texte); cursor: pointer;
}
.nav { display: none; }
.nav ul { list-style: none; }
.nav a { text-decoration: none; font: 600 var(--t-etiquette)/1.3 var(--f-texte); }
.entete-rdv { display: none; }

.nav.ouvert {
  display: block; position: absolute; left: 0; right: 0; top: var(--entete);
  background: var(--platre); border-top: 1px solid var(--sauge);
  padding: var(--e-4) var(--gouttiere) var(--e-6);
  height: calc(100svh - var(--entete)); overflow-y: auto;
}
.nav.ouvert li a { display: block; padding: var(--e-3) 0; font: 500 var(--t-sous)/1.25 var(--f-titre); font-variation-settings: "FLAR" 60; }

@media (min-width: 960px) {
  .menu-bouton { display: none; }
  .nav { display: block; }
  .nav ul { display: flex; gap: var(--e-6); }
  .nav a { padding: var(--e-3) 0; }
  @media (hover: hover) and (pointer: fine) {
    .nav a { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px; transition: background-size 300ms ease-out; }
    .nav a:hover { background-size: 100% 2px; }
  }
  .entete-rdv { display: inline-flex; min-height: 44px; opacity: 0; visibility: hidden; transition: opacity 200ms ease-out, visibility 0s linear 200ms, background-color 200ms ease-out; }
  .rdv-visible .entete-rdv { opacity: 1; visibility: visible; transition: opacity 200ms ease-out, background-color 200ms ease-out; }
}

/* Le premier écran: le titre, la preuve, le bouton, l'adresse, puis la carte. */
.heros-texte { padding: var(--e-4) var(--gouttiere) var(--e-3); }
.heros h1 { font-size: var(--t-affiche); font-weight: 350; line-height: 1.02; letter-spacing: -0.02em; max-width: 9.5em; }
.heros .chapo { margin-top: var(--e-3); max-width: 24em; }
.preuve { margin-top: var(--e-2); font-size: var(--t-petit); line-height: 1.5; }
.heros-rdv { margin-top: var(--e-5); width: 100%; }
.adresse { margin-top: var(--e-2); font-size: var(--t-petit); line-height: 1.5; }

.piste { position: relative; height: calc(100svh - var(--entete) - var(--pouce) + 90vh); }
.epingle {
  position: sticky; top: var(--entete);
  height: calc(100svh - var(--entete) - var(--pouce));
  display: flex; flex-direction: column; align-items: center;
  padding: 0 var(--gouttiere);
}
.cadre {
  position: relative; flex: none;
  height: min(46svh, 420px); aspect-ratio: 2 / 3;
  border-radius: var(--r-photo); overflow: hidden;
}
.cadre-in { position: absolute; inset: 0; transform: scale(1.2); }
.cadre-photo, .carte-dessin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.js .cadre-photo { opacity: 0; }

.carte-dessin .trait { fill: none; stroke: var(--encre); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.carte-dessin .points, .mini-carte .points { fill: var(--encre); }
.zone-sauge { fill: var(--sauge); }
.zone-rose { fill: var(--rose-poudre); }

.legendes { flex: 1; display: grid; place-items: center; width: 100%; max-width: 22em; padding: var(--e-4) 0; }
.legende { font: 500 var(--t-sous)/1.25 var(--f-titre); font-variation-settings: "FLAR" 60; text-align: center; text-wrap: balance; }
.js .legendes .legende { grid-area: 1 / 1; opacity: 0; }

/* Le moment: la carte se dessine, de 0 à 1,8 s. */
@media (prefers-reduced-motion: no-preference) {
  .carte-dessin #contour { stroke-dasharray: 1 1.02; animation: trace 1.4s var(--courbe-trait) both; }
  .carte-dessin .zone { transform-box: fill-box; transform-origin: center; animation: pose 500ms var(--courbe) both; }
  .carte-dessin #talon { animation-delay: 800ms; }
  .carte-dessin #arche { animation-delay: 920ms; }
  .carte-dessin #meta-ext { animation-delay: 1040ms; }
  .carte-dessin #meta-int { animation-delay: 1160ms; }
  .carte-dessin #hallux { animation-delay: 1280ms; }
  .carte-dessin #points { animation: point 200ms ease-out 1600ms both; }
}
@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pose { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes point { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 959px) and (max-height: 700px) {
  .cadre { height: min(38svh, 420px); }
}
@media (min-width: 600px) and (max-width: 959px) {
  .heros-texte { max-width: 640px; }
  .heros-rdv { width: auto; min-width: 360px; }
  .etape-photo { max-width: 460px; }
  .etape-photo.portrait { max-width: 380px; }
  .semelles-une, .semelles-paire { max-width: 560px; }
}

.fondu { height: 96px; background: linear-gradient(var(--platre), var(--sauge)); }

@media (min-width: 960px) {
  .heros { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1200px; margin: 0 auto; padding: 0 var(--gouttiere); }
  .heros-texte { grid-area: 1 / 1; align-self: start; position: relative; z-index: 1; padding: 14vh 0 0; }
  .heros h1 { max-width: 7.2em; }
  .heros .chapo { max-width: 20em; }
  .heros .chapo { margin-top: var(--e-5); }
  .preuve { margin-top: var(--e-3); }
  .heros-rdv { width: auto; margin-top: var(--e-6); }
  .piste { grid-area: 1 / 1 / 2 / 3; height: calc(100vh - var(--entete) + 90vh); }
  .epingle {
    height: calc(100vh - var(--entete)); padding: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-7); align-items: center;
  }
  .cadre { grid-column: 2; grid-row: 1; justify-self: end; height: min(calc(100vh - var(--entete) - var(--e-8)), 640px); }
  .carte-dessin .trait { stroke-width: 5; }
  .legendes { grid-column: 1; grid-row: 1; align-self: end; justify-items: start; max-width: 13em; padding: 0 0 12vh; }
  .legende { text-align: left; }
}

/* Les bandes */
.bande { padding: var(--bande) 0; position: relative; }
.bande-sauge { background: var(--sauge); }
.bande-rose { background: var(--vieux-rose) url("assets/img/mur-vieux-rose-1600.webp") center / cover no-repeat; }

/* Le bilan en quatre appuis */
.bilan { padding-top: var(--e-6); }
.bilan-tete { max-width: 40em; }
.bilan-tete .chapo { margin-top: var(--e-4); }

.etapes-zone { position: relative; margin-top: var(--e-7); }
.mini-rail { position: sticky; top: 88px; z-index: 2; height: 84px; margin-bottom: -84px; display: flex; justify-content: flex-end; pointer-events: none; }
.mini-carte { width: 56px; height: 84px; }
.mini-carte .trait { fill: none; stroke: var(--encre); stroke-width: 22; stroke-linejoin: round; }
.mini-carte .zone { opacity: 0.18; transition: opacity 300ms ease-out; }
.mini-carte .zone.allumee { opacity: 1; }

.etapes { list-style: none; padding-right: 72px; display: grid; gap: var(--e-8); }
.etape { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e-3); row-gap: var(--e-4); align-items: start; }
.etape-n { font: 350 var(--t-affiche)/0.9 var(--f-titre); font-variation-settings: "FLAR" 60; letter-spacing: -0.02em; color: var(--encre); }
.etape-photo img { border-radius: var(--r-photo); width: 100%; }
.etape-photo.duo { display: grid; gap: var(--e-3); }
.etape-texte { grid-column: 1 / -1; max-width: var(--mesure); }
.etape-texte p { margin-top: var(--e-2); }

.pour-qui { margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--encre); display: grid; gap: var(--e-4); }
.pour-qui h3 { font-size: var(--t-section); font-weight: 400; line-height: 1.1; max-width: 14em; }
.pour-qui p { font-size: var(--t-chapo); line-height: 1.5; max-width: 26em; }

@media (min-width: 960px) {
  .bilan { padding-top: var(--e-7); }
  .etapes { padding-right: 104px; gap: var(--e-9); }
  .etape { grid-template-columns: 120px minmax(0, 440px) minmax(0, 1fr); column-gap: var(--e-6); align-items: end; }
  .etape-n { justify-self: end; align-self: start; }
  .etape-texte { grid-column: 3; padding-bottom: var(--e-3); }
  .pour-qui { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--e-7); align-items: end; }
}

/* Les semelles */
.semelles-grille { display: grid; gap: var(--e-6); }
.semelles img { border-radius: var(--r-photo); width: 100%; }
.semelles-texte .chapo { margin-top: var(--e-4); }
.semelles-duo { display: grid; gap: var(--e-4); }
.prix { display: grid; }
.prix-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); padding: var(--e-4) 0; border-bottom: 1px solid var(--encre); }
.prix-ligne:first-child { border-top: 1px solid var(--encre); }
.prix dt { max-width: 18em; }
.prix dd { font: 500 var(--t-sous)/1.25 var(--f-titre); font-variation-settings: "FLAR" 60; white-space: nowrap; }
.note { margin-top: var(--e-4); font-size: var(--t-petit); line-height: 1.5; max-width: var(--mesure); }

@media (min-width: 960px) {
  .semelles-grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); row-gap: var(--e-8); align-items: center; }
  .semelles-une { grid-column: 1 / span 6; }
  .semelles-texte { grid-column: 8 / span 5; }
  .semelles-duo { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: var(--e-6); }
  .semelles-paire { grid-column: 1 / span 6; }
  .tarifs { grid-column: 8 / span 5; }
}

/* Les avis: tout le texte à 24 px et plus sur le vieux rose. */
.avis-in { display: grid; gap: var(--e-6); }
.avis-note { font-size: var(--t-section); }
.avis-citation { margin: 0; max-width: 24em; }
.avis-citation p { font: 500 var(--t-sous)/1.35 var(--f-titre); font-variation-settings: "FLAR" 60; }
.avis-citation footer { margin-top: var(--e-4); font: 400 var(--t-sous)/1.25 var(--f-titre); font-variation-settings: "FLAR" 60; }
.etiquettes { list-style: none; display: flex; flex-wrap: wrap; column-gap: var(--e-6); row-gap: var(--e-2); }
.etiquettes li { font: 500 var(--t-sous)/1.25 var(--f-titre); font-variation-settings: "FLAR" 60; }
.etiquettes span { font-weight: 350; margin-left: var(--e-1); }

@media (min-width: 960px) {
  .avis-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--e-8); align-items: start; }
  .avis-note { grid-row: 1 / span 2; max-width: 8em; }
}

/* Angèle et le cabinet: la fresque de sa salle, à peine. */
.cabinet { isolation: isolate; }
.cabinet::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("assets/img/fresque-1600.webp") right top / min(100%, 1000px) auto no-repeat;
  mix-blend-mode: multiply; opacity: 0.18;
}
.cabinet-grille { display: grid; gap: var(--e-6); }
.cabinet-portrait img { border-radius: var(--r-photo); width: 100%; max-width: 420px; }
.cabinet-texte .chapo { margin-top: var(--e-4); }
.parcours { list-style: none; margin-top: var(--e-6); display: grid; gap: var(--e-3); max-width: var(--mesure); }
.parcours li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--encre); }
.parcours .an { font: 500 var(--t-texte)/1.6 var(--f-titre); font-variation-settings: "FLAR" 60; }
.soins h3 { margin-bottom: var(--e-3); }
.soins p { max-width: var(--mesure); }
.ligne-du-jour { font-weight: 600; margin-bottom: var(--e-2); }
.prix-soins { margin-top: var(--e-5); }
.prix-soins dd { font-size: var(--t-texte); font-weight: 500; }

@media (min-width: 960px) {
  .cabinet-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--e-8); row-gap: var(--e-8); align-items: start; }
  .cabinet-portrait { grid-row: 1 / span 2; }
  .soins { grid-column: 2; }
}

/* Venir: le parquet de la salle, à 8 %. */
.venir { isolation: isolate; }
.venir::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("assets/img/parquet-chene-1600.webp") center / cover no-repeat; opacity: 0.08;
}
.venir-grille { display: grid; gap: var(--e-6); }
.venir-tete h2 { max-width: 13em; }
.venir-tete .chapo { margin-top: var(--e-4); }
.chemin { list-style: none; display: grid; gap: var(--e-4); max-width: var(--mesure); }
.chemin li { padding-left: var(--e-5); position: relative; }
.chemin li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--encre); }
.venir-liens { margin-top: var(--e-5); }
.venir-tel { margin-top: var(--e-4); }

@media (min-width: 960px) {
  .venir-grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--e-8); align-items: end; }
}

/* Le pied de page: l'encre, et la lumière des stores. */
.pied {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--encre); color: var(--platre);
  padding: var(--bande) 0 calc(var(--e-7) + var(--pouce));
}
.pied::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("assets/img/stores-1536.webp") left top / cover no-repeat;
  mix-blend-mode: screen; opacity: 0.22;
}
.pied :focus-visible { outline-color: var(--platre); }
.pied-grille { display: grid; gap: var(--e-7); }
.logo-pied { width: 190px; height: auto; }
.logo-pied .l-encre { fill: var(--platre); }
.logo-pied .l-trait { fill: none; stroke: var(--platre); }
.logo-pied .l-sauge { fill: var(--sauge); }
.logo-pied .l-rose { fill: var(--rose-poudre); }
.pied-contact { display: grid; gap: var(--e-3); justify-items: start; }
.pied-heures { margin: var(--e-2) 0 var(--e-2); max-width: 22em; }
a[href^="tel:"] { white-space: nowrap; }
.pied-infos { display: grid; gap: var(--e-4); font-size: var(--t-petit); line-height: 1.5; max-width: 26em; }
.legal { display: flex; flex-wrap: wrap; gap: var(--e-5); }
.legal a { text-underline-offset: 4px; }

@media (min-width: 960px) {
  .pied { padding-bottom: var(--e-8); }
  .pied-grille { grid-template-columns: 1fr 1.3fr 1.2fr; column-gap: var(--e-7); align-items: start; }
}

/* L'action sous le pouce, au téléphone: le bouton de l'en-tête, posé en bas. */
.pouce {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: var(--e-3) var(--gouttiere) calc(var(--e-3) + env(safe-area-inset-bottom));
  background: var(--platre); border-top: 1px solid var(--sauge);
  opacity: 0; visibility: hidden;
  transition: opacity 200ms ease-out, visibility 0s linear 200ms;
}
.pouce-rdv { width: 100%; }
.rdv-visible .pouce { opacity: 1; visibility: visible; transition: opacity 200ms ease-out; }
.pied-visible .pouce { opacity: 0; visibility: hidden; }
@media (min-width: 960px) { .pouce { display: none; } }

/* Les entrées au défilement: une par section, 0,9 s, 28 px, 80 ms d'écart, une seule fois. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe); transition-delay: calc(var(--rang, 0) * 80ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .cadre-photo { opacity: 1; }
  .carte-dessin .zones { opacity: 0.35; }
  .js .legendes .legende { grid-area: auto; opacity: 1; }
  .legendes { gap: var(--e-3); }
}