/* ───────────────────────────────────────────────────────────────────────────
   LE CORPS DE LA PAGE REFORMER (gabarit page-reformer), sous le haut de
   page (pratique-hero.css). La page Mat garde page-pratique et
   pratique-page.css.

   Le texte courant du contenu de la page (titres, paragraphes, listes) reste
   dans une colonne lisible. Les sections de la maquette de Corentin
   (8 octobre 2026) sont des blocs Groupe du contenu, reconnus à leur classe
   `pq` : elles prennent toute la largeur et se mettent en forme ici. Leur
   texte et leurs photos se modifient dans l'éditeur de la page.

     pq pq--machine  la section 2 (maquette du 8 octobre, après-midi) : la
                     photo (`pq__machine-photo`, une carte postale détourée, en PNG/WebP transparent) et le texte
                     (`pq__machine-texte`), sur le papier aux ressorts
                     « petits détails, grands résultats »
                     (assets/images/reformer-fond-ressorts.webp ; au
                     téléphone, les ressorts seuls, reformer-ressorts.webp).
     pq pq--recette  la section 3 (9 octobre) : lever le « jamais fait,
                     pas pour moi ». À gauche le texte (`pq__surtitre`,
                     titre, texte, bouton `pq-decouverte` dont lien et prix
                     viennent de la fiche Formule, l'avis :
                     groupe `acc-avis__carte pq-avis` avec `pq-avis__texte`
                     et `pq-avis__nom`) ; à droite l'image de la fiche
                     (`pq__recette-carte`).
   ─────────────────────────────────────────────────────────────────────────── */
.pratique { --pq-gouttiere: max(1.25rem, 4.2vw); padding: 0; color: var(--ink); }   /* les sections du groupe blanc suivent sans bande crème */
.pratique__corps > :where(h2, h3, p, ul, ol) { max-width: 46rem; margin-inline: auto; padding-inline: 24px; }
.pratique__corps h2 { margin: 2.5rem auto 0.75rem; font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 1.875rem); line-height: 1.2; color: var(--vin-700); }
.pratique__corps p, .pratique__corps li { font-size: 1.0625rem; line-height: 1.65; }
.pratique__corps ul { margin-block: 1rem; padding-left: calc(24px + 1.25rem); list-style: disc; }

/* ── Une section de la maquette ── */
.pratique__corps > .pq { box-sizing: border-box; max-width: calc(var(--container) + 2 * var(--pq-gouttiere)); margin: 0 auto; padding: clamp(3rem, 8vw, 5rem) var(--pq-gouttiere) 0; text-align: center; }
.pq > h2 { max-width: none; margin: 0; padding: 0; font-size: clamp(1.75rem, 6.4vw, 2.5rem); line-height: 1.1; text-wrap: balance; }
.pq > p { max-width: 40rem; margin: 0.875rem auto 0; padding: 0; font-size: 1rem; line-height: 1.6; color: var(--gray-700); text-wrap: pretty; }

/* ── pq--machine : la photo de la salle et le texte, sur le papier aux ressorts ──
   Téléphone et tablette : le papier uni, la photo puis le texte ; les
   ressorts dessinés à droite du titre. PC : le papier entier, ressorts en
   haut à droite ; le texte s'arrête avant eux. */
.pratique__corps > .pq--machine {
  position: relative; max-width: none; margin-top: 0; padding: clamp(2.5rem, 7vw, 4.5rem) var(--pq-gouttiere);   /* collée au haut de page : pas de bande crème entre les deux */
  background: #EFE5D7 url("../images/reformer-fond-ressorts.webp") left top / cover no-repeat;   /* le crème du papier, sous l'image */
  text-align: left;
}
.pq__machine.wp-block-columns { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: var(--container); margin: 0 auto; align-items: center; }
.pq__machine-photo .wp-block-image { margin: 0; filter: drop-shadow(-6px 12px 18px oklch(34% 0.09 15.6 / 0.22)); }   /* une carte postale déjà penchée, détourée : l'ombre suit ses bords */
.pq__machine-photo img { display: block; width: 100%; height: auto; }
.pq__machine-texte.wp-block-column { position: relative; }
.pq__machine-texte::after {
  content: ""; position: absolute; top: -0.5rem; right: -0.25rem; width: 6rem; aspect-ratio: 370 / 515;
  background: url("../images/reformer-ressorts.webp") center / contain no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 96%, transparent), linear-gradient(to right, transparent, #000 8%, #000 94%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 96%, transparent), linear-gradient(to right, transparent, #000 8%, #000 94%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;   /* un fondu court sur les quatre bords : pas de raccord visible avec le papier */
}
.pq__machine-texte h2 { max-width: none; min-height: 8.5rem; margin: 0; padding: 0 6.75rem 0 0; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.05; text-wrap: balance; }
.pq__machine-boutons.wp-block-buttons { margin-top: 1.75rem; }
.pq__machine-boutons .wp-block-button__link {   /* secondaire, en contour : le bouton plein reste celui du cours découverte */
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0.5rem 1.75rem; border-radius: 999px; background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--vin-700); color: var(--vin-700); text-decoration: none;
  font: 700 0.8125rem/1.2 var(--font-body), sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background-color var(--dur-base) var(--ease-out-expo), color var(--dur-base) var(--ease-out-expo);
}
.pq__machine-boutons .wp-block-button__link:hover { background: var(--vin-700); color: var(--ivory); }
.pq__machine-boutons .wp-block-button__link:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 4px; }
.pq__machine-texte p { max-width: 34rem; margin: 1rem 0 0; padding: 0; font-size: 1rem; line-height: 1.6; color: var(--gray-700); }

/* ── pq--recette : « Jamais fait de Reformer ? » et la fiche recette ──
   D'après la maquette de Corentin (9 octobre 2026). Le fond (mur aux ombres
   de feuillage, 10 octobre) est l'image de fond du bloc Groupe, réglée dans
   l'éditeur ; sans elle, le blanc chaud de la carte d'avis de l'accueil. Téléphone : le texte, le bouton, l'avis, puis la fiche. PC :
   le texte à gauche, la fiche à droite. Ce qui est écrit sur la fiche
   existe aussi en HTML : son texte alternatif, et la FAQ (« Que faut-il
   apporter… », « Comment se passe un premier cours… »). */
.pratique__corps > .pq--recette {
  --acc-blanc: #FCFAF7; --acc-encre: var(--wp--preset--color--encre);   /* les couleurs de la carte d'avis de l'accueil (accueil-avis.css) */
  position: relative; isolation: isolate;
  max-width: none; margin-top: 0; padding: clamp(3rem, 8vw, 5.5rem) var(--pq-gouttiere); background-color: var(--acc-blanc); color: var(--ink);
}
/* Le voile clair sur l'image de fond (réglage « Fond » du bloc Groupe de la
   section, dans l'éditeur) : le texte reste lisible sur les ombres de
   feuillage. Sous le contenu, au-dessus de l'image. */
.pratique__corps > .pq--recette::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgb(252 250 247 / 0.75); }
.pq__recette.wp-block-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; max-width: var(--container); margin: 0 auto; align-items: center; }
.pq__recette-texte.wp-block-column { text-align: center; }   /* centré au téléphone et sur tablette, comme le haut de page ; à gauche en PC */
.pratique__corps .pq__surtitre { margin: 0; padding: 0; font: 600 0.75rem/1.3 var(--font-body), sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vin-700); }
.pratique__corps .pq__surtitre::after { content: ""; display: block; width: 2.5rem; height: 1.5px; margin: 1rem auto 0; background: var(--vin-700); opacity: 0.6; }   /* le petit trait sous le surtitre, comme la maquette */
.pq__recette-texte h2 { max-width: none; margin: 1.25rem 0 0; padding: 0; font-size: clamp(2rem, 8.4vw, 3.25rem); line-height: 1.08; text-wrap: balance; color: var(--vin-700); }
.pq__recette-texte p:not([class*="pq"]) { max-width: 32rem; margin: 1.25rem auto 0; padding: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--gray-700); }
/* Le bouton : celui du haut de page (pratique-hero.css), plein bordeaux, fléché. */
.pq__recette-boutons.wp-block-buttons { justify-content: center; margin-top: 2rem; }
.pq__recette-boutons .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 3.5rem; padding: 0.625rem 1.75rem; 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.8125rem/1.25 var(--font-body), sans-serif; letter-spacing: 0.1em; text-transform: uppercase; text-wrap: balance;
  transition: background-color var(--dur-base) var(--ease-out-expo), transform var(--dur-fast) var(--ease-out-expo);
}
.pq__recette-boutons .wp-block-button__link::after {   /* la flèche des boutons de l'accueil */
  content: ""; flex: none; width: 1.125rem; height: 1.125rem; background: currentColor; transition: transform var(--dur-base) var(--ease-out-expo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pq__recette-boutons .wp-block-button__link:hover { background: var(--vin-800); transform: translateY(-2px); }
.pq__recette-boutons .wp-block-button__link:hover::after { transform: translateX(3px); }
.pq__recette-boutons .wp-block-button__link:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 5px; }
/* L'avis : la carte « passe-partout » de l'accueil (classe acc-avis__carte,
   accueil-avis.css), en pleine largeur de colonne, étoiles au-dessus. */
.pq-avis.acc-avis__carte { width: auto; max-width: 32rem; min-height: 0; margin: 2.5rem auto 0; padding: 2.25rem 2.25rem 2rem; }
.pq-avis::before {
  content: ""; display: block; width: 6.25rem; height: 1.125rem; margin: 0 auto 1rem; background-color: #D9A21B;   /* l'or des étoiles de l'accueil */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.2 6.8.7-5.1 4.6 1.4 6.7L12 17.3l-5.9 3.4 1.4-6.7-5.1-4.6 6.8-.7z'/%3E%3C/svg%3E") 0 0 / 1.125rem 1.125rem space;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.2 6.8.7-5.1 4.6 1.4 6.7L12 17.3l-5.9 3.4 1.4-6.7-5.1-4.6 6.8-.7z'/%3E%3C/svg%3E") 0 0 / 1.125rem 1.125rem space;
}
.pratique__corps .pq-avis__texte { margin: 0; padding: 0; font: italic 400 1rem/1.6 var(--font-body), sans-serif; color: var(--acc-encre); text-wrap: pretty; }
.pratique__corps .pq-avis__nom { margin: 1.25rem 0 0; padding: 0; font: 600 0.75rem/1 var(--font-body), sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vin-700); }
/* La fiche : l'image détourée, déjà penchée ; l'ombre suit ses bords. */
.pq__recette-carte .wp-block-image { max-width: 34rem; margin: 0 auto; filter: drop-shadow(-10px 18px 22px rgb(94 32 40 / 0.22)); }
.pq__recette-carte .wp-block-image img { display: block; width: 100%; height: auto; }

@media (min-width: 1024px) {
  .pratique__corps > .pq--machine { background-position: right top; padding-block: clamp(4rem, 6vw, 5.5rem); }
  .pq__machine.wp-block-columns { grid-template-columns: 42% 1fr; gap: clamp(2.5rem, 4.5vw, 4rem); }
  .pq__machine-texte.wp-block-column { padding-right: clamp(8rem, 15vw, 14rem); }   /* les ressorts du papier occupent le dernier cinquième */
  .pq__machine-texte h2 { min-height: 0; padding-right: 0; }
  .pq__machine-texte::after { display: none; }   /* ceux du papier suffisent */
  .pq__machine-texte h2 { font-size: clamp(2.25rem, 3vw, 3rem); }
  /* « Jamais fait de Reformer ? » : le texte à gauche, la fiche à droite. */
  .pq__recette.wp-block-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(2.5rem, 5vw, 5rem); }
  .pq__recette-texte.wp-block-column { text-align: left; }
  .pratique__corps .pq--recette .pq__surtitre::after, .pq__recette-texte p:not([class*="pq"]), .pq-avis.acc-avis__carte { margin-left: 0; }
  .pq__recette-boutons.wp-block-buttons { justify-content: flex-start; }
  .pq-avis::before { margin-left: 0; }
  .pq__recette-carte .wp-block-image { margin-right: 0; }
}