/*!
Theme Name: CardiOX
Theme URI: https://cardiox.dev
Author: Olivier Xhaet
Author URI: https://cardiox.ac
Description: Thème block (Full Site Editing) répliquant l'identité visuelle CardiOX — rythmologie & systèmes de prise de notes. Dark theme natif, JetBrains Mono + Inter bundlées localement, grille technique de fond, sans thème parent ni framework CSS.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cardiox
Tags: full-site-editing, block-patterns, block-styles, custom-colors, custom-menu, sticky-post, translation-ready, dark-mode
*/

/* ==========================================================================
   CardiOX — feuille de style structurelle
   Tokens (couleurs, typo, espacements) = theme.json → exposés en
   var(--wp--preset--*). Ce fichier porte ce que theme.json ne peut pas :
   grille de fond, listes fléchées, eyebrow, header/footer, callouts, cards.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Grille technique de fond (signature « interface médicale »)
   Reproduit src/styles/global.css : glow radial cyan + double linear-gradient
   (maille 44px, couleur border-grid), atténué par un voile bg-primary 86%.
   -------------------------------------------------------------------------- */
body {
  background-color: var(--wp--preset--color--bg-primary);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(67, 182, 214, 0.07), transparent 60%),
    linear-gradient(var(--wp--preset--color--border-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--wp--preset--color--border-grid) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  background-position: center top, center, center;
  background-attachment: fixed, fixed, fixed;
}

/* Voile sombre par-dessus la grille pour ne pas surcharger. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--wp--preset--color--bg-primary);
  opacity: 0.86;
  z-index: -1;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   2. Sélection, focus, liens, code
   -------------------------------------------------------------------------- */
::selection {
  background: rgba(67, 182, 214, 0.12);
  color: var(--wp--preset--color--text-primary);
}

:focus-visible {
  outline: 2px solid var(--wp--preset--color--cyan-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

code, kbd, samp, pre {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
}

:where(.entry-content) code {
  background: var(--wp--preset--color--bg-elevated);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.88em;
  color: var(--wp--preset--color--cyan-accent);
}

/* Lien « passer au contenu » accessible. */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 100;
  background: var(--wp--preset--color--cyan-accent);
  color: var(--wp--preset--color--bg-darker);
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-weight: 600;
  transition: top 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.skip-link:focus { top: 0.5rem; }

/* --------------------------------------------------------------------------
   3. Eyebrow de section — mono uppercase cyan + trait horizontal
   Pattern réutilisable : <p class="cardiox-eyebrow">— À propos</p>
   -------------------------------------------------------------------------- */
.cardiox-eyebrow {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--cyan-accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
}
.cardiox-eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--wp--preset--color--cyan-accent);
  display: inline-block;
}

/* --------------------------------------------------------------------------
   4. Listes à flèches cyan
   Appliqué globalement au contenu d'article + via la variante de bloc
   « Liste fléchée » (.is-style-arrow-list). Remplace les puces standard.
   -------------------------------------------------------------------------- */
.is-style-arrow-list,
.cardiox-arrow-list,
:where(.entry-content) ul:not(.wp-block-post-template):not([class*="wp-block-"]) {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.is-style-arrow-list > li,
.cardiox-arrow-list > li,
:where(.entry-content) ul:not(.wp-block-post-template):not([class*="wp-block-"]) > li {
  position: relative;
  padding-left: 1.4rem;
}
.is-style-arrow-list > li::before,
.cardiox-arrow-list > li::before,
:where(.entry-content) ul:not(.wp-block-post-template):not([class*="wp-block-"]) > li::before {
  content: "\2192"; /* → */
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--cyan-accent);
  font-family: var(--wp--preset--font-family--jetbrains-mono);
}

/* --------------------------------------------------------------------------
   5. En-tête sur-mesure (sombre) — filet cyan, logo, wordmark, nav, FR/EN
   Reproduit src/components/Header.astro. Fond JAMAIS clair.
   -------------------------------------------------------------------------- */
.cardiox-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-top: 2px solid var(--wp--preset--color--cyan-accent);
  border-bottom: 1px solid var(--wp--preset--color--border-subtle);
  background: color-mix(in srgb, var(--wp--preset--color--bg-darker) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cardiox-header.is-scrolled {
  background: color-mix(in srgb, var(--wp--preset--color--bg-darker) 94%, transparent);
  box-shadow: 0 8px 30px -16px rgba(0, 0, 0, 0.7);
}
.cardiox-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  max-width: var(--wp--style--global--wide-size, 1200px) !important;   /* même largeur que les sections (1200px) : 4 entrées + FR/EN tiennent sur une ligne */
}

/* Marque : logo + wordmark Cardi[OX] (OX cyan) */
.cardiox-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--wp--preset--color--text-primary) !important;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.cardiox-brand img,
.cardiox-brand .cardiox-logo { height: 30px; width: auto; display: block; }
.cardiox-brand__accent { color: var(--wp--preset--color--cyan-accent); }

/* Navigation mono */
.cardiox-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.cardiox-nav__list {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cardiox-nav__list a,
.cardiox-nav .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--wp--preset--color--text-secondary);
  padding: 0.45rem 0.7rem;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;   /* jamais de libellé sur deux lignes (« Outils & Plugins », « À propos ») */
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Survol : texte blanc + rectangle légèrement plus clair que le fond. */
.cardiox-nav__list a:hover,
.cardiox-nav__list a:focus-visible,
.cardiox-nav .wp-block-navigation-item__content:hover,
.cardiox-nav .wp-block-navigation-item__content:focus-visible {
  color: var(--wp--preset--color--text-primary);
  background: var(--wp--preset--color--surface-card);
}
/* Page courante : texte cyan. Couvre le balisage du bloc Navigation WP
   (aria-current + current-menu-item) en plus des liens HTML personnalisés. */
.cardiox-nav__list a[aria-current="page"],
.cardiox-nav__list a.is-active,
.cardiox-nav .wp-block-navigation-item__content[aria-current],
.cardiox-nav .current-menu-item > .wp-block-navigation-item__content,
.cardiox-nav .current_page_item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--cyan-accent) !important;
  background: transparent;
}

/* Toggle langue FR/EN — deux pastilles, active en surbrillance */
.cardiox-langsw {
  display: inline-flex;
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 0.78rem;
  font-weight: 600;
}
.cardiox-langsw__opt {
  padding: 0.35rem 0.6rem;
  color: var(--wp--preset--color--text-secondary);
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.cardiox-langsw__opt + .cardiox-langsw__opt {
  border-left: 1px solid var(--wp--preset--color--border-subtle);
}
.cardiox-langsw__opt:hover {
  color: var(--wp--preset--color--text-primary);
  background: var(--wp--preset--color--bg-elevated);
}
.cardiox-langsw__opt.is-active,
.cardiox-langsw__opt[aria-current="true"] {
  background: rgba(67, 182, 214, 0.12);
  color: var(--wp--preset--color--cyan-accent);
}

/* Burger mobile (CSS-only) */
.cardiox-nav__toggle,
.cardiox-nav__burger { display: none; }

@media (max-width: 820px) {
  .cardiox-nav__burger {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border: 1px solid var(--wp--preset--color--border-subtle);
    border-radius: 4px;
    background: var(--wp--preset--color--surface-card);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
  }
  .cardiox-nav__burger span {
    width: 18px;
    height: 2px;
    background: var(--wp--preset--color--text-body);
  }
  .cardiox-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 1rem clamp(1.1rem, 4vw, 2rem) 1.5rem;
    background: var(--wp--preset--color--bg-darker);
    border-bottom: 1px solid var(--wp--preset--color--border-subtle);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }
  .cardiox-nav__toggle:checked ~ .cardiox-nav {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .cardiox-nav__list { flex-direction: column; align-items: stretch; gap: 0.2rem; }
}

/* --------------------------------------------------------------------------
   6. NEUTRALISATION « Title Above Content »
   Aucun bandeau de titre gris séparé. Le titre vit dans le hero/contenu.
   -------------------------------------------------------------------------- */
.cardiox-no-title-banner .wp-block-post-title,
.entry-header--banner { background: transparent !important; }
.cardiox-page-title-banner { display: none !important; }

/* --------------------------------------------------------------------------
   7. Colonne de contenu / prose (720px, alignée gauche)
   -------------------------------------------------------------------------- */
.cardiox-prose :where(h2) {
  margin-top: 2.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}
.cardiox-prose :where(h3) {
  margin-top: 1.8rem;
  color: var(--wp--preset--color--cyan-accent);
}
.cardiox-prose :where(blockquote),
.wp-block-quote.is-style-cardiox {
  border-left: 3px solid var(--wp--preset--color--cyan-accent);
  background: rgba(67, 182, 214, 0.12);
  padding: 0.8rem 1.1rem;
  border-radius: 0 4px 4px 0;
  color: var(--wp--preset--color--text-body);
}
.cardiox-prose :where(a) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--wp--preset--color--border-subtle);
}
.cardiox-prose :where(a):hover { text-decoration-color: var(--wp--preset--color--cyan-accent); }

/* --------------------------------------------------------------------------
   8. Callout « Point clé » (+ variantes Attention / Astuce / Exemple)
   -------------------------------------------------------------------------- */
.cardiox-callout {
  --_c: var(--wp--preset--color--cyan-accent);
  border-left: 3px solid var(--_c);
  background: rgba(67, 182, 214, 0.10);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
  margin-block: 1.6rem;
}
.cardiox-callout__label {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--_c);
  margin: 0 0 0.4rem;
}
.cardiox-callout p { color: var(--wp--preset--color--text-body); margin: 0; }
.cardiox-callout--warning {
  --_c: var(--wp--preset--color--red-data);
  background: rgba(251, 70, 76, 0.10);
}
.cardiox-callout--tip {
  --_c: var(--wp--preset--color--purple-data);
  background: rgba(168, 130, 255, 0.10);
}
.cardiox-callout--example {
  --_c: var(--wp--preset--color--green-success);
  background: rgba(68, 207, 110, 0.10);
}

/* --------------------------------------------------------------------------
   9. Carte (article card / hub card) — barre d'accent gauche 3px
   -------------------------------------------------------------------------- */
.cardiox-card {
  position: relative;
  background: var(--wp--preset--color--surface-card);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  padding: 1.5rem;
  overflow: hidden;
  height: 100%;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s, box-shadow 0.2s;
}
.cardiox-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--card-accent, var(--wp--preset--color--cyan-accent));
  opacity: 0.9;
}
a.cardiox-card,
.cardiox-card--link { text-decoration: none; color: inherit; display: block; }
.cardiox-card--link { cursor: pointer; }
.cardiox-card--link .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cardiox-card--link .cardiox-tags { position: relative; z-index: 2; }
a.cardiox-card:hover,
.cardiox-card--link:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--card-accent, var(--wp--preset--color--cyan-accent)) 55%, var(--wp--preset--color--border-subtle));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.cardiox-card h3 { margin: 0 0 0.5rem; }
.cardiox-card p { color: var(--wp--preset--color--text-secondary); font-size: 0.95rem; margin: 0; }
.cardiox-card__meta {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 0.8rem;
  color: var(--wp--preset--color--text-muted);
}

/* --------------------------------------------------------------------------
   10. Tags / pills
   -------------------------------------------------------------------------- */
.cardiox-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: var(--wp--preset--color--bg-elevated);
  border: 1px solid var(--wp--preset--color--border-subtle);
  color: var(--wp--preset--color--text-secondary);
}
.cardiox-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }

/* --------------------------------------------------------------------------
   11. Bloc identité « À propos » — avatar OX + nom + sous-titre
   -------------------------------------------------------------------------- */
.cardiox-identity {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  margin-top: 0.8rem;
}
.cardiox-avatar {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--wp--preset--color--bg-elevated), var(--wp--preset--color--surface-card));
  border: 1px solid var(--wp--preset--color--border-subtle);
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--wp--preset--color--cyan-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.cardiox-identity__role {
  color: var(--wp--preset--color--text-secondary);
  font-size: 0.95rem;
  margin-top: 0.45rem;
  line-height: 1.5;
}
@media (max-width: 520px) {
  .cardiox-identity { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   12. Source card (Zotero) — référence bibliographique
   -------------------------------------------------------------------------- */
.cardiox-source {
  position: relative;
  display: flex;
  gap: 0.9rem;
  background: var(--wp--preset--color--surface-card);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 8px;
  padding: 1.1rem 1.2rem;
}
.cardiox-source__icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(251, 70, 76, 0.12);
  color: var(--wp--preset--color--red-data);
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-weight: 700;
}
.cardiox-source__title {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-weight: 600;
  color: var(--wp--preset--color--text-primary);
  margin: 0 0 0.25rem;
}
.cardiox-source__meta {
  font-size: 0.85rem;
  color: var(--wp--preset--color--text-secondary);
  margin: 0;
}
.cardiox-source__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 0.5rem;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 0.8rem;
}
.cardiox-source__wikilink { color: var(--wp--preset--color--purple-data); }

/* --------------------------------------------------------------------------
   13. Stat callout (grand chiffre mono + label)
   -------------------------------------------------------------------------- */
.cardiox-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
.cardiox-stat {
  background: var(--wp--preset--color--surface-card);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  padding: 1.5rem 1.2rem;
  text-align: center;
}
.cardiox-stat__num {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--cyan-accent);
}
.cardiox-stat__label {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 0.8rem;
  color: var(--wp--preset--color--text-secondary);
  margin-top: 0.55rem;
}

/* --------------------------------------------------------------------------
   14. Hero d'article — catégorie cyan / titre mono / chapô gris
   -------------------------------------------------------------------------- */
.cardiox-hero { padding-block: clamp(2rem, 6vw, 4rem); }
.cardiox-hero__cat {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--cyan-accent);
  font-weight: 600;
}
.cardiox-hero__title {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  color: var(--wp--preset--color--text-primary);
  margin: 0.6rem 0 0;
}
.cardiox-hero__lead {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--wp--preset--color--text-secondary);
  max-width: 60ch;
  margin-top: 0.8rem;
}

/* --------------------------------------------------------------------------
   15. Boutons (compléments au style theme.json)
   -------------------------------------------------------------------------- */
.wp-block-button__link {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s, border-color 0.15s, color 0.15s;
}
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--text-body);
  border: 1px solid var(--wp--preset--color--border-subtle);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--cyan-accent);
  color: var(--wp--preset--color--cyan-accent);
  background: rgba(67, 182, 214, 0.12);
}
.cardiox-badge-soon {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 0.72rem;
  color: var(--wp--preset--color--text-muted);
}

/* --------------------------------------------------------------------------
   16. Pied de page — colonnes denses, fond bg-darker
   -------------------------------------------------------------------------- */
.cardiox-footer {
  border-top: 1px solid var(--wp--preset--color--border-subtle);
  background: var(--wp--preset--color--bg-darker);
  padding-block: 2.5rem;
  margin-top: 3rem;
}
.cardiox-footer__grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: 2.2rem 1.5rem;
}
@media (max-width: 900px) { .cardiox-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cardiox-footer__grid { grid-template-columns: 1fr; } }
.cardiox-footer__title {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--text-secondary);
  margin: 0 0 0.95rem;
}
.cardiox-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.88rem;
}
.cardiox-footer a { color: var(--wp--preset--color--text-secondary); text-decoration: none; }
.cardiox-footer a:hover { color: var(--wp--preset--color--cyan-accent); }
.cardiox-footer__bottom {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--wp--preset--color--border-grid);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  justify-content: space-between;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 0.8rem;
  color: var(--wp--preset--color--text-muted);
}
.cardiox-disclaimer {
  font-size: 0.78rem;
  color: var(--wp--preset--color--text-muted);
  border: 1px dashed var(--wp--preset--color--border-subtle);
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
  max-width: 60ch;
  margin-top: 2.5rem;
  margin-inline: auto !important;   /* cadre centré sur la page, texte centré (pied de page, Applications, Plugins, Outils) */
  text-align: center;
}

/* --------------------------------------------------------------------------
   17. Bouton « haut de page »
   -------------------------------------------------------------------------- */
.cardiox-to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wp--preset--color--bg-elevated);
  border: 1px solid var(--wp--preset--color--border-subtle);
  color: var(--wp--preset--color--text-body);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s, border-color 0.2s, color 0.2s;
  z-index: 60;
}
.cardiox-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.cardiox-to-top:hover { border-color: var(--wp--preset--color--cyan-accent); color: var(--wp--preset--color--cyan-accent); }

/* --------------------------------------------------------------------------
   18. Grilles utilitaires
   -------------------------------------------------------------------------- */
.cardiox-grid-2 { display: grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cardiox-grid-3 { display: grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* WordPress ajoute une marge haute (blockGap) à tout bloc qui n'est pas le
   premier enfant. Dans une grille, cette marge décale les cellules vers le bas
   et casse l'alignement des lignes. On la neutralise sur toutes nos grilles :
   l'espacement est déjà assuré par `gap`. */
.cardiox-bento-grid > *,
.cardiox-grid-2 > *,
.cardiox-grid-3 > *,
.cardiox-stat-grid > *,
.cardiox-universes > * {
  margin-block: 0 !important;
}
.cardiox-section--alt {
  background: var(--wp--preset--color--bg-lighter);
  border-block: 1px solid var(--wp--preset--color--border-subtle);
}

/* ==========================================================================
   19. Page d'accueil (landing) — hero, univers, bento, ECG, bande CTA
   Porté depuis src/pages/index.astro.
   ========================================================================== */

/* — HERO — */
.cardiox-home-hero {
  padding-top: clamp(3.5rem, 9vw, 6.5rem);
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}
.cardiox-home-hero__inner {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
}
.cardiox-home-hero__logo {
  position: absolute;
  top: 50%;
  /* Ancré au bord gauche de la colonne de 1200px (comme l'Astro, où il vivait dans .container), pas au bord
     de la fenêtre : il reste collé au texte quand la fenêtre s'élargit, et jamais rogné (left ≥ 0). */
  left: max(0px, calc(50% - 600px - 2.5rem));
  transform: translateY(-50%);
  width: clamp(240px, 35vw, 440px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 58%, rgba(0,0,0,0.3) 82%, rgba(0,0,0,0.3) 100%);
  mask-image: linear-gradient(to right, #000 58%, rgba(0,0,0,0.3) 82%, rgba(0,0,0,0.3) 100%);
  animation: cardiox-logo-in 1s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes cardiox-logo-in {
  from { opacity: 0; transform: translateY(-50%) scale(0.92); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
.cardiox-home-hero__brand {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.cardiox-home-hero__brandname {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--text-primary);
  margin: 0;
}
.cardiox-home-hero__ox { color: var(--wp--preset--color--cyan-accent); }
.cardiox-home-hero__tagline {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--wp--preset--color--cyan-accent);
  margin: 0;
}
.cardiox-home-hero__byline {
  font-size: 0.85rem;
  color: var(--wp--preset--color--text-secondary);
  max-width: 52ch;
  line-height: 1.5;
  margin: 0.1rem 0 0;
}
.cardiox-home-hero__byline a {
  color: var(--wp--preset--color--text-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--wp--preset--color--border-subtle);
}
.cardiox-home-hero__byline a:hover {
  color: var(--wp--preset--color--cyan-accent);
  text-decoration-color: var(--wp--preset--color--cyan-accent);
}
.cardiox-home-hero__title {
  position: relative;
  z-index: 1;
  max-width: 24ch;   /* trois phrases, une par ligne (« Simplifier la clinique » = 22 car.) */
  line-height: 1.08;
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--text-primary);
  text-shadow: 0 2px 26px rgba(7,11,20,0.55);
  margin: 0;
}
.cardiox-home-hero__line { display: block; }
.cardiox-home-hero__line + .cardiox-home-hero__line { margin-top: 0.32em; }   /* aération entre les trois phrases (et non entre les lignes repliées d'une même phrase sur mobile) */
.cardiox-grad {
  background: linear-gradient(110deg, var(--wp--preset--color--cyan-accent), var(--wp--preset--color--cyan-hover));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cardiox-home-hero__lead {
  position: relative;
  z-index: 1;
  max-width: 60ch;
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--wp--preset--color--text-secondary);
  text-shadow: 0 1px 2px rgba(7,11,20,0.9);
}
.cardiox-home-hero__motto { display: block; margin-bottom: 0.45rem; font-family: var(--wp--preset--font-family--jetbrains-mono); font-weight: 600; font-size: 1.05em; letter-spacing: 0.01em; color: var(--wp--preset--color--text-primary); }   /* devise sur une ligne au-dessus du lead (voix de marque = mono) */
.cardiox-home-hero__cta {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.4rem;
}
.cardiox-home-hero__ecg { margin-top: clamp(2.5rem, 6vw, 4rem); line-height: 0; }
.cardiox-ecg {
  width: 100%;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cardiox-ecg path {
  stroke: var(--wp--preset--color--cyan-accent);
  filter: drop-shadow(0 0 6px rgba(67,182,214,0.45));
  stroke-dasharray: 3200;
  stroke-dashoffset: 3200;
  animation: cardiox-ecg-draw 2.6s ease-out forwards;
}
@keyframes cardiox-ecg-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cardiox-home-hero__logo { animation: none; opacity: 1; }
  .cardiox-ecg path { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 760px) {
  .cardiox-home-hero__logo {
    animation: none;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    opacity: 0.12;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* — UNIVERS (cartes « Par où commencer ») — */
.cardiox-universes {
  display: grid;
  /* auto-fit : 2 cartes = 2 colonnes, 3 cartes = 3 colonnes, puis repli naturel. */
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.6rem;
  margin-top: 2rem;
}
.cardiox-universe {
  --card-accent: var(--wp--preset--color--cyan-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--surface-card);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.3rem);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.25s;
}
.cardiox-universe--tools { --card-accent: var(--wp--preset--color--purple-data); }
.cardiox-universe--apps  { --card-accent: var(--wp--preset--color--green-success); }
.cardiox-universe::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--card-accent);
}
.cardiox-universe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 120% at 85% 0%, color-mix(in srgb, var(--card-accent) 16%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.cardiox-universe:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--card-accent) 55%, var(--wp--preset--color--border-subtle));
}
.cardiox-universe:hover::after { opacity: 1; }
.cardiox-universe__icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-accent) 14%, transparent);
  color: var(--card-accent);
  margin-bottom: 0.9rem;
}
.cardiox-universe__kicker {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--card-accent);
  font-weight: 600;
  margin: 0;
}
.cardiox-universe__title {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0.2rem 0 0;
  color: var(--wp--preset--color--text-primary);
}
.cardiox-universe__desc { color: var(--wp--preset--color--text-secondary); margin: 0.5rem 0 0; }
.cardiox-universe__items {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.cardiox-universe__items li {
  font-size: 0.9rem;
  color: var(--wp--preset--color--text-body);
  padding-left: 1.3rem;
  position: relative;
}
.cardiox-universe__items li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--card-accent);
}
/* Lien de la carte : invisible (demande d'Olivier, 15/10 — la carte entière est cliquable),
   mais présent pour le clavier et les lecteurs d'écran ; son ::after couvre toute la carte. */
.cardiox-universe__cta {
  display: block; height: 0; margin: 0; padding: 0; overflow: hidden;
  font-size: 0; line-height: 0; color: transparent; text-decoration: none;
}
.cardiox-universe > p:has(> .cardiox-universe__cta) { margin: 0 !important; }
.cardiox-universe:focus-within { outline: 2px solid var(--wp--preset--color--cyan-accent); outline-offset: 3px; }

/* Toute la carte est cliquable (comme sur Astro où la carte était un <a>) :
   le lien « Entrer → » est étiré sur la surface du conteneur via ::after.
   Le contenu reste fait de blocs natifs éditables. */
.cardiox-universe { cursor: pointer; }
.cardiox-universe__cta::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cardiox-universe::after { z-index: 0; }   /* halo de survol sous le lien étiré */

/* — BENTO (la méthode) — */
.cardiox-bento-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
@media (max-width: 720px) { .cardiox-bento-grid { grid-template-columns: 1fr; } }
.cardiox-bento {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 360px; /* hauteur fixe → toutes les cartes identiques */
  background: var(--wp--preset--color--surface-card);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 20px;
  padding: 1.7rem 1.7rem 0;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.25s;
}
.cardiox-bento:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--wp--preset--color--cyan-accent) 32%, var(--wp--preset--color--border-subtle));
}
.cardiox-bento h3 { font-family: var(--wp--preset--font-family--jetbrains-mono); font-size: 1.3rem; margin: 0; }
.cardiox-bento p { color: var(--wp--preset--color--text-secondary); margin: 0.5rem 0 0; font-size: 0.93rem; max-width: 42ch; }
.cardiox-bento__media {
  margin-top: auto;
  margin-inline: -0.2rem;
  border-radius: 12px 12px 0 0;
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-bottom: none;
  overflow: hidden;
  background: var(--wp--preset--color--bg-darker);
  height: 180px;
  flex: 0 0 180px; /* ni grow ni shrink → cadre toujours identique */
  translate: 0 1px;
}
.cardiox-bento__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Carte placeholder (Derniers articles non remplis) — hauteur uniforme. */
.cardiox-card--ph { min-height: 190px; }

/* — Bande CTA + ligne d'en-tête de section — */
.cardiox-row-between {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.cardiox-cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--wp--preset--color--surface-card);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 14px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}


/* ==========================================================================
   20. Pages migrées depuis Astro — hubs, pipeline, features, outils de base,
   plugins, applications, icônes de marque. Classes utilisées par le contenu
   des pages (éditable) : ne pas renommer sans migrer le contenu.
   ========================================================================== */
.cardiox-grid-4 { display: grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cardiox-grid-4 > *, .cardiox-steps > *, .cardiox-basetools > *, .cardiox-feature > * { margin-block: 0 !important; }

/* Carte de hub (icône + titre + description + lien) — réutilise .cardiox-card */
.cardiox-card__icon {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 4px;
  background: color-mix(in srgb, var(--card-accent, var(--wp--preset--color--cyan-accent)) 14%, transparent);
  color: var(--card-accent, var(--wp--preset--color--cyan-accent));
  margin-bottom: 1rem;
}
.cardiox-card__icon svg { width: 24px; height: 24px; }
.cardiox-card--cyan   { --card-accent: var(--wp--preset--color--cyan-accent); }
.cardiox-card--purple { --card-accent: var(--wp--preset--color--purple-data); }
.cardiox-card--green  { --card-accent: var(--wp--preset--color--green-success); }
.cardiox-card--teal   { --card-accent: var(--wp--preset--color--cyan-hover); }
.cardiox-card__more {
  margin-top: 1rem; font-family: var(--wp--preset--font-family--jetbrains-mono);
  font-size: 0.85rem; font-weight: 600; color: var(--card-accent, var(--wp--preset--color--cyan-accent));
  text-decoration: none; display: inline-flex; gap: 0.4rem; align-items: center;
}
.cardiox-card h3 .cardiox-badge-soon { margin-left: 0.5rem; vertical-align: middle; }
.cardiox-card:has(> * > .cardiox-card__more) { cursor: pointer; }
.cardiox-card__more::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Pipeline en étapes numérotées */
.cardiox-steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; }
.cardiox-step {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: var(--wp--preset--color--surface-card); border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 12px; padding: 1.1rem;
}
.cardiox-step__n { font-family: var(--wp--preset--font-family--jetbrains-mono); font-weight: 700; color: var(--wp--preset--color--cyan-accent); font-size: 0.95rem; }
.cardiox-step h3 { font-size: 1.05rem; margin: 0; }
.cardiox-step p { font-size: 0.88rem; color: var(--wp--preset--color--text-secondary); margin: 0.3rem 0 0; }

/* Cadre « capture d'écran » */
.cardiox-shot {
  border: 1px solid var(--wp--preset--color--border-subtle); border-radius: 12px; overflow: hidden;
  background: var(--wp--preset--color--bg-darker); box-shadow: 0 18px 50px -20px rgba(0,0,0,0.8); margin: 0;
}
.cardiox-shot__bar { display: flex; gap: 0.4rem; padding: 0.6rem 0.8rem; background: var(--wp--preset--color--surface-card); border-bottom: 1px solid var(--wp--preset--color--border-subtle); }
.cardiox-shot__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wp--preset--color--border-subtle); }
.cardiox-shot img, .cardiox-shot figure { width: 100%; display: block; margin: 0; }

/* Feature : texte + capture, côte à côte */
.cardiox-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; }
/* --rev : la capture est première dans le DOM → à gauche sur bureau (comme Astro), et reste première sur mobile. */
@media (max-width: 760px) { .cardiox-feature { grid-template-columns: 1fr; } }
.cardiox-band-darker { background: var(--wp--preset--color--bg-darker); border-block: 1px solid var(--wp--preset--color--border-subtle); }

/* Outils de base (Obsidian / Zotero) */
.cardiox-basetools { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .cardiox-basetools { grid-template-columns: 1fr; } }
.cardiox-basetool {
  --app: var(--wp--preset--color--cyan-accent);
  display: flex; gap: 1rem; align-items: flex-start; text-decoration: none; color: inherit;
  background: var(--wp--preset--color--surface-card); border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 12px; padding: 1.2rem 1.3rem; transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), border-color 0.2s;
}
.cardiox-basetool--obsidian { --app: #a882ff; }
.cardiox-basetool--zotero   { --app: #cc2936; }
.cardiox-basetool:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--app) 45%, var(--wp--preset--color--border-subtle)); }
.cardiox-basetool__icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--app) 14%, transparent); }
.cardiox-basetool__head { display: flex; align-items: center; gap: 0.6rem; }
.cardiox-basetool__name { font-family: var(--wp--preset--font-family--jetbrains-mono); font-weight: 700; color: var(--wp--preset--color--text-primary); font-size: 1.1rem; }
.cardiox-basetool__req { font-family: var(--wp--preset--font-family--jetbrains-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app); border: 1px solid color-mix(in srgb, var(--app) 50%, transparent); border-radius: 999px; padding: 0.1rem 0.5rem; }
.cardiox-basetool p { color: var(--wp--preset--color--text-secondary); font-size: 0.9rem; margin: 0.35rem 0 0; }
.cardiox-basetool__link { font-family: var(--wp--preset--font-family--jetbrains-mono); color: var(--app); font-weight: 600; font-size: 0.82rem; margin-top: 0.65rem; display: inline-block; }

/* Icône de marque recolorable (Obsidian / Zotero) via mask */
.cardiox-brand-icon { display: inline-block; width: var(--icon-size, 20px); height: var(--icon-size, 20px); background-color: var(--icon-color, currentColor); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; flex: none; }
.cardiox-brand-icon--obsidian { --icon: url('/wp-content/themes/cardiox-theme/assets/images/obsidian.svg'); --icon-color: #a882ff; }
.cardiox-brand-icon--zotero   { --icon: url('/wp-content/themes/cardiox-theme/assets/images/zotero.svg');   --icon-color: #cc2936; }

/* Carte plugin */
.cardiox-plugin {
  --app-color: #a882ff; position: relative; display: flex; flex-direction: column; gap: 0.7rem;
  background: var(--wp--preset--color--surface-card); border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: 14px; padding: 1.5rem; overflow: hidden; transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), border-color 0.2s;
}
.cardiox-plugin--zotero { --app-color: #cc2936; }
.cardiox-plugin::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--app-color); }
.cardiox-plugin:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--app-color) 45%, var(--wp--preset--color--border-subtle)); }
.cardiox-plugin__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cardiox-plugin__app { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--wp--preset--font-family--jetbrains-mono); font-size: 0.82rem; font-weight: 600; color: var(--wp--preset--color--text-body); }
.cardiox-plugin__status { font-family: var(--wp--preset--font-family--jetbrains-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: 0.15rem 0.55rem; white-space: nowrap; }
.cardiox-plugin__status--beta { color: var(--wp--preset--color--orange-data); }
.cardiox-plugin__status--available { color: var(--wp--preset--color--green-success); }
.cardiox-plugin__status--soon { color: var(--wp--preset--color--text-secondary); }
.cardiox-plugin h3 { font-size: 1.2rem; margin: 0; }
.cardiox-plugin > p { color: var(--wp--preset--color--text-secondary); font-size: 0.92rem; flex: 1; margin: 0; }
.cardiox-plugin__foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 0.4rem; flex-wrap: wrap; }
.cardiox-btn-disabled { font-family: var(--wp--preset--font-family--jetbrains-mono); font-size: 0.82rem; padding: 0.45rem 0.8rem; border-radius: 4px; background: var(--wp--preset--color--bg-elevated); color: var(--wp--preset--color--text-secondary); opacity: 0.7; }

/* Carte application (atlas ESV…) */
.cardiox-app { display: grid; grid-template-columns: 96px 1fr; gap: 1.5rem; align-items: start; }
.cardiox-app__icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); margin: 0; }
.cardiox-app__icon img { border-radius: 22px; }
.cardiox-app h2 { margin: 0.2rem 0 0.6rem; }
.cardiox-app__note { color: var(--wp--preset--color--text-secondary); font-size: 0.92rem; }
.cardiox-app__access { font-family: var(--wp--preset--font-family--jetbrains-mono); font-size: 0.78rem; color: var(--wp--preset--color--text-muted); }
@media (max-width: 560px) { .cardiox-app { grid-template-columns: 1fr; } }

/* Décor de hero (image + ECG) — non éditable, posé en bloc HTML dans la page */
.cardiox-hero-decor { position: relative; }

/* Lead réutilisable dans le contenu — aligné à gauche malgré le centrage automatique
   des éléments à largeur limitée dans une mise en page « contrainte » de WordPress. */
.cardiox-lead { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--wp--preset--color--text-secondary); max-width: 62ch; margin-inline: 0 !important; }

/* Hero éditable : neutralise les marges automatiques de WordPress entre blocs. */
.cardiox-home-hero__inner > * { margin-block: 0 !important; }
.cardiox-home-hero__inner > .cardiox-home-hero__lead { margin-top: 0.4rem !important; }