/* ============================================================================
   proposition — la page où le client choisit sa formule, signe et règle la
   première tranche (IV Manager, lot B, 24/10/2026).

   Pensée TÉLÉPHONE D'ABORD : la plupart des clients ouvriront le lien depuis
   WhatsApp, sur un téléphone modeste et une connexion lente. D'où : une seule
   colonne jusqu'à 60em, des cibles d'au moins 44 px, aucune image lourde,
   aucune police de plus que celles du site.

   Toutes les couleurs passent par les variables de la charte : le thème nuit
   les redéfinit, et cette feuille suit sans un mot de plus. Deux exceptions
   VOULUES, toutes deux bâties sur des variables qui ne basculent jamais :
   le cadre de signature (--sur-couleur, toujours blanc) et son encre
   (--fond-sombre, toujours sombre). Une signature doit ressembler à de
   l'encre sur du papier, quel que soit le thème du téléphone.
   ============================================================================ */

body.pr-page { background: var(--bg); }

/* ---------- Bandeau du cabinet ---------- */
.pr-entete { background: var(--white); border-bottom: 1px solid var(--line); }
.pr-entete-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 64px; }
.pr-marque { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.pr-marque img { width: 40px; height: 40px; flex: none; object-fit: contain; }
.pr-marque-nom { font-family: 'Sora', 'Inter', sans-serif; font-weight: 700; font-size: var(--fs-md); line-height: 1.25;
  color: var(--navy-dark); letter-spacing: -.01em; overflow-wrap: anywhere; }
.pr-langue { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3); flex: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-sm); color: var(--navy-dark);
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
.pr-langue:hover { border-color: var(--navy-dark); background: var(--bg); }

/* ---------- En-tête de la proposition ---------- */
.pr-col { max-width: 1080px; margin-inline: auto; }
/* Le parcours garde une colonne de lecture étroite, alignée sur le bord
   gauche des formules ; seules les cartes d'état se centrent. */
.pr-etroit > * { max-width: 640px; }
.pr-centre > * { margin-inline: auto; }
.pr-tete { background: linear-gradient(180deg, var(--white), var(--bg)); border-bottom: 1px solid var(--line); padding: var(--sp-7) 0 var(--sp-6); }
.pr-tete-grille { display: grid; gap: var(--sp-5); }
.pr-tete h1 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem); font-weight: 700; color: var(--navy-dark);
  letter-spacing: var(--tracking-display); line-height: 1.12; text-wrap: balance; }
.pr-numero { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-numero strong { color: var(--ink); font-weight: 600; }
.pr-pour { margin-top: var(--sp-3); font-size: var(--fs-lg); color: var(--ink); }
.pr-pour strong { font-weight: 700; color: var(--navy-dark); }
.pr-validite { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill); background: var(--amber-light); color: var(--amber-ink); font-size: var(--fs-sm); font-weight: 600; }
.pr-validite svg, .pr-ico-texte { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.pr-emetteur { font-style: normal; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); }
.pr-emetteur strong { display: block; color: var(--ink); font-weight: 600; }
.pr-emetteur span { display: block; overflow-wrap: anywhere; }

/* Les trois temps du parcours : on sait d'entrée qu'il y aura un paiement
   après la signature, et on voit où l'on en est en revenant sur le lien. */
.pr-etapes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2);
  margin-top: var(--sp-6); counter-reset: pr-etape; }
.pr-etapes li { display: flex; align-items: center; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 3px solid var(--line);
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.pr-etapes li::before { counter-increment: pr-etape; content: counter(pr-etape); display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--white);
  font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.pr-etapes li[aria-current="step"] { color: var(--navy-dark); border-top-color: var(--red); }
.pr-etapes li[aria-current="step"]::before { background: var(--red-fond); border-color: var(--red-fond); color: var(--sur-couleur); }
.pr-etapes li.est-fait { color: var(--teal-ink); border-top-color: var(--teal); }
.pr-etapes li.est-fait::before { background: var(--teal-light); border-color: var(--teal); color: var(--teal-ink); }

/* ---------- Sections ---------- */
.pr-bloc { padding: var(--sp-7) 0; }
.pr-bloc + .pr-bloc { padding-top: var(--sp-2); }
.pr-h2 { font-size: var(--fs-h2); font-weight: 700; color: var(--navy-dark); letter-spacing: var(--tracking-title); line-height: 1.15;
  text-wrap: balance; scroll-margin-top: var(--sp-5); }
/* Les titres reçoivent le focus par programme (pour les lecteurs d'écran) :
   ils ne sont pas cliquables, l'anneau de focus n'y aurait aucun sens. */
.pr-page [tabindex="-1"]:focus { outline: none; box-shadow: none; }
.pr-intro { margin-top: var(--sp-2); max-width: 60ch; color: var(--muted); font-size: var(--fs-md); text-wrap: pretty; }

/* ---------- Les trois formules ---------- */
.pr-packs-champ { border: 0; margin: var(--sp-5) 0 0; padding: 0; min-width: 0; }
.pr-packs { display: grid; gap: var(--sp-4); }
.pr-pack { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5);
  background: var(--white); border: 2px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.pr-pack:hover { border-color: var(--line-strong); }
.pr-pack.est-choisi { border-color: var(--red-dark); box-shadow: var(--shadow-sm), var(--ring); }
.pr-pack-tete { display: flex; align-items: flex-start; gap: var(--sp-3); }
.pr-pack-tete input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; cursor: pointer; }
/* Le libellé s'étend sur toute la carte : un appui n'importe où choisit la
   formule. La cible fait donc la taille de la carte, pas celle du rond. */
.pr-pack-label { display: grid; gap: var(--sp-1); flex: 1; min-width: 0; cursor: pointer; }
.pr-pack-label::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.pr-pack-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.pr-pack-nom { font-family: 'Sora', 'Inter', sans-serif; font-weight: 700; font-size: var(--fs-md); letter-spacing: .03em; color: var(--red-dark); }
.pr-badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--red-fond); color: var(--sur-couleur); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; }
.pr-badge svg { width: 13px; height: 13px; fill: currentColor; }
.pr-prix { font-family: 'Sora', 'Inter', sans-serif; font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; color: var(--navy-dark);
  letter-spacing: var(--tracking-title); font-variant-numeric: tabular-nums; }
.pr-remise { font-size: var(--fs-sm); font-weight: 600; color: var(--teal-ink); font-variant-numeric: tabular-nums; }
.pr-pack-texte { font-size: var(--fs-base); color: var(--ink); text-wrap: pretty; }
.pr-pack-detail { display: grid; gap: var(--sp-4); }
.pr-legende { font-size: var(--fs-sm); font-weight: 700; color: var(--navy-dark); margin-bottom: var(--sp-2); }
.pr-elements { display: grid; gap: var(--sp-2); }
.pr-elements li { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-base); line-height: 1.45; }
.pr-elements svg { width: 18px; height: 18px; margin-top: 1px; flex: none; fill: none; stroke: var(--teal-ink); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; }
.pr-echeancier { list-style: none; counter-reset: pr-tranche; }
.pr-echeancier li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) 0;
  border-top: 1px dashed var(--line-strong); font-size: var(--fs-sm); line-height: 1.45; }
.pr-echeancier li:last-child { padding-bottom: 0; }
.pr-echeancier-lib { color: var(--ink); }
.pr-echeancier-lib::before { counter-increment: pr-tranche; content: counter(pr-tranche) ". "; color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-montant { flex: none; white-space: nowrap; font-weight: 600; color: var(--navy-dark); font-variant-numeric: tabular-nums; }

.pr-mentions { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); max-width: 75ch; font-size: var(--fs-sm); color: var(--muted); }
.pr-mentions:empty { display: none; }
.pr-mentions p { white-space: pre-line; text-wrap: pretty; }

/* Le rappel du choix colle au bas de l'écran tant que la liste des formules
   défile : au téléphone, les trois cartes font plusieurs écrans de haut, et
   le client ne doit jamais chercher comment passer à la signature.
   « sticky » le retient DANS sa section : il disparaît de lui-même ensuite. */
.pr-recap { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin: var(--sp-5) -20px 0; padding: var(--sp-3) 20px calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgb(0 0 0 / .08); }
.pr-recap-texte { display: grid; min-width: 0; line-height: 1.3; }
.pr-recap-texte span { font-size: var(--fs-xs); color: var(--muted); }
.pr-recap-texte strong { font-size: var(--fs-sm); color: var(--navy-dark); overflow-wrap: anywhere; }
.pr-recap-texte b { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* La feuille du site étire tous les boutons sous 480 px : pas celui-ci, qui partage sa ligne. */
.pr-recap .btn { flex: none; width: auto; min-height: 48px; padding-inline: var(--sp-6); }

/* ---------- Cartes de formulaire ---------- */
.pr-carte { margin-top: var(--sp-5); padding: var(--sp-5); background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.pr-pile { display: grid; gap: var(--sp-5); }
.pr-rappel { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); font-size: var(--fs-sm); }
.pr-rappel-texte { display: grid; min-width: 0; line-height: 1.35; }
.pr-rappel-texte span { color: var(--muted); }
.pr-rappel strong { color: var(--navy-dark); overflow-wrap: anywhere; }
.pr-rappel b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-1); border: 0; background: none; text-align: left;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--red-dark); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pr-lien:hover { text-decoration-thickness: 2px; }
/* Le thème nuit du site grise TOUS les boutons natifs : ces liens-boutons
   doivent rester des liens, sans fond. */
:root[data-theme="nuit"] .pr-lien { background: none; border: 0; }
.pr-rappel .pr-lien { flex: none; }
.pr-aide-champ { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.pr-facultatif { font-weight: 400; color: var(--muted); }
.pr-page .field input[aria-invalid="true"] { border-color: var(--red-dark); }
.pr-page .field label { font-size: var(--fs-sm); }

/* Le cadre de signature : du papier blanc et de l'encre sombre, toujours. */
.pr-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--navy-dark); margin-bottom: 6px; }
.pr-pad { position: relative; border: 2px dashed var(--line-strong); border-radius: var(--r); background: var(--sur-couleur); overflow: hidden; }
.pr-pad:focus { outline: none; }
.pr-pad[data-invalide] { border-color: var(--red-dark); border-style: solid; }
.pr-pad canvas { display: block; width: 100%; height: 11.25rem; touch-action: none; cursor: crosshair;
  background: var(--sur-couleur); color: var(--fond-sombre); }
.pr-pad-ligne { position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-6); pointer-events: none;
  border-top: 1px solid color-mix(in srgb, var(--fond-sombre) 35%, var(--sur-couleur));
  padding-top: var(--sp-1); font-size: var(--fs-sm); color: color-mix(in srgb, var(--fond-sombre) 72%, var(--sur-couleur)); }
.pr-pad.a-trace .pr-pad-ligne span { visibility: hidden; }
.pr-pad-pied p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
/* « Effacer » vit DANS le cadre blanc : son encre est celle du cadre, pas le
   rouge éclairci du thème nuit (2,9:1 seulement sur du blanc). */
.pr-effacer { position: absolute; top: var(--sp-1); right: var(--sp-1); z-index: 1; padding: 0 var(--sp-3);
  color: color-mix(in srgb, var(--fond-sombre) 80%, var(--sur-couleur)); }
.pr-accord { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r);
  background: var(--bg); border: 1px solid var(--line); }
.pr-accord input { width: 24px; height: 24px; margin: 1px 0 0; flex: none; cursor: pointer; }
.pr-accord label { font-size: var(--fs-base); line-height: 1.55; color: var(--ink); cursor: pointer; text-wrap: pretty; }
.pr-accord[data-invalide] { border-color: var(--red-dark); }

.pr-erreur { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 600;
  line-height: 1.45; color: var(--red-dark); }
.pr-erreur svg { width: 18px; height: 18px; margin-top: 1px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.pr-erreur-envoi { margin-top: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r); background: var(--blush); color: var(--red-ink); }

/* Le bouton principal : pleine largeur au téléphone, une seule action à la fois. */
.pr-btn { width: 100%; min-height: 52px; font-size: var(--fs-md); }
.pr-page .btn:disabled { opacity: .65; cursor: progress; }
.pr-page .btn[aria-busy="true"]::before { content: ''; width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .pr-page .btn[aria-busy="true"]::before { animation: pr-tourne .8s linear infinite; }
}
@keyframes pr-tourne { to { transform: rotate(1turn); } }

/* ---------- Signé, payé : les cartes de confirmation ---------- */
.pr-confirme { scroll-margin-top: var(--sp-4); text-align: center; border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
.pr-confirme .pr-h2 { margin-top: var(--sp-3); }
.pr-confirme p { margin: var(--sp-2) auto 0; max-width: 46ch; color: var(--ink); text-wrap: pretty; }
.pr-confirme .btn { margin-top: var(--sp-5); }
.pr-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg); color: var(--muted); }
.pr-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
[data-genre="ok"] .pr-ico, .pr-ico.est-ok { background: var(--teal-light); color: var(--teal-ink); }
[data-genre="attente"] .pr-ico { background: var(--amber-light); color: var(--amber-ink); }
[data-genre="souci"] .pr-ico { background: var(--amber-light); color: var(--amber-ink); }
/* Le seul mouvement de la page : la coche de « C'est signé » se trace,
   comme un trait de stylo. Partout ailleurs, rien ne bouge. */
@media (prefers-reduced-motion: no-preference) {
  .vient-de-signer .pr-trace path { stroke-dasharray: 24; animation: pr-trace .6s var(--ease-out) .15s backwards; }
}
/* Le point de départ n'existe QUE dans l'animation : si elle ne joue pas, la coche reste entière. */
@keyframes pr-trace { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

.pr-a-payer { display: grid; gap: var(--sp-1); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.pr-a-payer span { font-size: var(--fs-sm); color: var(--muted); }
.pr-a-payer strong { font-family: 'Sora', 'Inter', sans-serif; font-size: var(--fs-xl); font-weight: 700; color: var(--navy-dark);
  letter-spacing: var(--tracking-title); font-variant-numeric: tabular-nums; }
.pr-a-payer em { font-style: normal; font-size: var(--fs-sm); color: var(--ink); }
.pr-texte { color: var(--ink); text-wrap: pretty; }
.pr-texte-discret { font-size: var(--fs-sm); color: var(--muted); }
.pr-h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--navy-dark); letter-spacing: -.01em; }

/* La référence à recopier dans le paiement : grande, nette, copiable. */
.pr-reference { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-4);
  border-radius: var(--r); background: var(--bg); border: 1px dashed var(--line-strong); }
.pr-reference > span { flex-basis: 100%; font-size: var(--fs-sm); color: var(--muted); }
.pr-reference strong { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: var(--fs-lg); letter-spacing: .04em;
  color: var(--navy-dark); overflow-wrap: anywhere; user-select: all; }
.pr-moyens { display: grid; gap: var(--sp-3); }
.pr-moyen { padding: var(--sp-4); border-radius: var(--r); border: 1px solid var(--line); background: var(--white); }
.pr-moyen h4 { font-size: var(--fs-md); font-weight: 700; color: var(--navy-dark); }
.pr-moyen dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-sm); }
.pr-moyen dt { color: var(--muted); }
.pr-moyen dd { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pr-moyen p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }

.pr-choix-moyen { border: 0; padding: 0; margin: 0; min-width: 0; }
.pr-choix-moyen legend { padding: 0; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--navy-dark); }
.pr-options { display: grid; gap: var(--sp-2); }
.pr-option { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: 0 var(--sp-4); border-radius: var(--r);
  border: 1px solid var(--line-strong); background: var(--white); font-weight: 600; color: var(--ink); cursor: pointer;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
.pr-option input { width: 22px; height: 22px; margin: 0; flex: none; }
.pr-option.est-choisi { border-color: var(--red-dark); background: var(--blush); }

.pr-paiement-etat { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-2) var(--sp-2); text-align: center; }
.pr-paiement-etat .pr-h3 { margin-top: var(--sp-2); }
.pr-paiement-etat p { max-width: 46ch; text-wrap: pretty; }

/* ---------- États : chargement, souci ---------- */
.pr-etat { text-align: center; }
.pr-etat .pr-h2 { margin-top: var(--sp-3); }
.pr-etat p { margin: var(--sp-3) auto 0; max-width: 46ch; color: var(--ink); text-wrap: pretty; }
[data-genre="souci"].pr-etat { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.pr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.pr-actions .btn { min-height: 48px; }
.pr-chargement { padding: var(--sp-8) 0; }
.pr-chargement p { margin-top: var(--sp-4); text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.pr-squelette { display: grid; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.pr-squelette span { height: 14px; border-radius: var(--r-pill); background: var(--line); }
.pr-squelette span:nth-child(1) { width: 45%; height: 22px; }
.pr-squelette span:nth-child(2) { width: 80%; }
.pr-squelette span:nth-child(3) { width: 65%; }
@media (prefers-reduced-motion: no-preference) {
  .pr-squelette span { animation: pr-pulse 1.4s ease-in-out infinite; }
}
@keyframes pr-pulse { 50% { opacity: .45; } }

/* ---------- Une question ? ---------- */
.pr-aide { display: grid; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.pr-aide .pr-actions { justify-content: flex-start; margin-top: 0; }
/* Le pied du site est un grand bloc sombre : ici, une simple ligne de bas de page. */
footer.pr-pied { margin-top: 0; padding: var(--sp-6) 0 calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line);
  background: var(--white); text-align: center; font-size: var(--fs-sm); color: var(--muted); }
footer.pr-pied :focus-visible { outline-color: var(--red-dark); }
.pr-pied p + p { margin-top: var(--sp-1); }
.pr-pied a { color: var(--red-dark); text-decoration: underline; text-underline-offset: 3px; }
/* Au doigt, une cible de 17 px se rate : la zone sensible monte à ~41 px
   sans rien déplacer (la marge négative rend la place prise). */
.pr-pied a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.pr-texte a { color: var(--red-dark); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- Petits écrans : tout en colonne ---------- */
@media (max-width: 30em) {
  .pr-carte, .pr-pack, .pr-aide { padding: var(--sp-4); }
  .pr-actions { flex-direction: column; }
  .pr-actions .btn { width: 100%; }
  .pr-etapes li { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
}

/* ---------- Grand écran : les trois formules côte à côte ---------- */
@media (min-width: 40em) {
  .pr-btn { width: auto; min-width: 280px; }
}
@media (min-width: 60em) {
  .pr-tete { padding: var(--sp-8) 0 var(--sp-7); }
  .pr-tete-grille { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-7); }
  .pr-emetteur { text-align: right; }
  .pr-bloc { padding: var(--sp-8) 0; }
  .pr-packs { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .pr-pack.est-conseille { box-shadow: var(--shadow); }
  .pr-pack.est-conseille.est-choisi { box-shadow: var(--shadow), var(--ring); }
  /* Les trois cartes tiennent dans l'écran : le rappel redevient une ligne
     ordinaire sous elles, plus besoin qu'il colle. */
  .pr-recap { position: static; margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
}