/* =========================================================
   Mécanique du site de vente (vente, paiement, merci, téléchargement) — jetons de couleur et de police dans theme.css
   Dimensions en "pixels maquette" (maquettes de 941 px de large)
   via --px : proportions identiques sur tous les mobiles.
   ========================================================= */

:root {
  /* Repli (navigateurs sans unités de conteneur) : 100vw inclut la barre de défilement classique
     sur desktop (≈15 px) ; la valeur exacte est redéfinie sur .page via 100cqw plus bas. */
  --frame: min(100vw, 620px);
  --px: calc(var(--frame) / 941);

  --bg: #f6e3cf;
  --bg-2: #f8ead9;
  --card: rgba(253, 243, 231, .94);
  --card-solid: #fdf3e7;
  --card-line: #f1dcc4;
  --red: #85070a;
  --red-btn: #a01316;
  --red-btn-2: #86090c;
  --logo: #380302;
  --caramel: #b0743f;
  --ink: #2a1c17;
  --text: #2f2622;
  --muted: #6c5a50;
  --ok: #2f7a45;

  /* Jetons SPEC-UPSELL §1.6 / §6.4 */
  --cream: #F6E3CF;
  --ink-2: #3A0F02;
  --red-2: #9B1011;
  --line: #E6D2C0;
  --muted-2: #7A5A4A;
  --green: #1E6B3A;
  --green-bg: #E3F3E8;
  --sel-bg: #FFF3EA;
  --was: #9A8273;
  --ph-main: #4A3220;
  --ph-gift: #B48A14;

  --serif: var(--serif);
  --sans: var(--num);
  --cta: var(--serif);
  /* Nombres : Figtree dans les deux langues (non redéfini sous html[lang="ar"]) */
  --num: var(--num);
}
html[lang="ar"] {
  --serif: var(--sans);
  --sans: var(--sans);
  --cta: var(--sans);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #e8d4bf; color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
button { font: inherit; }

/* Cadre mesuré sur la largeur CLIENT (100 % = viewport sans barre de défilement), jamais sur 100vw :
   sinon, avec une barre de défilement classique, .page déborde de 15 px et est rognée d'un côté. */
.page { width: min(100%, 620px); margin: 0 auto; background: var(--bg); overflow: hidden; overflow: clip; box-shadow: 0 0 80px rgba(70, 25, 10, .14); container-type: inline-size; }
@supports (width: 1cqw) {
  /* --px des descendants = largeur réelle de .page / 941 (100cqw = inline-size du conteneur .page).
     --px doit être redéclaré ici : la valeur héritée de :root a déjà substitué var(--frame). */
  .page { --frame: min(100cqw, 620px); --px: calc(var(--frame) / 941); }
}

/* ---------- Icônes ---------- */
.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i .f { fill: currentColor; stroke: none; }
[dir="rtl"] .i--arrow { transform: scaleX(-1); }

/* ---------- Typo ---------- */
.h { font-family: var(--serif); font-weight: 700; color: var(--red); letter-spacing: -.035em; text-align: center; text-wrap: balance; }
.h--l1 { font-size: calc(84 * var(--px)); line-height: .98; }
.h--md { font-size: calc(74 * var(--px)); line-height: 1; }
.h--lg { font-size: calc(86 * var(--px)); line-height: .98; }
.h--xl { font-size: calc(100 * var(--px)); line-height: .93; }
.lead { font-size: calc(33 * var(--px)); line-height: 1.25; color: var(--text); text-align: center; text-wrap: pretty; }
.note { font-size: max(12px, calc(24 * var(--px))); line-height: 1.4; color: var(--muted); text-align: center; }
.note:empty { display: none; }
.note--center { font-size: max(12px, calc(27 * var(--px))); color: var(--muted-2); line-height: 1.6; text-align: center; }
.note--box { background: var(--sel-bg); border-radius: calc(34 * var(--px)); padding: calc(29 * var(--px)) calc(34 * var(--px)); text-align: start; font-size: max(12px, calc(27 * var(--px))); line-height: 1.6; color: var(--ink-2); }
.page--flow > .note { margin: calc(24 * var(--px)) calc(40 * var(--px)) 0; }

html[lang="ar"] .h { letter-spacing: 0; font-weight: 800; }
html[lang="ar"] .h--l1 { font-size: calc(66 * var(--px)); line-height: 1.4; }
html[lang="ar"] .h--md { font-size: calc(62 * var(--px)); line-height: 1.4; }
html[lang="ar"] .h--lg { font-size: calc(68 * var(--px)); line-height: 1.35; }
html[lang="ar"] .h--xl { font-size: calc(78 * var(--px)); line-height: 1.3; }
html[lang="ar"] .lead { font-size: calc(30 * var(--px)); line-height: 1.65; }

/* ---------- Marque (SPEC-UPSELL §6.3) ---------- */
.brand { display: flex; align-items: center; gap: calc(19 * var(--px)); text-decoration: none; color: #451500; direction: ltr; }
.brand--section { justify-content: center; width: fit-content; margin: 0 auto; }
.brand--section .brand__img { width: calc(260 * var(--px)); height: auto; display: block; margin: 0 auto; }
.brand--hero .brand__img { width: calc(300 * var(--px)); }
.brand--flow { direction: inherit; gap: calc(14 * var(--px)); }
/* Checkout : lien Accueil (logo 36 px) → zone de toucher de 44 px de haut, apparence inchangée */
body[data-page="checkout"] .brand--flow { position: relative; }
body[data-page="checkout"] .brand--flow::after { content: ""; position: absolute; inset: -4px 0; }
html[lang="ar"] .brand--flow .brand__word { font-family: var(--sans); font-weight: 700; font-size: max(14px, calc(30 * var(--px))); }
.brand--flow .brand__mark { width: calc(87 * var(--px)); height: calc(87 * var(--px)); min-width: 36px; min-height: 36px; border-radius: 50%; flex: none; }
.brand__word { font-family: var(--num); font-weight: 700; font-size: max(14px, calc(34 * var(--px))); line-height: 1; white-space: nowrap; }

/* ---------- Boutons ---------- */
.btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: calc(24 * var(--px));
  width: 100%; height: calc(100 * var(--px)); margin: 0 auto; padding: 0 calc(20 * var(--px));
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #b0191c, var(--red-btn) 45%, var(--red-btn-2));
  color: #fff; font-family: var(--cta); font-weight: 600; font-size: calc(32 * var(--px)); letter-spacing: -.01em; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 calc(12 * var(--px)) calc(26 * var(--px)) rgba(134, 9, 12, .3), inset 0 1px 0 rgba(255, 255, 255, .15);
  transition: filter .2s, transform .2s;
}
html[lang="ar"] .btn { font-weight: 700; font-size: calc(31 * var(--px)); letter-spacing: 0; }
.btn .i { width: calc(38 * var(--px)); height: calc(38 * var(--px)); stroke-width: 1.9; }
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn:focus-visible { outline: 3px solid #e2a37c; outline-offset: 3px; }
.btn:disabled { opacity: .7; cursor: wait; }
.btn--ghost { background: transparent; color: var(--red); border: 2px dashed rgba(133, 7, 10, .45); box-shadow: none; height: calc(84 * var(--px)); font-family: var(--sans); font-size: max(14px, calc(28 * var(--px))); }
.spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.btn.is-loading .i--arrow { display: none; }
.btn.is-loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Prix ---------- */
.price { display: flex; align-items: baseline; justify-content: center; gap: calc(10 * var(--px)); color: var(--red); font-family: var(--serif); font-weight: 700; line-height: 1; unicode-bidi: isolate; }
.price__num { font-family: var(--num); font-weight: 800; font-size: calc(118 * var(--px)); letter-spacing: -.04em; }
.price__cur { font-size: calc(54 * var(--px)); font-style: italic; letter-spacing: -.02em; }
.price__cur--pre { font-style: normal; font-size: calc(62 * var(--px)); align-self: flex-start; margin-top: calc(10 * var(--px)); }
html[lang="ar"] .price__cur { font-family: var(--sans); font-style: normal; font-weight: 800; font-size: calc(30 * var(--px)); letter-spacing: 0; }
.price--xl .price__num { font-size: calc(124 * var(--px)); }
.price--sm .price__num { font-size: calc(58 * var(--px)); }
.price--sm .price__cur { font-size: calc(28 * var(--px)); }
.price--sm .price__cur--pre { font-size: calc(32 * var(--px)); margin-top: calc(4 * var(--px)); }
html[lang="ar"] .price--sm .price__cur { font-size: calc(20 * var(--px)); }

/* ---------- Montants (.amt, SPEC-UPSELL §6.4) — même convention que .price : nombre puis ر.س en rtl, $ puis nombre en ltr ---------- */
.amt { font-family: var(--num); font-weight: 800; font-size: calc(39 * var(--px)); line-height: 1; color: var(--red-2); white-space: nowrap; unicode-bidi: isolate; display: inline-flex; align-items: baseline; gap: calc(6 * var(--px)); }
.amt--lg { font-size: calc(48 * var(--px)); }
.amt--xl { font-size: calc(68 * var(--px)); }
html[lang="ar"] .amt__c { font-family: var(--sans); font-weight: 800; font-size: .6em; }
.amt--was, .amt--was > span { color: var(--was); font-weight: 500; text-decoration: line-through; }
/* Symbole du riyal saoudien (SAMA 2025, SVG) : à gauche du nombre, hauteur des chiffres, espace = 1/3 de sa hauteur */
.sar { display: inline-block; height: .72em; width: auto; aspect-ratio: 1124.14 / 1256.39; vertical-align: baseline; margin-inline-end: .24em; flex: none; overflow: visible; }
.sar-amt { white-space: nowrap; unicode-bidi: isolate; }
.price__num--sar { display: inline-flex; align-items: baseline; }
.amt__n--sar { display: inline-flex; align-items: baseline; }
/* Prix barré : un trait qui traverse aussi le symbole (text-decoration ne s'applique pas au SVG) */
.amt--was .amt__n--sar { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 62% / 100% max(1px, .07em); }
.amt--was { font-size: calc(28 * var(--px)); }
.amt-row { display: flex; align-items: baseline; gap: calc(14 * var(--px)); flex-wrap: wrap; }

/* ---------- Étiquettes ---------- */
.tag { display: inline-block; width: fit-content; padding: calc(5 * var(--px)) calc(16 * var(--px)); border-radius: 999px; font-size: max(11px, calc(24 * var(--px))); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.tag--green { color: var(--green); background: var(--green-bg); }
.tag--red { color: #fff; background: var(--red-2); }

/* ---------- Sélecteur de langue ---------- */
.lang-switch {
  position: fixed; z-index: 50; top: max(8px, env(safe-area-inset-top));
  /* 100 % sur un élément fixed = viewport sans barre de défilement : aligné sur le bord réel de .page */
  right: max(8px, calc((100% - min(100%, 620px)) / 2 + 8px));
  display: flex; gap: 2px; padding: 3px;
  background: rgba(253, 243, 231, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(56, 3, 2, .14); border-radius: 999px; box-shadow: 0 4px 16px rgba(70, 25, 10, .10);
}
.lang-switch button { min-width: 36px; height: 26px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent; font: 600 12px/1 var(--num); color: var(--red); cursor: pointer; }
.lang-switch button[lang="ar"] { font: 700 13px/1 var(--sans); }
.lang-switch button[aria-pressed="true"] { background: var(--red-btn); color: #fff; }
/* Checkout : zone de toucher des boutons de langue agrandie (pseudo-élément invisible) : 44 px de haut, extension vers
   l'extérieur seulement (côté start du premier, côté end du dernier) pour ne pas empiéter sur le bouton voisin. */
body[data-page="checkout"] .lang-switch button { position: relative; }
body[data-page="checkout"] .lang-switch button::after { content: ""; position: absolute; inset: -9px 0; }
body[data-page="checkout"] .lang-switch button:first-child::after { inset-inline-start: -8px; }
body[data-page="checkout"] .lang-switch button:last-child::after { inset-inline-end: -8px; }

/* ---------- Mentions sécurité ---------- */
.secure { display: flex; align-items: center; justify-content: center; gap: calc(28 * var(--px)); font-size: max(12px, calc(23 * var(--px))); line-height: 1.35; color: var(--ink); text-align: start; }
.secure .i { width: calc(42 * var(--px)); height: calc(42 * var(--px)); color: #1d1411; }
.secure--sm { font-size: max(11.5px, calc(21 * var(--px))); gap: calc(18 * var(--px)); }
.secure--sm .i { width: calc(34 * var(--px)); height: calc(34 * var(--px)); }

.dot { display: grid; place-items: center; flex: none; width: calc(64 * var(--px)); height: calc(64 * var(--px)); border-radius: 50%; background: var(--caramel); color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.dot .i { width: 52%; height: 52%; stroke-width: 2.6; }

/* ---------- Couvertures (SPEC-UPSELL §1.1) : vraie image <img> 300 × 424 (ratio A4) quand le PDF est final ;
   placeholder texte .cover-ph--<code> sinon. <img> et .cover-ph partagent la même boîte (ratio, rayon, ombre). ---------- */
.cover-ph { aspect-ratio: 300 / 424; border-radius: calc(19 * var(--px)); color: #FFF6EE; display: flex; align-items: center; justify-content: center; text-align: center; font: 700 max(10px, calc(24 * var(--px))) / 1.3 var(--sans); padding: calc(10 * var(--px)); overflow: hidden; }
.cover-ph--main { background: var(--ph-main); }
.cover-ph--gift { background: var(--ph-gift); }
.cover-ph.is-owned, img.is-owned { opacity: .45; }

/* ================= L1 · HERO (hero-v2 : 941 × 1672, moitié haute vide = textes, cookies en bas) ================= */
.hero {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  min-height: calc(1672 * var(--px)); padding: 0 0 calc(160 * var(--px));
  color: var(--ink-2);
  background-color: var(--cream);
  background-size: cover; background-position: center top; background-repeat: no-repeat;
}
/* Barre du haut : marque (inline-start) + sélecteur de langue (inline-end), le sélecteur n'est plus flottant ici */
.hero__bar { display: flex; align-items: center; justify-content: flex-end; gap: calc(16 * var(--px)); padding: max(10px, calc(16 * var(--px))) calc(40 * var(--px)) 0; }
.hero__bar .lang-switch { position: static; background: #fff; box-shadow: 0 2px 10px rgba(58, 15, 2, .08); }

.hero__content { display: flex; flex-direction: column; align-items: center; text-align: center; width: calc(860 * var(--px)); max-width: calc(100% - 32px); margin: calc(14 * var(--px)) auto 0; }
.hero__logo { display: block; width: calc(270 * var(--px)); margin: 0 auto; }
.hero__logo img { width: 100%; height: auto; filter: drop-shadow(0 calc(8 * var(--px)) calc(18 * var(--px)) rgba(58, 15, 2, .18)); }

.hero__kicker { display: inline-flex; align-items: center; gap: calc(10 * var(--px)); margin-top: calc(26 * var(--px)); padding: calc(6 * var(--px)) calc(22 * var(--px)); border-radius: 999px; background: var(--sel-bg); color: var(--red-2); font-weight: 700; font-size: max(12px, calc(24 * var(--px))); line-height: 1.3; box-shadow: 0 1px 0 rgba(155, 16, 17, .12); }
.hero__kicker .i { width: 1.1em; height: 1.1em; stroke-width: 2.3; }

.hero__title { margin-top: calc(22 * var(--px)); font-family: var(--num); font-weight: 800; font-size: calc(94 * var(--px)); line-height: 1; letter-spacing: -.035em; color: var(--red); text-wrap: balance; }
html[lang="ar"] .hero__title { font-family: var(--sans); font-weight: 900; font-size: calc(118 * var(--px)); line-height: 1.02; letter-spacing: 0; }
.hero__promise { margin: calc(22 * var(--px)) calc(30 * var(--px)) 0; font-weight: 500; font-size: max(14px, calc(31 * var(--px))); line-height: 1.45; color: var(--ink-2); text-wrap: balance; }
html[lang="ar"] .hero__promise { font-weight: 600; line-height: 1.5; }

/* Bouton : pleine largeur de la colonne (max 560 px maquette), rouge plein, libellé + prix dans une pastille */
/* Carte d'offre (maquette validée le 2026-10-08) : badge doré à cheval sur le bord, prix, « بدلاً من », bouton, accès immédiat */
.offer { position: relative; display: flex; flex-direction: column; align-items: center; width: calc(640 * var(--px)); max-width: 100%; margin-top: calc(44 * var(--px) + 15px); padding: calc(44 * var(--px)) calc(30 * var(--px)) calc(26 * var(--px)); border-radius: calc(30 * var(--px)); background: rgba(255, 250, 244, .88); border: 1.5px solid rgba(255, 255, 255, .9); box-shadow: 0 calc(18 * var(--px)) calc(44 * var(--px)) rgba(58, 15, 2, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.offer__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: calc(10 * var(--px)); padding: calc(8 * var(--px)) calc(26 * var(--px)); border-radius: 999px; background: linear-gradient(180deg, #EBCB84, #D8A64A); color: #6A3A05; font-weight: 800; font-size: max(13px, calc(30 * var(--px))); white-space: nowrap; box-shadow: 0 calc(6 * var(--px)) calc(16 * var(--px)) rgba(120, 70, 10, .25); }
.offer__badge .i { width: calc(32 * var(--px)); height: calc(32 * var(--px)); min-width: 14px; min-height: 14px; stroke-width: 2; }
.offer__price { margin-top: calc(6 * var(--px)); }
.offer__price .price__num { font-size: calc(150 * var(--px)); }
.offer__price .price__cur { font-size: calc(52 * var(--px)); font-style: normal; font-family: var(--sans); font-weight: 800; }
.offer__was { margin: calc(4 * var(--px)) 0 0; display: flex; align-items: baseline; justify-content: center; gap: calc(10 * var(--px)); font-size: max(12px, calc(26 * var(--px))); font-weight: 600; color: #9A8273; }
.offer__was .amt--was { font-size: max(12px, calc(27 * var(--px))); }
.offer__btn { width: 100%; margin-top: calc(22 * var(--px)); height: calc(108 * var(--px)); min-height: 52px; justify-content: space-between; gap: calc(12 * var(--px)); padding-inline: calc(26 * var(--px)) calc(12 * var(--px)); font-size: max(14px, calc(30 * var(--px))); white-space: nowrap; }
.offer__btn > span:first-child { white-space: nowrap; }
html[lang="ar"] .offer__btn { font-size: max(14px, calc(29 * var(--px))); }
.offer__ico { display: flex; align-items: center; justify-content: center; width: calc(76 * var(--px)); height: calc(76 * var(--px)); min-width: 36px; min-height: 36px; border-radius: 50%; background: #FFFFFF; color: var(--red-2); flex-shrink: 0; }
.offer__ico .i { width: calc(34 * var(--px)); height: calc(34 * var(--px)); min-width: 16px; min-height: 16px; stroke-width: 2.6; }
.offer__note { margin: calc(18 * var(--px)) 0 0; display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--px)); font-size: max(12px, calc(26 * var(--px))); font-weight: 600; color: #5A4036; }
.offer__note .i { width: calc(28 * var(--px)); height: calc(28 * var(--px)); min-width: 12px; min-height: 12px; color: #3A0F02; }

/* Carte d'offre du hero, version « sceau » (image de référence de Hamza, 20/10) : sceau rouge « خصم 40% » à cheval sur le bord
   (côté fin de ligne : gauche en arabe, droite en anglais), 96 agrandi sur un coup de pinceau doré, ancien prix dans une pastille rose
   barrée en rouge. Le pourcentage vient de PRICES (app.js renderPrices). */
.hero .offer { padding-inline: calc(30 * var(--px)) calc(30 * var(--px)); }
.offer__seal { position: absolute; z-index: 2; top: calc(70 * var(--px)); inset-inline-end: calc(-62 * var(--px)); width: calc(230 * var(--px)); height: calc(230 * var(--px)); min-width: 92px; min-height: 92px; transform: rotate(-9deg); filter: drop-shadow(0 calc(10 * var(--px)) calc(14 * var(--px)) rgba(110, 8, 20, .35)); pointer-events: none; }
.offer__seal[hidden] { display: none; }
.offer__seal-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.offer__seal-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; padding-bottom: 4%; }
.offer__seal-k { color: #FFF6EA; font-family: var(--sans); font-weight: 900; font-size: max(14px, calc(40 * var(--px))); line-height: 1.05; }
html[lang="en"] .offer__seal-k { font-family: var(--num); font-size: max(12px, calc(32 * var(--px))); letter-spacing: .04em; }
.offer__seal-pct { font-family: var(--num); font-weight: 900; font-size: max(25px, calc(70 * var(--px))); letter-spacing: -.03em; line-height: 1; margin-top: 2%;
  background: linear-gradient(180deg, #FFF0B8 0%, #F7CE62 45%, #E3A238 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #7E0A16) drop-shadow(0 2px 2px rgba(60, 0, 8, .45)); }
.offer__seal-swoosh { width: 52%; height: auto; margin-top: 3%; }
.offer__hero-price { position: relative; display: flex; justify-content: center; margin-top: calc(10 * var(--px)); padding-inline-end: calc(70 * var(--px)); }
.hero .offer__hero-price .offer__price { position: relative; z-index: 1; margin-top: 0; gap: 0; }
.hero .offer__price .price__num { font-size: calc(196 * var(--px)); line-height: 1; letter-spacing: -.05em; }
.hero .offer__price .price__num .sar { height: .4em; margin-inline-end: .14em; }
.offer__brush { position: absolute; z-index: 0; left: 50%; bottom: calc(6 * var(--px)); width: calc(330 * var(--px)); height: calc(52 * var(--px)); transform: translateX(calc(-50% - 35 * var(--px))) rotate(-2deg); }
.hero .offer__was { margin-top: calc(12 * var(--px)); padding: calc(8 * var(--px)) calc(38 * var(--px)); border-radius: 999px; background: #F5E1DD; gap: calc(16 * var(--px)); align-items: center; font-size: max(15px, calc(34 * var(--px))); font-weight: 700; color: #6E5B50; }
.hero .offer__was .amt--was, .hero .offer__was .amt--was > span, .hero .offer__was .amt--was .amt__n--sar { text-decoration: none; background: none; }
.hero .offer__was .amt--was, .hero .offer__was .amt--was > span { position: relative; font-size: max(21px, calc(54 * var(--px))); font-weight: 900; color: #5E4E45; }
.hero .offer__was .amt--was > span { font-size: 1em; }
.hero .offer__was .amt--was .sar { height: .62em; }
.hero .offer__was .amt--was::after { content: ""; position: absolute; left: -6%; right: -6%; top: 54%; height: max(2px, calc(5 * var(--px))); border-radius: 3px; background: #C8102E; transform: rotate(-9deg); }
.hero__btn { position: relative; white-space: normal; background: linear-gradient(180deg, #B6161A 0%, #9B1011 55%, #7F0A0C 100%); font-family: var(--sans); font-size: max(15px, calc(31 * var(--px))); font-weight: 800; line-height: 1.2; text-wrap: balance; box-shadow: 0 calc(16 * var(--px)) calc(34 * var(--px)) rgba(155, 16, 17, .34), inset 0 1px 0 rgba(255, 255, 255, .18); animation: heroBump 2.4s ease-in-out infinite; will-change: transform; transition: filter .18s ease; }
.hero__btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(155, 16, 17, .55); opacity: 0; animation: heroRing 2.4s ease-out infinite; pointer-events: none; }
html[lang="ar"] .hero__btn { font-size: max(15px, calc(32 * var(--px))); }
.hero__btn .i { width: calc(36 * var(--px)); height: calc(36 * var(--px)); min-width: 16px; min-height: 16px; flex-shrink: 0; }
.hero__btn:hover { filter: brightness(1.06); }
.hero__btn:active { transform: scale(.985); }
@keyframes heroBump { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes heroRing { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.18); opacity: 0; } 100% { transform: scale(1.18); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__btn, .hero__btn::after { animation: none; } }

/* Rangée de confiance : 3 colonnes, icônes trait sur tuiles blanches arrondies */

/* Ligne manuscrite : seul texte posé sur la zone photo (coin bas-gauche, parchemin), −6°, bordeaux + petit cœur */
.hero__hand { position: absolute; left: calc(44 * var(--px)); bottom: calc(64 * var(--px)); max-width: calc(520 * var(--px)); display: flex; align-items: center; gap: calc(10 * var(--px)); transform: rotate(-6deg); transform-origin: left bottom; color: var(--red); font-family: var(--sign); font-weight: 700; font-size: max(16px, calc(44 * var(--px))); line-height: 1.15; text-align: start; text-shadow: 0 0 calc(14 * var(--px)) rgba(246, 227, 207, .95), 0 0 calc(4 * var(--px)) rgba(246, 227, 207, .9); }
html[lang="ar"] .hero__hand { font-family: var(--sign); font-weight: 700; font-size: max(15px, calc(36 * var(--px))); line-height: 1.5; }
/* EN tient sur deux lignes (≈835 px maquette en Caveat 44) : on équilibre la coupure plutôt que de rétrécir la police */
.hero__hand span { text-wrap: balance; }
.hero__hand .i { width: calc(34 * var(--px)); height: calc(34 * var(--px)); min-width: 14px; min-height: 14px; color: var(--red-2); }

/* ================= L3 · CE QUE VOUS RECEVEZ ================= */
.l3 { padding: calc(20 * var(--px)) 0 calc(50 * var(--px)); background: linear-gradient(#f7e6d3, #efd8bf 70%, #ecd3b9); }
.l3 > .h { margin: calc(24 * var(--px)) calc(40 * var(--px)) calc(26 * var(--px)); font-size: calc(76 * var(--px)); }
.l3__devices { width: 100%; margin-top: calc(-6 * var(--px)); -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 7%, #000 90%, transparent); }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(26 * var(--px)); padding: 0 calc(65 * var(--px)); margin-top: calc(-20 * var(--px)); position: relative; }
.features li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(22 * var(--px)) calc(12 * var(--px)) calc(24 * var(--px)); background: rgba(250, 236, 220, .92); border-radius: calc(18 * var(--px)); box-shadow: 0 2px 12px rgba(70, 25, 10, .06); }
.features .i { width: calc(66 * var(--px)); height: calc(66 * var(--px)); color: var(--red); stroke-width: 1.4; margin-bottom: calc(12 * var(--px)); }
.features h3 { font-family: var(--serif); font-weight: 700; font-size: calc(24.5 * var(--px)); line-height: 1.08; letter-spacing: -.03em; color: var(--red); margin-bottom: calc(12 * var(--px)); }
.features p { font-size: calc(20.5 * var(--px)); line-height: 1.3; color: var(--text); }
html[lang="ar"] .features h3 { font-size: calc(22 * var(--px)); line-height: 1.45; letter-spacing: 0; font-weight: 800; }
html[lang="ar"] .features p { font-size: calc(19 * var(--px)); line-height: 1.6; }
/* Bouton d'appel identique au hero (.hero__btn.offer__btn, 2026-10-19) hors de la carte d'offre : même largeur que dans le hero */
.offer__btn.cta-solo { width: calc(580 * var(--px)); max-width: calc(100% - 32px); }
.l3 .cta-solo { margin-top: calc(34 * var(--px)); }

/* ================= FAQ : accordéon (page faq.html depuis le 2026-10-19, ancienne section L4 de l'accueil) ================= */
.faq { position: relative; z-index: 1; display: grid; gap: calc(16 * var(--px)); padding: 0 calc(46 * var(--px)); }
.faq details { background: rgba(252, 242, 229, .95); border: 1.5px solid var(--card-line); border-radius: calc(22 * var(--px)); padding: calc(26 * var(--px)) calc(34 * var(--px)) calc(24 * var(--px)) calc(26 * var(--px)); box-shadow: 0 2px 12px rgba(70, 25, 10, .05); }
html[dir="rtl"] .faq details { padding: calc(26 * var(--px)) calc(26 * var(--px)) calc(24 * var(--px)) calc(34 * var(--px)); }
.faq summary { display: grid; grid-template-columns: calc(96 * var(--px)) 1fr auto; align-items: start; gap: calc(28 * var(--px)); list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq__icon { width: calc(92 * var(--px)); height: calc(92 * var(--px)); color: var(--red); stroke-width: 1.35; padding-inline-end: calc(10 * var(--px)); border-inline-end: 1.5px solid #e2cbb3; box-sizing: content-box; grid-row: span 2; }
.faq__q { font-family: var(--serif); font-weight: 700; font-size: calc(38 * var(--px)); line-height: 1.06; letter-spacing: -.035em; color: var(--red); padding-top: calc(6 * var(--px)); }
html[lang="ar"] .faq__q { font-size: calc(31 * var(--px)); line-height: 1.5; letter-spacing: 0; font-weight: 800; padding-top: 0; }
.faq__chev { width: calc(40 * var(--px)); height: calc(40 * var(--px)); color: var(--ink); stroke-width: 2.2; margin-top: calc(10 * var(--px)); transition: transform .25s; }
.faq details:not([open]) .faq__chev { transform: rotate(-90deg); }
[dir="rtl"] .faq details:not([open]) .faq__chev { transform: rotate(90deg); }
.faq details p { margin-top: calc(12 * var(--px)); padding-inline-start: calc(136 * var(--px)); padding-inline-end: calc(60 * var(--px)); font-size: calc(27 * var(--px)); line-height: 1.22; color: var(--text); }
html[lang="ar"] .faq details p { font-size: calc(26 * var(--px)); line-height: 1.65; margin-top: 0; }

/* ================= L5 · OFFRE FINALE ================= */
.l5 { padding-top: calc(40 * var(--px)); background: linear-gradient(#f6e4d0, #f1ddc6); }
.l5 > .h { margin: calc(30 * var(--px)) calc(50 * var(--px)) calc(20 * var(--px)); font-size: calc(88 * var(--px)); }
.l5 > .lead { font-size: calc(34 * var(--px)); margin-bottom: calc(24 * var(--px)); }
.l5__stage { position: relative; min-height: calc(1100 * var(--px)); overflow: hidden; }
.l5__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; -webkit-mask-image: linear-gradient(transparent, #000 6%); mask-image: linear-gradient(transparent, #000 6%); }
/* La photo n'est pas inversée en RTL : le panneau reste à droite, au-dessus de la zone floue. */
.l5__panel { position: absolute; top: calc(10 * var(--px)); right: calc(21 * var(--px)); width: calc(580 * var(--px)); display: flex; flex-direction: column; align-items: stretch; }
.checks { display: grid; gap: calc(12 * var(--px)); width: calc(333 * var(--px)); margin-left: auto; }
.checks li { display: flex; align-items: center; gap: calc(24 * var(--px)); min-height: calc(92 * var(--px)); padding: calc(12 * var(--px)) calc(18 * var(--px)); background: rgba(253, 245, 236, .9); border-radius: calc(16 * var(--px)); font-size: calc(25 * var(--px)); line-height: 1.2; color: var(--ink); box-shadow: 0 2px 10px rgba(70, 25, 10, .06); }
html[lang="ar"] .checks li { font-size: calc(24 * var(--px)); line-height: 1.45; }
.checks .dot { width: calc(52 * var(--px)); height: calc(52 * var(--px)); }
.pricebox { margin-top: calc(20 * var(--px)); padding: calc(26 * var(--px)) calc(20 * var(--px)) calc(22 * var(--px)); text-align: center; background: linear-gradient(#fbecd9, #f8e1c4); border: 2px solid #f3d3b0; border-radius: calc(22 * var(--px)); box-shadow: inset 0 0 0 calc(8 * var(--px)) rgba(255, 250, 243, .55), 0 6px 20px rgba(70, 25, 10, .08); }
.pricebox__label { font-family: var(--serif); font-weight: 700; font-size: calc(34 * var(--px)); letter-spacing: -.03em; color: var(--red); margin-bottom: calc(6 * var(--px)); }
html[lang="ar"] .pricebox__label { font-size: calc(30 * var(--px)); letter-spacing: 0; font-weight: 800; }
/* Bouton du hero à la même largeur que dans le hero (580, libellé sur une ligne) : le panneau prend cette largeur pour que le
   bouton reste dedans (relecture du 2026-10-19) ; carte de prix + bouton = un seul bloc calé à droite, la liste garde ses 333. */
.l5__panel .l5__cta { width: 100%; margin: calc(26 * var(--px)) 0 0; }
.l5__panel .secure { margin-top: calc(30 * var(--px)); }
/* Téléphones < 414 px : les 4 boutons identiques (hero, « شوف بالضبط », offre finale, FAQ) gardent leur libellé sur une ligne
   sans toucher le rond-flèche : à 320 px le libellé arabe (188 px en 15 px) remplissait un bouton de 195 px et le rond en sortait.
   Libellé 14 px, marges 14/6, écart 8 et largeur mini 244 px pour les 4 (carte du hero = 244 + ses marges intérieures). */
@media (max-width: 413.98px) {
  html[lang] .hero__btn { font-size: 14px; gap: 8px; padding-inline: 14px 6px; }
  .offer { width: max(calc(640 * var(--px)), calc(247px + 60 * var(--px))); }
  .offer__btn.cta-solo, .l5__panel { width: max(calc(580 * var(--px)), 244px); }
}

/* ================= FOOTER ================= */
.footer { padding: calc(30 * var(--px)) calc(40 * var(--px)) calc(40 * var(--px)); background: #efd8bf; text-align: center; font-size: max(11px, calc(21 * var(--px))); color: #7a655a; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px calc(40 * var(--px)); margin-bottom: calc(10 * var(--px)); }
/* Téléphone : 5 liens depuis l'ajout de la FAQ → lignes équilibrées (3 + 2) plutôt qu'un lien seul en 2e ligne ; bureau inchangé */
@media (max-width: 1023.98px) {
  .footer__links { display: block; text-wrap: balance; }
  .footer__links a { display: inline-block; margin: 3px calc(20 * var(--px)); }
}
/* Réseaux sociaux (page de vente) */
.footer__social { display: flex; justify-content: center; gap: max(10px, calc(18 * var(--px))); margin: 0 0 calc(14 * var(--px)); }
.footer__social:not(:has(.social:not([hidden]))) { display: none; }
.social { display: inline-grid; place-items: center; width: max(36px, calc(62 * var(--px))); height: max(36px, calc(62 * var(--px))); border-radius: 50%; background: #fff7ee; color: var(--red-2); box-shadow: 0 1px 0 rgba(122, 101, 90, .18); transition: transform .15s, background .15s; }
.social:hover { transform: translateY(-1px); background: #fff; }
.social svg { width: 52%; height: 52%; }
.footer a { color: #5a453b; text-decoration: none; font-size: max(12px, calc(23 * var(--px))); }
.footer a:hover { text-decoration: underline; }
.footer--flow { background: transparent; margin-top: calc(20 * var(--px)); }
/* Crédit « Powered by Growth Creators » sous le © (toutes les pages) */
.footer__meta p { margin: 0; }
.footer .footer__credit { margin-top: calc(8 * var(--px)); font-size: max(11px, calc(19 * var(--px))); color: #8d7c72; }
.footer .footer__credit a { font-size: inherit; font-weight: 700; color: var(--red-2); }

/* =========================================================
   PARCOURS D'ACHAT : paiement, upsell, merci, téléchargement, pages légales
   ========================================================= */
.page--flow { min-height: 100vh; background: radial-gradient(120% 45% at 50% 0%, #f9ecdc, var(--bg) 70%); padding-bottom: calc(20 * var(--px)); }
/* En-tête de parcours : 1re ligne = marque (inline-start) + étape (inline-end) ; h1 / secure / lead en dessous, pleine largeur. */
.flow-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(6 * var(--px)) calc(20 * var(--px)); padding: max(52px, calc(60 * var(--px))) calc(40 * var(--px)) calc(10 * var(--px)); text-align: center; }
.flow-head > .brand--flow { grid-column: 1; justify-self: start; }
.flow-head__step { grid-column: 2; margin: 0; font-size: max(12px, calc(29 * var(--px))); font-weight: 600; color: var(--muted-2); white-space: nowrap; }
.flow-head > .h, .flow-head > .secure, .flow-head > .lead { grid-column: 1 / -1; }
.flow-head .h { margin: calc(30 * var(--px)) 0 calc(18 * var(--px)); }
.flow-head .secure { margin-top: calc(10 * var(--px)); }
.flow-head .lead { margin: 0 calc(30 * var(--px)); }

.summary, .step, .thanks-card, .offer-box, .owned { margin: calc(24 * var(--px)) calc(40 * var(--px)) 0; }
.summary { display: grid; grid-template-columns: calc(135 * var(--px)) 1fr auto; align-items: center; gap: calc(26 * var(--px)); padding: calc(22 * var(--px)); background: var(--card); border: 1.5px solid var(--card-line); border-radius: calc(24 * var(--px)); box-shadow: 0 6px 22px rgba(70, 25, 10, .08); }
.summary__cover { width: calc(135 * var(--px)); height: calc(191 * var(--px)); object-fit: cover; border-radius: calc(14 * var(--px)); box-shadow: 0 4px 12px rgba(60, 20, 5, .22); }
.summary__kicker { font-size: max(11px, calc(20 * var(--px))); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
html[lang="ar"] .summary__kicker { letter-spacing: 0; }
.summary__title { font-family: var(--serif); font-weight: 700; font-size: max(15px, calc(34 * var(--px))); line-height: 1.08; letter-spacing: -.03em; color: var(--red); margin: calc(6 * var(--px)) 0; }
html[lang="ar"] .summary__title { font-size: max(14px, calc(28 * var(--px))); line-height: 1.45; letter-spacing: 0; font-weight: 800; }
.summary__meta { font-size: max(12px, calc(22 * var(--px))); color: var(--muted); }
.summary .price { padding-inline-end: calc(10 * var(--px)); }

.step { padding: calc(30 * var(--px)) calc(34 * var(--px)); background: var(--card); border: 1.5px solid var(--card-line); border-radius: calc(24 * var(--px)); box-shadow: 0 6px 22px rgba(70, 25, 10, .06); }
.step--pay { margin: calc(26 * var(--px)) 0 0; }

/* ---------- Checkout en 3 écrans (demande Hamza 2026-10-20) : indicateur d'étapes + un seul écran visible ----------
   .page--flow[data-screen] = details | addons | payment (app.js, initCheckout) ; écrans masqués par l'attribut hidden.
   Téléphone : une colonne par écran (ici) ; bureau ≥ 1024 px : desktop-flow.css. */
.flow-head > .stepper { grid-column: 1 / -1; }
.stepper { --dot: max(26px, calc(56 * var(--px))); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; max-width: 440px; margin: max(12px, calc(26 * var(--px))) auto 0; padding: 0; list-style: none; counter-reset: cstep; }
.stepper li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; counter-increment: cstep; font-size: max(12px, calc(24 * var(--px))); font-weight: 700; line-height: 1.3; color: var(--muted-2); text-align: center; }
.stepper__dot { position: relative; z-index: 1; display: grid; place-items: center; width: var(--dot); height: var(--dot); border-radius: 50%; border: 2px solid #cdb8a4; background: #fff no-repeat center / 58%; color: #8a7568; font: 700 max(12px, calc(25 * var(--px))) / 1 var(--num); }
.stepper__dot::before { content: counter(cstep); }
/* Trait vers l'étape précédente (de point à point, 1fr = distance entre deux centres) */
.stepper li + li::after { content: ""; position: absolute; top: calc(var(--dot) / 2 - 1px); inset-inline-end: calc(50% + var(--dot) / 2 + 6px); width: calc(100% - var(--dot) - 12px); height: 2px; border-radius: 2px; background: #d9c6b2; }
.stepper li:is(.is-current, .is-done) { color: var(--red); }
.stepper li:is(.is-current, .is-done)::after { background: var(--red-btn); }
.stepper li:is(.is-current, .is-done) .stepper__dot { border-color: var(--red-btn); background-color: var(--red-btn); color: #fff; }
.stepper li.is-current .stepper__dot { box-shadow: 0 0 0 4px rgba(160, 19, 22, .14); }
.stepper li.is-done .stepper__dot { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.stepper li.is-done .stepper__dot::before { content: ""; }

.screen { display: flex; flex-direction: column; gap: max(14px, calc(28 * var(--px))); margin: max(12px, calc(26 * var(--px))) calc(40 * var(--px)) 0; }
.screen__head { display: flex; flex-direction: column; align-items: center; gap: max(4px, calc(10 * var(--px))); text-align: center; }
.screen__title { margin: 0; }
.screen__title:focus { outline: none; } /* focus posé par script à chaque écran (lecteurs d'écran), pas un élément interactif */
.screen__lead { font-size: max(14px, calc(30 * var(--px))); line-height: 1.5; color: var(--muted-2); text-wrap: balance; }
.screen .summary { margin: 0; }
.summary--aside { display: none; } /* copie du récapitulatif produit pour la colonne collante du bureau */
.screen__aside { display: flex; flex-direction: column; gap: max(14px, calc(28 * var(--px))); }
.screen__card { padding: calc(30 * var(--px)) calc(34 * var(--px)); background: var(--card); border: 1.5px solid var(--card-line); border-radius: calc(24 * var(--px)); box-shadow: 0 6px 22px rgba(70, 25, 10, .06); }
/* Écran 2 : barre d'action collée en bas de l'écran du téléphone, « المتابعة إلى الدفع · total » */
.screen__bar { position: sticky; bottom: 0; z-index: 5; margin: 0 calc(-40 * var(--px)); padding: 10px calc(40 * var(--px)) max(10px, env(safe-area-inset-bottom)); background: rgba(248, 234, 217, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -1px 0 rgba(122, 90, 74, .14), 0 -10px 24px rgba(70, 25, 10, .07); }
.btn__label { display: inline-flex; align-items: baseline; gap: .45em; min-width: 0; }
.btn__amt { display: inline-flex; align-items: baseline; font-family: var(--num); font-weight: 800; }
.btn__amt::before { content: "·"; margin-inline-end: .45em; opacity: .8; }
.btn__amt:empty { display: none; }
.back-link { align-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--muted-2); font: 600 max(14px, calc(27 * var(--px))) var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.back-link .i { width: 16px; height: 16px; stroke-width: 2.2; }
[dir="rtl"] .i--back { transform: scaleX(-1); }

/* Écran 3 : récapitulatif acheteur + panier, chacun avec « تعديل » */
.recap { display: flex; flex-direction: column; padding: 0 max(14px, calc(34 * var(--px))); background: #fff; border: 1.5px solid var(--line); border-radius: max(16px, calc(39 * var(--px))); }
.recap__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 4px; padding: max(12px, calc(26 * var(--px))) 0; }
.recap__row + .recap__row { border-top: 1px solid var(--line); }
.recap__label { font-size: max(12px, calc(24 * var(--px))); font-weight: 700; color: var(--muted-2); }
.recap__edit { min-width: 44px; min-height: 44px; margin-block: -12px; margin-inline-end: -8px; padding: 0 8px; border: 0; background: none; color: var(--red); font: 700 max(14px, calc(27 * var(--px))) var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.recap__val, .recap__row > .lines { grid-column: 1 / -1; }
.recap__val { display: flex; flex-direction: column; gap: 2px; font-size: max(14px, calc(29 * var(--px))); line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.recap__name { font-weight: 700; }
.recap__meta { font-size: max(13px, calc(26 * var(--px))); color: var(--muted); }

.lead-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(14 * var(--px)); }
.field { position: relative; display: flex; align-items: center; height: calc(84 * var(--px)); min-height: 44px; background: #fffaf4; border: 1.5px solid #dcc6b1; border-radius: calc(16 * var(--px)); transition: border-color .2s, box-shadow .2s; }
.field:focus-within { border-color: #b0743f; box-shadow: 0 0 0 4px rgba(176, 116, 63, .16); }
.field.is-invalid { border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192, 57, 43, .10); }
.field__icon { width: calc(38 * var(--px)); height: calc(38 * var(--px)); margin-inline: calc(28 * var(--px)) calc(24 * var(--px)); color: #8a7568; }
.field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 400 max(16px, calc(30 * var(--px))) var(--sans); color: var(--ink); padding-inline-end: calc(22 * var(--px)); }
.field input::placeholder { color: #8d7c72; }
html[dir="rtl"] .field input[dir="ltr"] { text-align: right; }
.dial { position: relative; display: flex; align-items: center; gap: 4px; align-self: stretch; padding: 0 calc(14 * var(--px)); margin-inline-end: calc(14 * var(--px)); font: 600 max(15px, calc(28 * var(--px))) var(--num); color: var(--ink); }
.dial::after { content: ""; position: absolute; inset-inline-end: 0; top: 22%; bottom: 22%; width: 1px; background: #e2cfbd; pointer-events: none; }
.dial__chev { width: 14px; height: 14px; color: var(--muted); }
.dial select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.hp { position: absolute !important; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.form-msg { font-size: max(14px, calc(25 * var(--px))); color: #b0321f; text-align: center; }
/* Consentement WhatsApp sous le champ (WHATSAPP-SETUP.md, étape 10) */
.field-note { margin: calc(-6 * var(--px)) calc(6 * var(--px)) 0; font-size: max(12px, calc(22 * var(--px))); line-height: 1.55; color: var(--muted-2); }
.form-msg:empty { display: none; }
/* Format attendu dans le message d'erreur du numéro (« +966 5XXXXXXXX ») : jamais coupé en deux lignes */
.form-msg bdi { white-space: nowrap; }
.form-msg--block { margin-bottom: calc(16 * var(--px)); }
.lead-form .btn { margin-top: calc(6 * var(--px)); }

/* ---------- Options de l'écran 2 « الإضافات » (SPEC-UPSELL §3.3 / §6.4) : cartes pleine largeur, sans cadre autour ---------- */
.bump { display: flex; flex-direction: column; gap: max(10px, calc(22 * var(--px))); }
.bump__opt { --media: max(80px, calc(190 * var(--px))); appearance: none; -webkit-appearance: none; width: 100%; text-align: start; border-radius: max(16px, calc(34 * var(--px))); padding: max(12px, calc(26 * var(--px))); display: flex; gap: max(12px, calc(24 * var(--px))); align-items: center; border: 2px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s, background .15s; }
.bump__opt.is-on { border-color: var(--red-2); background: var(--sel-bg); box-shadow: 0 0 0 max(3px, calc(7 * var(--px))) #F3D5C9; }
/* Média de largeur fixe (--media) : textes alignés entre la couverture seule et l'éventail des 3 livres */
.bump__cover { flex: none; width: calc(var(--media) * .66); height: auto; aspect-ratio: 300 / 424; margin-inline: calc(var(--media) * .17); }
img.bump__cover { display: block; object-fit: cover; border-radius: max(6px, calc(10 * var(--px))); box-shadow: 0 calc(4 * var(--px)) calc(12 * var(--px)) rgba(60, 20, 5, .22); }
.bump__grid { display: flex; align-items: center; justify-content: center; width: var(--media); flex: none; padding-block: 4px; direction: ltr; }
.bump__grid > * { display: block; flex: none; width: calc(var(--media) * .46); height: auto; aspect-ratio: 300 / 424; object-fit: cover; border: 1.5px solid #fff; border-radius: max(4px, calc(7 * var(--px))); box-shadow: 0 2px 8px rgba(60, 20, 5, .25); }
.bump__grid > * + * { margin-left: calc(var(--media) * -.19); }
.bump__grid > :nth-child(1) { transform: rotate(-8deg) translateY(2px); }
.bump__grid > :nth-child(2) { position: relative; z-index: 1; transform: translateY(-3px); }
.bump__grid > :nth-child(3) { transform: rotate(8deg) translateY(2px); }
.bump__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: max(3px, calc(6 * var(--px))); }
/* Badge « Most popular · Checkout only » : va à la ligne s'il manque de place au lieu de passer sous le rond (320 px EN) */
.bump__txt .tag { white-space: normal; max-width: 100%; }
/* Petits téléphones (< 360 px) : couverture plus étroite et marges réduites → colonne de texte plus large (le badge anglais
   tient sur une ligne à 320 px : 159 px de badge pour 164 px de colonne) */
@media (max-width: 359.98px) { .bump__opt { --media: 60px; gap: 10px; padding-inline: 10px; } }
.bump__t { font-size: max(15px, calc(35 * var(--px))); font-weight: 800; line-height: 1.35; }
.bump__x { font-size: max(12px, calc(26 * var(--px))); color: var(--muted-2); line-height: 1.45; }
.bump__opt .amt { font-size: max(16px, calc(39 * var(--px))); }
.bump__opt .amt--was { font-size: max(12px, calc(28 * var(--px))); }
.bump__radio { flex: none; width: max(24px, calc(58 * var(--px))); height: max(24px, calc(58 * var(--px))); border-radius: 50%; border: 2px solid var(--red-2); background: #fff; display: grid; place-items: center; }
.is-on .bump__radio::after { content: ""; width: 64%; height: 64%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B1011' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.bump__radio--sm { width: max(22px, calc(50 * var(--px))); height: max(22px, calc(50 * var(--px))); border-color: #B9A090; }
.bump__none { appearance: none; -webkit-appearance: none; width: 100%; min-height: 52px; border-radius: max(14px, calc(29 * var(--px))); padding: max(10px, calc(22 * var(--px))) max(14px, calc(30 * var(--px))); border: 1.5px solid var(--line); background: #fff; color: #5A4036; font-family: inherit; font-size: max(14px, calc(30 * var(--px))); font-weight: 600; text-align: start; display: flex; justify-content: space-between; align-items: center; gap: calc(16 * var(--px)); cursor: pointer; }
.bump__none.is-on { border-color: #B9A090; background: var(--cream); }

/* ---------- Lignes du panier ---------- */
.lines { background: #fff; border: 1.5px solid var(--line); border-radius: calc(39 * var(--px)); padding: calc(29 * var(--px)) calc(34 * var(--px)); display: flex; flex-direction: column; gap: calc(16 * var(--px)); }
.lines__row { display: flex; justify-content: space-between; align-items: baseline; gap: calc(16 * var(--px)); font-size: max(13px, calc(31 * var(--px))); color: var(--ink-2); }
.lines__row .amt { font-size: calc(31 * var(--px)); }
.lines__row--add { color: var(--red-2); }
.lines__sep { height: 1px; background: var(--line); }
.lines__total { display: flex; justify-content: space-between; align-items: baseline; gap: calc(16 * var(--px)); font-size: max(14px, calc(34 * var(--px))); font-weight: 800; color: var(--ink-2); }
/* Lignes dans le récapitulatif de l'écran 3 : sans carte */
.lines--flat { padding: 0; border: 0; border-radius: 0; background: none; }

/* ---------- Bloc paiement ---------- */
.pay { background: #fff; border: 1.5px solid var(--line); border-radius: calc(39 * var(--px)); padding: calc(34 * var(--px)); display: flex; flex-direction: column; gap: calc(18 * var(--px)); }
.pay__head { display: flex; justify-content: space-between; align-items: center; gap: calc(16 * var(--px)); font-size: max(14px, calc(34 * var(--px))); font-weight: 800; color: var(--ink-2); }
.pay__by { font-family: var(--num); font-size: max(11px, calc(25 * var(--px))); font-weight: 700; color: var(--muted-2); direction: ltr; white-space: nowrap; }
.note--whop { font-size: max(12px, calc(25 * var(--px))); color: var(--muted-2); line-height: 1.5; }
/* Arabe : la note sous le titre du paiement est retirée (formulaire allégé, 20/10). L'anglais la garde : elle précise que les livres sont en arabe. */
html[lang="ar"] .note--whop { display: none; }
/* Rappel de la politique de remboursement sous le formulaire Whop (checkout écran 3 + offre après achat, site-20, 20/10) */
.note--refund { color: var(--muted-2); line-height: 1.6; }
.note--refund a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
#upsellPay .note--refund { margin-top: max(10px, calc(20 * var(--px))); } /* la carte upsell n'est pas en flex : pas de gap */
.pay .form-msg--block { margin-bottom: 0; }
/* Mobile (< 1024 px) : formulaire Whop pleine largeur (demande Hamza 2026-10-19 ; il tenait dans 2 cartes imbriquées,
   ≈ 297 px sur un écran de 390). Le bloc paiement (écran 3 du checkout, carte upsell une fois le paiement affiché) va d'un
   bord à l'autre : titre et notes gardent la marge de lecture, #whopSlot (rempli par l'iframe Whop) garde une gouttière de
   10 px (370 px sur un écran de 390). Bureau (≥ 1024 px, desktop-flow.css) inchangé. */
@media (max-width: 1023.98px) {
  .page--flow { --bleed: calc(74 * var(--px) + 1.5px); } /* marge de page (40) + bordure + marge intérieure de carte (34) */
  .offer-box:has(#upsellPay:not([hidden]):not(.is-prewarm)) { margin-inline: 0; padding-inline: var(--bleed); border-inline: 0; border-radius: 0; box-shadow: none; }
  #upsellPay { margin-inline: calc(-1 * var(--bleed)); padding-inline: 0; border-inline: 0; border-radius: 0; box-shadow: none; }
  #upsellPay > :not(.whop-slot) { padding-inline: var(--bleed); }
  #upsellPay > .whop-slot { margin-inline: max(10px, calc(24 * var(--px))); }
  /* Checkout, écran 3 : bande blanche bord à bord (l'écran a la marge de page de 40) */
  .screen--payment .pay { margin-inline: calc(-40 * var(--px)); padding-inline: 0; border-inline: 0; border-radius: 0; box-shadow: none; }
  .screen--payment .pay > :not(.whop-slot) { padding-inline: calc(40 * var(--px)); }
  .screen--payment .pay > .whop-slot { margin-inline: max(10px, calc(24 * var(--px))); }
  /* Checkout : boutons à la taille du doigt (≥ 44 px) et libellés lisibles (le bouton maquette ferait 41 px de haut, 13 px de texte) */
  body[data-page="checkout"] .btn { height: auto; min-height: 52px; padding-block: 8px; font-size: max(16px, calc(32 * var(--px))); }
  html[lang="ar"] body[data-page="checkout"] .btn { font-size: max(16px, calc(31 * var(--px))); }
  body[data-page="checkout"] .btn .i { width: 20px; height: 20px; }
  body[data-page="checkout"] .field { min-height: 48px; }
  body[data-page="checkout"] .lines__row, body[data-page="checkout"] .lines__row .amt { font-size: max(14px, calc(31 * var(--px))); }
  body[data-page="checkout"] .lines__total { font-size: max(15px, calc(34 * var(--px))); }
}

.whop-slot { position: relative; min-height: calc(120 * var(--px)); }
/* Formulaire Whop préparé hors de la vue (écran de paiement pendant l'écran 2, offre après achat avant « نعم ») :
   rendu à sa largeur réelle (fixée en JS) pour que Whop se charge, mais invisible et inerte. Placé AU-DESSUS de la page
   (top négatif) et non à gauche : en arabe (rtl) un débordement à gauche est défilable et décalait toute la page. */
.is-prewarm { position: absolute !important; top: -10000px !important; left: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.whop-embed { min-height: 420px; }
.whop-embed--elements { min-height: 520px; }
/* Un wrapper par offre (SPEC-UPSELL §3.7) ; hors écran (pas display:none) pour que l'iframe reste initialisée. */
.pay-offer { position: relative; }
.pay-offer.is-off { position: absolute; inset-inline-start: -200vw; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.demo-pay { display: grid; gap: calc(18 * var(--px)); padding: calc(26 * var(--px)); border-radius: calc(18 * var(--px)); background: repeating-linear-gradient(135deg, rgba(160, 19, 22, .04) 0 12px, transparent 12px 24px); border: 1.5px dashed rgba(160, 19, 22, .35); text-align: center; font-size: max(13px, calc(24 * var(--px))); line-height: 1.5; color: var(--muted); }
.demo-pay__offer { font-size: max(12px, calc(22 * var(--px))); color: var(--muted-2); }

/* ---------- Checkout v2 « écran unique » (CHECKOUT-V2, demande Hamza 2026-10-22) ----------
   Actif avec CHECKOUT_FLOW "v2" (config.js) ou ?flow=v2 : html.flow-v2 (posé dans <head> avant le rendu, confirmé par app.js) ;
   le contenu vient du <template id="tplOrderV2"> et app.js retire les 3 écrans v1 (masqués ici avant le script).
   Récapitulatif → « بياناتك » → collection (case) → bouton + encart verrouillé → paiement. Bureau : desktop-flow.css. */
html.flow-v2 .page--flow > .screen:not(.screen--order), html.flow-v2 .flow-head > .stepper, html.flow-v2 .flow-head__step { display: none; }
.screen--order { gap: max(12px, calc(24 * var(--px))); }
/* Téléphone : titre « أكمل طلبك » réservé aux lecteurs d'écran (le bouton remonte d'environ 90 px, au-dessus de la ligne
   de flottaison de Safari sur iPhone 390 × 844) ; bureau : visible (desktop-flow.css) */
.screen--order > .screen__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.screen--order .lines { display: none; } /* total : colonne du bureau seulement (sur téléphone, Whop affiche le montant) */
/* Récapitulatif v2 : bandeau 16:9 pleine largeur en haut de la carte (pas de couverture) avec le sceau « خصم 40% »,
   titre + prix agrandi, puis 4 mini-cartes (2 × 2) */
.summary--banner { grid-template-columns: minmax(0, 1fr) auto; row-gap: max(10px, calc(22 * var(--px))); }
.summary__media { grid-column: 1 / -1; position: relative; }
.summary__banner { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: max(10px, calc(22 * var(--px))); background: #efe6dc; }
.summary__banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Sceau de l'accueil (mêmes dessin et textes, .offer__seal-*) en plus petit, à cheval sur le coin haut GAUCHE du bandeau
   dans les deux langues : la photo n'est pas inversée, et à droite il cacherait le logo du téléphone */
.summary__seal { position: absolute; z-index: 1; top: -18px; left: -16px; width: 6em; height: 6em; font-size: max(11px, calc(26 * var(--px))); transform: rotate(-9deg); filter: drop-shadow(0 4px 6px rgba(110, 8, 20, .35)); pointer-events: none; }
.summary__seal .offer__seal-k { font-size: 1em; }
html[lang="en"] .summary__seal .offer__seal-k { font-size: .82em; }
.summary__seal .offer__seal-pct { font-size: 1.8em; }
.summary--banner .price--sm .price__num { font-size: max(32px, calc(84 * var(--px))); }
.summary--banner .summary__price .amt--was { font-size: max(16px, calc(36 * var(--px))); }
.summary__feats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(8px, calc(16 * var(--px))); }
.summary__feats li { display: flex; flex-direction: column; align-items: center; gap: max(6px, calc(12 * var(--px))); padding: max(10px, calc(20 * var(--px))) max(6px, calc(12 * var(--px))); background: #F8EADB; border-radius: max(12px, calc(24 * var(--px))); text-align: center; }
.summary__feats .i { width: max(26px, calc(56 * var(--px))); height: max(26px, calc(56 * var(--px))); color: var(--red); stroke-width: 1.5; }
.summary__feats span { font-size: max(12.5px, calc(27 * var(--px))); font-weight: 800; line-height: 1.4; color: var(--red); text-wrap: balance; }
html[lang="en"] .summary__feats br { display: none; } /* retours à la ligne des cartes de l'accueil : mots orphelins en anglais */
html[lang="en"] .summary__feats span { font-family: var(--serif); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.summary__price { display: flex; flex-direction: column; align-items: center; gap: max(2px, calc(4 * var(--px))); padding-inline-end: calc(10 * var(--px)); }
.summary .summary__price .price { padding-inline-end: 0; }
.summary__price .amt--was { font-size: max(12px, calc(26 * var(--px))); }
.order-card { display: flex; flex-direction: column; gap: max(10px, calc(20 * var(--px))); }
.order-card__title { font-size: max(15px, calc(32 * var(--px))); font-weight: 800; line-height: 1.3; color: var(--ink-2); }
/* Collection : photo 16:9 puis case NON cochée par défaut ; carte en surbrillance une fois cochée (même rendu que l'option v1).
   La carte entière est le <label> de la case : un clic n'importe où (photo comprise) la coche ou la décoche. */
.coll { display: flex; flex-direction: column; gap: max(8px, calc(16 * var(--px))); padding: max(10px, calc(20 * var(--px))); background: #fff; border: 2px solid var(--line); border-radius: max(16px, calc(34 * var(--px))); cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.coll:has(input:checked) { border-color: var(--red-2); background: var(--sel-bg); box-shadow: 0 0 0 max(3px, calc(7 * var(--px))) #F3D5C9; }
.coll picture { display: block; }
.coll__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: max(10px, calc(22 * var(--px))); background: #efe6dc; -webkit-user-drag: none; } /* clic avec un léger glissé : la case se coche quand même */
.coll__check { position: relative; display: flex; align-items: center; gap: max(12px, calc(22 * var(--px))); min-height: 48px; padding-inline: max(2px, calc(6 * var(--px))); }
.coll__check input { position: absolute; top: 50%; inset-inline-start: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.coll__box { flex: none; display: grid; place-items: center; width: max(26px, calc(56 * var(--px))); height: max(26px, calc(56 * var(--px))); border: 2px solid var(--red-2); border-radius: max(7px, calc(14 * var(--px))); background: #fff; transition: background .15s; }
.coll__check input:checked + .coll__box { background: var(--red-2); }
.coll__check input:checked + .coll__box::after { content: ""; width: 72%; height: 72%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.coll__check input:focus-visible + .coll__box { outline: 2px solid #b0743f; outline-offset: 3px; }
.coll__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: max(2px, calc(4 * var(--px))); }
.coll__t { font-size: max(15px, calc(33 * var(--px))); font-weight: 800; line-height: 1.35; color: var(--ink-2); }
.coll__x { font-size: max(13px, calc(27 * var(--px))); line-height: 1.5; color: var(--muted-2); }
.coll__x .amt { font-size: max(14px, calc(30 * var(--px))); }
.coll__x .amt--was { font-size: max(12px, calc(26 * var(--px))); }
/* Bouton « متابعة للدفع » + encart verrouillé (cadenas) à la place du paiement, jusqu'au déverrouillage */
.order-cta { display: flex; flex-direction: column; gap: max(10px, calc(20 * var(--px))); }
.order-cta .btn { margin: 0; }
.pay-lock { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 10px 16px; border: 1.5px dashed #cdb8a4; border-radius: max(14px, calc(30 * var(--px))); background: rgba(255, 250, 244, .7); color: var(--muted-2); font-size: max(13px, calc(26 * var(--px))); font-weight: 600; line-height: 1.45; text-align: center; }
.pay-lock .i { width: 18px; height: 18px; color: #8a7568; }
/* Ligne de confiance au-dessus de Whop : cadenas + texte, logos de cartes (Apple Pay : seulement si l'appareil le propose).
   scroll-margin-top : visible sous la pastille de langue (fixe) après le défilement automatique. */
.trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; scroll-margin-top: 56px; }
.trust:focus { outline: none; } /* focus posé par script au déverrouillage (lecteurs d'écran, clavier), pas un élément interactif */
.trust__txt { font-size: max(14px, calc(28 * var(--px))); font-weight: 700; line-height: 1.5; color: var(--ink-2); text-align: center; text-wrap: balance; }
/* Cadenas dans la ligne de texte : il reste collé au premier mot quand la phrase passe sur deux lignes */
.trust__txt .i { display: inline-block; width: 18px; height: 18px; margin-inline-end: 7px; vertical-align: -3px; color: #1d1411; }
.trust__txt bdi { white-space: nowrap; } /* « Apple Pay » jamais coupé */
.trust__logos { display: inline-flex; align-items: center; gap: 6px; }
.trust__logos .pm { display: block; width: auto; height: 24px; }
.pm-ap { display: block; }
/* Sous Whop : accès + support, lien par email, puis la mention de remboursement (12 px au moins) */
.note--after { font-size: max(12px, calc(23 * var(--px))); color: var(--muted-2); line-height: 1.55; }
/* Formulaire de l'offre non choisie (principale ou avec addon) : rendu à la largeur du bloc mais sans hauteur, invisible et inerte */
.whop-slot--v2 .pay-offer.is-off { inset: 0 0 auto; width: auto; height: 0; overflow: hidden; visibility: hidden; }
@media (max-width: 1023.98px) {
  /* Bloc paiement bord à bord, comme l'écran 3 de la v1 */
  .screen--order .pay { margin-inline: calc(-40 * var(--px)); padding-inline: 0; border-inline: 0; border-radius: 0; box-shadow: none; }
  .screen--order .pay > :not(.whop-slot) { padding-inline: calc(40 * var(--px)); }
  .screen--order .pay > .whop-slot { margin-inline: max(10px, calc(24 * var(--px))); }
}

/* ---------- Upsell ---------- */
.confirm-bar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: calc(18 * var(--px)) calc(20 * var(--px)); background: var(--green-bg); color: var(--green); font: 700 max(13px, calc(31 * var(--px))) var(--sans); text-align: center; }
.confirm-bar .i { width: 1.2em; height: 1.2em; stroke-width: 2.6; }
.up-intro { padding: calc(20 * var(--px)) calc(40 * var(--px)) 0; text-align: center; display: flex; flex-direction: column; gap: calc(14 * var(--px)); }
.kicker { display: block; margin: 0 auto; color: var(--red-2); font: 700 max(12px, calc(27 * var(--px))) var(--sans); letter-spacing: .02em; }
html[lang="ar"] .kicker { letter-spacing: 0; }
html[lang] .up-intro .h { font-size: calc(53 * var(--px)); font-weight: 800; line-height: 1.3; }
html[lang] .up-intro .lead { font-size: max(13px, calc(31 * var(--px))); color: #5A4036; margin: 0; }
.offer-box { background: #fff; border: 1.5px solid var(--line); border-radius: calc(43 * var(--px)); padding: calc(34 * var(--px)); display: flex; flex-direction: column; gap: calc(29 * var(--px)); }
.covers3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(19 * var(--px)); list-style: none; padding: 0; margin: 0; }
.covers3 li { position: relative; }
.covers3 img, .covers3 .cover-ph { display: block; width: 100%; height: auto; aspect-ratio: 300 / 424; object-fit: cover; border-radius: calc(19 * var(--px)); box-shadow: 0 calc(8 * var(--px)) calc(18 * var(--px)) rgba(60, 20, 5, .2); }
.covers3__owned { position: absolute; left: 50%; bottom: calc(10 * var(--px)); transform: translateX(-50%); }
.checks--sm { width: auto; margin: 0; gap: calc(10 * var(--px)); }
.checks--sm li { min-height: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; align-items: flex-start; gap: calc(16 * var(--px)); font-size: max(13px, calc(30 * var(--px))); line-height: 1.45; color: var(--ink-2); }
.checks--sm .i { width: calc(39 * var(--px)); height: calc(39 * var(--px)); min-width: 16px; min-height: 16px; color: var(--red-2); stroke-width: 2.6; margin-top: .1em; }
.price-row { display: flex; align-items: baseline; justify-content: center; gap: calc(24 * var(--px)); flex-wrap: wrap; background: var(--sel-bg); border-radius: calc(29 * var(--px)); padding: calc(24 * var(--px)); }
.offer-box .btn { margin: 0; }
.skip { display: block; margin: calc(10 * var(--px)) auto 0; text-align: center; font-size: max(13px, calc(25 * var(--px))); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Merci ---------- */
.thanks-card { padding: calc(50 * var(--px)) calc(40 * var(--px)); text-align: center; background: var(--card); border: 1.5px solid var(--card-line); border-radius: calc(28 * var(--px)); box-shadow: 0 8px 26px rgba(70, 25, 10, .08); }
.thanks-card__ico { display: grid; place-items: center; width: calc(120 * var(--px)); height: calc(120 * var(--px)); margin: 0 auto; border-radius: 50%; background: var(--green); color: #fff; }
.thanks-card__ico .i { width: 50%; height: 50%; stroke-width: 2.6; }
.thanks-card .h { margin: calc(24 * var(--px)) 0 calc(16 * var(--px)); }
.thanks-card .lead { margin-bottom: calc(26 * var(--px)); font-size: calc(30 * var(--px)); overflow-wrap: anywhere; }
.thanks-card__post { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: calc(26 * var(--px)); padding: calc(14 * var(--px)); border-radius: calc(14 * var(--px)); background: var(--green-bg); color: var(--green); font: 600 max(13px, calc(25 * var(--px))) var(--sans); }
.thanks-card .note { margin-top: calc(22 * var(--px)); }
.owned { display: flex; flex-direction: column; gap: calc(14 * var(--px)); }
.owned__kicker { font-size: max(12px, calc(29 * var(--px))); font-weight: 700; color: var(--muted-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}
:focus-visible { outline: 2px solid #b0743f; outline-offset: 2px; }

/* ---------- Livraison : merci + téléchargements ---------- */
.spinner--dark { display: inline-block; border-color: rgba(133, 7, 10, .2); border-top-color: var(--red); }
.dl-state { display: flex; align-items: center; justify-content: center; gap: 10px; margin: calc(10 * var(--px)) 0 calc(22 * var(--px)); font-size: max(13px, calc(25 * var(--px))); color: var(--muted); }
.dl-state--error { color: #b0321f; text-align: center; line-height: 1.5; }
.thanks-card__mail { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: calc(10 * var(--px)); padding: calc(16 * var(--px)); border-radius: calc(14 * var(--px)); background: #fbead6; font-size: max(13px, calc(25 * var(--px))); line-height: 1.5; color: var(--ink); text-align: start; }
.thanks-card__mail .i { width: 1.4em; height: 1.4em; color: var(--red); }
.thanks-card .btn .i { transform: none; }

.downloads { margin: calc(20 * var(--px)) calc(40 * var(--px)) 0; }
.downloads .demo-pay { margin-bottom: calc(18 * var(--px)); }
.downloads .owned__kicker { margin-bottom: calc(14 * var(--px)); }
.dl-list { display: grid; gap: calc(16 * var(--px)); }
.dl-item { display: grid; grid-template-columns: calc(82 * var(--px)) 1fr auto; align-items: center; gap: calc(24 * var(--px)); padding: calc(18 * var(--px)); background: var(--card); border: 1.5px solid var(--card-line); border-radius: calc(22 * var(--px)); box-shadow: 0 4px 16px rgba(70, 25, 10, .06); }
.dl-item img, .dl-item .cover-ph { display: block; width: 100%; height: auto; aspect-ratio: 82 / 116; object-fit: cover; border-radius: calc(10 * var(--px)); box-shadow: 0 4px 10px rgba(60, 20, 5, .2); }
.dl-item .cover-ph { font-size: max(7px, calc(13 * var(--px))); padding: calc(5 * var(--px)); line-height: 1.2; }
.dl-item__info b { display: block; font-family: var(--serif); font-weight: 700; font-size: calc(32 * var(--px)); line-height: 1.15; letter-spacing: -.02em; color: var(--red); }
html[lang="ar"] .dl-item__info b { font-size: calc(28 * var(--px)); line-height: 1.5; letter-spacing: 0; font-weight: 800; }
.dl-item__info small { display: block; margin-top: calc(6 * var(--px)); font-size: max(12px, calc(21 * var(--px))); color: var(--muted); }
.dl-btn { width: auto; height: calc(76 * var(--px)); min-height: 40px; padding: 0 calc(28 * var(--px)); font-size: max(13px, calc(26 * var(--px))); gap: calc(12 * var(--px)); }
.dl-btn .i { transform: none !important; width: calc(32 * var(--px)); height: calc(32 * var(--px)); }
.dl-soon { font-size: max(12px, calc(22 * var(--px))); color: var(--muted); }
/* ---------- Carte cadeau (مكتبة الرسم) : page de téléchargement, voir theme.css ---------- */

/* ---------- Pages légales (SPEC-UPSELL §9) ---------- */
.legal { max-width: 100%; padding: 0 calc(40 * var(--px)) calc(20 * var(--px)); font-size: max(14px, calc(30 * var(--px))); line-height: 1.75; color: var(--text); }
.legal h1 { font-family: var(--serif); font-weight: 800; font-size: calc(56 * var(--px)); line-height: 1.3; color: var(--red-2); margin: calc(10 * var(--px)) 0 calc(6 * var(--px)); }
.legal h2 { font-family: var(--serif); font-weight: 800; font-size: calc(40 * var(--px)); line-height: 1.3; color: var(--red-2); margin: calc(34 * var(--px)) 0 calc(10 * var(--px)); }
.legal p, .legal li { color: var(--text); margin: 0 0 calc(12 * var(--px)); }
.legal ul { list-style: disc; padding-inline-start: 1.4em; margin: 0 0 calc(12 * var(--px)); }
.legal__date { font-size: max(12px, calc(25 * var(--px))); color: var(--muted-2); }
.legal .note--box { margin: calc(10 * var(--px)) 0 calc(16 * var(--px)); }
[data-lang-block][hidden] { display: none; }

/* ---------- Page FAQ (faq.html, data-page="faq") : cadre des pages légales, accordéon .faq, bouton du hero ---------- */
.faq-page { padding: calc(6 * var(--px)) 0 calc(24 * var(--px)); }
.faq-page > .h { margin: calc(10 * var(--px)) calc(40 * var(--px)) calc(10 * var(--px)); }
.faq-page > .lead { margin: 0 calc(60 * var(--px)) calc(30 * var(--px)); }
.faq-page .faq { padding: 0 calc(40 * var(--px)); }
.faq-page .cta-solo { margin-top: calc(44 * var(--px)); }
/* Téléphone : page de lecture autonome → planchers de taille (questions et chapeau 14 px, réponses 13 px) ; bureau = desktop-flow.css */
@media (max-width: 1023.98px) {
  html[lang] .faq-page > .lead { font-size: max(14px, calc(33 * var(--px))); }
  html[lang="ar"] .faq-page > .lead { font-size: max(14px, calc(30 * var(--px))); }
  html[lang] .faq-page .faq__q { font-size: max(14px, calc(38 * var(--px))); }
  html[lang="ar"] .faq-page .faq__q { font-size: max(14px, calc(31 * var(--px))); }
  html[lang] .faq-page .faq details p { font-size: max(13px, calc(27 * var(--px))); line-height: 1.45; }
  html[lang="ar"] .faq-page .faq details p { font-size: max(13px, calc(26 * var(--px))); line-height: 1.65; }
}

/* ---------- Bureau (≥ 1024 px) de la page de vente : à concevoir pour ce site ; en attendant, la colonne mobile centrée (theme.css) ---------- */

/* ================= Compte à rebours de l'offre de lancement (2026-10-30, maquettes de Hamza) =================
   Accueil : bloc rouge entre la promesse et la carte d'offre (titre + date en or, 4 cases jours / heures / minutes /
   secondes) et ligne « après le 5 novembre » sous l'offre. Checkout : bandeau collé en haut de l'écran. Rendu par app.js. */
.cd {
  width: calc(860 * var(--px)); max-width: 100%;
  margin-top: calc(30 * var(--px));
  padding: calc(24 * var(--px)) calc(24 * var(--px)) calc(26 * var(--px));
  border-radius: calc(30 * var(--px));
  background: linear-gradient(180deg, #B3161B 0%, #95100F 55%, #7A0B0C 100%);
  color: #fff;
  box-shadow: 0 calc(18 * var(--px)) calc(40 * var(--px)) rgba(134, 9, 12, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.cd__head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(16 * var(--px)); margin-bottom: calc(18 * var(--px)); padding-inline: calc(8 * var(--px)); }
.cd__title { font-weight: 800; font-size: max(13px, calc(31 * var(--px))); line-height: 1.3; text-align: start; }
.cd__date { font-weight: 800; font-size: max(12px, calc(27 * var(--px))); line-height: 1.3; color: #F6C76A; white-space: nowrap; }
/* Jours → heures → minutes → secondes de gauche à droite, en arabe aussi (demande Hamza 2026-10-30 ; le bloc n'existe
   que sur l'accueil) */
.cd__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(16 * var(--px)); direction: ltr; }
.cd__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(8 * var(--px)); padding: calc(20 * var(--px)) 0 calc(16 * var(--px)); border-radius: calc(20 * var(--px)); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); }
.cd__n { font-family: var(--num); font-weight: 800; font-size: calc(58 * var(--px)); line-height: 1; font-variant-numeric: tabular-nums; }
.cd__u { font-weight: 600; font-size: max(11px, calc(24 * var(--px))); line-height: 1.2; color: rgba(255, 255, 255, .86); }
.offer__after { margin: calc(14 * var(--px)) 0 0; font-size: max(12px, calc(24 * var(--px))); line-height: 1.5; font-weight: 600; color: #6E5B50; text-align: center; }
.offer__after .sar { height: .78em; }

.cd-bar { position: sticky; top: 0; z-index: 60; background: linear-gradient(180deg, #AC161B 0%, #86090C 100%); color: #fff; box-shadow: 0 4px 14px rgba(110, 8, 12, .28); }
.cd-bar__in { max-width: 620px; margin: 0 auto; padding: 10px 14px; text-align: center; font-weight: 800; font-size: clamp(13px, 3.6vw, 16px); line-height: 1.4; }
.cd-bar__days, .cd-bar__clock { color: #F6C76A; font-weight: 900; white-space: nowrap; }
/* Accueil seulement (index.html, span .cd-bar__time dir="ltr") : jours puis horloge de gauche à droite, en arabe aussi ;
   le checkout garde l'ordre arabe (demande Hamza 2026-10-30). Le groupe ne se coupe pas. */
.cd-bar__time { display: inline-block; white-space: nowrap; }
.cd-bar__time .cd-bar__days { margin-inline-end: .3em; }
/* Checkout : « و » entre les jours et l'horloge, couleur du texte. Séparé de « أيام » par un VRAI espace dans le HTML :
   sans lui, le navigateur lie les lettres arabes par-dessus la limite des balises (م en forme liée, attaché à و). */
.cd-bar__clock { display: inline-block; font-family: var(--num); font-size: 1.12em; font-variant-numeric: tabular-nums; }
/* Sélecteur de langue (fixe) sous le bandeau ; --cd-bar-h = hauteur réelle, posée par app.js */
html.has-cd-bar .lang-switch { top: calc(var(--cd-bar-h, 44px) + max(8px, env(safe-area-inset-top))); }
/* Accueil : bloc dans le hero sur mobile (maquette), bandeau en haut sur bureau (le bloc ferait sortir le bouton du
   premier écran 16:9 et changerait le cadrage de la photo) */
body[data-page="sales"] .cd-bar { display: none; }
/* Checkout : la ligne « paiement sécurisé » amenée en haut par le défilement automatique reste visible sous le bandeau
   et sous la pastille de langue */
html.has-cd-bar .trust { scroll-margin-top: calc(var(--cd-bar-h, 44px) + 56px); }
.offer__after { text-wrap: balance; }
/* Accueil mobile : le bloc allonge le hero ; la phrase manuscrite (en bas de la photo) garde sa place sous la carte */
@media (max-width: 1023.98px) {
  .hero:has(.cd:not([hidden])) { padding-bottom: calc(300 * var(--px)); }
}

}