/* ==========================================================================
   Pacte numérique Québec (pacte.quebec) — Système de design institutionnel
   Esthétique : Architecture civique québécoise, lecture diagonale rapide
   Conformité : SGQRI 008 3.0 (WCAG 2.1 AA), OQLF, Loi 25, impression A4
   ========================================================================== */

/* 1. Polices libres auto-hébergées (Loi 25 : aucune requête hors Québec) */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/public-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/public-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('../fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Jetons de design (Palette officielle & contrastes vérifiés AA/AAA) */
:root {
  --bleu-st-laurent: #0B2545;       /* Primaire — contraste 15,4:1 sur blanc */
  --bleu-boreal: #134074;           /* Secondaire — contraste 10,4:1 sur blanc */
  --azur-souverain: #1D63B8;        /* Accent 1 (Gouvernement / NGQ Palier 3) — 5,87:1 sur blanc */
  --azur-clair-fond: #EBF3FC;
  --cuivre-cooperatif: #C85A32;     /* Accent 2 (Territoire Palier 1) — bordures & grands éléments (4,23:1) */
  --cuivre-texte: #9A3B1A;          /* Texte courant cuivre garantissant > 6,6:1 AA sur blanc/crème */
  --cuivre-clair-fond: #FDF3EF;
  --vert-epinette: #1B7A43;         /* Accent 3 (Conformité & FinOps Palier 2) — 5,38:1 sur blanc */
  --vert-texte: #146134;            /* Texte courant vert sur teinte claire (> 6,8:1) */
  --vert-clair-fond: #ECF7F0;

  --blanc-pur: #FFFFFF;
  --gris-neige: #F4F6F9;
  --papier-cadastral: #FAFBFD;
  --ardoise-fonce: #1E293B;         /* Texte principal — 14,6:1 */
  --ardoise-secondaire: #435166;    /* Texte secondaire — 8,1:1 */
  --bordure-trame: #CFD8E3;
  --bordure-forte: #94A3B8;

  --erreur-rouge: #B91C1C;
  --erreur-fond: #FEF2F2;

  --police-titres: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --police-corps: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --police-code: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  --largeur-max: 78rem; /* 1248px — lecture rapide sans balayage excessif */
  --rayon-cadre: 4px;
  --rayon-controle: 4px;
}

/* 3. Réinitialisation sobre */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--police-corps);
  font-size: 1.03125rem;
  line-height: 1.58;
  color: var(--ardoise-fonce);
  background-color: var(--blanc-pur);
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  display: block;
  max-inline-size: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--police-titres);
  color: var(--bleu-st-laurent);
  margin-block: 0 0.65rem;
  line-height: 1.16;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p {
  margin-block: 0 0.9rem;
  max-inline-size: 66ch;
}

code, pre, .mono {
  font-family: var(--police-code);
}

a {
  color: var(--azur-souverain);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--bleu-st-laurent);
  text-decoration-thickness: 2.5px;
}

/* 4. Accessibilité clavier SGQRI 008 / WCAG 2.1 AA */
:where(a:any-link, button, input, select, textarea, summary, [tabindex="0"]):focus-visible {
  outline: 3px solid var(--azur-souverain);
  outline-offset: 3px;
}

.fond-sombre :where(a:any-link, button, summary, [tabindex="0"]):focus-visible {
  outline: 3px solid #93C5FD;
  outline-offset: 3px;
}

.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.skip-links {
  position: relative;
  z-index: 1000;
}

.skip-link {
  display: inline-block;
  background: var(--bleu-st-laurent);
  color: var(--blanc-pur);
  font-family: var(--police-titres);
  font-weight: 700;
  padding: 0.85rem 1.25rem;
  border: 2px solid var(--blanc-pur);
  text-decoration: none;
}

.skip-link:focus,
.skip-link:active {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 1100;
  color: var(--blanc-pur);
  box-shadow: 0 8px 24px rgba(11, 37, 69, 0.35);
}

/* 5. Conteneur principal */
.conteneur {
  inline-size: min(var(--largeur-max), 100% - 2.5rem);
  margin-inline: auto;
}

@media (max-width: 640px) {
  .conteneur {
    inline-size: min(var(--largeur-max), 100% - 1.5rem);
  }
}

.puce-juridiction {
  display: inline-block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  background-color: #34D399;
  border-radius: 1px;
  flex-shrink: 0;
}

/* En-tête principal */
.entete-site {
  position: sticky;
  inset-block-start: 0;
  z-index: 90;
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  border-block-end: 2px solid var(--bleu-st-laurent);
}

.entete-site__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: safe center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding-block: 0.8rem;
}

.marque {
  display: inline-flex;
  align-items: safe center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--bleu-st-laurent);
}

.marque__embleme {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex-shrink: 0;
}

.marque__texte {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.marque__nom {
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  color: var(--bleu-st-laurent);
}

.marque__domaine {
  font-family: var(--police-code);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--bleu-boreal);
}

.nav-principale ul {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  align-items: safe center;
  gap: 0.2rem 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-principale a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding-inline: 0.7rem;
  font-family: var(--police-titres);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ardoise-fonce);
  text-decoration: none;
  border-radius: var(--rayon-controle);
}

.nav-principale a:hover,
.nav-principale a[aria-current="page"] {
  background-color: var(--gris-neige);
  color: var(--bleu-st-laurent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.entete-site__actions {
  display: flex;
  align-items: safe center;
  gap: 0.6rem;
}

/* 6. Boutons institutionnels */
.btn {
  display: inline-flex;
  align-items: safe center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 2.85rem;
  padding: 0.65rem 1.3rem;
  font-family: var(--police-titres);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  border-radius: var(--rayon-controle);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (pointer: coarse) {
  .btn {
    min-block-size: 3rem;
  }
}

.btn--primaire {
  background-color: var(--bleu-st-laurent);
  color: var(--blanc-pur);
  border-color: var(--bleu-st-laurent);
}

.btn--primaire:hover {
  background-color: var(--bleu-boreal);
  border-color: var(--bleu-boreal);
  color: var(--blanc-pur);
  text-decoration: none;
}

.btn--secondaire {
  background-color: var(--blanc-pur);
  color: var(--bleu-st-laurent);
  border-color: var(--bordure-forte);
}

.btn--secondaire:hover {
  background-color: var(--gris-neige);
  border-color: var(--bleu-st-laurent);
  color: var(--bleu-st-laurent);
  text-decoration: none;
}

.btn--contour-cuivre {
  background-color: var(--blanc-pur);
  color: var(--cuivre-texte);
  border-color: var(--cuivre-cooperatif);
}

.btn--contour-cuivre:hover {
  background-color: var(--cuivre-clair-fond);
  color: #7C2D12;
  border-color: var(--cuivre-texte);
  text-decoration: none;
}

.btn--compact {
  min-block-size: 2.4rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.875rem;
}

/* 7. Section héroïque aérée à point d'entrée unique (B2G) */
.hero {
  background-color: var(--papier-cadastral);
  background-image:
    linear-gradient(to right, rgba(207, 216, 227, 0.32) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(207, 216, 227, 0.32) 1px, transparent 1px);
  background-size: 4rem 4rem;
  border-block-end: 1px solid var(--bordure-trame);
  padding-block: clamp(3rem, 6vw, 5.25rem) 0;
}

.hero__bloc-central {
  max-inline-size: 54rem;
  padding-block-end: clamp(2.5rem, 5vw, 4rem);
}

.indice-section {
  display: inline-block;
  font-family: var(--police-code);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bleu-boreal);
  margin-block-end: 1rem;
  padding: 0.28rem 0.65rem;
  background-color: var(--blanc-pur);
  border: 1px solid var(--bordure-trame);
  border-inline-start: 4px solid var(--bleu-st-laurent);
}

.indice-section--cuivre {
  border-inline-start-color: var(--cuivre-cooperatif);
  color: var(--cuivre-texte);
}

.indice-section--vert {
  border-inline-start-color: var(--vert-epinette);
  color: var(--vert-texte);
}

.hero__titre {
  font-size: clamp(2.2rem, 4.3vw, 3.55rem);
  font-weight: 800;
  color: var(--bleu-st-laurent);
  margin-block-end: 1.15rem;
  letter-spacing: -0.032em;
  line-height: 1.1;
}

.hero__soulignement {
  text-decoration: underline;
  text-decoration-color: var(--vert-epinette);
  text-decoration-thickness: 4px;
  text-underline-offset: 0.14em;
}

.hero__chapo {
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  color: var(--ardoise-secondaire);
  line-height: 1.52;
  margin-block-end: 1.85rem;
  max-inline-size: 54ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: safe center;
  gap: 0.9rem 1.25rem;
}

.lien-discret-hero {
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--bleu-boreal);
  min-block-size: 2.5rem;
  display: inline-flex;
  align-items: center;
}

/* Bandeau de repères chiffrés (3 colonnes épurées) */
.bandeau-reassurance {
  background-color: var(--blanc-pur);
  border-block-start: 1px solid var(--bordure-trame);
}

.bandeau-reassurance__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  border-inline: 1px solid var(--bordure-trame);
}

@media (max-width: 820px) {
  .bandeau-reassurance__grille {
    grid-template-columns: 1fr;
  }
}

.bandeau-reassurance__item {
  padding: 1.25rem 1.5rem;
  border-inline-end: 1px solid var(--bordure-trame);
}

@media (max-width: 820px) {
  .bandeau-reassurance__item {
    border-inline-end: 0;
    border-block-end: 1px solid var(--bordure-trame);
  }
}

.bandeau-reassurance__item:last-child {
  border-inline-end: 0;
  border-block-end: 0;
}

.bandeau-reassurance__chiffre {
  display: block;
  font-family: var(--police-titres);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bleu-st-laurent);
  letter-spacing: -0.02em;
  margin-block-end: 0.2rem;
}

.bandeau-reassurance__libelle {
  font-size: 0.9rem;
  line-height: 1.42;
  color: var(--ardoise-secondaire);
}

/* 8. Sections éditoriales respirantes */
.section {
  padding-block: clamp(3.25rem, 5.5vw, 5rem);
  border-block-end: 1px solid var(--bordure-trame);
}

.section--neige {
  background-color: var(--gris-neige);
}

.section--sombre {
  background-color: var(--bleu-st-laurent);
  color: var(--blanc-pur);
}

.section--sombre h2,
.section--sombre h3 {
  color: var(--blanc-pur);
}

.section--sombre p {
  color: #E2E8F0;
}

.entete-section-simple {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-block-end: 2rem;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--bordure-trame);
}

.entete-section-simple__texte {
  max-inline-size: 48rem;
}

.entete-section__titre {
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  font-weight: 800;
  margin-block-end: 0.45rem;
}

.entete-section__intro {
  font-size: 1.03rem;
  color: var(--ardoise-secondaire);
  margin: 0;
}

/* 9. Cartes de livrables scannables (lecture diagonale rapide) */
.grille-4-outils {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 820px) {
  .grille-4-outils {
    grid-template-columns: 1fr;
  }
}

.carte-outil {
  background-color: var(--blanc-pur);
  border: 1px solid var(--bordure-trame);
  border-block-start: 4px solid var(--bleu-st-laurent);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.carte-outil--vert { border-block-start-color: var(--vert-epinette); }
.carte-outil--azur { border-block-start-color: var(--azur-souverain); }
.carte-outil--cuivre { border-block-start-color: var(--cuivre-cooperatif); }

.carte-outil h3 {
  font-size: 1.22rem;
  margin: 0;
}

.carte-outil__accroche {
  font-size: 0.96rem;
  color: var(--ardoise-secondaire);
  margin: 0;
}

.liste-criteres {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.92rem;
}

.liste-criteres li {
  position: relative;
  padding-inline-start: 1.35rem;
  line-height: 1.45;
}

.liste-criteres li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  color: var(--vert-epinette);
  font-weight: 800;
}

.badge-technique {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--police-code);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: 2px;
  background-color: var(--gris-neige);
  color: var(--bleu-st-laurent);
  border: 1px solid var(--bordure-trame);
}

.badge-technique--vert {
  background-color: var(--vert-clair-fond);
  color: var(--vert-texte);
  border-color: #A7F3D0;
}

.badge-technique--cuivre {
  background-color: var(--cuivre-clair-fond);
  color: var(--cuivre-texte);
  border-color: #FDBA8C;
}

.badge-technique--azur {
  background-color: var(--azur-clair-fond);
  color: var(--bleu-boreal);
  border-color: #BFDBFE;
}

/* 10. Synthèse directe des 3 paliers d'hébergement (intégrée au flux Web) */
.grille-paliers-dsq {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 860px) {
  .grille-paliers-dsq {
    grid-template-columns: 1fr;
  }
}

.carte-palier {
  border: 1.5px solid var(--bordure-trame);
  background-color: var(--blanc-pur);
  padding: 1.35rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.carte-palier--p1 { border-block-start: 5px solid var(--cuivre-cooperatif); }
.carte-palier--p2 { border-block-start: 5px solid var(--vert-epinette); }
.carte-palier--p3 { border-block-start: 5px solid var(--azur-souverain); }

.carte-palier.est-actif {
  box-shadow: 0 10px 24px rgba(11, 37, 69, 0.11);
  transform: translateY(-2px);
}

.carte-palier--p1.est-actif { border-color: var(--cuivre-cooperatif); }
.carte-palier--p2.est-actif { border-color: var(--vert-epinette); }
.carte-palier--p3.est-actif { border-color: var(--azur-souverain); }
.carte-palier.est-attenue { opacity: 0.56; }

.carte-palier__indice {
  font-family: var(--police-code);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-block-end: 0.35rem;
  display: block;
}

.carte-palier--p1 .carte-palier__indice { color: var(--cuivre-texte); }
.carte-palier--p2 .carte-palier__indice { color: var(--vert-texte); }
.carte-palier--p3 .carte-palier__indice { color: var(--azur-souverain); }

.carte-palier h3 {
  font-size: 1.12rem;
  margin-block-end: 0.45rem;
}

/* 11. Simulateur FinOps enrichi (Courbes SVG, ventilation annuelle et barèmes) */
.simulateur-finops {
  background-color: var(--blanc-pur);
  border: 1px solid var(--bordure-forte);
  border-block-start: 5px solid var(--vert-epinette);
  padding: clamp(1.35rem, 2.8vw, 2.15rem);
}

.simulateur-finops__grille {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 2rem;
  align-items: start;
}

@media (max-width: 960px) {
  .simulateur-finops__grille {
    grid-template-columns: 1fr;
  }
}

.controle-jauge {
  margin-block-end: 1.15rem;
}

.controle-jauge__entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-block-end: 0.35rem;
}

.controle-jauge label {
  font-family: var(--police-titres);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--bleu-st-laurent);
}

.controle-jauge output {
  font-family: var(--police-code);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--bleu-boreal);
  background-color: var(--gris-neige);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--bordure-trame);
}

.select-profil-finops {
  inline-size: 100%;
  font-family: var(--police-corps);
  font-size: 0.95rem;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--bordure-forte);
  border-radius: var(--rayon-controle);
  background-color: var(--blanc-pur);
  color: var(--ardoise-fonce);
}

input[type="range"] {
  inline-size: 100%;
  accent-color: var(--bleu-st-laurent);
  min-block-size: 2rem;
  cursor: pointer;
}

.bareme-finops {
  margin-block-start: 1rem;
  padding: 0.85rem 1rem;
  background-color: var(--gris-neige);
  border-inline-start: 3px solid var(--bleu-boreal);
  font-size: 0.82rem;
  color: var(--ardoise-secondaire);
}

.bareme-finops strong {
  color: var(--bleu-st-laurent);
}

.panneau-visuel-finops {
  background-color: var(--papier-cadastral);
  border: 1px solid var(--bordure-trame);
  padding: 1.25rem;
}

.entete-kpi-finops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block-end: 1.15rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--bordure-trame);
}

@media (max-width: 580px) {
  .entete-kpi-finops {
    grid-template-columns: 1fr;
  }
}

.kpi-finops__etiquette {
  display: block;
  font-family: var(--police-code);
  font-size: 0.73rem;
  color: var(--ardoise-secondaire);
  text-transform: uppercase;
}

.kpi-finops__valeur {
  display: block;
  font-family: var(--police-titres);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--bleu-st-laurent);
}

.kpi-finops__valeur--gain {
  color: var(--vert-texte);
}

.legende-courbes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-size: 0.82rem;
  margin-block-end: 0.5rem;
}

.legende-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
}

.trait-legende {
  display: inline-block;
  inline-size: 1.1rem;
  block-size: 3px;
}

.graphique-finops {
  inline-size: 100%;
  block-size: auto;
  background-color: var(--blanc-pur);
  border: 1px solid var(--bordure-trame);
  margin-block-end: 1rem;
}

.table-ventilation-finops {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  background-color: var(--blanc-pur);
}

.table-ventilation-finops th,
.table-ventilation-finops td {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--bordure-trame);
  text-align: end;
}

.table-ventilation-finops th:first-child,
.table-ventilation-finops td:first-child {
  text-align: start;
}

.table-ventilation-finops thead th {
  background-color: var(--gris-neige);
  color: var(--bleu-st-laurent);
  font-family: var(--police-titres);
  font-weight: 700;
}

.table-ventilation-finops tfoot th,
.table-ventilation-finops tfoot td {
  background-color: var(--vert-clair-fond);
  color: var(--vert-texte);
  font-weight: 800;
}

/* 12. Composants de la page Écosystème (socle ouvert, coalition DSQ et équipe) */
.grille-references {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
}

@media (max-width: 1020px) {
  .grille-references {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .grille-references {
    grid-template-columns: 1fr;
  }
}

.carte-reference {
  background-color: var(--blanc-pur);
  border: 1px solid var(--bordure-trame);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
}

.carte-reference__logo-cadre {
  block-size: 4.1rem;
  padding: 0.7rem 0.95rem;
  background-color: var(--gris-neige);
  border: 1px solid var(--bordure-trame);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-block-end: 0.85rem;
}

.carte-reference__logo {
  max-block-size: 2.35rem;
  max-inline-size: min(11rem, 100%);
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}

.carte-reference__type {
  font-family: var(--police-code);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--bleu-boreal);
  text-transform: uppercase;
}

.carte-reference h3 {
  font-size: 1.08rem;
  margin-block: 0.25rem 0.4rem;
}

.carte-reference p {
  font-size: 0.88rem;
  color: var(--ardoise-secondaire);
  margin: 0;
}

.bandeau-coalition-dsq {
  margin-block-start: 1.35rem;
  background-color: var(--blanc-pur);
  border: 1px solid var(--bordure-trame);
  border-inline-start: 5px solid var(--cuivre-cooperatif);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.25rem 1.75rem;
  align-items: center;
}

@media (max-width: 900px) {
  .bandeau-coalition-dsq {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.bandeau-coalition-dsq__logo-cadre {
  background-color: var(--gris-neige);
  border: 1px solid var(--bordure-trame);
  padding: 0.85rem 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bandeau-coalition-dsq__logo {
  max-block-size: 3.1rem;
  max-inline-size: 10.5rem;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}

.grille-equipe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (max-width: 880px) {
  .grille-equipe {
    grid-template-columns: 1fr;
  }
}

.carte-membre-equipe {
  background-color: var(--blanc-pur);
  border: 1px solid var(--bordure-trame);
  border-block-start: 4px solid var(--bleu-st-laurent);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1.35rem;
  align-items: start;
}

@media (max-width: 540px) {
  .carte-membre-equipe {
    grid-template-columns: 1fr;
  }
}

.carte-membre-equipe__portrait {
  inline-size: 6rem;
  block-size: 6rem;
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--bleu-st-laurent);
  border-radius: var(--rayon-cadre);
  background-color: var(--gris-neige);
}

.carte-membre-equipe__role {
  display: block;
  font-family: var(--police-code);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--cuivre-texte);
  text-transform: uppercase;
  margin-block-end: 0.2rem;
}

.carte-membre-equipe h3 {
  font-size: 1.25rem;
  margin: 0;
}

.carte-membre-equipe__org {
  font-family: var(--police-titres);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bleu-boreal);
  margin-block: 0.15rem 0.65rem;
}

.carte-membre-equipe__bio {
  font-size: 0.92rem;
  color: var(--ardoise-fonce);
  margin-block: 0 0.85rem;
}

.carte-membre-equipe__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.15rem;
  font-family: var(--police-titres);
  font-size: 0.86rem;
  font-weight: 700;
}

.carte-membre-equipe__liens a {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.75rem;
}

.encadre-rejoindre-equipe {
  margin-block-start: 1.5rem;
  background-color: var(--blanc-pur);
  border: 1px solid var(--bordure-trame);
  border-inline-start: 4px solid var(--vert-epinette);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.75rem;
}

/* 13. Composants interactifs des pages détaillées (Solutions, Architecture, Écosystème) */
.bento-carte {
  background-color: var(--blanc-pur);
  border: 1px solid var(--bordure-trame);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.schema-grist {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 1.25rem;
}

@media (max-width: 980px) {
  .schema-grist {
    grid-template-columns: 1fr;
  }
}

.panneau-excel {
  background-color: var(--erreur-fond);
  border: 1px solid #FCA5A5;
  border-block-start: 4px solid var(--erreur-rouge);
  padding: 1.15rem;
}

.panneau-grist {
  background-color: #F6FBF8;
  border: 1px solid #86EFAC;
  border-block-start: 4px solid var(--vert-epinette);
  padding: 1.15rem;
}

.entete-panneau-schema {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-end: 0.75rem;
}

.titre-panneau-schema {
  display: inline-block;
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 0.95rem;
}

.titre-panneau-schema--danger { color: #991B1B; }
.titre-panneau-schema--succes { color: var(--vert-texte); }

.selecteur-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-end: 0.8rem;
}

.btn-role {
  font-family: var(--police-titres);
  font-size: 0.82rem;
  font-weight: 700;
  min-block-size: 2.15rem;
  padding: 0.3rem 0.7rem;
  background-color: var(--blanc-pur);
  color: var(--bleu-st-laurent);
  border: 1.5px solid var(--bordure-forte);
  border-radius: 3px;
  cursor: pointer;
}

.btn-role[aria-pressed="true"] {
  background-color: var(--vert-epinette);
  color: var(--blanc-pur);
  border-color: var(--vert-epinette);
}

.grille-mini-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  background-color: var(--blanc-pur);
}

.grille-mini-table th,
.grille-mini-table td {
  border: 1px solid var(--bordure-trame);
  padding: 0.45rem 0.55rem;
  text-align: start;
}

.grille-mini-table thead th {
  background-color: var(--gris-neige);
  font-family: var(--police-code);
  font-size: 0.74rem;
  color: var(--bleu-st-laurent);
}

.panneau-excel .grille-mini-table td {
  background-color: #FFF5F5;
  color: #7F1D1D;
}

.cellule-autorisee {
  background-color: #ECFDF3;
  color: #14532D;
  font-weight: 600;
}

.cellule-masquee {
  background-color: #F1F5F9;
  color: var(--ardoise-secondaire);
  font-family: var(--police-code);
  font-size: 0.74rem;
}

.legende-schema-grist {
  font-size: 0.82rem;
  margin: 0.65rem 0 0;
  font-weight: 600;
  color: var(--vert-texte);
}

.bouclier-ia {
  border: 2px dashed var(--bleu-boreal);
  background-color: var(--papier-cadastral);
  padding: 1.25rem;
}

.bouclier-ia__etiquette {
  display: inline-block;
  background-color: var(--bleu-st-laurent);
  color: var(--blanc-pur);
  font-family: var(--police-code);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.28rem 0.7rem;
  margin-block-end: 1rem;
}

.pipeline-reunion {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 900px) {
  .pipeline-reunion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .pipeline-reunion { grid-template-columns: 1fr; }
}

.pipeline-reunion__etape {
  background-color: var(--blanc-pur);
  border: 1px solid var(--bordure-trame);
  border-block-start: 3px solid var(--bleu-boreal);
  padding: 0.95rem;
}

.pipeline-reunion__num {
  font-family: var(--police-code);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--bleu-boreal);
  display: block;
  margin-block-end: 0.35rem;
}

.pipeline-reunion__titre {
  font-family: var(--police-titres);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--bleu-st-laurent);
  margin-block-end: 0.3rem;
}

.pipeline-reunion__desc {
  font-size: 0.84rem;
  color: var(--ardoise-secondaire);
  margin: 0;
}

/* Schéma 1 interactif DSQ (page Architecture) */
.schema-dsq {
  background-color: var(--blanc-pur);
  border: 1px solid var(--bordure-trame);
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
  margin-block-end: 2rem;
}

.aiguilleur-charges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-block-end: 1.25rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--bordure-trame);
}

.aiguilleur-charges__etiquette {
  font-family: var(--police-code);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--bleu-st-laurent);
  margin-inline-end: 0.3rem;
}

.btn-charge {
  font-family: var(--police-titres);
  font-size: 0.83rem;
  font-weight: 600;
  min-block-size: 2.2rem;
  padding: 0.3rem 0.75rem;
  background-color: var(--gris-neige);
  color: var(--ardoise-fonce);
  border: 1.5px solid var(--bordure-trame);
  border-radius: 3px;
  cursor: pointer;
}

.btn-charge[aria-pressed="true"] {
  background-color: var(--bleu-st-laurent);
  color: var(--blanc-pur);
  border-color: var(--bleu-st-laurent);
}

.source-zerotrust {
  background-color: var(--bleu-st-laurent);
  color: var(--blanc-pur);
  padding: 0.95rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-end: 0.85rem;
}

.connecteur-svg {
  inline-size: 100%;
  block-size: 2.2rem;
  margin-block-end: 0.4rem;
}

@media (max-width: 860px) {
  .connecteur-svg { display: none; }
}

.message-aiguillage {
  margin-block-start: 1rem;
  padding: 0.8rem 1rem;
  background-color: var(--gris-neige);
  border-inline-start: 4px solid var(--bleu-st-laurent);
  font-size: 0.9rem;
}

/* Onglets Personas (page Solutions) */
.dossier-personas {
  background-color: var(--blanc-pur);
  border: 1px solid var(--bordure-trame);
}

.liste-onglets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block-end: 2px solid var(--bleu-st-laurent);
  background-color: var(--gris-neige);
}

@media (max-width: 900px) { .liste-onglets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .liste-onglets { grid-template-columns: 1fr; } }

.onglet-persona {
  appearance: none;
  background: transparent;
  border: 0;
  border-inline-end: 1px solid var(--bordure-trame);
  border-block-end: 1px solid var(--bordure-trame);
  padding: 0.95rem 1.1rem;
  text-align: start;
  cursor: pointer;
  font-family: var(--police-titres);
  color: var(--ardoise-fonce);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.onglet-persona[aria-selected="true"] {
  background-color: var(--bleu-st-laurent);
  color: var(--blanc-pur);
}

.onglet-persona__code {
  font-family: var(--police-code);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bleu-boreal);
}

.onglet-persona[aria-selected="true"] .onglet-persona__code { color: #93C5FD; }
.onglet-persona__titre { font-size: 0.92rem; font-weight: 700; line-height: 1.3; }
.panneau-persona { padding: clamp(1.35rem, 2.5vw, 2rem); }
.panneau-persona[hidden] { display: none; }

.grille-defi-reponse {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  gap: 1.75rem;
  align-items: start;
}

@media (max-width: 860px) { .grille-defi-reponse { grid-template-columns: 1fr; } }

.encadre-defi {
  background-color: var(--gris-neige);
  border-inline-start: 4px solid var(--cuivre-cooperatif);
  padding: 1.25rem;
}

.encadre-defi__etiquette {
  font-family: var(--police-code);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cuivre-texte);
  display: block;
  margin-block-end: 0.45rem;
}

.liste-reponses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.liste-reponses li {
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--bordure-trame);
  border-inline-start: 4px solid var(--vert-epinette);
  background-color: var(--papier-cadastral);
  font-size: 0.94rem;
}

/* Schéma 4 Double MSP (page Écosystème) */
.schema-papillon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.85fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  margin-block-end: 2rem;
}

@media (max-width: 960px) { .schema-papillon { grid-template-columns: 1fr; } }

.papillon-aile {
  background-color: var(--blanc-pur);
  border: 1px solid var(--bordure-trame);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
}

.papillon-aile--amont { border-block-start: 5px solid var(--cuivre-cooperatif); }
.papillon-aile--aval { border-block-start: 5px solid var(--vert-epinette); }

.papillon-noyau {
  background-color: var(--bleu-st-laurent);
  color: var(--blanc-pur);
  border: 2px solid var(--bleu-st-laurent);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.papillon-noyau h3,
.papillon-noyau p {
  color: var(--blanc-pur);
  margin-inline: auto;
}

.grille-3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 920px) { .grille-3col { grid-template-columns: 1fr; } }

.grille-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
}

@media (max-width: 780px) { .grille-2col { grid-template-columns: 1fr; } }

/* 14. Tableaux adaptatifs (responsive-table) */
.table-wrapper {
  overflow: auto;
  max-inline-size: 100%;
  container-type: inline-size;
  border: 1px solid var(--bordure-trame);
  background-color: var(--blanc-pur);
}

.table-normative {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
}

.table-normative caption {
  text-align: start;
  padding: 0.85rem 1.1rem;
  font-family: var(--police-titres);
  font-weight: 700;
  color: var(--bleu-st-laurent);
  background-color: var(--gris-neige);
  border-block-end: 1px solid var(--bordure-trame);
}

.table-normative thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
}

.table-normative thead th {
  background-color: var(--bleu-st-laurent);
  color: var(--blanc-pur);
  font-family: var(--police-titres);
  font-weight: 700;
  text-align: start;
  padding: 0.85rem 1rem;
  border-block-end: 2px solid var(--bleu-st-laurent);
}

.table-normative thead th.col-pacte {
  background-color: var(--bleu-boreal);
}

.table-normative tbody th,
.table-normative tbody td {
  padding: 0.85rem 1rem;
  vertical-align: top;
  border-block-end: 1px solid var(--bordure-trame);
  text-align: start;
}

.table-normative tbody tr:nth-child(even) td,
.table-normative tbody tr:nth-child(even) th {
  background-color: var(--gris-neige);
}

.table-normative tbody tr:nth-child(odd) th {
  background-color: var(--blanc-pur);
}

.table-normative tbody th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  font-family: var(--police-titres);
  font-weight: 700;
  color: var(--bleu-st-laurent);
  border-inline-end: 1px solid var(--bordure-trame);
}

.table-normative tbody td.col-pacte {
  background-color: #F2F9F5;
  border-inline-start: 2px solid var(--vert-epinette);
  color: var(--bleu-st-laurent);
}

.crochet-valide {
  color: var(--vert-epinette);
  font-weight: 800;
  margin-inline-end: 0.35rem;
}

@container (width < 680px) {
  .table-normative,
  .table-normative thead,
  .table-normative tbody,
  .table-normative tr,
  .table-normative th,
  .table-normative td {
    display: block;
  }

  .table-normative thead { display: none; }

  .table-normative tbody tr {
    margin: 0.8rem;
    border: 1px solid var(--bordure-forte);
  }

  .table-normative tbody th {
    position: sticky;
    inset-block-start: 0;
    background-color: var(--bleu-st-laurent) !important;
    color: var(--blanc-pur);
    border-inline-end: 0;
  }

  .table-normative tbody td:nth-child(2)::before {
    content: var(--label-2) " : ";
    font-weight: 700;
    color: var(--bleu-boreal);
    display: block;
    font-size: 0.78rem;
    margin-block-end: 0.15rem;
  }

  .table-normative tbody td:nth-child(3)::before {
    content: var(--label-3) " : ";
    font-weight: 700;
    color: var(--bleu-boreal);
    display: block;
    font-size: 0.78rem;
    margin-block-end: 0.15rem;
  }

  .table-normative tbody td:nth-child(4)::before {
    content: var(--label-4) " : ";
    font-weight: 700;
    color: var(--vert-texte);
    display: block;
    font-size: 0.78rem;
    margin-block-end: 0.15rem;
  }
}

/* 15. Entête pages secondaires & blocs techniques */
.entete-page-interne {
  background-color: var(--gris-neige);
  border-block-end: 1px solid var(--bordure-trame);
  padding-block: 2.25rem;
}

.bloc-code-infra {
  background-color: #0F172A;
  color: #F8FAFC;
  padding: 1.1rem 1.25rem;
  border-radius: var(--rayon-cadre);
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.52;
  margin: 0;
}

/* 15b. Glossaire terminologique et références juridiques (interestfor + popover="hint") */
[interestfor] {
  --interest-delay-start: 0.15s;
  interest-delay-start: var(--interest-delay-start);
  --interest-delay-end: 0.2s;
  interest-delay-end: var(--interest-delay-end);
}

:root:has(:is(:interest-source, .interest-source)) [interestfor] {
  --interest-delay-start: 0s;
  interest-delay-start: 0s;
}

.terme-glossaire,
.terme-reference {
  appearance: none;
  -webkit-appearance: none;
  display: inline;
  border: 0;
  border-radius: 2px;
  padding: 0;
  margin: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  vertical-align: baseline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  cursor: help;
  transition: background-color 140ms ease, text-decoration-color 140ms ease, color 140ms ease;
}

.terme-glossaire {
  text-decoration-style: dotted;
  text-decoration-color: var(--azur-souverain);
}

.terme-glossaire:hover,
.terme-glossaire:focus-visible,
.terme-glossaire:is(:interest-source, .interest-source) {
  background-color: rgba(29, 99, 184, 0.12);
  text-decoration-style: solid;
  text-decoration-color: var(--bleu-st-laurent);
}

.terme-reference {
  text-decoration-style: dashed;
  text-decoration-color: var(--cuivre-cooperatif);
}

.terme-reference:hover,
.terme-reference:focus-visible,
.terme-reference:is(:interest-source, .interest-source) {
  background-color: rgba(154, 59, 26, 0.12);
  text-decoration-style: solid;
  text-decoration-color: var(--cuivre-texte);
}

:is(.fond-sombre, .source-zerotrust, .bouclier-ia__etiquette) .terme-glossaire {
  text-decoration-color: #93C5FD;
  color: var(--blanc-pur);
}

:is(.fond-sombre, .source-zerotrust, .bouclier-ia__etiquette) .terme-glossaire:hover,
:is(.fond-sombre, .source-zerotrust, .bouclier-ia__etiquette) .terme-glossaire:focus-visible,
:is(.fond-sombre, .source-zerotrust, .bouclier-ia__etiquette) .terme-glossaire:is(:interest-source, .interest-source) {
  background-color: rgba(147, 197, 253, 0.22);
  text-decoration-color: var(--blanc-pur);
}

:is(.fond-sombre, .source-zerotrust, .bouclier-ia__etiquette) .terme-reference {
  text-decoration-color: #FDBA74;
  color: var(--blanc-pur);
}

:is(.fond-sombre, .source-zerotrust, .bouclier-ia__etiquette) .terme-reference:hover,
:is(.fond-sombre, .source-zerotrust, .bouclier-ia__etiquette) .terme-reference:focus-visible,
:is(.fond-sombre, .source-zerotrust, .bouclier-ia__etiquette) .terme-reference:is(:interest-source, .interest-source) {
  background-color: rgba(253, 186, 116, 0.22);
  text-decoration-color: var(--blanc-pur);
}

@media (pointer: coarse) {
  .terme-glossaire,
  .terme-reference {
    padding: 0;
  }
}

.infobulle-glossaire {
  display: none;
  position: fixed;
  inset: auto;
  margin: 0;
  z-index: 1200;
  inline-size: max-content;
  max-inline-size: min(23.5rem, calc(100vw - 1.25rem));
  padding: 0.85rem 1rem;
  background-color: var(--blanc-pur);
  color: var(--ardoise-fonce);
  border: 2px solid var(--bleu-st-laurent);
  border-block-start: 4px solid var(--cuivre-cooperatif);
  border-radius: var(--rayon-cadre);
  box-shadow: 0 16px 36px rgba(11, 37, 69, 0.24);
  font-family: var(--police-corps);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.48;
  text-align: start;
  text-transform: none;
}

.infobulle-glossaire--reference {
  max-inline-size: min(27rem, calc(100vw - 1.25rem));
  border-block-start-color: var(--vert-epinette);
}

.infobulle-glossaire[popover]:is(:popover-open, .\:popover-open),
.infobulle-glossaire:is(:interest-target, .interest-target) {
  display: grid;
  gap: 0.32rem;
}

@media (prefers-reduced-motion: no-preference) {
  .infobulle-glossaire {
    opacity: 0;
    transform: translateY(-4px);
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      display 0.18s allow-discrete,
      overlay 0.18s allow-discrete;
  }

  .infobulle-glossaire[popover]:is(:popover-open, .\:popover-open),
  .infobulle-glossaire:is(:interest-target, .interest-target) {
    opacity: 1;
    transform: translateY(0);
  }

  @starting-style {
    .infobulle-glossaire[popover]:is(:popover-open, .\:popover-open),
    .infobulle-glossaire:is(:interest-target, .interest-target) {
      opacity: 0;
      transform: translateY(-4px);
    }
  }
}

@supports (position-area: block-start) {
  .infobulle-glossaire:not(.infobulle-glossaire--js-pos) {
    inset: auto;
    margin: unset;
    margin-block: 0.45rem;
    position-area: block-start;
    position-try-fallbacks: flip-block, flip-inline;
  }
}

.infobulle-glossaire__terme {
  display: block;
  font-family: var(--police-titres);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--bleu-st-laurent);
  line-height: 1.3;
}

.infobulle-glossaire__en {
  display: block;
  font-family: var(--police-code);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cuivre-texte);
  padding-block-end: 0.3rem;
  border-block-end: 1px solid var(--bordure-trame);
}

.infobulle-glossaire__def {
  display: block;
  color: var(--ardoise-fonce);
}

.infobulle-glossaire__extrait {
  margin: 0.15rem 0;
  padding: 0.55rem 0.7rem;
  background-color: var(--gris-neige);
  border-inline-start: 3px solid var(--cuivre-cooperatif);
  font-size: 0.825rem;
  line-height: 1.48;
  color: var(--ardoise-fonce);
}

.infobulle-glossaire__note {
  display: block;
  font-size: 0.8rem;
  color: var(--ardoise-secondaire);
}

.infobulle-glossaire__lien {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.75rem;
  margin-block-start: 0.1rem;
  padding-block-start: 0.3rem;
  border-block-start: 1px solid var(--bordure-trame);
  font-family: var(--police-titres);
  font-size: 0.81rem;
  font-weight: 700;
  color: var(--bleu-boreal);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.infobulle-glossaire__lien:hover {
  color: var(--bleu-st-laurent);
}

/* 16. Fenêtre modale native <dialog> (cadrage pilote B2G léger) */
dialog:modal {
  overscroll-behavior: contain;
  inline-size: min(38rem, calc(100% - 2rem));
  max-block-size: min(90dvh, 50rem);
  padding: 0;
  border: 2px solid var(--bleu-st-laurent);
  border-block-start: 6px solid var(--bleu-st-laurent);
  border-radius: var(--rayon-cadre);
  background-color: var(--blanc-pur);
  color: var(--ardoise-fonce);
  box-shadow: 0 24px 48px rgba(11, 37, 69, 0.28);
}

dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background-color: rgba(11, 37, 69, 0.62);
}

.dialogue-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.4rem 0.95rem;
  background-color: var(--gris-neige);
  border-block-end: 1px solid var(--bordure-trame);
}

.dialogue-corps {
  padding: 1.25rem 1.4rem 1.5rem;
}

.champ { margin-block-end: 1rem; }

.champ label {
  display: block;
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--bleu-st-laurent);
  margin-block-end: 0.22rem;
}

.indice-champ {
  display: block;
  font-size: 0.81rem;
  color: var(--ardoise-secondaire);
  margin-block-end: 0.3rem;
}

.champ input:not([type="checkbox"]),
.champ select,
.champ textarea {
  inline-size: 100%;
  font-family: var(--police-corps);
  font-size: 0.98rem;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--bordure-forte);
  border-radius: var(--rayon-controle);
  background-color: var(--blanc-pur);
  color: var(--ardoise-fonce);
}

.champ :is(input, select, textarea):user-invalid,
.champ :is(input, select, textarea).user-invalid-fallback {
  border-color: var(--erreur-rouge);
  background-color: var(--erreur-fond);
}

.champ :is(input:not([type="checkbox"]), select, textarea):user-valid,
.champ :is(input:not([type="checkbox"]), select, textarea).user-valid-fallback {
  border-color: var(--vert-epinette);
}

.msg-erreur {
  display: none;
  color: var(--erreur-rouge);
  font-size: 0.83rem;
  font-weight: 600;
  margin-block-start: 0.28rem;
}

.champ :is(input, select, textarea):user-invalid + .msg-erreur,
.champ :is(input, select, textarea).user-invalid-fallback + .msg-erreur,
.champ:has(:user-invalid) .msg-erreur,
.champ:has(.user-invalid-fallback) .msg-erreur {
  display: block;
}

.champ-consentement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  background-color: var(--gris-neige);
  border: 1px solid var(--bordure-trame);
  padding: 0.8rem 0.95rem;
}

.champ-consentement input[type="checkbox"] {
  inline-size: 1.2rem;
  block-size: 1.2rem;
  margin-block-start: 0.18rem;
  accent-color: var(--bleu-st-laurent);
}

.champ-consentement label {
  font-family: var(--police-corps);
  font-weight: 400;
  font-size: 0.86rem;
  margin: 0;
}

.confirmation-soumission {
  background-color: var(--vert-clair-fond);
  border: 1px solid var(--vert-epinette);
  border-inline-start: 5px solid var(--vert-epinette);
  padding: 1rem;
  margin-block-start: 1rem;
}

/* 17. Pied de page institutionnel */
.pied-page {
  background-color: var(--bleu-st-laurent);
  color: #E2E8F0;
  padding-block: 3rem 1.85rem;
}

.pied-page__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  padding-block-end: 2rem;
  border-block-end: 1px solid rgba(255, 255, 255, 0.18);
}

@media (max-width: 920px) { .pied-page__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pied-page__grille { grid-template-columns: 1fr; } }

.pied-page h2,
.pied-page h3 {
  color: var(--blanc-pur);
  font-size: 0.98rem;
  margin-block-end: 0.75rem;
}

.pied-page p { color: #CBD5E1; font-size: 0.9rem; }

.pied-page ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.9rem;
}

.pied-page a {
  color: #F1F5F9;
  text-decoration-color: rgba(241, 245, 249, 0.45);
}

.pied-page a:hover {
  color: var(--blanc-pur);
  text-decoration-color: var(--blanc-pur);
}

.pied-page__statut {
  margin-block-start: 1.25rem;
  padding-block-start: 1.15rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: safe center;
  justify-content: space-between;
  gap: 0.65rem 1.5rem;
  font-size: 0.8rem;
  color: #E2E8F0;
}

.pied-page__badge-juridiction {
  display: inline-flex;
  align-items: safe center;
  min-block-size: 1.75rem;
  padding-block: 0.2rem;
  gap: 0.55rem;
  font-family: var(--police-code);
  font-size: 0.76rem;
  color: #F1F5F9;
  text-decoration: underline;
  text-decoration-color: rgba(241, 245, 249, 0.5);
  text-underline-offset: 0.24em;
}

.pied-page__badge-juridiction:hover,
.pied-page__badge-juridiction[aria-current="page"] {
  color: var(--blanc-pur);
  text-decoration-color: var(--blanc-pur);
  text-decoration-thickness: 2px;
}

.pied-page__mentions {
  padding-block-start: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.65rem 1.5rem;
  font-size: 0.82rem;
  color: #CBD5E1;
}

@media (forced-colors: active) {
  .btn,
  .carte-outil,
  .bento-carte,
  .carte-palier,
  .infobulle-glossaire,
  .onglet-persona[aria-selected="true"] {
    border: 2px solid ButtonText;
  }

  .terme-glossaire,
  .terme-reference {
    text-decoration-color: ButtonText;
  }
}

/* Format d'impression standard A4 */
@page {
  size: A4 portrait;
  margin: 18mm;
}

@media print {
  .entete-site__actions,
  .nav-principale,
  .skip-links,
  .no-print,
  .infobulle-glossaire,
  dialog {
    display: none !important;
  }

  .terme-glossaire,
  .terme-reference {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
  }

  .entete-site {
    position: static;
    border-block-end: 2px solid #0B2545;
  }

  body {
    font-size: 10pt;
    line-height: 1.42;
    color: #000000;
    background: #FFFFFF;
  }

  .conteneur { inline-size: 100%; }
  .section { padding-block: 1rem; }

  .panneau-persona[hidden] {
    display: block !important;
    border-block-start: 1px solid #94A3B8;
  }
}