/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   OFFRE « POUR MES CLIENTS » : LES CRÉDITS À LA FRAÎCHEUR (lot 7a du chantier tarifs, 2026-09-30). Vue conseil de la page des
   offres (Shared/TarifsConseil.razor, rendue par Pages/Pricing.razor sur /tarifs et dans la modale du hub). Portée de la page de
   présentation validée par Arthur (version 11) : bandeau en dégradé, barre collante (ancres et bascule « L'essentiel | Tout le
   détail »), offres en cartes, tableau des marges, mécanique, simulateur en deux colonnes (une ligne par offre : compteur,
   honoraires, coût), portefeuilles types, engagements. Toutes les classes sont préfixées ofr-.
   • Couleurs : UNIQUEMENT les jetons de l'application (tokens.css), rebranchés ci-dessous sur des jetons locaux --ofr-* ; les deux
     thèmes suivent data-theme, la marque suit la palette (et la marque blanche). Encre sur fond de marque : --brand-contrast.
   • Largeurs : requêtes de CONTENEUR sur .ofr (la vue vit dans la page, 1 100 px au plus, et dans la modale du hub, plus étroite
     que la fenêtre) ; rien ne déborde de 320 à 1 440 px, les deux tableaux passent en cartes sur petite largeur.
   • Collant : la barre d'ancres et l'année du simulateur collent au haut du CORPS de la page des offres (.pr-body, qui défile) ;
     aucun ancêtre entre les deux ne doit donc porter d'overflow (il deviendrait le conteneur de défilement du collant). La barre
     colle au BORD du corps, pas à sa boîte de contenu : voir .ofr-ancres.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.ofr {
    --ofr-ink: var(--color-text-primary);
    --ofr-ink-2: var(--color-text-secondary);
    --ofr-ink-3: var(--color-text-muted);
    --ofr-line: var(--color-border-medium);
    --ofr-line-2: var(--color-border-bright);
    --ofr-fond: var(--surf-1);
    --ofr-sheet: var(--surf-2);
    --ofr-well: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
    --ofr-b: color-mix(in srgb, var(--brand) 45%, var(--brand3));
    --ofr-on-a: var(--brand-contrast, #06141a);
    --ofr-grad-a: var(--brand-strong);
    --ofr-grad-b: var(--brand3-strong);
    --ofr-credit: var(--st-amber);
    --ofr-ok: var(--st-green);
    --ofr-glow: 30%;
    --ofr-shadow: 0 1px 2px rgba(var(--shadow-col), calc(.2 * var(--shadow-mul))), 0 10px 28px rgba(var(--shadow-col), calc(.24 * var(--shadow-mul)));
    --ofr-shadow-up: 0 2px 4px rgba(var(--shadow-col), calc(.24 * var(--shadow-mul))), 0 18px 40px rgba(var(--shadow-col), calc(.34 * var(--shadow-mul)));
    --ofr-bande-h: 49px;        /* hauteur de la barre d'ancres (bordure, 5 px d'air, bascule de version), collée ou non */
    container-type: inline-size;
    container-name: ofr;
    display: flex;
    flex-direction: column;
    gap: 44px;
    padding-bottom: 8px;
    color: var(--ofr-ink);
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
}
html[data-theme="light"] .ofr {
    /* Vert des marges un cran plus sombre qu'--st-green : sur la carte recommandée (teintée) sous le voile vert de .ofr-gain,
       --st-green tombait à 4,06:1 (mesuré, composition comprise) ; ainsi 5:1. */
    --ofr-ok: color-mix(in srgb, var(--st-green) 80%, var(--color-text-primary));
    --ofr-sheet: var(--color-bg-input);
    --ofr-well: color-mix(in srgb, var(--brand) 5%, var(--surf-2));
    --ofr-grad-a: color-mix(in srgb, var(--brand-strong) 82%, var(--color-text-primary));
    --ofr-grad-b: color-mix(in srgb, var(--brand3-strong) 82%, var(--color-text-primary));
    --ofr-glow: 20%;
}
/* Dans la modale du hub, le fond n'est pas celui de la page : l'année collante du simulateur reprend celui de la carte. */
.fec-pricing-modal-card .ofr { --ofr-fond: var(--modal-surf, var(--surf-3)); }

.ofr h2, .ofr h3, .ofr p, .ofr ul, .ofr ol { margin: 0; }
.ofr b { font-weight: 700; }
.ofr-num { font-variant-numeric: tabular-nums; }
.ofr button { font-family: var(--font-family); }
.ofr button:focus-visible, .ofr input:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
.ofr-grad { background: linear-gradient(100deg, var(--ofr-grad-a) 10%, var(--ofr-grad-b) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ofr-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-strong); }
.ofr-eyebrow-mut { color: var(--ofr-ink-3); }
.ofr-fl { display: inline-block; transition: transform .15s ease; }

/* ── Bandeau d'ouverture : halos de la marque (2ᵉ et 3ᵉ couleurs de la palette) sur la surface des cartes ── */
.ofr-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 30px 30px 26px;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--ofr-line));
    background:
        radial-gradient(640px 360px at 6% -22%, color-mix(in srgb, var(--brand) var(--ofr-glow), transparent), transparent 62%),
        radial-gradient(560px 340px at 98% -4%, color-mix(in srgb, var(--brand3) var(--ofr-glow), transparent), transparent 60%),
        radial-gradient(480px 260px at 62% 124%, color-mix(in srgb, var(--brand2) 16%, transparent), transparent 64%),
        linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, var(--ofr-sheet)), var(--ofr-sheet));
    box-shadow: var(--ofr-shadow);
}
.ofr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ofr-puce {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; color: var(--ofr-ink);
    background: color-mix(in srgb, var(--ofr-sheet) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent);
}
.ofr-puce .iku-ico { color: var(--brand-strong); }
.ofr-puce-ht { font-weight: 700; }
.ofr-titre { font-size: clamp(26px, 4.4cqi, 44px); line-height: 1.06; letter-spacing: -.025em; font-weight: 800; max-width: 20ch; color: var(--ofr-ink); text-wrap: balance; }
.ofr-lead { font-size: 16px; color: var(--ofr-ink-2); max-width: 64ch; }
.ofr-lead b { color: var(--ofr-ink); font-weight: 700; }
.ofr-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.ofr-cta {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; cursor: pointer;
    font-size: 14.5px; font-weight: 700; line-height: 1.2; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ofr-cta-1 { border: 0; color: var(--ofr-on-a); background: linear-gradient(100deg, var(--brand), var(--ofr-b)); box-shadow: var(--ofr-shadow); }
.ofr-cta-2 { border: 1px solid var(--ofr-line-2); color: var(--ofr-ink); background: color-mix(in srgb, var(--ofr-sheet) 78%, transparent); }
.ofr-cta:hover { transform: translateY(-1px); box-shadow: var(--ofr-shadow-up); }
.ofr-cta:hover .ofr-fl, .ofr-lien:hover .ofr-fl { transform: translateX(3px); }
/* Autant de colonnes que de chiffres (--ofr-ns, posé par la vue : trois pour un cabinet connecté, deux sans le calculateur). */
.ofr-stats { display: grid; grid-template-columns: repeat(var(--ofr-ns, 3), minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.ofr-stat {
    display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: 16px;
    background: color-mix(in srgb, var(--ofr-sheet) 80%, transparent);
    border: 1px solid var(--ofr-line);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ofr-stat b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--ofr-ink); }
.ofr-stat span { font-size: 13px; color: var(--ofr-ink-2); }

/* ── Barre collante au haut du corps de la page des offres : les ancres (qui défilent en largeur) et la bascule de version ──
   05/10/2026 (Arthur : « moche » une fois collée, le contenu se voyait dessous et autour, sans fond franc) : LA MÊME barre que le
   sélecteur de formules du hub (Shared/VitrineSelecteur.razor, actualisation.css .vit-barre / .vit-in), avec ses JETONS (fond,
   encre, contre-encre, poussée, liseré, ombre), déclarés là-bas aussi pour .ofr-ancres et .ofr-ancres-in : rien n'est recopié ici.
   • .ofr-ancres est l'élément COLLÉ et le conteneur de la requête d'état de défilement (container-type: scroll-state, Chromium
     133+). 🚨 Un collant s'arrête à la boîte de CONTENU du conteneur qui défile, pas à son bord : top = moins le padding haut du
     corps (--pr-corps-haut, posé par Pages/Pricing.razor) ; la barre colle au BORD même du corps, juste sous l'en-tête « Choisir
     mon offre », sans bande où le texte passerait.
   • .ofr-ancres-in est la PEAU (un conteneur ne se style pas par sa propre requête : elle est son enfant) : dégradé OPAQUE des
     couleurs 1 et 6 de la palette (--pal-1 → --pal-6, repli --brand / --brand2), encre blanche ou noire selon la luminance du
     milieu, bouts écartés de l'encre, liseré clair en haut, rayon et air de la barre du hub. Collée : coins carrés, ombre portée,
     et le dégradé se prolonge dans les gouttières du corps par deux ombres pleines de ses couleurs d'extrémité, décalées d'une
     largeur (100cqw : la largeur de .ofr, donc de la barre), rognées par l'overflow du corps : plus rien ne passe dessous ni
     autour. Une ombre n'agrandit pas la zone défilable (un élément à ±100vmax l'agrandissait de 800 px, mesuré le 01/10).
   • Pas de flou : sous un parent qui porte déjà un backdrop-filter, Chrome ne floute pas ce qui défile (mesuré sur le hub, 03/10). */
.ofr-ancres {
    position: sticky; top: calc(-1 * var(--pr-corps-haut, 0px)); z-index: 4;
    container-type: scroll-state;
    margin: -24px 0;
}
/* Air de côté (Arthur, essayé sur la préversion le 05/10) : le premier texte des ancres s'aligne sur celui des cartes dessous
   (31 px du bord : 18 + bordure + 12 du bouton), la bascule finit à 31 px du bord droit (30 + bordure) : les deux côtés se
   répondent. */
.ofr-ancres-in {
    display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-width: 0;
    padding: 5px 30px 5px 18px; border-radius: 14px;
    color: var(--vit-encre);
    background: linear-gradient(90deg in oklch, var(--vit-g1), var(--vit-g2)) border-box;
    border: 1px solid color-mix(in srgb, var(--vit-encre) 14%, transparent);
    box-shadow: inset 0 1px 0 var(--vit-liser);
    transition: box-shadow .18s ease;
}
@container scroll-state(stuck: top) {
    .ofr-ancres-in {
        border-radius: 0; border-color: transparent;
        box-shadow: inset 0 1px 0 var(--vit-liser), var(--vit-ombre), calc(-1 * 100cqw) 0 0 0 var(--vit-g1), 100cqw 0 0 0 var(--vit-g2);
    }
}
.ofr-liens { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ofr-liens::-webkit-scrollbar { display: none; }
.ofr-liens button {
    flex: none; padding: 6px 12px; border: 0; border-radius: 8px; cursor: pointer;
    font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--vit-encre); background: transparent;
    transition: background .15s ease;
}
.ofr-liens button:hover { background: color-mix(in srgb, var(--vit-encre) 14%, transparent); }
/* La bascule « L'essentiel · 2 min | Tout le détail » : toujours visible, à droite ; la piste et la pastille des segments du hub
   (.vit-seg, .vit-seg-b.on : le choix en pastille d'encre, écrit de la couleur du début du dégradé). */
.ofr-vue {
    flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px;
    background: color-mix(in srgb, var(--vit-contre) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--vit-encre) 18%, transparent);
}
.ofr-vue button { padding: 6px 12px; border: 0; border-radius: 8px; cursor: pointer; white-space: nowrap; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--vit-encre); background: transparent; transition: background .15s ease, color .15s ease; }
.ofr-vue button:hover { background: color-mix(in srgb, var(--vit-encre) 14%, transparent); }
.ofr-vue button[aria-pressed="true"] { color: var(--vit-g1); background: var(--vit-encre); }
.ofr-ancres button:focus-visible { outline: 2px solid var(--vit-encre); outline-offset: 2px; }
.ofr-court { display: none; }

/* ── Sections ── */
/* Une ancre pose la section 12 px sous la bande collante (scrollIntoView aligne sur le BORD du corps, où la bande colle). */
.ofr-sec { display: flex; flex-direction: column; gap: 18px; min-width: 0; scroll-margin-top: calc(var(--ofr-bande-h) + 12px); }
.ofr-sec-h { display: flex; flex-direction: column; gap: 8px; }
.ofr-sec-h h2, .ofr-sim-h h2 { font-size: clamp(21px, 3cqi, 28px); line-height: 1.18; letter-spacing: -.015em; font-weight: 800; max-width: 30ch; color: var(--ofr-ink); text-wrap: balance; }
.ofr-sec-h p { color: var(--ofr-ink-2); max-width: 70ch; font-size: 14.5px; }
.ofr-sous-h { margin-top: 12px; }

/* ── Les offres ── */
/* Autant de colonnes que d'offres suivies (--ofr-n, posé par la vue depuis la grille). */
.ofr-offres { display: grid; grid-template-columns: repeat(var(--ofr-n, 3), minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.ofr-ponctuel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.ofr-offre {
    position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0;
    padding: 22px; border-radius: 18px; border: 1px solid var(--ofr-line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, var(--ofr-sheet)), var(--ofr-sheet) 42%);
    box-shadow: var(--ofr-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ofr-offre:hover { transform: translateY(-3px); box-shadow: var(--ofr-shadow-up); }
.ofr-coeur {
    border: 1.5px solid transparent;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand) 9%, var(--ofr-sheet)), var(--ofr-sheet) 45%) padding-box,
        linear-gradient(135deg, var(--brand), var(--ofr-b)) border-box;
}
/* La formule demandée (vitrine du hub, « Choisir Pilotage » ; lien /tarifs?pour=entreprise&formule=…) : un anneau de la marque, et le
   défilement s'y arrête un peu au-dessus de la carte (le badge « Recommandé » déborde de 12 px). Rien n'est souscrit. */
.ofr-offre.ofr-vise {
    scroll-margin-top: 28px;
    outline: 2px solid var(--brand-strong); outline-offset: 4px;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 16%, transparent), var(--ofr-shadow-up);
}
.ofr-badge {
    position: absolute; top: -12px; right: 18px; padding: 4px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800; color: var(--ofr-on-a);
    background: linear-gradient(100deg, var(--brand), var(--ofr-b)); box-shadow: var(--ofr-shadow);
}
.ofr-offre-h { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; }
.ofr-offre-h h3 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--ofr-ink); }
.ofr-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.ofr-ico .iku-ico { width: 22px; height: 22px; }
.ofr-tagline { font-size: 15px; font-weight: 600; color: var(--ofr-ink); }
.ofr-pour { font-size: 13px; color: var(--ofr-ink-2); padding: 10px 12px; border-radius: 10px; background: var(--ofr-well); }
.ofr-pour b { color: var(--ofr-ink); }
.ofr-livre { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; color: var(--ofr-ink-2); }
.ofr-livre li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.ofr-livre li::before { content: ""; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: radial-gradient(circle, var(--brand) 0 3px, color-mix(in srgb, var(--brand) 18%, transparent) 3.5px); }
.ofr-livre li.plus::before { background: radial-gradient(circle, var(--ofr-credit) 0 3px, color-mix(in srgb, var(--ofr-credit) 18%, transparent) 3.5px); }
.ofr-conso {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 7px 10px; border-radius: 10px;
    font-size: 12.5px; color: var(--ofr-ink-2);
    background: color-mix(in srgb, var(--ofr-credit) 9%, transparent);
    border: 1px dashed color-mix(in srgb, var(--ofr-credit) 38%, transparent);
}
.ofr-conso .iku-ico { color: var(--ofr-credit); flex: none; }
.ofr-conso span { min-width: 0; }
.ofr-conso .ofr-conso-tag { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ofr-credit); }
.ofr-prix { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ofr-line); display: flex; flex-direction: column; gap: 6px; }
.ofr-ponctuel .ofr-prix { margin-top: 0; }
.ofr-montant { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.ofr-montant b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--ofr-ink); }
.ofr-montant span { font-size: 13px; color: var(--ofr-ink-2); }
.ofr-prix small { font-size: 12.5px; color: var(--ofr-ink-3); }
.ofr-gain { padding: 8px 10px; border-radius: 10px; font-size: 12.5px; color: var(--ofr-ok); background: color-mix(in srgb, var(--ofr-ok) 11%, transparent); }
.ofr-gain b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ofr-lien {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; cursor: pointer;
    font-size: 13.5px; font-weight: 700; color: var(--brand-strong);
}
.ofr-missions { list-style: none; padding: 0; display: flex; flex-direction: column; }
.ofr-missions li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 9px 0; border-top: 1px solid var(--ofr-line); font-size: 13.5px; }
.ofr-missions li:first-child { border-top: 0; padding-top: 0; }
.ofr-missions li .ofr-num { font-weight: 700; white-space: nowrap; }
.ofr-missions li small { grid-column: 1 / -1; font-size: 12px; color: var(--ofr-ink-3); }

/* ── Ce que chaque offre rapporte : tableau, en cartes sur petite largeur ── */
.ofr-rapporte { overflow: hidden; border-radius: 18px; border: 1px solid var(--ofr-line); background: var(--ofr-sheet); box-shadow: var(--ofr-shadow); }
.ofr-marges { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ofr-marges thead th {
    padding: 11px 12px; border-bottom: 1px solid var(--ofr-line); text-align: right; white-space: nowrap;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ofr-ink-3);
}
.ofr-marges thead th:first-child { text-align: left; }
.ofr-sous { display: block; font-size: 10px; font-weight: 500; letter-spacing: .03em; text-transform: none; }
.ofr-marges tbody th { padding: 11px 12px; border-bottom: 1px solid var(--ofr-line); text-align: left; font-size: 13.5px; font-weight: 700; color: var(--ofr-ink); }
.ofr-marges td { padding: 11px 12px; border-bottom: 1px solid var(--ofr-line); text-align: right; white-space: nowrap; font-size: 13.5px; color: var(--ofr-ink); }
.ofr-marges td.ofr-m { font-weight: 700; color: var(--ofr-ok); background: color-mix(in srgb, var(--ofr-ok) 7%, transparent); }
.ofr-marges td.ofr-part { color: var(--ofr-ink-3); }
.ofr-marges td.ofr-vide { color: var(--ofr-ink-3); }
.ofr-marges tr.ofr-sep td {
    padding-block: 8px; text-align: left; background: var(--ofr-well);
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ofr-ink-3);
}
.ofr-marges tbody tr:last-child > * { border-bottom: 0; }
.ofr-legende { padding: 12px 16px 14px; border-top: 1px solid var(--ofr-line); font-size: 12.5px; color: var(--ofr-ink-3); }

/* ── Offert ── */
.ofr-offert { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 30px; }
.ofr-offert li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 14px; color: var(--ofr-ink-2); }
.ofr-offert li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: radial-gradient(circle, var(--brand) 0 4px, color-mix(in srgb, var(--brand) 16%, transparent) 4.5px); }

/* ── La mécanique ── */
.ofr-ticket { overflow: hidden; border-radius: 16px; border: 1px solid var(--ofr-line); background: var(--ofr-sheet); box-shadow: var(--ofr-shadow); }
.ofr-tailles { width: 100%; border-collapse: collapse; }
.ofr-tailles th { padding: 11px 16px; border-bottom: 1px solid var(--ofr-line); text-align: left; white-space: nowrap; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ofr-ink-3); }
.ofr-tailles th:last-child { white-space: normal; }
.ofr-tailles td { padding: 13px 16px; border-bottom: 1px solid var(--ofr-line); vertical-align: middle; font-size: 13.5px; color: var(--ofr-ink-2); }
.ofr-tailles tbody tr:last-child td { border-bottom: 0; }
/* La première colonne NOMME ce qu'on débloque (« L'envoi », « Le prévisionnel », lot 7b-1) : elle suit son texte. */
.ofr-tailles td.t { white-space: nowrap; color: var(--ofr-ink); }
.ofr-tailles td.eur { white-space: nowrap; font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ofr-ink); }
.ofr-tailles td.d b { color: var(--ofr-ink); }
.ofr-plafond td { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.ofr-note { max-width: 82ch; font-size: 13px; color: var(--ofr-ink-3); }
.ofr-regles { list-style: none; padding: 0; counter-reset: ofr-r; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 30px; }
.ofr-regles li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; font-size: 13.5px; color: var(--ofr-ink-2); }
.ofr-regles li::before {
    counter-increment: ofr-r; content: counter(ofr-r); padding-top: 1px; font-size: 21px; font-weight: 800; line-height: 1;
    background: linear-gradient(135deg, var(--ofr-grad-a), var(--ofr-grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ofr-regles b { color: var(--ofr-ink); }
/* L'essentiel : « En bref » en trois points, et la ligne « Aussi » sous les offres. */
.ofr-regles.ofr-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ofr-aussi { padding: 12px 16px; border-radius: 12px; font-size: 14px; color: var(--ofr-ink-2); background: var(--ofr-sheet); border: 1px solid var(--ofr-line); }
.ofr-aussi b { color: var(--ofr-ink); }
.ofr-exemple { padding: 12px 16px; border-radius: 12px; font-size: 13.5px; color: var(--ofr-ink); background: color-mix(in srgb, var(--ofr-credit) 11%, transparent); border: 1px solid color-mix(in srgb, var(--ofr-credit) 28%, transparent); }
.ofr-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ofr-panneau { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--ofr-line); background: var(--ofr-sheet); box-shadow: var(--ofr-shadow); }
.ofr-panneau h3 { display: flex; align-items: center; gap: 8px; font-size: 16.5px; font-weight: 800; color: var(--ofr-ink); }
.ofr-panneau h3 .iku-ico { color: var(--brand-strong); }
.ofr-panneau > p { font-size: 13.5px; color: var(--ofr-ink-2); }
/* Un niveau de forfait : son nom et ce qu'il couvre, puis ses paliers (--ofr-p colonnes, posé par la vue). */
.ofr-niveau { margin-top: 4px; color: var(--ofr-ink-2); }
.ofr-paliers { display: grid; grid-template-columns: repeat(var(--ofr-p, 3), minmax(0, 1fr)); gap: 10px; }
.ofr-paliers div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 8px; border-top: 3px solid; border-image: linear-gradient(90deg, var(--brand), var(--ofr-b)) 1; }
.ofr-paliers b { font-size: 19px; font-weight: 800; color: var(--ofr-ink); }
.ofr-paliers span { font-size: 12px; color: var(--ofr-ink-3); }
.ofr-puces { padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ofr-ink-2); }
.ofr-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; padding: 10px 0; border-top: 1px solid var(--ofr-line); }
.ofr-panneau > p + .ofr-option { border-top: 0; padding-top: 0; }
.ofr-option b { color: var(--ofr-ink); }
.ofr-option .ofr-num { font-weight: 700; text-align: right; white-space: nowrap; color: var(--ofr-ink); }
.ofr-option p { grid-column: 1 / -1; font-size: 12.5px; color: var(--ofr-ink-3); }
.ofr-hors { max-width: 88ch; font-size: 13px; color: var(--ofr-ink-2); }

/* ── Le simulateur ── */
.ofr-sim {
    position: relative; gap: 20px; padding: 24px; border-radius: 22px; border: 1px solid var(--ofr-line); box-shadow: var(--ofr-shadow-up);
    background:
        radial-gradient(640px 300px at 0% 0%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 62%),
        radial-gradient(560px 300px at 100% 100%, color-mix(in srgb, var(--brand3) 10%, transparent), transparent 62%),
        var(--ofr-sheet);
}
.ofr-sim-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 22px; }
.ofr-sim-titre { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 340px; }
.ofr-sim-h p { max-width: 62ch; font-size: 14px; color: var(--ofr-ink-2); }
.ofr-presets { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 1 auto; }
.ofr-btn { padding: 8px 13px; border-radius: 10px; border: 1px solid var(--ofr-line-2); background: var(--ofr-well); color: var(--ofr-ink); cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1.2; }
.ofr-btn:hover { border-color: var(--brand); }
.ofr-btn[aria-pressed="true"] { border-color: transparent; color: var(--ofr-on-a); background: linear-gradient(100deg, var(--brand), var(--ofr-b)); }
.ofr-sim-corps { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ofr-saisie { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ofr fieldset { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ofr legend { float: none; width: auto; margin: 0 0 8px; padding: 0; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--ofr-ink); }
/* Une ligne par offre ou par mission, sur la même grille : ce que c'est, combien (compteur), vos honoraires (la saisie et son
   unité dans la même case), ce que coûte Streamiku. Sur petite largeur, le nom passe au-dessus et les réglages restent en ligne. */
.ofr-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 108px 146px 118px; gap: 8px 14px; align-items: center; margin-inline: -8px; padding: 11px 8px; border-top: 1px solid var(--ofr-line); border-radius: 10px; }
.ofr-ligne-tete { padding-block: 0 6px; border-top: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ofr-ink-3); }
.ofr-ligne-tete .d, .ofr-cout { text-align: right; }
.ofr-quoi { min-width: 0; }
.ofr-nom { display: block; font-size: 13.5px; font-weight: 700; color: var(--ofr-ink); }
.ofr-det { display: block; font-size: 12px; color: var(--ofr-ink-3); }
.ofr-cout b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--ofr-ink); }
.ofr-cout small { display: block; font-size: 11.5px; line-height: 1.35; color: var(--ofr-ink-3); }
.ofr-ligne.ofr-flash-a { animation: ofr-eclat-a 1.4s ease; }
.ofr-ligne.ofr-flash-b { animation: ofr-eclat-b 1.4s ease; }
@keyframes ofr-eclat-a { 0%, 40% { background: color-mix(in srgb, var(--brand) 16%, transparent); } 100% { background: transparent; } }
@keyframes ofr-eclat-b { 0%, 40% { background: color-mix(in srgb, var(--brand) 16%, transparent); } 100% { background: transparent; } }
/* Le compteur (moins, le nombre, plus) et le montant (la saisie et son unité) : deux cases de même hauteur. */
.ofr-pas, .ofr-somme { display: inline-flex; align-items: center; height: 38px; min-width: 0; border: 1px solid var(--ofr-line-2); border-radius: 10px; background: var(--color-bg-input); }
.ofr-pas button { width: 32px; height: 100%; flex: none; border: 0; background: transparent; cursor: pointer; font-size: 17px; font-weight: 600; line-height: 1; color: var(--ofr-ink-2); }
.ofr-pas button:first-child { border-radius: 9px 0 0 9px; }
.ofr-pas button:last-child { border-radius: 0 9px 9px 0; }
.ofr-pas button:hover { color: var(--brand-strong); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.ofr-pas input, .ofr-somme input {
    min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent;
    font-family: var(--font-family); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ofr-ink);
    -moz-appearance: textfield; appearance: textfield;
}
.ofr-pas input { width: 40px; text-align: center; }
.ofr-somme { gap: 6px; padding-right: 10px; }
.ofr-somme input { width: 100%; padding-left: 10px; text-align: right; }
.ofr-somme span { flex: none; font-size: 12px; white-space: nowrap; color: var(--ofr-ink-3); }
.ofr-pas input::-webkit-inner-spin-button, .ofr-pas input::-webkit-outer-spin-button,
.ofr-somme input::-webkit-inner-spin-button, .ofr-somme input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ofr .ofr-pas input:focus-visible, .ofr .ofr-somme input:focus-visible { outline: none; }
.ofr-pas:focus-within, .ofr-somme:focus-within { border-color: var(--brand-strong); box-shadow: 0 0 0 1px var(--brand-strong); }
.ofr-aide { font-size: 12.5px; color: var(--ofr-ink-3); }
.ofr-champs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; margin-top: 10px; }
.ofr-champs label { display: flex; flex-direction: column; justify-content: space-between; gap: 5px; min-width: 0; font-size: 12.5px; color: var(--ofr-ink-2); }
.ofr-champs input[type="number"] {
    width: 100%; max-width: 120px; padding: 7px 8px; border-radius: 9px; border: 1px solid var(--ofr-line-2);
    font-family: var(--font-family); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--ofr-ink); background: var(--color-bg-input);
}
/* La marque : trois choix en pastilles (boutons radio, la pastille cochée en dégradé de marque). */
.ofr-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.ofr-choix label { position: relative; }
.ofr-choix input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ofr-choix span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ofr-line-2); background: var(--ofr-well); font-size: 13px; font-weight: 600; color: var(--ofr-ink-2); }
.ofr-choix input:checked + span { border-color: transparent; color: var(--ofr-on-a); background: linear-gradient(100deg, var(--brand), var(--ofr-b)); }
.ofr-choix input:focus-visible + span { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
/* Réglages avancés : repliés. */
.ofr-params { padding-top: 12px; border-top: 1px solid var(--ofr-line); }
.ofr-params summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ofr-ink-2); }
.ofr-params summary:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
.ofr-params > .ofr-aide { margin-top: 8px; }
/* Colle 12 px sous la bande d'ancres : son top se compte depuis la boîte de contenu du corps, la bande depuis son bord. */
.ofr-facture {
    position: sticky; top: calc(var(--ofr-bande-h) + 12px - var(--pr-corps-haut, 0px));
    display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px; border-radius: 16px;
    border: 1px solid var(--ofr-line); background: color-mix(in srgb, var(--ofr-fond) 72%, transparent);
}
.ofr-facture > .ofr-eyebrow { font-size: 11.5px; }
.ofr-duo-total { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ofr-total { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ofr-total span { font-size: 12px; color: var(--ofr-ink-3); }
.ofr-total b { font-size: clamp(21px, 2.6cqi, 27px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ofr-ink); overflow-wrap: anywhere; }
.ofr-total-marge b { color: var(--ofr-ok); }
.ofr-part { display: flex; flex-direction: column; gap: 6px; }
.ofr-part-barre { display: flex; height: 12px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ofr-ok) 22%, transparent); }
.ofr-part-barre i { display: block; height: 100%; min-width: 3px; background: linear-gradient(90deg, var(--brand), var(--ofr-b)); }
.ofr-part p { font-size: 12.5px; color: var(--ofr-ink-2); }
.ofr-lignes { list-style: none; padding: 0; display: flex; flex-direction: column; }
.ofr-lignes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--ofr-line); font-size: 13.5px; color: var(--ofr-ink); }
.ofr-lignes li .ofr-num { font-weight: 700; text-align: right; white-space: nowrap; }
.ofr-lignes li small { grid-column: 1 / -1; font-size: 12px; color: var(--ofr-ink-3); }
.ofr-lignes li.ofr-vide-msg span { font-size: 13px; color: var(--ofr-ink-3); }
.ofr-barres { display: flex; flex-direction: column; gap: 8px; }
.ofr-barres h3 { margin-bottom: 2px; font-size: 13.5px; font-weight: 700; color: var(--ofr-ink); }
.ofr-barre { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12.5px; color: var(--ofr-ink-2); }
.ofr-rail { position: relative; height: 22px; }
.ofr-fill { position: absolute; inset: 0 auto 0 0; min-width: 2px; border-radius: 0 5px 5px 0; background: var(--ofr-line-2); }
.ofr-barre-mieux .ofr-fill { background: linear-gradient(90deg, var(--brand), var(--ofr-b)); }
.ofr-val { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--ofr-ink); }
.ofr-val-dedans { color: var(--ofr-on-a); }

/* ── Portefeuilles types et engagements ── */
.ofr-cas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ofr-cas article { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius: 18px; border: 1px solid var(--ofr-line); background: var(--ofr-sheet); box-shadow: var(--ofr-shadow); }
.ofr-cas h3 { font-size: 17px; font-weight: 800; color: var(--ofr-ink); }
.ofr-chiffres { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ofr-chiffres > span:not(.ofr-chiffre) { font-size: 12.5px; color: var(--ofr-ink-3); }
.ofr-chiffre { font-size: 26px; font-weight: 800; letter-spacing: -.015em; color: var(--ofr-ink); }
.ofr-chiffre.ofr-ok { color: var(--ofr-ok); }
.ofr-cas p { font-size: 14px; color: var(--ofr-ink-2); }
.ofr-cas .ofr-lien { margin-top: auto; }
.ofr-faq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ofr-faq > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px; border-radius: 14px; border: 1px solid var(--ofr-line); background: var(--ofr-sheet); }
.ofr-faq h3 { font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--ofr-ink); }
.ofr-faq p { font-size: 13.5px; color: var(--ofr-ink-2); }
.ofr-pied { padding-top: 14px; border-top: 1px solid var(--ofr-line); font-size: 12.5px; color: var(--ofr-ink-3); }

/* ── Largeurs du conteneur (la page des offres fait 1 100 px au plus ; la modale du hub suit la fenêtre) ── */
@container ofr (max-width: 940px) {
    .ofr-sim-corps { grid-template-columns: minmax(0, 1fr); }
    .ofr-facture { position: static; }
}
@container ofr (max-width: 880px) {
    .ofr-offres { grid-template-columns: minmax(0, 1fr); }
    .ofr-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container ofr (max-width: 760px) {
    .ofr-ponctuel, .ofr-duo { grid-template-columns: minmax(0, 1fr); }
    /* Le tableau des marges passe en cartes : une offre par carte, chaque montant sous son libellé (data-label). */
    .ofr-marges thead { display: none; }
    .ofr-marges, .ofr-marges tbody { display: block; }
    .ofr-marges tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 12px 14px; border-bottom: 1px solid var(--ofr-line); }
    .ofr-marges tbody tr:last-child { border-bottom: 0; }
    .ofr-marges tbody th { grid-column: 1 / -1; padding: 0 0 2px; border: 0; font-size: 14px; }
    .ofr-marges td { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 6px 9px; border: 0; border-radius: 9px; text-align: left; white-space: normal; }
    .ofr-marges td::before { content: attr(data-label); font-size: 11px; font-weight: 600; color: var(--ofr-ink-3); }
    .ofr-marges td.ofr-vide { display: none; }
    .ofr-marges td.ofr-part { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 8px; padding-block: 2px; }
    .ofr-marges tr.ofr-sep { display: block; padding: 8px 14px; background: var(--ofr-well); }
    .ofr-marges tr.ofr-sep td { display: block; padding: 0; background: none; }
    .ofr-marges tr.ofr-sep td::before { content: none; }
}
@container ofr (max-width: 900px) {
    .ofr-regles.ofr-trois { grid-template-columns: minmax(0, 1fr); }
}
@container ofr (max-width: 680px) {
    .ofr-offert, .ofr-regles, .ofr-cas { grid-template-columns: minmax(0, 1fr); }
    /* Simulateur : le nom de l'offre passe au-dessus ; compteur, honoraires et coût restent sur une ligne. */
    .ofr-ligne { grid-template-columns: auto auto minmax(0, 1fr); }
    .ofr-ligne .ofr-quoi { grid-column: 1 / -1; }
    .ofr-ligne-tete { display: none; }
    .ofr-somme input { width: 64px; }
    .ofr-stats { grid-template-columns: minmax(0, 1fr); }
    .ofr-stat { flex-direction: row; align-items: baseline; gap: 12px; }
    .ofr-stat b { flex: none; font-size: 24px; }
}
@container ofr (max-width: 560px) {
    .ofr { gap: 36px; }
    .ofr-hero { padding: 22px 18px 20px; border-radius: 18px; }
    .ofr-lead { font-size: 15px; }
    .ofr-cta { flex: 1 1 auto; justify-content: center; }
    /* Les ancres défilent sous la bascule, coupées net au bord (un fondu les rendait illisibles sous 4,5:1, mesuré) ; la
       bascule prend ses libellés courts. */
    .ofr-ancres { margin: -20px 0; }
    /* Petit écran : air réduit, symétrique à l'œil (premier texte et bascule à 11 px des bords : 0 + bordure + 10 du bouton à
       gauche, 10 + bordure à droite) ; la ligne tient (les ancres défilent sous la bascule). */
    .ofr-ancres-in { gap: 6px; padding: 5px 10px 5px 0; }
    .ofr-liens button { padding: 6px 10px; }
    .ofr-vue button { padding: 6px 10px; }
    .ofr-long { display: none; }
    .ofr-court { display: inline; }
    .ofr-offre { padding: 18px; }
    .ofr-faq { grid-template-columns: minmax(0, 1fr); }
    .ofr-paliers b { font-size: 17px; }
    .ofr-sim { padding: 18px 14px; border-radius: 18px; }
    .ofr-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Tailles : le nom et le prix sur une ligne, ce qu'elle actualise dessous. */
    .ofr-tailles thead { display: none; }
    .ofr-tailles, .ofr-tailles tbody { display: block; }
    .ofr-tailles tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--ofr-line); }
    .ofr-tailles tbody tr:last-child { border-bottom: 0; }
    .ofr-tailles td { padding: 0; border: 0; }
    .ofr-tailles td.t { white-space: normal; }
    .ofr-tailles td.d { grid-column: 1 / -1; }
    .ofr-tailles tr.ofr-plafond { background: color-mix(in srgb, var(--brand) 8%, transparent); }
    .ofr-tailles tr.ofr-plafond td { background: none; }
    .ofr-pas button { width: 30px; }
    .ofr-pas input { width: 34px; }
    .ofr-barre { grid-template-columns: 92px minmax(0, 1fr); }
}
@container ofr (max-width: 380px) {
    .ofr-duo-total { grid-template-columns: minmax(0, 1fr); }
    .ofr-paliers { grid-template-columns: minmax(0, 1fr); }
    .ofr-ligne { grid-template-columns: auto minmax(0, 1fr); }
    .ofr-ligne .ofr-cout { grid-column: 1 / -1; text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   LOT 7b-1 (2026-09-30) : page v24. Troisième appel du bandeau des conseils (« À votre marque ? ») ; vue des DIRIGEANTS
   (Shared/TarifsDirigeant.razor, .ofr.ofr-dir) : gestes d'une formule, abonnement en cours, tarif d'accompagnement, factures.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.ofr-cta-3 { border: 1px dashed color-mix(in srgb, var(--brand) 55%, var(--ofr-line-2)); color: var(--brand-strong); background: transparent; }
.ofr-cta-3:hover { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.ofr-cta:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
/* Les gestes d'une formule, sous son prix : s'abonner au mois, à l'année ; abonné, y passer ; la formule en cours marquée. */
.ofr-souscrire { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ofr-aussi .ofr-souscrire { display: inline-flex; margin: 4px 6px; vertical-align: middle; }
.ofr-cta-s { padding: 8px 13px; font-size: 13px; border-radius: 10px; }
.ofr-actuelle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ofr-ok); background: color-mix(in srgb, var(--ofr-ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ofr-ok) 34%, transparent); }
/* Lot « changements de formule » : la formule du compte suit une AUTRE société : aucun geste ici, une pastille neutre le dit. */
.ofr-actuelle.ofr-autre { color: var(--ofr-ink-2); background: color-mix(in srgb, var(--ofr-ink-2) 8%, transparent); border-color: var(--ofr-line); }
.ofr-ajuste { font-size: 12px; color: var(--ofr-ink-3); }
.ofr-aussi a { font-weight: 700; color: var(--brand-strong); }
/* L'abonnement en cours, au-dessus des offres. */
.ofr-abo { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--ofr-ok) 36%, var(--ofr-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--ofr-ok) 7%, var(--ofr-sheet)), var(--ofr-sheet)); box-shadow: var(--ofr-shadow); }
.ofr-abo-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; color: var(--ofr-ink); }
.ofr-abo-t .iku-ico { color: var(--ofr-ok); }
.ofr-abo-t span { font-size: 13px; color: var(--ofr-ink-2); }
.ofr-abo-p { font-size: 13px; color: var(--ofr-ink-2); }
/* Lot 3d : « parlez-en à un conseil » sous une formule d'une autre société, comme le lien de la ligne « Aussi ». */
.ofr-abo-p a { font-weight: 700; color: var(--brand-strong); }
.ofr-abo-alerte { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; font-size: 13px; color: var(--ofr-ink); background: color-mix(in srgb, var(--ofr-credit) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ofr-credit) 34%, transparent); }
.ofr-abo-alerte .iku-ico { flex: none; margin-top: 2px; color: var(--ofr-credit); }
.ofr-abo-a { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ofr-abo-a .ofr-lien:disabled { opacity: .5; cursor: not-allowed; }
/* Le tarif d'accompagnement : une carte pleine largeur sous les offres, quand les comptes y donnent droit. */
.ofr-acc { border-style: dashed; }
/* Les factures de l'abonnement. */
.ofr-factures { list-style: none; padding: 0; display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--ofr-line); background: var(--ofr-sheet); }
.ofr-factures li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: baseline; padding: 10px 14px; border-top: 1px solid var(--ofr-line); font-size: 13.5px; color: var(--ofr-ink-2); }
.ofr-factures li:first-child { border-top: 0; }
.ofr-factures .ofr-num { font-weight: 700; white-space: nowrap; color: var(--ofr-ink); }
.ofr-factures a { font-weight: 700; color: var(--brand-strong); }
.ofr-fac-o { min-width: 0; overflow-wrap: anywhere; }
@container ofr (max-width: 560px) {
    .ofr-souscrire .ofr-cta { flex: 1 1 auto; justify-content: center; }
    .ofr-factures li { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ofr-offre, .ofr-offre:hover, .ofr-cta, .ofr-cta:hover, .ofr-fl { transform: none; transition: none; }
    .ofr-ligne.ofr-flash-a, .ofr-ligne.ofr-flash-b { animation: none; }
}

/* ── La frise des leviers (Shared/OffreFrise.razor ; page d'offre, version 28) ──
   Le réalisé (constaté, plus aucun levier) contre les mois qui viennent (les leviers du dirigeant) : trajectoire de trésorerie
   « si rien ne change » sous le seuil d'alerte, « avec ses décisions » au-dessus. Le dessin s'étire en largeur ; repères et
   libellés en HTML, en pourcentage du dessin. La frontière « aujourd'hui » est à 40 % (légende, axe et colonnes s'y alignent). */
.ofr-frise-tete { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 36px; align-items: end; }
.ofr-frise-tete-g { display: flex; flex-direction: column; gap: 8px; }
.ofr-frise-tete h2 { font-size: clamp(21px, 3cqi, 28px); line-height: 1.18; letter-spacing: -.015em; font-weight: 800; color: var(--ofr-ink); text-wrap: balance; }
.ofr-frise-tete p { color: var(--ofr-ink-2); font-size: 14.5px; max-width: 72ch; }
.ofr-frise-carte { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 18px; border-radius: 18px; border: 1px solid var(--ofr-line); background: var(--ofr-sheet); box-shadow: var(--ofr-shadow); }
.ofr-frise-legende { display: grid; grid-template-columns: 40% 60%; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ofr-frise-legende .reel { color: var(--ofr-ink-3); }
.ofr-frise-legende .avenir { color: var(--brand-strong); padding-left: 14px; }
.ofr-frise-court { display: none; }
.ofr-frise-plan { position: relative; }
.ofr-frise-svg { display: block; width: 100%; height: clamp(140px, 19cqi, 220px); }
.ofr-frise-svg .sol { stroke: color-mix(in srgb, var(--ofr-ink-3) 45%, transparent); stroke-width: 1.5; }
.ofr-frise-svg .graduation { fill: none; stroke: color-mix(in srgb, var(--ofr-ink-3) 40%, transparent); stroke-width: 1.5; }
.ofr-frise-svg .passe-aire { fill: color-mix(in srgb, var(--ofr-ink-3) 13%, transparent); }
.ofr-frise-svg .passe-ligne { fill: none; stroke: color-mix(in srgb, var(--ofr-ink-3) 85%, transparent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ofr-frise-svg .seuil { stroke: color-mix(in srgb, var(--ofr-credit) 75%, transparent); stroke-width: 1.5; stroke-dasharray: 3 5; }
.ofr-frise-svg .ecart { fill: color-mix(in srgb, var(--brand) 12%, transparent); }
.ofr-frise-svg .rien { fill: none; stroke: color-mix(in srgb, var(--ofr-ink-3) 80%, transparent); stroke-width: 2.5; stroke-dasharray: 8 7; stroke-linecap: round; }
.ofr-frise-svg .decisions { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.ofr-frise-svg .aujourdhui { stroke: var(--brand); stroke-width: 2; stroke-dasharray: 4 5; }
.ofr-frise-stop-a { stop-color: var(--brand); }
.ofr-frise-stop-b { stop-color: var(--ofr-b); }
.ofr-frise-repere {
    position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: 12px; font-weight: 700; line-height: 1; color: var(--ofr-on-a); background: linear-gradient(135deg, var(--brand), var(--ofr-b));
    box-shadow: 0 0 0 3px var(--ofr-sheet);
}
.ofr-frise-etiq { position: absolute; right: 0; transform: translateY(-50%); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--ofr-sheet) 85%, transparent); }
.ofr-frise-etiq.decisions { top: 14%; color: var(--brand-strong); }
.ofr-frise-etiq.rien { top: 79%; color: var(--ofr-ink-3); }
.ofr-frise-etiq.seuil { right: auto; left: 41%; top: 66%; font-size: 11.5px; font-weight: 600; color: var(--ofr-credit); }
.ofr-frise-axe { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 26px; font-size: 13px; color: var(--ofr-ink-3); }
.ofr-frise-axe .ici { position: absolute; left: 40%; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--ofr-on-a); background: linear-gradient(100deg, var(--brand), var(--ofr-b)); }
.ofr-frise-cols { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); margin-top: 4px; }
.ofr-frise-cols::before { content: ""; position: absolute; left: 40%; top: 0; bottom: 0; border-left: 2px dashed color-mix(in srgb, var(--brand) 70%, transparent); }
.ofr-frise-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 24px 6px 0; }
.ofr-frise-col.avenir { padding: 14px 0 6px 24px; }
.ofr-frise-col-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ofr-frise-col-h h3 { font-size: 18px; font-weight: 800; color: var(--ofr-ink); }
.ofr-frise-col.passe h3 { color: var(--ofr-ink-2); }
.ofr-frise-tag { padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ofr-frise-tag.constate { color: var(--ofr-ink-3); background: color-mix(in srgb, var(--ofr-ink-3) 14%, transparent); }
.ofr-frise-tag.leviers { color: var(--ofr-on-a); background: linear-gradient(100deg, var(--brand), var(--ofr-b)); }
.ofr-frise-col.passe p { font-size: 14px; color: var(--ofr-ink-2); }
.ofr-frise-leviers { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.ofr-frise-leviers li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; color: var(--ofr-ink-2); }
.ofr-frise-leviers li .num { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; color: var(--ofr-on-a); background: linear-gradient(135deg, var(--brand), var(--ofr-b)); }
.ofr-frise-leviers li b { display: block; font-size: 14.5px; color: var(--ofr-ink); }
.ofr-frise-note { font-size: 13px; color: var(--ofr-ink-3); }
.ofr-frise-pied { margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--ofr-line); font-size: 14.5px; color: var(--ofr-ink-2); }
.ofr-frise-pied b { color: var(--ofr-ink); }
@container ofr (min-width: 860px) {
    .ofr-frise-tete { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
@container ofr (max-width: 720px) {
    .ofr-frise-leviers { grid-template-columns: minmax(0, 1fr); }
}
@container ofr (max-width: 560px) {
    .ofr-frise-carte { padding: 18px 16px 16px; border-radius: 16px; }
    .ofr-frise-long { display: none; }
    .ofr-frise-court { display: inline; }
    .ofr-frise-etiq { font-size: 11.5px; }
    .ofr-frise-etiq.rien { top: 60%; }
    .ofr-frise-etiq.seuil { top: 81%; }
    .ofr-frise-repere { width: 18px; height: 18px; font-size: 10.5px; box-shadow: 0 0 0 2px var(--ofr-sheet); }
    /* Colonnes empilées : la frontière « aujourd'hui » devient une ligne pointillée entre elles. */
    .ofr-frise-cols { grid-template-columns: minmax(0, 1fr); }
    .ofr-frise-cols::before { display: none; }
    .ofr-frise-col, .ofr-frise-col.avenir { padding: 12px 0 4px; }
    .ofr-frise-col.avenir { margin-top: 10px; padding-top: 16px; border-top: 2px dashed color-mix(in srgb, var(--brand) 70%, transparent); }
}
/* Simulateur de COÛT (05/10/2026) : sans session de cabinet, ni colonne ni champ d'honoraires (TarifsConseil, ofr-saisie-cout :
   offre, clients, coût Streamiku) ; un seul total, Streamiku (ofr-un-total). */
.ofr-saisie-cout .ofr-ligne { grid-template-columns: minmax(0, 1fr) 108px 118px; }
.ofr-un-total { grid-template-columns: minmax(0, 1fr); }
@container ofr (max-width: 680px) {
    .ofr-saisie-cout .ofr-ligne { grid-template-columns: auto minmax(0, 1fr); }
}