/* Système v14 : un même langage visuel pour Our Brand, How we speak et How we look.
   Pastilles d'icônes Lucide, badges, cartes bordées, photos arrondies et notes signalées. */
:root { --cx-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --cx-line: rgba(21, 45, 23, 0.13); }
html { -webkit-tap-highlight-color: transparent; }
.chapter-cover h1, .section h2, .section h3 { text-wrap: balance; }
.section p, .section dd, .section li, .v7-cover-intro { text-wrap: pretty; }

/* Icônes Lucide en trait fin, posées dans une pastille, à la manière de shadcn/ui. */
.cx-ico { width: 18px; height: 18px; flex: none; }
.cx-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; border: 1px solid var(--cx-line); background: #fff; color: #152d17; box-shadow: 0 1px 2px rgba(16, 30, 19, 0.06); }
.cx-label { display: flex; align-items: center; gap: 12px; font-weight: 500; }
[data-contrast="dark"] .cx-icon, .chapter-cover .cx-icon { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: inherit; box-shadow: none; }

/* Le plan de l'application : cinq onglets. */
.chapter-look .cx-app-map { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.4vw; }
.chapter-look .cx-app-map > li > .cx-icon { margin-bottom: 24px; }
.chapter-look .cx-app-map h3 { font-size: clamp(22px, 1.9vw, 30px); }
.chapter-look .cx-app-map p { font-size: 15px; }

/* Cas d'usage : qui partage, qui reçoit, ce que Givz Score apporte. */
.chapter-look .cx-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 22px; font-size: 13px; line-height: 1.3; }
.chapter-look .cx-flow > span { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--cx-line); background: rgba(255, 255, 255, 0.78); }
.chapter-look .cx-flow > .cx-ico { width: 16px; height: 16px; opacity: 0.55; }
.chapter-look .cx-card { margin-top: 26px; padding: 4px 20px 4px; border: 1px solid var(--cx-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(16, 30, 19, 0.04); }
.chapter-look .cx-card > h3 { margin: 16px 0 2px; font-size: 12px; letter-spacing: 0.02em; color: #596452; }
.chapter-look .cx-card li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; font-size: 15px; }
.chapter-look .cx-card li:last-child { border-bottom: 0; }
.chapter-look .cx-card li::before { content: none; }
.chapter-look .cx-card li > .cx-ico { width: 16px; height: 16px; margin-top: 3px; color: #2f7d32; }
.chapter-look .cx-note { display: flex; align-items: flex-start; gap: 10px; }
.chapter-look .cx-note > .cx-ico { width: 15px; height: 15px; margin-top: 2px; opacity: 0.7; }
.chapter-look .l11-action > .cx-ico, .case-panels .text-link > .cx-ico { width: 18px; height: 18px; }

/* Illustration : la photo porte une carte translucide, comme une planche de présentation. */
.chapter-look .cx-art { position: relative; align-self: center; }
.chapter-look .cx-art > img { width: 100%; max-height: min(80vh, 780px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; }
.chapter-look .cx-art > .cx-doc { position: absolute; left: -44px; bottom: 56px; width: min(340px, 78%); padding: 22px 22px 18px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 24px 60px rgba(16, 30, 19, 0.18); }
.chapter-look .cx-doc > header { padding-bottom: 16px; }
.chapter-look .cx-doc .l11-document-logo { width: 110px; }
.chapter-look .cx-doc > h3 { margin: 16px 0 6px; font-size: clamp(22px, 1.9vw, 28px); }
.chapter-look .cx-doc > h3 + p { font-size: 13px; }
.chapter-look .cx-doc dl { margin-top: 14px; }
.chapter-look .cx-doc dl > div { gap: 14px; padding: 10px 0; font-size: 13px; }
.chapter-look .cx-art > figcaption { padding-top: 12px; }

/* Sélecteur d'usages : icône par onglet, retour de pression, panneau qui se pose en douceur. */
.case-tabs button { display: flex; align-items: center; gap: 14px; cursor: pointer; touch-action: manipulation; transition: background-color 200ms ease, color 200ms ease, transform 140ms var(--cx-ease-out); }
.case-tabs button > .cx-ico { width: 20px; height: 20px; opacity: 0.75; }
.case-tabs button:active { transform: scale(0.98); }
.case-panels article { transition: opacity 220ms var(--cx-ease-out), translate 220ms var(--cx-ease-out); }
@starting-style { .case-panels article { opacity: 0; translate: 0 6px; } }

@media (max-width: 1100px) {
  .chapter-look .cx-app-map { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .chapter-look .cx-art > .cx-doc { left: -24px; }
}
@media (max-width: 760px) {
  .chapter-look .cx-app-map { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .chapter-look .cx-app-map > li > .cx-icon { margin-bottom: 14px; }
  .chapter-look .cx-art > img { aspect-ratio: 1 / 1; border-radius: 22px; }
  .chapter-look .cx-art > .cx-doc { position: relative; left: auto; bottom: auto; width: auto; margin: -64px 14px 0; }
  .case-tabs button { gap: 8px; }
  .case-tabs button > .cx-ico { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .case-panels article { transition: opacity 200ms ease; }
  @starting-style { .case-panels article { translate: none; } }
  .case-tabs button:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .chapter-look .cx-art > .cx-doc { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ——— Même système sur Our Brand et How we speak ——— */
:root { --cx-glass: rgba(255, 255, 255, 0.04); --cx-glass-line: rgba(255, 255, 255, 0.14); }

/* Cartes bordées : fiches techniques, notes de logotype, colonnes et principes. */
:is(.v7-specs, .application-specs, .v8-logo-notes > p, .v10-evidence-columns > article, .pillars > article, .profiles > article) {
  border: 1px solid var(--cx-line); border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(16, 30, 19, 0.04);
}
.v7-specs { gap: 0; padding: 22px 0; }
.v7-specs > div { border-top: 0; padding: 0 24px; }
.v7-specs > div + div { border-left: 1px solid var(--cx-line); }
.application-specs { padding: 4px 20px; }
.application-specs > div:first-child { border-top: 0; }
:is(.v8-logo-notes > p, .v10-evidence-columns > article, .pillars > article, .profiles > article) { padding: 24px; }
.section[data-contrast="dark"] :is(.v10-role-columns > article, .v8-beliefs > article, .v10-trace-list > li, .principles-list > article, .v7-steps > li) {
  border: 1px solid var(--cx-glass-line); border-radius: 18px; background: var(--cx-glass); padding: 24px;
}
.section[data-contrast="light"] .principles-list > article { border: 1px solid var(--cx-line); border-radius: 18px; background: rgba(255, 255, 255, 0.55); padding: 24px; }

/* Badges : statuts, rôles et étiquettes de colonnes. */
:is(.v7-status, .v10-evidence-columns > article > span, .v10-role-columns > article > span, .profiles > article > span:last-child) {
  display: inline-flex; align-items: center; width: fit-content; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--cx-line); background: rgba(255, 255, 255, 0.78); font-size: 12px; line-height: 1.3;
}
.section[data-contrast="dark"] .v10-role-columns > article > span { border-color: var(--cx-glass-line); background: rgba(255, 255, 255, 0.06); }

/* Icônes des étapes dans une pastille, comme les libellés. */
.v7-steps .ui-icon { box-sizing: content-box; width: 18px; height: 18px; padding: 9px; border-radius: 11px; border: 1px solid var(--cx-glass-line); background: rgba(255, 255, 255, 0.08); }

/* Photos : un même arrondi, une légende en verre dépoli. */
:is(.v7-scene, .v7-story-photo, .editorial-photo) { border-radius: 28px; overflow: hidden; }
.v8-photo { border-radius: 28px; }
.v8-presentation .v8-photo { border-radius: 0; }
.application-media.supplied-campaign img { border-radius: 20px; }
.v7-story-photo > span { border-radius: 14px; background: rgba(21, 45, 23, 0.8); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }

/* Notes et mentions : une même icône d'information. */
:is(.note, .application-origin, .v10-concept-note, .v10-source-note, .v7-solution-note, .v10-role-note, .l11-case-note:not(.cx-note))::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin: 0 8px -2px 0; background: currentColor; opacity: 0.7;
  -webkit-mask: url(assets/icons/info.svg) center / contain no-repeat; mask: url(assets/icons/info.svg) center / contain no-repeat;
}

/* Listes du sélecteur d'usages : coche, comme dans les cas détaillés. */
.case-panels .editorial-list li { display: flex; align-items: flex-start; gap: 12px; }
.case-panels .editorial-list li::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px; background: #2f7d32;
  -webkit-mask: url(assets/icons/check.svg) center / contain no-repeat; mask: url(assets/icons/check.svg) center / contain no-repeat;
}

@media (max-width: 760px) {
  .v7-specs { gap: 18px 0; padding: 18px 0; }
  .v7-specs > div { padding: 0 18px; }
  .v7-specs > div:nth-child(odd) { border-left: 0; }
  :is(.v8-logo-notes > p, .v10-evidence-columns > article, .pillars > article, .profiles > article),
  .section[data-contrast="dark"] :is(.v10-role-columns > article, .v8-beliefs > article, .v10-trace-list > li, .principles-list > article, .v7-steps > li),
  .section[data-contrast="light"] .principles-list > article { padding: 20px; }
  :is(.v7-scene, .v7-story-photo, .editorial-photo, .v8-photo) { border-radius: 22px; }
}

/* ——— How we look : deux parcours, entreprises d'abord ——— */
.cx-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 12px; }
.cx-track { padding: 26px; border: 1px solid var(--cx-line); border-radius: 22px; background: #fff; scroll-margin-top: 96px; }
.cx-track > header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.cx-track h3 { margin: 2px 0 6px; font: 850 clamp(24px, 2.2vw, 32px) / 1.1 var(--display, Garet, sans-serif); letter-spacing: -0.03em; }
.cx-track header p { margin: 0; font-size: 15px; line-height: 1.5; color: #596452; }
.cx-count { margin-left: auto; flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--cx-line); font-size: 12px; white-space: nowrap; }
.cx-track-list { margin: 0; padding: 0; list-style: none; }
.cx-track-list a { display: flex; align-items: center; gap: 14px; padding: 14px 6px; border-top: 1px solid var(--cx-line); border-radius: 10px; color: inherit; text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background-color 200ms ease; }
.cx-track-list a > span:nth-child(2) { flex: 1; min-width: 0; }
.cx-track-list b { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; }
.cx-track-list small { display: block; margin-bottom: 3px; font-size: 12.5px; color: #596452; }
.cx-teaser { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: #596452; text-wrap: pretty; }
.cx-track-list a > .cx-ico:last-child { opacity: 0.5; transition: transform 200ms var(--cx-ease-out); }
.cx-track-list .cx-icon { width: 34px; height: 34px; border-radius: 10px; }
.cx-track-b2b { border-color: transparent; background: #152d17; color: #fff; }
.cx-track-b2b header p, .cx-track-b2b small, .cx-track-b2b .cx-teaser { color: rgba(255, 255, 255, 0.72); }
.cx-track-b2b .cx-icon, .cx-track-b2b .cx-count { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: inherit; box-shadow: none; }
.cx-track-b2b .cx-track-list a { border-top-color: rgba(255, 255, 255, 0.14); }
@media (hover: hover) and (pointer: fine) {
  .cx-track-list a:hover { background: rgba(21, 45, 23, 0.05); }
  .cx-track-b2b .cx-track-list a:hover { background: rgba(255, 255, 255, 0.06); }
  .cx-track-list a:hover > .cx-ico:last-child { transform: translateX(3px); opacity: 0.9; }
}
.chapter-look .cx-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; color: #596452; text-decoration: none; }
.chapter-look .cx-back > .cx-ico { width: 16px; height: 16px; }
@media (max-width: 900px) { .cx-tracks { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .cx-track { padding: 20px; }
  .cx-track > header { flex-wrap: wrap; }
  .cx-track > header > div { flex: 1 1 calc(100% - 60px); }
  .cx-count { margin-left: 52px; }
  .cx-track-list b { font-size: 15px; }
}

/* Emplacement d'un visuel à générer : cadre forêt et icône du cas. */
.chapter-look .cx-art > .cx-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; border-radius: 28px; background: linear-gradient(160deg, #152d17 0%, #335a2e 100%); color: rgba(236, 244, 159, 0.55); }
.chapter-look .cx-placeholder > .cx-ico { width: 72px; height: 72px; stroke-width: 1.2; }
@media (max-width: 760px) { .chapter-look .cx-art > .cx-placeholder { aspect-ratio: 1 / 1; border-radius: 22px; } }