/* ============================================================
   enbi — Cognitive Snippets
   Tools of clarification, not decoration. Each snippet helps the
   reader perform one precise cognitive operation.
   Depends on ../colors_and_type.css tokens.
   ============================================================ */

.snip {
  font-family: var(--font-sans);
  color: var(--ink);
  --snip-pad: 22px 26px;
  margin: 0;
}

/* Eyebrow — names the cognitive operation (Inter, tracked) */
.snip__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0 0 12px;
}

/* All UI labels / meta inside snippets are Inter. They are <p> elements, so
   they must out-specify the foundation's `.enbi p { font-family: serif }`
   (specificity 0,1,1) — the `.snip` prefix raises these to 0,2,0. */
.snip .snip__eyebrow,
.snip .snip__legal-h,
.snip .temoignage__label,
.snip .experience__label,
.snip .experience__meta,
.snip .publication__label,
.snip .publication__meta {
  font-family: var(--font-sans);
}
.snip__eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.snip__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--cadre);
  margin: 0 0 10px;
}
.snip__body {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
}
.snip .resolve { color: var(--resolution); font-style: normal; }

/* ---------- 1 · Ce qui bloque vraiment — diagnostic (navy, light frame) */
.snip--bloque {
  padding: var(--snip-pad);
  border: var(--frame-light);
  border-radius: var(--radius);
  background: var(--surface);
}
.snip--bloque .snip__eyebrow { color: var(--cadre); }

/* ---------- 2 · À ne pas confondre — discrimination (blue accent, sorting lines)
   Same card pattern as #1; short phrases → Inter (certainty). */
.snip--confondre {
  padding: var(--snip-pad);
  border: var(--frame-method);
  border-radius: var(--radius);
  background: var(--surface);
}
.snip--confondre .snip__eyebrow { color: var(--methode); }
.snip--confondre .snip__lines { list-style: none; margin: 0; padding: 0; }
.snip--confondre .snip__lines li {
  font-family: var(--font-sans);
  font-size: 15.5px;
  color: var(--cadre);
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.snip--confondre .snip__lines li:first-child { border-top: none; padding-top: 0; }

/* ---------- 3 · Comment on remet les choses dans l'ordre — method (blue, medium frame, steps) */
.snip--ordre {
  padding: var(--snip-pad);
  border: 1.5px solid var(--methode-200);
  border-radius: var(--radius);
  background: var(--methode-tint);
}
.snip--ordre .snip__eyebrow { color: var(--methode); }
.snip--ordre .snip__steps { list-style: none; margin: 6px 0 0; padding: 0; }
.snip--ordre .snip__steps li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 9px 0;
  font-family: var(--font-sans);
  font-size: 15.5px;
  color: var(--cadre);
}
.snip--ordre .snip__num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  color: var(--cadre);
  width: 24px; height: 24px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--methode-tint); /* overridden per-step to ramp intensity */
}
.snip--ordre .snip__steps li.is-resolve { color: var(--cadre); }
.snip--ordre .snip__steps li.is-resolve .snip__num {
  color: #fff; background: var(--resolution);
}

/* ---------- 4 · Ce qui nous permet de l'affirmer — evidence (blue, light frame) */
.snip--preuve {
  padding: 18px 22px;
  border: 1px solid var(--methode-200);
  border-radius: var(--radius);
  background: var(--surface);
}
.snip--preuve .snip__eyebrow { color: var(--methode); }
.snip--preuve .snip__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.snip--preuve .snip__chips span {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--methode-700);
  background: var(--methode-tint);
  border: 1px solid var(--methode-200);
  border-radius: var(--radius-sm);
  padding: 5px 13px;
}

/* ---------- 5 · La vraie question — pivot (navy, horizontal box) */
.snip--question {
  padding: 26px 28px;
  border-radius: var(--radius);
  background: var(--cadre);
  color: var(--on-dark);
}
.snip--question .snip__eyebrow { color: var(--on-dark); }
.snip--question .snip__q {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.35;
  color: var(--on-dark);
  margin: 0;
  max-width: 52ch;
}

/* ---------- 6 · En clair — stabilised conclusion = the "net" end of the cadre
   scale: a crisp surface edge, no elevation, no border in a colour other than the
   fill. The edge is arrêté/precise simply by NOT dissolving into the fond. */
.snip--enclair {
  padding: var(--snip-pad);
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
}
.snip--enclair .snip__eyebrow { color: var(--cadre); }
.snip--enclair .snip__body { color: var(--cadre); }

/* ---------- 7 · Attention à ce point — caution (navy/blue, never coral unless it calls for action) */
.snip--attention {
  padding: 18px 22px;
  border: var(--frame-light);
  background: var(--surface);
  border-radius: var(--radius);
}
.snip--attention .snip__eyebrow { color: var(--methode); }
.snip--attention .snip__body {
  font-family: var(--font-sans);
  font-size: 15.5px;
  color: var(--cadre);
  line-height: 1.5;
}

/* ---------- 8 · Ce que ça permet — benefit */
.snip--permet .snip__eyebrow { color: var(--cadre); }

/* ---------- 9 · Ce qu'on évite de subir — cost (navy, short Inter lines) */
.snip--evite .snip__eyebrow { color: var(--cadre); }
.snip--evite .snip__list { list-style: none; margin: 0; padding: 0; }
.snip--evite .snip__list li {
  font-family: var(--font-sans);
  font-size: 15.5px;
  color: var(--ink-2);
  padding: 7px 0 7px 20px;
  position: relative;
}
.snip--evite .snip__list li::before {
  content: "—"; position: absolute; left: 0; color: var(--ink-4);
}

/* ---------- 10 · Au fait — legal mention (tiny, faded, no card) */
.snip--legal {
  font-family: var(--font-sans);
}
.snip--legal .snip__legal-h {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-4); margin: 0 0 4px;
}
.snip--legal p {
  font-family: var(--font-sans);
  font-size: 12px; line-height: 1.5;
  color: var(--ink-3); margin: 0; max-width: 70ch;
}

/* ---------- 11 · Témoignage — a situated external voice / human proof.
   Not a card, no fill, no rounded box: a parenthetical aside in the flow.
   A large lateral coral parenthesis signals "an outside voice intervenes". */
.snip--temoignage {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 28px;
  align-items: start;
  max-width: 700px;
  margin: 0;
  padding: 8px 0;
}
.temoignage__mark {
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  margin-top: 4px;
  background-color: var(--resolution);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M12%2C15H6.11A9%2C9%2C0%2C0%2C1%2C10%2C8.86l1.79-1.2L10.69%2C6%2C8.9%2C7.2A11%2C11%2C0%2C0%2C0%2C4%2C16.35V23a2%2C2%2C0%2C0%2C0%2C2%2C2h6a2%2C2%2C0%2C0%2C0%2C2-2V17A2%2C2%2C0%2C0%2C0%2C12%2C15Z%22%2F%3E%3Cpath%20d%3D%22M26%2C15H20.11A9%2C9%2C0%2C0%2C1%2C24%2C8.86l1.79-1.2L24.7%2C6%2C22.9%2C7.2A11%2C11%2C0%2C0%2C0%2C18%2C16.35V23a2%2C2%2C0%2C0%2C0%2C2%2C2h6a2%2C2%2C0%2C0%2C0%2C2-2V17A2%2C2%2C0%2C0%2C0%2C26%2C15Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M12%2C15H6.11A9%2C9%2C0%2C0%2C1%2C10%2C8.86l1.79-1.2L10.69%2C6%2C8.9%2C7.2A11%2C11%2C0%2C0%2C0%2C4%2C16.35V23a2%2C2%2C0%2C0%2C0%2C2%2C2h6a2%2C2%2C0%2C0%2C0%2C2-2V17A2%2C2%2C0%2C0%2C0%2C12%2C15Z%22%2F%3E%3Cpath%20d%3D%22M26%2C15H20.11A9%2C9%2C0%2C0%2C1%2C24%2C8.86l1.79-1.2L24.7%2C6%2C22.9%2C7.2A11%2C11%2C0%2C0%2C0%2C18%2C16.35V23a2%2C2%2C0%2C0%2C0%2C2%2C2h6a2%2C2%2C0%2C0%2C0%2C2-2V17A2%2C2%2C0%2C0%2C0%2C26%2C15Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  user-select: none;
}
.temoignage__body { min-width: 0; }
.temoignage__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--resolution);
  margin: 0 0 14px;
}
.temoignage__quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.55;
  color: var(--cadre);
  margin: 0;
  text-wrap: pretty;
}
.temoignage__attr {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.temoignage__name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--cadre);
}
.temoignage__role {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-2);
}
@media (max-width: 560px) {
  .snip--temoignage { column-gap: 16px; }
  .temoignage__mark { font-size: 80px; }
}

/* ---------- 12 · Expérience / Intervention terrain — a lived experience or
   intervention presented as PROOF of capability, not a CV line, blog card or
   SaaS case-study. Sober editorial row: fine top rule, stacked hierarchy. */
.snip--experience {
  border-top: 1px solid var(--line-strong);
  padding-top: 26px;
  max-width: 760px;
  margin: 0;
}
.experience__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--methode);
  margin: 0 0 16px;
  display: flex; align-items: center; gap: 9px;
}
.experience__label .ic { font-size: 16px; }
.experience__label .experience__dot {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--methode); flex: 0 0 auto;
}
.experience__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--cadre);
  margin: 0 0 16px;
  text-wrap: pretty;
  max-width: 22ch;
}
.experience__context {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 60ch;
  text-wrap: pretty;
}
.experience__meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--cadre);
  margin: 0 0 20px;
}
.experience__cta {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--resolution);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.2s;
}
.experience__cta .arr { transition: transform 0.25s var(--ease); }
.experience__cta:hover { color: var(--resolution-700); }
.experience__cta:hover .arr { transform: translateX(3px); }

/* ---------- 12b · Cas terrain — enbi method applied to a real situation.
   Same editorial row as Expérience/Intervention, but the type label is
   replaced by the article-image placeholder (a real work vignette, not decor). */
.snip--cas {
  border-top: 1px solid var(--line-strong);
  padding-top: 26px;
  max-width: 760px;
  margin: 0;
}
.cas__media { margin: 0 0 18px; }
.cas__media image-slot {
  width: 100%;
  height: 210px;
  display: block;
  border-radius: var(--radius);
}
.snip--cas .tags { margin: 0 0 18px; align-items: center; }

/* ---------- 13 · Publication — published thinking as methodological proof.
   Sibling to témoignage, but BLUE: a coral parenthesis = an outside voice;
   a blue bracket = a reading / method illuminates the subject. */
.snip--publication {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 28px;
  align-items: start;
  max-width: 720px;
  margin: 0;
  padding: 8px 0;
}
.publication__mark {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  margin-top: 2px;
  background-color: var(--methode);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M16%2C4A12%2C12%2C0%2C1%2C1%2C4%2C16%2C12%2C12%2C0%2C0%2C1%2C16%2C4m0-2A14%2C14%2C0%2C1%2C0%2C30%2C16%2C14%2C14%2C0%2C0%2C0%2C16%2C2Z%22%2F%3E%3Cpath%20d%3D%22M23%2C10.41%2C21.59%2C9l-4.3%2C4.3a3%2C3%2C0%2C0%2C0-4%2C4L9%2C21.59%2C10.41%2C23l4.3-4.3a3%2C3%2C0%2C0%2C0%2C4-4ZM17%2C16a1%2C1%2C0%2C1%2C1-1-1A1%2C1%2C0%2C0%2C1%2C17%2C16Z%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%227.5%22%20r%3D%221.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M16%2C4A12%2C12%2C0%2C1%2C1%2C4%2C16%2C12%2C12%2C0%2C0%2C1%2C16%2C4m0-2A14%2C14%2C0%2C1%2C0%2C30%2C16%2C14%2C14%2C0%2C0%2C0%2C16%2C2Z%22%2F%3E%3Cpath%20d%3D%22M23%2C10.41%2C21.59%2C9l-4.3%2C4.3a3%2C3%2C0%2C0%2C0-4%2C4L9%2C21.59%2C10.41%2C23l4.3-4.3a3%2C3%2C0%2C0%2C0%2C4-4ZM17%2C16a1%2C1%2C0%2C1%2C1-1-1A1%2C1%2C0%2C0%2C1%2C17%2C16Z%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%227.5%22%20r%3D%221.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  user-select: none;
}
.publication__body { min-width: 0; }
.publication__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--methode);
  margin: 0 0 14px;
}
.publication__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--cadre);
  margin: 0 0 14px;
  text-wrap: pretty;
  max-width: 24ch;
}
.publication__context {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 58ch;
  text-wrap: pretty;
}
.publication__meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--cadre);
  margin: 0 0 20px;
}
/* ============================================================
   TAG & METADATA SYSTEM — encode tags by COGNITIVE ROLE, never as
   equal badges. Per card/row show ≤1 type + 0–2 secondary metas;
   the problem/capability is carried by the title or snippet.
   Coral NEVER tags — coral is CTA / déblocage only.
   ------------------------------------------------------------
   Roles:  type = orientation · public = filtre · discipline = angle ·
           secteur = contexte · niveau = structure
   ============================================================ */
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

/* Discipline / méthode — the angle of analysis (méthode blue, near-square) */
.tag {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--methode);
  border: 1px solid var(--methode-200);
  border-radius: 4px;
  padding: 4px 11px;
}
/* Type — content orientation (small sober label, not a capsule) */
.tag-type {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--cadre);
}
/* Public / secteur — situate the reader (discreet, navy reduced opacity, no box) */
.tag-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink-3);
}
/* Niveau d'intervention — transversal structure, encoded by line weight.
   No elevation: enbi uses frames and position, not decorative shadow. */
.tag-level {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cadre);
  background: var(--surface);
  border-radius: 5px;
  padding: 5px 11px;
  display: inline-flex;
}
.tag-level--strategie  { border: 1.5px solid var(--cadre); }
.tag-level--tactique   { border: 1px solid var(--methode-200); }
.tag-level--operations { border: 1px solid var(--line-strong); }

/* Publication domain chips = canonical discipline tags */
.publication__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.publication__tags span {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--methode);
  border: 1px solid var(--methode-200);
  border-radius: 4px;
  padding: 4px 11px;
}
.publication__cta {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--resolution);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.2s;
}
.publication__cta .arr { transition: transform 0.25s var(--ease); }
.publication__cta:hover { color: var(--resolution-700); }
.publication__cta:hover .arr { transform: translateX(3px); }
@media (max-width: 560px) {
  .snip--publication { column-gap: 16px; }
  .publication__mark { font-size: 76px; }
}