/* ============================================================================ MOLETTES DE DÉGRADÉ — trois valeurs, un seul endroit. Étiquettes, boutons et illustrations dérivent tous de la couleur de section (--accent, ou --c hors des pages catégorie). Ces variables règlent de combien. --o4-ink la base sombre commune --o4-label-mix dosage de couleur dans l'étiquette (0 % = bleu nuit pur) --o4-icon-mix dosage de couleur dans l'illustration (100 % = couleur pure) --o4-cta-mix dosage de couleur dans le bouton Exemple : pour pousser les icônes vers le sombre, --o4-icon-mix:70%. Pour tout ramener au violet, remplacer --accent par var(--s4) dans --o4-teinte. ============================================================================ */ :root{ --o4-ink:#12132a; --o4-teinte:var(--accent, var(--c, var(--brand-magenta,#C00060))); --o4-label-mix:38%; --o4-icon-mix:100%; --o4-cta-mix:48%; } /* ============================================================ FUSION — POINT 1 : fin du monospace, casse normale Repris verbatim de design-apple-v4, section 1 du calque. Le token --mono est redéfini plutôt que les classes énumérées : un audit des 40 pages avait montré que l'énumération restait incomplète. Aucun usage légitime du monospace sur le site (pas de , pas de 
, pas de chiffres tabulaires).
   ============================================================ */
:root{ --mono:var(--body,"Archivo",system-ui,-apple-system,sans-serif); }
.eyebrow, .pl-tag, .pl-tile__pill, .pl-tile__idx, .pl-axis, .pl-axis span,
.stepper__dot, .pkg-card__badge, .pkg-card__more, .platform-cta, .btn,
.footer__h, .footer__tagline, .footer__powered, .footer__connect .tel-note,
.nav__cta, .nav__login, .nav__flyout-trigger, .nav__mobile-cta, .nav__mobile-lang,
.cookie-banner__btn, .plate__tag, .partners span, .callout__label, .step__badge,
.step__idx, .legal-updated, .tbd, .status__pill, .tier-card__label, .toc__h,
.tbl-expand, .tbl-plus, .cap-link, .faq__q, .tag, .pill, .badge, .chip, .sec-tag, .kicker,
/* Found by rendering every page and listing what still computed to uppercase, rather than by
   reading stylesheets — these are the last stragglers. th/dt on the guidelines pages are
   deliberately left alone: uppercase column heads are a document convention there, and
   restyling table cells is what caused the cookie-policy table to overflow once already. */
.book-cta, .bundle-card__cta, .bundle-card__badge, .path span.n,
/* EN uses .adapt-item, FR uses .o4-adapt-row for the same block — another EN/FR drift. */
.adapt-item h3, .o4-adapt-row h3,
form label, button, input[type="submit"]{
  font-family:var(--body,"Archivo",system-ui,sans-serif) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}


/* ============================================================
   FUSION — POINT 2 : libellés roses agrandis
   .eyebrow  : .76rem → 1.05rem, graisse 600, magenta de marque #C00060
               (v26 utilisait #800040 ; #C00060 est le magenta officiel,
                échantillonné dans GENXMAP_26_.png)
   .pl-tag   : .8rem → 1.05rem, graisse 600, MAGENTA CONSERVÉ
               (v4 le passait en gris ; les jalons Step N structurent
                la page en trois temps, ils doivent rester repérables)
   Le hero garde son rose clair #e4569a : la règle « header.top .eyebrow »
   de v26 a une spécificité supérieure, elle gagne d'elle-même.
   ============================================================ */
.eyebrow{
  font-size:1.05rem; font-weight:600; letter-spacing:0;
  color:var(--brand-magenta,#C00060);
  margin:0 0 1.1rem; display:flex; align-items:center; gap:.8rem;
}
.eyebrow::before{
  content:""; display:block; width:2.25rem; height:1px; flex:none;
  background:linear-gradient(90deg,var(--brand-magenta,#C00060),transparent);
}
.pl-tag{
  font-size:1.05rem; font-weight:600; letter-spacing:0;
  color:var(--brand-magenta,#C00060);
}


/* ============================================================
   FUSION — POINT 3 : boutons magenta en aplat, second magenta au survol
   v26 remplissait les boutons d'un dégradé 100° #C00060 → #800040.
   On passe à l'aplat #C00060, et #800040 devient l'état de survol.
   Les deux teintes de la charte gardent chacune un rôle, le survol
   devient franc, et le contraste du texte blanc monte de 6,2 à 10,5:1.
   Ce motif n'est pas inventé : le bandeau cookies du site l'utilise déjà.
   Non touché volontairement : les barres spectrales multicolores
   (.nav-bar, footer::after, .pl-axis__track) et le bandeau de relais
   OMICS4 → GenXMap, dont le dégradé porte du sens.
   ============================================================ */
.nav__cta, .nav__mobile-cta, .btn--solid, .pkg-card__badge{
  background:var(--brand-magenta,#C00060) !important;
}
.nav__cta, .nav__mobile-cta, .btn--solid{
  transition:background .18s ease, box-shadow .18s ease;
}
.nav__cta:hover, .nav__mobile-cta:hover, .btn--solid:hover,
.sec-glow-magenta .platform-cta:hover{
  background:var(--brand-magenta-deep,#800040) !important;
}


/* ============================================================
   FUSION — POINT 4 : lisibilité des textes sur fond sombre
   Un balayage des encres claires a trouvé TROIS échecs AA en v26,
   pas seulement l'accroche du hero :
     footer .footer__tagline        blanc 42 %  →  4,0:1   échec
     footer .footer__legal          blanc 40 %  →  3,7:1   échec
     .footer__connect .tel-note     blanc 40 %  →  3,7:1   échec
   Tous les trois passent à 62 %, qui est déjà la valeur standard
   des liens du pied de page — on aligne sur l'existant.

   L'accroche du hero passe de #8e8eac (6,4:1, gris lavande) à
   blanc 80 % (12,8:1). v4 montait à 88 %, mais l'accroche arrivait
   alors presque au niveau du titre : à 80 % la marche reste visible.
   ============================================================ */
/* CORRECTIF : cette règle visait le hero de l'accueil, qui a une photo sombre.
   Elle s'appliquait en fait aux 28 pages qui partagent le même 

   sur fond CLAIR, où elle écrivait le paragraphe en blanc sur blanc. Seules les
   deux pages d'accueil ont .hero__content ; le reste garde son gris var(--mute). */
header.top .hero__content p.lead{ color:rgba(255,255,255,.80) !important; }
footer .footer__tagline,
footer .footer__legal,
.footer__connect .tel-note{ color:rgba(255,255,255,.62) !important; }


/* ============================================================
   FUSION — POINT 5 : pilule sur tous les éléments cliquables
   v26 était déjà en pilule sur .nav__cta, .nav__login,
   .cookie-banner__btn, .pkg-card__badge et .pl-tile__pill,
   mais restait à .4rem sur .btn, .nav__mobile-cta et .platform-cta.
   Le cas de .nav__mobile-cta à .4rem alors que son jumeau desktop
   est à 999px montre qu'il s'agit de dérive, pas d'intention.
   On termine l'harmonisation.
   ============================================================ */
.btn, .nav__mobile-cta, .platform-cta{ border-radius:999px !important; }


/* ============================================================
   FUSION — POINT 6 : cartes — rayon unique et ombres de v4
   Le langage de carte (pas de filet visible, fond quasi blanc,
   halo à 3 couches dont une teintée par plateforme via var(--c))
   existait DÉJÀ en v26. v4 n'y change que deux choses :
     · le rayon, uniformisé — mais à 1,75 rem, trop rond pour une
       tuile d'une ligne. On retient 1,4 rem, dans la fourchette
       existante (v26 dérivait entre 1,2 et 1,4 sans intention).
     · la troisième couche du halo, .12 → .14, et des survols
       légèrement plus étalés. Repris tel quel.
   ============================================================ */
.pl-tile, .pkg-card, .ind{ border-radius:1.4rem !important; }

.pl-tile{
  box-shadow:0 1px 2px rgba(18,19,42,.04), 0 22px 46px -24px rgba(18,19,42,.13),
             0 26px 54px -28px color-mix(in srgb, var(--c,#38d6ff) 24%, transparent) !important;
}
.pkg-card{
  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,.14) !important;
}
.pkg-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(192,0,96,.22) !important;
}
.ind{
  box-shadow:0 1px 2px rgba(18,19,42,.04), 0 20px 40px -22px rgba(18,19,42,.12),
             0 24px 48px -26px rgba(46,155,255,.14) !important;
}
.ind:hover{
  box-shadow:0 1px 2px rgba(18,19,42,.05), 0 28px 46px -22px rgba(18,19,42,.16),
             0 32px 58px -24px rgba(46,155,255,.22) !important;
}


/* ============================================================
   FUSION — POINT 7 : illustrations à plat de v4
   Le sprite de v26 (11 symboles « o4-* ») est remplacé par celui
   de v4 (26 symboles « il-* »). Onze correspondances directes sur
   les tuiles plateformes, six sur les industries — où le  PNG
   au trait cède la place au dessin à plat, DANS la tuile compacte
   de v26 : la mise en page ne bouge pas.
   Restent à traiter : les 4 étapes (à combiner avec la frise) et
   les 3 packages.
   CSS repris verbatim de la section 7 du calque v4.
   ============================================================ */
/* ---------- 7. Illustrations ----------
   Each takes its hue from --c on the host. Only inherited properties and custom properties
   reach the shapes:  clones the symbol into a shadow tree, so a rule like
   `.il .tint{fill:…}` would never match — the fills live inline on the shapes instead.
   --knock is punched out behind an overlapping badge, so it has to match what the
   illustration sits on. */
.il{ display:block; width:100%; height:100%; overflow:visible;
     stroke-linecap:round; stroke-linejoin:round; --knock:#fff; }
.sec-surface .il{ --knock:var(--surface); }
.pl-tile .il, .pkg-card .il, .ind .il{ --knock:var(--deep,#F8F9FB); }
/* The six industry drawings replace multicolour line-art PNGs that were used at two very
   different sizes: a label icon in the grids, and a page-header mark on the detail pages. */
.ind__icn.il-host{ width:62px; height:62px; display:block; }
/* header.top .icn-hero is (2 classes, 1 element) — .top is a class — so it outranks a plain
   .icn-hero.il-host and the size below has to be qualified the same way to take effect. */
.icn-hero.il-host, header.top .icn-hero.il-host{
  width:68px; height:68px; display:block; flex:none;
}
/* about.html reuses three of these drawings to mark its partners by field. 26px was fine for
   line art but leaves a three-tone flat illustration unreadable. */
.partner-accordion__icn.il-host{ width:34px; height:34px; }
@media (max-width:600px){
  .icn-hero.il-host, header.top .icn-hero.il-host{ width:58px; height:58px; }
}
.pl-tile__il{ width:92px; height:92px; margin-bottom:1.7rem; }
.pl-tile--accent .pl-tile__il{ width:100px; height:100px; }
.pkg-card__il{ width:96px; height:96px; margin-bottom:1.8rem; }
.step-il{ width:88px; height:88px; margin-bottom:1.4rem; }
.sec-il{ width:80px; height:80px; margin-bottom:1.8rem; }
@media (max-width:600px){
  .pl-tile__il, .step-il, .pl-tile--accent .pl-tile__il, .pkg-card__il{ width:76px; height:76px; }
}
/* l'illustration d'industrie tient dans la tuile compacte, à gauche du libellé */
.ind__icn.il-host{ flex:none; width:34px; height:34px; display:block; }


/* ============================================================
   FUSION — POINT 8 : illustrations de la frise + retrait des numéros
   A. « How it works » — les 4 dessins d'action de v4 sont posés
      SUR la frise de v26, pastille numérotée et ligne de liaison
      conservées. v4 gardait la pastille mais supprimait la ligne :
      pour une section intitulée « in four steps », la ligne EST
      le propos. Elle doit donc redescendre sous les illustrations,
      d'où le recalcul du « top » du ::before.
   B. Les 01/02/03 des tuiles Biosourcing / Sample Preparation /
      Sample Extraction & QC sont retirés du balisage, pas masqués :
      rien ne reste à annoncer à un lecteur d'écran. Le texte décrit
      ces trois entrées comme optionnelles, la numérotation
      suggérait un ordre imposé qu'il contredit.
      Les 01-04 de la frise, eux, restent : là l'ordre est réel.
   ============================================================ */
.stepper__step{ --il-size:64px; --il-gap:.8rem; }
.step-il{ width:var(--il-size); height:var(--il-size); margin:0 0 var(--il-gap); display:block; }
.stepper__step::before{ top:calc(var(--il-size) + var(--il-gap) + 10.5px) !important; }
@media (max-width:600px){ .stepper__step{ --il-size:56px; } }


/* ============================================================
   FUSION — POINT 9 : cartes packages
   A. Icônes 24×24 remplacées par les illustrations 96 px de v4.
      Le symbole « il-pkg-epigenome » a été REDESSINÉ : les vagues
      violettes de v4 ne disaient pas la méthylation. Remplacé par
      un graphe lollipop, figure conventionnelle du domaine.
   B. Survol : le dégradé trace le périmètre en un seul tour de
      750 ms, puis s'arrête. Pas de boucle — un trait qui tourne
      sans fin parasite la lecture d'une carte qu'on compare.
      Réalisé en conic-gradient masqué plutôt qu'en SVG : suit
      exactement le border-radius, aucune déformation d'angle.
      La barre du haut est neutralisée, le tracé passe déjà dessus.
   ============================================================ */
@property --o4ring{ syntax:''; initial-value:0deg; inherits:false; }

.pkg-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:conic-gradient(from -90deg,
      #38d6ff 0deg,
      #8b7bff calc(var(--o4ring) * .55),
      var(--brand-magenta,#C00060) var(--o4ring),
      transparent var(--o4ring));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0; pointer-events:none;
}
.pkg-card:hover::after{
  opacity:1; animation:o4ring-draw .75s cubic-bezier(.22,.7,.3,1) forwards;
}
@keyframes o4ring-draw{ from{ --o4ring:0deg } to{ --o4ring:360deg } }

/* la barre spectrale du haut devient redondante avec le tracé */
.pkg-card:hover::before{ opacity:0 !important; }

@media (prefers-reduced-motion:reduce){
  .pkg-card:hover::after{ animation:none; --o4ring:360deg; }
}


/* ============================================================
   FUSION — POINT 10 : trois correctifs
   A. FILET DE SÉCURITÉ SUR --c. Le sprite compte 152 « var(--c) »
      SANS valeur de repli : sur un hôte qui ne définit pas --c,
      la déclaration est invalide et le remplissage retombe en NOIR.
      C'est ce qui rendait les six icônes d'industrie noires.
      Les teintes explicites sont désormais posées par industrie,
      et :root porte un défaut pour qu'aucune illustration future
      ne puisse plus virer au noir par omission.
   B. BORDURE DU CTA. v26 déclare « border-color » sur .platform-cta
      sans jamais déclarer border-width ni border-style : le bouton
      n'avait donc aucune bordure visible. Oubli de v26, pas de v4.
   C. TITRE DU BLOC FINAL. Il était à clamp(1.8rem,3.4vw,2.5rem),
      donc PLUS PETIT que les titres de section (2rem à 2.6rem) —
      hiérarchie inversée pour le dernier appel de la page.
      Porté à clamp(2.2rem,4vw,3rem) : au-dessus des sections,
      sans aller au monumental des 4rem de v4.
   ============================================================ */
:root{ --c:var(--s4,#6a45ff); }

.platform-cta{
  border-style:solid !important;
  border-width:1px !important;
}

.cta h2{ font-size:clamp(2.2rem,4vw,3rem) !important; }

/* ================= pt11 — RYTHME VERTICAL (v4 §4, sans les bandes grises) =================
   Décision : on garde les 5 halos colorés de v26 (sec-glow-cyan/magenta/gold/blue/purple),
   qui portent déjà un rythme, propre à la marque. On ne prend de v4 que l'espacement.
   Valeur : v4 utilisait 9rem, mais calibré AVEC des bandes — une arête de bande coupe
   l'écart en son milieu. Sans bandes, les marges de deux sections voisines fusionnent
   (9+9 = 18rem = 288px de vide). 7rem donne 224px entre contenus : généreux, pas disloqué.
   Les filets de séparation sautent : à 7rem l'espace suffit, et un filet PLUS un grand vide
   se lit comme une hésitation. C'est l'un ou l'autre. */
section.block, #pipeline{ padding:7rem 0 !important; border-top:none !important; }
section.block.block--compact{ padding:5rem 0 !important; }
#pipeline{ padding-top:8rem !important; }
.cta{ padding:9rem 0 10rem !important; }
@media (max-width:700px){
  section.block, #pipeline{ padding:4.5rem 0 !important; }
  section.block.block--compact{ padding:3.5rem 0 !important; }
  #pipeline{ padding-top:5rem !important; }
  .cta{ padding:5.5rem 0 6.5rem !important; }
}


/* ========== pt12 — ANNEAU DES PACKAGES + SURVOL DES SECTEURS ==========

   A) L'anneau 360° est abandonné. Trois défauts, dont un structurel :
      - couture : le conique boucle magenta(360°) contre cyan(0°), cassure nette à midi ;
      - vitesse : un conique balaie par angle depuis le centre, or un rectangle ne couvre
        pas la même longueur de périmètre par degré — le trait sprinte sur les grands côtés
        et cale dans les angles. Non réglable sur une boîte non carrée ;
      - l'interpolation vers `transparent` passe par du noir transparent → liseré grisâtre.
      Remplacé par le MÊME anneau (technique de masque, qui suit le border-radius au pixel)
      mais en dégradé LINÉAIRE — pas de raccord, donc pas de couture — et en fondu simple.
      La carte se soulève déjà et son ombre s'approfondit : une 3e animation est de trop. */
.pkg-card::after{
  background:linear-gradient(135deg,
      var(--s1,#38d6ff) 0%, #8b7bff 45%, var(--brand-magenta,#C00060) 100%) !important;
  opacity:0 !important;
  transition:opacity .28s ease !important;
  animation:none !important;
}
.pkg-card:hover::after{ opacity:1 !important; animation:none !important; }
@media (prefers-reduced-motion:reduce){ .pkg-card::after{ transition:none !important; } }

/* B) Secteurs : le survol était rose pâle à 30 % pour les six, et l'ombre ambiante bleue
      en dur pour les six — un halo bleu sous l'icône rose d'immuno-oncologie. Chaque carte
      porte maintenant sa propre teinte `--c` (remontée de la puce vers la carte), donc la
      bordure et l'ombre reprennent la couleur de l'icône. La 1re déclaration de chaque
      paire est la valeur de repli pour un navigateur sans color-mix. */
.ind{
  box-shadow:0 1px 2px rgba(18,19,42,.04), 0 20px 40px -22px rgba(18,19,42,.12),
             0 24px 48px -26px rgba(18,19,42,.10) !important;
  box-shadow:0 1px 2px rgba(18,19,42,.04), 0 20px 40px -22px rgba(18,19,42,.12),
             0 24px 48px -26px color-mix(in srgb, var(--c) 20%, transparent) !important;
  transition:transform .25s cubic-bezier(.22,.7,.2,1), box-shadow .25s ease, border-color .25s ease !important;
}
.ind:hover{
  border-color:var(--brand-magenta-tint) !important;
  border-color:color-mix(in srgb, var(--c) 62%, transparent) !important;
  box-shadow:0 1px 2px rgba(18,19,42,.05), 0 28px 46px -22px rgba(18,19,42,.16),
             0 32px 58px -24px rgba(18,19,42,.14) !important;
  box-shadow:0 1px 2px rgba(18,19,42,.05), 0 28px 46px -22px rgba(18,19,42,.16),
             0 32px 58px -24px color-mix(in srgb, var(--c) 34%, transparent) !important;
}


/* CORRECTIF 01/08 — l'anneau se calait un pixel en retrait du bord : un pseudo-
   élément en inset:0 se positionne sur la boîte de padding, or la carte porte
   un border de 1px. On l'étend et on rattrape le rayon. */


/* CORRECTIF 01/08 (2) — overflow:hidden rognait l'anneau au ras de la boîte de
   padding, annulant inset:-1px. Et le rayon doit valoir celui de la boîte de
   bordure, soit 1.4rem, pas 1.4rem+1px. Épaisseur 2 → 3 px. */
.pkg-card{ overflow:visible !important; }
.pkg-card::after{ inset:-1px !important; border-radius:1.4rem !important; padding:3px !important; }

/* ÉTIQUETTES 01/08 — même décision que sur la page plateformes : le magenta plein
   est réservé aux actions, l'étiquette de catégorie passe en bleu nuit. Elle
   n'est pas cliquable, elle ne doit plus être l'élément le plus fort de la carte. */
.pkg-card__badge{
  background:linear-gradient(105deg, var(--o4-ink) 0%, color-mix(in srgb, var(--o4-teinte) var(--o4-label-mix), var(--o4-ink)) 100%) !important;
  color:#fff !important; border:none !important;
  font-size:.82rem !important; font-weight:600; padding:.38rem .95rem !important;
}

/* PREMIÈRE SECTION 01/08 — les 7rem du point 11 sont calibrés pour SÉPARER deux
   sections : deux marges se rejoignent, l'œil voit la somme. Sous un en-tête,
   il n'y a rien à séparer, on prolonge une lecture déjà commencée — et le header
   apporte déjà ses 2,5rem. Le total montait à 9,5rem (152 px) de vide.
   4,25rem ramène l'écart à 6,75rem (108 px). Ne concerne pas l'accueil, dont la
   première section est #pipeline, ni platforms, dont c'est .ai-finder. */
header.top + section.block{ padding-top:4.25rem !important; }
@media (max-width:700px){ header.top + section.block{ padding-top:2.75rem !important; } }

/* PAGES COURTES 01/08 — le bloc d'appel final est réglé à 9rem/10rem, valeurs
   calibrées sur l'accueil où il conclut sept sections de défilement. Sur une
   page d'une seule section, ça donne 16rem avant lui et 13,5rem après : le
   contenu flotte. Le sélecteur ne s'active que si le bloc d'appel suit la
   PREMIÈRE section — donc jamais sur l'accueil, où il en suit cinq. */
section.block:first-of-type:has(+ .cta){ padding-bottom:5rem !important; }
section.block:first-of-type + .cta{ padding:5.5rem 0 7rem !important; }
@media (max-width:700px){
  section.block:first-of-type:has(+ .cta){ padding-bottom:3rem !important; }
  section.block:first-of-type + .cta{ padding:3.5rem 0 4.5rem !important; }
}

/* CTA = ÉTIQUETTE INVERSÉE 01/08 — l'étiquette va du bleu nuit vers la couleur,
   le bouton fait le chemin inverse. Les deux se répondent sur la carte. */
.pkg-card__il{ --c:color-mix(in srgb, var(--s4,#6a45ff) 74%, var(--o4-ink,#12132a)) !important; }
.pkg-card .platform-cta:hover, .pkg-card__more:hover{
  background:linear-gradient(105deg,
      color-mix(in srgb, var(--o4-teinte) var(--o4-label-mix), var(--o4-ink)) 0%,
      var(--o4-ink) 100%) !important;
  color:#fff !important; border-color:transparent !important;
}

/* CONTOUR DÉGRADÉ 01/08 — même traitement sur les boutons de carte de l'accueil :
   bleu nuit → violet → rose, via la double couche padding-box / border-box. */
.pkg-card .platform-cta, .pkg-card__more{
  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;
}
.pkg-card .platform-cta:hover, .pkg-card__more:hover{
  color:#fff !important; border-color:transparent !important;
  background:linear-gradient(100deg, var(--o4-ink,#12132a) -10%, var(--s4,#6a45ff) 38%,
                             var(--brand-magenta,#C00060) 105%) border-box !important;
}

/* « LEARN MORE » 01/08 — c'est un lien de lecture, pas une action. Ni cadre ni
   dégradé de fond : le bouton de réservation doit rester le seul objet plein de
   la carte. Simple texte magenta, la flèche glisse au survol. */
.pkg-card__more{
  border:none !important; background:none !important; padding:0 !important;
  color:var(--brand-magenta,#C00060) !important;
  font-weight:600; text-decoration:none;
  box-shadow:none !important;
}
.pkg-card__more:hover{
  color:var(--brand-magenta-deep,#800040) !important;
  background:none !important; border:none !important;
}

/* ACCUEIL FR 03/08 — les tuiles plateforme francaises utilisent .pl-tile__icon
   la ou l'anglaise utilise .pl-tile__il. Meme taille pour les deux. */
.pl-tile__icon.il-host{ width:62px; height:62px; display:block; }
.pl-tile__icon.il-host svg{ width:100%; height:100%; overflow:visible; --knock:#fff; }
@media (max-width:700px){ .pl-tile__icon.il-host{ width:44px; height:44px; } }

/* ============================================================================
   ADRESSE AU PIED DE PAGE (06/08)
   Le site nommait Marseille vingt fois en prose et zéro fois dans une donnée
   structurée. L'adresse entre au pied de page, colonne de marque, au-dessus de
   la mention « Powered by ». Discrète : c'est un signal de localisation, pas
   une information que le visiteur vient chercher là.
   ============================================================================ */
.footer__addr{
  font-style:normal;
  display:block;
  margin:0 0 1rem;
  font-size:.78rem;
  line-height:1.7;
  color:rgba(255,255,255,.62);
}

/* ============================================================================
   NIVEAUX DE TITRE (07/08)
   Sept familles de cartes portaient un h4 ou un h5 directement sous le h2 de
   leur section, ce qui creuse un trou dans la table des matières que construit
   un lecteur d'écran. Les balises passent en h3. Ces règles rendent au nouveau
   niveau l'apparence exacte de l'ancien : sans elles, les sélecteurs `.feat h4`
   des pages ne matchent plus rien et les titres retombent à la taille par
   défaut d'un h3, soit nettement trop gros.

   Valeurs reprises telles quelles des feuilles de style des pages, override du
   calque compris quand il y en avait un.
   ============================================================================ */
.feat h3{
  font-family:var(--display) !important; font-weight:600 !important; font-size:.95rem !important;
  margin:0 0 .35rem !important; color:var(--bone) !important;
}
.sample-card h3{
  font-family:var(--display) !important; font-weight:600 !important; font-size:.98rem !important;
  margin:0 0 .5rem !important; color:var(--bone) !important;
}
.trust h3{
  font-family:var(--display) !important; font-weight:600 !important; font-size:.95rem !important;
  margin:0 0 .5rem !important; color:var(--bone) !important;
}
.partner-accordion__head h3{
  margin:0 !important; font-size:1rem !important; font-weight:600 !important; flex:1 !important;
}
.stepper__step h3{
  font-family:var(--display) !important; font-weight:600 !important; font-size:.95rem !important; margin:0 0 .3rem !important;
}
/* Le comparatif secteur : petite étiquette, pas un titre de carte. Le calque
   avait déjà retiré le monospace et les majuscules forcées, on garde l'état
   final et non l'état d'origine. */
.adapt-item h3, .o4-adapt-row h3{
  margin:0 0 .35rem !important;
  font-family:var(--body,"Archivo",system-ui,sans-serif) !important;
  font-weight:500 !important; font-size:.66rem !important; letter-spacing:0 !important; text-transform:none !important;
  color:var(--mute) !important;
}
/* Le problème du client reste en gris, la réponse d'OMICS4 en magenta : c'était
   la décision du 03/08, elle suivait les h4. */
.adapt-item .theirs h3, .o4-adapt-row .theirs h3{ color:var(--mute) !important; }
.adapt-item > *:nth-child(3) h3,
.o4-adapt-row > *:nth-child(3) h3{ color:var(--brand-magenta,#C00060) !important; }

/* ============================================================================
   PIED DE PAGE À QUATRE COLONNES (07/08)
   Les huit pages créées en vagues 1 et 2 s'empilaient dans la colonne
   « OMICS4 », qui atteignait treize entrées : une liste qu'on ne lit plus.
   Elles ont leur colonne. La grille passe de trois à quatre, et se replie en
   deux colonnes sur tablette plutôt que d'écraser quatre colonnes étroites.
   ============================================================================ */
.footer__grid{
  grid-template-columns:1.3fr 1fr 1fr 1fr !important;
  gap:2rem !important;
}
@media (max-width:1000px){
  .footer__grid{ grid-template-columns:1fr 1fr !important; gap:2.25rem !important; }
}
@media (max-width:600px){
  .footer__grid{ grid-template-columns:1fr !important; gap:2rem !important; }
}

/* ---------------------------------------------------------------------------
   LES QUATRE DERNIERS CONTEXTES, PROMUS EN h2 (07/08)
   Ceux-là se heurtent à `section.block h2`, qui impose clamp(2rem,3.4vw,2.6rem)
   en !important : un titre de carte y passerait de 1 rem à 2,6 rem. On gagne en
   spécificité, deux classes contre une, et on redéclare l'apparence de l'ancien
   h3. Les sélecteurs comptent volontairement le conteneur parent : sans lui,
   `.direct h2` (0,1,1) perdrait contre `section.block h2` (0,1,2).
   --------------------------------------------------------------------------- */
.contact-side .direct h2{
  font-family:var(--display) !important; font-weight:600 !important;
  font-size:1rem !important; margin:0 0 .75rem !important;
  line-height:1.3 !important; letter-spacing:0 !important; max-width:none !important;
}
.ind-grid .ind h2{
  font-family:var(--display) !important; font-weight:600 !important;
  font-size:.98rem !important; margin:.2rem 0 0 !important; color:var(--bone) !important;
  line-height:1.3 !important; letter-spacing:0 !important; max-width:none !important;
}
.paths .path h2{
  font-family:var(--display) !important; font-weight:600 !important;
  font-size:1.15rem !important; margin:.6rem 0 .6rem !important;
  line-height:1.3 !important; letter-spacing:0 !important; max-width:none !important;
}
.tier-select .tier-card h2{
  font-family:var(--display) !important; font-weight:600 !important;
  font-size:1.15rem !important; margin:0 0 .4rem !important; color:var(--bone) !important;
  line-height:1.3 !important; letter-spacing:0 !important; max-width:none !important;
}
/* La page login : promouvoir `.path` en h2 a révélé un saut jusque-là masqué,
   les promesses du portail juste en dessous étant en h4. */
.feature h3{
  font-family:var(--display) !important; font-weight:600 !important;
  font-size:.92rem !important; margin:0 0 .4rem !important; color:var(--bone) !important;
}