/* ============================================================================
   CALQUE PAGE PLATEFORMES — report des décisions de l'accueil sur les
   composants propres à cette page. Elle n'utilise aucune des classes de
   l'accueil : ses cartes s'appellent bundle-card / tier-card / feat, ses
   sections cat-block, son bouton book-cta. Le calque global ne les voyait pas.
   ============================================================================ */

/* --- 1. Casse normale. --mono est déjà redéfini par le calque global, mais
       les majuscules forcées et l'interlettrage restaient sur ces deux-là. --- */
section.cat-block .n{ font-size:.95rem; font-weight:600; }

/* --- 2. Le bouton de réservation. Il était en dégradé teinté par la couleur
       de la catégorie, donc de neuf couleurs différentes selon l'endroit.
       L'accueil a tranché : le bouton d'action est toujours magenta. Une seule
       couleur pour une seule action, quel que soit le contexte. --- */

/* --- 3. Les grandes cartes = équivalent de .pkg-card. Même rayon, mêmes trois
       couches d'ombre, même soulèvement. Les ombres de v26 n'existaient que
       sous #p-multiomics et #p-combo : deux catégories sur onze en avaient,
       les neuf autres étaient plates. On généralise. --- */
.bundle-card, .tier-card{
  border:1px solid transparent;
  border-radius:1.4rem !important;
  background:var(--deep,#fff);
  box-shadow:0 1px 2px rgba(18,19,42,.04), 0 26px 50px -26px rgba(18,19,42,.14),
             0 30px 60px -30px rgba(192,0,96,.10);
  transition:transform .25s cubic-bezier(.22,.7,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.bundle-card{ padding:1.9rem 1.8rem; position:relative; overflow:visible; }
.bundle-card:hover, .tier-card:hover{
  transform:translateY(-4px);
  border-color:rgba(228,86,154,.3);
  box-shadow:0 1px 2px rgba(18,19,42,.05), 0 34px 58px -26px rgba(18,19,42,.18),
             0 38px 72px -28px rgba(192,0,96,.20);
}
/* La barre latérale des paliers porte la couleur du palier : on la garde,
   c'est une information, pas une décoration. */
.tier-card{ border-left:3px solid var(--accent) !important; padding:1.6rem 1.7rem; }

/* Anneau au survol, identique à celui des cartes packages : linéaire et fixe.
   Remplace le filet supérieur de 3px que seules deux catégories avaient. */
.bundle-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:linear-gradient(135deg, var(--s1,#38d6ff) 0%, #8b7bff 45%, var(--brand-magenta,#C00060) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .28s ease; pointer-events:none;
}
.bundle-card:hover::after{ opacity:1; }
#p-multiomics .bundle-card::before, #p-combo .bundle-card::before{ display:none !important; }

/* --- 4. Les petits encarts. Rayon proportionné : 1,4 rem sur une boîte de
       1,1 rem de marge intérieure serait disproportionné. 1 rem tient la
       même famille de formes sans faire ballon. --- */
.feat{
  border:1px solid transparent;
  border-left:2px solid var(--accent);
  border-radius:1rem !important;
  padding:1.2rem 1.35rem;
  box-shadow:0 1px 2px rgba(18,19,42,.03), 0 14px 28px -18px rgba(18,19,42,.10);
  transition:transform .2s cubic-bezier(.22,.7,.2,1), box-shadow .2s ease, border-color .2s ease;
}
a.feat--cta:hover{
  transform:translateY(-3px);
  border-color:rgba(228,86,154,.3);
  border-left-color:var(--accent);
  box-shadow:0 1px 2px rgba(18,19,42,.04), 0 20px 36px -18px rgba(18,19,42,.16);
}

/* --- 5. Respiration. L'accueil est passé de 5 à 7 rem, mais il a sept
       sections ; cette page en a onze. À 7 rem le catalogue s'étirerait sur
       2 500 px de vide. 5 rem donne 160 px entre catégories, ce qui suffit
       d'autant que chaque bloc porte déjà sa propre teinte de fond dégradée.
       Le filet de séparation saute : avec une bande teintée, il fait doublon. */
section.cat-block{ padding:5rem 0 !important; border-top:none !important; }
@media (max-width:700px){ section.cat-block{ padding:3.25rem 0 !important; } }

/* --- 6. Échelle typographique. Onze titres de catégorie : les monter au
       2,6 rem de l'accueil transformerait une liste en suite d'affiches.
       2 rem les sort de la masse sans casser la lecture en catalogue. --- */
section.cat-block h2{ font-size:clamp(1.6rem,2.4vw,2rem) !important; line-height:1.15; letter-spacing:-.015em; }
section.cat-block p.sub{ font-size:1.02rem !important; line-height:1.65; max-width:64ch; }
.bundle-card h3, .tier-card h3{ font-size:1.15rem !important; }
.bundle-card p{ font-size:.95rem !important; line-height:1.6; }
.tier-card p{ font-size:.9rem !important; line-height:1.55; }
.feat h3{ font-size:.95rem !important; }
.feat p{ font-size:.88rem !important; line-height:1.55; }
.partner-note{ font-size:.85rem !important; }

/* --- 7. Les grilles respirent en proportion des cartes agrandies. --- */
.bundle-grid{ gap:1.6rem !important; margin-top:2.4rem !important; }
.tier-select{ gap:1.25rem !important; }
.feat-grid{ gap:1.15rem !important; }

/* --- 8. Icônes : les illustrations de l'accueil, à plat.
       Le disque sombre de 52 px saute. Trois raisons : les illustrations sont
       des aplats prévus pour du fond clair et plusieurs contiennent du bleu
       nuit #12132a qui disparaîtrait dessus ; à 22 px elles seraient illisibles ;
       et un cercle avec des formes dedans se lit comme un visage ou un virus,
       piège déjà rencontré trois fois sur ce projet (README v4).
       --c reprend l'accent de la catégorie, comme les tuiles secteur de
       l'accueil reprennent celui de leur icône. --- */
.cat-icon{
  width:56px !important; height:56px !important; flex:none;
  display:block !important; place-items:initial !important;
  background:none !important; border:none !important;
  border-radius:0 !important; box-shadow:none !important;
  --c:color-mix(in srgb, var(--accent) var(--o4-icon-mix,100%), var(--o4-ink,#12132a));
}
.cat-icon svg{
  width:100% !important; height:100% !important;
  stroke:none !important; fill:none; stroke-width:0 !important;
  overflow:visible; --knock:#fff;
}
.bundle-card__icon{
  width:52px; height:52px; display:block; margin:0 0 1rem;
  background:none !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important;
  --c:color-mix(in srgb, var(--accent2,var(--accent)) var(--o4-icon-mix,100%), var(--o4-ink,#12132a));
}
.bundle-card__icon svg{
  width:100% !important; height:100% !important;
  stroke:none !important; fill:none; stroke-width:0 !important;
  overflow:visible; --knock:#fff;
}
@media (max-width:700px){
  .cat-icon{ width:44px !important; height:44px !important; }
  .bundle-card__icon{ width:44px; height:44px; }
}

/* --- 9. Les deux dernières étiquettes en monospace majuscule. --- */
.bundle-card__tag, .tier-card__label{
  font-family:var(--body,"Archivo",system-ui,sans-serif) !important;
  text-transform:none !important; letter-spacing:0 !important;
  font-size:.9rem !important; font-weight:600;
}

/* ============================================================================
   RETOURS DU 1er AOÛT — corrections après relecture à l'écran
   ============================================================================ */

/* --- 10. Le bouton de réservation reprend la couleur de sa plateforme.
       Je l'avais unifié en magenta par cohérence avec l'accueil ; l'identité
       de chaque plateforme prime. En dégradé, comme demandé.
       Le dosage n'est pas un plein aplat de l'accent : sur --s1 (#38d6ff) ou
       --gold, du blanc sur la couleur pure tombe sous 3:1. La base reste
       sombre, teintée par l'accent — le procédé de v26, remonté de 30 % à 45 %
       pour que la couleur se lise vraiment. --- */

/* --- 11. Plus de contour rose au survol. La carte garde sa propre couleur ;
       le soulèvement et l'ombre suffisent à dire qu'elle réagit. La barre
       latérale de palier reste, elle porte une information. --- */
.tier-card:hover, .bundle-card:hover, a.feat--cta:hover{
  border-color:transparent !important;
}
.tier-card, .tier-card:hover{ border-left-color:var(--accent) !important; }
.feat, .feat:hover{ border-left-color:var(--accent) !important; }

/* --- 12. Une seule carte sur 33 réagissait au survol — Genotyping, la seule
       qui soit un lien. Ça se lisait comme un bug. On ne peut pas inventer 32
       liens, donc on uniformise l'inverse : les 33 réagissent de la même
       manière discrète. Le lien de Genotyping continue de fonctionner. --- */
.feat:hover{
  transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(18,19,42,.04), 0 20px 36px -18px rgba(18,19,42,.16);
}

/* --- 13. Combo Platforms : anneau or plutôt que cyan-magenta. C'est la seule
       catégorie en --gold-deep, l'anneau générique jurait avec. --- */
#p-combo .bundle-card::after{
  background:linear-gradient(135deg,
      var(--gold,#F9EEC1) 0%, #C79A2E 45%, var(--gold-deep,#9A6B00) 100%) !important;
}
#p-combo .bundle-card:hover{
  box-shadow:0 1px 2px rgba(18,19,42,.05), 0 34px 58px -26px rgba(18,19,42,.18),
             0 38px 72px -28px rgba(154,107,0,.28) !important;
}

/* ============================================================================
   RETOURS 2 — après relecture des captures
   ============================================================================ */

/* --- 14. L'anneau était décalé d'un pixel vers l'intérieur. Cause : la carte
       porte un border de 1px, et un pseudo-élément en inset:0 se cale sur la
       boîte de padding, donc un pixel en retrait du bord visible. On l'étend
       d'un pixel et on rattrape le rayon d'autant. --- */
/* (remplacé par le point 18 : le rayon doit valoir 1.4rem, pas 1.4rem+1px) */

/* --- 15. « Draws on: » était en cyan #38d6ff sur blanc, soit 1,7:1 — le même
       échec de contraste que celui déjà corrigé sur l'accueil, revenu ici par
       une autre classe. On garde l'identité de couleur en la fonçant vers
       l'encre jusqu'à repasser au-dessus de 4,5:1. --- */
.bundle-card__tag{
  color:var(--mute) !important;
  color:color-mix(in srgb, var(--accent2, var(--accent)) 38%, var(--bone)) !important;
}

/* --- 16. CTA inversés : contour au repos, plein au survol.
       v26 le faisait déjà pour les cartes de #p-multiomics et #p-combo — on
       généralise au lieu de garder deux comportements sur la même page. --- */
.bundle-card__cta{
  border-radius:999px !important; padding:.7rem 1.35rem;
  border:1.5px solid color-mix(in srgb, var(--accent) 42%, transparent) !important;
  color:color-mix(in srgb, var(--accent) 48%, var(--bone)) !important;
  background:none !important;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.bundle-card__cta:hover{
  border-color:transparent !important; color:#fff !important;
  background:linear-gradient(100deg,
      color-mix(in srgb, var(--accent) 52%, var(--bone) 48%),
      color-mix(in srgb, var(--accent) 28%, var(--bone) 72%)) !important;
}

/* --- 17. Le bouton du chercheur de plateforme suivait encore sa propre règle :
       coin à .5rem alors que tout le reste est en pilule. Même logique
       contour/plein, en magenta puisque cette section n'a pas d'accent. --- */
#ai-finder-btn{
  border-radius:999px !important; padding:.85rem 1.7rem;
  font-family:var(--body,"Archivo",system-ui,sans-serif) !important;
  font-size:1rem !important; font-weight:500;
  text-transform:none !important; letter-spacing:0 !important;
  background:none !important; cursor:pointer;
  border:1.5px solid color-mix(in srgb, var(--brand-magenta,#C00060) 45%, transparent) !important;
  color:var(--brand-magenta-deep,#800040) !important;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
#ai-finder-btn:hover{
  border-color:transparent !important; color:#fff !important;
  background:linear-gradient(100deg, var(--brand-magenta,#C00060), var(--brand-magenta-deep,#800040)) !important;
}
.ai-finder__box input{ border-radius:999px !important; padding:.85rem 1.3rem !important; }

/* --- 18. L'anneau, pour de bon.
       overflow:hidden venait de v4, où il coupait le filet supérieur de 3 px
       qu'on a désactivé. Il découpait au ras de la boîte de padding et ravalait
       le pixel gagné par inset:-1px : le correctif précédent était annulé.
       Et le rayon : border-radius décrit la boîte de BORDURE, donc l'anneau
       doit être à 1.4rem tout rond, pas 1.4rem + 1px — sinon il est plus arrondi
       que la carte et se décale dans les angles.
       Épaisseur portée de 2 à 3 px. --- */
.bundle-card{ overflow:visible !important; }
.bundle-card::after{
  inset:-1px !important;
  border-radius:1.4rem !important;
  padding:3px !important;
}

/* --- 19. Étiquettes de catégorie en bleu nuit dégradé vers la couleur de
       la catégorie. Le premier essai allait de #12132a à #23253f : deux valeurs
       trop proches pour se voir, donc un aplat déguisé. Ici le dégradé part du
       bleu nuit et arrive teinté par --accent — visible, et il porte l'identité
       de la section. L'étiquette reste sombre, donc jamais prise pour un bouton.
       Depuis que les CTA sont passés en contour, la seule pastille pleine de la
       carte était l'étiquette — qui n'est pas cliquable. Le magenta devient
       exclusivement la couleur des actions ; l'étiquette prend un bleu nuit,
       qu'aucun bouton n'utilise, donc plus de confusion possible.
       Dégradé très léger : tout le site est en dégradé, un aplat pur détonnerait,
       mais un contraste marqué en referait un faux bouton. --- */
.bundle-card__badge,
#p-multiomics .bundle-card__badge,
#p-combo .bundle-card__badge{
  border:none !important;
  color:#fff !important;
  background:linear-gradient(105deg, var(--o4-ink) 0%, color-mix(in srgb, var(--o4-teinte) var(--o4-label-mix), var(--o4-ink)) 100%) !important;
  font-size:.82rem !important; font-weight:600;
  padding:.38rem .95rem !important;
}

/* --- 20. Retour du magenta et de l'or sur les offres propres à la marque.
       En généralisant les CTA à la couleur de section, j'avais écrasé une
       intention de v26 : #p-multiomics a pour accent --s5, un violet, donc ses
       boutons étaient devenus violets. Or les packages et les combos ne sont pas
       des catégories techniques, ce sont les offres OMICS4 — v26 les mettait
       délibérément en magenta et en or. On restaure, les huit catégories
       techniques gardent bien leur propre couleur. --- */

/* --- 21. Icônes de package en violet foncé, et bouton = étiquette inversée.
       L'étiquette va du bleu nuit vers la couleur ; le bouton fait le chemin
       inverse. Les deux se répondent sur la même carte.
       Le violet est réservé aux illustrations de package : les onze en-têtes de
       catégorie et les six tuiles secteur gardent leur code couleur.
       --o4-teinte est redéfini par section, donc les packages restent magenta et
       les combos or sans qu'aucune règle de couleur ne soit réécrite. --- */
.bundle-card__icon{
  --c:color-mix(in srgb, var(--s4,#6a45ff) 74%, var(--o4-ink,#12132a)) !important;
}
#p-multiomics{ --o4-teinte:var(--brand-magenta,#C00060); }
#p-combo{ --o4-teinte:var(--gold-deep,#9A6B00); }


/* --- 22. Contour en dégradé bleu nuit → violet → rose, RÉSERVÉ aux trois
       cartes de la section in-house. Les neuf boutons de réservation des
       plateformes gardent la couleur de leur catégorie : c'est leur seul
       marqueur d'identité une fois qu'on descend dans la page.
       border-color n'accepte pas de dégradé. Astuce des deux couches : le fond
       de la pilule est peint sur padding-box, le dégradé sur border-box, et la
       bordure transparente laisse voir la seconde. Suit le border-radius au
       pixel, ce que border-image ne fait pas.
       Au survol, la même course de couleurs remplit tout le bouton. --- */
#p-multiomics .bundle-card__cta{
  border:2px solid transparent !important;
  background:
    linear-gradient(var(--deep,#fff), var(--deep,#fff)) padding-box,
    linear-gradient(100deg, var(--o4-ink,#12132a) 0%, var(--s4,#6a45ff) 30%,
                    var(--brand-magenta,#C00060) 100%) border-box !important;
}
#p-multiomics .bundle-card__cta:hover{
  border-color:transparent !important; color:#fff !important;
  background:linear-gradient(100deg, var(--o4-ink,#12132a) -10%, var(--s4,#6a45ff) 38%,
                             var(--brand-magenta,#C00060) 105%) border-box !important;
}

/* --- 23. L'en-tête Multi-Omics s'aligne sur ses propres cartes.
       Le sur-titre et l'illustration de catégorie suivaient --accent, soit --s5
       (#a233ff), un violet vif, alors que les trois illustrations de package
       juste en dessous sont en violet foncé. La section se lit mieux si son
       en-tête annonce la couleur de ce qu'elle contient. --- */
#p-multiomics .cat-icon{
  --c:color-mix(in srgb, var(--s4,#6a45ff) 74%, var(--o4-ink,#12132a)) !important;
}
#p-multiomics .n{
  color:color-mix(in srgb, var(--s4,#6a45ff) 74%, var(--o4-ink,#12132a)) !important;
}

/* --- 24. Les trois cartes in-house ont le même bouton, sans exception : le
       texte au repos reprend le violet foncé du dégradé plutôt que le magenta,
       sinon la carte Biomarker se distinguait des deux autres sans raison. --- */
#p-multiomics .bundle-card__cta{
  color:color-mix(in srgb, var(--s4,#6a45ff) 74%, var(--o4-ink,#12132a)) !important;
}

/* --- 25. Retour au survol d'origine sur les boutons de plateforme.
       Le point 21 les faisait finir sur du bleu nuit PUR : la couleur de
       catégorie disparaissait en fin de course et les neuf boutons viraient au
       bleu foncé, tous pareils. On revient à la formule d'avant, où les deux
       extrémités restent teintées, donc la couleur se lit sur toute la longueur.
       Les cartes in-house (#p-multiomics) et combo (#p-combo) ne sont pas
       touchées : leurs sélecteurs à identifiant l'emportent. --- */

/* ============================================================================
   BOUTON DE RÉSERVATION — bloc unique et final.
   Il portait cinq déclarations d'ombre et quatre de fond, empilées par les
   points 2, 10, 16, 21 et 25. Le rendu était juste, mais plus personne ne
   pouvait prédire l'effet d'une retouche. Tout est réuni ici ; ne plus ajouter
   de règle .book-cta ailleurs dans ce fichier.

   Principe : chaque bouton porte la couleur de SA catégorie — c'est son seul
   marqueur d'identité une fois qu'on a descendu la page. Contour au repos,
   plein au survol. Les deux extrémités du dégradé restent teintées : finir sur
   du bleu nuit pur effaçait la couleur et rendait les neuf boutons identiques.
   ============================================================================ */
.book-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:2.4rem; padding:.85rem 1.6rem;
  font-family:var(--body,"Archivo",system-ui,sans-serif) !important;
  font-size:1rem !important; font-weight:500;
  text-transform:none !important; letter-spacing:0 !important;
  text-decoration:none; border-radius:999px !important;
  background:none !important;
  border:1.5px solid color-mix(in srgb, var(--accent) 45%, transparent) !important;
  color:color-mix(in srgb, var(--accent) 48%, var(--bone,#12132a)) !important;
  box-shadow:none !important;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.book-cta:hover{
  border-color:transparent !important;
  color:#fff !important;
  background:linear-gradient(100deg,
      color-mix(in srgb, var(--accent) 52%, var(--bone,#12132a) 48%),
      color-mix(in srgb, var(--accent) 28%, var(--bone,#12132a) 72%)) !important;
  box-shadow:0 18px 34px -14px color-mix(in srgb, var(--accent) 60%, transparent) !important;
}
/* Les deux sections d'offres propres à la marque gardent leur couleur, qui
   n'est pas celle de leur accent : magenta pour les packages, or pour les combos. */
#p-multiomics .book-cta{
  border-color:color-mix(in srgb, var(--brand-magenta,#C00060) 45%, transparent) !important;
  color:var(--brand-magenta-deep,#800040) !important;
}
#p-multiomics .book-cta:hover{
  background:linear-gradient(100deg, var(--brand-magenta,#C00060), var(--brand-magenta-deep,#800040)) !important;
  box-shadow:0 18px 34px -14px rgba(192,0,96,.55) !important;
}
#p-combo .book-cta{
  border-color:color-mix(in srgb, var(--gold-deep,#9A6B00) 50%, transparent) !important;
  color:var(--gold-deep,#9A6B00) !important;
}
#p-combo .book-cta:hover{
  background:linear-gradient(100deg, var(--gold-deep,#9A6B00), #6b4a00) !important;
  box-shadow:0 18px 34px -14px rgba(154,107,0,.5) !important;
}

/* ============================================================================
   SECTION IN-HOUSE — les trois cartes deviennent identiques.
   Titre et illustration en bleu · étiquette en dégradé violet · contour de carte
   turquoise → rose, permanent · bouton sur le même dégradé.
   ============================================================================ */
#p-multiomics{ --o4-bleu:color-mix(in srgb, var(--s3,#2e6bff) 78%, var(--o4-ink,#12132a)); }

/* Titre et illustration : même bleu, pour qu'ils forment une paire. */
#p-multiomics .bundle-card h3{ color:var(--o4-bleu) !important; }
#p-multiomics .bundle-card__icon{ --c:var(--o4-bleu) !important; }

/* Étiquette : dégradé violet, distinct du bleu des titres. */
#p-multiomics .bundle-card__badge{
  background:linear-gradient(105deg, var(--o4-ink,#12132a) 0%,
      color-mix(in srgb, var(--s4,#6a45ff) 62%, var(--o4-ink,#12132a)) 100%) !important;
}

/* Contour de carte : turquoise → rose, visible en permanence et non plus
   seulement au survol — c'est ce qui fait que les trois cartes se lisent comme
   le même objet. Le survol ne fait qu'intensifier. */
#p-multiomics .bundle-card::after{
  background:linear-gradient(120deg, var(--s1,#38d6ff) 0%, #8b7bff 48%,
      var(--brand-magenta,#C00060) 100%) !important;
  opacity:.5 !important;
}
#p-multiomics .bundle-card:hover::after{ opacity:1 !important; }

/* Bouton : le même dégradé que le contour de la carte. */
#p-multiomics .bundle-card__cta{
  border:2px solid transparent !important;
  color:color-mix(in srgb, var(--s4,#6a45ff) 70%, var(--o4-ink,#12132a)) !important;
  background:
    linear-gradient(var(--deep,#fff), var(--deep,#fff)) padding-box,
    linear-gradient(120deg, var(--s1,#38d6ff) 0%, #8b7bff 48%,
        var(--brand-magenta,#C00060) 100%) border-box !important;
}
#p-multiomics .bundle-card__cta:hover{
  color:#fff !important; border-color:transparent !important;
  background:linear-gradient(120deg, var(--s1,#38d6ff) -8%, #8b7bff 45%,
      var(--brand-magenta,#C00060) 104%) border-box !important;
}

/* --- 26. L'en-tête de section prend le bleu de ses cartes.
       Le point 23 l'avait aligné sur le violet foncé des illustrations, mais
       celles-ci sont passées au bleu depuis. Le violet reste porté par les trois
       étiquettes : le passer aussi aux titres en ferait la couleur dominante de
       la section et l'étiquette perdrait sa distinction. --- */
#p-multiomics .cat-icon{ --c:var(--o4-bleu) !important; }
#p-multiomics .n{ color:var(--o4-bleu) !important; }

/* --- 27. Halo des cartes Tier à la couleur de la carte.
       Les trois portaient le même halo magenta alors qu'elles ont chacune leur
       accent : cyan pour Tier 1, violet pour Tier 2, or pour Tier 3. --- */
.tier-card{
  box-shadow:0 1px 2px rgba(18,19,42,.04), 0 22px 44px -26px rgba(18,19,42,.13),
             0 26px 52px -30px color-mix(in srgb, var(--accent) 26%, transparent) !important;
}
.tier-card:hover{
  box-shadow:0 1px 2px rgba(18,19,42,.05), 0 30px 52px -26px rgba(18,19,42,.17),
             0 34px 66px -28px color-mix(in srgb, var(--accent) 40%, transparent) !important;
}

/* --- 28. Retour de l'anneau au survol seul sur les cartes in-house.
       Je l'avais rendu permanent à 50 % pour unifier les trois cartes ; à
       l'écran les trois criaient ensemble. L'unité vient déjà du bleu des titres
       et du violet des étiquettes. --- */
#p-multiomics .bundle-card::after{ opacity:0 !important; }
#p-multiomics .bundle-card:hover::after{ opacity:1 !important; }

/* ============================================================================
   CARTE CLIQUABLE VERS LA PAGE DE DÉTAIL (06/08)
   Trois plateformes ont désormais leur page : PCR digitale, exosomes et VE,
   protéomique. C'est la carte du sujet qui devient cliquable, avec une flèche
   pour le signaler : la carte porte déjà le nom, c'est là que l'œil va.

   Deux essais ratés avant celui-ci. Sous la grande accroche de bas de page,
   d'abord, où les trois liens s'empilaient hors contexte. À côté du bouton de
   réservation ensuite, où le lien répétait un mot déjà présent trois lignes
   plus haut. Le mécanisme existait déjà sur ce site : la carte Genotyping est
   un lien depuis la v27. On reprend son comportement.
   ============================================================================ */
a.feat--doc{
  display:block; position:relative;
  text-decoration:none; color:inherit;
  padding-right:3rem;                 /* la flèche ne chevauche pas le texte */
}
a.feat--doc:hover{
  transform:translateY(-3px);
  border-color:rgba(18,19,42,.10);
  box-shadow:0 1px 2px rgba(18,19,42,.04), 0 22px 40px -22px rgba(18,19,42,.16);
}
a.feat--doc h3{ padding-right:.25rem; }
.feat__go{
  position:absolute; top:1.1rem; right:1.05rem;
  width:1.6rem; height:1.6rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--accent);
  background:rgba(18,19,42,.05);                                  /* repli */
  background:color-mix(in srgb, var(--accent) 13%, transparent);
  transition:transform .2s cubic-bezier(.22,.7,.2,1), background .2s ease;
}
.feat__go svg{ width:.82rem; height:.82rem; }
a.feat--doc:hover .feat__go{
  transform:translateX(2px);
  background:color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ============================================================================
   FICHE PLATEAU (PDF) — lien secondaire, posé à côté du bouton de réservation.
   Volontairement pas un second bouton : deux pilules côte à côte se disputent
   le clic, et c'est la réservation qui doit gagner. Le lien reprend en revanche
   la couleur de la catégorie, comme le bouton, pour rester dans la famille.
   ============================================================================ */
.doc-cta{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:2.4rem; margin-left:1.1rem;
  font-family:var(--body,"Archivo",system-ui,sans-serif);
  font-size:.92rem; font-weight:500; text-decoration:none;
  color:color-mix(in srgb, var(--accent) 58%, var(--bone,#12132a));
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.doc-cta:hover{
  color:color-mix(in srgb, var(--accent) 78%, var(--bone,#12132a));
  border-bottom-color:currentColor;
}
.doc-cta svg{ width:.9rem; height:.9rem; flex:0 0 auto; }
@media (max-width:640px){
  .doc-cta{ margin-left:0; margin-top:1rem; }
}