/*
 * Onglizy — ZONE PAGES — demande cliente, tarifs, authentification, erreurs (la confidentialité garde privacy.css)
 * Vues : requests/create, requests/confirm, public/pricing, auth/form, errors/*
 * Préfixe obligatoire des classes de ce fichier : .pg-
 * Ne redéfinissez pas les composants du socle (public/app.css, public/mobile.css) : voir CLASSES.md.
 * Inclusion automatique par le layout, version ?v= calculée automatiquement (@asset).
 *
 * SOMMAIRE
 *  1. Éléments communs ..... .pg-assurances .pg-notes .pg-note .pg-numbered .pg-round-icon .pg-section-title .pg-break
 *  2. Demande cliente ...... .pg-intro .pg-request(-form|-aside|-actions|-next) .pg-stepper .pg-step(-legend|-heading|-lead)
 *                            .pg-group .pg-choice .pg-more .pg-place .pg-option .pg-consent .pg-honeypot .pg-recap .pg-next
 *  3. Suivi de demande ..... .pg-follow(-header|-title|-grid|-main|-aside) .pg-flow .pg-mail-card .pg-summary .pg-timeline
 *                            .pg-close-card .pg-private-note .pg-who
 *  4. Tarifs ............... .pg-hero .pg-offer(-grid|-head|-price|-list|-tag) .pg-price .pg-compare(-table|-col|-cell)
 *                            .pg-why .pg-figures .pg-checkout .pg-profile-(option|card|help) .pg-order .pg-trainers .pg-faq .pg-final
 *  5. Authentification ..... .pg-auth(-inner|-brand|-card|-tabs|-head|-title|-row|-switch|-back|-pill|-points)
 *  6. Erreurs .............. .pg-error(-inner|-main|-title|-list|-search|-art) .pg-swatch(-card|-1…12)
 *  7. Suivi (phase 2) ...... .pg-track-(chances|manage|block|details|link|form|confirm|limit) .pg-resend .pg-estimate-widen
 *  8. Comptes (phase 2) .... .pg-magic(-sent|-title|-button) .pg-mailpref(-card|-title|-actions)
 */

/* 1. ÉLÉMENTS COMMUNS ---------------------------------------------------- */
.pg-assurances { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 4px; font-size: 14px; color: var(--muted); }
.pg-assurances > li { display: flex; align-items: center; gap: 8px; }
.pg-assurances .icon { color: var(--plum-700); flex-shrink: 0; }
.pg-assurances-center { justify-content: center; }
.pg-notes { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--muted); }
.pg-notes > li { display: flex; align-items: flex-start; gap: 10px; }
.pg-notes .icon { flex-shrink: 0; margin-top: 2px; color: var(--plum-700); }
.pg-note { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--muted); }
.pg-note .icon { flex-shrink: 0; margin-top: 2px; color: var(--plum-700); }
.pg-numbered { display: flex; flex-direction: column; gap: 16px; }
.pg-numbered > li { display: flex; align-items: flex-start; gap: 14px; }
.pg-numbered > li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-numbered-marker {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--plum-700);
  font-size: 14px;
  font-weight: 700;
}
.pg-round-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--blush-100);
  color: var(--plum-700);
}
.pg-round-icon-lg { width: 72px; height: 72px; }
.pg-section-title { font-family: var(--font-ui); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--plum-900); }
.pg-break { overflow-wrap: anywhere; }

/* 2. DEMANDE CLIENTE ----------------------------------------------------- */
.pg-intro { padding-bottom: clamp(24px, 3vw, 36px); }
.pg-intro-title { max-width: 820px; text-wrap: balance; }
.pg-intro-lead { max-width: 680px; font-size: 17px; }
.pg-request {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
  padding-bottom: var(--section-y);
}
.pg-request-form {
  flex: 999 1 600px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: clamp(20px, 3.4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.pg-request-aside { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.pg-stepper .step-label { display: flex; flex-direction: column; min-height: 44px; text-decoration: none; color: var(--muted); line-height: 1.3; }
.pg-stepper .step-label:hover { color: var(--plum-700); }
.pg-step-kicker { font-size: 13px; font-weight: 400; color: var(--muted); }
.pg-step-check { display: none; }
.pg-stepper .step.is-done .pg-step-number { display: none; }
.pg-stepper .step.is-done .pg-step-check { display: block; }
.pg-stepper .step.is-done .step-marker { background: var(--sage-100); border-color: var(--sage-100); color: var(--sage-700); }
.pg-stepper .step.is-done .step-line { background: var(--plum-700); }
.pg-stepper .step[aria-current="step"] .step-marker { background: var(--plum-700); border-color: var(--plum-700); color: var(--white); }
.pg-stepper .step[aria-current="step"] .step-label { color: var(--plum-900); }
.pg-stepper-compact { display: none; }
.pg-stepper-compact .progress { width: 100%; }

.pg-step { display: flex; flex-direction: column; gap: 28px; }
.pg-request-form:not(.is-enhanced) .pg-step + .pg-step { padding-top: 32px; border-top: 1px solid var(--line); }
.pg-step-legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; }
.pg-step-legend + * { clear: both; }
.pg-step-heading {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--plum-900);
}
.pg-step-heading:focus:not(:focus-visible) { outline: none; }
.pg-step-lead { margin-top: -20px; font-size: 15px; color: var(--muted); }
.pg-group { gap: 12px; }
.pg-group > .legend { font-size: 15px; }
.pg-choices { gap: 8px; }
.pg-choice { display: inline-flex; }
.pg-choices .chip { min-height: 44px; padding: 0 16px; font-size: 15px; }
.pg-more { display: flex; flex-direction: column; gap: 12px; }
.pg-more-summary {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--plum-700);
  cursor: pointer;
  list-style: none;
}
.pg-more-summary::-webkit-details-marker { display: none; }
.pg-more-summary:hover { text-decoration: underline; text-underline-offset: 4px; }

.pg-place { display: flex; flex-wrap: wrap; gap: 20px 16px; }
.pg-place-city { flex: 2 1 280px; }
.pg-place-postal { flex: 1 1 180px; }
.pg-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.pg-option-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--blush-100);
  color: var(--plum-700);
}
.pg-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pg-option-title { font-size: 15px; font-weight: 600; cursor: pointer; }
.pg-radius { max-width: 100%; }
.pg-radius .segment { min-height: 44px; padding: 0 18px; font-size: 15px; }
.pg-date { max-width: 320px; }
.pg-consent {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--blush-50);
}
.pg-consent.is-invalid, .pg-consent:has(input[aria-invalid="true"]) { border-color: var(--danger-700); }
.pg-consent .check { font-size: 15px; font-weight: 400; color: var(--plum-900); }
.pg-consent > .field-hint, .pg-consent > .field-error { padding-left: 30px; }
.pg-honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.pg-request-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.pg-request-next { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-left: auto; }

.pg-recap { display: flex; flex-direction: column; gap: 16px; }
.pg-recap-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pg-recap-title { font-family: var(--font-display); font-size: 28px; font-weight: 400; line-height: 1.1; }
.pg-recap-group { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.pg-recap-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.pg-recap-group-title { font-family: var(--font-ui); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.pg-recap-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-right: -12px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.pg-recap-edit:hover { background: var(--blush-100); }
.pg-recap-list { display: flex; flex-direction: column; gap: 6px; }
.pg-recap-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 1.45; }
.pg-recap-list dt { flex-shrink: 0; color: var(--muted); }
.pg-recap-list dd { min-width: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.pg-recap-list dd.is-empty { font-weight: 400; color: var(--muted); }
.pg-next { display: flex; flex-direction: column; gap: 18px; }
.pg-next .pg-notes { padding-top: 16px; border-top: 1px solid var(--line); }
.pg-aside-link { padding: 0 8px; }

@media (min-width: 1041px) {
  .pg-request-aside { position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (max-width: 860px) {
  .pg-request-form.is-enhanced .pg-stepper { display: none; }
  .pg-request-form.is-enhanced .pg-stepper-compact:not([hidden]) { display: flex; }
  .pg-step-lead { margin-top: -16px; }
  .pg-request-form.is-enhanced .pg-request-actions {
    position: sticky;
    bottom: calc(var(--dock-h, 64px) + var(--safe-bottom, 0px));
    z-index: 5;
    margin: 0 calc(-1 * clamp(20px, 3.4vw, 40px)) calc(-1 * clamp(20px, 3.4vw, 40px));
    padding: 12px clamp(20px, 3.4vw, 40px);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--white);
    box-shadow: 0 -4px 22px rgba(86, 60, 73, .06);
  }
  body.mobile-keyboard-open .pg-request-form.is-enhanced .pg-request-actions { bottom: 0; }
  .pg-request-actions [data-step-counter], .pg-request-free { display: none; }
  .pg-request-next { flex: 1; justify-content: flex-end; }
  .pg-request-actions .button { flex: 1 1 auto; }
  .pg-option { align-items: flex-start; }
}

/* 3. SUIVI DE DEMANDE ---------------------------------------------------- */
.pg-follow { padding-bottom: var(--section-y); }
.pg-follow-inner { display: flex; flex-direction: column; gap: 32px; }
.pg-follow-header { display: flex; flex-direction: column; gap: 16px; max-width: 780px; }
.pg-follow-title { text-wrap: balance; }
.pg-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 8px; }
.pg-flow-step { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--muted); }
.pg-flow-step + .pg-flow-step::before { content: ""; width: 32px; height: 1px; background: var(--line-strong); }
.pg-flow-marker {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--muted);
  font-weight: 700;
}
.pg-flow-step.is-done { color: var(--plum-900); }
.pg-flow-step.is-done .pg-flow-marker { background: var(--sage-100); border-color: var(--sage-100); color: var(--sage-700); }
.pg-flow-step[aria-current="step"] { color: var(--plum-900); font-weight: 700; }
.pg-flow-step[aria-current="step"] .pg-flow-marker { background: var(--plum-700); border-color: var(--plum-700); color: var(--white); }
.pg-private-note { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--muted); }
.pg-private-note .icon { flex-shrink: 0; margin-top: 2px; }
.pg-follow-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; }
.pg-follow-main { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.pg-follow-aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pg-mail-card, .pg-review, .pg-timeline-card, .pg-close-card, .pg-after, .pg-who { display: flex; flex-direction: column; gap: 20px; }
.pg-mail-head, .pg-close-head { display: flex; align-items: flex-start; gap: 16px; }
.pg-mail-head > div, .pg-close-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pg-mail-address { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.pg-summary { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 0 24px; }
.pg-summary > div { display: contents; }
.pg-summary dt, .pg-summary dd { padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.pg-summary > div:first-child dt, .pg-summary > div:first-child dd { border-top: 0; padding-top: 0; }
.pg-summary dt { color: var(--muted); }
.pg-summary dd { font-weight: 600; overflow-wrap: anywhere; }
.pg-summary dd.preserve-lines { font-weight: 400; }
.pg-timeline { display: flex; flex-direction: column; }
.pg-timeline > li { position: relative; display: flex; gap: 16px; padding-bottom: 24px; }
.pg-timeline > li:last-child { padding-bottom: 0; }
.pg-timeline > li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 4px;
  width: 2px;
  border-radius: var(--radius-pill);
  background: var(--sage-500);
}
.pg-timeline > li.is-done:has(+ .is-next)::before, .pg-timeline > li.is-current::before { background: var(--line-strong); }
.pg-timeline > li.is-current .pg-timeline-marker { border-color: var(--amber-50); background: var(--amber-50); color: var(--amber-700); }
.pg-timeline-marker {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--sage-100);
  border-radius: var(--radius-pill);
  background: var(--sage-100);
  color: var(--sage-700);
}
.pg-timeline > li.is-next .pg-timeline-marker { border-color: var(--line-strong); background: var(--white); color: var(--muted); }
.pg-timeline > li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 6px; }
.pg-timeline-title { font-size: 16px; font-weight: 600; line-height: 1.5; }
.pg-timeline-detail { font-size: 14px; color: var(--muted); }
.pg-close-card { border: 2px solid var(--plum-700); }
.pg-close-card input[readonly] { font-size: 14px; color: var(--muted); }

@media (max-width: 860px) {
  .pg-summary { grid-template-columns: 1fr; }
  .pg-summary dd { padding-top: 0; border-top: 0; }
  .pg-flow { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pg-flow-step + .pg-flow-step::before { display: none; }
}

/* 4. TARIFS -------------------------------------------------------------- */
.pg-hero { padding-bottom: clamp(40px, 5vw, 56px); }
.pg-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.pg-hero-title { max-width: 900px; text-wrap: balance; }
.pg-hero-lead { max-width: 640px; }
.pg-hero-actions { justify-content: center; }
.pg-offers { padding-bottom: var(--section-y); }
.pg-offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; max-width: 980px; margin: 0 auto; }
.pg-offer { position: relative; display: flex; flex-direction: column; gap: 24px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); }
.pg-offer-pro { box-shadow: var(--shadow-card); }
.pg-offer-tag {
  position: absolute;
  top: -14px;
  left: clamp(24px, 3vw, 36px);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--plum-700);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pg-offer-head { display: flex; flex-direction: column; gap: 6px; }
.pg-offer-name { font-family: var(--font-display); font-size: 32px; font-weight: 400; line-height: 1.1; }
.pg-offer-price { display: flex; flex-direction: column; gap: 4px; }
.pg-offer-price > p:first-child, .pg-offer-head > p:has(.pg-price) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pg-price { font-family: var(--font-display); font-size: 52px; line-height: 1; color: var(--plum-900); font-variant-numeric: tabular-nums; }
.pg-offer-list { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.pg-offer-list-title { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mauve-600); }
.pg-offer-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 24px; text-align: center; }

.pg-compare-card { padding: clamp(8px, 2vw, 16px); }
.pg-compare-table { min-width: 560px; }
.pg-compare-table thead th { vertical-align: bottom; }
.pg-compare-col { width: 22%; text-align: center; }
.pg-compare-plan { display: block; font-size: 16px; font-weight: 700; color: var(--plum-900); }
.pg-compare-price { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.pg-compare-col-pro { background: var(--blush-50); }
.pg-compare-group th {
  padding-top: 20px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mauve-600);
  text-align: left;
}
.pg-compare-table th, .pg-compare-table td { padding-left: 12px; }
.pg-compare-table thead th { white-space: normal; }
.pg-compare-table tbody th[scope="row"] { padding-top: 12px; padding-bottom: 12px; font-size: 14px; font-weight: 400; color: var(--plum-900); text-align: left; white-space: normal; vertical-align: middle; }
.pg-compare-table tbody tr.pg-compare-group { height: auto; border-top: 0; }
.pg-compare-table tbody tr.pg-compare-group:hover { background: transparent; }
.pg-compare-cell { text-align: center; vertical-align: middle; }
.pg-yes, .pg-no { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pill); }
.pg-yes { background: var(--sage-100); color: var(--sage-700); }
.pg-no { color: var(--muted); }
.pg-compare-value { font-size: 14px; font-weight: 600; }
.pg-compare-actions { justify-content: center; padding: 20px 0 8px; }

.pg-why-inner { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); align-items: flex-start; }
.pg-why-text { flex: 1 1 320px; }
.pg-why-inner > .stack { flex: 2 1 560px; min-width: 0; }
.pg-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.pg-figures > li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}
.pg-figures .figure { color: var(--plum-700); }

.pg-checkout-inner { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); align-items: flex-start; }
.pg-checkout-text { flex: 1 1 320px; }
.pg-checkout-card { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; box-shadow: var(--shadow-card); }
.pg-checkout-title { font-family: var(--font-ui); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0; padding: 0; color: var(--plum-900); }
.pg-profile-choice { gap: 4px; }
.pg-profile-options { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pg-profile-option { display: flex; flex-direction: column; gap: 6px; }
.pg-profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
}
.pg-profile-card:hover { border-color: var(--mauve-500); }
.pg-profile-card:has(input:checked) { border: 2px solid var(--plum-700); padding: 11px 13px; background: var(--blush-50); }
.pg-profile-card:has(input:focus-visible) { outline: var(--focus-outline); outline-offset: 2px; }
.pg-profile-card input { width: 20px; height: 20px; flex-shrink: 0; margin: 0; accent-color: var(--plum-700); }
.pg-profile-card.is-disabled { background: var(--blush-50); cursor: not-allowed; }
.pg-profile-card.is-disabled:hover { border-color: var(--line-strong); }
.pg-profile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pg-profile-help { display: flex; align-items: flex-start; gap: 6px; padding-left: 4px; font-size: 13px; color: var(--muted); }
.pg-profile-help .icon { flex-shrink: 0; margin-top: 2px; }
.pg-order { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius-sm); background: var(--blush-50); }
.pg-order > div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.pg-order dt { color: var(--muted); }
.pg-order dd { font-weight: 600; text-align: right; }
.pg-order-total { padding-top: 8px; border-top: 1px solid var(--line); }
.pg-order-total dd { font-size: 18px; }
.pg-checkout-notes { padding-top: 16px; border-top: 1px solid var(--line); }

.pg-trainers-inner { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); align-items: flex-start; }
.pg-trainers-inner > .stack { flex: 2 1 480px; min-width: 0; }
.pg-offer-trainer { flex: 1 1 340px; min-width: 0; background: var(--white); }
.pg-eyebrow-icon { display: inline-flex; align-items: center; gap: 8px; }

.pg-faq-inner { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); align-items: flex-start; }
.pg-faq-intro { flex: 1 1 280px; }
.pg-faq-inner > .faq { flex: 2 1 560px; min-width: 0; }

.pg-final { padding-bottom: var(--section-y); }
.pg-final-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.pg-final-inner > .stack-sm { flex: 1 1 420px; }
.pg-final-inner p { color: var(--on-dark-muted); }

/* 5. AUTHENTIFICATION ---------------------------------------------------- */
.pg-auth { padding-bottom: var(--section-y); }
.pg-auth-inner { display: flex; flex-wrap: wrap; align-items: stretch; gap: clamp(20px, 4vw, 48px); }
.pg-auth-brand { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.pg-auth-brand-title { text-wrap: balance; }
.pg-auth-brand-lead { max-width: 460px; font-size: 17px; color: var(--on-dark-muted); }
.pg-auth-points { display: flex; flex-direction: column; gap: 20px; }
.pg-auth-points > li { display: flex; align-items: flex-start; gap: 14px; }
.pg-auth-points > li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.pg-auth-point-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--on-dark-hover);
  color: var(--on-dark-accent);
}
.pg-auth-point-title { font-size: 16px; font-weight: 600; color: var(--white); }
.pg-auth-point-text { font-size: 14px; color: var(--on-dark-muted); }
.pg-auth-brand-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pg-auth-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-pill);
  background: var(--on-dark-hover);
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}
.pg-auth-pill-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--rose-200); color: var(--plum-900); }
.pg-auth-brand-note { max-width: 460px; font-size: 14px; color: var(--on-dark-muted); }
.pg-auth-brand-note a { font-weight: 600; color: var(--on-dark-accent); }
.pg-auth-main { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.pg-auth-card {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(20px, 3vw, 40px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.pg-auth-tabs { display: flex; align-self: stretch; }
.pg-auth-tabs .segment { flex: 1 1 0; min-height: 44px; font-size: 15px; font-weight: 600; }
.pg-auth-head { display: flex; flex-direction: column; gap: 6px; }
.pg-auth-title { font-size: 32px; line-height: 1.12; }
.pg-auth-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.pg-auth-row .check { font-weight: 400; }
.pg-auth-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; font-size: 14px; color: var(--muted); text-align: center; }
.pg-auth-switch .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.pg-auth-logout { padding-top: 16px; border-top: 1px solid var(--line); }
.pg-auth-back { align-self: flex-start; }
.pg-auth-social-note { margin-top: -8px; }

@media (max-width: 860px) {
  .pg-auth-brand { padding: 24px; gap: 16px; }
  .pg-auth-brand-title { font-size: 32px; }
}

/* 6. ERREURS ------------------------------------------------------------- */
.pg-error { padding-bottom: var(--section-y); }
.pg-error-inner { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 64px); }
.pg-error-main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.pg-error-title { text-wrap: balance; }
.pg-error-lead { max-width: 580px; }
.pg-error-subtitle { font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.pg-error-list { display: flex; flex-direction: column; gap: 16px; }
.pg-error-list > li { display: flex; align-items: flex-start; gap: 14px; }
.pg-error-list > li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-error-list .pg-round-icon { border: 1px solid var(--line); background: var(--white); }
.pg-error-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white);
  box-shadow: var(--shadow-search);
}
.pg-error-search-field { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pg-error-search-submit { flex: 0 0 auto; }
.pg-error-art { flex: 1 1 340px; min-width: 0; display: flex; justify-content: center; }
.pg-swatch-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 24px; padding: 28px 28px 24px; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.pg-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; }
.pg-swatch { aspect-ratio: 3 / 4; border: 1px solid transparent; border-radius: 999px 999px 14px 14px; }
.pg-swatch-1 { background: var(--blush-100); border-color: var(--line); }
.pg-swatch-2 { background: var(--rose-200); border-color: var(--rose-200); }
.pg-swatch-3 { background: var(--rose-300); border-color: var(--rose-300); }
.pg-swatch-4 { background: var(--mauve-500); border-color: var(--mauve-500); }
.pg-swatch-5 { background: var(--mauve-600); border-color: var(--mauve-600); }
.pg-swatch-6 { background: var(--plum-600); border-color: var(--plum-600); }
.pg-swatch-7 { background: var(--blush-50); border: 2px dashed var(--line-strong); }
.pg-swatch-8 { background: var(--plum-900); border-color: var(--plum-900); }
.pg-swatch-9 { background: var(--ivory); border-color: var(--line); }
.pg-swatch-10 { background: var(--sand-100); border-color: var(--line); }
.pg-swatch-11 { background: var(--sage-100); border-color: var(--line); }
.pg-swatch-12 { background: var(--sage-500); border-color: var(--sage-500); }
.pg-swatch-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.pg-swatch-code { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--plum-700); font-variant-numeric: tabular-nums; }
.pg-swatch-caption { font-size: 14px; font-weight: 500; color: var(--muted); text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .pg-profile-card, .pg-recap-edit { transition: none; }
}

/* 7. SUIVI DE DEMANDE (phase 2) — requests/track, renvoi de confirmation, estimation du formulaire ---- */
.pg-timeline > li.is-warn .pg-timeline-marker { border-color: var(--amber-50); background: var(--amber-50); color: var(--amber-700); }
.pg-timeline > li.is-warn::before { background: var(--line-strong); }
.pg-timeline > li.is-closed .pg-timeline-marker { border-color: var(--blush-100); background: var(--blush-100); color: var(--plum-700); }
.pg-track-chances, .pg-track-manage { display: flex; flex-direction: column; gap: 20px; }
.pg-track-chances { border: 2px solid var(--plum-700); }
.pg-track-block { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.pg-track-block-head { display: flex; align-items: flex-start; gap: 16px; }
.pg-track-block-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pg-track-block-title { font-family: var(--font-ui); font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.pg-track-details { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.pg-track-details > summary.button { width: auto; align-self: flex-start; }
.pg-track-details[open] > summary.button { background: var(--blush-100); }
.pg-track-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--plum-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pg-track-form { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--blush-50); }
.pg-track-form .segmented { max-width: 100%; }
.pg-track-form .segment { min-height: 44px; padding: 0 18px; font-size: 15px; }
.pg-track-confirm { border-color: var(--danger-line); background: var(--danger-50); }
.pg-track-limit { align-self: flex-start; }
.pg-resend { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.pg-estimate-widen { margin-top: 8px; }
.pg-reassure[aria-busy="true"] .alert-body { opacity: .7; }

@media (max-width: 860px) {
  .pg-track-details > summary.button { width: 100%; }
  .pg-track-form { padding: 16px; }
}

/* 8. COMPTES (PHASE 2) ---------------------------------------------------- */
/* Lien de connexion par email, sous « Se connecter » */
.pg-magic { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pg-magic-button { min-height: 44px; }
.pg-magic-sent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--sage-100);
  font-size: 14px;
  color: var(--plum-900);
  text-align: left;
}
.pg-magic-sent .icon { flex-shrink: 0; margin-top: 1px; color: var(--sage-700); }
.pg-magic-title { font-weight: 600; color: var(--sage-700); }

/* Désinscription en un clic depuis un email */
.pg-mailpref { padding-bottom: var(--section-y); }
.pg-mailpref-card {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(20px, 3vw, 40px);
}
.pg-mailpref-title { font-size: clamp(28px, 3vw, 36px); text-wrap: balance; }
.pg-mailpref-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.pg-mailpref-actions .link-action { min-height: 44px; }

/* Tarifs › Mise en avant (option ponctuelle, affichée seulement quand l'offre est active) */
.pg-boost-inner { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); align-items: flex-start; }
.pg-boost-inner > .stack { flex: 2 1 480px; min-width: 0; }
.pg-boost-card { flex: 1 1 340px; min-width: 0; background: var(--white); }
.pg-boost-note { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.pg-boost-note > .icon { flex: none; margin-top: 2px; }
.pg-boost-profiles { display: flex; flex-direction: column; }
.pg-boost-profile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.pg-boost-profile .pg-profile-text { flex: 1 1 180px; }