/* ============================================================
   VivAccess — Compatibilité blocs Gutenberg (patterns)
   Fait correspondre le markup des blocs core (boutons, images,
   paragraphes) aux styles existants du design (base/theme.css).
   Chargé en front ET dans l'éditeur. Aucune modification des
   styles d'origine : uniquement des équivalences additives.
   ============================================================ */

/* Le blockGap layout de core est émis en :where() (spécificité nulle) :
   toute marge définie par le thème le surclasse. Aucune neutralisation
   globale — elle écraserait les marges du design. */

/* ---------- Boutons : réplique de .btn sur .wp-block-button__link ----------
   Les modificateurs (btn--primary, btn--lg…) sont posés sur le WRAPPER
   .wp-block-button : on neutralise leurs effets visuels sur le wrapper,
   seuls les équivalents sur le lien interne comptent. */
.wp-block-button[class*="btn--"] { background: none; border: none; padding: 0; min-height: 0; }
.wp-block-button[class*="btn--"]:hover { background: none; transform: none; box-shadow: none; }
.wp-block-button > .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: 0.01em;
  padding: 13px 24px; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; transition: all var(--dur) var(--ease);
  white-space: nowrap; cursor: pointer; min-height: 46px;
  background: none; color: inherit; text-decoration: none;
}
.wp-block-button.btn--primary > .wp-block-button__link { background: var(--violet); color: var(--blanc); border-color: var(--violet); }
.wp-block-button.btn--primary > .wp-block-button__link:hover { background: var(--violet-deep); border-color: var(--violet-deep); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(96,0,217,0.28); }
.wp-block-button.btn--ghost > .wp-block-button__link { background: transparent; color: var(--violet); border-color: var(--violet); }
.wp-block-button.btn--ghost > .wp-block-button__link:hover { background: var(--violet); color: var(--blanc); }
.wp-block-button.btn--dark > .wp-block-button__link { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.wp-block-button.btn--dark > .wp-block-button__link:hover { background: #000; transform: translateY(-2px); }
.wp-block-button.btn--lg > .wp-block-button__link { padding: 16px 30px; font-size: 16px; min-height: 54px; }
.wp-block-button.btn--sm > .wp-block-button__link { padding: 9px 18px; font-size: 14px; min-height: 40px; }
.on-dark .wp-block-button.btn--primary > .wp-block-button__link { background: #fff; color: var(--violet); border-color: #fff; }
.on-dark .wp-block-button.btn--primary > .wp-block-button__link:hover { background: var(--noir); color: #fff; border-color: var(--noir); }
.on-dark .wp-block-button.btn--ghost > .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,0.55); }
.on-dark .wp-block-button.btn--ghost > .wp-block-button__link:hover { background: #fff; color: var(--violet); border-color: #fff; }
.wp-block-buttons.hero__cta { gap: 14px; }
.wp-block-buttons.cta-final__actions { flex-direction: column; gap: 12px; align-items: flex-start; }

/* ---------- Images : les figures core n'ajoutent pas de marge dans
   les sections du design (restaurée dans le corps des articles). ---------- */
.viv-block-page .wp-block-image { margin: 0; }
.article-body .wp-block-image { margin: 0 0 1.5em; }
/* La figure devient le calque photo : positionnée z0 sous le voile
   ::after (z1) — ordre d'empilement déterministe, l'img la remplit. */
.engage-card > .wp-block-image { position: absolute; inset: 0; z-index: 0; }
p.engage-card__chip { margin: 0 0 16px; }

/* ---------- Lien fléché en paragraphe (remplace <a class="link-arrow">) ---------- */
p.link-arrow { margin: 0; }
p.link-arrow a { display: inline-flex; align-items: center; gap: inherit; }

/* ---------- Héros : équivalents des span/div remplacés par des <p>.
   `.hero p` (taille 19px, max-width 52ch) surclasserait ces éléments :
   on rétablit leurs métriques d'origine avec la spécificité nécessaire. ---------- */
.hero p.hero__tag { font-size: 12px; margin: 0; max-width: none; color: var(--violet); }
.hero p.hero__floating { font-size: 14px; line-height: 1.4; margin: 0; max-width: 210px; color: var(--noir); }

/* ---------- Bandeau confiance : références en paragraphes ---------- */
.trust__logos > p {
  font-size: 19px; font-weight: 700; color: var(--ink-700);
  letter-spacing: -0.01em; white-space: nowrap; scroll-snap-align: start; margin: 0;
}
p.trust__label {
  font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--violet); flex-shrink: 0; margin: 0;
}

/* ---------- Impact : chiffres en paragraphes (remplace strong+span nus) ---------- */
.impact__num > p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.92); }
.impact__num > p + p { margin-top: 12px; }

/* ---------- Signature mission : nom/rôle en paragraphe ---------- */
.mission__sig > p, .mission__sig .wp-block-group > p { margin: 0; font-size: 14px; color: var(--ink-500); }
.mission__sig figure.mission__sig-avatar { flex-shrink: 0; }

/* ---------- Bandeaux promo : corps en paragraphe ---------- */
.promo-banner__body > p { margin: 0; font-size: 15px; color: var(--ink-700); }
p.promo-banner__brand { margin: 0; }