/* ============================================================
   ITIWE — Fiche détail Collaborateur IA · canon G.3 V2.1
   Structure éditoriale verrouillée (Lexique V3 G.3 V2.1) :
     Hero · Mission (tri-axe) · 🔌 Connecteurs · 🛡️ Garde-fous ·
     Expertise · Cible · 🤝 Intelligence Complémentaire · 🧭 Référent · 🚀 CTA
   ------------------------------------------------------------
   DÉPEND de assets/tokens.css (tokens couleur/typo/espace + .skill-page)
   et de galerie-v2/marquage-ia.css (poinçon IA). Palette tokens stricte ;
   aucune couleur nouvelle. Append-only — parité galerie.html / approche.html.
   ============================================================ */

/* La fiche réutilise .skill-page (largeur premium 880px) + son rythme vertical
   (séparateurs dashed entre sections). On surcharge seulement ce qui est canon V2.1. */

/* ---------- HERO ---------- */
.fiche-hero { padding: 104px 0 var(--space-10); }
.fiche-hero .breadcrumb { margin-bottom: var(--space-8); }

.fiche-hero__row { display: flex; align-items: center; gap: var(--space-6); margin: var(--space-4) 0 var(--space-6); }
.fiche-hero__figure { width: 78px; height: 70px; display: grid; place-items: center; flex-shrink: 0; }
.fiche-hero__figure svg { width: 100%; height: 100%; }

.fiche-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: var(--r-pill);
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.fiche-chip__n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 600 10px/1 var(--font-mono); }
.fiche-chip--I  { background: color-mix(in srgb, var(--ink-blue) 12%, var(--paper-warm)); color: var(--ink-blue); border: 1px solid color-mix(in srgb, var(--ink-blue) 28%, transparent); }
.fiche-chip--I  .fiche-chip__n { background: var(--ink-blue); color: var(--paper-warm); }
.fiche-chip--II { background: color-mix(in srgb, var(--vermillon) 12%, var(--paper-warm)); color: var(--vermillon); border: 1px solid color-mix(in srgb, var(--vermillon) 30%, transparent); }
.fiche-chip--II .fiche-chip__n { background: var(--vermillon); color: var(--paper-warm); }
.fiche-chip--vitrine { background: var(--ink); color: var(--paper-warm); border: 1px solid var(--ink); }
.fiche-chip--vitrine .fiche-chip__n { background: var(--vermillon); color: var(--paper-warm); }

.fiche-hero h1 { margin: 0; }
.fiche-hero h1 .ia-mark--sceau { margin-left: 0.14em; }
.fiche-hero__price { font: 400 italic 21px/1.4 var(--font-display); color: var(--ink); margin: var(--space-5) 0 0; }
.fiche-hero__price b { font-style: normal; font-weight: 600; }
.fiche-hero__price span { color: var(--ink-60); font-style: normal; font-family: var(--font-body); font-size: 15px; }
.fiche-hero__price--none { font: 400 13px/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-40); text-transform: uppercase; }

@media (max-width: 720px) {
  .fiche-hero { padding-top: 76px; }
  .fiche-hero__row { gap: var(--space-4); }
  .fiche-hero__figure { width: 58px; height: 52px; }
}

/* ---------- Titres de section canon (avec marqueur emoji G.3) ---------- */
.fiche-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fiche-h__emoji { font-size: 0.78em; line-height: 1; filter: saturate(0.9); }
.skill-page h2.fiche-h { margin-bottom: var(--space-2); }

/* ---------- MISSION — 3 promesses tri-axe ---------- */
.tri-axe { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-10); border: 1px solid var(--ink-10); border-radius: var(--r-md); overflow: hidden; }
.tri-axe > li { background: var(--paper-warm); padding: var(--space-6); display: grid; gap: var(--space-2); align-content: start; margin: 0; }
.tri-axe__label { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--vermillon); }
.tri-axe__label::before { content: ''; width: 7px; height: 7px; background: var(--vermillon); transform: rotate(45deg); flex-shrink: 0; }
.tri-axe__txt { font: 400 14.5px/1.55 var(--font-body); color: var(--ink-80); margin: 0; text-wrap: pretty; }
@media (max-width: 720px) { .tri-axe { grid-template-columns: 1fr; } }

/* ---------- CALLOUTS normatifs (🔌 Connecteurs · 🛡️ Garde-fous) ---------- */
.callout { border-radius: var(--r-md); padding: var(--space-8) var(--space-10); margin: var(--space-6) 0 0; }
.callout__title { display: flex; align-items: center; gap: 12px; font: 600 19px/1.2 var(--font-display); letter-spacing: -0.01em; margin: 0 0 var(--space-5); }
.callout__title .fiche-h__emoji { font-size: 0.92em; }
.callout__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.callout__list li { position: relative; padding-left: 22px; font: 400 15px/1.55 var(--font-body); color: var(--ink-80); margin: 0; }
.callout__list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; transform: rotate(45deg); }
.callout__k { font-weight: 600; color: var(--ink); }
.callout__d { color: var(--ink-80); }

/* blue_bg — Connecteurs branchés (encre bleue) */
.callout--connecteurs { background: color-mix(in srgb, var(--ink-blue) 7%, var(--paper-warm)); border: 1px solid color-mix(in srgb, var(--ink-blue) 22%, transparent); }
.callout--connecteurs .callout__title { color: var(--ink-blue); }
.callout--connecteurs .callout__list li::before { background: var(--ink-blue); }

/* red_bg — Garde-fous posés (vermillon-sceau) */
.callout--gardefous { background: color-mix(in srgb, var(--vermillon) 7%, var(--paper-warm)); border: 1px solid color-mix(in srgb, var(--vermillon) 24%, transparent); }
.callout--gardefous .callout__title { color: var(--vermillon-deep); }
.callout--gardefous .callout__list li::before { background: var(--vermillon); }

@media (max-width: 720px) { .callout { padding: var(--space-6); } }

/* ---------- EXPERTISE — sub-skills (profil II) ---------- */
.exp-skills { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: 1px; background: var(--ink-10); border-top: 1px solid var(--ink-10); border-bottom: 1px solid var(--ink-10); }
.exp-skills > li { background: var(--paper); padding: var(--space-4) 0; display: grid; grid-template-columns: 2.2em 1fr; gap: var(--space-4); align-items: baseline; margin: 0; }
.exp-skills__n { font: 500 13px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--vermillon); }
.exp-skills__b { display: grid; gap: 3px; }
.exp-skills__t { font: 500 16px/1.4 var(--font-body); color: var(--ink); }
.exp-skills__d { font: 400 14px/1.5 var(--font-body); color: var(--ink-60); }
.exp-count { font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-40); }

/* ---------- CIBLE — typologies ---------- */
.cible-list { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-3); }
.cible-list > li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; font: 400 16px/1.55 var(--font-body); color: var(--ink-80); margin: 0; }
.cible-list > li::before { content: ''; width: 8px; height: 8px; margin-top: 7px; background: var(--ink-40); transform: rotate(45deg); flex-shrink: 0; }
.cible-list b { color: var(--ink); font-weight: 600; }

/* ---------- BLOCS PROSE org-side (🤝 IC · 🧭 Référent) ---------- */
.bloc-prose { border-radius: var(--r-md); padding: var(--space-10); margin: var(--space-6) 0 0; }
.bloc-prose__kicker { display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 var(--space-3); }
.bloc-prose__title { font: 600 italic 27px/1.18 var(--font-display); letter-spacing: -0.015em; margin: 0 0 var(--space-4); }
.bloc-prose p { font-size: 15.5px; line-height: 1.65; margin: 0 0 var(--space-4); }
.bloc-prose p:last-child { margin-bottom: 0; }

.bloc-prose--ic { background: var(--paper-deep); border: 1px solid var(--ink-10); }
.bloc-prose--ic .bloc-prose__kicker { color: var(--vermillon); }
.bloc-prose--ic .bloc-prose__title { color: var(--ink); }

.bloc-prose--referent { background: var(--ink); color: var(--paper-warm); }
.bloc-prose--referent .bloc-prose__kicker { color: var(--vermillon); }
.bloc-prose--referent .bloc-prose__title { color: var(--paper-warm); }
.bloc-prose--referent p { color: color-mix(in srgb, var(--paper-warm) 80%, transparent); }

@media (max-width: 720px) { .bloc-prose { padding: var(--space-8); } }

/* ---------- CTA terminal (dual selon profil) ---------- */
.fiche-cta__price { font: 400 italic 17px/1.4 var(--font-display); color: var(--ink); margin: var(--space-6) 0 0; }
.fiche-cta__price b { font-style: normal; font-weight: 600; }
.fiche-cta__march { font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-40); margin: var(--space-6) 0 0; }

/* ---------- SLOT — contenu Notion fiche-mère en attente (dump NoHa) ---------- */
/* Marqueur d'injection éditoriale : la STRUCTURE canon est posée, le texte
   spécifique vient du dump Notion (SSOT). Retirer .is-pending une fois injecté. */
.slot { color: var(--ink-60); font-style: italic; }
.is-pending .callout__d,
.is-pending .tri-axe__txt,
.is-pending .cible-slot,
.is-pending .exp-skills__d,
.is-pending .prose-slot { position: relative; }
.slot-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 10px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-40); background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px dashed var(--ink-20); border-radius: var(--r-xs); padding: 3px 7px;
}
.prose-slot { display: grid; gap: var(--space-2); padding: var(--space-5); border: 1px dashed var(--ink-20); border-radius: var(--r-sm); background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.prose-slot p { color: var(--ink-40); font-style: italic; margin: 0; }
.bloc-prose--referent .prose-slot { border-color: color-mix(in srgb, var(--paper-warm) 28%, transparent); background: color-mix(in srgb, var(--paper-warm) 6%, transparent); }
.bloc-prose--referent .prose-slot p { color: color-mix(in srgb, var(--paper-warm) 55%, transparent); }
.bloc-prose--referent .slot-tag { color: color-mix(in srgb, var(--paper-warm) 60%, transparent); border-color: color-mix(in srgb, var(--paper-warm) 30%, transparent); background: color-mix(in srgb, var(--paper-warm) 8%, transparent); }

/* Bandeau aperçu pilote (échafaudage validation — retiré en prod) */
.pilot-bar { background: var(--ink); color: var(--paper-warm); }
.pilot-bar__inner { max-width: 880px; margin: 0 auto; padding: 10px max(var(--container-padding), 48px); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pilot-bar__tag { font: 600 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--vermillon); }
.pilot-bar__txt { font: 400 12px/1.4 var(--font-body); color: color-mix(in srgb, var(--paper-warm) 72%, transparent); }
@media (max-width: 720px) { .pilot-bar__inner { padding: 10px var(--container-padding); } }

/* ============================================================
   Icônes maison (remplacent les emojis G.3) — jeu DS « Collaborateur IA »
   SVG inline monochrome, héritent de currentColor du titre/kicker porteur.
   Grille 24×24, trait 1.75, angles francs (butt/miter), dérivées du poinçon.
   ============================================================ */
.itw-icon { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.14em; }
/* le span porteur ne teinte plus (filtre emoji) ; taille calée par contexte */
.fiche-h__emoji { filter: none; line-height: 0; }
/* titres de callout (🔌 connecteurs · 🛡️ garde-fous) : 0.92em hérité — OK */
.callout__title .fiche-h__emoji { font-size: 0.96em; }
/* kickers mono 11px (🤝 IC · 🧭 référent · 🚀 CTA) : agrandir pour lisibilité */
.bloc-prose__kicker .fiche-h__emoji { font-size: 1.35em; }