/* ==========================================================================
   MD Clinic — styles des pages intérieures (contenu + formulaire)
   Chargé en plus de styles.css. La home ne le charge pas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   En-tête de page
   -------------------------------------------------------------------------- */
.page-head {
  padding: calc(var(--topbar-h, 96px) + clamp(40px, 7vh, 80px)) var(--gutter) clamp(40px, 6vh, 70px);
  background: radial-gradient(120% 100% at 78% 0%, #FBF7EF 0%, #F1ECE1 52%, #E9E7DB 100%);
}
.page-head__inner { max-width: var(--maxw); margin-inline: auto; }
.page-head h1 {
  font-size: clamp(36px, 5.2vw, 78px);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 18px 0 0;
  color: var(--ink);
  max-width: 18ch;
}
.page-head h1 em { font-style: italic; color: var(--sage); }
.page-head .lede { margin-top: 24px; }

.crumbs {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.crumbs a { color: var(--muted-2); display: inline-block; padding: 6px 0; }
.crumbs a:hover { color: var(--sage); }

/* --------------------------------------------------------------------------
   Corps d'article
   -------------------------------------------------------------------------- */
.article {
  padding: clamp(50px, 8vh, 90px) var(--gutter) clamp(70px, 12vh, 130px);
  background: var(--cream);
}
.article__inner {
  max-width: 780px;
  margin-inline: auto;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--body);
}
.article__inner > * + * { margin-top: 22px; }

.article__inner h2 {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  color: var(--ink);
  margin-top: clamp(48px, 7vh, 76px);
}
.article__inner h2 em { font-style: italic; color: var(--sage); }
.article__inner h3 {
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 400;
  color: var(--ink);
  margin-top: clamp(32px, 5vh, 48px);
}
.article__inner strong { font-weight: 500; color: var(--ink); }
.article__inner a { border-bottom: 1px solid rgba(78, 91, 60, .3); }

.article__inner ul, .article__inner ol { padding-left: 1.15em; margin-block: 0; }
.article__inner li + li { margin-top: 10px; }
.article__inner li::marker { color: var(--sage-ink); }

/* Même grammaire que les cartes du journal : la fiche se suffit, pas de cadre. */
.article__figure { margin: clamp(36px, 6vh, 60px) 0; }
.article__sheet {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  border-bottom: none;
  box-shadow: 0 20px 44px -28px rgba(52, 62, 38, .7),
              0 1px 3px rgba(52, 62, 38, .12);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.article__sheet img { width: 100%; height: auto; }
.article__sheet:hover {
  transform: translateY(-4px);
  box-shadow: 0 36px 66px -34px rgba(52, 62, 38, .8),
              0 2px 5px rgba(52, 62, 38, .14);
}

.article__figure figcaption {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
/* Suit immédiatement la légende plutôt que d'être repoussé à l'autre bout
   d'une ligne de 720 px, où il se lisait comme un élément orphelin. */
.article__zoom {
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage);
}
.article__zoom::before { content: '— '; letter-spacing: 0; }
.article__sheet:hover + figcaption .article__zoom { color: var(--sage-deep); }

/* Encadré */
.callout {
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid rgba(28, 31, 23, .07);
  box-shadow: var(--shadow-card);
}
.callout--sage { background: var(--sage); color: var(--on-dark-warm); border-color: transparent; }
.callout--sage strong, .callout--sage h3 { color: var(--on-dark); }
.callout__title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin: 0 0 12px;
}
.callout--sage .callout__title { color: var(--sage-pale); }

/* --------------------------------------------------------------------------
   Tableau (longueurs d'onde, phototypes)
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  margin: clamp(30px, 5vh, 46px) 0;
  border-radius: var(--radius);
  border: 1px solid rgba(28, 31, 23, .08);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
table.data {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.6;
}
table.data th, table.data td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(28, 31, 23, .07);
}
table.data thead th {
  background: var(--sage);
  color: var(--on-dark);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: none;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:nth-child(even) { background: rgba(242, 237, 227, .5); }
table.data .nm {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--sage);
  white-space: nowrap;
}

/* Pastilles de phototype */
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(28, 31, 23, .12);
}
.pt1 { background: #F5DFC8; } .pt2 { background: #E7C29B; } .pt3 { background: #D6A472; }
.pt4 { background: #B87A45; } .pt5 { background: #8C5A32; } .pt6 { background: #4E2E1B; }

/* --------------------------------------------------------------------------
   Grille de fiches
   -------------------------------------------------------------------------- */
.sheets {
  padding: clamp(60px, 10vh, 120px) var(--gutter);
  background: var(--cream-alt);
}
.sheets__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  max-width: var(--maxw);
  margin-inline: auto;
}
.sheet {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid rgba(28, 31, 23, .06);
  color: var(--body);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.sheet:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); color: var(--body); }
.sheet img { width: 100%; border-radius: 14px; background: var(--cream-deep); }
.sheet b { display: block; font-weight: 400; color: var(--ink); font-size: 16px; }
.sheet span { font-size: 14px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Prise de rendez-vous (rendez-vous.html)
   Le calendrier vient de Cal.com (assets/js/reservation.js) : une iframe dont
   la hauteur suit son contenu. On lui réserve la place d'un mois affiché, pour
   que le lien de repli ne saute pas à son arrivée. Sans JavaScript, seul ce
   lien reste — il ouvre la même réservation sur cal.com.
   -------------------------------------------------------------------------- */
.reservation-section {
  padding: clamp(40px, 6vh, 70px) var(--gutter) clamp(70px, 12vh, 130px);
  background: var(--cream);
}
.reservation { max-width: 1000px; margin-inline: auto; }

/* Un bouton par type de rendez-vous : il ouvre son calendrier juste
   dessous. Sans JavaScript, ce sont des liens vers la page Cal.com. */
.reservation__choix {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}
.reservation__option {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 9px 22px;
  border: 1px solid rgba(78, 91, 60, .3);
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.reservation__option b { font-weight: 500; }
.reservation__option span { font-size: 12.5px; color: var(--muted); }
.reservation__option:hover { border-color: var(--sage); color: var(--ink); }
.reservation__option[aria-current="true"] {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--on-dark);
}
.reservation__option[aria-current="true"] span { color: var(--sage-pale); }

.reservation__cal { min-height: 640px; }
html:not(.js) .reservation__cal { display: none; }
.reservation__repli {
  margin: 22px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--body);
  text-align: center;
}
.reservation__repli a { color: var(--sage); text-decoration: underline; text-underline-offset: 3px; }

/* En attendant l'ouverture de la réservation en ligne */
.reservation--attente { max-width: 760px; }
.reservation__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

@media (max-width: 560px) {
  /* Deux colonnes, le diagnostic sur toute la largeur : le calendrier
     reste près du haut de l'écran. */
  .reservation__choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .reservation__option { padding: 8px 10px; font-size: 14px; }
  .reservation__option:first-child { grid-column: 1 / -1; }
  .reservation__cal { min-height: 520px; }
  .reservation__actions .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Pages légales
   -------------------------------------------------------------------------- */
.legal .article__inner { max-width: 720px; font-size: 15.5px; }
.legal .article__inner h2 { font-size: clamp(22px, 2.4vw, 30px); }
/* Aplat opaque volontaire : cette pastille apparaît aussi bien sur le crème
   que dans le pied de page sauge, où la version translucide tombait à 1.24:1. */
.todo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: #7A3526;
  color: #FFF2EE;          /* 8.11:1 quel que soit le fond */
  font-size: .9em;
}

/* --------------------------------------------------------------------------
   Mouvement des pages de contenu

   Les huit pages générées n'avaient aucune animation : après une home
   entièrement chorégraphiée, elles tombaient à plat. Elles reprennent ici la
   même grammaire, en plus sobre — ce sont des pages qu'on lit, pas qu'on
   parcourt. Course courte (14px), durée courte (.6s) : le texte est en place
   avant que l'œil ne l'atteigne.

   L'attribut est posé sur le conteneur, présent dès l'analyse du HTML. C'est
   ce qui évite de peindre le contenu puis de le masquer : une classe ajoutée
   par un script `defer` arriverait après le premier rendu.
   -------------------------------------------------------------------------- */
.js [data-reveal-children] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
}
.js [data-reveal-children] > .is-in {
  opacity: 1;
  transform: none;
}

/* La figure porte déjà le volet : lui ajouter la montée générique ferait
   jouer deux animations sur le même bloc, et le geste devient bavard. */
.js [data-reveal-children] > .article__figure { opacity: 1; transform: none; }

/* Les planches pédagogiques s'ouvrent en volet, comme sur la home. Le
   découpage est porté par le lien, jamais par l'élément observé : un
   `clip-path` sur la cible annule son rectangle d'intersection dans Chromium
   et l'observateur ne se déclencherait jamais. */
.js .article__figure > .article__sheet {
  clip-path: inset(0 0 101% 0);
  transition: clip-path 1s var(--ease-out), transform .55s var(--ease),
              box-shadow .55s var(--ease);
}
.js .article__figure.is-in > .article__sheet { clip-path: inset(0 0 0 0); }
.article__sheet img { transition: transform .8s var(--ease-out); }
.article__sheet:hover img { transform: scale(1.02); }

/* --------------------------------------------------------------------------
   En-tête de page : deux colonnes à partir de 1000px

   Le titre plafonne à 18ch et le chapô à 42ch : empilés, ils laissaient plus
   de la moitié de la largeur vide sur un écran large, et l'en-tête se lisait
   comme une mise en page inachevée plutôt que comme une respiration. Mis côte
   à côte, ils occupent la ligne et le chapô se cale sur le pied du titre.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .page-head__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: clamp(40px, 6vw, 90px);
    align-items: end;
  }
  .page-head .crumbs { grid-column: 1 / -1; }
  .page-head h1      { grid-column: 1; margin-top: 12px; }
  .page-head .lede   { grid-column: 2; margin-top: 0; padding-bottom: .4em; max-width: 46ch; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal-children] > * { opacity: 1; transform: none; }
  .js .article__figure > .article__sheet { clip-path: none; }
  .article__sheet:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   Carte des soins (soins-esthetiques.html)
   Une ligne par soin : le nom et sa promesse à gauche, le prix à droite, en
   colonne, pour que l'œil compare les montants d'un seul trait. Chaque
   `.soin` est un bloc de premier niveau de l'article : il se révèle seul et
   porte l'ancre que vise le menu.
   -------------------------------------------------------------------------- */
.article__inner > .soin + .soin { margin-top: 0; }
.soin {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px clamp(24px, 5vw, 56px);
  align-items: start;
  padding: clamp(26px, 4vh, 38px) 0;
  border-top: 1px solid rgba(28, 31, 23, .1);
}
.soin:last-child { border-bottom: 1px solid rgba(28, 31, 23, .1); }
.article__inner .soin__nom {
  margin: 0;
  font-size: clamp(25px, 2.6vw, 34px);
  line-height: 1.12;
}
.soin__texte p { margin: 10px 0 0; max-width: 54ch; }
/* Photo reprise de la grille de la clinique : même médaillon, bord blanc et
   filet doré. */
.soin__photo {
  width: 80px;
  height: 80px;
  margin: 2px 4px 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 4px rgba(169, 139, 98, .5);
}
.soin__prix {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
  padding-top: 4px;
  text-align: right;
  white-space: nowrap;
}
.soin__offre { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--sage-ink); }
.soin__montant { font-family: var(--serif); font-size: clamp(32px, 3.4vw, 42px); line-height: 1; color: var(--sage); }
.soin__avant { font-size: 15px; color: var(--muted); }

@media (max-width: 560px) {
  .soin { grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; }
  .soin__photo { width: 64px; height: 64px; }
  .soin__prix {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px 12px;
    text-align: left;
  }
  .soin__offre { flex-basis: 100%; }
}