/* CARD.PM — pages intérieures (/about/…). S'ajoute à app.css : mêmes jetons, mêmes composants.
   Sommaire : 1 fil d'Ariane · 2 titre à mots tournants · 3 ce qui est inclus · 4 « à vos couleurs » (sans JavaScript)
              5 une journée · 6 tarif · 7 témoignage · 8 petits écrans et préférences */

/* ── 1. Fil d'Ariane ── */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 22px; font: 500 .74rem/1 var(--font-m); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.crumbs li + li::before { content: '/'; margin-inline-end: 8px; opacity: .55; }
.crumbs a { color: var(--mute); transition: color .2s; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-2); }

/* ── 2. Titre à mots tournants : CSS seul. Tous les mots occupent la même cellule de grille, donc la place est réservée
      dès le premier affichage (aucun saut de mise en page). La taille se réduit pour que le plus long tienne sur une ligne. ── */
.rot-title { container-type: inline-size; }
.rot-title .l1 { display: block; }
.rot { display: grid; color: var(--accent); font-size: min(1em, 8.3cqi); white-space: nowrap; }
.rot > span { grid-area: 1 / 1; opacity: 0; animation: rot 18s infinite; }
.rot > span:nth-child(2) { animation-delay: 2s; }  .rot > span:nth-child(3) { animation-delay: 4s; }
.rot > span:nth-child(4) { animation-delay: 6s; }  .rot > span:nth-child(5) { animation-delay: 8s; }
.rot > span:nth-child(6) { animation-delay: 10s; } .rot > span:nth-child(7) { animation-delay: 12s; }
.rot > span:nth-child(8) { animation-delay: 14s; } .rot > span:nth-child(9) { animation-delay: 16s; }
@keyframes rot { 0% { opacity: 0; translate: 0 .28em; } 1.6%, 9.6% { opacity: 1; translate: 0 0; } 11.1%, 100% { opacity: 0; translate: 0 -.28em; } }
.hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-block-start: 16px; font-size: .92rem; color: var(--mute); }
.hero-note .rating { font-size: .92rem; }
.hero-note a { color: var(--ink-2); border-block-end: 1px solid var(--line-2); }
.hero-note a:hover { border-color: var(--accent); }

/* ── 3. Ce qui est inclus ── */
.incl { display: grid; gap: clamp(20px, 3vw, 36px); grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
.incl .plan { position: sticky; inset-block-start: 96px; }
.plan .checks { margin-block-start: 6px; }
.feat { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.feat > * { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); }
.feat .card-icon { grid-row: span 2; margin: 0; inline-size: 40px; block-size: 40px; }
.feat h3 { align-self: center; font-size: 1.04rem; }
.feat p { grid-column: 2; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }

/* ── 4. « À vos couleurs » : les choix sont de vrais boutons radio, et l'aperçu réagit par :has() — aucun JavaScript.
      Les variables --sty-* ne concernent que la carte d'aperçu, pas le thème de la page. ── */
.styler { --sty-accent: #2563eb; --sty-bg: #ffffff; --sty-ink: #0b0c0e; --sty-sub: #5b6272; --sty-soft: #f1f3f6;
          --sty-font: var(--font-d); --sty-shape: 50%;
          display: grid; gap: clamp(28px, 5vw, 80px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.styler:has([name='sty-couleur'][value='rouge']:checked) { --sty-accent: #e11d48; }
.styler:has([name='sty-couleur'][value='vert']:checked) { --sty-accent: #059669; }
.styler:has([name='sty-couleur'][value='ambre']:checked) { --sty-accent: #d97706; }
.styler:has([name='sty-couleur'][value='violet']:checked) { --sty-accent: #7c3aed; }
.styler:has([name='sty-couleur'][value='encre']:checked) { --sty-accent: #1f2937; }
.styler:has([name='sty-fond'][value='sombre']:checked) { --sty-bg: #0e1014; --sty-ink: #f4f5f7; --sty-sub: #9aa3b2; --sty-soft: #1a1e25; }
.styler:has([name='sty-fond'][value='teinte']:checked) { --sty-bg: color-mix(in srgb, var(--sty-accent) 9%, #fff); --sty-soft: color-mix(in srgb, var(--sty-accent) 17%, #fff); --sty-sub: #4b5261; }
.styler:has([name='sty-police'][value='elegante']:checked) { --sty-font: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; }
.styler:has([name='sty-police'][value='technique']:checked) { --sty-font: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; }
.styler:has([name='sty-photo'][value='arrondie']:checked) { --sty-shape: 24%; }
.styler:has([name='sty-photo'][value='libre']:checked) { --sty-shape: 46% 54% 50% 50% / 58% 42% 58% 42%; }

.sty-stage { position: relative; display: grid; place-items: center; padding-block: 20px 44px; }
.sty-stage::before { content: ''; position: absolute; inline-size: min(88%, 440px); aspect-ratio: 1; border-radius: 50%;
                     background: radial-gradient(closest-side, color-mix(in srgb, var(--sty-accent) 22%, transparent), transparent); transition: background .5s; }
.sty-stage pm-phone { --phone-w: clamp(232px, 23vw, 292px); }
.sty-sets { display: grid; gap: 22px; margin-block-start: 30px; }
.sty-set legend { margin-block-end: 10px; font: 500 .72rem/1 var(--font-m); letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }
.sty-swatches, .sty-seg { display: flex; flex-wrap: wrap; gap: 10px; }
.sty-swatches label, .sty-seg label { position: relative; cursor: pointer; }
.sty-swatches input, .sty-seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sty-swatches span { display: block; inline-size: 38px; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px transparent; transition: box-shadow .2s, scale .2s; }
.sty-swatches label:hover span { scale: 1.08; }
.sty-swatches input:checked + span { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c); }
.sty-swatches input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 6px; }
.sty-sw--bleu { --c: #2563eb; } .sty-sw--rouge { --c: #e11d48; } .sty-sw--vert { --c: #059669; }
.sty-sw--ambre { --c: #d97706; } .sty-sw--violet { --c: #7c3aed; } .sty-sw--encre { --c: #1f2937; }
.sty-seg span { display: block; padding: 11px 15px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); font: 500 .92rem/1 var(--font-d); color: var(--ink-2); transition: border-color .2s, background-color .2s, color .2s; }
.sty-seg label:hover span { border-color: var(--ink); color: var(--ink); }
.sty-seg input:checked + span { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.sty-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.sty-seg .f-elegante { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-weight: 600; }
.sty-seg .f-technique { font-family: var(--font-m); font-size: .84rem; }
.sty-editor { margin-block-start: 26px; font-size: .95rem; color: var(--mute); }
.sty-editor strong { color: var(--ink-2); }

/* La carte d'aperçu, dans l'écran du téléphone : tailles en unités de conteneur (voir .phone-ui dans app.css). */
.sty-screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--sty-bg); color: var(--sty-ink);
              font: 400 3.5cqw/1.35 var(--sty-font); transition: background-color .4s, color .4s; }
.sty-cover { flex: none; block-size: 25%; background: linear-gradient(135deg, color-mix(in srgb, var(--sty-accent) 55%, #000), var(--sty-accent) 60%, color-mix(in srgb, var(--sty-accent) 55%, #fff)); transition: background .4s; }
.sty-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 7%; margin-block-start: -2.6em; }
.sty-logo { margin-block-end: .5em; font-weight: 800; font-size: .95em; line-height: 1.05; letter-spacing: .14em; color: var(--sty-accent); }
.sty-avatar { display: grid; place-items: center; inline-size: 5.4em; aspect-ratio: 1; border-radius: var(--sty-shape); border: .22em solid var(--sty-bg);
              background: linear-gradient(150deg, color-mix(in srgb, var(--sty-accent) 35%, #fff), var(--sty-accent)); color: #fff; font-weight: 800; font-size: 1.8em; font-family: var(--font-d);
              transition: border-radius .4s, background .4s, border-color .4s; }
.sty-id { padding: .8em 7% 1em; }
.sty-name { font-weight: 800; font-size: 1.75em; line-height: 1.1; letter-spacing: -.01em; }
.sty-role { margin-block-start: .15em; font-size: 1.1em; color: var(--sty-sub); }
.sty-rows { display: grid; gap: .8em; padding: 1em 7%; background: var(--sty-soft); font-size: 1.08em; transition: background-color .4s; }
.sty-rows li { display: flex; align-items: center; gap: .9em; }
.sty-rows .i { inline-size: 1.3em; block-size: 1.3em; color: var(--sty-accent); }
.sty-actions { display: grid; grid-template-columns: 1.5fr 1fr; gap: .7em; padding: 1.1em 7% .8em; }
.sty-btn { display: flex; align-items: center; justify-content: center; block-size: 3.4em; border-radius: 1em; border: 1px solid color-mix(in srgb, var(--sty-ink) 18%, transparent); font-weight: 600; font-size: 1.02em; }
.sty-btn--fill { background: var(--sty-accent); border-color: var(--sty-accent); color: #fff; }
.sty-reviews { text-align: center; font-size: .98em; color: var(--sty-sub); }
.sty-reviews b { color: #f59e0b; }
.sty-foot { margin-block-start: auto; padding: .9em 7% 1.2em; text-align: center; font-size: .9em; color: var(--sty-sub); border-block-start: 1px solid color-mix(in srgb, var(--sty-ink) 10%, transparent); }

/* ── 5. Une journée avec votre carte ── */
.day { display: grid; max-inline-size: 820px; margin-inline: auto; }
.day > * { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 0 20px; padding-block-end: 30px; }
.day > :not(:last-child)::before { content: ''; position: absolute; inset-block: 46px 0; inset-inline-start: 22px; inline-size: 2px; background: linear-gradient(var(--line-2), var(--line)); }
.day-ico { display: grid; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--accent); box-shadow: var(--shadow-1); }
.day > :last-child .day-ico { border-color: transparent; background: var(--accent); color: #fff; }
.day time { display: block; padding-block-start: 3px; font: 500 .78rem/1.4 var(--font-m); letter-spacing: .1em; color: var(--mute); }
.day h3 { margin-block-start: 2px; font-size: 1.18rem; }
.day p { margin-block-start: 6px; max-inline-size: 62ch; color: var(--ink-2); }

/* ── 6. Tarif ── */
.solo-plan { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: stretch; }
.solo-plan .plan { padding: clamp(26px, 3.2vw, 44px); }
.solo-plan .price { font-size: clamp(2.8rem, 5vw, 4.2rem); }
.plan-note { margin-block-start: 14px; font-size: .9rem; color: var(--mute); }
.opts-side { display: grid; gap: 18px; align-content: start; }
.opts-side .card h3 { font-size: 1.1rem; }
.opts-side .card .tag { margin-block-end: 6px; }
.plan .tag + .price { margin-block-start: 8px; }
.opts-side .price-line { margin-block-start: 6px; font: 800 1.5rem/1.1 var(--font-d); color: var(--ink); letter-spacing: -.02em; }
.opts-side .price-line small { font: 500 .9rem/1 var(--font-d); color: var(--mute); letter-spacing: 0; }
.nets { margin-block-start: clamp(36px, 5vw, 56px); }
.nets .trust-row { margin-block: 0 16px; }

/* ── 7. Témoignage ── */
.quote-card { display: grid; gap: 14px; align-content: center; padding: clamp(26px, 3.4vw, 44px); }
.quote-card blockquote { margin: 0; font: 500 clamp(1.15rem, 1.9vw, 1.45rem)/1.45 var(--font-d); color: var(--ink); text-wrap: pretty; }
.quote-card blockquote::before { content: '«\00a0'; color: var(--accent); }
.quote-card blockquote::after { content: '\00a0»'; color: var(--accent); }
.quote-card figcaption { font-size: .92rem; color: var(--mute); }
.why { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-block-start: 18px; }
.why .rse { margin: 0; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.why > pm-reveal > .card, .grid-2 > pm-reveal > .card { block-size: 100%; }
.why .rse-num { font-size: clamp(2.2rem, 3.6vw, 3.2rem); }
.adv { margin-block-start: 18px; }

/* ── 8. Petits écrans et préférences ── */
@media (max-width: 980px) {
  .incl, .solo-plan, .why { grid-template-columns: minmax(0, 1fr); }
  .incl .plan { position: static; }
  .styler { gap: clamp(20px, 4vw, 40px); }
  .sty-stage pm-phone { --phone-w: 216px; }
}
/* Sous 720 px : titre, puis téléphone, puis options — l'aperçu et les choix tiennent ensemble à l'écran.
   Entre 720 et 980 px, les deux colonnes restent côte à côte pour la même raison. */
@media (max-width: 720px) {
  .styler { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .styler > div:first-child { display: contents; }
  .styler > div:first-child > pm-reveal { order: 1; }
  .sty-stage { order: 2; padding-block: 6px 30px; }
  .sty-sets { order: 3; margin-block-start: 0; }
  .sty-editor { order: 4; margin-block-start: 0; }
}
@media (max-width: 640px) {
  .sty-stage pm-phone { --phone-w: 168px; }
  .sty-sets { gap: 12px; }
  .sty-set legend { margin-block-end: 7px; }
  .sty-swatches { gap: 9px; }
  .sty-swatches span { inline-size: 32px; }
  .sty-seg { gap: 8px; }
  .sty-seg span { padding: 9px 12px; font-size: .88rem; }
  .day > * { gap: 0 14px; padding-block-end: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .rot > span { animation: none; }
  .rot > span:first-child { opacity: 1; translate: none; }
}
@media print {
  .rot > span { animation: none; }
  .rot > span:first-child { opacity: 1; }
}

/* Lien de la page courante dans la barre du haut. */
.top-nav a[aria-current='page'] { color: var(--ink); background: var(--surface-2); }

/* ═══════════ Pages Équipes, Réseaux et NFC ═══════════
   9 partagés · 10 éventail de cartes · 11 cockpit · 12 champs verrouillables · 13 calculateur · 14 mur de cartes
   15 circuits de distribution · 16 constructeur de formulaire · 17 adoption · 18 le geste NFC · 19 comptoir
   20 destination d'une plaque · 21 petits écrans */

/* ── 9. Partagés ── */
/* --brand déclarée comme couleur : elle peut alors se transitionner, et toutes les cartes qui l'héritent suivent. */
@property --brand { syntax: '<color>'; inherits: true; initial-value: #2563eb; }
.hl { color: var(--accent); }
.split { display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.split--top { align-items: start; }
.stage-note { max-inline-size: 46ch; margin-inline: auto; text-align: center; font-size: .92rem; line-height: 1.5; color: var(--mute); text-wrap: balance; }
.stage-note .i { display: inline-block; margin-inline-end: 6px; vertical-align: -.2em; color: var(--accent); }
.mock-cap { margin-block-start: 12px; text-align: center; font-size: .84rem; color: var(--mute); }
.sec-foot { margin-block-start: clamp(28px, 4vw, 44px); }
.center-row { justify-content: center; }
.dest-opts .seg-legend { text-align: start; }
.sig-demo { min-block-size: 0; }
.day .day-k { display: block; padding-block-start: 3px; font: 500 .74rem/1.4 var(--font-m); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.seg-legend { inline-size: 100%; margin-block-end: 10px; text-align: center; font: 500 .72rem/1 var(--font-m); letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }
.sty-seg .dot { display: inline-block; inline-size: 10px; aspect-ratio: 1; margin-inline-end: 7px; border-radius: 50%; background: var(--c); vertical-align: -1px; }
.sty-seg .dot--auto { background: conic-gradient(#2563eb 0 25%, #e11d48 0 50%, #059669 0 75%, #d97706 0); }
.c-bleu { --c: #2563eb; } .c-rouge { --c: #e11d48; } .c-vert { --c: #059669; } .c-ambre { --c: #d97706; }

/* ── 10. L'éventail de cartes (Équipes) : trois cartes, une seule couleur de marque. ── */
.fan { --brand: #2563eb; transition: --brand .6s ease; display: grid; justify-items: center; gap: 20px; inline-size: 100%; }
.fan:has([name='fan-couleur'][value='rouge']:checked) { --brand: #e11d48; }
.fan:has([name='fan-couleur'][value='vert']:checked) { --brand: #059669; }
.fan:has([name='fan-couleur'][value='ambre']:checked) { --brand: #d97706; }
.fan:has([name='fan-couleur'][value='violet']:checked) { --brand: #7c3aed; }
.fan:has([name='fan-couleur'][value='encre']:checked) { --brand: #1f2937; }
.fan-stage { position: relative; inline-size: min(100%, 540px); aspect-ratio: 1 / .8; }
.fan-stage pm-card3d { position: absolute; --card-w: clamp(200px, 22vw, 300px); }
.fan-card--3 { inset-block-start: 0; inset-inline-end: 0; rotate: 9deg; --float-delay: -2.3s; }
.fan-card--2 { inset-block-start: 25%; inset-inline-start: 19%; rotate: 1deg; --float-delay: -4.6s; }
.fan-card--1 { inset-block-end: 3%; inset-inline-start: 0; rotate: -7deg; }
.fan-logo { display: block; font: 800 calc(var(--card-w, 300px) * .052)/1.02 var(--font-d); letter-spacing: .14em; }
.fan-colors { display: grid; justify-items: center; }
.fan-colors .sty-swatches { justify-content: center; }

/* ── 11. Le cockpit du manager (maquette) ── */
.cockpit { border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-2); }
.ck-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-block-end: 1px solid var(--line); }
.ck-head b { font: 500 1rem/1.2 var(--font-d); color: var(--ink); }
.ck-head b small { font: 500 .8rem/1 var(--font-b); color: var(--mute); margin-inline-start: 6px; }
.ck-actions { display: flex; gap: 6px; }
.ck-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 9px; font: 500 .78rem/1 var(--font-d); color: var(--ink-2); white-space: nowrap; }
.ck-btn .i { inline-size: 1em; block-size: 1em; }
.ck-btn--fill { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.ck-table { inline-size: 100%; border-collapse: collapse; font-size: .84rem; }
.ck-table th { padding: 10px 14px; text-align: start; font: 500 .64rem/1 var(--font-m); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); border-block-end: 1px solid var(--line); }
.ck-table td { padding: 10px 14px; border-block-end: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.ck-table tr:last-child td { border-block-end: 0; }
.ck-who { display: flex; align-items: center; gap: 10px; }
.ck-av { display: grid; place-items: center; flex: none; inline-size: 30px; aspect-ratio: 1; border-radius: 50%; background: var(--accent); color: #fff; font: 800 .66rem/1 var(--font-d); }
.ck-who b { display: block; color: var(--ink); font-weight: 600; }
.ck-who small { color: var(--mute); font-size: .76rem; }
.st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 99px; font: 500 .74rem/1 var(--font-d); }
.st::before { content: ''; inline-size: 6px; aspect-ratio: 1; border-radius: 50%; background: currentColor; }
.st--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.st--wait { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
.st--off { color: var(--mute); background: var(--surface-2); }
.ck-relance { margin-inline-start: 6px; font: 500 .72rem/1 var(--font-d); color: var(--accent); }
.ck-nfc .i { inline-size: 1.1em; block-size: 1.1em; color: var(--accent); }
.ck-foot { padding: 11px 16px; border-block-start: 1px solid var(--line); font-size: .8rem; color: var(--mute); }

/* ── 12. Les champs d'une carte, verrouillables d'un clic. Le décompte est fait par des compteurs CSS. ── */
.locks-card { padding: clamp(24px, 3.2vw, 40px); }
.locks { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 18px; counter-reset: locked open; }
.locks label { position: relative; cursor: pointer; }
.locks input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.locks input:checked { counter-increment: locked; }
.locks input:not(:checked) { counter-increment: open; }
.locks span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); font: 500 .88rem/1 var(--font-d); color: var(--ink-2); transition: background-color .2s, border-color .2s, color .2s; }
.locks .i { inline-size: 1em; block-size: 1em; }
.locks .i-lk { display: none; }
.locks .i-pn { color: var(--mute); }
.locks label:hover span { border-color: var(--ink); }
.locks input:checked + span { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 50%, transparent); color: var(--ink); }
.locks input:checked + span .i-lk { display: block; color: var(--warn); }
.locks input:checked + span .i-pn { display: none; }
.locks input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.locks-sum { margin-block-start: 16px; font-size: .92rem; color: var(--mute); }
.locks-sum::after { content: 'Verrouillés : ' counter(locked) ' · modifiables par vos collaborateurs : ' counter(open); color: var(--ink-2); font-weight: 600; }

/* ── 13. Calculateur de licences ── */
.calc { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.calc-live, .calc-grid { padding: clamp(24px, 3.2vw, 40px); }
.calc-live { display: grid; gap: 18px; align-content: space-between; }
.calc-dyn { display: grid; gap: 16px; }
.calc-dyn label { font: 500 1.05rem/1.3 var(--font-d); color: var(--ink); }
.calc-n { display: flex; align-items: baseline; gap: 10px; }
.calc-n output { font: 800 clamp(2.6rem, 5vw, 3.6rem)/1 var(--font-d); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-n span { color: var(--mute); }
.calc-range { inline-size: 100%; block-size: 28px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.calc-out div { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); }
.calc-out dt { font: 500 .68rem/1.3 var(--font-m); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.calc-out dd { margin: 6px 0 0; font: 800 1.6rem/1 var(--font-d); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-custom { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: .92rem; color: var(--ink); }
.calc-custom[hidden] { display: none; }
.calc-grid h3 { font-size: 1.15rem; }
.tiers { inline-size: 100%; margin-block: 14px 18px; border-collapse: collapse; font-size: .95rem; }
.tiers th { padding: 10px; text-align: start; font: 500 .66rem/1.3 var(--font-m); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); border-block-end: 1px solid var(--line-2); }
.tiers td { padding: 12px 10px; border-block-end: 1px solid var(--line); color: var(--ink-2); font-variant-numeric: tabular-nums; transition: background-color .25s; }
.tiers th:not(:first-child), .tiers td:not(:first-child) { text-align: end; }
.tiers tr[data-on] td { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); font-weight: 600; }

/* ── 14. Le mur de cartes (Réseaux) : un plan incliné en CSS, des dizaines de cartes, une seule couleur de marque.
      La vague vient du décalage --i posé par <pm-reveal stagger> sur chaque carte. ── */
.wall-scene { --wall-brand: #2563eb; display: grid; justify-items: center; gap: 16px; inline-size: 100%; }
.wall-scene:has([name='wall-couleur'][value='bleu']:checked) { --wall-brand: #2563eb; }
.wall-scene:has([name='wall-couleur'][value='rouge']:checked) { --wall-brand: #e11d48; }
.wall-scene:has([name='wall-couleur'][value='vert']:checked) { --wall-brand: #059669; }
.wall-scene:has([name='wall-couleur'][value='ambre']:checked) { --wall-brand: #d97706; }
.wall-view { display: grid; place-items: center; inline-size: min(100%, 540px); aspect-ratio: 1 / .74; perspective: 2000px; }
.wall-tilt { display: block; inline-size: 64%; transform-style: preserve-3d; transform: rotateX(calc(52deg + var(--rx, 0deg))) rotateZ(calc(-34deg + var(--ry, 0deg))); }
pm-reveal.wall { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
pm-reveal.wall[stagger] > * { transition: opacity .5s ease calc(var(--i, 0) * 18ms), translate .6s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 18ms); }
.wall-card { display: flex; flex-direction: column; align-items: center; aspect-ratio: .64; overflow: hidden; border-radius: 12%; border: 1px solid var(--line-2); background: var(--surface); box-shadow: -10px 12px 18px -12px rgba(0, 0, 0, .45); }
.wall-card i { display: block; flex: none; }
.wc-top { display: grid; place-items: center; inline-size: 100%; aspect-ratio: 1.55; background-color: var(--wall-brand); transition: background-color .5s ease calc(var(--i, 0) * 40ms); }
.wc-top b { display: block; inline-size: 42%; aspect-ratio: 5; border-radius: 99px; background: rgba(255, 255, 255, .85); }
.wc-av { inline-size: 38%; aspect-ratio: 1; margin-block-start: -19%; border-radius: 50%; border: 2px solid var(--surface); background: linear-gradient(150deg, #cbd5e1, #64748b); }
.wc-l { inline-size: 62%; aspect-ratio: 12; margin-block-start: 11%; border-radius: 99px; background: var(--line-2); }
.wc-l--s { inline-size: 42%; margin-block-start: 6%; }
.wc-btn { inline-size: 68%; aspect-ratio: 4.6; margin-block: auto 13%; border-radius: 99px; background-color: var(--wall-brand); transition: background-color .5s ease calc(var(--i, 0) * 40ms); }
.wall-scene:has([name='wall-couleur'][value='auto']:checked) :is(.wc-top, .wc-btn) { animation: wall-cycle 12s ease-in-out infinite both; animation-delay: calc(var(--i, 0) * 45ms); }
pm-tilt[offscreen] :is(.wc-top, .wc-btn) { animation-play-state: paused; }
@keyframes wall-cycle { 0%, 20% { background-color: #2563eb; } 25%, 45% { background-color: #e11d48; } 50%, 70% { background-color: #059669; } 75%, 95% { background-color: #d97706; } 100% { background-color: #2563eb; } }
.wall-colors { display: grid; justify-items: center; }
.wall-colors .sty-seg { justify-content: center; }

/* ── 15. Circuits de distribution : un bouton radio par modèle, le panneau suit par :has(). ── */
.circuit { display: grid; gap: 18px; }
.circuit-tabs { justify-content: center; }
.circuit-panel { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 3.4vw, 48px); align-items: center; padding: clamp(24px, 3.2vw, 44px); }
.circuit:has([value='direct']:checked) [data-circuit='direct'], .circuit:has([value='agents']:checked) [data-circuit='agents'],
.circuit:has([value='mixte']:checked) [data-circuit='mixte'], .circuit:has([value='revendeur']:checked) [data-circuit='revendeur'],
.circuit:has([value='essai']:checked) [data-circuit='essai'] { display: grid; animation: scene-in .45s ease; }
@supports not selector(:has(*)) { .circuit-tabs { display: none; } .circuit-panel { display: grid; } }
.circuit-panel h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; }
.circuit-panel h3 + p { margin-block-start: 10px; }
.cf { display: grid; gap: 8px; margin: 0; }
.cf div { display: grid; grid-template-columns: minmax(8.5em, auto) 1fr; gap: 14px; align-items: baseline; padding: 13px 16px; border-radius: 12px; background: var(--surface-2); }
.cf dt { font: 500 .68rem/1.4 var(--font-m); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.cf dd { margin: 0; color: var(--ink); font-weight: 500; }

/* ── 16. Constructeur de formulaire (maquette) ── */
.builder { display: grid; grid-template-columns: minmax(0, 148px) minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface-2); box-shadow: var(--shadow-2); }
.bricks { display: grid; gap: 8px; align-content: start; }
.bricks p { margin-block-end: 2px; font: 500 .64rem/1.2 var(--font-m); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.brick { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--surface); font: 500 .8rem/1.1 var(--font-d); color: var(--ink-2); }
.brick .i { inline-size: 1em; block-size: 1em; color: var(--mute); }
.brick--legal { border-color: rgba(220, 38, 38, .5); background: color-mix(in srgb, #dc2626 7%, var(--surface)); color: #dc2626; }
.brick--legal .i { color: #dc2626; }
.builder .form-mock { inline-size: auto; justify-self: stretch; box-shadow: none; }
.builder-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); font-size: .82rem; color: var(--mute); }
.builder-bar b { color: var(--ink); font-weight: 600; }
.builder-pub { flex: none; padding: 9px 13px; border-radius: 10px; background: var(--btn); color: var(--btn-ink); font: 500 .82rem/1 var(--font-d); }

/* ── 17. Adoption du réseau (maquette) ── */
.adopt { padding: clamp(22px, 3vw, 34px); }
.adopt-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; margin-block-end: 14px; }
.adopt-head b { font: 500 1.05rem/1.2 var(--font-d); color: var(--ink); }
.adopt-head small { font: 500 .66rem/1 var(--font-m); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.adopt-row { display: grid; grid-template-columns: minmax(0, 9em) 1fr 3em; gap: 12px; align-items: center; padding-block: 9px; font-size: .9rem; color: var(--ink-2); }
.adopt-row b { text-align: end; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.adopt-bar { block-size: 8px; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.adopt-bar i { display: block; block-size: 100%; border-radius: inherit; background: var(--accent); transform-origin: 0 50%; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) .2s; }
pm-reveal:defined:not([shown]) .adopt-bar i { transform: scaleX(0); }
.adopt-bar .w96 { inline-size: 96%; } .adopt-bar .w88 { inline-size: 88%; } .adopt-bar .w81 { inline-size: 81%; }
.adopt-bar .w74 { inline-size: 74%; } .adopt-bar .w63 { inline-size: 63%; }
.adopt-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-block-start: 14px; padding-block-start: 14px; border-block-start: 1px solid var(--line); font-size: .8rem; color: var(--mute); }

/* ── 18. Le geste NFC : le téléphone s'approche de la carte, la notification apparaît, la carte s'ouvre.
      Tout est en @keyframes. L'état de base est l'état final (carte ouverte) : avec « Réduire les animations »,
      c'est lui qu'on voit, immobile. ── */
/* Les tailles sont posées sur les composants eux-mêmes : une variable héritée du parent serait écrasée par leur :host. */
.tap-scene { --pw: clamp(158px, 16vw, 222px); --cw: clamp(206px, 24vw, 320px); --tap-x: -48%; --tap-y: -4%;
             position: relative; inline-size: min(100%, 560px); block-size: calc(var(--pw) * 2.074 + 64px); }
.tap-card-wrap pm-card3d { --card-w: var(--cw); }
.tap-card-wrap { position: absolute; z-index: 1; inset-inline-start: 0; inset-block-end: 26px; }
.tap-rings { position: absolute; inset-block-start: -2%; inset-inline-start: 76%; inline-size: 24%; aspect-ratio: 1; pointer-events: none; }
.tap-rings i { position: absolute; inset: 0; border: 2px solid var(--accent); border-radius: 50%; opacity: 0; animation: tap-ring 7s ease-out infinite; }
.tap-rings i:nth-child(2) { animation-delay: .35s; }
.tap-scene pm-phone { --phone-w: var(--pw); position: absolute; z-index: 2; inset-block-start: 0; inset-inline-end: 3%; animation: tap-phone 7s cubic-bezier(.45, 0, .2, 1) infinite; }
.tap-screen { position: absolute; inset: 0; }
.tap-lock { display: grid; align-content: start; justify-items: center; gap: 1.5cqw; padding-block-start: 30cqw; color: #fff; opacity: 0;
            background: radial-gradient(120% 70% at 20% 10%, #7c3aed, transparent 60%), radial-gradient(120% 80% at 90% 90%, #db2777, transparent 60%), #1e3a8a; animation: tap-lock 7s linear infinite; }
.tap-time { font: 300 21cqw/1 var(--font-b); letter-spacing: -.02em; }
.tap-date { font: 500 4.4cqw/1.2 var(--font-b); opacity: .85; }
.tap-notif { z-index: 2; inset-block-end: auto; padding: 17cqw 4cqw 0; opacity: 0; translate: 0 -120%; animation: tap-notif 7s cubic-bezier(.3, .8, .3, 1) infinite; }
.tap-banner { display: grid; grid-template-columns: auto 1fr; gap: 3cqw; align-items: center; padding: 3.4cqw 4cqw; border-radius: 6cqw; background: rgba(245, 246, 248, .93); color: #0b0c0e; box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .25); font-size: 3.6cqw; line-height: 1.3; }
.tap-app { display: grid; place-items: center; inline-size: 9cqw; aspect-ratio: 1; border-radius: 2.4cqw; background: #0b0c0e; color: #fff; }
.tap-app .i { inline-size: 5.4cqw; block-size: 5.4cqw; }
.tap-banner b { display: block; font-weight: 700; color: #0b0c0e; }
.tap-open { overflow: hidden; background: #fff; font-size: 3.55cqw; line-height: 1.35; animation: tap-open 7s ease infinite; }
@keyframes tap-phone { 0%, 16% { translate: 0 0; rotate: 0deg; } 31%, 45% { translate: var(--tap-x) var(--tap-y); rotate: -5deg; } 60%, 100% { translate: 0 0; rotate: 0deg; } }
@keyframes tap-ring { 0%, 32% { opacity: 0; scale: .55; } 34% { opacity: .95; scale: .55; } 50% { opacity: 0; scale: 2.3; } 100% { opacity: 0; scale: 2.3; } }
@keyframes tap-lock { 0%, 41% { opacity: 1; } 45%, 93% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes tap-notif { 0%, 33% { opacity: 0; translate: 0 -120%; } 37%, 49% { opacity: 1; translate: 0 0; } 53%, 100% { opacity: 0; translate: 0 -120%; } }
@keyframes tap-open { 0%, 47% { opacity: 0; scale: .96; } 53%, 92% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; scale: 1; } }

/* ── 19. Comptoir et vitrine : le sticker SPOT et la plaque FEED, dessinés en CSS ── */
.retail { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.retail > .card { display: grid; gap: 20px; align-content: start; }
.retail-art { position: relative; display: grid; place-items: center; min-block-size: 250px; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: 16px; }
.art-vitrine { background: linear-gradient(160deg, #cfe3f7, #eef6fd 45%, #d7e3f5); }
.art-vitrine::before { content: ''; position: absolute; inset: -20%; z-index: -1; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .75) 45%, transparent 52%), linear-gradient(115deg, transparent 58%, rgba(255, 255, 255, .45) 62%, transparent 66%); }
.art-vitrine::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 62%; z-index: -1; inline-size: 10px; background: linear-gradient(90deg, #9fb3c8, #c9d6e3); opacity: .7; }
.spot { display: grid; place-items: center; align-content: center; gap: 3px; inline-size: 128px; aspect-ratio: 1; border-radius: 50%; background: #0b0c0e; color: #fff; text-align: center; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .55), inset 0 0 0 4px rgba(255, 255, 255, .08); }
.spot .i { inline-size: 30px; block-size: 30px; }
.spot b { font: 800 .8rem/1.1 var(--font-d); letter-spacing: .02em; color: #fff; }
.spot small { max-inline-size: 9em; font-size: .6rem; line-height: 1.25; opacity: .78; }
.art-comptoir { background: linear-gradient(#efe9e1 0 66%, #cdbfae 66% 68%, #e2d6c7 68%); }
.feed { position: relative; display: grid; justify-items: center; align-content: center; gap: 7px; inline-size: 142px; aspect-ratio: 12 / 15; margin-block-start: -8%; padding: 14px; border: 1px solid rgba(255, 255, 255, .95); border-radius: 8px; text-align: center; color: #0b0c0e;
        background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .72)); box-shadow: 0 20px 30px -18px rgba(0, 0, 0, .5), inset 0 0 0 4px rgba(255, 255, 255, .5); transform: perspective(700px) rotateX(9deg); }
.feed b { font: 800 .92rem/1.1 var(--font-d); color: #0b0c0e; }
.feed .stars { color: #f59e0b; letter-spacing: .12em; font-size: .92rem; }
.feed .i { inline-size: 24px; block-size: 24px; color: #2563eb; }
.feed small { font-size: .6rem; line-height: 1.3; color: #4b5261; }
.retail .prices { margin-block-start: 0; }
.retail .checks { margin-block-start: 0; }
.retail h3 { margin-block: 4px 8px; }
.checks + .fine, .card h3 + .fine { margin-block-start: 12px; }

/* ── 20. Où mène la plaque ? Un réglage, pas une réimpression (boutons radio + :has()). ── */
.dest { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.dest-opts { margin-block-start: 22px; }
.dest-screen { position: relative; container-type: inline-size; inline-size: 214px; aspect-ratio: 9 / 18.5; overflow: hidden; border: 9px solid #0b0c0e; border-radius: 32px; background: #fff; color: #0b0c0e; box-shadow: var(--shadow-2); }
.dest-screen::before { content: ''; position: absolute; z-index: 2; inset-block-start: 3.5%; inset-inline-start: 50%; inline-size: 30%; aspect-ratio: 3.6; translate: -50% 0; border-radius: 99px; background: #0b0c0e; }
.dest-view { position: absolute; inset: 0; display: none; align-content: center; gap: 4.5cqw; padding: 16cqw 8cqw 10cqw; font-size: 6cqw; line-height: 1.35; }
.dest:has([name='dest'][value='carte']:checked) [data-dest='carte'], .dest:has([name='dest'][value='avis']:checked) [data-dest='avis'],
.dest:has([name='dest'][value='site']:checked) [data-dest='site'], .dest:has([name='dest'][value='form']:checked) [data-dest='form'] { display: grid; animation: scene-in .4s ease; }
@supports not selector(:has(*)) { .dest-opts { display: none; } [data-dest='carte'] { display: grid; } }
.dv-av { inline-size: 26cqw; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(150deg, #c7d2fe, #6366f1); justify-self: center; }
.dv-t { font: 800 8cqw/1.15 var(--font-d); text-align: center; }
.dv-s { color: #5b6272; text-align: center; }
.dv-row { padding: 3cqw 4cqw; border-radius: 3cqw; background: #f1f3f6; font-size: 5.4cqw; }
.dv-btn { display: grid; place-items: center; block-size: 13cqw; border-radius: 4cqw; background: #0b0c0e; color: #fff; font: 600 5.4cqw/1 var(--font-d); }
.dv-stars { text-align: center; color: #f59e0b; font-size: 11cqw; letter-spacing: .06em; }
.dv-area { block-size: 30cqw; border: 1px solid #d0d4dc; border-radius: 3cqw; }
.dv-hero { block-size: 34cqw; border-radius: 4cqw; background: linear-gradient(135deg, #1e3a8a, #2563eb 55%, #7c3aed); }
.dv-field { padding: 3cqw 4cqw; border: 1px solid #15171b; border-radius: 3cqw; color: #6a7180; font-size: 5cqw; }
.dv-consent { padding: 3cqw; border: 1px solid #fca5a5; border-radius: 3cqw; background: #fef2f2; font-size: 4.2cqw; }

/* ── 21. Petits écrans ── */
@media (max-width: 980px) {
  .split, .calc, .circuit-panel, .retail, .dest { grid-template-columns: minmax(0, 1fr); }
  .dest-screen { justify-self: center; }
}
@media (max-width: 640px) {
  .fan-stage pm-card3d { --card-w: clamp(160px, 50vw, 205px); }
  .builder { grid-template-columns: minmax(0, 1fr); }
  .bricks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bricks p { grid-column: 1 / -1; }
  .ck-table .ck-hide { display: none; }
  .ck-table th, .ck-table td { padding-inline: 10px; }
  .cf div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .calc-out { grid-template-columns: minmax(0, 1fr); }
  .tap-scene { --tap-x: -30%; --tap-y: 5%; }
  .adopt-row { grid-template-columns: minmax(0, 7em) 1fr 2.6em; }
}