/* =============================================================================
   Cywiz VR — cywiz-base.css (jetons, reset, typo — chaîne vitrine + shell)
   -----------------------------------------------------------------------------
   Ordre volontaire :
   1. Jetons (:root) + media variables titres
   2. Reset (*, html, body)
   3. Typographie (h1–h6, paragraphes, classes .display-*, .heading-*, .body-large)
   4. Pages programme (formation / location) — blocs dédiés
   5. Boutons & états
   6. Shell app, navigation, hero, sections, cartes, tarifs, footer…
   7. Modales, formulaires, validations
   8. Composants (secteurs, flip, benefits…)
   9. Utilitaires & surcharges Bootstrap / tableaux
   10. Pages spécifiques (infos, blog, FAQ, partenaires…)
   11. Media queries regroupées là où elles étaient (cascade inchangée)
   ============================================================================= */

/* --- 1. Jetons (:root) --- */

:root {
  /* text */
  --text-heading: #f7f7f7;
  --text-primary: #EFEFEF;
  --text-secondary: #D1D5DC;
  --text-muted: #6B7280;
  /* colors boutons et autres*/

  --primary-cyan: #8fd8ff;
  --color-cyan-light: #97d0ff;
  /* Cyan « pastel » (texte, badges) et cyan « ciel » (dégradés, bordures, liens) */
  --color-cyan-pastel: #9eeaff;
  --color-cyan-sky: #7dd8ff;
  /* Liens texte inline uniquement (plus clair que l’accent UI) */
  --color-link: #b6eefd;
  --color-link-hover: #d4f6ff;
  --color-teal: #28d5cc;
  --accent-red: #a91f2f;
  --color-purple: #d8d2ff;
  --color-purple-hover: #b4aaff;
  --card-bg: #030304;
  --main-bg-alt: #000000;
  --main-bg: #030304;
 
  --border-subtle: rgba(255, 255, 255, 0.55);
  --bs-body-bg: var(--main-bg);
  --bs-secondary-bg: rgba(255, 255, 255, 0.08);
  --bs-heading-color: var(--text-primary);
  --bs-success-bg-subtle: var(--color-teal);

  /* Centralized color tokens (phase 1: declarations) */
  --color-bg-deep: #0b0f14;
  --color-card-surface: rgba(26, 31, 46, 0.55);
  --navbar-nav-font-size: 1.15rem;
  /* Sous-menus cascade : un cran sous la barre principale, un peu plus grisés */
  --navbar-dropdown-font-size: calc(var(--navbar-nav-font-size) - 0.1rem);
  --navbar-dropdown-color: color-mix(in srgb, var(--text-secondary) 90%, #000000);

  /* Chrome de barre (vitrine = référence). Espace / dashboard réutilisent ces jetons. */
  --nav-chrome-padding-y: 0.5rem;
  --nav-chrome-inner-max: 90%;
  --nav-chrome-inner-padding-x: 1rem;
  --nav-brand-logo-size: 50px;
  --nav-brand-wordmark-width: 107px;
  --nav-brand-wordmark-height: 30px;
  --nav-brand-gap: 0.5rem;
  --nav-brand-filter: brightness(188%);
  --nav-link-padding-y: 0.5rem;
  --nav-link-padding-x: 1rem;

  /* Titres : échelle cohérente H1 > H2 > H3 (H2/H3 −10 % vs échelle Bootstrap d’origine) */
  --site-h1-font-size: calc(1.375rem + 1.5vw);
  --site-h2-font-size: calc((1.325rem + 0.9vw) * 0.9);
  --site-h3-font-size: calc((1.3rem + 0.6vw) * 0.9);
  --site-h4-font-size: calc(1.275rem + 0.3vw);
  --site-h5-font-size: 1.25rem;
  --site-h6-font-size: 1rem;

  /* Corps de texte (échelle unique) */
  --site-body-font-size: 1rem;
  --site-body-lg-font-size: 1.0625rem;
  --site-body-sm-font-size: 0.95rem;
  --site-caption-font-size: 0.9rem;

  --site-font-weight-heading: 400;
  --site-font-weight-display: 300;
  --site-font-weight-body: 300;
  /* Gouttière colonnes côte à côte (texte + CTA / cards) — hors accueil */
  --site-col-gap: 2.75rem;
  --site-col-gap-sm: 1.5rem;

  /* Trait court sous les titres (H2 de section, footer, FAQ, etc.) */
  --site-h2-rule-width: 30px;
  --site-h2-rule-color: color-mix(in srgb, var(--primary-cyan) 50%, transparent);

  /* Trait fin entre sections (séparateur de blocs) */
  --site-section-rule-width: min(360px, 70vw);
  --site-section-rule-color-start: rgba(151, 208, 255, 0.35);
  --site-section-rule-color-end: rgba(255, 255, 255, 0.03);
  --site-section-rule-margin-y: 2rem;
}

@media (min-width: 1200px) {
  :root {
    --site-h1-font-size: 2.5rem;
    --site-h2-font-size: 1.8rem;
    --site-h3-font-size: 1.575rem;
    --site-h4-font-size: 1.5rem;
  }
}

/* --- 2. Reset & base --- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--main-bg);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.6;
  letter-spacing: 0;
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* Surfaces de page : fond unique (body). Pas de bandeau section. */
.benefits-section,
.demo-section,
.cta-section,
.programme-hero,
.faq-hero,
body.site-home .home-section.benefits-section,
body.site-home .home-section.demo-section,
body.site-home .home-section.cta-section {
  background: transparent;
}

/* Titres : une définition base (famille / poids / couleur) + tailles via --site-h*-font-size */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Changa', sans-serif;
  letter-spacing: -0.02em;
  font-weight: var(--site-font-weight-heading);
  color: var(--text-heading) !important;
  -webkit-text-fill-color: var(--text-heading);
  background: none;
  background-image: none;
}

h1, .h1 { font-size: var(--site-h1-font-size); }
h2, .h2 { font-size: var(--site-h2-font-size); }
h3, .h3 { font-size: var(--site-h3-font-size); }
h4, .h4 { font-size: var(--site-h4-font-size); }
h5, .h5 { font-size: var(--site-h5-font-size); }
h6, .h6 { font-size: var(--site-h6-font-size); }

/* Classes titre hors balises h* — même reset couleur (pas de cyan / pastels / dégradés) */
.display-large,
.display-medium,
.heading-1,
.heading-2,
.site-page-h1,
.site-section-h2,
.pl-hero-title,
.site-closing-title,
.ia-trust-title,
.cta-title,
.home-closing-title,
.pricing-refonte-title,
.faq-category-title,
.blog-card-title,
.blog-title-bandeau h1 {
  color: var(--text-heading) !important;
  -webkit-text-fill-color: var(--text-heading);
  background: none;
  background-image: none;
}

h1 .text-pastel-rv,
h2 .text-pastel-rv,
h3 .text-pastel-rv,
h1 .text-cyber-primary,
h2 .text-cyber-primary,
h3 .text-cyber-primary,
h1 .text-cyber-light-purple,
h2 .text-cyber-light-purple,
h3 .text-cyber-light-purple,
.display-large .text-pastel-rv,
.display-large .text-cyber-primary,
.site-page-h1 .text-pastel-rv,
.pl-hero-title .text-pastel-rv,
.site-closing-title-accent,
.cta-title .text-pastel-rv {
  color: var(--text-heading) !important;
  -webkit-text-fill-color: var(--text-heading) !important;
  background: none !important;
  background-image: none !important;
}


/* -------------------------------------------------------------------------
   Filet cyan court — UNIQUEMENT sous H2 de section (.site-section-h2)
   et H3 de colonne persona (.approche-benefice-title).
   Pas sous CTA / closing, footer, cards, timelines, offres.
   Pas de long séparateur en plus du filet de titre.
   ------------------------------------------------------------------------- */
.site-section-h2 {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding-bottom: 1rem;
  overflow-wrap: break-word;
}

.site-section-h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  transform: none;
  width: var(--site-h2-rule-width, 30px);
  height: 1px;
  background: var(--site-h2-rule-color, var(--primary-cyan));
}

.approche-benefice-title {
  position: relative;
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
}

.approche-benefice-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.45rem;
  width: var(--site-h2-rule-width, 30px);
  height: 1px;
  background: var(--site-h2-rule-color);
}

/* Accroche éditoriale — double filet cyan sur toute la hauteur, italique, 2e ligne cyan */
.site-punch {
  position: relative;
  width: fit-content;
  max-width: 42rem;
  margin: 2rem 0 2.25rem;
  padding: 0.1rem 0 0.1rem 1.2rem;
  border: 0;
  background: none;
}

.site-punch::before,
.site-punch::after {
  content: "";
  position: absolute;
  top: 0.12rem;
  bottom: 0.12rem;
  width: 1.5px;
  border-radius: 1px;
  background: var(--primary-cyan);
  transform: none;
}

.site-punch::before {
  left: 0;
}

.site-punch::after {
  left: 5px;
}

.site-punch-text,
.site-punch > p {
  margin: 0;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: var(--site-font-weight-body, 300);
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-heading);
}

.site-punch-line {
  display: block;
}

.site-punch-line + .site-punch-line {
  margin-top: 0.2rem;
}

.site-punch-line--hit {
  color: var(--primary-cyan);
}

/* Sécurité : aucun trait sur cards / sous-titres internes */
h2.display-large:not(.site-section-h2)::after,
h2.site-closing-title:not(.site-section-h2)::after,
h2.ia-trust-title:not(.site-section-h2)::after,
.home-compare-head h3::after,
.home-feature-card h3::after,
.home-ai-card-title::after,
.flip-back h3::after,
.benefits-section .cyber-card h3::after,
.pricing-refonte-card h2::after,
.pricing-refonte-card h3::after,
.pf-offer-card h2::after,
.pf-offer-card h3::after,
.cyber-card h2:not(.site-section-h2)::after,
.cyber-card h3::after,
.programme-card-title::after,
.pf-timeline-title::after,
.pf-offer-title::after,
.cas-usage-item h3::after,
.approche-compare-title::after,
.approche-resultats-title::after,
.footer h4::after {
  content: none !important;
  display: none !important;
}

/* Titres non alignés à gauche (toutes pages) : bloc + trait centrés */
.text-center .site-section-h2,
.site-section-h2.text-center,
.site-closing--center .site-section-h2,
body.site-home .home-closing-title.site-section-h2,
body.site-home .cta-title.site-section-h2,
body.site-home .home-closing .site-section-h2 {
  margin-left: auto;
  margin-right: auto;
}

.text-center .site-section-h2::after,
.site-section-h2.text-center::after,
.site-closing--center .site-section-h2::after,
body.site-home .home-closing-title.site-section-h2::after,
body.site-home .cta-title.site-section-h2::after,
body.site-home .home-closing .site-section-h2::after {
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 575.98px) {
  .site-section-h2 {
    padding-bottom: 0.75rem;
  }
}

/* -------------------------------------------------------------------------
   Séparateur de sections — trait fin de référence (toutes pages)
   Usage : <x-site.section-rule /> ou .site-section-rule
   ------------------------------------------------------------------------- */
.site-section-rule {
  display: block;
  height: 1px;
  width: var(--site-section-rule-width, min(360px, 70vw));
  max-width: 100%;
  margin-block: var(--site-section-rule-margin-y, 2rem);
  margin-inline: auto;
  border: 0;
  background: linear-gradient(
    to right,
    var(--site-section-rule-color-start, rgba(151, 208, 255, 0.35)),
    var(--site-section-rule-color-end, rgba(255, 255, 255, 0.03))
  );
}

/* Section badges et titres de catégories */
.section-badge,
.faq-category-title {
  letter-spacing: -0.02em;
}

/* Titres du footer */
.footer h4,
.footer h5,
.footer .heading-2 {
  letter-spacing: -0.02em;
}

/* Dropdown menu items dans la navbar */
.dropdown-menu .dropdown-item {
  letter-spacing: -0.02em;
}

/* Bloc marque partagé (vitrine, espace, erreurs…). Dashboard duplique (CSS isolé). */
.cywiz-brand {
  display: flex;
  align-items: center;
  padding: 0;
  text-decoration: none;
}
.cywiz-brand:hover {
  text-decoration: none;
}
.cywiz-brand__logo {
  width: var(--nav-brand-logo-size);
  height: var(--nav-brand-logo-size);
  flex-shrink: 0;
  object-fit: contain;
  filter: var(--nav-brand-filter);
}
.cywiz-brand__text {
  width: var(--nav-brand-wordmark-width);
  height: var(--nav-brand-wordmark-height);
  margin-left: var(--nav-brand-gap);
  flex-shrink: 0;
  object-fit: contain;
}

p {
  letter-spacing: 0;
  font-weight: var(--site-font-weight-body);
  font-size: var(--site-body-font-size);
  color: var(--text-primary);
}

/* Typography — classes alignées sur les tokens --site-h* / --site-body-* */

.display-large {
  font-size: var(--site-h1-font-size);
  font-weight: var(--site-font-weight-display);
  line-height: 1.2;
  margin-bottom: 4rem;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

/* H2/H3 avec .display-large : garder le niveau sémantique, pas la taille H1 */
h2.display-large,
h2.display-medium {
  font-size: var(--site-h2-font-size);
  font-weight: var(--site-font-weight-display);
  line-height: 1.25;
  margin-bottom: 1.25rem;
}

h3.display-large {
  font-size: var(--site-h3-font-size);
  font-weight: var(--site-font-weight-display);
  line-height: 1.3;
  margin-bottom: 1rem;
}

.display-medium {
  font-size: var(--site-h2-font-size);
  font-weight: var(--site-font-weight-display);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

.heading-1 {
  font-size: var(--site-h3-font-size);
  font-weight: var(--site-font-weight-display);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

.heading-2 {
  font-size: var(--site-h4-font-size);
  font-weight: var(--site-font-weight-display);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

.body-large {
  font-size: var(--site-body-lg-font-size);
  font-weight: var(--site-font-weight-body);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--text-primary);
}

.body-sm {
  font-size: var(--site-body-sm-font-size);
  font-weight: var(--site-font-weight-body);
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Accents de titre : même couleur que les titres (plus de dégradé / cyan) */
.text-pastel-rv {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: var(--text-heading);
  color: var(--text-heading);
}

/* -------------------------------------------------------------------------
   Liens texte inline — couleur dédiée (≠ boutons / bordures / icônes)
   ------------------------------------------------------------------------- */
a.site-link,
p a:not(.btn):not([class*="btn-"]):not(.nav-link):not(.dropdown-item):not(.page-link):not(.text-pastel-rv):not(.site-closing-home):not(.footer-publisher-link),
li a:not(.btn):not([class*="btn-"]):not(.nav-link):not(.dropdown-item):not(.page-link):not(.text-pastel-rv):not(.site-closing-home),
td a:not(.btn):not([class*="btn-"]):not(.site-closing-home),
th a:not(.btn):not([class*="btn-"]):not(.site-closing-home),
.pf-info-follow a,
.text-secondary a:not(.btn):not([class*="btn-"]):not(.text-pastel-rv):not(.site-closing-home),
.body-large a:not(.btn):not([class*="btn-"]):not(.text-pastel-rv):not(.site-closing-home),
.cyber-card a:not(.btn):not([class*="btn-"]):not(.text-pastel-rv):not(.site-closing-home),
.faq-section a:not(.btn):not([class*="btn-"]):not(.site-closing-home),
.benefits-section a:not(.btn):not([class*="btn-"]):not(.text-pastel-rv):not(.nav-link):not(.site-closing-home),
.programme-hero a:not(.btn):not([class*="btn-"]):not(.text-pastel-rv):not(.site-closing-home),
.modal-compact-form .form-check-label a,
.formation-comparaison-link {
  color: var(--color-link);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a.site-link:hover,
a.site-link:focus,
p a:not(.btn):not([class*="btn-"]):not(.nav-link):not(.dropdown-item):not(.page-link):not(.text-pastel-rv):not(.site-closing-home):not(.footer-publisher-link):hover,
p a:not(.btn):not([class*="btn-"]):not(.nav-link):not(.dropdown-item):not(.page-link):not(.text-pastel-rv):not(.site-closing-home):not(.footer-publisher-link):focus,
li a:not(.btn):not([class*="btn-"]):not(.nav-link):not(.dropdown-item):not(.page-link):not(.text-pastel-rv):not(.site-closing-home):hover,
li a:not(.btn):not([class*="btn-"]):not(.nav-link):not(.dropdown-item):not(.page-link):not(.text-pastel-rv):not(.site-closing-home):focus,
td a:not(.btn):not([class*="btn-"]):not(.site-closing-home):hover,
td a:not(.btn):not([class*="btn-"]):not(.site-closing-home):focus,
.pf-info-follow a:hover,
.pf-info-follow a:focus,
.text-secondary a:not(.btn):not([class*="btn-"]):not(.text-pastel-rv):not(.site-closing-home):hover,
.body-large a:not(.btn):not([class*="btn-"]):not(.text-pastel-rv):not(.site-closing-home):hover,
.cyber-card a:not(.btn):not([class*="btn-"]):not(.text-pastel-rv):not(.site-closing-home):hover,
.faq-section a:not(.btn):not([class*="btn-"]):not(.site-closing-home):hover,
.benefits-section a:not(.btn):not([class*="btn-"]):not(.text-pastel-rv):not(.nav-link):not(.site-closing-home):hover,
.programme-hero a:not(.btn):not([class*="btn-"]):not(.text-pastel-rv):not(.site-closing-home):hover,
.modal-compact-form .form-check-label a:hover,
.formation-comparaison-link:hover,
.formation-comparaison-link:focus {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(182, 238, 253, 0.65);
}

a.site-link:focus-visible,
.pf-info-follow a:focus-visible,
.formation-comparaison-link:focus-visible {
  outline: 1px solid rgba(182, 238, 253, 0.55);
  outline-offset: 2px;
  border-radius: 2px;
}

/* -------------------------------------------------------------------------
   H1 pages site (hors accueil) — blanc + un seul accent cyan
   ------------------------------------------------------------------------- */
body:not(.site-home) h1.display-large,
body:not(.site-home) h1.pl-hero-title,
body:not(.site-home) h1.site-page-h1 {
  font-weight: var(--site-font-weight-display);
  line-height: 1.15;
  max-width: 100%;
  margin-bottom: 0.85rem;
}

/* Mot / groupe d’accent dans le H1 — aligné sur la couleur titre */
body:not(.site-home) h1 .site-h1-accent,
body.site-home h1 .site-h1-accent,
h1 .site-h1-accent,
h2 .site-h1-accent,
h3 .site-h1-accent,
.site-h1-accent {
  color: var(--text-heading);
  -webkit-text-fill-color: var(--text-heading);
  background: none;
}

/* Mot d’accent (mode / highlight) : 2e ligne maîtrisée */
body:not(.site-home) h1.display-large > .text-pastel-rv,
body:not(.site-home) h1.pl-hero-title > .text-pastel-rv,
body:not(.site-home) h1.site-page-h1 > .text-pastel-rv {
  display: block;
  margin-top: 0.12rem;
  line-height: 1.15;
}

/* Pages programme : 2e ligne H1 (bénéfice), taille réduite */
body:not(.site-home) .programme-page h1.pl-hero-title > .text-pastel-rv {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8em;
  line-height: 1.2;
  font-weight: var(--site-font-weight-display, 400);
}

@media (max-width: 991.98px) {
  body:not(.site-home) h1.display-large,
  body:not(.site-home) h1.pl-hero-title,
  body:not(.site-home) h1.site-page-h1 {
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  body:not(.site-home) h1.display-large,
  body:not(.site-home) h1.pl-hero-title,
  body:not(.site-home) h1.site-page-h1 {
    line-height: 1.18;
  }
}

body:not(.site-home) h1.display-large.text-center,
body:not(.site-home) h1.site-page-h1.text-center {
  max-width: min(22em, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------------------------------
   Accroche sous H1 (hors accueil) — gras, cyan doux, collée au H1
   ------------------------------------------------------------------------- */
body:not(.site-home) .site-kicker + h1,
body:not(.site-home) .ia-kicker + h1,
body:not(.site-home) .approche-kicker + h1,
body:not(.site-home) .section-badge + h1 {
  margin-top: 0 !important;
}

body:not(.site-home) h1.display-large:has(+ .site-page-sub),
body:not(.site-home) h1.display-large:has(+ .pl-hero-sub),
body:not(.site-home) h1.pl-hero-title:has(+ .site-page-sub),
body:not(.site-home) h1.pl-hero-title:has(+ .pl-hero-sub),
body:not(.site-home) h1.site-page-h1:has(+ .site-page-sub),
body:not(.site-home) h1.site-page-h1:has(+ .pl-hero-sub) {
  margin-bottom: 0.3rem !important;
}

body:not(.site-home) .site-page-sub,
body:not(.site-home) .pl-hero-sub,
body:not(.site-home) p.lead.site-page-sub {
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.18rem);
  line-height: 1.45;
  font-weight: var(--site-font-weight-body, 300);
  letter-spacing: -0.01em;
  /* Cyan charte, proche du H1 mais plus doux / moins saturé */
  color: color-mix(in srgb, var(--primary-cyan) 82%, #c8d2d8 18%) !important;
  max-width: 42rem;
  margin-top: 0;
  margin-bottom: 1.45rem !important;
  -webkit-text-fill-color: unset;
  background: none;
}

body:not(.site-home) .site-page-sub strong,
body:not(.site-home) .site-page-sub b,
body:not(.site-home) .pl-hero-sub strong,
body:not(.site-home) .pl-hero-sub b {
  font-weight: inherit;
}

body:not(.site-home) .site-page-sub.text-center,
body:not(.site-home) .pl-hero-sub.text-center {
  max-width: min(42rem, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* Badges centrés (héros text-center) */
body:not(.site-home) .text-center > .site-kicker,
body:not(.site-home) .text-center > .ia-kicker,
body:not(.site-home) .hero-content > .site-kicker,
body:not(.site-home) .blog-hero-section .site-kicker {
  justify-content: center;
}

/* Paragraphe de développement : gris, détaché de l’accroche */
body:not(.site-home) .site-page-sub + p.text-secondary,
body:not(.site-home) .pl-hero-sub + p.pl-hero-text,
body:not(.site-home) .pl-hero-sub + p.text-secondary,
body:not(.site-home) .site-page-sub + p.about-lead {
  font-size: var(--site-body-sm-font-size, 0.95rem);
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 0;
}

/* Boutons secondaires : outline fin 1px (hors accueil / blog-edit) */
body:not(.site-home):not(.blog-edit-page) .btn-cyber-secondary {
  border: 1px solid color-mix(in srgb, var(--text-primary) 32%, transparent) !important;
  border-width: 1px !important;
  box-shadow: none !important;
  background: transparent;
}

/* -------------------------------------------------------------------------
   Badge / kicker catégorie (hors accueil) — icône + majuscules cyan, sans cadre
   ------------------------------------------------------------------------- */
body:not(.site-home) .site-kicker,
body:not(.site-home) .ia-kicker,
body:not(.site-home) .approche-kicker,
body:not(.site-home) .section-badge,
body:not(.site-home) .pf-format-badge,
.page-programme .section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 0.8125rem;
  font-weight: var(--site-font-weight-body, 300);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-cyan) !important;
  line-height: 1.3;
}

body:not(.site-home) .site-kicker i,
body:not(.site-home) .ia-kicker i,
body:not(.site-home) .approche-kicker i,
body:not(.site-home) .section-badge i,
.page-programme .section-badge i {
  font-size: 0.72rem;
  opacity: 0.9;
  margin: 0 !important;
}

/* FAQ — cards offres plus légères */
.faq-offer-card {
  background: transparent !important;
  border: 1px solid rgba(125, 216, 255, 0.18) !important;
  box-shadow: none !important;
}

/* Pages légales — cadre allégé */
.benefits-section .cyber-card.p-5 {
  background: rgba(12, 16, 22, 0.45);
  border: 1px solid rgba(125, 216, 255, 0.16);
  box-shadow: none;
}