/* ───────────────────────────────────────────────────────────────────────────
   LE HAUT DES PAGES DE PRATIQUE — motif pratique-hero, d'après la maquette
   de Corentin (8 octobre 2026).

   Fond crème, texte bordeaux. PC (≥ 1024 px) : l'image en plein fond ; elle
   porte elle-même sa moitié crème (arcs dessinés, ombre de feuillage) où se
   pose le texte, et la photo du cours à droite. Téléphone et tablette : la
   partie photo en bandeau sous la barre, fondue vers le bas, puis le texte
   centré (comme les hauts de l'accueil et de Coachs).
   ⚠ Ces cadrages sont ceux de l'image du 8 octobre (1672 × 941, photo dans
   la moitié droite) : une autre image demande de les revoir.

   Téléphone et tablette (< 1024 px, choix A de Corentin, 8 octobre 2026) :
   la photo remplit le premier écran sous la barre, cadrée sur la coach ;
   surtitre, titre et boutons PAR-DESSUS, centrés dans la hauteur (jamais en
   bas : décision prise sur Coachs), sur un voile crème plus dense au centre.
   La phrase et les repères viennent sous la photo.

   Les boutons reprennent ceux de l'ancien haut de Coachs (retiré le 12
   octobre 2026), passés en clair : la pilule en capitales espacées, pleine bordeaux, puis le rond cerclé
   fléché.
   ─────────────────────────────────────────────────────────────────────────── */
.ph {
  --ph-fond: var(--cream);
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column;
  padding: 0;   /* patterns.css donne à toute section un padding de section */
  overflow: hidden;
  background: var(--ph-fond);
  color: var(--gray-700);
}
.ph *, .ph *::before, .ph *::after { box-sizing: border-box; }

/* ── La photo : un bandeau fondu vers le bas ── */
.ph__photo {
  height: clamp(14rem, 34svh, 22rem);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.ph__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 82% 55%; }   /* au téléphone, la partie photo : la coach et les machines */

/* ── Le texte ── */
.ph__texte { width: 100%; max-width: 36rem; margin: -0.5rem auto 0; padding: 0 1.25rem 2.5rem; text-align: center; }
.ph__h1 { display: flex; flex-direction: column; align-items: center; margin: 0; font: inherit; }   /* le H1 réunit surtitre et grand titre, comme l'accueil */
.ph__surtitre { margin: 0; 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); }   /* le surtitre de l'accueil (accueil.css), en bordeaux sur le crème */
.ph__titre {
  display: block; margin: 0.875rem 0 0; font-family: var(--font-display); font-size: clamp(2.25rem, 9.6vw, 3rem); line-height: 1.05;
  text-wrap: balance; color: var(--vin-700);
}
.ph__titre br { display: none; }   /* au téléphone, le titre s'équilibre seul au lieu de couper au retour forcé */
.ph__intro { margin: 1rem 0 0; font-size: 1rem; line-height: 1.6; text-wrap: pretty; color: var(--gray-700); }

.ph__boutons { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin-top: 1.75rem; }
.ph__reserver {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; max-width: 100%; min-height: 3.5rem; padding: 0.625rem 1.5rem; border-radius: 999px;
  background: var(--vin-700); color: var(--ivory); box-shadow: 0 10px 26px rgb(94 32 40 / 0.22); text-decoration: none;
  font: 700 0.75rem/1.25 var(--font-body), sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background-color var(--dur-base) var(--ease-out-expo), transform var(--dur-fast) var(--ease-out-expo);
}
.ph__reserver > span { text-wrap: balance; }
.ph__reserver:hover { background: var(--vin-800); transform: translateY(-2px); }
.ph__reserver:active { transform: scale(0.98); }
.ph__planning { display: inline-flex; align-items: center; gap: 0.875rem; color: var(--vin-700); text-decoration: none; }
.ph__planning > span:last-child { font: 600 1.125rem/1.2 var(--font-body), sans-serif; letter-spacing: -0.01em; }
.ph__rond {
  flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--vin-700);
  transition: background-color var(--dur-base) var(--ease-out-expo);
}
.ph__planning:hover .ph__rond { background: rgb(94 32 40 / 0.08); }
.ph-fleche { flex: none; width: 1.125rem; height: 1.125rem; transition: transform var(--dur-base) var(--ease-out-expo); }
.ph__reserver:hover .ph-fleche, .ph__planning:hover .ph-fleche { transform: translateX(3px); }
.ph__reserver:focus-visible, .ph__planning:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 5px; }

/* ── Les cinq repères ── */
.ph__infos { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.ph__infos li {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.75rem; border-radius: 6px;
  background: var(--linen-deep); font-size: 0.8125rem; line-height: 1.3; color: var(--ink);
}
.ph__picto { flex: none; width: 1.125rem; height: 1.125rem; color: var(--vin-700); }

/* ── Téléphone et tablette : la photo en plein premier écran, le texte dessus ──
   Le bloc texte s'efface (display: contents) : ses enfants se rangent dans la
   grille de la section. Lignes 1 à 4 = le premier écran (photo derrière),
   titre et boutons au centre ; puis la phrase et les repères. */
@media (max-width: 1023px) {
  .ph { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr auto auto; }
  .ph__photo {
    grid-row: 1 / 5; grid-column: 1; position: relative; height: auto; min-height: calc(100svh - var(--cp-nav-h, 0px));
    -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  }
  .ph__photo::after {   /* le voile crème : plus dense derrière le titre, au centre */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgb(245 240 235 / 0) 0%, rgb(245 240 235 / 0) 18%, rgb(245 240 235 / 0.78) 36%, rgb(245 240 235 / 0.78) 66%, rgb(245 240 235 / 0) 84%);   /* net en haut et en bas, une bande crème derrière le texte */
  }
  .ph__img { position: absolute; inset: 0; object-position: 78% 50%; }   /* la coach au centre de l'écran */
  .ph__texte { display: contents; }
  .ph__h1, .ph__boutons, .ph__intro, .ph__infos { grid-column: 1; position: relative; z-index: 1; width: 100%; max-width: 36rem; justify-self: center; padding-inline: 1.25rem; text-align: center; }
  .ph__h1 { grid-row: 2; }
  .ph__boutons { grid-row: 3; margin-top: 1.75rem; }
  .ph__intro { grid-row: 5; margin-top: 2rem; }
  .ph__infos { grid-row: 6; margin: 1.5rem 0 2.5rem; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .ph__h1, .ph__boutons, .ph__intro, .ph__infos { max-width: 40rem; }
}

/* Tablette : plus d'air, les deux actions côte à côte. */
@media (min-width: 640px) {
  .ph__intro { font-size: 1.0625rem; }
  .ph__boutons { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; }
  .ph__reserver { padding-inline: 1.75rem; font-size: 0.8125rem; letter-spacing: 0.1em; }
}

/* ═══ PC : le texte à gauche, la photo à droite ═══ */
@media (min-width: 1024px) {
  .ph { display: block; min-height: min(calc(100svh - var(--cp-nav-h, 0px)), 46rem); }
  /* De 1024 à 1359 px, l'image entière ferait passer la photo sous le texte :
     seule sa partie photo, à droite, fondue dans le crème. */
  .ph__photo {
    position: absolute; inset: 0 0 0 auto; z-index: -1; width: 56%; height: auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%);
            mask-image: linear-gradient(to right, transparent 0%, #000 22%);
  }
  .ph__img { object-position: 100% 50%; }   /* calée à droite : la photo du cours reste entière */
  .ph__texte {
    display: flex; flex-direction: column; justify-content: center;
    width: 44%; max-width: none; min-height: inherit; margin: 0; padding: 3.5rem 2.5vw 3.5rem 4.2vw;   /* la colonne crème de gauche, alignée sur le logo de la barre (même marge, 4.2vw) */
    text-align: left;
  }
  .ph__h1 { align-items: flex-start; }
  .ph__surtitre { font-size: 0.8125rem; letter-spacing: 0.24em; }
  .ph__titre { margin-top: 1rem; font-size: clamp(2.5rem, 3.5vw, 3.5rem); }
  .ph__titre br { display: inline; }
  .ph__intro { max-width: 34rem; }
  .ph__boutons { justify-content: flex-start; }
  .ph__infos { justify-content: flex-start; max-width: 32rem; }
}

/* Grand PC : l'image entière en fond ; sa moitié crème (arcs dessinés,
   ombre de feuillage) accueille le texte, la photo du cours reste à droite. */
@media (min-width: 1360px) {
  .ph__photo { inset: 0; width: 100%; -webkit-mask-image: none; mask-image: none; }
  .ph__titre { font-size: clamp(2.5rem, 3vw, 3.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ph__reserver, .ph-fleche, .ph__rond { transition: none; }
  .ph__reserver:hover, .ph__reserver:active, .ph-fleche { transform: none !important; }
}