/* ══════════════════════════════════════════════════════════════════════════
 * LES PAGES D'EXTENSION ET DE TÉLÉCHARGEMENT DU SITE 2027 (lot B, 08/10/2026)
 *
 *   top-translate.html, top-calendar.html, top-migration.html, top-shield.html,
 *   telecharger.html, telecharger-top-translate.html, telecharger-top-calendar.html
 *
 * D'après les maquettes v2 validées le 08/10 (`design/site-2027/ecrans.mjs`,
 * écrans 03, 04, 05, 06, 10 et 11 ; écran 01c de `design/espace-client-2027`).
 * Elle s'ajoute à `rz.css`, qu'elle ne redéclare pas : les composants de la
 * charte (boutons, pastilles, bandes sombres, mot mis en avant) restent ceux de
 * `rz.css`, et chaque couleur ci-dessous est un JETON de `rz-jetons.css`.
 *
 * ── LES QUATRE TEINTES ───────────────────────────────────────────────────
 *
 * Les maquettes donnent une teinte à chaque extension. Ici, elles sont prises
 * DANS la charte, déjà mesurées (CHARTE-02, ACCESSIBLE-01), clair et sombre :
 *
 *   TOP TRANSLATE            --rz-brand-ink   lueurs --rz-sig-a / --rz-sig-b
 *   TOP CALENDAR             --rz-good-text   lueurs --rz-lueur-tc-a / -b
 *   TOP MIGRATION & BACKUP   --rz-warn-text   lueurs --rz-lueur-mg-a / -b
 *   TOP SHIELD               --rz-crit-text   lueurs --rz-lueur-sh-a / -b
 *
 * La lueur est DÉCORATIVE (un halo flou derrière la bande sombre) : aucun texte
 * ne se peint avec elle. Sur la bande sombre, le mot mis en avant reste `.rz-hi`,
 * peint dans `rz.css` avec la rampe porteuse de texte DE L'EXTENSION
 * (`--rz-hi-ink-*`, mesurée par CHARTE-02) ; `--rx-hi-a/b` en reprend les deux
 * bornes pour les petites icônes de la bande (repères, mots de la une), comme
 * les planches. Les lueurs et ces rampes sont déclarées dans `rz.css` (bloc
 * RAMPES-EXTENSIONS), d'après les planches v2.
 *
 * ── LA SEULE EXCEPTION, NOMMÉE ───────────────────────────────────────────
 *
 * `.rx-al` dessine la page d'un site client (Atelier Lumen, le site d'exemple
 * des rendus de TOP TRANSLATE 8). C'est une ILLUSTRATION d'un site tiers, qui
 * reste claire en thème sombre comme le serait le vrai site : ses couleurs sont
 * écrites ici, dans ce seul bloc, et nulle part ailleurs (gardé par
 * `api/test/pages-extensions.test.js`).
 * ════════════════════════════════════════════════════════════════════════ */

/* Rien sous la dernière section : le pied pose lui-même ses 96 px (planches v2) — les deux
   ensemble doublaient l'écart avant le pied. */
.rx { padding-bottom: 0; }
/* Ce qui attend le coupon de lancement, ou un état, reste caché : `hidden` gagne
   sur toute mise en page posée ici (une ligne `display: flex` le faisait réapparaître). */
.rx [hidden] { display: none !important; }
.rx-p-tt { --rx-ink: var(--rz-brand-ink); --rx-a: var(--rz-sig-a); --rx-b: var(--rz-sig-b); --rx-hi-a: var(--rz-hi-ink-a); --rx-hi-b: var(--rz-hi-ink-b); }
.rx-p-tc { --rx-ink: var(--rz-good-text); --rx-a: var(--rz-lueur-tc-a); --rx-b: var(--rz-lueur-tc-b); --rx-hi-a: var(--rz-hi-ink-tc-a); --rx-hi-b: var(--rz-hi-ink-tc-b); }
.rx-p-mg { --rx-ink: var(--rz-warn-text); --rx-a: var(--rz-lueur-mg-a); --rx-b: var(--rz-lueur-mg-b); --rx-hi-a: var(--rz-hi-ink-mg-a); --rx-hi-b: var(--rz-hi-ink-mg-b); }
.rx-p-sh { --rx-ink: var(--rz-crit-text); --rx-a: var(--rz-lueur-sh-a); --rx-b: var(--rz-lueur-sh-b); --rx-hi-a: var(--rz-hi-ink-sh-a); --rx-hi-b: var(--rz-hi-ink-sh-b); }
.rx-neutre { --rx-ink: var(--rz-brand-ink); --rx-a: var(--rz-sig-a); --rx-b: var(--rz-sig-b); --rx-hi-a: var(--rz-hi-ink-a); --rx-hi-b: var(--rz-hi-ink-b); }

.rx-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rx-logo { display: block; flex: none; }

/* ── La une : la bande sombre d'ouverture, aux couleurs de la page ──────── */
.rx-une {
  margin: var(--rz-s-6) var(--rz-s-10) 0; border-radius: 28px;
  box-shadow: var(--rz-shadow-md);
}
.rx-une::before, .rx-une::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(70px); pointer-events: none;
}
.rx-une::before { width: 760px; height: 760px; left: -240px; top: -380px; background: radial-gradient(circle, var(--rx-a), transparent 62%); opacity: .5; }
.rx-une::after { width: 680px; height: 680px; right: -180px; bottom: -400px; background: radial-gradient(circle, var(--rx-b), transparent 62%); opacity: .34; }
.rx-une-in {
  max-width: 1200px; margin: 0 auto; padding: 76px 40px 80px;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center;
}
.rx-une-in.rx-seule { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 980px; text-align: center; justify-items: center; }
.rx-ariane { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--rz-font-mono); font-size: .72rem; color: var(--rz-ink-text-2); margin-bottom: 20px; }
.rx-ariane a { color: var(--rz-ink-text-2); text-decoration: underline; text-underline-offset: 3px; }
.rx-ariane a:hover { color: var(--rz-ink-text); }
.rx-ariane [aria-current] { color: var(--rz-ink-text); font-weight: 500; }
.rx-seule .rx-ariane { justify-content: center; }
.rx-une .rx-sur { color: var(--rz-ink-text-2); }
.rx-une h1 { font-size: 3.05rem; font-weight: 700; line-height: 1.04; letter-spacing: -.032em; margin-top: 16px; color: var(--rz-ink-text); }
.rx-une .rx-lead { font-size: 1.14rem; color: var(--rz-ink-text-2); margin-top: 20px; max-width: 56ch; line-height: 1.6; }
.rx-seule .rx-lead { margin-inline: auto; }
.rx-gestes { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; align-items: center; }
.rx-seule .rx-gestes { justify-content: center; }
/* Les gestes d'une bande sombre ont la grande taille des maquettes v2 (`.btn-lg`). */
.rx-une .rx-gestes .rz-btn { min-height: 52px; padding: 0 var(--rz-s-6); font-size: .84rem; border-radius: 13px; }
.rx-une .rx-reperes { display: flex; gap: 10px 22px; margin-top: 28px; flex-wrap: wrap; font-family: var(--rz-font-mono); font-size: .74rem; color: var(--rz-ink-text-2); list-style: none; padding: 0; }
.rx-reperes li { display: inline-flex; gap: 8px; align-items: center; }
.rx-reperes .rx-ico { width: 15px; height: 15px; color: var(--rx-hi-b); }
.rx-une .rx-prix-une { margin-top: 22px; font-family: var(--rz-font-display); font-weight: 700; font-size: 1.25rem; color: var(--rz-ink-text); }
.rx-une .rx-prix-une small { font-family: var(--rz-font-sans); font-weight: 400; font-size: .95rem; color: var(--rz-ink-text-2); }
.rx-gros-logo { display: grid; place-items: center; }
.rx-gros-logo img { width: min(260px, 60vw); height: auto; box-shadow: var(--rz-shadow-lg); }
.rx-une .rx-prevenir-note { margin-top: 12px; font-size: .84rem; color: var(--rz-ink-text-2); max-width: 44em; }
.rx-une .rx-msg { margin-top: 10px; min-height: 1.4em; font-weight: 600; color: var(--rz-ink-text); }
.rx-une .rx-msg:empty { min-height: 0; margin: 0; }

/* L'étiquette de section (eyebrow), à la teinte de la page */
.rx-sur { display: flex; align-items: center; gap: 10px; font-family: var(--rz-font-mono); font-size: .64rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--rx-ink); }
.rx-centre .rx-sur, .rx-seule .rx-sur { justify-content: center; }
.rx-sur .rx-logo { width: 22px; height: 22px; }
.rx-une .rx-sur .rx-logo { width: 28px; height: 28px; }

/* ── Les sections ───────────────────────────────────────────────────────── */
.rx-sec { max-width: 1200px; margin: 0 auto; padding: 104px 40px 0; }
.rx-sec.rx-serre { padding-top: 72px; }
.rx-titre { max-width: 780px; margin-bottom: 40px; }
.rx-titre.rx-centre { margin-inline: auto; text-align: center; }
.rx-titre h2 { font-size: 2.4rem; font-weight: 700; line-height: 1.08; letter-spacing: -.028em; margin-top: 12px; }
.rx-titre > p:not(.rx-sur) { font-size: 1.08rem; color: var(--rz-text-2); margin-top: 14px; line-height: 1.62; }

/* ── Avant / après ──────────────────────────────────────────────────────── */
.rx-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rx-cote { padding: 28px; border-radius: var(--rz-r-lg); border: 1px solid var(--rz-border); background: var(--rz-surface); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rx-cote.rx-non { background: var(--rz-surface-2); }
.rx-cote.rx-oui { border-color: color-mix(in srgb, var(--rx-a) 45%, var(--rz-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rx-a) 22%, transparent), var(--rz-shadow-md); }
.rx-cote .rx-sur { color: var(--rz-text-2); }
.rx-cote.rx-oui .rx-sur { color: var(--rx-ink); }
.rx-cote h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.rx-adr { font-family: var(--rz-font-mono); font-size: .82rem; padding: 10px 12px; border-radius: 10px; background: var(--rz-surface); border: 1px solid var(--rz-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; overflow-wrap: anywhere; }
.rx-non .rx-adr { background: var(--rz-surface-3); }
.rx-adr span { color: var(--rz-text-2); }
.rx-adr b { font-weight: 400; }
.rx-l { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; line-height: 1.5; }
.rx-l .rx-ico { margin-top: 2px; }
.rx-l .rx-ok { color: var(--rz-good-text); }
.rx-l .rx-ko { color: var(--rz-crit-text); }
.rx-verdict { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rz-border); font-weight: 600; }

/* ── Les points d'une extension ─────────────────────────────────────────── */
.rx-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rx-point { padding: 26px; border-radius: var(--rz-r-lg); background: var(--rz-surface); border: 1px solid var(--rz-border); box-shadow: var(--rz-shadow-sm); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rx-pic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--rz-surface-2); color: var(--rx-ink); margin-bottom: 6px; }
.rx-pic .rx-ico { width: 22px; height: 22px; }
.rx-point h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.rx-point p { color: var(--rz-text-2); font-size: .96rem; line-height: 1.6; }

/* Une note large, sous une grille */
.rx-mesure { display: flex; gap: 16px; align-items: flex-start; margin-top: 20px; padding: 20px 22px; border-radius: var(--rz-r-lg); background: var(--rz-surface-2); border: 1px solid var(--rz-border); }
.rx-mesure > .rx-ico { width: 22px; height: 22px; color: var(--rx-ink); margin-top: 2px; }
.rx-mesure > div { flex: 1; min-width: 0; }
.rx-mesure h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.rx-mesure p { font-size: .94rem; color: var(--rz-text-2); line-height: 1.55; }
.rx-drapeaux { display: flex; flex-wrap: wrap; gap: 5px; max-width: 330px; flex: none; }

/* ── Les étapes ─────────────────────────────────────────────────────────── */
.rx-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; }
.rx-etape { padding: 24px 22px; border-radius: var(--rz-r-lg); background: var(--rz-surface); border: 1px solid var(--rz-border); box-shadow: var(--rz-shadow-sm); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rx-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--rz-font-display); font-weight: 700; font-size: .95rem; background: var(--rz-brand-strong); color: var(--rz-on-brand); margin-bottom: 4px; }
.rx-etape b { font-size: 1.12rem; }
.rx-etape p { font-size: .94rem; line-height: 1.55; color: var(--rz-text-2); }
.rx-ou { display: inline-flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 6px; font-family: var(--rz-font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rz-text-3); }
.rx-ou .rx-ico { width: 14px; height: 14px; }

/* ── Le bloc des prix d'une extension ───────────────────────────────────── */
.rx-prix-bloc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.rx-exemple { padding: 30px; border-radius: var(--rz-r-lg); }
.rx-exemple::after { content: ""; position: absolute; z-index: -1; width: 380px; height: 380px; right: -120px; top: -180px; border-radius: 50%; background: radial-gradient(circle, var(--rx-a), transparent 64%); opacity: .4; filter: blur(30px); }
.rx-exemple .rx-sur { color: var(--rz-ink-text-2); }
.rx-exemple .rx-exemple-t { margin-top: 8px; font-size: 1.05rem; color: var(--rz-ink-text); }
.rx-exemple .rx-chiffre { font-family: var(--rz-font-display); font-size: 3.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-top: 14px; color: var(--rz-ink-text); }
.rx-exemple .rx-chiffre small { font-family: var(--rz-font-sans); font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--rz-ink-text-2); }
.rx-calc { margin-top: 22px; border-top: 1px solid var(--rz-ink-line); }
.rx-calc div { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rz-ink-line); font-size: .94rem; }
.rx-calc span { color: var(--rz-ink-text-2); }
.rx-calc b { margin-left: auto; font-weight: 600; color: var(--rz-ink-text); white-space: nowrap; }
.rx-exemple .rx-note { margin-top: 16px; font-size: .88rem; line-height: 1.55; }
.rx-mesure-in { display: flex; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rz-ink-line); font-size: .9rem; line-height: 1.55; }
.rx-mesure-in .rx-ico { color: var(--rz-ink-text-2); margin-top: 2px; }
.rx-mesure-in h3 { font-size: .95rem; color: var(--rz-ink-text); margin-bottom: 4px; }
.rx-bornes { display: flex; flex-direction: column; gap: 14px; }
.rx-borne { padding: 22px 24px; border-radius: var(--rz-r-lg); background: var(--rz-surface); border: 1px solid var(--rz-border); box-shadow: var(--rz-shadow-sm); }
.rx-borne .rx-sur { margin-bottom: 8px; }
.rx-borne .rx-v { font-family: var(--rz-font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; }
.rx-borne .rx-v small { font-family: var(--rz-font-sans); font-weight: 400; font-size: .9rem; color: var(--rz-text-2); letter-spacing: 0; }
.rx-borne > p:not(.rx-sur):not(.rx-v) { font-size: .92rem; color: var(--rz-text-2); margin-top: 6px; line-height: 1.55; }
.rx-engage { margin-top: 20px; padding: 22px 24px; border-radius: var(--rz-r-lg); background: var(--rz-surface-2); border: 1px solid var(--rz-border); }
.rx-engage h3 { font-size: 1.05rem; font-weight: 700; }
.rx-engage p { margin-top: 6px; font-size: .95rem; color: var(--rz-text-2); line-height: 1.6; }

/* ── Compris / pas compris, et l'arrêt ──────────────────────────────────── */
.rx-inclus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rx-liste { padding: 28px; border-radius: var(--rz-r-lg); background: var(--rz-surface); border: 1px solid var(--rz-border); min-width: 0; }
.rx-liste.rx-calme { background: var(--rz-surface-2); }
.rx-liste h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 14px; }
.rx-liste ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rx-liste li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rz-border); font-size: .96rem; line-height: 1.5; }
.rx-liste li:first-child { border-top: 0; padding-top: 0; }
.rx-liste li .rx-ico { margin-top: 2px; }
.rx-liste .rx-ok { color: var(--rz-good-text); }
.rx-liste .rx-moins { color: var(--rz-text-3); }
.rx-arret { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--rz-r-lg); overflow: hidden; border: 1px solid var(--rz-border); box-shadow: var(--rz-shadow-sm); }
.rx-arret > div { padding: 28px 30px; background: var(--rz-surface); display: flex; flex-direction: column; gap: 12px; }
.rx-arret > div + div { border-left: 1px solid var(--rz-border); background: var(--rz-surface-2); }
.rx-arret .rx-sur { gap: 8px; color: var(--rz-text-3); }
.rx-arret .rx-sur .rx-ico { width: 14px; height: 14px; }
.rx-arret h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; }
.rx-arret p:not(.rx-sur) { color: var(--rz-text-2); font-size: .96rem; line-height: 1.6; }

/* ── La foire aux questions ─────────────────────────────────────────────── */
.rx-faq-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.rx-faq-duo .rx-titre { margin-bottom: 0; position: sticky; top: 96px; }
.rx-faq { border-top: 1px solid var(--rz-border); min-width: 0; }
.rx-faq details { border-bottom: 1px solid var(--rz-border); }
.rx-faq summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 20px 2px; min-height: var(--rz-tap); font-family: var(--rz-font-display); font-size: 1.14rem; font-weight: 600; cursor: pointer; letter-spacing: -.01em; }
.rx-faq summary::-webkit-details-marker { display: none; }
.rx-faq summary::after {
  content: "+"; margin-left: auto; width: 30px; height: 30px; flex: none; border-radius: 50%;
  border: 1px solid var(--rz-border-strong); display: grid; place-items: center;
  font-family: var(--rz-font-sans); font-weight: 400; font-size: 1.2rem; line-height: 1; color: var(--rz-text-2);
  transition: transform var(--rz-t-base) var(--rz-ease);
}
.rx-faq details[open] summary::after { transform: rotate(45deg); background: var(--rz-surface-2); }
.rx-faq details > p, .rx-faq details > div { padding: 0 2px 22px; color: var(--rz-text-2); max-width: 74ch; font-size: 1rem; line-height: 1.66; }
.rx-faq details > div p + p { margin-top: 8px; }

/* ── L'appel de fin ─────────────────────────────────────────────────────── */
.rx-fin { margin-top: 104px; }
.rx-fin .rx-une-in { padding: 64px 40px 68px; }
.rx-fin h2 { font-size: 2.5rem; font-weight: 700; line-height: 1.08; letter-spacing: -.028em; color: var(--rz-ink-text); }
.rx-une .rx-petit { margin-top: 16px; font-family: var(--rz-font-mono); font-size: .74rem; color: var(--rz-ink-text-2); }

/* ── Le cadre d'un navigateur (la page d'un site client) ────────────────── */
.rx-navf { container-type: inline-size; border-radius: 16px; background: var(--rz-surface); border: 1px solid var(--rz-border); box-shadow: var(--rz-shadow-lg); overflow: hidden; color: var(--rz-text); text-align: left; min-width: 0; }
.rx-une .rx-navf { border-color: var(--rz-ink-line); box-shadow: var(--rz-shadow-lg); }
.rx-bn { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 14px; background: var(--rz-surface-2); border-bottom: 1px solid var(--rz-border); }
.rx-pts { display: flex; gap: 6px; flex: none; }
.rx-pts i { width: 10px; height: 10px; border-radius: 50%; background: var(--rz-border-strong); }
.rx-barre { flex: 1; height: 26px; border-radius: 8px; background: var(--rz-surface); border: 1px solid var(--rz-border); display: flex; align-items: center; gap: 8px; padding: 0 10px; font-family: var(--rz-font-mono); font-size: .68rem; color: var(--rz-text-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rx-barre b { color: var(--rz-text); font-weight: 500; }
.rx-barre .rx-ico { width: 12px; height: 12px; }
.rx-tag { font-family: var(--rz-font-mono); font-size: .62rem; padding: 4px 9px; border-radius: 999px; background: var(--rz-info-soft-solid); color: var(--rz-info-text); white-space: nowrap; }

/* Le site d'Atelier Lumen, dessiné — L'ILLUSTRATION d'un site tiers, qui
   reste claire en thème sombre : ses couleurs vivent ici, et nulle part ailleurs. */
.rx-al { font-family: var(--rz-font-sans); color: #1B1F2A; background: #FBFAF7; }
.rx-al .rx-al-h { display: flex; align-items: center; gap: 16px; padding: 14px 22px; border-bottom: 1px solid #ECE8E1; }
.rx-al .rx-al-h b { font-family: var(--rz-font-display); font-size: 1.02rem; font-weight: 700; white-space: nowrap; }
.rx-al .rx-al-m { display: flex; gap: 14px; margin-left: auto; font-size: .76rem; color: #3D4250; }
.rx-al .rx-al-m span { white-space: nowrap; }
.rx-al .rx-al-sel { display: flex; gap: 2px; padding: 3px; border: 1px solid #E2DDD4; border-radius: 999px; font-family: var(--rz-font-mono); font-size: .62rem; }
.rx-al .rx-al-sel > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; color: #3D4250; }
.rx-al .rx-al-sel > span.rx-on { background: #1B1F2A; color: #FFFFFF; }
.rx-al .rx-al-sel .rzml-flag { width: 14px; height: 10px; }
.rx-al .rx-al-c { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; padding: 26px 22px 24px; align-items: center; }
.rx-al h4 { font-family: var(--rz-font-display); font-size: 1.75rem; font-weight: 600; line-height: 1.08; letter-spacing: -.02em; }
.rx-al p { font-size: .82rem; color: #4A4F5C; margin-top: 10px; line-height: 1.5; }
.rx-al .rx-al-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rx-al .rx-al-b span { font-size: .74rem; padding: 7px 12px; border-radius: 999px; border: 1px solid #1B1F2A; }
.rx-al .rx-al-b span:first-child { background: #1B1F2A; color: #FFFFFF; }
.rx-al .rx-al-f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 22px 20px; font-size: .68rem; color: #4A4F5C; }
.rx-al .rx-al-f span { padding: 8px 10px; border-radius: 10px; background: #F2EFE9; }
.rx-al svg { width: 100%; height: auto; display: block; border-radius: 12px; }
@container (max-width: 640px) { .rx-al .rx-al-m { display: none; } .rx-al .rx-al-sel { margin-left: auto; } .rx-al h4 { font-size: 1.5rem; } }

/* ── TOP CALENDAR, tous métiers ─────────────────────────────────────────── */
/* Une page de réservation dessinée, dans les mots de son métier. */
.rx-resa { padding: 20px 22px 22px; background: var(--rz-surface); color: var(--rz-text); }
.rx-r-nom { font-family: var(--rz-font-display); font-weight: 700; font-size: .95rem; }
.rx-r-offre { font-family: var(--rz-font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.015em; margin-top: 12px; line-height: 1.15; }
.rx-r-sous { font-size: .84rem; color: var(--rz-text-2); margin-top: 4px; }
.rx-r-jours { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; list-style: none; padding: 0; }
.rx-r-jours li { display: grid; place-items: center; width: 46px; height: 52px; border-radius: 12px; border: 1px solid var(--rz-border); font-family: var(--rz-font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.05; }
.rx-r-jours li small { display: block; font-family: var(--rz-font-sans); font-weight: 400; font-size: .64rem; color: var(--rz-text-2); }
.rx-r-jours li.rx-on { background: var(--rz-text); border-color: var(--rz-text); color: var(--rz-surface); }
.rx-r-jours li.rx-on small { color: var(--rz-surface); }
.rx-r-jour { font-family: var(--rz-font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rz-text-2); margin: 14px 0 8px; }
.rx-r-h { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--rz-border); border-radius: 12px; margin-top: 6px; }
.rx-r-h b { font-family: var(--rz-font-mono); font-weight: 500; font-size: .9rem; }
.rx-r-h span { font-size: .78rem; color: var(--rz-good-text); background: var(--rz-good-soft-solid); padding: 2px 8px; border-radius: 999px; margin-left: auto; }
.rx-r-h.rx-plein span { color: var(--rz-text-2); background: var(--rz-surface-3); }
.rx-r-h.rx-plein b { color: var(--rz-text-3); text-decoration: line-through; }
.rx-r-h.rx-choisi { border-color: var(--rz-text); box-shadow: 0 0 0 1px var(--rz-text); }
.rx-r-h .rx-coche { margin-left: 0; width: 20px; height: 20px; padding: 0; border-radius: 50%; background: var(--rz-text); color: var(--rz-surface); display: grid; place-items: center; }
.rx-r-h .rx-coche .rx-ico { width: 12px; height: 12px; stroke-width: 2.6; }
.rx-r-go { display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 14px; padding: 4px 16px; border-radius: 10px; background: var(--rz-brand-strong); color: var(--rz-on-brand); font-family: var(--rz-font-mono); font-weight: 500; text-align: center; font-size: .76rem; }
.rx-resa.rx-compacte { padding: 16px 16px 18px; }
.rx-compacte .rx-r-offre { font-size: 1.12rem; }
.rx-compacte .rx-r-jours li { width: 40px; height: 46px; font-size: .95rem; }
.rx-mots { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: .88rem; color: var(--rz-text-2); }
.rx-mots .rx-ico { width: 16px; height: 16px; color: var(--rx-ink); }
.rx-mots b { color: var(--rz-text); font-weight: 600; }
.rx-mots span { font-family: var(--rz-font-mono); font-size: .74rem; }
.rx-une .rx-mots { color: var(--rz-ink-text-2); }
.rx-une .rx-mots b { color: var(--rz-ink-text); }
.rx-une .rx-mots .rx-ico { color: var(--rx-hi-a); }
.rx-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.rx-trio > div { min-width: 0; }
/* La grille des huit métiers, comme le premier lancement de l'extension. */
.rx-metiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.rx-metier { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--rz-r-lg); background: var(--rz-surface); border: 1px solid var(--rz-border); box-shadow: var(--rz-shadow-sm); min-width: 0; }
.rx-metier > .rx-ico { width: 24px; height: 24px; color: var(--rx-ink); margin-bottom: 6px; }
.rx-metier b { font-family: var(--rz-font-display); font-size: 1.08rem; font-weight: 700; }
.rx-metier span { font-size: .88rem; color: var(--rz-text-2); line-height: 1.45; }
.rx-metier .rx-mots-m { margin-top: auto; align-self: flex-start; font-family: var(--rz-font-mono); font-size: .7rem; color: var(--rz-text-2); background: var(--rz-surface-2); padding: 5px 9px; border-radius: 8px; }
.rx-metier.rx-autre { border-style: dashed; box-shadow: none; background: transparent; }
.rx-metier.rx-on { border-color: var(--rz-text); box-shadow: 0 0 0 1px var(--rz-text), var(--rz-shadow-sm); }
.rx-metier .rx-coche { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 50%; background: var(--rz-text); color: var(--rz-surface); display: grid; place-items: center; }
.rx-metier .rx-coche .rx-ico { width: 13px; height: 13px; stroke-width: 2.6; }
/* Les captures officielles ; en anglais tant que les françaises manquent. */
.rx-caps { display: flex; flex-direction: column; gap: 20px; }
.rx-caps2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rx-cap { margin: 0; min-width: 0; }
.rx-cap picture, .rx-cap img { display: block; width: 100%; height: auto; }
.rx-cap img { border-radius: 16px; border: 1px solid var(--rz-border); box-shadow: var(--rz-shadow-lg); background: var(--rz-ink); }
.rx-cap figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: .95rem; color: var(--rz-text-2); line-height: 1.5; }
.rx-cap figcaption b { color: var(--rz-text); }
.rx-en { font-family: var(--rz-font-mono); font-size: .66rem; padding: 3px 8px; border-radius: 999px; background: var(--rz-warn-soft-solid); color: var(--rz-warn-text); }
/* Free / Plus */
.rx-editions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rx-edition { padding: 30px; border-radius: var(--rz-r-lg); background: var(--rz-surface); border: 1px solid var(--rz-border); box-shadow: var(--rz-shadow-sm); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rx-edition.rx-mise { border-color: color-mix(in srgb, var(--rx-a) 55%, var(--rz-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rx-a) 18%, transparent), var(--rz-shadow-md); }
.rx-nm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rx-nm h3 { font-family: var(--rz-font-display); font-size: 1.35rem; font-weight: 700; }
.rx-px { font-family: var(--rz-font-display); font-weight: 700; font-size: 2.4rem; letter-spacing: -.03em; line-height: 1; }
.rx-px small { font-family: var(--rz-font-sans); font-weight: 400; font-size: .95rem; color: var(--rz-text-2); letter-spacing: 0; }
.rx-edition ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rx-edition li { display: flex; gap: 10px; font-size: .95rem; line-height: 1.5; }
.rx-edition li .rx-ico { color: var(--rz-good-text); margin-top: 2px; }
.rx-edition .rx-bas { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rz-border); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .9rem; color: var(--rz-text-2); }

/* ── Les cartes d'extension (téléchargement, « en attendant ») ──────────── */
.rx-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rx-tuile { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: var(--rz-r-lg); background: var(--rz-surface); border: 1px solid var(--rz-border); box-shadow: var(--rz-shadow-sm); overflow: hidden; isolation: isolate; min-width: 0; }
.rx-tuile::before { content: ""; position: absolute; z-index: -1; width: 320px; height: 320px; right: -110px; top: -150px; border-radius: 50%; background: radial-gradient(circle, var(--rx-a), transparent 65%); opacity: .16; }
.rx-tete { display: flex; gap: 16px; align-items: center; }
.rx-tete .rx-logo { width: 56px; height: 56px; box-shadow: var(--rz-shadow-md); }
.rx-tete > div { min-width: 0; }
.rx-nom { font-family: var(--rz-font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rx-ink); }
.rx-nom a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.rx-nom a:hover { text-decoration-color: currentColor; }
/* TACTILE-01 : le nom d'une tuile est un lien SEUL, hors de toute phrase — au doigt, 24 px au moins (il en faisait 15). */
@media (pointer: coarse) { .rx-nom a { display: inline-flex; align-items: center; min-height: 24px; } }
.rx-besoin { font-family: var(--rz-font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.18; letter-spacing: -.02em; margin-top: 4px; }
.rx-tuile > p:not(.rx-meta) { color: var(--rz-text-2); font-size: 1rem; line-height: 1.6; }
.rx-meta { font-family: var(--rz-font-mono); font-size: .74rem; color: var(--rz-text-2); }
.rx-tuile .rx-bas { margin-top: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--rz-border); }
.rx-prix { font-family: var(--rz-font-display); font-weight: 700; font-size: 1.06rem; margin-right: auto; }
.rx-prix small { font-family: var(--rz-font-sans); font-weight: 400; color: var(--rz-text-2); font-size: .88rem; }
.rx-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.rx-notes .rx-mesure { margin-top: 0; }
.rx-h-note { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.rx-msg-clair { margin-top: 16px; min-height: 1.4em; font-weight: 600; color: var(--rz-text); }
.rx-msg-clair:empty { min-height: 0; margin: 0; }

/* ── La page de téléchargement d'une extension ──────────────────────────── */
.rx-dl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rx-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rx-carte { border-radius: var(--rz-r-lg); background: var(--rz-surface); border: 1px solid var(--rz-border); box-shadow: var(--rz-shadow-sm); overflow: hidden; min-width: 0; }
.rx-carte.rx-calme { background: var(--rz-surface-2); box-shadow: none; }
.rx-carte-bd { padding: 28px; }
.rx-carte-hd { padding: 20px 24px; border-bottom: 1px solid var(--rz-border); }
.rx-carte-hd h2 { font-size: 1.1rem; font-weight: 700; }
.rx-carte-pied { display: flex; gap: 12px; align-items: flex-start; padding: 16px 24px; border-top: 1px solid var(--rz-border); background: var(--rz-surface-2); font-size: .92rem; color: var(--rz-text-2); }
.rx-carte-pied .rx-ico { color: var(--rx-ink); margin-top: 1px; }
.rx-fichier { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.rx-fichier .rx-logo { width: 64px; height: 64px; }
.rx-fichier > div { flex: 1; min-width: 200px; }
.rx-fichier b { font-family: var(--rz-font-display); font-size: 1.15rem; }
.rx-fichier .rx-meta { margin-top: 4px; }
.rx-etapes-v { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 18px; }
.rx-etapes-v li { display: flex; gap: 14px; align-items: flex-start; }
.rx-etapes-v .rx-n { margin: 0; flex: none; }
.rx-etapes-v b { display: block; font-size: 1.05rem; }
.rx-etapes-v p { font-size: .95rem; color: var(--rz-text-2); margin-top: 2px; line-height: 1.55; }
.rx-kv { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; padding: 11px 24px; border-bottom: 1px solid var(--rz-border); font-size: .9rem; }
/* Planche 11 : chaque ligne du prix tient sur une ligne ; la valeur ne se coupe pas. */
.rx-kv dd { white-space: nowrap; }
.rx-kv:last-child { border-bottom: 0; }
.rx-kv dt, .rx-kv span { color: var(--rz-text-2); }
.rx-kv dd, .rx-kv b { margin: 0; font-weight: 600; text-align: right; }
.rx-kvs { margin: 0; padding: 6px 0; }
.rx-carte.rx-calme p { margin-top: 6px; font-size: .94rem; color: var(--rz-text-2); }

/* ── Écrans moyens et téléphone ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .rx-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-metiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rx-une { margin: var(--rz-s-4) var(--rz-s-4) 0; border-radius: 24px; }
  .rx-une-in { grid-template-columns: minmax(0, 1fr); padding: 56px 28px 60px; gap: 40px; }
  .rx-une h1 { font-size: 2.4rem; }
  .rx-sec { padding: 80px 24px 0; }
  .rx-titre h2 { font-size: 2rem; }
  .rx-points, .rx-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-prix-bloc, .rx-faq-duo, .rx-dl { grid-template-columns: minmax(0, 1fr); }
  .rx-faq-duo { gap: 28px; }
  .rx-faq-duo .rx-titre { position: static; }
  .rx-fin h2 { font-size: 2rem; }
}
@media (max-width: 640px) {
  .rx-une { margin: 12px 12px 0; border-radius: 22px; }
  .rx-une-in { padding: 40px 20px 44px; gap: 32px; }
  .rx-fin .rx-une-in { padding: 44px 20px 48px; }
  .rx-une h1 { font-size: 1.95rem; }
  .rx-une .rx-lead { font-size: 1.02rem; }
  .rx-gestes .rz-btn { flex: 1 1 100%; white-space: normal; text-align: center; }
  .rx-sec { padding: 64px 16px 0; }
  .rx-sec.rx-serre { padding-top: 48px; }
  .rx-titre h2 { font-size: 1.75rem; }
  .rx-duo, .rx-points, .rx-trio, .rx-inclus, .rx-arret, .rx-editions, .rx-tuiles, .rx-caps2, .rx-etapes, .rx-notes { grid-template-columns: minmax(0, 1fr); }
  .rx-arret > div + div { border-left: 0; border-top: 1px solid var(--rz-border); }
  .rx-metiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rx-metier { padding: 14px; }
  .rx-tuile, .rx-cote, .rx-liste, .rx-edition, .rx-exemple, .rx-carte-bd { padding: 22px; }
  .rx-exemple .rx-chiffre { font-size: 2.8rem; }
  .rx-fin h2 { font-size: 1.7rem; }
  .rx-mesure { flex-direction: column; }
  .rx-drapeaux { max-width: none; }
  .rx-al .rx-al-c { grid-template-columns: minmax(0, 1fr); }
  .rx-kv { padding-inline: 18px; }
}
/* Sous 480 px, un métier par ligne : à deux colonnes, chaque carte tombait à 167 px et son texte s'écrasait. */
@media (max-width: 480px) {
  .rx-metiers { grid-template-columns: minmax(0, 1fr); }
}

/* TELECHARGEMENT-ATTENTE-01 — un produit sans version publiée : le bouton ne
   télécharge pas une erreur, il dit que le fichier arrive. */
.rz-btn.rz-btn-attente { opacity: 1; background: var(--rz-surface-2); color: var(--rz-text-2); border: 1px dashed var(--rz-border-strong, var(--rz-border)); box-shadow: none; cursor: default; pointer-events: none; }
.rx-attente { margin: 12px 0 0; font-size: .9rem; color: var(--rz-text-2); }
.rx-attente a { color: var(--rz-brand-strong); text-decoration: underline; }

/* L'exemple de navigateur au téléphone : l'adresse entière d'abord. */
@media (max-width: 480px) {
  .rx-bn { gap: 8px; padding: 0 10px; }
  .rx-pts { display: none; }
  .rx-barre { padding: 0 8px; font-size: .64rem; }
  .rx-tag { padding: 4px 7px; font-size: .6rem; }
}