/* ───────────────────────────────────────────────────────────────────────────
   LES PORTRAITS DE LA PAGE COACHS — motif coachs-rencontre, d'après la
   maquette de Corentin (7 octobre 2026).

   Le fond crème aux plantes, auquel la lumière ne touche jamais. Les cadres posés
   sur leur bord bas, éclairés comme le haut de page (une lampe en haut à
   droite) ; dessous, l'étiquette du prénom à la manière de POSES, puis pour
   qui, l'intensité (une jauge sur 5) et « Voir ses cours »,
   toujours lisibles.

   Sur la photo, à la forme de la vitre du cadre (--fenetre, selon la forme
   choisie sur la fiche), une ombre et sa phrase apparaissent :
   au survol avec une souris ; au téléphone quand le cadre passe la
   mi-hauteur de l'écran, et au toucher (coachs-rencontre.js) ; au clavier
   en atteignant le bouton.

   La boîte du cadre fait exactement la taille de son image (--ratio, unités
   de conteneur) : l'ombre et la lumière se placent donc en
   pourcentage de l'image, quelle que soit sa forme.

   Téléphone d'abord : une coach après l'autre ; deux par deux sur tablette ;
   quatre en ligne dès 1024 px. Tout en Manrope, sauf le titre et l'étiquette du prénom.
   ─────────────────────────────────────────────────────────────────────────── */
.cr {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 3.5rem 1rem 3.75rem;
  background: #EFE3CF;   /* le crème du fond, si l'image manque */
  color: var(--ink);
  text-align: center;
}
.cr *, .cr *::before, .cr *::after { box-sizing: border-box; }
.cr__fond { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
/* Sur la page Coachs, le H1 réunit le surtitre (celui des pages Reformer et
   Mat, pratique-hero.css) et le titre des portraits. */
.cr__h1 { display: flex; flex-direction: column; align-items: center; gap: 0.875rem; margin: 0; font: inherit; }
.cr__surtitre { font: 600 0.75rem/1.3 var(--font-body), sans-serif; letter-spacing: 0.12em; text-transform: uppercase; text-wrap: balance; color: var(--vin-700); }
@media (min-width: 1024px) { .cr__surtitre { font-size: 0.8125rem; letter-spacing: 0.24em; } }
.cr__titre { max-width: 22ch; margin: 0 auto; font-family: var(--font-display); font-size: clamp(1.75rem, 6.5vw, 2.5rem); line-height: 1.15; color: var(--vin-900); text-wrap: balance; }

/* La phrase sous le titre : la manuscrite de « Rejoins les Paulettes, on se
   motive ensemble » (thero.css), légèrement penchée, en bordeaux sur le crème. */
.cr__intro { max-width: 30rem; margin: 1.25rem auto 0; font-family: "Homemade Apple", cursive; font-size: 1.0625rem; line-height: 1.8; color: var(--vin-700); text-wrap: balance; transform: rotate(-3deg); }
.cr__intro span { display: block; }

/* Sur la page Coachs : ce qu'elles enseignent, une ligne discrète sous les
   boutons, les deux pratiques en liens soulignés (comme dans les FAQ,
   patterns.css). */
.cr__pratiques { max-width: 30rem; margin: 3rem auto 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink); text-wrap: balance; }
.cr__pratiques a { color: var(--vin-700); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: rgb(94 32 40 / 0.4); }
.cr__pratiques a:hover { text-decoration-color: var(--vin-700); }
.cr__pratiques a:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 2px; border-radius: 2px; }

.cr__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; max-width: 20rem; margin: 2.25rem auto 0; padding: 0; list-style: none; }
.cr__coach { display: flex; flex-direction: column; align-items: center; }

/* ── Le cadre ──
   Une boîte 3/4 pour aligner les quatre ; dedans, la toile à la taille
   exacte de l'image, posée sur le bord bas. */
.cr__cadre { position: relative; width: 100%; aspect-ratio: 3 / 4; container-type: size; }
.cr__toile {
  position: absolute; bottom: 0; left: 50%; translate: -50% 0;
  width: min(100cqw, 100cqh * var(--ratio)); aspect-ratio: var(--ratio);
  filter: drop-shadow(-2px 3px 2px rgb(50 24 8 / 0.42)) drop-shadow(-8px 16px 18px rgb(50 24 8 / 0.32));   /* l'ombre part en bas à gauche, à l'opposé de la lampe */
}
.cr__img { display: block; width: 100%; height: 100%; filter: sepia(0.2) saturate(1.22) contrast(1.08) brightness(1.02); }   /* l'ambre de fin de journée, commun aux quatre */

/* La lumière de la lampe, sur le cadre seul (masque = l'image elle-même) :
   le modelé chaud en haut à droite, puis les éclats et le reflet de vitre. */
.cr__toile::before, .cr__toile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--masque) center / 100% 100% no-repeat;
          mask: var(--masque) center / 100% 100% no-repeat;
}
.cr__toile::before {
  background: linear-gradient(225deg, rgb(255 186 96 / 0.75) 0%, rgb(255 186 96 / 0.2) 40%, rgb(70 30 6 / 0) 55%, rgb(70 30 6 / 0.55) 100%);
  mix-blend-mode: soft-light; opacity: 0.85;
}
.cr__toile::after {
  background:
    radial-gradient(38% 22% at 82% 6%, rgb(255 236 186 / 0.85), rgb(255 236 186 / 0) 70%),
    radial-gradient(18% 40% at 97% 30%, rgb(255 230 170 / 0.5), rgb(255 230 170 / 0) 70%),
    linear-gradient(118deg, rgb(255 246 222 / 0) 40%, rgb(255 246 222 / 0.1) 48%, rgb(255 246 222 / 0) 58%);
  mix-blend-mode: screen; opacity: 0.75;
}

/* Les vitres, mesurées sur les cadres du 7 octobre 2026 en % de l'image.
   Le rectangle est la moyenne de deux cadres (7 % × 7,5 % et 8 % × 9 %). */
.cr__toile--ovale     { --fenetre: ellipse(38% 36.5% at 50% 49.5%); }
.cr__toile--octogone  { --fenetre: polygon(30% 5.5%, 70% 5.5%, 92.5% 25%, 92.5% 75%, 70% 94.5%, 30% 94.5%, 7.5% 75%, 7.5% 25%); }
.cr__toile--rectangle { --fenetre: inset(7.5% 8.25%); }

/* ── Son style, sur la photo ──
   L'ombre est le fond du paragraphe, découpé à la fenêtre du cadre. */
.cr__style {
  position: absolute; inset: 0; z-index: 1; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0 15%;
  background: rgb(26 10 4 / 0.74); clip-path: var(--fenetre);
  opacity: 0; transition: opacity 0.35s ease;
}
.cr__style-titre { font-size: 0.9375rem; font-weight: 700; color: var(--ivory); }
.cr__phrase {
  max-width: 16ch; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--ivory); text-wrap: balance;
  translate: 0 6px; transition: translate 0.45s var(--ease-out-expo);
}
.cr__coach.est-ouverte .cr__style, .cr__coach:focus-within .cr__style { opacity: 1; }
.cr__coach.est-ouverte .cr__phrase, .cr__coach:focus-within .cr__phrase { translate: none; }
@media (hover: hover) and (pointer: fine) {
  .cr__cadre:hover .cr__style { opacity: 1; }
  .cr__cadre:hover .cr__phrase { translate: none; }
}

/* ── Sous le cadre ──
   L'étiquette du prénom, d'après celle de POSES (relevée le 6 octobre
   2026 : cadre de 3 px, 188 px de large, 5 px × 25 px de marge, fond
   blanc, encre noire, qui s'inverse au survol), à la manière de Chez
   Paulette : crème et bordeaux, la manuscrite de la marque à la place de
   leur Plunct. Elle s'inverse quand le cadre montre son style. */
@font-face { font-family: "Homemade Apple"; src: url("../fonts/homemade-apple-latin.woff2") format("woff2"); font-display: swap; }
.cr__nom {
  min-width: 11.75rem; margin: 1.25rem 0 0; padding: 0.375rem 1.5rem 0.25rem;
  border: 3px solid var(--vin-800); background: var(--ivory); color: var(--vin-800);
  font-family: "Homemade Apple", cursive; font-size: 1.375rem; line-height: 1.6; white-space: nowrap;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.cr__coach.est-ouverte .cr__nom, .cr__coach:focus-within .cr__nom { background: var(--vin-800); color: var(--ivory); }
@media (hover: hover) and (pointer: fine) {
  .cr__coach:has(.cr__cadre:hover) .cr__nom { background: var(--vin-800); color: var(--ivory); }
}
.cr__pour, .cr__intensite { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--gray-700); }   /* le taupe secondaire ne passe pas AA sur ce beige (2,7 mesuré) */
.cr__pour { margin-top: 0.875rem; margin-bottom: auto; }   /* l'espace libre se loge sous « pour toi si » : la jauge et le bouton s'alignent d'une coach à l'autre, quelle que soit la longueur du texte */
.cr__intensite { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; margin-top: 0.5rem; }
.cr__intensite-ligne { display: inline-flex; align-items: center; gap: 0.5rem; }
/* La jauge : cinq barres qui montent, pleines jusqu'à son niveau. */
.cr__jauge { display: inline-flex; align-items: flex-end; gap: 3px; height: 0.875rem; }
.cr__jauge i { width: 5px; border-radius: 1px; background: color-mix(in oklch, var(--vin-800) 18%, transparent); }
.cr__jauge i:nth-child(1) { height: 40%; }
.cr__jauge i:nth-child(2) { height: 55%; }
.cr__jauge i:nth-child(3) { height: 70%; }
.cr__jauge i:nth-child(4) { height: 85%; }
.cr__jauge i:nth-child(5) { height: 100%; }
.cr__jauge i.plein { background: var(--vin-800); }
.cr__pour strong, .cr__intensite strong { font-weight: 700; color: var(--vin-900); }
.cr__bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; margin-top: 0.875rem; padding: 0.5rem 1.25rem;
  border-radius: 999px; background: var(--vin-700); color: var(--ivory);
  font-size: 0.8125rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out-expo);
}
.cr__bouton:hover { background: var(--vin-800); }
.cr__bouton:focus-visible { outline: 2px solid var(--vin-600); outline-offset: 3px; }

/* Téléphone : le cadre assez petit pour qu'on lise, sous la photo, le
   prénom, « Pour toi si », l'intensité et le bouton (≈ 17,6 rem mesurés) sans
   avoir à défiler. `svh` compte les barres du navigateur. */
@media (max-width: 639px) {
  .cr__cadre { width: min(100%, max(11rem, (100svh - var(--cp-nav-h, 0px) - 17rem) * 0.75)); }
}

@media (min-width: 640px) {
  .cr { padding-inline: 2rem; }
  .cr__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; max-width: 40rem; }
}

/* PC : les quatre en ligne. */
@media (min-width: 1024px) {
  .cr { padding: clamp(3.5rem, 5vw, 5rem) 2rem clamp(4rem, 5.5vw, 5.5rem); }
  .cr__titre { max-width: none; font-size: clamp(2.25rem, 2.6vw, 2.75rem); }
  .cr__intro { max-width: 40rem; font-size: 1.25rem; }
  .cr__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; max-width: 72rem; margin-top: clamp(2.5rem, 3.5vw, 3.5rem); }
  .cr__cadre { max-width: 17.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cr__style, .cr__phrase, .cr__nom, .cr__bouton { transition: none; }
  .cr__phrase { translate: none; }
}