/* ============================================================================
   Feuille commune aux fiches application — /applications/<slug>/ et /en/…

   Pourquoi ce fichier existe
   --------------------------
   Ces ~10 Ko de CSS etaient repetes a l'identique dans les 12 fiches (6 FR +
   6 EN), en trois blocs <style> inline. Deux consequences mesurees le 11 aout
   2026 : aucun cache inter-pages (le HTML est en max-age=0, must-revalidate,
   a raison), et douze editions a faire pour toute correction visuelle.

   Meme regle que Assets/kalego-fiche.css, son equivalent pour les fiches
   produit : appelee avec un `?v=`, donc son URL change quand son contenu
   change, donc `immutable` est sur dans _headers.

   ATTENTION A L'ORDRE. Ce fichier est charge dans le <head>, APRES
   kalego.css. Les blocs qu'il remplace etaient inline dans le <body>, donc
   plus loin dans l'ordre du document. A specificite egale, une regle de
   kalego.css qui perdait avant peut maintenant gagner. Les trois endroits
   sensibles verifies a la migration : le CTA flottant, l'animation
   kg-float-in, et la garde prefers-reduced-motion (voir plus bas).
   ========================================================================== */

.kalego-application {
  --kg-deep: #1B0834;
  --kg-deep-2: #2A1450;
  --kg-accent: #F5B82E;
  --kg-accent-soft: #FFD56B;
  --kg-plasma: #8B5CF6;
  /* Variante lisible du violet sur fond clair. #8B5CF6 sur --kg-paper donne
     4,05:1 — sous les 4,5:1 exiges pour du texte de taille normale (WCAG 2.2
     SC 1.4.3, niveau AA). #6D28D9 donne 6,79:1. Meme valeur et meme role que
     sur la page produits, ou la variable existe deja.
     A n'utiliser que pour du TEXTE sur fond clair : les grands titres
     (>= 24 px) et les aplats decoratifs gardent --kg-plasma, qui leur suffit
     (seuil de 3:1 pour le texte large). */
  --kg-plasma-text: #6D28D9;
  --kg-plasma-glow: rgba(139, 92, 246, 0.55);
  --kg-ink: #0F0820;
  --kg-paper: #FAFAF7;
  /* 19 aout 2026. #F1EFE8 se distinguait a peine de #FAFAF7 : la cesure
     entre deux sections claires ne se lisait pas. Meme valeur assombrie que
     sur les fiches sectorielles, ou le meme defaut a ete corrige le 16 aout.
     #1B0834 sur #EDE9DE reste tres au-dessus de AA. */
  --kg-paper-2: #EDE9DE;
  --kg-rule: rgba(27, 8, 52, 0.12);
  --kg-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --kg-body: 'Manrope', system-ui, -apple-system, sans-serif;
  --kg-serif: Georgia, 'Times New Roman', serif;
}

/* HERO
   La photo de l'application est passee en FOND de section, sous un degrade
   violet, sur le modele du hero de /contact/. Elle etait auparavant un carre
   pose a cote du titre — et masquee sous 900 px, ce qui privait tout visiteur
   mobile de la moindre image sur un site qui vend un procede visuel.

   Le chemin de l'image change a chaque fiche : il arrive donc par deux
   proprietes personnalisees posees en `style` sur la <section>, plutot que
   par une regle par application. Une seule declaration a maintenir ici.

   Le degrade est dissymetrique a dessein, comme sur /contact/ : quasi opaque
   a gauche ou se trouve le texte, plus transparent a droite ou la photo
   respire. Verification du pire cas (photo entierement blanche sous le
   degrade) : 15,9:1 sous l'opacite de gauche, 8,3:1 sous celle de droite —
   le texte blanc reste lisible quelle que soit la photo. */
.kalego-application .kg-ahero {
  position: relative; background-color: var(--kg-deep);
  overflow: hidden; padding: 100px 0 96px;
  background-image:
    linear-gradient(100deg,
      rgba(27, 8, 52, 0.97) 0%,
      rgba(27, 8, 52, 0.93) 50%,
      rgba(27, 8, 52, 0.74) 100%),
    var(--kg-ahero-img-sm, none);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .kalego-application .kg-ahero {
    background-image:
      linear-gradient(100deg,
        rgba(27, 8, 52, 0.97) 0%,
        rgba(27, 8, 52, 0.93) 50%,
        rgba(27, 8, 52, 0.74) 100%),
      var(--kg-ahero-img-lg, none);
  }
}
.kalego-application .kg-ahero__glow {
  position: absolute; right: -6%; top: 0;
  width: 58%; height: 100%;
  background: radial-gradient(circle at 70% 40%, var(--kg-plasma-glow) 0%, rgba(139,92,246,0.12) 34%, transparent 68%);
  filter: blur(26px); pointer-events: none;
}
/* Une seule colonne depuis que le badge a disparu au profit du fond. La
   largeur est bornee pour que le texte reste dans la zone la plus opaque du
   degrade, et pour ne pas etirer les lignes au-dela du confort de lecture. */
.kalego-application .kg-ahero__grid {
  position: relative; z-index: 2;
  display: block; max-width: 780px;
}

/* ---- Fil d'Ariane -------------------------------------------------------
   Le fil est desormais le composant `.kg-crumbs` de kalego.css, partage par
   toutes les pages : il portait ici un separateur « / » et une typo qui ne
   correspondaient a aucune autre famille de pages. Rien de specifique aux
   fiches application ne subsiste. */

.kalego-application .kg-ahero__eyebrow {
  font-family: var(--kg-body); font-weight: 700;
  letter-spacing: 0.28em; font-size: 13px; color: var(--kg-accent);
  text-transform: uppercase; margin-bottom: 20px;
}
.kalego-application .kg-ahero__eyebrow::before {
  content: ''; display: inline-block; width: 28px; height: 1px;
  background: var(--kg-accent); vertical-align: middle; margin-right: 14px;
}
.kalego-application .kg-ahero__title {
  font-family: var(--kg-display); font-weight: 800;
  font-size: clamp(46px, 6.5vw, 96px); line-height: 0.92;
  color: #fff; letter-spacing: -0.01em; margin: 0 0 24px 0;
  text-transform: uppercase; text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.kalego-application .kg-ahero__title em {
  font-style: normal; color: var(--kg-accent);
  font-family: var(--kg-display); font-weight: 800; text-transform: uppercase;
}
.kalego-application .kg-ahero__sub {
  font-family: var(--kg-body); font-size: 19px; line-height: 1.55;
  color: rgba(255,255,255,0.9); max-width: 520px; margin-bottom: 34px;
}
.kalego-application .kg-ahero__ctas { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; }

/* Boutons */
.kalego-application .kg-btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--kg-accent); color: var(--kg-deep);
  font-family: var(--kg-body); font-weight: 700; font-size: 15px;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 18px 32px; border: none; text-decoration: none;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 0 0 rgba(0,0,0,0.15);
}
.kalego-application .kg-btn-primary:hover {
  background: var(--kg-accent-soft); color: var(--kg-deep);
  transform: translateY(-2px); box-shadow: 0 6px 0 0 rgba(0,0,0,0.2);
}
.kalego-application .kg-btn-primary svg { transition: transform 0.2s; }
.kalego-application .kg-btn-primary:hover svg { transform: translateX(4px); }
.kalego-application .kg-btn-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: #fff;
  font-family: var(--kg-body); font-weight: 600; font-size: 14px;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 16px 24px; border: 1.5px solid rgba(255,255,255,0.4);
  text-decoration: none; transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.kalego-application .kg-btn-secondary:hover {
  border-color: var(--kg-accent); background: rgba(245,184,46,0.08); color: var(--kg-accent);
}

/* ---- Sommaire ancre -----------------------------------------------------
   La barre se fige SOUS l'en-tete injecte par menu.js, pour rester visible
   pendant toute la lecture.

   `--kg-entete` vaut la hauteur mesuree de `header#top` : 74 px, identique
   avant et apres defilement, et identique a 375 px comme a 1280 px (mesure du
   12 aout 2026). L'en-tete est lui-meme `position: sticky; top: 0` avec un
   z-index de 1030 ; en calant la barre a `top: 74px` et en la laissant sous
   ce z-index, les deux s'empilent proprement au lieu de se recouvrir.

   Si la hauteur de l'en-tete change un jour, c'est la seule valeur a reviser
   — `scroll-margin-top` s'en deduit.

   LA JONCTION AVEC L'EN-TETE (19 aout 2026). La barre se calait pile sous
   l'en-tete, sans rien pour marquer la limite : deux barres collantes empilees
   qui se touchent, et le moindre ecart de mesure — hauteur d'en-tete legerement
   differente d'une langue a l'autre, arrondi de zoom, police pas encore
   chargee au moment de la mesure — laissait passer un filet de page qui
   defilait entre les deux. D'ou ce montage en deux temps :

   1. la barre remonte de `--kg-jonction` (8 px) au lieu de se caler pile ;
   2. elle porte un bord superieur jaune de `--kg-jonction` + 1,5 px.

   Les 8 px du haut de ce bord passent DERRIERE l'en-tete (z-index 1030 contre
   40) : ils ne se voient pas quand tout est aligne, et ils bouchent en jaune
   ce qui depasserait si l'en-tete etait un peu plus court que prevu. Restent
   1,5 px de jaune visibles sous l'en-tete, qui donnent la separation franche
   qui manquait. Meme montage sur les fiches sectorielles. */
.kalego-application { --kg-entete: 74px; --kg-jump-h: 58.5px; --kg-jonction: 8px; }
.kalego-application .kg-jump {
  position: sticky; top: calc(var(--kg-entete) - var(--kg-jonction)); z-index: 40;
  background: var(--kg-paper);
  border-top: calc(var(--kg-jonction) + 1.5px) solid var(--kg-accent);
  border-bottom: 1px solid var(--kg-rule);
  box-shadow: 0 6px 18px rgba(15, 8, 32, 0.06);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.kalego-application .kg-jump__inner {
  display: flex; gap: 2px; align-items: stretch;
  max-width: 1140px; margin: 0 auto; padding: 0 16px;
}
.kalego-application .kg-jump a {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 13px 16px; min-height: 44px;
  font-family: var(--kg-body); font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--kg-deep); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.kalego-application .kg-jump a:hover { color: var(--kg-plasma-text); border-bottom-color: var(--kg-plasma-text); }
.kalego-application .kg-jump a:focus-visible { outline: 2px solid var(--kg-plasma-text); outline-offset: -2px; }
/* Le selecteur d'element est indispensable ici : `.kg-jump a` pese 0-2-1 et
   l'emporterait sur un `.kg-jump__cta` seul, qui ne pese que 0-2-0. Mesure
   avant correction : le lien « Évaluation » sortait en --kg-deep, comme les
   cinq autres, et ne se distinguait donc pas du tout. */
.kalego-application .kg-jump a.kg-jump__cta { color: var(--kg-plasma-text); font-weight: 700; }
/* Le sommaire pointe vers des ancres : sans decalage, un titre cible se
   retrouve sous les DEUX barres collantes — l'en-tete et le sommaire. D'ou
   la somme des deux hauteurs, plus une marge de respiration. */
.kalego-application section[id] {
  scroll-margin-top: calc(var(--kg-entete) + var(--kg-jump-h) - var(--kg-jonction) + 16px);
}
/* interactions.js pose tabindex="-1" sur la section visee pour que le focus
   clavier suive le saut. Sans cette regle, la section entiere se retrouverait
   cerclee d'un contour de focus, ce qui n'a aucun sens sur un bloc de contenu :
   c'est le SAUT qui est signale, pas un element interactif. */
.kalego-application section[tabindex="-1"]:focus { outline: none; }
/* Piege propre a cette mise en page, heritee d'Odoo : <html> et <body> sont
   en `overflow: hidden` et c'est #wrapwrap qui porte `overflow: auto`. La page
   ne defile donc PAS dans la fenetre — poser `scroll-behavior` sur <html> seul
   n'aurait aucun effet. La regle vise les deux, au cas ou la structure
   changerait. Le meme constat est documente dans le script de /produits/. */
@media (prefers-reduced-motion: no-preference) {
  html, #wrapwrap { scroll-behavior: smooth; }
}

/* Composants de section */
/* Le surtitre etait en --kg-plasma sur fond clair : 4,05:1 pour du 12 px, sous
   le seuil AA de 4,5:1. Corrige a la migration du 12 aout 2026 — c'est le seul
   texte de taille normale du gabarit qui echouait. Les titres de section en
   --kg-plasma restent tels quels : au-dela de 24 px, le seuil tombe a 3:1. */
.kalego-application .kg-section-eyebrow {
  font-family: var(--kg-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--kg-plasma-text); margin-bottom: 12px;
}
.kalego-application .kg-section-title {
  font-family: var(--kg-display); font-weight: 800;
  font-size: clamp(34px, 4.2vw, 56px); text-transform: uppercase;
  color: var(--kg-deep); margin: 0 0 32px 0; line-height: 1; letter-spacing: 0.005em;
}
.kalego-application .kg-section-title em {
  font-family: var(--kg-display); font-style: normal; font-weight: 800;
  color: var(--kg-plasma); text-transform: uppercase; letter-spacing: 0.005em;
}

/* PROBLÈME */
.kalego-application .kg-problem { background: var(--kg-paper); padding: 88px 0; }
.kalego-application .kg-problem__layout {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start;
}
@media (max-width: 860px) { .kalego-application .kg-problem__layout { grid-template-columns: 1fr; gap: 28px; } }
.kalego-application .kg-problem__body {
  font-family: var(--kg-body); font-size: 18px; line-height: 1.65;
  color: var(--kg-deep); margin: 0;
}
.kalego-application .kg-problem__aside {
  border-left: 3px solid var(--kg-plasma); padding-left: 24px;
}
.kalego-application .kg-problem__aside-q {
  font-family: var(--kg-serif); font-style: italic; font-size: 24px;
  line-height: 1.35; color: var(--kg-deep); margin: 0;
}

/* BÉNÉFICES */
.kalego-application .kg-benefits { background: var(--kg-deep); color: #fff; padding: 96px 0; position: relative; overflow: hidden; }
.kalego-application .kg-benefits::after {
  content: ''; position: absolute; left: -10%; bottom: -30%;
  width: 60%; height: 80%;
  background: radial-gradient(ellipse at center, var(--kg-plasma-glow) 0%, transparent 62%);
  opacity: 0.45; pointer-events: none;
}
.kalego-application .kg-benefits .kg-section-eyebrow { color: var(--kg-accent); position: relative; z-index: 2; }
.kalego-application .kg-benefits .kg-section-title { color: #fff; position: relative; z-index: 2; }
.kalego-application .kg-benefits .kg-section-title em { color: var(--kg-accent); }
/* Chapeau optionnel de la section, calque sur .kg-limits__lede : sert aux
   fiches dont l'application demande une definition avant la liste de benefices
   (anti-buee : surfaces visees, tenue aux cycles de sterilisation). */
.kalego-application .kg-benefits__lede {
  font-family: var(--kg-body); font-size: 17px; line-height: 1.6;
  color: rgba(255,255,255,0.85); max-width: 72ch; margin: 0 0 34px;
  position: relative; z-index: 2;
}
.kalego-application .kg-benefits__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 767px) { .kalego-application .kg-benefits__grid { grid-template-columns: 1fr; } }
.kalego-application .kg-benefit {
  background: var(--kg-deep); padding: 34px 30px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background 0.2s;
}
.kalego-application .kg-benefit:hover { background: var(--kg-deep-2); }
.kalego-application .kg-benefit__check {
  width: 26px; height: 26px; color: var(--kg-accent); flex-shrink: 0;
}
.kalego-application .kg-benefit__title {
  font-family: var(--kg-display); font-weight: 700; font-size: 24px;
  color: #fff; margin: 0; text-transform: uppercase; letter-spacing: 0.01em;
}
.kalego-application .kg-benefit__desc {
  font-family: var(--kg-body); font-size: 15px; line-height: 1.55;
  color: rgba(255,255,255,0.78); margin: 0;
}

/* MÉCANISME */
.kalego-application .kg-mechanism { background: var(--kg-paper-2); padding: 88px 0; }
.kalego-application .kg-mechanism__layout {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center;
}
@media (max-width: 860px) { .kalego-application .kg-mechanism__layout { grid-template-columns: 1fr; gap: 32px; } }
.kalego-application .kg-mechanism__body {
  font-family: var(--kg-body); font-size: 18px; line-height: 1.7;
  color: var(--kg-deep); margin: 0;
}
.kalego-application .kg-mechanism__visual {
  position: relative; aspect-ratio: 4/3;
  background: var(--kg-deep); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--kg-rule);
}
.kalego-application .kg-mechanism__visual::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, var(--kg-plasma-glow) 0%, transparent 60%);
  opacity: 0.6;
}
.kalego-application .kg-mechanism__visual svg {
  position: relative; z-index: 2; width: 42%; height: 42%;
  color: var(--kg-accent);
  filter: drop-shadow(0 0 28px var(--kg-plasma-glow));
}
.kalego-application .kg-mechanism__visual img {
  position: relative; z-index: 2; width: 100%; height: 100%;
  object-fit: cover;
}

/* PROCESSUS */
.kalego-application .kg-process { background: var(--kg-paper-2); padding: 88px 0; }
.kalego-application .kg-process__steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 2px solid var(--kg-deep);
}
@media (max-width: 900px) { .kalego-application .kg-process__steps { grid-template-columns: 1fr; } }
.kalego-application .kg-step {
  padding: 32px 24px 36px; border-right: 1px solid var(--kg-rule);
}
.kalego-application .kg-process__steps > .kg-step:last-child { border-right: none; }
.kalego-application .kg-step__num {
  font-family: var(--kg-serif); font-style: italic; font-weight: 600;
  font-size: 40px; color: var(--kg-plasma); line-height: 1; margin-bottom: 14px;
}
.kalego-application .kg-step__title {
  font-family: var(--kg-display); font-weight: 700; font-size: 22px;
  color: var(--kg-deep); margin: 0 0 8px 0; text-transform: uppercase; letter-spacing: 0.01em;
}
.kalego-application .kg-step__desc {
  font-family: var(--kg-body); font-size: 14px; line-height: 1.5;
  color: var(--kg-deep); opacity: 0.75; margin: 0;
}

/* SECTEURS */
.kalego-application .kg-sectors { background: var(--kg-paper-2); padding: 80px 0; }
.kalego-application .kg-sectors__chips { display: flex; flex-wrap: wrap; gap: 12px; }
.kalego-application .kg-chip {
  text-decoration: none; display: inline-flex; align-items: center;
  font-family: var(--kg-body); font-weight: 600; font-size: 14px;
  letter-spacing: 0.03em; color: var(--kg-deep);
  padding: 11px 20px; min-height: 44px;
  border: 1.5px solid var(--kg-deep); text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.kalego-application .kg-chip:hover { background: var(--kg-deep); color: #fff; }
.kalego-application .kg-chip:focus-visible { outline: 2px solid var(--kg-plasma); outline-offset: 2px; }

/* RECO 4 - encart equipement. Reprend kg-sectors/kg-chip, deja definis plus
   haut ; seul le fond change pour ne pas coller deux bandes identiques. */
.kalego-application .kg-gear { background: var(--kg-paper-2); padding: 76px 0 0; }
.kalego-application .kg-gear__chips { display: flex; flex-wrap: wrap; gap: 12px; }

/* Reco 24 - applications entre elles. Mesure : la fiche mouillabilite ne citait
   aucune autre application, alors que nettoyer, activer et coller sont trois
   etapes du meme procede.
   Le `0` de padding-bas venait de l'epoque ou le CTA suivait immediatement et
   apportait sa propre respiration. Les puces se collaient donc a la section
   suivante. */
.kalego-application .kg-near { background: var(--kg-paper-2); padding: 64px 0 72px; }
.kalego-application .kg-near__chips { display: flex; flex-wrap: wrap; gap: 12px; }

/* CTA */
.kalego-application .kg-cta {
  background: var(--kg-deep); color: #fff; padding: 112px 0;
  position: relative; overflow: hidden; text-align: center;
}
.kalego-application .kg-cta::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 80%; height: 200%;
  background: radial-gradient(ellipse at center, var(--kg-plasma-glow) 0%, transparent 50%);
  opacity: 0.5; pointer-events: none;
}
.kalego-application .kg-cta__inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.kalego-application .kg-cta__line {
  font-family: var(--kg-display); font-weight: 800; font-style: italic;
  font-size: clamp(38px, 5vw, 76px); line-height: 1; text-transform: uppercase;
  margin: 0 0 24px 0; letter-spacing: 0.005em;
}
.kalego-application .kg-cta__line em {
  font-family: var(--kg-display); font-weight: 800; color: var(--kg-accent); text-transform: uppercase;
}
.kalego-application .kg-cta__sub {
  font-family: var(--kg-body); font-size: 18px; font-weight: 300; line-height: 1.5;
  color: rgba(255,255,255,0.85); max-width: 600px; margin: 0 auto 36px;
}
.kalego-application .kg-cta__actions {
  display: flex; flex-wrap: wrap; gap: 16px 22px; justify-content: center; align-items: center;
  margin-bottom: 22px;
}
.kalego-application .kg-cta__reassurance {
  font-family: var(--kg-body); font-size: 13px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7); margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.kalego-application .kg-cta__reassurance svg { width: 16px; height: 16px; color: var(--kg-accent); }

/* ---- Micro-formulaire du CTA final --------------------------------------
   Reprise a l'identique du composant de produits.html (styles) et de
   l'accueil (gestionnaire). interactions.js ramasse tout `form.kg-cta__form`
   sans se soucier de la page : il n'y a aucun JS a ecrire ici, seulement les
   styles, qui etaient portes par `.kalego-produits` et ne descendaient donc
   pas jusqu'ici.
   Raison d'etre, mot pour mot celle de produits.html : le saut vers /contact/
   faisait perdre en route le visiteur qui vient de lire la fiche entiere. */
.kalego-application .kg-cta__form { max-width: 720px; margin: 0 auto 26px; text-align: left; }
.kalego-application .kg-cta__form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px;
}
@media (max-width: 767px) { .kalego-application .kg-cta__form-row { grid-template-columns: 1fr; } }
.kalego-application .kg-cta__form-field label {
  display: block; font-family: var(--kg-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.75); margin-bottom: 8px;
}
.kalego-application .kg-cta__form-field input {
  width: 100%; font-family: var(--kg-body); font-size: 15px; padding: 15px 16px;
  color: #fff; background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.22); border-radius: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.kalego-application .kg-cta__form-field input::placeholder { color: rgba(255,255,255,0.4); }
.kalego-application .kg-cta__form-field input:focus {
  outline: 2px solid var(--kg-accent); outline-offset: 2px;
  border-color: var(--kg-accent); background: rgba(255,255,255,0.12);
}
/* Champ piege : sorti du flux sans display:none, que certains bots detectent. */
.kalego-application .kg-cta__form-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;
}
.kalego-application .kg-cta__form button[type="submit"] { width: 100%; justify-content: center; }
.kalego-application .kg-cta__form button[disabled] { opacity: 0.6; cursor: progress; }
.kalego-application .kg-cta__form-status {
  font-family: var(--kg-body); font-size: 14px; margin: 14px 0 0;
  min-height: 1.2em; text-align: center; color: rgba(255,255,255,0.85);
}
.kalego-application .kg-cta__form-status[data-state="error"] { color: var(--kg-accent-soft); }
.kalego-application .kg-cta__form-status[data-state="ok"] { color: #7BE0A8; }
.kalego-application .kg-cta__form-echo {
  font-family: var(--kg-body); font-size: 13.5px; line-height: 1.5;
  color: rgba(255,255,255,0.8); margin: 0 0 16px; text-align: left;
}
.kalego-application .kg-cta__form-echo[hidden] { display: none; }
.kalego-application .kg-cta__form-echo strong { color: var(--kg-accent); font-weight: 700; }

/* ============================================================================
   GABARITS EN ATTENTE DE DONNEES
   ==========================================================================

   Les blocs qui suivent sont poses et styles, mais leur contenu chiffre n'est
   pas connu. Deux mecanismes, a ne pas confondre :

   1. `.kg-todo` — marqueur d'une VALEUR manquante dans du texte par ailleurs
      reel. Volontairement voyant. Convention deja en place sur les fiches
      produit (Assets/kalego-fiche.css) et sur /produits/.

   2. `[data-kg-brouillon]` — attribut porte par une SECTION dont la totalite
      du contenu est fictive. Un tableau de materiaux entierement compose de
      [x] ferait plus de mal a la credibilite que son absence. La section est
      donc `hidden` en plus de l'attribut.

   POUR PUBLIER UNE SECTION : remplacer les [x], puis retirer `hidden` ET
   `data-kg-brouillon` de la balise <section>. `node check-brouillons.js`
   dresse l'inventaire de ce qui reste.
   ========================================================================== */

/* Filet de securite : meme si `hidden` saute (un `display` concurrent suffit),
   la section reste invisible tant que l'attribut de brouillon est la. */
.kalego-application [data-kg-brouillon] { display: none !important; }

/* Marqueur des donnees a fournir. Volontairement voyant : tant qu'il reste un
   [x] a l'ecran, la fiche n'est pas publiable en l'etat. Meme apparence que
   sur les fiches produit, pour que le signal soit le meme partout. */
.kalego-application .kg-todo {
  background: #FFF4D6; color: #6B4E00; padding: 1px 7px;
  border: 1px dashed #C9A227; border-radius: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em; font-weight: 700; white-space: nowrap;
}

/* ---- RECO 10 : bandeau de references ------------------------------------ */
.kalego-application .kg-refs { background: var(--kg-paper); padding: 56px 0; }
.kalego-application .kg-refs__lede {
  font-family: var(--kg-body); font-size: 15.5px; line-height: 1.6;
  color: var(--kg-deep); text-align: center; max-width: 70ch; margin: 0 auto 28px;
}
.kalego-application .kg-refs__strip {
  display: flex; flex-wrap: wrap; gap: 20px 44px;
  align-items: center; justify-content: center;
}
.kalego-application .kg-refs__logo {
  height: 40px; width: auto; filter: grayscale(1); opacity: 0.72;
  transition: filter 0.2s, opacity 0.2s;
}
.kalego-application .kg-refs__logo:hover { filter: grayscale(0); opacity: 1; }
/* Emplacement vide, en attente du fichier de logo. */
.kalego-application .kg-refs__slot {
  height: 40px; min-width: 120px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed #C9A227; background: #FFF4D6; color: #6B4E00;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700; padding: 0 14px;
}

/* ---- RECO 20 et 9 : schema technique et video --------------------------- */
.kalego-application .kg-mecha-figure { margin: 36px 0 0; }
.kalego-application .kg-mecha-figure img,
.kalego-application .kg-mecha-figure video {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--kg-rule); background: var(--kg-paper);
}
.kalego-application .kg-mecha-figure figcaption {
  font-family: var(--kg-body); font-size: 13.5px; line-height: 1.55;
  color: var(--kg-deep); opacity: 0.75; margin-top: 10px;
}

/* ---- RECO 6 : materiaux et resultats ------------------------------------
   Tableau repris du hub /applications/ (bloc #correspondance) : meme
   mecanique responsive, `data-label` sur les <td> et <thead> sorti du flux
   sous 767 px, pour que rien ne soit masque sur mobile. */
.kalego-application .kg-proof { background: var(--kg-paper); padding: 88px 0; }
.kalego-application .kg-proof__table { overflow-x: auto; }
.kalego-application .kg-proof__table table {
  width: 100%; border-collapse: collapse; min-width: 760px;
  font-family: var(--kg-body); font-size: 15px;
}
.kalego-application .kg-proof__table th {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--kg-plasma-text);
  padding: 0 18px 12px 0; border-bottom: 2px solid var(--kg-deep);
}
.kalego-application .kg-proof__table td {
  padding: 16px 18px 16px 0; border-bottom: 1px solid var(--kg-rule);
  vertical-align: top; color: rgba(15,8,32,0.85); line-height: 1.55;
}
.kalego-application .kg-proof__table td:first-child { font-weight: 700; }
.kalego-application .kg-proof__gain {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; color: var(--kg-plasma-text); white-space: nowrap;
}
.kalego-application .kg-proof__table a {
  color: var(--kg-deep); text-decoration: none;
  border-bottom: 2px solid var(--kg-accent); font-weight: 600;
  display: inline-flex; align-items: center; min-height: 44px;
}
.kalego-application .kg-proof__table a:hover { color: var(--kg-plasma-text); }
.kalego-application .kg-proof__note {
  margin: 20px 0 0; max-width: 78ch;
  font-family: var(--kg-body); font-size: 13.5px; line-height: 1.6;
  color: rgba(15,8,32,0.7);
}
@media (max-width: 767px) {
  .kalego-application .kg-proof__table table { min-width: 0; display: block; }
  .kalego-application .kg-proof__table thead { position: absolute; left: -9999px; }
  .kalego-application .kg-proof__table tbody { display: block; }
  .kalego-application .kg-proof__table tr {
    display: block; border-bottom: 1px solid var(--kg-rule); padding: 18px 0;
  }
  .kalego-application .kg-proof__table td { display: block; padding: 0 0 10px; border: 0; }
  .kalego-application .kg-proof__table td:last-child { padding-bottom: 0; }
  .kalego-application .kg-proof__table td:first-child { font-size: 18px; }
  .kalego-application .kg-proof__table td[data-label]::before {
    content: attr(data-label); display: block;
    font-family: var(--kg-body); font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--kg-plasma-text); margin-bottom: 4px;
  }
}

/* ---- RECO 5 : limites et contre-indications -----------------------------
   Fond sombre volontaire : cette section dit ce que le procede NE fait PAS.
   La distinguer visuellement des sections de benefices evite qu'elle passe
   pour un argumentaire de plus. */
.kalego-application .kg-limits { background: var(--kg-deep); color: #fff; padding: 80px 0; }
.kalego-application .kg-limits .kg-section-eyebrow { color: var(--kg-accent); }
.kalego-application .kg-limits .kg-section-title { color: #fff; }
.kalego-application .kg-limits .kg-section-title em { color: var(--kg-accent); }
.kalego-application .kg-limits__lede {
  font-family: var(--kg-body); font-size: 17px; line-height: 1.6;
  color: rgba(255,255,255,0.85); max-width: 72ch; margin: 0 0 30px;
}
.kalego-application .kg-limits__list { list-style: none; margin: 0; padding: 0; }
.kalego-application .kg-limits__list li {
  position: relative; padding: 0 0 18px 32px; max-width: 78ch;
  font-family: var(--kg-body); font-size: 16px; line-height: 1.6;
  color: rgba(255,255,255,0.82);
}
.kalego-application .kg-limits__list li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 16px; height: 2px; background: var(--kg-accent);
}
.kalego-application .kg-limits__list strong { color: #fff; font-weight: 700; }

/* ---- RECO 5 : integration en ligne -------------------------------------- */
.kalego-application .kg-integration { background: var(--kg-paper); padding: 88px 0; }
.kalego-application .kg-integration__body {
  font-family: var(--kg-body); font-size: 17px; line-height: 1.7;
  color: var(--kg-deep); max-width: 78ch; margin: 0 0 32px;
}
.kalego-application .kg-integration__figures {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--kg-rule); border: 1px solid var(--kg-rule);
}
@media (max-width: 767px) { .kalego-application .kg-integration__figures { grid-template-columns: 1fr; } }
.kalego-application .kg-figure { background: var(--kg-paper); padding: 26px 24px; }
.kalego-application .kg-figure__k {
  display: block; font-family: var(--kg-body); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--kg-plasma-text); margin-bottom: 10px;
}
.kalego-application .kg-figure__v {
  display: block; font-family: var(--kg-display); font-weight: 800;
  font-size: 30px; line-height: 1.05; color: var(--kg-deep); margin-bottom: 8px;
}
.kalego-application .kg-figure__d {
  font-family: var(--kg-body); font-size: 14px; line-height: 1.5;
  color: rgba(15,8,32,0.75); margin: 0;
}

/* ---- RECO 21 : reperes de temps et de cout sur les etapes ---------------- */
.kalego-application .kg-step__meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--kg-plasma-text); margin: 0 0 10px;
}

/* ---- RECO 7 : mini-cas client ------------------------------------------- */
.kalego-application .kg-case { background: var(--kg-paper); padding: 88px 0; }
.kalego-application .kg-case__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--kg-rule); border: 1px solid var(--kg-rule);
}
@media (max-width: 860px) { .kalego-application .kg-case__grid { grid-template-columns: 1fr; } }
.kalego-application .kg-case__item { background: var(--kg-paper); padding: 30px 26px; }
.kalego-application .kg-case__label {
  font-family: var(--kg-body); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--kg-plasma-text); margin-bottom: 12px;
}
.kalego-application .kg-case__item p {
  font-family: var(--kg-body); font-size: 15.5px; line-height: 1.6;
  color: var(--kg-deep); margin: 0;
}
.kalego-application .kg-case__note {
  margin: 18px 0 0; font-family: var(--kg-body); font-size: 13.5px;
  line-height: 1.55; color: rgba(15,8,32,0.7);
}

/* ---- RECO 8 : FAQ -------------------------------------------------------
   <details>/<summary> natif : l'etat expose aux lecteurs d'ecran et la
   recherche dans la page (Ctrl+F ouvre le bloc dans les navigateurs recents)
   sont gratuits. Aucun JS. Repris de /produits/. */
.kalego-application .kg-faqp { background: var(--kg-paper); padding: 84px 0; }
.kalego-application .kg-faqp__lede {
  font-family: var(--kg-body); font-size: 17px; line-height: 1.6;
  color: var(--kg-deep); max-width: 72ch; margin: 0 0 8px;
}
.kalego-application .kg-faqp__list { margin-top: 32px; border-top: 1px solid var(--kg-rule); }
.kalego-application .kg-faqp__item { border-bottom: 1px solid var(--kg-rule); }
.kalego-application .kg-faqp__q {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--kg-body); font-size: 17px; font-weight: 600; line-height: 1.45;
  color: var(--kg-deep); transition: color 0.2s; min-height: 44px;
}
.kalego-application .kg-faqp__q::-webkit-details-marker { display: none; }
.kalego-application .kg-faqp__q:hover { color: var(--kg-plasma-text); }
.kalego-application .kg-faqp__q:focus-visible { outline: 2px solid var(--kg-plasma-text); outline-offset: 2px; }
.kalego-application .kg-faqp__q::after {
  content: ''; position: absolute; right: 8px; top: 50%;
  width: 13px; height: 13px; margin-top: -8px;
  border-right: 2px solid var(--kg-plasma-text);
  border-bottom: 2px solid var(--kg-plasma-text);
  transform: rotate(45deg); transition: transform 0.25s;
}
.kalego-application .kg-faqp__item[open] .kg-faqp__q::after {
  transform: rotate(-135deg); margin-top: -3px;
}
.kalego-application .kg-faqp__a {
  padding: 0 60px 26px 0; max-width: 78ch;
  font-family: var(--kg-body); font-size: 16px; line-height: 1.7; color: var(--kg-deep);
}
.kalego-application .kg-faqp__a p { margin: 0 0 12px; }
.kalego-application .kg-faqp__a p:last-child { margin-bottom: 0; }
@media (max-width: 620px) {
  .kalego-application .kg-faqp__q { font-size: 16px; padding-right: 34px; }
  .kalego-application .kg-faqp__a { padding-right: 0; font-size: 15.5px; }
}

/* ---- RECO 22 : aimant a prospects --------------------------------------
   Le composant lui-meme (.kg-magnet*) vit dans kalego.css : son scope a ete
   elargi a .kalego-application plutot que duplique ici, pour qu'il n'existe
   qu'une seule definition a maintenir. Seule la bande d'accueil est locale. */
.kalego-application .kg-magnet-section { background: var(--kg-paper); padding: 72px 0; }

/* ---- RECO 24 : ce que vous recevez -------------------------------------- */
.kalego-application .kg-offer {
  max-width: 720px; margin: 0 auto 26px; text-align: left;
  border: 1.5px solid rgba(255,255,255,0.22); padding: 26px 28px;
  background: rgba(255,255,255,0.05);
}
.kalego-application .kg-offer h3 {
  font-family: var(--kg-display); font-weight: 700; font-size: 22px;
  text-transform: uppercase; letter-spacing: 0.01em;
  color: #fff; margin: 0 0 16px;
}
.kalego-application .kg-offer ol {
  margin: 0; padding: 0 0 0 22px;
  font-family: var(--kg-body); font-size: 15px; line-height: 1.6;
  color: rgba(255,255,255,0.85);
}
.kalego-application .kg-offer li { margin-bottom: 10px; }
.kalego-application .kg-offer li::marker { color: var(--kg-accent); font-weight: 700; }
.kalego-application .kg-offer strong { color: #fff; font-weight: 700; }
.kalego-application .kg-offer__fine {
  margin: 16px 0 0; font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,0.65);
}

/* ---- EQUIPEMENTS POUR CETTE APPLICATION ---------------------------------
   La bande de puces `.kg-gear` renvoyait vers des familles d'equipement
   (/produits/#activer, #deposer…), jamais vers un produit nomme. Cette
   section presente les appareils eux-memes, avec leur role dans le procede.

   Le choix des produits n'est pas arbitraire : il decoule des ancres de
   famille que chaque fiche cite deja dans sa propre bande d'equipement, et
   les descriptions sont reprises de /produits/. Rien n'est invente ici. */
/* La bande de puces .kg-gear ouvre ce bloc : meme fond, pas de couture. */
.kalego-application .kg-kit { background: var(--kg-paper-2); padding: 44px 0 88px; }
.kalego-application .kg-kit__lede {
  font-family: var(--kg-body); font-size: 17px; line-height: 1.6;
  color: var(--kg-deep); max-width: 74ch; margin: 0 0 34px;
}
.kalego-application .kg-kit__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--kg-rule); border: 1px solid var(--kg-rule);
}
@media (max-width: 767px) { .kalego-application .kg-kit__grid { grid-template-columns: 1fr; } }
/* Photo a gauche, texte a droite. La colonne image est de largeur fixe : une
   colonne fractionnaire ferait varier la taille des vignettes d'une carte a
   l'autre selon la longueur du texte. */
.kalego-application .kg-kit__card {
  background: var(--kg-paper); padding: 24px 26px;
  display: grid; grid-template-columns: 132px 1fr; gap: 22px;
  align-items: start;
  text-decoration: none; transition: background 0.2s;
}
@media (max-width: 480px) {
  .kalego-application .kg-kit__card { grid-template-columns: 96px 1fr; gap: 16px; padding: 20px 18px; }
}
/* `contain` et non `cover` : les sources vont de 0,72 a 2,29 de ratio, du
   portrait au panoramique, et ce sont des prises de vue catalogue detourees
   sur blanc. Un recadrage couperait l'equipement. Le fond blanc de la tuile
   prolonge celui des photos, la jointure ne se voit pas. */
.kalego-application .kg-kit__media {
  aspect-ratio: 4 / 3; background: #fff;
  border: 1px solid var(--kg-rule);
  display: flex; align-items: center; justify-content: center;
  padding: 8px; overflow: hidden;
}
.kalego-application .kg-kit__media img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* Trois produits n'ont de photo nulle part sur le site : postes specialises,
   encres de test et revetement industriel. Plutot qu'une image d'illustration
   qui ferait passer autre chose pour eux, la tuile devient un aplat de marque
   portant un pictogramme. Chaque fiche en compte exactement une. */
.kalego-application .kg-kit__media--sans-photo {
  background: var(--kg-deep); border-color: var(--kg-deep);
  position: relative;
}
.kalego-application .kg-kit__media--sans-photo::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, var(--kg-plasma-glow) 0%, transparent 62%);
  opacity: 0.55;
}
/* `aspect-ratio` plutot que width et height en pourcentage : le viewBox est
   carre, et deux pourcentages resolus sur une boite 4:3 donnaient un cadre
   aplati dans lequel le pictogramme ne remplissait qu'une partie. */
.kalego-application .kg-kit__media--sans-photo svg {
  position: relative; z-index: 2;
  width: 46%; height: auto; aspect-ratio: 1;
  color: var(--kg-accent);
}
.kalego-application .kg-kit__body {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.kalego-application .kg-kit__card:hover { background: #fff; }
.kalego-application .kg-kit__card:focus-visible { outline: 2px solid var(--kg-plasma-text); outline-offset: -2px; }
.kalego-application .kg-kit__role {
  font-family: var(--kg-body); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--kg-plasma-text);
}
.kalego-application .kg-kit__name {
  font-family: var(--kg-display); font-weight: 700; font-size: 24px;
  text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--kg-deep); margin: 0;
}
.kalego-application .kg-kit__desc {
  font-family: var(--kg-body); font-size: 15px; line-height: 1.6;
  color: rgba(15,8,32,0.8); margin: 0;
}
/* La fleche n'est decorative qu'en apparence : elle signale que la carte
   entiere est un lien, ce que le titre seul ne dit pas. */
.kalego-application .kg-kit__go {
  margin-top: auto; padding-top: 12px;
  font-family: var(--kg-body); font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--kg-deep);
  display: inline-flex; align-items: center; gap: 8px;
}
.kalego-application .kg-kit__card:hover .kg-kit__go { color: var(--kg-plasma-text); }
.kalego-application .kg-kit__go svg { transition: transform 0.2s; }
.kalego-application .kg-kit__card:hover .kg-kit__go svg { transform: translateX(4px); }
.kalego-application .kg-kit__all { margin: 28px 0 0; }

/* ============================================================================
   CTA FLOTTANT
   ========================================================================== */
.kalego-application .kg-floating-cta {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--kg-accent);
  color: var(--kg-deep);
  font-family: var(--kg-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 16px 24px;
  border: 2px solid var(--kg-deep);
  border-radius: 0;
  text-decoration: none;
  box-shadow: 4px 4px 0 0 var(--kg-deep), 0 12px 28px rgba(15, 8, 32, 0.25);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  animation: kg-float-in 0.5s ease-out 0.6s both;
}
.kalego-application .kg-floating-cta:hover,
.kalego-application .kg-floating-cta:focus {
  background: var(--kg-accent-soft);
  color: var(--kg-deep);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--kg-deep), 0 16px 36px rgba(15, 8, 32, 0.35);
  outline: none;
}
.kalego-application .kg-floating-cta svg { flex-shrink: 0; transition: transform 0.2s ease; }
.kalego-application .kg-floating-cta:hover svg { transform: translateX(4px); }

@keyframes kg-float-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
  .kalego-application .kg-floating-cta {
    bottom: 16px;
    right: 16px;
    padding: 13px 18px;
    font-size: 12px;
    gap: 8px;
    box-shadow: 3px 3px 0 0 var(--kg-deep), 0 8px 20px rgba(15, 8, 32, 0.25);
  }
}
@media (max-width: 380px) {
  .kalego-application .kg-floating-cta { font-size: 11px; padding: 12px 14px; }
  .kalego-application .kg-floating-cta svg { display: none; }
}

/* ===== RECO 10 - CTA FLOTTANT =====
   min-height : mesure a 38,45 px sur mobile, sous les 44 px d'une cible
   tactile. [hidden] : pose par interactions.js quand le CTA final entre a
   l'ecran.

   NOTE DE MIGRATION (11 aout 2026). Le commentaire d'origine precisait que la
   garde prefers-reduced-motion devait vivre dans le bloc inline « qui vient
   apres la feuille commune dans l'ordre du document ». Ce fichier-ci est
   charge dans le <head>, donc AVANT... mais la regle `animation` qu'il s'agit
   d'annuler est declaree ici meme, quelques lignes plus haut. Meme fichier,
   meme specificite, declaration posterieure : la garde gagne. Le raisonnement
   d'origine tenait a la separation des deux fichiers, qui n'existe plus.

   Second point verifie a la migration : le `zoom: 90%` du <body> a ete retire
   en meme temps. C'etait lui qui ramenait ce min-height de 44 a 40 px reels. */
.kalego-application .kg-floating-cta { min-height: 44px; }
.kalego-application .kg-floating-cta[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .kalego-application .kg-floating-cta { animation: none; }
}
.kg-fcta-close {
  position: fixed; z-index: 10000;
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: #1B0834;
  border: 2px solid #1B0834; border-radius: 50%;
  cursor: pointer; box-shadow: 0 2px 6px rgba(15,8,32,.3);
}
.kg-fcta-close:hover { background: #1B0834; color: #fff; }
.kg-fcta-close:focus-visible { outline: 3px solid #8B5CF6; outline-offset: 2px; }
.kg-fcta-close[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   RYTHME DE LA PAGE — aligne sur les fiches sectorielles
   Ajoute le 19 aout 2026.

   LE PROBLEME. Le travail de rythme fait le 16 aout 2026 sur les 36 fiches
   /industries/ n'avait jamais ete reporte ici. Mesure du 19 aout sur les 12
   fiches application : quatre paires de sections VOISINES partageaient le
   meme fond — mecanisme/materiaux, integration/demarche, cas/secteurs,
   FAQ/applications voisines — sur deux beiges separes par 2 % de luminosite.
   Dix-sept sections d'affilee, aucun repere : la fiche se lisait comme un
   seul bloc qui n'en finissait pas, exactement le defaut corrige ailleurs.

   CE QU'ON FAIT. Les trois mecanismes des fiches sectorielles, transposes :

     1. ALTERNANCE STRICTE. Plus deux sections voisines sur le meme fond, et
        --kg-paper-2 assombri pour que l'alternance se voie (plus haut).
        Seule exception voulue : `.kg-gear` et `.kg-kit`, qui sont deux moities
        d'un meme bloc « equipement » et n'ont pas a etre separees.
     2. BISEAU sur les sections sombres. La limite devient un angle plutot
        qu'une ligne horizontale de plus.
     3. INTERTITRE D'ACTE (`.kg-acte`). Trois reperes — comprendre, choisir,
        decider — la ou il y avait un tunnel.

   Les valeurs (38 px de biseau, palier a 700 px, tailles de l'acte) sont
   reprises telles quelles de kalego-industrie.css : les deux familles de
   fiches se croisent en permanence dans la navigation, elles doivent couper
   la page de la meme facon.
   ══════════════════════════════════════════════════════════════════════════ */

/* -- Biseau -------------------------------------------------------------- */

.kalego-application .kg-biseau--haut {
  clip-path: polygon(0 38px, 100% 0, 100% 100%, 0 100%);
  margin-top: -38px; padding-top: calc(96px + 38px);
}
.kalego-application .kg-biseau--bas {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 38px), 0 100%);
  margin-bottom: -38px; padding-bottom: calc(96px + 38px);
}
.kalego-application .kg-biseau--haut.kg-biseau--bas {
  clip-path: polygon(0 38px, 100% 0, 100% calc(100% - 38px), 0 100%);
}
/* Sous 700 px le biseau mange trop de hauteur pour ce qu'il apporte. */
@media (max-width: 699px) {
  .kalego-application .kg-biseau--haut,
  .kalego-application .kg-biseau--bas,
  .kalego-application .kg-biseau--haut.kg-biseau--bas {
    clip-path: none; margin-top: 0; margin-bottom: 0;
    padding-top: 76px; padding-bottom: 76px;
  }
}

/* -- Intertitre d'acte --------------------------------------------------- */

.kalego-application .kg-acte {
  background: var(--kg-deep); color: #fff;
  padding: 26px 0; position: relative; overflow: hidden;
  border-top: 1px solid rgba(245, 184, 46, 0.28);
}
/* Le sommaire collant est en --kg-deep-2 et vient juste au-dessus du premier
   acte : sans ecart de fond, les deux bandes sombres se liraient comme une
   seule. L'acte passe donc sur le fond le plus sombre, avec un filet d'accent
   pour marquer la jointure. */
.kalego-application .kg-acte::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--kg-accent);
}
.kalego-application .kg-acte::after {
  content: ''; position: absolute; right: -6%; top: -60%;
  width: 40%; height: 220%; pointer-events: none;
  background: radial-gradient(circle at center, rgba(139, 92, 246, 0.42) 0%, transparent 62%);
  filter: blur(22px);
}
.kalego-application .kg-acte .container {
  position: relative; z-index: 2;
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
.kalego-application .kg-acte__num {
  font-family: var(--kg-display); font-weight: 800; font-size: 34px; line-height: 1;
  color: var(--kg-accent);
}
.kalego-application .kg-acte__titre {
  font-family: var(--kg-display); font-weight: 800; font-size: 28px; line-height: 1;
  text-transform: uppercase; color: #fff; margin: 0; letter-spacing: 0.01em;
}
.kalego-application .kg-acte__sous {
  font-family: var(--kg-body); font-size: 14.5px; line-height: 1.45;
  color: rgba(255, 255, 255, 0.76); margin: 0; max-width: 52ch;
}

/* -- Section active dans le sommaire collant -------------------------------
   L'etat etait deja style sur les fiches sectorielles mais n'etait pose par
   personne. `interactions.js` le calcule maintenant pour les deux familles.

   ATTENTION AU FOND. Les fiches sectorielles marquent l'etat actif en
   --kg-accent parce que LEUR sommaire est sombre (--kg-deep-2). Celui des
   fiches application est clair (--kg-paper) : le meme jaune y donnerait
   1,9:1, illisible. On reprend donc --kg-plasma-text (6,79:1 sur ce fond),
   deja la couleur du survol et du lien « Evaluation ». La graisse et le fond
   tres pale distinguent l'etat actif du simple survol.

   Specificite : 0-3-1, a egalite avec `.kg-jump a.kg-jump__cta` plus haut.
   C'est la position dans le fichier qui tranche — cette regle doit rester
   APRES lui, sans quoi le lien « Evaluation » ne s'activerait jamais.
   ------------------------------------------------------------------------- */

.kalego-application .kg-jump a[aria-current="true"] {
  color: var(--kg-plasma-text); font-weight: 700;
  border-bottom-color: var(--kg-plasma-text);
  background: rgba(109, 40, 217, 0.06);
}

/* -- Puces illustrees ------------------------------------------------------
   Transposition de `.kg-chip--mat` des fiches sectorielles. Les listes
   « Secteurs concernes » et « Souvent associee a » etaient des puces de texte
   nu, quand la meme information porte une vignette partout ailleurs sur le
   site. Les vignettes existent deja (88 x 88, generees pour les fiches
   sectorielles et le hub applications) : aucun nouvel asset.
   ------------------------------------------------------------------------- */

.kalego-application .kg-sectors__chips,
.kalego-application .kg-near__chips { gap: 14px; }

.kalego-application a.kg-chip--vign {
  gap: 0; padding: 0; overflow: hidden; text-transform: none;
}
.kalego-application .kg-chip--vign img {
  display: block; width: 44px; height: 44px; flex: none;
  background: #fff; border-right: 1.5px solid var(--kg-deep);
  object-fit: cover;
}
.kalego-application .kg-chip--vign span {
  padding: 0 18px; font-weight: 700; letter-spacing: 0.02em;
}
/* Le survol inverse le bloc entier : sans cette regle, le filet sombre de la
   vignette disparaitrait dans le fond devenu sombre lui aussi. */
.kalego-application a.kg-chip--vign:hover img,
.kalego-application a.kg-chip--vign:focus-visible img {
  border-right-color: var(--kg-accent);
}

/* -- Bande d'image en tete d'etape -----------------------------------------
   Meme composant que `.kg-step__bande` des fiches sectorielles, aux memes
   visuels (`/Assets/Industries/derives/procede-*.webp`) : les deux gabarits
   racontent la meme demarche, ils doivent la montrer pareil.
   ------------------------------------------------------------------------- */

.kalego-application .kg-process__steps > .kg-step { padding: 0 0 32px; }
.kalego-application .kg-process__steps > .kg-step > *:not(.kg-step__bande) {
  margin-left: 24px; margin-right: 24px;
}
.kalego-application .kg-step__bande {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 8 / 3; margin-bottom: 18px; background: var(--kg-deep-2);
}
.kalego-application .kg-step__bande img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* Voile mauve leger, pour que les trois bandes se tiennent malgre des photos
   d'origines differentes. */
.kalego-application .kg-step__bande::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(91, 33, 182, 0.18) 0%, rgba(27, 8, 52, 0.34) 100%);
}
/* Le numero passe sur la bande, en pastille. Il gardait ici un chiffre en
   italique serif de 40 px qui flottait au-dessus du vide. */
.kalego-application .kg-step__bande .kg-step__num {
  position: absolute; left: 0; bottom: 0; z-index: 2; margin: 0;
  background: var(--kg-accent); color: var(--kg-deep);
  font-family: var(--kg-display); font-style: normal; font-weight: 800;
  font-size: 28px; line-height: 1; padding: 6px 14px 4px;
}

/* -- Apparition au defilement ----------------------------------------------
   La fiche fait 17 sections : arriver sur chacune d'un bloc, sans transition,
   accentuait l'effet de tunnel decrit plus haut. Le mouvement est volontairement
   court (14 px, 480 ms) — c'est une ponctuation, pas une animation.

   ENRICHISSEMENT PROGRESSIF STRICT. L'etat masque n'est pose QUE si
   `interactions.js` a marque la racine `data-kg-reveal` : sans JavaScript, sans
   IntersectionObserver, ou si le script echoue, la page reste entierement
   visible. C'est le seul montage acceptable pour du contenu commercial.
   ------------------------------------------------------------------------- */

.kalego-application[data-kg-reveal] .kg-reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.48s ease-out, transform 0.48s ease-out;
  will-change: opacity, transform;
}
.kalego-application[data-kg-reveal] .kg-reveal.kg-reveal--vu {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .kalego-application[data-kg-reveal] .kg-reveal {
    opacity: 1; transform: none; transition: none;
  }
}
