/* ==========================================================================
   kalego-industrie.css — feuille commune aux 36 fiches sectorielles
   (/industries/industrie-*.html et /en/industries/industrie-*.html)

   Extraite de leurs blocs <style> inline le 15 aout 2026 (reco 15 de
   amelioration_industries-fiche.md). Mesure d'origine : 10 229 octets inline
   par fiche, soit 368 244 octets cumules sur les 36 pages, retelecharges a
   chaque visite puisque _headers met le HTML en `max-age=0, must-revalidate`.
   Ici, avec un `?v=` et la regle `immutable` de _headers, la feuille est
   telechargee une fois par an.

   MEME PRECAUTION QUE POUR kalego-application.css : cette feuille est servie
   avec un cache `immutable` d'un an. Toute modification exige un
   `node bump-version.js`, sinon elle reste invisible pour les visiteurs deja
   venus. Le script connait ce fichier (entree ajoutee le 15 aout 2026).

   `.kg-skip` n'est PAS ici : le lien d'evitement doit etre style avant tout
   rendu, il reste donc en critique dans le <head> de chaque fiche.

   GABARITS EN ATTENTE DE DONNEES — meme convention que sur les fiches
   application et les fiches produit :
     `.kg-todo`  marqueur d'une VALEUR manquante, volontairement voyant.
                 Tant qu'un [x] est a l'ecran, la section n'est pas publiable.
     `node check-brouillons.js` en dresse l'inventaire.
   ========================================================================== */

/* ── Jetons ───────────────────────────────────────────────────────────────
   Les polices sont chargees par un <link> dans le <head>, pas par un @import
   ici : un @import place apres la premiere regle est rejete par le navigateur,
   et c'est exactement le defaut qui laissait les 36 fiches sans police web
   (reco 13, mesure du 11 aout 2026).
   ────────────────────────────────────────────────────────────────────────── */

.kalego-industry {
  --kg-deep: #1B0834;
  --kg-deep-2: #2A1450;
  --kg-accent: #F5B82E;
  --kg-accent-soft: #FFD56B;
  --kg-plasma: #8B5CF6;

  /* Reco 14. Le violet de marque #8B5CF6 donne 4,05:1 sur le fond papier :
     sous le seuil AA de 4,5:1 (WCAG 2.1 SC 1.4.3), et la classe qui l'utilise
     apparait 5 fois par fiche. On garde #8B5CF6 pour les halos et les
     degrades, ou le contraste n'est pas normatif, et on introduit une valeur
     assombrie reservee au TEXTE. */
  --kg-plasma-texte: #5B21B6;

  --kg-plasma-glow: rgba(139, 92, 246, 0.55);
  --kg-ink: #0F0820;
  --kg-paper: #FAFAF7;

  /* Reco 20. L'ancien #F1EFE8 se distinguait a peine de #FAFAF7 : la cesure
     entre deux sections claires ne se lisait pas. Valeur assombrie juste
     assez pour que la limite existe, sans casser le contraste du texte
     (#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;

  /* Re-mesure du 19 aout 2026 : header#top est `position: sticky; top: 0` et
     fait 74 px, pas 67. Valeur stable a 375, 768, 1000 et 1280 px de large,
     en francais comme en anglais. Avec 67, la barre d'ancres se collait 7 px
     trop haut et son premier bandeau passait derriere l'en-tete ; c'est ce
     jeu entre les deux barres collantes, dans un sens ou dans l'autre, qui
     laissait voir la page defiler entre elles.

     `--kg-anchors-h` = 40 px de barre + les 9,5 px du bord jaune de jonction
     (voir plus bas). Les ancres de section doivent degager les deux barres. */
  --kg-header-h: 74px;
  --kg-anchors-h: 49.5px;
  /* Hauteur du bord jaune qui passe derriere l'en-tete. Voir .kg-ianchors. */
  --kg-jonction: 8px;
}

.kalego-industry .kg-display { font-family: var(--kg-display); }
.kalego-industry .kg-body { font-family: var(--kg-body); }

/* ── Marqueur de valeur manquante ─────────────────────────────────────────
   Meme apparence que sur /produits/ et les fiches application, pour que le
   signal soit le meme partout dans le site.
   ────────────────────────────────────────────────────────────────────────── */

.kalego-industry .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;
}

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

/* ── HERO ─────────────────────────────────────────────────────────────────
   L'image sectorielle est le FOND du hero, sous un voile mauve. Elle n'est
   plus une vignette posee a droite : elle occupe toute la bande et le texte
   passe par-dessus. C'est aussi ce qui libere la photo rectangulaire pour la
   section « Le defi », ou elle a plus a dire.

   Le voile n'est pas decoratif : sans lui, le titre blanc tomberait sur des
   photos claires (optique, biotechnologie) et deviendrait illisible. Il est
   donc dimensionne pour tenir sur la plus claire des 18.
   ────────────────────────────────────────────────────────────────────────── */

.kalego-industry .kg-ihero {
  position: relative;
  background-color: var(--kg-deep);
  overflow: hidden;
  padding: 92px 0 84px;
  isolation: isolate;
}

/* Couche 1 : la photo.
   C'est le <picture> qu'on positionne, pas le <img>. kalego.css met tous les
   <picture> en `position: relative` ; comme <picture> est `display: inline` et
   sans dimension propre, un <img> en `position: absolute; inset: 0` a
   l'interieur se resolvait contre une boite de 0 x 0 — l'image etait chargee
   mais rendue en 0 x 0, donc invisible. Constate le 16 aout 2026. */
.kalego-industry .kg-ihero > picture {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
}
.kalego-industry .kg-ihero__fond {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* Couche 2 : le voile mauve. Un aplat teinte en `multiply` garde le detail de
   la photo la ou un aplat opaque l'ecraserait, et un degrade lateral creuse le
   cote gauche, sous le texte. */
.kalego-industry .kg-ihero__voile {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(27, 8, 52, 0.96) 0%, rgba(27, 8, 52, 0.90) 34%,
                    rgba(42, 20, 80, 0.76) 62%, rgba(58, 28, 104, 0.66) 100%),
    linear-gradient(0deg, rgba(139, 92, 246, 0.34) 0%, rgba(139, 92, 246, 0.16) 100%);
}
/* Couche 3 : le halo plasma, au-dessus du voile pour qu'il reste lumineux. */
.kalego-industry .kg-ihero__glow {
  position: absolute; right: -10%; top: 8%; z-index: 1;
  width: 62%; height: 84%;
  background: radial-gradient(circle at center, var(--kg-plasma-glow) 0%, rgba(139,92,246,0.12) 32%, transparent 66%);
  filter: blur(24px); pointer-events: none; mix-blend-mode: screen;
}
/* Filet d'accent en pied de hero : la bascule vers la page claire. */
.kalego-industry .kg-ihero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 3px; background: var(--kg-accent);
}

.kalego-industry .kg-ihero .container { position: relative; z-index: 2; }
.kalego-industry .kg-ihero__inner { min-width: 0; max-width: 780px; }

/* Le fil d'Ariane est desormais le composant `.kg-crumbs` de kalego.css,
   partage par toutes les pages. Rien de specifique aux fiches secteur ici. */

.kalego-industry .kg-ihero__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-industry .kg-ihero__eyebrow::before {
  content: ''; display: inline-block; width: 28px; height: 1px;
  background: var(--kg-accent); vertical-align: middle; margin-right: 14px;
}
.kalego-industry .kg-ihero__title {
  font-family: var(--kg-display); font-weight: 800;
  font-size: clamp(44px, 6.5vw, 92px); line-height: 0.94;
  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-industry .kg-ihero__title em {
  font-style: normal; color: var(--kg-accent);
  font-family: var(--kg-display); font-weight: 800; text-transform: uppercase;
}
.kalego-industry .kg-ihero__sub {
  font-family: var(--kg-body); font-size: 19px; line-height: 1.55;
  color: rgba(255,255,255,0.9); max-width: 560px; margin-bottom: 36px;
}
.kalego-industry .kg-ihero__ctas { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; }

/* ── SOMMAIRE ANCRE (reco 8) ──────────────────────────────────────────────
   Mesure du 11 aout : 3 300 px de haut en 1280x800, 3 900 px en 375x812, et
   aucun repere de navigation. La barre se colle sous le header du site.
   ────────────────────────────────────────────────────────────────────────── */

/* La jonction avec l'en-tete du site (19 aout 2026). Les deux barres sont
   collantes et se touchent : sans rien entre elles, la limite ne se lit pas,
   et le moindre ecart de hauteur laisse passer un filet de page qui defile
   dans l'interstice. La barre remonte donc de `--kg-jonction` et 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 20) : 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 separent le menu du site du sommaire. Meme
   montage sur les fiches application (Assets/kalego-application.css). */
.kalego-industry .kg-ianchors {
  position: sticky; top: calc(var(--kg-header-h) - var(--kg-jonction)); z-index: 20;
  background: var(--kg-deep-2);
  border-top: calc(var(--kg-jonction) + 1.5px) solid var(--kg-accent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.kalego-industry .kg-ianchors__list {
  display: flex; gap: 4px; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.kalego-industry .kg-ianchors__list::-webkit-scrollbar { height: 3px; }
.kalego-industry .kg-ianchors__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); }
.kalego-industry .kg-ianchors a {
  display: inline-flex; align-items: center; white-space: nowrap;
  min-height: 31px; padding: 9px 15px;   /* 31 x 0,9 = 27,9 px reels */
  font-family: var(--kg-body); font-size: 13px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.kalego-industry .kg-ianchors a:hover { color: #fff; background: rgba(255,255,255,0.06); }
.kalego-industry .kg-ianchors a:focus-visible {
  outline: 2px solid var(--kg-accent); outline-offset: -2px; color: #fff;
}
.kalego-industry .kg-ianchors a[aria-current="true"] {
  color: var(--kg-accent); border-bottom-color: var(--kg-accent);
}

/* Les titres doivent degager le header ET la barre d'ancres. */
.kalego-industry [id] { scroll-margin-top: calc(var(--kg-header-h) + var(--kg-anchors-h) - var(--kg-jonction) + 12px); }

/* ── Boutons ──────────────────────────────────────────────────────────────── */

.kalego-industry .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-industry .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-industry .kg-btn-primary:focus-visible {
  outline: 3px solid var(--kg-deep); outline-offset: 2px;
}
.kalego-industry .kg-btn-primary svg { transition: transform 0.2s; }
.kalego-industry .kg-btn-primary:hover svg { transform: translateX(4px); }

.kalego-industry .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-industry .kg-btn-secondary:hover {
  border-color: var(--kg-accent); background: rgba(245, 184, 46, 0.08); color: var(--kg-accent);
}
.kalego-industry .kg-btn-secondary:focus-visible {
  outline: 3px solid var(--kg-accent); outline-offset: 2px;
}

/* ── Composants de section ────────────────────────────────────────────────── */

.kalego-industry .kg-section-eyebrow {
  font-family: var(--kg-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--kg-plasma-texte); margin-bottom: 12px;
}
/* Sur fond sombre, le violet assombri ne passerait plus : on repasse a
   l'accent, qui donne un contraste tres large sur #1B0834. */
.kalego-industry .kg-section--dark .kg-section-eyebrow { color: var(--kg-accent); }

.kalego-industry .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-industry .kg-section-title em {
  font-family: var(--kg-display); font-style: normal; font-weight: 800;
  color: var(--kg-plasma-texte); text-transform: uppercase; letter-spacing: 0.005em;
}
.kalego-industry .kg-section--dark .kg-section-title { color: #fff; }
.kalego-industry .kg-section--dark .kg-section-title em { color: var(--kg-accent); }

/* Mesure de lecture, generalisee aux blocs de prose (reco 20, point 2). */
.kalego-industry .kg-prose { max-width: 68ch; }

/* ── DEFI ─────────────────────────────────────────────────────────────────
   Deux colonnes a partir de 900 px : le texte a gauche garde sa mesure de
   lecture, la photo rectangulaire du secteur occupe la droite. C'est ici
   qu'elle sert le mieux — en face du paragraphe qui decrit le probleme, et
   non derriere un titre en capitales de 92 px.
   ────────────────────────────────────────────────────────────────────────── */

.kalego-industry .kg-challenge { background: var(--kg-paper); padding: 92px 0; }
.kalego-industry .kg-challenge__grid {
  display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center;
}
@media (min-width: 900px) {
  .kalego-industry .kg-challenge__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px;
  }
}
.kalego-industry .kg-challenge__body {
  min-width: 0; max-width: 62ch; font-family: var(--kg-body);
  font-size: 18px; line-height: 1.65; color: var(--kg-deep);
}
.kalego-industry .kg-challenge__body p { margin: 0 0 20px 0; }
.kalego-industry .kg-challenge__body p:last-child { margin-bottom: 0; }

.kalego-industry .kg-challenge__media { position: relative; min-width: 0; }
.kalego-industry .kg-challenge__media img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--kg-rule);
}
/* Cadre decale : deux traits qui depassent en bas a droite. Donne du relief
   sans ombre portee, dans l'esprit anguleux du reste du site. */
.kalego-industry .kg-challenge__media::before {
  content: ''; position: absolute; z-index: 0;
  right: -14px; bottom: -14px; width: 62%; height: 62%;
  border-right: 3px solid var(--kg-accent);
  border-bottom: 3px solid var(--kg-accent);
  pointer-events: none;
}
.kalego-industry .kg-challenge__media img { position: relative; z-index: 1; }

/* ── DONNEES DE PROCEDE (reco 1) ──────────────────────────────────────────
   Section sombre au milieu de la page : elle casse le tunnel beige et signale
   que c'est ici que se trouve le coeur technique (reco 20, point 1).
   ────────────────────────────────────────────────────────────────────────── */

.kalego-industry .kg-idata {
  background: var(--kg-deep); color: #fff;
  padding: 84px 0; position: relative; overflow: hidden;
}
.kalego-industry .kg-idata::before {
  content: ''; position: absolute; right: -8%; top: -30%;
  width: 55%; height: 160%; pointer-events: none;
  background: radial-gradient(circle at center, rgba(139,92,246,0.30) 0%, transparent 62%);
  filter: blur(30px);
}
.kalego-industry .kg-idata > .container { position: relative; z-index: 2; }

.kalego-industry .kg-idata__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kalego-industry .kg-idata__table {
  width: 100%; min-width: 560px; border-collapse: collapse;
  font-family: var(--kg-body); font-size: 15px;
}
.kalego-industry .kg-idata__table th,
.kalego-industry .kg-idata__table td {
  text-align: left; padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  vertical-align: top;
}
.kalego-industry .kg-idata__table thead th {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--kg-accent); border-bottom-color: rgba(245, 184, 46, 0.45);
}
.kalego-industry .kg-idata__table tbody th {
  font-weight: 600; color: #fff; width: 34%;
}
.kalego-industry .kg-idata__table td { color: rgba(255, 255, 255, 0.86); }
.kalego-industry .kg-idata__table tbody tr:last-child th,
.kalego-industry .kg-idata__table tbody tr:last-child td { border-bottom: none; }

.kalego-industry .kg-idata__note {
  margin: 26px 0 0; max-width: 68ch;
  font-family: var(--kg-body); font-size: 14.5px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.kalego-industry .kg-idata__note a { color: var(--kg-accent); }

/* ── CE QUE LE PLASMA CHANGE ──────────────────────────────────────────────
   Reco 19. Mesure du 11 aout : 67 des 72 cartes du site portaient le meme
   eclair SVG. Les icones sont remplacees par une numerotation typographique —
   elle hierarchise au lieu de decorer, et il n'y a plus de jeu d'icones a
   entretenir.
   ────────────────────────────────────────────────────────────────────────── */

.kalego-industry .kg-iapps { background: var(--kg-paper-2); padding: 88px 0; }
.kalego-industry .kg-iapps__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--kg-rule);
  border: 1px solid var(--kg-rule);
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 767px) { .kalego-industry .kg-iapps__grid { grid-template-columns: 1fr; } }
.kalego-industry .kg-iapp {
  background: var(--kg-paper); padding: 30px 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.kalego-industry .kg-iapp__num {
  font-family: var(--kg-display); font-weight: 800; font-size: 30px; line-height: 1;
  color: var(--kg-plasma-texte); letter-spacing: 0.02em;
}
.kalego-industry .kg-iapp__title {
  font-family: var(--kg-display); font-weight: 700; font-size: 24px;
  color: var(--kg-deep); margin: 0; text-transform: uppercase; letter-spacing: 0.01em;
}
.kalego-industry .kg-iapp__desc {
  font-family: var(--kg-body); font-size: 15px; line-height: 1.55;
  color: var(--kg-deep); opacity: 0.82; margin: 0;
}

/* ── PROCEDE (reco 2) ─────────────────────────────────────────────────────
   Meme vocabulaire de classes que les fiches application (`kg-step`), pour
   que les deux gabarits restent lisibles ensemble.
   ────────────────────────────────────────────────────────────────────────── */

.kalego-industry .kg-iprocess { background: var(--kg-paper); padding: 84px 0; }
.kalego-industry .kg-iprocess__steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--kg-rule); margin: 0; padding: 0; list-style: none;
}
@media (max-width: 1023px) { .kalego-industry .kg-iprocess__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .kalego-industry .kg-iprocess__steps { grid-template-columns: 1fr; } }
.kalego-industry .kg-step {
  padding: 0 0 26px; border-right: 1px solid var(--kg-rule);
  display: flex; flex-direction: column; gap: 10px;
  background: var(--kg-paper);
}
.kalego-industry .kg-step > *:not(.kg-step__bande) { margin-left: 24px; margin-right: 24px; }

/* Bande d'image en tete d'etape. Les visuels viennent de la section
   « Comment ca fonctionne » de la page d'accueil : les deux pages racontent la
   meme demarche, elles doivent la montrer pareil. Servis en 640 x 240 par
   build-industrie-images.py, pas en 880 x 550 comme l'original. */
.kalego-industry .kg-step__bande {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 8 / 3; margin-bottom: 18px; background: var(--kg-deep-2);
}
.kalego-industry .kg-step__bande img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* Voile mauve leger, pour que les quatre bandes se tiennent malgre des photos
   d'origines differentes. */
.kalego-industry .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. */
.kalego-industry .kg-step__bande .kg-step__num {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--kg-accent); color: var(--kg-deep);
  padding: 4px 14px 2px; font-size: 28px;
}
.kalego-industry .kg-iprocess__steps > .kg-step:last-child { border-right: none; }
@media (max-width: 1023px) {
  .kalego-industry .kg-iprocess__steps > .kg-step:nth-child(2n) { border-right: none; }
  .kalego-industry .kg-iprocess__steps > .kg-step:nth-child(-n+2) { border-bottom: 1px solid var(--kg-rule); }
}
@media (max-width: 599px) {
  .kalego-industry .kg-step { border-right: none; border-bottom: 1px solid var(--kg-rule); }
  .kalego-industry .kg-iprocess__steps > .kg-step:last-child { border-bottom: none; }
}
.kalego-industry .kg-step__num {
  font-family: var(--kg-display); font-weight: 800; font-size: 34px; line-height: 1;
  color: var(--kg-plasma-texte);
}
.kalego-industry .kg-step__title {
  font-family: var(--kg-display); font-weight: 700; font-size: 22px;
  text-transform: uppercase; color: var(--kg-deep); margin: 0;
}
.kalego-industry .kg-step__meta {
  font-family: var(--kg-body); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--kg-deep); opacity: 0.62;
}
.kalego-industry .kg-step__desc {
  font-family: var(--kg-body); font-size: 15px; line-height: 1.55;
  color: var(--kg-deep); opacity: 0.84; margin: 0;
}

/* Ligne d'article contextuelle (reco 7). */
.kalego-industry .kg-iread {
  margin: 26px 0 0; font-family: var(--kg-body);
  font-size: 15.5px; line-height: 1.6; color: var(--kg-deep);
}
.kalego-industry .kg-iread a { color: var(--kg-plasma-texte); font-weight: 600; }

/* ── EQUIPEMENT RECOMMANDE (reco 5) ───────────────────────────────────────── */

.kalego-industry .kg-iequip { background: var(--kg-paper); padding: 84px 0; }
.kalego-industry .kg-iequip__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 899px) { .kalego-industry .kg-iequip__grid { grid-template-columns: 1fr; } }
.kalego-industry .kg-iequip__card {
  background: var(--kg-paper); border: 1px solid var(--kg-rule);
  padding: 0 0 24px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.kalego-industry .kg-iequip__card > *:not(.kg-iequip__media) { margin-left: 24px; margin-right: 24px; }

/* Photo de l'equipement, en tete de carte. Sur fond sombre : les photos
   produit sont detourees sur des fonds clairs varies, un fond de marque les
   ramene a une meme famille. */
.kalego-industry .kg-iequip__media {
  display: block; aspect-ratio: 4 / 3; background: var(--kg-deep-2);
  overflow: hidden; margin-bottom: 16px;
}
.kalego-industry .kg-iequip__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s ease;
}
.kalego-industry .kg-iequip__card:hover .kg-iequip__media img { transform: scale(1.04); }
.kalego-industry .kg-iequip__card:hover {
  border-color: var(--kg-plasma-texte);
  transform: translateY(-2px); box-shadow: 0 10px 26px rgba(27, 8, 52, 0.10);
}
.kalego-industry .kg-iequip__name {
  font-family: var(--kg-display); font-weight: 700; font-size: 22px;
  text-transform: uppercase; color: var(--kg-deep); margin: 0; line-height: 1.05;
}
.kalego-industry .kg-iequip__why {
  font-family: var(--kg-body); font-size: 14.5px; line-height: 1.55;
  color: var(--kg-deep); opacity: 0.82; margin: 0; flex: 1;
}
.kalego-industry .kg-iequip__link {
  font-family: var(--kg-body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--kg-plasma-texte); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 27px;
}
.kalego-industry .kg-iequip__link::after { content: '\2192'; transition: transform 0.2s; }
.kalego-industry .kg-iequip__card:hover .kg-iequip__link::after { transform: translateX(4px); }
.kalego-industry .kg-iequip__link:focus-visible { outline: 2px solid var(--kg-plasma-texte); outline-offset: 3px; }

/* ── MATERIAUX ────────────────────────────────────────────────────────────── */

.kalego-industry .kg-materials { background: var(--kg-paper-2); padding: 84px 0; }
.kalego-industry .kg-materials__chips,
.kalego-industry .kg-itreat__chips {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
.kalego-industry .kg-chip {
  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: 10px 18px; border: 1.5px solid var(--kg-deep);
  text-transform: uppercase; text-decoration: none;
  background: transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.kalego-industry a.kg-chip:hover,
.kalego-industry a.kg-chip:focus-visible {
  background: var(--kg-deep); color: var(--kg-paper);
}
/* Reco 11. Les chips matieres deviennent cliquables : il leur faut un focus
   visible qui leur soit propre, ce que l'ancien gabarit n'avait pas. */
.kalego-industry a.kg-chip:focus-visible {
  outline: 3px solid var(--kg-accent); outline-offset: 2px;
}
.kalego-industry .kg-materials__note {
  margin-top: 28px; font-family: var(--kg-body); font-size: 15px;
  line-height: 1.55; color: var(--kg-deep); opacity: 0.78; max-width: 68ch;
}

/* ── VIGNETTES DE MATERIAUX ───────────────────────────────────────────────
   Chaque matiere porte sa vignette : le vocabulaire de l'ingenieur est fait de
   sigles (PEEK, TPO, COC / COP) qui ne disent rien a l'oeil. La vignette est
   sur fond blanc, d'ou le cadre blanc de la pastille — elle doit se lire comme
   un echantillon pose sur la page, pas comme une icone teintee.

   Ce sont des ILLUSTRATIONS generees par build-materiaux.py, pas des photos :
   l'acces automatise a Pexels est bloque sans cle API. Le script bascule sur
   des photos avec `--pexels` des qu'une cle est fournie, sans toucher au HTML.
   ────────────────────────────────────────────────────────────────────────── */

.kalego-industry .kg-materials__chips { gap: 14px; }

.kalego-industry a.kg-chip--mat,
.kalego-industry span.kg-chip--mat {
  display: inline-flex; align-items: center; gap: 0;
  padding: 0; border: 1.5px solid var(--kg-deep); overflow: hidden;
  text-transform: none;
}
.kalego-industry .kg-chip--mat img {
  display: block; width: 40px; height: 40px; flex: none;
  background: #fff; border-right: 1.5px solid var(--kg-deep);
}
.kalego-industry .kg-chip--mat span {
  padding: 10px 16px;
  font-family: var(--kg-body); font-weight: 600; font-size: 14px;
  letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.15;
}
.kalego-industry a.kg-chip--mat:hover span,
.kalego-industry a.kg-chip--mat:focus-visible span {
  background: var(--kg-deep); color: var(--kg-paper);
}
.kalego-industry a.kg-chip--mat:hover,
.kalego-industry a.kg-chip--mat:focus-visible { background: transparent; }

/* ── FAQ (reco 4) ─────────────────────────────────────────────────────────
   <details>/<summary> natifs : aucun JS, clavier et lecteur d'ecran gratuits.
   ────────────────────────────────────────────────────────────────────────── */

.kalego-industry .kg-ifaq { background: var(--kg-paper); padding: 84px 0; }
.kalego-industry .kg-ifaq__list { max-width: 80ch; border-top: 1px solid var(--kg-rule); }
.kalego-industry .kg-ifaq__item { border-bottom: 1px solid var(--kg-rule); }
.kalego-industry .kg-ifaq__item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 18px 2px; min-height: 31px;
  font-family: var(--kg-body); font-size: 16.5px; font-weight: 700;
  color: var(--kg-deep);
}
.kalego-industry .kg-ifaq__item summary::-webkit-details-marker { display: none; }
.kalego-industry .kg-ifaq__item summary::after {
  content: '+'; flex: none;
  font-family: var(--kg-display); font-size: 26px; line-height: 1;
  color: var(--kg-plasma-texte); transition: transform 0.2s;
}
.kalego-industry .kg-ifaq__item[open] summary::after { content: '\2013'; }
.kalego-industry .kg-ifaq__item summary:hover { color: var(--kg-plasma-texte); }
.kalego-industry .kg-ifaq__item summary:focus-visible {
  outline: 3px solid var(--kg-accent); outline-offset: 2px;
}
.kalego-industry .kg-ifaq__item p {
  margin: 0 0 20px; padding-right: 44px; max-width: 68ch;
  font-family: var(--kg-body); font-size: 15.5px; line-height: 1.65;
  color: var(--kg-deep); opacity: 0.88;
}

/* ══════════════════════════════════════════════════════════════════════════
   RYTHME DE LA PAGE
   Ajoute le 16 aout 2026.

   LE PROBLEME. La page enchainait jusqu'a trois sections claires de suite —
   « Questions frequentes », « Aller plus loin », « Aller vite » — sur deux
   beiges trop proches l'un de l'autre. Le lecteur ne voyait pas qu'il changeait
   de sujet : tout se lisait comme un seul bloc qui n'en finissait pas.

   CE QU'ON FAIT. Trois mecanismes, pas un seul aplat de couleur :

     1. ALTERNANCE STRICTE. Plus jamais deux sections voisines sur le meme
        fond. C'est la base, mais ca ne suffit pas : deux beiges qui alternent
        restent deux beiges.
     2. BISEAU sur les sections sombres (`--biseau`). La limite cesse d'etre
        une ligne horizontale de plus : elle devient un angle, et l'oeil
        enregistre une rupture.
     3. INTERTITRE D'ACTE (`.kg-acte`). Une bande fine et sombre qui annonce le
        changement de propos — « comprendre », puis « choisir », puis
        « decider ». Trois reperes dans la page, la ou il y avait un tunnel.
   ══════════════════════════════════════════════════════════════════════════ */

/* Biseau : la section sombre entame la claire par un angle. `clip-path` plutot
   qu'un pseudo-element en rotation, pour que le fond suive au redimensionnement
   sans calcul. */
.kalego-industry .kg-biseau--haut {
  clip-path: polygon(0 38px, 100% 0, 100% 100%, 0 100%);
  margin-top: -38px; padding-top: calc(84px + 38px);
}
.kalego-industry .kg-biseau--bas {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 38px), 0 100%);
  margin-bottom: -38px; padding-bottom: calc(84px + 38px);
}
.kalego-industry .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-industry .kg-biseau--haut,
  .kalego-industry .kg-biseau--bas,
  .kalego-industry .kg-biseau--haut.kg-biseau--bas {
    clip-path: none; margin-top: 0; margin-bottom: 0;
    padding-top: 72px; padding-bottom: 72px;
  }
}

/* Intertitre d'acte. Bande courte, sombre, avec un numero en gros et un
   libelle : elle coupe la page sans couter un ecran de defilement. */
.kalego-industry .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 lisaient comme une
   seule. L'acte passe donc sur le fond le plus sombre, avec un filet d'accent
   pour marquer la jointure. */
.kalego-industry .kg-acte::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--kg-accent);
}
.kalego-industry .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-industry .kg-acte .container {
  position: relative; z-index: 2;
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
.kalego-industry .kg-acte__num {
  font-family: var(--kg-display); font-weight: 800; font-size: 34px; line-height: 1;
  color: var(--kg-accent);
}
.kalego-industry .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-industry .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;
}

/* ── RESSOURCE TELECHARGEABLE ─────────────────────────────────────────────
   Fond accent plutot que beige : c'est le seul endroit de la page ou on demande
   quelque chose sans rien vendre, et il doit se voir comme tel entre la FAQ et
   les secteurs voisins.
   ────────────────────────────────────────────────────────────────────────── */

.kalego-industry .kg-iressource {
  background: linear-gradient(140deg, #FFF3D6 0%, #FCE9BE 100%);
  padding: 76px 0; position: relative; overflow: hidden;
  border-top: 3px solid var(--kg-accent);
  border-bottom: 3px solid var(--kg-accent);
}
.kalego-industry .kg-iressource__grid {
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
}
@media (min-width: 900px) {
  .kalego-industry .kg-iressource__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 56px; }
}
.kalego-industry .kg-iressource .kg-section-title { margin-bottom: 18px; }
.kalego-industry .kg-iressource .kg-section-eyebrow { color: #7A5200; }
.kalego-industry .kg-iressource__lede {
  font-family: var(--kg-body); font-size: 16.5px; line-height: 1.6;
  color: var(--kg-deep); max-width: 60ch; margin: 0 0 18px;
}
.kalego-industry .kg-iressource__points {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 8px;
}
.kalego-industry .kg-iressource__points li {
  position: relative; padding-left: 26px;
  font-family: var(--kg-body); font-size: 15px; line-height: 1.5; color: var(--kg-deep);
}
.kalego-industry .kg-iressource__points li::before {
  content: ''; position: absolute; left: 4px; top: 8px;
  width: 8px; height: 8px; background: var(--kg-deep);
}
/* Etat du document : le PDF n'existe pas encore. On le DIT, plutot que de
   promettre un telechargement immediat qui n'arrivera pas. */
.kalego-industry .kg-iressource__etat {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-family: var(--kg-body); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; color: #6B4E00;
}
.kalego-industry .kg-iressource .kg-iform {
  background: rgba(255, 255, 255, 0.86); border-color: rgba(27, 8, 52, 0.18);
}

/* ── PREUVE (reco 3) ──────────────────────────────────────────────────────
   Le gabarit est pose mais AUCUN secteur ne l'active aujourd'hui : publier un
   temoignage exige un accord ecrit du client. Le generateur ne produit la
   section que pour les secteurs dont `preuve` est renseigne.
   ────────────────────────────────────────────────────────────────────────── */

.kalego-industry .kg-iproof { background: var(--kg-paper); padding: 72px 0; }
.kalego-industry .kg-iproof__quote {
  margin: 0; max-width: 74ch;
  border-left: 4px solid var(--kg-accent); padding-left: 26px;
}
.kalego-industry .kg-iproof__quote p {
  font-family: var(--kg-serif); font-size: 21px; line-height: 1.5;
  color: var(--kg-deep); margin: 0 0 16px;
}
.kalego-industry .kg-iproof__cite {
  font-family: var(--kg-body); font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--kg-deep); opacity: 0.72; font-style: normal;
}

/* ── OFFRE D'ESSAI (reco 24) ──────────────────────────────────────────────── */

.kalego-industry .kg-ioffer {
  border: 2px solid var(--kg-deep); background: var(--kg-paper);
  padding: 26px 28px; margin: 32px 0 0; max-width: 76ch;
}
.kalego-industry .kg-ioffer__list { margin: 0; }
.kalego-industry .kg-ioffer__list > div {
  display: grid; grid-template-columns: minmax(120px, 170px) 1fr; gap: 6px 18px;
  padding: 9px 0; border-bottom: 1px solid var(--kg-rule);
}
.kalego-industry .kg-ioffer__list > div:last-child { border-bottom: none; }
@media (max-width: 599px) { .kalego-industry .kg-ioffer__list > div { grid-template-columns: 1fr; } }
.kalego-industry .kg-ioffer__list dt {
  font-family: var(--kg-body); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--kg-plasma-texte);
}
.kalego-industry .kg-ioffer__list dd {
  margin: 0; font-family: var(--kg-body); font-size: 15px; line-height: 1.55;
  color: var(--kg-deep);
}

/* ── TRAITEMENTS ET SECTEURS VOISINS ──────────────────────────────────────── */

.kalego-industry .kg-itreat { background: var(--kg-paper-2); padding: 84px 0; }
.kalego-industry .kg-itreat--alt { background: var(--kg-paper-2); }

/* ── TRAITEMENTS UTILES ───────────────────────────────────────────────────
   Les chips sont devenues des cartes : un libelle seul ne disait pas ce qu'on
   trouverait derriere, et une puce de 39 px se clique mal. Chaque carte porte
   maintenant le nom du traitement, une ligne de contexte, et sa vignette a
   droite.
   ────────────────────────────────────────────────────────────────────────── */

.kalego-industry .kg-iapplist {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 767px) { .kalego-industry .kg-iapplist { grid-template-columns: 1fr; } }

.kalego-industry .kg-iappcard {
  display: grid; grid-template-columns: minmax(0, 1fr) 104px;
  align-items: stretch; min-height: 104px;
  background: var(--kg-paper); border: 1px solid var(--kg-rule);
  text-decoration: none; overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.kalego-industry .kg-itreat .kg-iappcard { background: var(--kg-paper); }
.kalego-industry .kg-iappcard:hover {
  border-color: var(--kg-plasma-texte);
  transform: translateY(-2px); box-shadow: 0 10px 26px rgba(27, 8, 52, 0.10);
}
.kalego-industry .kg-iappcard:focus-visible { outline: 3px solid var(--kg-accent); outline-offset: 2px; }
.kalego-industry .kg-iappcard__texte {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 18px 20px; min-width: 0;
}
.kalego-industry .kg-iappcard__name {
  font-family: var(--kg-display); font-weight: 700; font-size: 23px;
  text-transform: uppercase; color: var(--kg-deep); line-height: 1.05;
}
.kalego-industry .kg-iappcard__why {
  font-family: var(--kg-body); font-size: 13.5px; line-height: 1.5;
  color: var(--kg-deep); opacity: 0.78;
}
/* La bande d'image a droite : plein cadre, sans marge, pour trancher avec le
   fond papier de la carte. */
.kalego-industry .kg-iappcard__media { position: relative; overflow: hidden; background: var(--kg-deep-2); }
.kalego-industry .kg-iappcard__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s ease;
}
.kalego-industry .kg-iappcard:hover .kg-iappcard__media img { transform: scale(1.06); }
.kalego-industry .kg-iappcard__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(139, 92, 246, 0.20) 0%, rgba(27, 8, 52, 0.22) 100%);
}
/* Carte « toutes les applications » : pas de photo, un chevron a la place. */
.kalego-industry .kg-iappcard--toutes .kg-iappcard__media {
  background: var(--kg-deep);
  display: flex; align-items: center; justify-content: center;
  color: var(--kg-accent); font-size: 30px; font-family: var(--kg-display);
}
.kalego-industry .kg-iappcard--toutes .kg-iappcard__media::after { content: none; }

/* Reco 10. Les deux puces nues deviennent des cartes avec vignette et une
   ligne qui dit ce qu'on trouvera en cliquant. Les thumbs existent deja
   (Assets/Industries/thumbs/, 18 fichiers de ~2,5 Ko). */
.kalego-industry .kg-ivois__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: 0 0 28px; padding: 0; list-style: none;
}
@media (max-width: 899px) { .kalego-industry .kg-ivois__grid { grid-template-columns: 1fr; } }
.kalego-industry .kg-ivois__card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--kg-paper); border: 1px solid var(--kg-rule);
  padding: 16px; text-decoration: none;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.kalego-industry .kg-itreat--alt .kg-ivois__card { background: var(--kg-paper); }
.kalego-industry .kg-ivois__card:hover {
  border-color: var(--kg-plasma-texte);
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(27, 8, 52, 0.10);
}
.kalego-industry .kg-ivois__card:focus-visible {
  outline: 3px solid var(--kg-accent); outline-offset: 2px;
}
.kalego-industry .kg-ivois__card img {
  flex: none; width: 76px; height: 48px; object-fit: cover; display: block;
}
.kalego-industry .kg-ivois__name {
  font-family: var(--kg-display); font-weight: 700; font-size: 20px;
  text-transform: uppercase; color: var(--kg-deep); margin: 0 0 4px; line-height: 1.05;
}
.kalego-industry .kg-ivois__why {
  font-family: var(--kg-body); font-size: 13.5px; line-height: 1.5;
  color: var(--kg-deep); opacity: 0.78; margin: 0;
}

.kalego-industry .kg-itest { margin-top: 28px; }
.kalego-industry .kg-itest__sub {
  font-family: var(--kg-body); font-size: 13.5px; line-height: 1.5;
  color: var(--kg-deep); opacity: 0.78; margin: 12px 0 0;
}

/* ── FORMULAIRE COURT (reco 22) ───────────────────────────────────────────── */

.kalego-industry .kg-iform-wrap { background: var(--kg-paper); padding: 84px 0; }
.kalego-industry .kg-iform {
  max-width: 640px; background: var(--kg-paper);
  border: 1px solid var(--kg-rule); padding: 28px;
  display: grid; gap: 16px;
}
.kalego-industry .kg-iform label {
  display: block; margin-bottom: 6px;
  font-family: var(--kg-body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--kg-deep);
}
.kalego-industry .kg-iform input,
.kalego-industry .kg-iform select {
  width: 100%; box-sizing: border-box;
  min-height: 49px; padding: 12px 14px;
  font-family: var(--kg-body); font-size: 16px; color: var(--kg-deep);
  background: #fff; border: 1.5px solid var(--kg-rule);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.kalego-industry .kg-iform input:focus,
.kalego-industry .kg-iform select:focus {
  outline: none; border-color: var(--kg-plasma-texte);
  box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.16);
}
.kalego-industry .kg-iform button { justify-self: start; cursor: pointer; }
.kalego-industry .kg-iform__note {
  margin: 0; font-family: var(--kg-body); font-size: 13px; line-height: 1.5;
  color: var(--kg-deep); opacity: 0.72;
}
.kalego-industry .kg-iform__note a { color: var(--kg-plasma-texte); }
.kalego-industry .kg-iform__status {
  margin: 0; font-family: var(--kg-body); font-size: 14.5px; font-weight: 600;
}
.kalego-industry .kg-iform__status[data-etat="ok"]     { color: #14622F; }
.kalego-industry .kg-iform__status[data-etat="erreur"] { color: #A3121B; }

/* ── INTERLOCUTEUR (reco 25) ────────────────────────────────────────
   Le pave adresse + courriel a demenage dans Assets/kalego.css le 19 aout
   2026, sans scope : il est desormais pose au bas de TOUS les CTA finaux du
   site, et pas seulement des 36 fiches sectorielles. Une feuille scopee a
   `.kalego-industry` ne pouvait plus l'heberger.
   Le balisage, lui, n'a pas bouge d'un octet dans les fiches.
   ──────────────────────────────────────────────────────────────────── */

/* ── CTA FINAL ────────────────────────────────────────────────────────────── */

.kalego-industry .kg-cta {
  background: var(--kg-deep); color: #fff; padding: 104px 0;
  position: relative; overflow: hidden; text-align: center;
}
.kalego-industry .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-industry .kg-cta__inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.kalego-industry .kg-cta__line {
  font-family: var(--kg-display); font-weight: 800; font-style: italic;
  font-size: clamp(38px, 5vw, 72px); line-height: 1; text-transform: uppercase;
  margin: 0 0 24px 0; letter-spacing: 0.005em;
}
.kalego-industry .kg-cta__line em {
  font-family: var(--kg-display); font-weight: 800; color: var(--kg-accent); text-transform: uppercase;
}
.kalego-industry .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-industry .kg-cta__actions {
  display: flex; flex-wrap: wrap; gap: 16px 22px; justify-content: center; align-items: center;
  margin-bottom: 22px;
}
.kalego-industry .kg-cta__reassurance {
  font-family: var(--kg-body); font-size: 13px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.78); margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.kalego-industry .kg-cta__reassurance svg { width: 16px; height: 16px; color: var(--kg-accent); flex: none; }

/* ── CTA FLOTTANT ─────────────────────────────────────────────────────────── */

.kalego-industry .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; min-height: 49px; text-decoration: none;
  box-shadow: 4px 4px 0 0 var(--kg-deep), 0 12px 30px rgba(15, 8, 32, 0.28);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  animation: kg-float-in 0.4s ease both;
}
.kalego-industry .kg-floating-cta:hover,
.kalego-industry .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-industry .kg-floating-cta:focus-visible {
  outline: 3px solid var(--kg-deep); outline-offset: 3px;
}
.kalego-industry .kg-floating-cta svg { flex-shrink: 0; transition: transform 0.2s ease; }
.kalego-industry .kg-floating-cta:hover svg { transform: translateX(4px); }

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

/* ── Preferences et impression ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .kalego-industry .kg-floating-cta { animation: none; }
  .kalego-industry * { transition-duration: 0.01ms !important; }
  .kalego-industry html { scroll-behavior: auto; }
}

@media print {
  .kalego-industry .kg-floating-cta,
  .kalego-industry .kg-ianchors { display: none !important; }
  .kalego-industry .kg-ifaq__item p { display: block !important; }
}
