/* =========================================================
   BUREAU (≥ 1024 px) du PARCOURS DE COMMANDE
   checkout.html · upsell.html · merci.html · telechargement.html
   + pages politiques (mentions-legales, confidentialite, remboursement : data-page="legal", cadre commun + bloc POLITIQUES)
   + page FAQ (faq.html : data-page="faq", même cadre que les politiques + bloc FAQ)
   Chargé APRÈS styles.css, uniquement par ces pages.
   · Même technique que le bloc bureau de styles.css : --dpx = 1 px sur une maquette 1440 × 810
     (clamp 0.8 → 1.4), fonds 16:9 sans texte --dt-bg-* (déclarés dans styles.css, même media query).
   · Portée : body[data-page="checkout" | "upsell" | "thanks" | "downloads"] ; préfixe html[lang]
     pour l'emporter sur les variantes html[lang="ar"] du mobile.
   · Mobile (< 1024 px) : intact — tout est dans la media query. Les éléments ajoutés pour le bureau
     (.ty-next) sont display:none hors bureau ; .offer-box__aside est display:contents
     (aucune boîte générée, la grille/flex mobile ne change pas).
   · Composition LOGIQUE (inline-start / inline-end) : le bureau se reflète entre AR (rtl) et EN (ltr).
     Checkout / upsell : panneau photo collant à inline-end ; merci / téléchargement : fond plein écran.
   ========================================================= */
.ty-next { display: none; }
.offer-box__aside { display: contents; }

@media (min-width: 1024px) {
  /* ---------- Cadre commun aux quatre pages ---------- */
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) { background: var(--cream); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .page { width: 100%; max-width: none; box-shadow: none; overflow: visible; }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .page--flow { min-height: 100vh; padding-bottom: 0; background: var(--cream); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .lang-switch { top: calc(22 * var(--dpx)); right: auto; inset-inline-end: calc(28 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .lang-switch button { min-width: calc(48 * var(--dpx)); height: calc(32 * var(--dpx)); padding: 0 calc(14 * var(--dpx)); font-size: calc(14 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .lang-switch button[lang="ar"] { font-size: calc(15 * var(--dpx)); }

  /* En-tête : marque (inline-start) + étape (inline-end), titre / sécurité / sous-titre en dessous */
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .flow-head { padding: calc(26 * var(--dpx)) 0 calc(6 * var(--dpx)); gap: calc(6 * var(--dpx)) calc(20 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .brand--flow { gap: calc(10 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .brand--flow .brand__mark { width: calc(44 * var(--dpx)); height: calc(44 * var(--dpx)); min-width: 0; min-height: 0; }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .brand--flow .brand__word { font-size: calc(17 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .flow-head__step { font-size: calc(14 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .flow-head .h { margin: calc(18 * var(--dpx)) 0 calc(6 * var(--dpx)); font-size: calc(40 * var(--dpx)); line-height: 1.3; }
  html[lang="en"] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .flow-head .h { font-size: calc(44 * var(--dpx)); line-height: 1.06; }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .flow-head .secure { margin-top: calc(2 * var(--dpx)); gap: calc(8 * var(--dpx)); font-size: calc(14 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .flow-head .secure .i { width: calc(20 * var(--dpx)); height: calc(20 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .flow-head .lead { margin: 0 auto; max-width: calc(720 * var(--dpx)); font-size: calc(18 * var(--dpx)); line-height: 1.55; }

  /* Dégagement du libellé d'étape sous la pastille de langue (fixed) quand la gouttière centrée est étroite (1024-1100 px) */
  html[lang] body:is([data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .flow-head { padding-inline-end: max(0px, calc(160 * var(--dpx) - (100vw - 1040 * var(--dpx)) / 2)); }
  /* Pied de page : pleine largeur de la colonne de contenu */
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .footer--flow { margin-top: calc(16 * var(--dpx)); padding: calc(14 * var(--dpx)) 0 calc(18 * var(--dpx)); font-size: calc(13 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .footer__links { gap: calc(6 * var(--dpx)) calc(26 * var(--dpx)); margin-bottom: calc(8 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .footer a { font-size: calc(14 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .footer .footer__credit { margin-top: calc(4 * var(--dpx)); font-size: calc(12.5 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"], [data-page="faq"]) .footer .footer__credit a { font-size: inherit; }

  /* Composants partagés : boutons, notes, étiquettes, montants */
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .btn { height: calc(56 * var(--dpx)); gap: calc(12 * var(--dpx)); padding: 0 calc(28 * var(--dpx)); font-size: calc(18 * var(--dpx)); box-shadow: 0 calc(10 * var(--dpx)) calc(24 * var(--dpx)) rgba(134, 9, 12, .28), inset 0 1px 0 rgba(255, 255, 255, .15); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .btn .i { width: calc(22 * var(--dpx)); height: calc(22 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .btn--ghost { height: calc(48 * var(--dpx)); font-size: calc(15 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .note { font-size: calc(14 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .note--center { font-size: calc(14.5 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .note--box { padding: calc(14 * var(--dpx)) calc(20 * var(--dpx)); border-radius: calc(16 * var(--dpx)); font-size: calc(15 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .tag { padding: calc(3 * var(--dpx)) calc(10 * var(--dpx)); font-size: calc(12 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .amt { font-size: calc(20 * var(--dpx)); gap: calc(4 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .amt--lg { font-size: calc(26 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .amt--xl { font-size: calc(42 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .amt--was { font-size: calc(15 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .amt-row { gap: calc(8 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .form-msg { font-size: calc(14 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .form-msg--block { margin-bottom: calc(10 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .dl-state { margin: calc(6 * var(--dpx)) 0 calc(14 * var(--dpx)); font-size: calc(14 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .demo-pay { gap: calc(12 * var(--dpx)); padding: calc(16 * var(--dpx)); border-radius: calc(14 * var(--dpx)); font-size: calc(14 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"], [data-page="thanks"], [data-page="downloads"], [data-page="legal"]) .demo-pay__offer { font-size: calc(13 * var(--dpx)); }

  /* Panneau photo collant (checkout, upsell) : pseudo-élément de la grille, pleine hauteur d'écran, à inline-end */
  html[lang] body:is([data-page="checkout"], [data-page="upsell"]) .page--flow::before { content: ""; grid-row: 1 / -1; align-self: start; position: sticky; top: 0; height: 100vh; background-color: #e9d3bb; background-size: cover; background-repeat: no-repeat; }

  /* ---------- Bloc paiement Whop (checkout + upsell) : cadre blanc, iframe centrée ---------- */
  html[lang] body:is([data-page="checkout"], [data-page="upsell"]) .pay { padding: calc(20 * var(--dpx)) calc(24 * var(--dpx)); border-radius: calc(18 * var(--dpx)); gap: calc(12 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"]) .pay__head { font-size: calc(18 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"]) .pay__by { font-size: calc(12 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"]) .note--whop { font-size: calc(13.5 * var(--dpx)); }
  html[lang] body:is([data-page="checkout"], [data-page="upsell"]) .whop-slot { width: 100%; max-width: calc(520 * var(--dpx)); min-height: calc(80 * var(--dpx)); margin: 0 auto; }

  /* =========================================================
     CHECKOUT en 3 écrans (demande Hamza 2026-10-20) — un seul écran visible ; app.js pose data-screen sur .page--flow
     (details | addons | payment). En-tête commun : marque + indicateur d'étapes (.stepper).
     Écran 1 (maquette 62) : colonne centrée à inline-start (en-tête, titre, récapitulatif produit, formulaire),
     photo pleine hauteur à inline-end (50 %).
     Écrans 2 et 3 (maquettes 65 + 63) : marque à inline-start + indicateur au centre ; chaque écran est sa propre grille :
     colonne récapitulatif collante à inline-start (produit + lignes du panier à l'écran 2 ; produit + récapitulatif
     acheteur / panier avec « تعديل » à l'écran 3), contenu de l'écran au centre, photo étroite à inline-end.
     ========================================================= */
  html[lang] body[data-page="checkout"] .page--flow {
    display: grid;
    grid-template-columns: minmax(calc(40 * var(--dpx)), 1fr) minmax(0, calc(560 * var(--dpx))) minmax(calc(40 * var(--dpx)), 1fr) 50%;
    grid-template-rows: auto auto 1fr auto;
  }
  html[lang] body[data-page="checkout"] .page--flow::before { grid-column: 4; background-image: var(--dt-bg-hero); background-position: 100% 50%; }
  html[lang] body[data-page="checkout"] .flow-head { grid-column: 2; grid-row: 1; grid-template-columns: 1fr; justify-items: center; padding-top: calc(22 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .flow-head > .brand--flow { grid-column: 1; grid-row: 1; justify-self: center; }
  html[lang] body[data-page="checkout"] .flow-head__step { display: none; }
  html[lang] body[data-page="checkout"] .screen { grid-column: 2; grid-row: 2; margin: calc(10 * var(--dpx)) 0 0; gap: calc(12 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .footer--flow { grid-column: 2; grid-row: 4; }

  /* Indicateur d'étapes (maquettes 62/65) : mêmes états que sur téléphone, à l'échelle --dpx */
  html[lang] body[data-page="checkout"] .stepper { --dot: calc(30 * var(--dpx)); grid-auto-columns: calc(150 * var(--dpx)); justify-content: center; width: auto; max-width: none; margin: calc(12 * var(--dpx)) 0 0; }
  html[lang] body[data-page="checkout"] .stepper li { gap: calc(6 * var(--dpx)); font-size: calc(13.5 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .stepper__dot { font-size: calc(14 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .stepper li + li::after { inset-inline-end: calc(50% + var(--dot) / 2 + 8 * var(--dpx)); width: calc(100% - var(--dot) - 16 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .stepper li.is-current .stepper__dot { box-shadow: 0 calc(4 * var(--dpx)) calc(10 * var(--dpx)) rgba(160, 19, 22, .28); }

  /* Titres d'écran, cartes, liens */
  html[lang] body[data-page="checkout"] .screen__head { gap: calc(4 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .screen__title { margin: calc(6 * var(--dpx)) 0 0; font-size: calc(40 * var(--dpx)); line-height: 1.3; }
  html[lang="en"] body[data-page="checkout"] .screen__title { font-size: calc(44 * var(--dpx)); line-height: 1.06; }
  html[lang] body[data-page="checkout"] .screen__head .secure { gap: calc(8 * var(--dpx)); font-size: calc(14 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .screen__head .secure .i { width: calc(20 * var(--dpx)); height: calc(20 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .screen__lead { font-size: calc(16.5 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .screen__card { padding: calc(20 * var(--dpx)); border-radius: calc(18 * var(--dpx)); box-shadow: 0 calc(6 * var(--dpx)) calc(20 * var(--dpx)) rgba(70, 25, 10, .06); }
  html[lang] body[data-page="checkout"] .back-link { min-height: calc(40 * var(--dpx)); padding: 0 calc(14 * var(--dpx)); gap: calc(6 * var(--dpx)); font-size: calc(14.5 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .back-link .i { width: calc(16 * var(--dpx)); height: calc(16 * var(--dpx)); }

  /* ---------- Écrans 2 et 3 : page plus large (récapitulatif + contenu), photo étroite ---------- */
  html[lang] body[data-page="checkout"] .page--flow:not([data-screen="details"]) {
    grid-template-columns: calc(40 * var(--dpx)) minmax(0, calc(1008 * var(--dpx))) calc(40 * var(--dpx)) minmax(calc(150 * var(--dpx)), 1fr);
  }
  html[lang] body[data-page="checkout"] .page--flow:not([data-screen="details"])::before { grid-column: 4; background-position: 90% 50%; }
  html[lang] body[data-page="checkout"] .page--flow:not([data-screen="details"]) .flow-head { grid-template-columns: 1fr auto 1fr; justify-items: stretch; padding-top: calc(26 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .page--flow:not([data-screen="details"]) .flow-head > .brand--flow { justify-self: start; }
  html[lang] body[data-page="checkout"] .page--flow:not([data-screen="details"]) .flow-head > .stepper { grid-column: 2; grid-row: 1; margin: 0; }
  html[lang] body[data-page="checkout"] :is(.screen--addons, .screen--payment) {
    display: grid; grid-template-columns: minmax(0, calc(340 * var(--dpx))) calc(28 * var(--dpx)) minmax(0, 1fr);
    align-items: start; column-gap: 0; row-gap: calc(14 * var(--dpx));
  }
  html[lang] body[data-page="checkout"] .screen--addons { grid-template-areas: "head head head" "aside . body" "aside . bar" "aside . back"; grid-template-rows: auto auto auto 1fr; }
  html[lang] body[data-page="checkout"] .screen--payment { grid-template-areas: "head head head" "aside . pay" "aside . back"; grid-template-rows: auto auto 1fr; }
  html[lang] body[data-page="checkout"] .screen__head { grid-area: head; }
  html[lang] body[data-page="checkout"] .screen--addons .bump { grid-area: body; }
  html[lang] body[data-page="checkout"] .screen--payment .pay { grid-area: pay; }
  html[lang] body[data-page="checkout"] .back-link { grid-area: back; justify-self: center; }
  /* Colonne récapitulatif collante */
  html[lang] body[data-page="checkout"] .screen__aside { grid-area: aside; position: sticky; top: calc(24 * var(--dpx)); gap: calc(12 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .summary--aside { display: grid; }
  /* Écran 2 : le bouton reste dans la colonne (pas de barre collée sur bureau) */
  html[lang] body[data-page="checkout"] .screen__bar { grid-area: bar; position: static; margin: calc(4 * var(--dpx)) 0 0; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Récapitulatif produit compact (couverture, titre, prix) */
  html[lang] body[data-page="checkout"] .summary { grid-template-columns: calc(56 * var(--dpx)) 1fr auto; gap: calc(14 * var(--dpx)); padding: calc(12 * var(--dpx)) calc(16 * var(--dpx)); border-radius: calc(16 * var(--dpx)); box-shadow: 0 calc(6 * var(--dpx)) calc(20 * var(--dpx)) rgba(70, 25, 10, .08); }
  html[lang] body[data-page="checkout"] .summary__cover { width: calc(56 * var(--dpx)); height: calc(79 * var(--dpx)); border-radius: calc(8 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .summary__kicker { font-size: max(12px, calc(11 * var(--dpx))); }
  html[lang] body[data-page="checkout"] .summary__title { margin: calc(2 * var(--dpx)) 0; font-size: calc(16 * var(--dpx)); line-height: 1.35; }
  html[lang="en"] body[data-page="checkout"] .summary__title { font-size: calc(17 * var(--dpx)); line-height: 1.15; }
  html[lang] body[data-page="checkout"] .summary__meta { font-size: max(12px, calc(12.5 * var(--dpx))); }
  html[lang] body[data-page="checkout"] .summary .price { padding-inline-end: calc(4 * var(--dpx)); gap: calc(4 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .price--sm .price__num { font-size: calc(28 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .price--sm .price__cur { font-size: calc(13 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .price--sm .price__cur--pre { font-size: calc(15 * var(--dpx)); margin-top: calc(2 * var(--dpx)); }

  /* Formulaire (écran 1) */
  html[lang] body[data-page="checkout"] .lead-form { gap: calc(10 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .field { height: calc(52 * var(--dpx)); min-height: 0; border-radius: calc(12 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .field__icon { width: calc(20 * var(--dpx)); height: calc(20 * var(--dpx)); margin-inline: calc(16 * var(--dpx)) calc(12 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .field input { font-size: calc(16 * var(--dpx)); padding-inline-end: calc(14 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .dial { padding: 0 calc(10 * var(--dpx)); margin-inline-end: calc(10 * var(--dpx)); font-size: calc(15 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .lead-form .btn { width: 100%; margin-top: calc(6 * var(--dpx)); }

  /* Options (écran 2) */
  html[lang] body[data-page="checkout"] .bump { gap: calc(12 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .bump__opt { --media: calc(100 * var(--dpx)); padding: calc(14 * var(--dpx)) calc(18 * var(--dpx)); gap: calc(16 * var(--dpx)); border-radius: calc(16 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .bump__opt.is-on { box-shadow: 0 0 0 calc(4 * var(--dpx)) #F3D5C9; }
  html[lang] body[data-page="checkout"] img.bump__cover { border-radius: calc(6 * var(--dpx)); box-shadow: 0 calc(3 * var(--dpx)) calc(8 * var(--dpx)) rgba(60, 20, 5, .22); }
  html[lang] body[data-page="checkout"] .bump__grid > * { border-radius: calc(4 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .bump__txt { gap: calc(4 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .bump__t { font-size: calc(17 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .bump__x { font-size: calc(13.5 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .bump__opt .amt { font-size: calc(20 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .bump__opt .amt--was { font-size: calc(15 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .bump__radio { width: calc(28 * var(--dpx)); height: calc(28 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .bump__radio--sm { width: calc(24 * var(--dpx)); height: calc(24 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .bump__none { min-height: calc(52 * var(--dpx)); padding: calc(12 * var(--dpx)) calc(18 * var(--dpx)); border-radius: calc(14 * var(--dpx)); font-size: calc(15 * var(--dpx)); gap: calc(12 * var(--dpx)); }

  /* Lignes du panier (colonne collante) et récapitulatif de l'écran 3 */
  html[lang] body[data-page="checkout"] .lines { padding: calc(16 * var(--dpx)) calc(18 * var(--dpx)); border-radius: calc(18 * var(--dpx)); gap: calc(10 * var(--dpx)); box-shadow: 0 calc(6 * var(--dpx)) calc(20 * var(--dpx)) rgba(70, 25, 10, .06); }
  html[lang] body[data-page="checkout"] .lines__row { gap: calc(12 * var(--dpx)); font-size: calc(15 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .lines__row .amt { font-size: calc(15 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .lines__total { gap: calc(12 * var(--dpx)); font-size: calc(17 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .lines--flat { padding: 0; border-radius: 0; box-shadow: none; }
  html[lang] body[data-page="checkout"] .recap { padding: 0 calc(18 * var(--dpx)); border-radius: calc(18 * var(--dpx)); box-shadow: 0 calc(6 * var(--dpx)) calc(20 * var(--dpx)) rgba(70, 25, 10, .06); }
  html[lang] body[data-page="checkout"] .recap__row { column-gap: calc(10 * var(--dpx)); row-gap: calc(4 * var(--dpx)); padding: calc(14 * var(--dpx)) 0; }
  html[lang] body[data-page="checkout"] .recap__label { font-size: max(12px, calc(12.5 * var(--dpx))); }
  html[lang] body[data-page="checkout"] .recap__edit { min-height: calc(36 * var(--dpx)); margin-block: calc(-10 * var(--dpx)); font-size: calc(14 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .recap__val { font-size: max(13px, calc(15 * var(--dpx))); }
  html[lang] body[data-page="checkout"] .recap__meta { font-size: max(12px, calc(13.5 * var(--dpx))); }

  /* ---------- Checkout v2 « écran unique » (CHECKOUT-V2) : cadre des écrans 2 et 3 (data-screen="order" → page large,
     photo étroite). Récapitulatif + total collants à inline-start ; colonne principale : « بياناتك », collection (photo à
     côté de la case), bouton + encart verrouillé, puis le paiement une fois déverrouillé. ---------- */
  html[lang] body[data-page="checkout"] .screen--order {
    display: grid; grid-template-columns: minmax(0, calc(340 * var(--dpx))) calc(28 * var(--dpx)) minmax(0, 1fr);
    grid-template-areas: "head head head" "aside . form" "aside . coll" "aside . cta" "aside . pay";
    grid-template-rows: auto auto auto auto 1fr;
    align-items: start; column-gap: 0; row-gap: calc(14 * var(--dpx));
  }
  html[lang] body[data-page="checkout"] .screen--order > .screen__head { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  html[lang] body[data-page="checkout"] .screen--order > .order-card { grid-area: form; }
  html[lang] body[data-page="checkout"] .screen--order > .coll { grid-area: coll; }
  html[lang] body[data-page="checkout"] .screen--order > .order-cta { grid-area: cta; }
  html[lang] body[data-page="checkout"] .screen--order > .pay { grid-area: pay; }
  html[lang] body[data-page="checkout"] .screen--order .lines { display: flex; }
  html[lang] body[data-page="checkout"] .summary--banner { grid-template-columns: minmax(0, 1fr) auto; row-gap: calc(12 * var(--dpx)); padding: calc(12 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .summary--banner .summary__info { padding-inline-start: calc(4 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .summary__banner { border-radius: calc(10 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .summary__seal { top: calc(-18 * var(--dpx)); left: calc(-18 * var(--dpx)); font-size: calc(12.5 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .summary--banner .price--sm .price__num { font-size: calc(38 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .summary--banner .summary__price .amt--was { font-size: calc(17 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .summary__feats { gap: calc(8 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .summary__feats li { gap: calc(6 * var(--dpx)); padding: calc(10 * var(--dpx)) calc(6 * var(--dpx)); border-radius: calc(12 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .summary__feats .i { width: calc(26 * var(--dpx)); height: calc(26 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .summary__feats span { font-size: calc(13 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .summary__price { gap: calc(2 * var(--dpx)); padding-inline-end: calc(4 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .summary__price .amt--was { font-size: calc(13.5 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .order-card { gap: calc(12 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .order-card__title { font-size: calc(17 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .coll { display: grid; grid-template-columns: calc(230 * var(--dpx)) minmax(0, 1fr); align-items: center; gap: calc(16 * var(--dpx)); padding: calc(12 * var(--dpx)); border-radius: calc(16 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .coll:has(input:checked) { box-shadow: 0 0 0 calc(4 * var(--dpx)) #F3D5C9; }
  html[lang] body[data-page="checkout"] .coll__img { border-radius: calc(10 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .coll__check { min-height: calc(48 * var(--dpx)); gap: calc(12 * var(--dpx)); padding-inline: 0; }
  html[lang] body[data-page="checkout"] .coll__box { width: calc(26 * var(--dpx)); height: calc(26 * var(--dpx)); border-radius: calc(7 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .coll__t { font-size: calc(17 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .coll__x { font-size: calc(14 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .coll__x .amt { font-size: calc(16 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .coll__x .amt--was { font-size: calc(14 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .order-cta { gap: calc(10 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .pay-lock { min-height: calc(52 * var(--dpx)); gap: calc(8 * var(--dpx)); padding: calc(10 * var(--dpx)) calc(16 * var(--dpx)); border-radius: calc(14 * var(--dpx)); font-size: calc(14.5 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .pay-lock .i { width: calc(18 * var(--dpx)); height: calc(18 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .trust { gap: calc(8 * var(--dpx)) calc(12 * var(--dpx)); scroll-margin-top: calc(24 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .trust__txt { font-size: calc(15 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .trust__txt .i { width: calc(18 * var(--dpx)); height: calc(18 * var(--dpx)); margin-inline-end: calc(7 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .trust__logos .pm { height: calc(24 * var(--dpx)); }
  html[lang] body[data-page="checkout"] .note--after { font-size: max(12px, calc(13 * var(--dpx))); }

  /* =========================================================
     UPSELL : titre centré, carte offre = couvertures + puces (inline-start) / prix + CTA + paiement (aside collant),
     photo étroite à inline-end
     ========================================================= */
  html[lang] body[data-page="upsell"] .page--flow {
    display: grid;
    grid-template-columns: calc(40 * var(--dpx)) minmax(0, calc(1000 * var(--dpx))) calc(40 * var(--dpx)) minmax(calc(150 * var(--dpx)), 1fr);
    grid-template-rows: auto auto auto auto 1fr auto;
  }
  html[lang] body[data-page="upsell"] .page--flow::before { grid-column: 4; background-image: var(--dt-bg-l5); background-position: 20% 50%; }
  html[lang] body[data-page="upsell"] .page--flow > * { grid-column: 2; }
  html[lang] body[data-page="upsell"] .flow-head { grid-row: 1; }
  html[lang] body[data-page="upsell"] .confirm-bar { grid-row: 2; width: fit-content; max-width: 100%; margin: calc(6 * var(--dpx)) auto 0; padding: calc(9 * var(--dpx)) calc(22 * var(--dpx)); border-radius: 999px; gap: calc(8 * var(--dpx)); font-size: calc(15 * var(--dpx)); }
  html[lang] body[data-page="upsell"] .up-intro { grid-row: 3; padding: calc(16 * var(--dpx)) 0 0; gap: calc(8 * var(--dpx)); }
  html[lang] body[data-page="upsell"] .kicker { font-size: calc(14 * var(--dpx)); }
  html[lang] body[data-page="upsell"] .up-intro .h { font-size: calc(36 * var(--dpx)); line-height: 1.3; }
  html[lang="en"] body[data-page="upsell"] .up-intro .h { font-size: calc(40 * var(--dpx)); line-height: 1.08; }
  html[lang] body[data-page="upsell"] .up-intro .lead { max-width: calc(760 * var(--dpx)); margin: 0 auto; font-size: calc(17 * var(--dpx)); line-height: 1.55; }
  html[lang] body[data-page="upsell"] .offer-box { grid-row: 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(340 * var(--dpx))); grid-template-rows: auto 1fr; column-gap: calc(28 * var(--dpx)); row-gap: calc(18 * var(--dpx)); align-items: start; margin: calc(20 * var(--dpx)) 0 0; padding: calc(24 * var(--dpx)); border-radius: calc(24 * var(--dpx)); box-shadow: 0 calc(10 * var(--dpx)) calc(30 * var(--dpx)) rgba(70, 25, 10, .07); }
  html[lang] body[data-page="upsell"] .covers3 { grid-column: 1; grid-row: 1; max-width: calc(580 * var(--dpx)); margin: 0 auto; gap: calc(16 * var(--dpx)); }
  html[lang] body[data-page="upsell"] .covers3 img, html[lang] body[data-page="upsell"] .covers3 .cover-ph { border-radius: calc(12 * var(--dpx)); box-shadow: 0 calc(8 * var(--dpx)) calc(18 * var(--dpx)) rgba(60, 20, 5, .2); }
  html[lang] body[data-page="upsell"] .covers3__owned { bottom: calc(10 * var(--dpx)); }
  html[lang] body[data-page="upsell"] .checks--sm { grid-column: 1; grid-row: 2; gap: calc(8 * var(--dpx)); max-width: calc(580 * var(--dpx)); width: 100%; margin: 0 auto; }
  html[lang] body[data-page="upsell"] .checks--sm li { gap: calc(10 * var(--dpx)); font-size: calc(15.5 * var(--dpx)); line-height: 1.45; }
  html[lang] body[data-page="upsell"] .checks--sm .i { width: calc(20 * var(--dpx)); height: calc(20 * var(--dpx)); min-width: 0; min-height: 0; }
  html[lang] body[data-page="upsell"] .offer-box__aside { display: flex; flex-direction: column; gap: calc(14 * var(--dpx)); grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(24 * var(--dpx)); padding: calc(20 * var(--dpx)); border-radius: calc(18 * var(--dpx)); background: var(--sel-bg); border: 1.5px solid var(--line); }
  html[lang] body[data-page="upsell"] .price-row { gap: calc(10 * var(--dpx)); padding: calc(14 * var(--dpx)); border-radius: calc(14 * var(--dpx)); background: #fff; }
  html[lang] body[data-page="upsell"] .offer-box .btn { width: 100%; height: auto; min-height: calc(56 * var(--dpx)); padding: calc(8 * var(--dpx)) calc(18 * var(--dpx)); font-size: calc(17 * var(--dpx)); line-height: 1.25; white-space: normal; text-align: center; }
  html[lang] body[data-page="upsell"] .step--pay { margin: 0; padding: calc(14 * var(--dpx)) calc(16 * var(--dpx)); border-radius: calc(14 * var(--dpx)); box-shadow: none; }
  html[lang] body[data-page="upsell"] .step--pay .pay__head { font-size: calc(16 * var(--dpx)); }
  html[lang] body[data-page="upsell"] .skip { margin: calc(2 * var(--dpx)) auto 0; font-size: calc(14 * var(--dpx)); }
  html[lang] body[data-page="upsell"] .page--flow > .note { grid-row: 5; align-self: start; max-width: calc(760 * var(--dpx)); margin: calc(16 * var(--dpx)) auto 0; }
  html[lang] body[data-page="upsell"] .footer--flow { grid-row: 6; }

  /* =========================================================
     MERCI (maquette 64) : fond photo plein écran adouci, carte de confirmation (inline-start) + « ce qui se passe maintenant »
     (inline-end), vignettes des fichiers en rangée, notes centrées
     ========================================================= */
  html[lang] body:is([data-page="thanks"], [data-page="downloads"]) .page--flow {
    background: linear-gradient(rgba(246, 227, 207, .48), rgba(246, 227, 207, .66)) center / cover no-repeat fixed, var(--dt-bg-hero) center / cover no-repeat fixed, var(--cream);
  }
  html[lang] body[data-page="thanks"] .page--flow {
    display: grid;
    grid-template-columns: minmax(calc(40 * var(--dpx)), 1fr) minmax(0, calc(640 * var(--dpx))) calc(28 * var(--dpx)) minmax(0, calc(372 * var(--dpx))) minmax(calc(40 * var(--dpx)), 1fr);
    grid-template-rows: auto auto auto auto 1fr auto;
  }
  html[lang] body[data-page="thanks"] .page--flow > * { grid-column: 2 / 5; }
  html[lang] body[data-page="thanks"] .flow-head { grid-row: 1; }
  /* AR : carte à GAUCHE et colonne « ماذا يحدث الآن؟ » à DROITE comme la maquette 64 (pistes inversées en rtl) */
  html[lang][dir="rtl"] body[data-page="thanks"] .page--flow { grid-template-columns: minmax(calc(40 * var(--dpx)), 1fr) minmax(0, calc(372 * var(--dpx))) calc(28 * var(--dpx)) minmax(0, calc(640 * var(--dpx))) minmax(calc(40 * var(--dpx)), 1fr); }
  html[lang][dir="rtl"] body[data-page="thanks"] .thanks-card { grid-column: 4; }
  html[lang][dir="rtl"] body[data-page="thanks"] .ty-next { grid-column: 2; }
  html[lang] body[data-page="thanks"] .thanks-card { grid-column: 2; grid-row: 2; margin: calc(16 * var(--dpx)) 0 0; padding: calc(30 * var(--dpx)) calc(36 * var(--dpx)); border-radius: calc(24 * var(--dpx)); background: rgba(253, 243, 231, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  html[lang] body[data-page="thanks"] .thanks-card__ico { width: calc(64 * var(--dpx)); height: calc(64 * var(--dpx)); }
  html[lang] body[data-page="thanks"] .thanks-card .h { margin: calc(14 * var(--dpx)) 0 calc(8 * var(--dpx)); font-size: calc(34 * var(--dpx)); line-height: 1.3; }
  html[lang="en"] body[data-page="thanks"] .thanks-card .h { font-size: calc(36 * var(--dpx)); line-height: 1.08; }
  html[lang] body[data-page="thanks"] .thanks-card .lead { margin-bottom: calc(16 * var(--dpx)); font-size: calc(17 * var(--dpx)); line-height: 1.55; }
  html[lang] body[data-page="thanks"] .thanks-card__post { margin-bottom: calc(16 * var(--dpx)); padding: calc(10 * var(--dpx)); border-radius: calc(10 * var(--dpx)); font-size: calc(14 * var(--dpx)); }
  html[lang] body[data-page="thanks"] .thanks-card .btn { width: auto; min-width: calc(280 * var(--dpx)); margin: 0 auto; }
  html[lang] body[data-page="thanks"] .thanks-card__mail { margin-bottom: 0; padding: calc(12 * var(--dpx)); border-radius: calc(10 * var(--dpx)); font-size: calc(14 * var(--dpx)); }
  html[lang] body[data-page="thanks"] .thanks-card .note { margin-top: calc(14 * var(--dpx)); }
  /* Colonne « ماذا يحدث الآن؟ » (bureau uniquement) */
  html[lang] body[data-page="thanks"] .ty-next { display: flex; flex-direction: column; align-self: start; grid-column: 4; grid-row: 2; margin: calc(16 * var(--dpx)) 0 0; padding: calc(24 * var(--dpx)); border-radius: calc(24 * var(--dpx)); background: rgba(253, 243, 231, .9); border: 1.5px solid var(--card-line); box-shadow: 0 8px 26px rgba(70, 25, 10, .08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  html[lang] body[data-page="thanks"] .ty-next__title { margin: 0 0 calc(14 * var(--dpx)); font-family: var(--serif); font-weight: 800; font-size: calc(21 * var(--dpx)); line-height: 1.3; color: var(--ink-2); }
  html[lang="en"] body[data-page="thanks"] .ty-next__title { font-size: calc(22 * var(--dpx)); letter-spacing: -.02em; }
  html[lang] body[data-page="thanks"] .ty-next ol { display: flex; flex-direction: column; gap: calc(14 * var(--dpx)); margin: 0; padding: 0; list-style: none; }
  html[lang] body[data-page="thanks"] .ty-next li { display: grid; grid-template-columns: calc(40 * var(--dpx)) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: calc(12 * var(--dpx)); row-gap: calc(2 * var(--dpx)); align-items: start; }
  html[lang] body[data-page="thanks"] .ty-next li .i { grid-row: 1 / span 2; box-sizing: border-box; width: calc(40 * var(--dpx)); height: calc(40 * var(--dpx)); padding: calc(10 * var(--dpx)); border-radius: 50%; background: var(--sel-bg); color: var(--red-2); stroke-width: 2; }
  html[lang] body[data-page="thanks"] .ty-next li b { font-size: calc(15.5 * var(--dpx)); font-weight: 800; line-height: 1.35; color: var(--ink-2); }
  html[lang] body[data-page="thanks"] .ty-next li span { font-size: calc(13.5 * var(--dpx)); line-height: 1.5; color: var(--muted-2); }
  html[lang] body[data-page="thanks"] .owned { grid-row: 3; margin: calc(20 * var(--dpx)) 0 0; gap: calc(10 * var(--dpx)); }
  html[lang] body[data-page="thanks"] .owned__kicker { font-size: calc(14 * var(--dpx)); text-align: center; }
  /* Textes posés directement sur la photo : pastille translucide pour la lisibilité */
  html[lang] body:is([data-page="thanks"], [data-page="downloads"]) .owned__kicker,
  html[lang] body[data-page="thanks"] .page--flow > .note:not(.note--box),
  html[lang] body[data-page="downloads"] .downloads > .note { width: fit-content; max-width: 100%; margin-inline: auto; padding: calc(5 * var(--dpx)) calc(16 * var(--dpx)); border-radius: 999px; background: rgba(253, 243, 231, .8); }
  html[lang] body[data-page="downloads"] .downloads .dl-state { padding: calc(6 * var(--dpx)) calc(16 * var(--dpx)); border-radius: 999px; background: rgba(253, 243, 231, .8); }
  html[lang] body[data-page="downloads"] .downloads .demo-pay { background-color: rgba(253, 243, 231, .8); }
  html[lang] body[data-page="thanks"] .page--flow > .note--box { grid-row: 4; width: fit-content; max-width: calc(760 * var(--dpx)); margin: calc(18 * var(--dpx)) auto 0; text-align: center; background: rgba(255, 243, 234, .92); }
  html[lang] body[data-page="thanks"] .page--flow > .note:not(.note--box) { grid-row: 5; align-self: start; justify-self: center; margin: calc(12 * var(--dpx)) auto 0; }
  html[lang] body[data-page="thanks"] .footer--flow { grid-row: 6; }

  /* =========================================================
     TÉLÉCHARGEMENT : grille centrée de couvertures (titre + sous-titre + bouton), bandeau démo et note centrés
     ========================================================= */
  html[lang] body[data-page="downloads"] .page--flow {
    display: grid;
    grid-template-columns: minmax(calc(40 * var(--dpx)), 1fr) minmax(0, calc(1040 * var(--dpx))) minmax(calc(40 * var(--dpx)), 1fr);
    grid-template-rows: auto 1fr auto;
  }
  html[lang] body[data-page="downloads"] .page--flow > * { grid-column: 2; }
  html[lang] body[data-page="downloads"] .flow-head { grid-row: 1; }
  html[lang] body[data-page="downloads"] .downloads { grid-row: 2; align-self: start; display: flex; flex-direction: column; align-items: center; margin: calc(10 * var(--dpx)) 0 0; }
  html[lang] body[data-page="downloads"] .downloads .demo-pay { width: 100%; max-width: calc(760 * var(--dpx)); margin: 0 auto calc(16 * var(--dpx)); padding: calc(12 * var(--dpx)) calc(16 * var(--dpx)); }
  html[lang] body[data-page="downloads"] .downloads .owned__kicker { margin-bottom: calc(12 * var(--dpx)); font-size: calc(14 * var(--dpx)); }
  html[lang] body[data-page="downloads"] .downloads .dl-list { width: 100%; }
  html[lang] body[data-page="downloads"] .downloads .note { margin-top: calc(18 * var(--dpx)); }
  html[lang] body[data-page="downloads"] .footer--flow { grid-row: 3; }

  /* Vignettes de fichiers (merci + téléchargement) : cartes verticales, couverture en haut */
  html[lang] body:is([data-page="thanks"], [data-page="downloads"]) .dl-list { grid-template-columns: repeat(auto-fit, calc(236 * var(--dpx))); justify-content: center; gap: calc(16 * var(--dpx)); }
  html[lang] body:is([data-page="thanks"], [data-page="downloads"]) .dl-item { display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--dpx)); padding: calc(16 * var(--dpx)) calc(14 * var(--dpx)) calc(16 * var(--dpx)); border-radius: calc(18 * var(--dpx)); background: rgba(253, 243, 231, .9); text-align: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  html[lang] body:is([data-page="thanks"], [data-page="downloads"]) .dl-item img, html[lang] body:is([data-page="thanks"], [data-page="downloads"]) .dl-item .cover-ph { width: calc(110 * var(--dpx)); border-radius: calc(8 * var(--dpx)); box-shadow: 0 calc(6 * var(--dpx)) calc(14 * var(--dpx)) rgba(60, 20, 5, .22); }
  html[lang] body:is([data-page="thanks"], [data-page="downloads"]) .dl-item__info { width: 100%; }
  html[lang] body:is([data-page="thanks"], [data-page="downloads"]) .dl-item__info b { font-size: calc(15.5 * var(--dpx)); line-height: 1.35; }
  html[lang="en"] body:is([data-page="thanks"], [data-page="downloads"]) .dl-item__info b { font-size: calc(16 * var(--dpx)); line-height: 1.15; }
  html[lang] body:is([data-page="thanks"], [data-page="downloads"]) .dl-item__info small { margin-top: calc(3 * var(--dpx)); font-size: calc(12.5 * var(--dpx)); }
  html[lang] body:is([data-page="thanks"], [data-page="downloads"]) .dl-btn { width: 100%; height: calc(44 * var(--dpx)); min-height: 0; margin-top: calc(2 * var(--dpx)); padding: 0 calc(16 * var(--dpx)); gap: calc(8 * var(--dpx)); font-size: calc(14.5 * var(--dpx)); }
  html[lang] body:is([data-page="thanks"], [data-page="downloads"]) .dl-btn .i { width: calc(18 * var(--dpx)); height: calc(18 * var(--dpx)); }
  html[lang] body:is([data-page="thanks"], [data-page="downloads"]) .dl-soon { font-size: calc(13 * var(--dpx)); }
  /* Téléchargement : cartes des fichiers en rangée ; la carte cadeau (مكتبة الرسم) suit en pleine largeur */
  html[lang] body[data-page="downloads"] .dl-list { display: flex; flex-wrap: wrap; }
  html[lang] body[data-page="downloads"] .dl-item { flex: 0 0 calc(236 * var(--dpx)); }

  /* =========================================================
     POLITIQUES (mentions légales, confidentialité, retours) : même fond photo adouci que merci / téléchargement,
     texte dans une carte centrée de lecture confortable (≈ 75 caractères par ligne)
     ========================================================= */
  html[lang] body[data-page="legal"] .page--flow {
    display: grid;
    grid-template-columns: minmax(calc(40 * var(--dpx)), 1fr) minmax(0, calc(860 * var(--dpx))) minmax(calc(40 * var(--dpx)), 1fr);
    grid-template-rows: auto 1fr auto;
    background: linear-gradient(rgba(246, 227, 207, .55), rgba(246, 227, 207, .72)) center / cover no-repeat fixed, var(--dt-bg-hero) center / cover no-repeat fixed, var(--cream);
  }
  html[lang] body[data-page="legal"] .page--flow > * { grid-column: 2; }
  html[lang] body[data-page="legal"] .flow-head { grid-row: 1; }
  html[lang] body[data-page="legal"] .legal { grid-row: 2; align-self: start; margin: calc(12 * var(--dpx)) 0 0; padding: calc(40 * var(--dpx)) calc(56 * var(--dpx)) calc(36 * var(--dpx)); border: 1.5px solid var(--card-line); border-radius: calc(24 * var(--dpx)); background: rgba(253, 243, 231, .93); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 calc(18 * var(--dpx)) calc(48 * var(--dpx)) rgba(70, 25, 10, .10); font-size: calc(17 * var(--dpx)); line-height: 1.8; }
  html[lang="en"] body[data-page="legal"] .legal { line-height: 1.65; }
  html[lang] body[data-page="legal"] .legal h1 { margin: 0 0 calc(4 * var(--dpx)); font-size: calc(40 * var(--dpx)); line-height: 1.3; }
  html[lang="en"] body[data-page="legal"] .legal h1 { font-size: calc(44 * var(--dpx)); line-height: 1.1; letter-spacing: -.02em; }
  html[lang] body[data-page="legal"] .legal h2 { margin: calc(28 * var(--dpx)) 0 calc(8 * var(--dpx)); font-size: calc(24 * var(--dpx)); line-height: 1.35; }
  html[lang="en"] body[data-page="legal"] .legal h2 { font-size: calc(25 * var(--dpx)); line-height: 1.2; }
  html[lang] body[data-page="legal"] .legal p, html[lang] body[data-page="legal"] .legal li { margin: 0 0 calc(10 * var(--dpx)); }
  html[lang] body[data-page="legal"] .legal ul { margin: 0 0 calc(10 * var(--dpx)); }
  html[lang] body[data-page="legal"] .legal__date { margin-bottom: calc(14 * var(--dpx)); font-size: calc(14 * var(--dpx)); }
  html[lang] body[data-page="legal"] .legal .note--box { margin: calc(10 * var(--dpx)) 0 calc(14 * var(--dpx)); padding: calc(14 * var(--dpx)) calc(20 * var(--dpx)); font-size: calc(16 * var(--dpx)); line-height: 1.7; }
  html[lang] body[data-page="legal"] .footer--flow { grid-row: 3; }

  /* =========================================================
     FAQ (faq.html, 2026-10-19 — section retirée de la page de vente) : même cadre que les politiques (fond photo adouci,
     carte centrée de 860 px), accordéon de l'ancienne section FAQ bureau, bouton d'appel identique à celui du hero bureau
     ========================================================= */
  html[lang] body[data-page="faq"] .page--flow {
    display: grid;
    grid-template-columns: minmax(calc(40 * var(--dpx)), 1fr) minmax(0, calc(860 * var(--dpx))) minmax(calc(40 * var(--dpx)), 1fr);
    grid-template-rows: auto 1fr auto;
    background: linear-gradient(rgba(246, 227, 207, .55), rgba(246, 227, 207, .72)) center / cover no-repeat fixed, var(--dt-bg-hero) center / cover no-repeat fixed, var(--cream);
  }
  html[lang] body[data-page="faq"] .page--flow > * { grid-column: 2; }
  html[lang] body[data-page="faq"] .flow-head { grid-row: 1; }
  html[lang] body[data-page="faq"] .faq-page { grid-row: 2; align-self: start; display: flex; flex-direction: column; margin: calc(12 * var(--dpx)) 0 0; padding: calc(40 * var(--dpx)) calc(56 * var(--dpx)) calc(40 * var(--dpx)); border: 1.5px solid var(--card-line); border-radius: calc(24 * var(--dpx)); background: rgba(253, 243, 231, .93); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 calc(18 * var(--dpx)) calc(48 * var(--dpx)) rgba(70, 25, 10, .10); }
  html[lang] body[data-page="faq"] .faq-page > .h { margin: 0; font-size: calc(40 * var(--dpx)); line-height: 1.3; }
  html[lang="en"] body[data-page="faq"] .faq-page > .h { font-size: calc(44 * var(--dpx)); line-height: 1.1; letter-spacing: -.02em; }
  html[lang] body[data-page="faq"] .faq-page > .lead { margin: calc(6 * var(--dpx)) 0 0; font-size: calc(18 * var(--dpx)); line-height: 1.6; }
  html[lang] body[data-page="faq"] .faq { margin-top: calc(26 * var(--dpx)); padding: 0; gap: calc(14 * var(--dpx)); }
  html[lang] body[data-page="faq"] .faq details { padding: calc(16 * var(--dpx)) calc(20 * var(--dpx)); border-radius: calc(18 * var(--dpx)); background: rgba(255, 250, 244, .92); border: 1.5px solid #f1dcc4; box-shadow: 0 2px 14px rgba(70, 25, 10, .05); }
  html[lang] body[data-page="faq"] .faq summary { grid-template-columns: calc(46 * var(--dpx)) minmax(0, 1fr) auto; gap: calc(14 * var(--dpx)); align-items: center; }
  html[lang] body[data-page="faq"] .faq__icon { box-sizing: border-box; width: calc(46 * var(--dpx)); height: calc(46 * var(--dpx)); padding: calc(10 * var(--dpx)); border: 0; border-radius: 50%; background: var(--sel-bg); grid-row: auto; }
  html[lang] body[data-page="faq"] .faq__q { padding-top: 0; font-size: calc(19 * var(--dpx)); line-height: 1.4; }
  html[lang="en"] body[data-page="faq"] .faq__q { font-size: calc(20 * var(--dpx)); line-height: 1.15; }
  html[lang] body[data-page="faq"] .faq__chev { width: calc(22 * var(--dpx)); height: calc(22 * var(--dpx)); margin-top: 0; color: var(--red-2); }
  html[lang] body[data-page="faq"] .faq details p { margin-top: calc(4 * var(--dpx)); padding-inline-start: calc(60 * var(--dpx)); padding-inline-end: calc(36 * var(--dpx)); font-size: calc(16 * var(--dpx)); line-height: 1.65; }
  html[lang="en"] body[data-page="faq"] .faq details p { font-size: calc(16 * var(--dpx)); line-height: 1.5; }
  html[lang] body[data-page="faq"] .cta-solo { width: calc(464 * var(--dpx)); max-width: 100%; height: calc(70 * var(--dpx)); min-height: 0; margin: calc(32 * var(--dpx)) auto 0; padding-inline: calc(24 * var(--dpx)) calc(10 * var(--dpx)); gap: calc(12 * var(--dpx)); font-size: calc(21 * var(--dpx)); box-shadow: 0 calc(14 * var(--dpx)) calc(30 * var(--dpx)) rgba(155, 16, 17, .34), inset 0 1px 0 rgba(255, 255, 255, .18); }
  html[lang] body[data-page="faq"] .cta-solo .i { width: calc(22 * var(--dpx)); height: calc(22 * var(--dpx)); }
  html[lang] body[data-page="faq"] .cta-solo .offer__ico { width: calc(50 * var(--dpx)); height: calc(50 * var(--dpx)); }
  html[lang] body[data-page="faq"] .footer--flow { grid-row: 3; }
}

/* Compte à rebours de l'offre de lancement (2026-10-30) : sur le checkout, le sélecteur de langue passe sous le bandeau */
@media (min-width: 1024px) {
  html.has-cd-bar[lang] body:is([data-page="checkout"]) .lang-switch { top: calc(var(--cd-bar-h, 48px) + 22 * var(--dpx)); }
  html.has-cd-bar[lang] body[data-page="checkout"] .trust { scroll-margin-top: calc(var(--cd-bar-h, 48px) + 24 * var(--dpx)); }
  html.has-cd-bar[lang] body[data-page="checkout"] .screen__aside { top: calc(var(--cd-bar-h, 48px) + 24 * var(--dpx)); }
}