/* ==========================================================================
   MANAKRIA : pages Écosystème digital et leviers (30/10/2026)
   Composants communs aux 4 pages (hero des leviers, parcours à étapes, carrousel,
   chiffres clés, graphiques, onglets, liens entre pages) puis composants propres à
   chaque page. Réutilise les variables et les briques de composants.css (charte v2.1).
   Sans JavaScript ou sous prefers-reduced-motion, chaque bloc reste lisible dans son
   état final : leviers.js ne fait qu'animer ce que le HTML contient déjà.
   ========================================================================== */

.lv-page { --lv-gap: clamp(20px, 2.4vw, 32px); }
.lv-center { text-align: center; }
.lv-center .mk-head { margin: 0 auto; }
.lv-center .mk-eyebrow { justify-content: center; }
.lv-center .mk-lede { margin-left: auto; margin-right: auto; }
.lv-note { margin-top: 18px; font-size: 0.84rem; font-style: italic; font-weight: 600; }
.lv-center .lv-note { text-align: center; }
.lv-ico { width: 20px; height: 20px; flex: none; }

/* ==========================================================================
   1. Hero des leviers (d'après hero-section-6) : texte à gauche, capture de
   l'application qui émerge à droite, cartes d'interface flottantes.
   ========================================================================== */
.lv-hero { position: relative; overflow: hidden; padding: 150px 0 100px; background: linear-gradient(180deg, #fff 0%, #fff 45%, var(--mk-blue-wash-2) 100%); }
.lv-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.lv-dots {
  position: absolute; inset: 0; opacity: 0.55;
  background-image: radial-gradient(rgba(174, 162, 144, 0.55) 1px, transparent 1.2px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 55% 65% at 72% 48%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 55% 65% at 72% 48%, #000 30%, transparent 78%);
}
.lv-glow { position: absolute; right: -12%; top: 4%; width: 72%; height: 92%; background: radial-gradient(closest-side, rgba(75, 180, 187, 0.24), rgba(75, 180, 187, 0.07) 62%, transparent); }
.lv-hero .mk-arcs { left: auto; right: -14%; width: min(82vmin, 780px); opacity: 0.55; }
.lv-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 52px; align-items: center; }
.lv-hero-text { position: relative; z-index: 2; max-width: 610px; }
.lv-hero .mk-crumbs { justify-content: flex-start; margin-bottom: 24px; }
.lv-pill {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 5px 16px 5px 5px; border-radius: var(--mk-pill);
  border: 1px solid var(--mk-line); background: var(--mk-white); box-shadow: 0 10px 24px -16px rgba(61, 92, 96, 0.5);
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.lv-pill b { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--mk-blue); color: var(--mk-ink); font: 800 0.8rem var(--mk-font-t); letter-spacing: 0; }
.mk .lv-title { margin: 22px 0 0; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
.lv-sub { margin-top: 20px; font-size: clamp(1.05rem, 1.3vw, 1.18rem); line-height: 1.64; max-width: 56ch; }
.lv-hero .mk-actions { margin-top: 32px; }
.lv-chips { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lv-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: var(--mk-pill); background: var(--mk-white); border: 1px solid var(--mk-line); font-size: 0.86rem; font-weight: 800; }
.lv-chips i { width: 24px; height: 24px; border-radius: 50%; background: var(--mk-blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lv-chips i svg { width: 13px; height: 13px; }

.lv-hero-visual { position: relative; z-index: 1; }
.lv-shot {
  position: relative; width: 126%; border-radius: 20px; overflow: hidden; background: var(--mk-white);
  box-shadow: var(--mk-shadow-lg), 0 0 0 1px rgba(61, 92, 96, 0.06);
  transform: perspective(1700px) rotateY(-10deg) rotateX(3deg); transform-origin: left center;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0, #000 16%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0, #000 16%);
}
.lv-shot img { display: block; width: 100%; height: auto; }
/* Capture haute : recadrée en haut à gauche pour garder un visuel équilibré */
.lv-shot--crop img { aspect-ratio: 16 / 10.5; object-fit: cover; object-position: left top; }
.lv-float { position: absolute; z-index: 3; }
.lv-float-in {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px; background: var(--mk-white);
  box-shadow: var(--mk-shadow-lg); font-size: 0.84rem; font-weight: 700; line-height: 1.32; white-space: nowrap;
  animation: lv-bob 6s ease-in-out infinite;
}
.lv-float-in b { display: block; font: 700 0.92rem/1.3 var(--mk-font-t); }
.lv-float-in small { display: block; margin-top: 2px; font-size: 0.78rem; font-weight: 600; }
.lv-float .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--mk-blue); display: flex; align-items: center; justify-content: center; flex: none; }
.lv-float .ic svg { width: 21px; height: 21px; }
.lv-float .ic--av { border-radius: 50%; background: var(--mk-ink); color: var(--mk-cream); font: 800 0.82rem var(--mk-font-t); }
.lv-float .ok { width: 22px; height: 22px; border-radius: 50%; background: var(--mk-blue); display: inline-flex; align-items: center; justify-content: center; flex: none; margin-left: 4px; }
.lv-float .ok svg { width: 12px; height: 12px; }
.lv-float--1 { left: -7%; top: -4%; }
.lv-float--2 { left: 2%; bottom: -6%; }
.lv-float--2 .lv-float-in { animation-delay: -2s; }
.lv-float--3 { right: -3%; bottom: 22%; }
.lv-float--3 .lv-float-in { animation-delay: -4s; }
@keyframes lv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 1100px) { .lv-float--3 { right: 2%; } }
@media (max-width: 980px) {
  .lv-hero { padding: 124px 0 72px; }
  .lv-hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .lv-hero-text { max-width: 680px; }
  .lv-shot { width: 100%; transform: none; -webkit-mask-image: none; mask-image: none; }
  .lv-float--1 { left: -2%; top: -30px; }
  .lv-float--2 { left: 3%; bottom: -26px; }
  .lv-float--3 { right: -2%; bottom: auto; top: 38%; }
}
@media (max-width: 600px) {
  .lv-hero { padding: 108px 0 64px; }
  .lv-float-in { padding: 8px 12px 8px 8px; gap: 9px; font-size: 0.74rem; }
  .lv-float-in b { font-size: 0.8rem; }
  .lv-float .ic { width: 30px; height: 30px; border-radius: 9px; }
  .lv-float .ic svg { width: 16px; height: 16px; }
  .lv-float--3 { display: none; }
  /* La capture est recadrée en 4:3 (haut gauche) pour rester lisible */
  .lv-shot img { aspect-ratio: 4 / 3; object-fit: cover; object-position: left top; }
}

/* ==========================================================================
   2. Parcours à étapes (d'après scroll-timeline) : étapes à gauche avec un rail
   qui se remplit, scène collante à droite. Sans JS ou sur mobile : chaque
   étape montre sa scène juste en dessous.
   ========================================================================== */
.mk-flow { position: relative; margin-top: 56px; }
.fl-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 68px; display: grid; gap: 40px; }
.fl-rail { position: absolute; left: 21px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: rgba(174, 162, 144, 0.3); overflow: hidden; }
.fl-rail i { position: absolute; inset: 0; background: linear-gradient(var(--mk-blue), rgba(75, 180, 187, 0.55)); transform-origin: top; transform: scaleY(var(--p, 1)); }
.fl-step { position: relative; }
.fl-body { position: relative; }
.fl-num {
  position: absolute; left: -68px; top: -4px; width: 46px; height: 46px; border-radius: 50%; background: var(--mk-white);
  border: 2px solid rgba(174, 162, 144, 0.45); display: flex; align-items: center; justify-content: center;
  font: 800 1rem var(--mk-font-t); transition: background-color 0.35s, border-color 0.35s, color 0.35s, box-shadow 0.35s;
}
.fl-step.is-on .fl-num, .mk-flow:not(.is-split) .fl-num { background: var(--mk-ink); border-color: var(--mk-ink); color: var(--mk-cream); }
.fl-step.is-on .fl-num { box-shadow: 0 0 0 7px rgba(75, 180, 187, 0.2); }
.fl-kicker { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.mk .fl-step h3 { margin: 6px 0 0; font-size: clamp(1.18rem, 1.6vw, 1.42rem); font-weight: 700; line-height: 1.25; }
.fl-step .fl-txt { margin-top: 10px; font-size: 1rem; line-height: 1.62; max-width: 52ch; }
.fl-pane { margin-top: 22px; }
.mk-flow.is-split { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 64px; align-items: start; }
.mk-flow.is-split .fl-steps { gap: 0; }
.mk-flow.is-split .fl-step { min-height: 58vh; display: flex; align-items: center; }
.mk-flow.is-split .fl-step:first-child { min-height: 42vh; align-items: flex-start; padding-top: 6vh; }
.mk-flow.is-split .fl-step .fl-body { transition: opacity 0.4s; }
.mk-flow.is-split .fl-step:not(.is-on) .fl-body { opacity: 0.4; }
.fl-stage { position: sticky; top: 112px; height: min(560px, calc(100vh - 150px)); }
.fl-stage .fl-pane {
  position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(0.98);
  transition: opacity 0.4s ease, transform 0.6s var(--mk-ease), visibility 0s linear 0.6s;
}
.fl-stage .fl-pane.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s ease, transform 0.6s var(--mk-ease), visibility 0s; }
@media (max-width: 600px) {
  .fl-steps { padding-left: 56px; gap: 34px; } .fl-num { left: -56px; width: 40px; height: 40px; } .fl-rail { left: 18px; }
  /* Scène empilée : toute la largeur, le rail passe derrière */
  .mk-flow:not(.is-split) .fl-pane { position: relative; z-index: 1; margin-left: -56px; }
}

/* Cartes d'interface (dans le style de l'application) utilisées par les scènes */
.ui-card { position: relative; width: 100%; max-width: 560px; padding: 22px; border-radius: 20px; background: var(--mk-white); box-shadow: var(--mk-shadow-lg); border: 1px solid rgba(174, 162, 144, 0.22); font-size: 0.92rem; line-height: 1.5; }
.ui-head { display: flex; align-items: center; gap: 12px; }
.ui-head .av { width: 40px; height: 40px; border-radius: 50%; background: var(--mk-taupe-wash); display: flex; align-items: center; justify-content: center; flex: none; }
.ui-head .av svg { width: 20px; height: 20px; }
.ui-head b { display: block; font: 700 0.95rem/1.3 var(--mk-font-t); }
.ui-head small { display: block; font-size: 0.8rem; font-weight: 600; }
.ui-head .ui-badge { margin-left: auto; }
.ui-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--mk-pill); background: var(--mk-blue-wash); font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
.ui-badge--taupe { background: var(--mk-taupe-wash); }
.ui-badge--ink { background: var(--mk-ink); color: var(--mk-cream); }
.ui-badge i { width: 16px; height: 16px; border-radius: 50%; background: var(--mk-blue); display: inline-flex; align-items: center; justify-content: center; }
.ui-badge i svg { width: 9px; height: 9px; }
.ui-text { margin-top: 14px; font-size: 0.98rem; line-height: 1.6; }
.ui-k { margin-top: 18px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.ui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ui-field { padding: 10px 12px; border-radius: 12px; background: var(--mk-blue-wash-2); border: 1px solid rgba(75, 180, 187, 0.18); }
.ui-field small { display: block; font-size: 0.72rem; font-weight: 700; }
.ui-field b { display: block; margin-top: 2px; font-size: 0.92rem; font-weight: 800; }
.ui-field--wide { grid-column: 1 / -1; }
.ui-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ui-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--mk-pill); border: 1px solid rgba(75, 180, 187, 0.6); background: var(--mk-white); font-size: 0.8rem; font-weight: 800; }
.ui-btn--main { background: var(--mk-blue); border-color: var(--mk-blue); }
.ui-btn--ink { background: var(--mk-ink); border-color: var(--mk-ink); color: var(--mk-cream); }
.ui-btn svg { width: 14px; height: 14px; }
.ui-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mk-line); font-size: 0.8rem; font-weight: 700; }
.ui-foot svg { width: 16px; height: 16px; flex: none; }
.ui-head > div { flex: 1 1 140px; min-width: 0; }
@media (max-width: 600px) { .ui-card { padding: 16px; } .ui-head { flex-wrap: wrap; } }
/* Éléments qui entrent un à un quand la scène s'affiche (sans JS : visibles) */
.lv-js .fl-stage .fl-pane .ui-in { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.55s var(--mk-ease); }
.lv-js .fl-stage .fl-pane.is-on .ui-in { opacity: 1; transform: none; }
.lv-js .fl-stage .fl-pane.is-on .ui-in:nth-child(2) { transition-delay: 0.12s; } .lv-js .fl-stage .fl-pane.is-on .ui-in:nth-child(3) { transition-delay: 0.24s; }
.lv-js .fl-stage .fl-pane.is-on .ui-in:nth-child(4) { transition-delay: 0.36s; } .lv-js .fl-stage .fl-pane.is-on .ui-in:nth-child(5) { transition-delay: 0.48s; }
.lv-js .fl-stage .fl-pane.is-on .ui-in:nth-child(6) { transition-delay: 0.6s; } .lv-js .fl-stage .fl-pane.is-on .ui-in:nth-child(7) { transition-delay: 0.72s; }
.lv-js .fl-stage .fl-pane.is-on .ui-in:nth-child(8) { transition-delay: 0.84s; }

/* ==========================================================================
   3. Carrousel de fonctionnalités (d'après feature-carousel) : roue de pastilles
   sur fond vert sombre, pile de cartes à droite.
   ========================================================================== */
.mk-fcar { position: relative; display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); margin-top: 52px; border-radius: 36px; overflow: hidden; border: 1px solid rgba(174, 162, 144, 0.3); box-shadow: var(--mk-shadow-lg); background: var(--mk-white); }
.fc-side { position: relative; background: var(--mk-ink); color: var(--mk-cream); padding: 40px 36px; overflow: hidden; }
.fc-side::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 22%, rgba(75, 180, 187, 0.25), transparent 58%); pointer-events: none; }
.fc-chips { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fc-chip {
  display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px 13px 14px; border-radius: 30px;
  border: 1px solid rgba(249, 242, 231, 0.24); background: transparent; color: rgba(249, 242, 231, 0.66);
  font: 800 0.88rem var(--mk-font-b); letter-spacing: 0.02em; text-align: left; cursor: pointer; white-space: nowrap;
  transition: background-color 0.6s, color 0.6s, border-color 0.6s;
}
.fc-chip i { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(249, 242, 231, 0.3); display: inline-flex; align-items: center; justify-content: center; flex: none; font-style: normal; font: 800 0.78rem var(--mk-font-t); }
.fc-chip:hover { color: var(--mk-cream); border-color: rgba(249, 242, 231, 0.5); }
.fc-chip.is-on { background: var(--mk-white); color: var(--mk-ink); border-color: var(--mk-white); }
.fc-chip.is-on i { background: var(--mk-blue); border-color: var(--mk-blue); color: var(--mk-white); }
.fc-stage { position: relative; background: var(--mk-blue-wash-2); padding: 36px 28px; display: grid; gap: 18px; }
.fc-card { position: relative; margin: 0; border-radius: 24px; overflow: hidden; border: 6px solid var(--mk-white); background: var(--mk-white); box-shadow: var(--mk-shadow-lg); }
.fc-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; transition: filter 0.6s; }
/* Capture plus large que le cadre : montrée en entier, la légende occupe la marge du bas */
.fc-card img.is-wide { object-fit: contain; object-position: center top; background: var(--mk-white); }
.fc-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 22px 18px; background: linear-gradient(to top, rgba(61, 92, 96, 0.94), rgba(61, 92, 96, 0.55) 55%, transparent); color: var(--mk-cream); transition: opacity 0.35s; }
.fc-card figcaption b { display: inline-flex; padding: 4px 12px; border-radius: var(--mk-pill); background: var(--mk-white); color: var(--mk-ink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.fc-card figcaption p { margin-top: 10px; font-size: 1.02rem; font-weight: 700; line-height: 1.45; color: var(--mk-cream); }
/* Avec JS sur ordinateur : la roue et la pile */
.mk-fcar.is-wheel { min-height: 560px; }
.mk-fcar.is-wheel .fc-side { display: flex; align-items: center; padding: 0 40px; }
.mk-fcar.is-wheel .fc-side::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(var(--mk-ink), rgba(61, 92, 96, 0) 22%, rgba(61, 92, 96, 0) 78%, var(--mk-ink)); }
.mk-fcar.is-wheel .fc-chips { width: 100%; height: 100%; display: block; }
.mk-fcar.is-wheel .fc-chips li { position: absolute; left: 0; top: 50%; height: 64px; margin-top: -32px; display: flex; align-items: center; will-change: transform, opacity; }
.mk-fcar.is-wheel .fc-stage { display: flex; align-items: center; justify-content: center; padding: 40px 28px; overflow: hidden; }
.mk-fcar.is-wheel .fc-card { position: absolute; width: min(84%, 600px); will-change: transform, opacity; }
.mk-fcar.is-wheel .fc-card:not(.is-on) img { filter: grayscale(0.5) blur(2px) brightness(0.86); }
.mk-fcar.is-wheel .fc-card:not(.is-on) figcaption { opacity: 0; }
@media (max-width: 980px) {
  .mk-fcar { grid-template-columns: 1fr; border-radius: 28px; }
  .fc-side { padding: 22px 0 22px 22px; }
  .fc-chips { display: flex; gap: 8px; overflow-x: auto; padding-right: 22px; scrollbar-width: none; }
  .fc-chips::-webkit-scrollbar { display: none; }
  .fc-stage { padding: 22px 16px; }
  .fc-card figcaption { position: static; padding: 14px 18px 16px; background: var(--mk-ink); }
  .fc-card img.is-wide { object-position: center; }
  /* Avec JS : une capture à la fois, toutes superposées pour garder une hauteur fixe */
  .mk-fcar.is-tabs .fc-card { grid-area: 1 / 1; }
  .mk-fcar.is-tabs .fc-card:not(.is-on) { visibility: hidden; }
  .mk-fcar.is-tabs .fc-card.is-on { animation: lv-in 0.5s var(--mk-ease); }
}

/* ==========================================================================
   4. Fonctionnalités sur fond dégradé (d'après features-section-with-gradient-bg)
   ========================================================================== */
.mk-gfeat { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; align-items: center; margin-top: 56px; }
.gf-visual { position: relative; }
.gf-visual::before { content: ""; position: absolute; inset: -8% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(75, 180, 187, 0.26), rgba(75, 180, 187, 0.08) 60%, transparent); filter: blur(18px); }
.gf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.gf-list li { display: flex; align-items: flex-start; gap: 20px; }
.gf-list .ic { width: 64px; height: 64px; border-radius: 50%; background: var(--mk-blue-wash); display: flex; align-items: center; justify-content: center; flex: none; }
.gf-list .ic svg { width: 26px; height: 26px; }
.mk .gf-list h3 { margin: 4px 0 0; font-size: 1.12rem; font-weight: 700; line-height: 1.3; }
.gf-list p { margin-top: 6px; font-size: 0.98rem; line-height: 1.6; }
@media (max-width: 980px) { .mk-gfeat { grid-template-columns: 1fr; gap: 44px; } }

/* ==========================================================================
   5. Chiffres clés (faits produit, jamais des résultats)
   ========================================================================== */
.mk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.kp { padding: 26px 24px 24px; border-radius: var(--mk-radius); background: var(--mk-white); box-shadow: var(--mk-shadow); border: 1px solid rgba(174, 162, 144, 0.22); }
.kp b { display: block; font: 800 clamp(2.2rem, 3.5vw, 3rem)/1 var(--mk-font-t); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kp span { display: block; margin-top: 12px; font-weight: 800; line-height: 1.35; }
.kp small { display: block; margin-top: 6px; font-size: 0.88rem; font-weight: 600; line-height: 1.5; }
.mk-band .kp { color: var(--mk-ink); }
@media (max-width: 980px) { .mk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mk-kpis { grid-template-columns: 1fr; } }

/* ==========================================================================
   6. Graphiques animés (valeurs fictives, toujours légendées)
   ========================================================================== */
.ch-board { padding: 24px; border-radius: 24px; background: var(--mk-white); box-shadow: var(--mk-shadow-lg); border: 1px solid rgba(174, 162, 144, 0.22); }
.ch-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ch-top b { font: 700 1.08rem var(--mk-font-t); }
.ch-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.ch-kpi { padding: 12px 14px; border-radius: 14px; background: var(--mk-blue-wash-2); }
.ch-kpi small { display: block; font-size: 0.76rem; font-weight: 700; }
.ch-kpi b { display: block; margin-top: 4px; font: 800 1.5rem/1.1 var(--mk-font-t); font-variant-numeric: tabular-nums; }
.ch-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.ch-panel { padding: 16px; border-radius: 16px; border: 1px solid var(--mk-line); }
.ch-panel h4 { margin: 0; font: 800 0.84rem var(--mk-font-b); }
.ch-line { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.ch-line .ar { fill: rgba(75, 180, 187, 0.14); }
.ch-line .ln { fill: none; stroke: var(--mk-blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ch-line .gl { stroke: rgba(174, 162, 144, 0.3); stroke-width: 1; }
.ch-bars { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.ch-bars li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 700; }
.ch-bars i { position: relative; height: 10px; border-radius: 5px; background: var(--mk-taupe-wash); overflow: hidden; }
.ch-bars i::after { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 100%); border-radius: 5px; background: var(--mk-blue); transform-origin: left; }
.ch-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.ch-donut { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.ch-donut svg { width: 112px; height: 112px; flex: none; transform: rotate(-90deg); }
.ch-donut circle { fill: none; stroke-width: 5; }
.ch-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.82rem; font-weight: 700; flex: 1; }
.ch-legend li { display: flex; align-items: center; gap: 8px; }
.ch-legend i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ch-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.ch-funnel { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ch-funnel li { position: relative; height: 40px; border-radius: 12px; background: var(--mk-blue-wash-2); overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 0.86rem; font-weight: 800; }
.ch-funnel li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); background: rgba(75, 180, 187, 0.32); border-radius: 12px; transform-origin: left; }
.ch-funnel span, .ch-funnel b { position: relative; }
/* Animation à l'entrée dans l'écran (sans JS : graphiques complets) */
.lv-js .ch-anim .ch-bars i::after, .lv-js .ch-anim .ch-funnel li::before { transform: scaleX(0); transition: transform 1.2s var(--mk-ease); }
.lv-js .ch-anim.is-in .ch-bars i::after, .lv-js .ch-anim.is-in .ch-funnel li::before { transform: scaleX(1); }
.lv-js .ch-anim .ch-bars li:nth-child(2) i::after, .lv-js .ch-anim .ch-funnel li:nth-child(2)::before { transition-delay: 0.12s; }
.lv-js .ch-anim .ch-bars li:nth-child(3) i::after, .lv-js .ch-anim .ch-funnel li:nth-child(3)::before { transition-delay: 0.24s; }
.lv-js .ch-anim .ch-bars li:nth-child(4) i::after, .lv-js .ch-anim .ch-funnel li:nth-child(4)::before { transition-delay: 0.36s; }
.lv-js .ch-anim .ch-donut svg { transform: rotate(-200deg) scale(0.86); opacity: 0; transition: transform 1.3s var(--mk-ease), opacity 0.6s; }
.lv-js .ch-anim.is-in .ch-donut svg { transform: rotate(-90deg); opacity: 1; }
@media (max-width: 760px) { .ch-kpis { grid-template-columns: 1fr 1fr; } .ch-grid { grid-template-columns: 1fr; } .ch-bars li { grid-template-columns: 92px minmax(0, 1fr) 24px; } }

/* ==========================================================================
   7. Onglets (intentions, rôles, modules)
   ========================================================================== */
.lv-tabs-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.lv-tab {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 30px; border: 1px solid var(--mk-line);
  background: var(--mk-white); color: var(--mk-ink); font: 800 0.92rem var(--mk-font-b); cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.lv-tab i { width: 30px; height: 30px; border-radius: 50%; background: var(--mk-blue-wash); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lv-tab i svg { width: 15px; height: 15px; }
.lv-tab:hover { border-color: var(--mk-blue); }
.lv-tab[aria-selected="true"] { background: var(--mk-blue-wash); border-color: var(--mk-blue); box-shadow: var(--mk-shadow); }
.lv-tab[aria-selected="true"] i { background: var(--mk-blue); }
.lv-tabpanels { margin-top: 32px; }
.lv-tabpanel + .lv-tabpanel { margin-top: 32px; }
.lv-js .lv-tabpanel + .lv-tabpanel { margin-top: 0; }
/* Avec JS : panneaux superposés dans la même cellule, la hauteur reste celle du plus grand */
.lv-tabpanel { display: block; }
.lv-js .lv-tabpanels { display: grid; }
.lv-js .lv-tabpanels > .lv-tabpanel { grid-area: 1 / 1; min-width: 0; }
.lv-js .lv-tabpanel[hidden] { visibility: hidden; }
.lv-js .lv-tabpanel.is-on { animation: lv-in 0.55s var(--mk-ease); }
@keyframes lv-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   8. Liens entre les pages (connexions) et blocs de confiance
   ========================================================================== */
.lv-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.lv-link {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--mk-radius);
  background: var(--mk-white); box-shadow: var(--mk-shadow); border: 1px solid rgba(174, 162, 144, 0.24); text-decoration: none;
  transition: transform 0.35s var(--mk-ease), box-shadow 0.35s;
}
.lv-link:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow-lg); }
.lv-link .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--mk-blue-wash); display: flex; align-items: center; justify-content: center; }
.lv-link .ic svg { width: 24px; height: 24px; }
.lv-link small { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.lv-link b { font: 700 1.15rem/1.3 var(--mk-font-t); }
.lv-link p { font-size: 0.95rem; line-height: 1.58; }
.lv-link .go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(75, 180, 187, 0.7); text-underline-offset: 4px; }
.lv-link .go svg { width: 16px; height: 16px; transition: transform 0.3s; }
.lv-link:hover .go svg { transform: translateX(4px); }
@media (max-width: 980px) { .lv-links { grid-template-columns: 1fr; } }

.lv-trust { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.lv-trust li { padding: 22px; border-radius: var(--mk-radius); background: var(--mk-white); box-shadow: var(--mk-shadow); }
.lv-trust .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--mk-blue); display: flex; align-items: center; justify-content: center; }
.lv-trust .ic svg { width: 21px; height: 21px; }
.mk .lv-trust h3 { margin: 14px 0 0; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.lv-trust p { margin-top: 6px; font-size: 0.92rem; line-height: 1.55; }
/* Sur le bandeau vert sombre : tuiles translucides, texte crème (comme « Conçu avec le secteur ») */
.mk-band .lv-trust li { background: rgba(249, 242, 231, 0.07); border: 1px solid rgba(249, 242, 231, 0.18); box-shadow: none; }

.lv-evol { display: flex; align-items: center; gap: 16px; max-width: 860px; margin: 48px auto 0; padding: 20px 24px; border-radius: var(--mk-radius); background: var(--mk-white); box-shadow: var(--mk-shadow); }
.lv-evol .ic { width: 46px; height: 46px; border-radius: 50%; background: var(--mk-blue-wash); display: flex; align-items: center; justify-content: center; flex: none; }
.lv-evol .ic svg { width: 22px; height: 22px; }
.lv-evol p { font-size: 0.98rem; line-height: 1.55; }

/* Boîte à captures (images de l'application avec cadre) */
.lv-frame { position: relative; border-radius: 18px; overflow: hidden; background: var(--mk-white); box-shadow: var(--mk-shadow-lg); border: 1px solid rgba(174, 162, 144, 0.22); }
.lv-frame img { display: block; width: 100%; height: auto; }

/* ---- Mouvement réduit : tout est figé dans son état final ---- */
@media (prefers-reduced-motion: reduce) {
  .lv-float-in { animation: none; }
  .lv-js .fl-stage .fl-pane .ui-in { opacity: 1; transform: none; transition: none; }
  .fl-stage .fl-pane, .lv-js .lv-tabpanel.is-on { transition: none; animation: none; }
}

/* ==========================================================================
   9. Page Agent de captation de lead
   ========================================================================== */

/* ---- Exclusivité territoriale : carte stylisée, le secteur de l'agence se colore ---- */
.cz { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.cz .mk-h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.cz-map { position: relative; }
.cz-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.cz-hex { fill: rgba(249, 242, 231, 0.05); stroke: rgba(249, 242, 231, 0.22); stroke-width: 1.2; transition: fill 0.8s ease, stroke 0.8s ease; }
.cz-hex.is-mine { fill: rgba(75, 180, 187, 0.5); stroke: var(--mk-blue); stroke-width: 2; }
.lv-js .cz-map:not(.is-visible) .cz-hex.is-mine { fill: rgba(249, 242, 231, 0.05); stroke: rgba(249, 242, 231, 0.22); }
.cz-pulse { fill: none; stroke: var(--mk-blue); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: cz-pulse 3.2s ease-out infinite; }
.cz-pin { fill: var(--mk-white); stroke: var(--mk-blue); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: cz-pin 4.2s var(--mk-ease) infinite both; }
@keyframes cz-pulse { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(2.7); opacity: 0; } }
@keyframes cz-pin { 0% { transform: scale(0); opacity: 0; } 10%, 70% { transform: scale(1); opacity: 1; } 86%, 100% { transform: scale(0.5); opacity: 0; } }
.cz-badge { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px; background: var(--mk-white); color: var(--mk-ink); box-shadow: var(--mk-shadow-lg); animation: lv-bob 6s ease-in-out infinite; }
.cz-badge i { width: 40px; height: 40px; border-radius: 12px; background: var(--mk-blue); display: flex; align-items: center; justify-content: center; flex: none; }
.cz-badge i svg { width: 20px; height: 20px; }
.cz-badge b { display: block; font: 700 0.95rem/1.3 var(--mk-font-t); }
.cz-badge small { display: block; margin-top: 2px; font-size: 0.78rem; font-weight: 600; }
.cz-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; font-size: 0.84rem; font-weight: 700; }
.cz-legend span { display: inline-flex; align-items: center; gap: 8px; }
.cz-legend i { width: 14px; height: 14px; border-radius: 4px; background: #EDEAE6; border: 1px solid var(--mk-taupe); }
.cz-legend i.is-mine { background: var(--mk-blue); border-color: var(--mk-white); }
.cz-legend i.is-pin { border-radius: 50%; background: var(--mk-white); border: 3px solid var(--mk-blue); }
.cz > * { min-width: 0; }
@media (max-width: 980px) { .cz { grid-template-columns: minmax(0, 1fr); gap: 48px; } }
/* ---- Carte de France des secteurs (01/11) : le dessin de la carte des agences fondatrices, une loupe sur votre secteur ---- */
.czf-card { position: relative; padding: 16px 14px; border-radius: 24px; background: var(--mk-white); box-shadow: var(--mk-shadow-lg); }
.czf-land { fill: #EAF6F7; stroke: #A5D9DD; stroke-width: 1.4; stroke-linejoin: round; }
.czf-gridfill { stroke: none; }
.czf-gridline { fill: none; stroke: #D2EBED; stroke-width: 0.8; }
.czf-cell { fill: none; stroke: #CBE7EA; stroke-width: 1.2; }
.czf-near { fill: rgba(174, 162, 144, 0.22); stroke: var(--mk-taupe); stroke-width: 1.2; }
.czf-mine { fill: var(--mk-blue); stroke: var(--mk-white); stroke-width: 1.5; transition: fill 0.9s ease 0.3s; }
.lv-js .cz-map:not(.is-visible) .czf-mine { fill: #EAF6F7; }
.czf-lens { fill: rgba(75, 180, 187, 0.08); stroke: var(--mk-blue); stroke-width: 1.6; }
.czf-ray { stroke: var(--mk-blue); stroke-width: 1.3; stroke-dasharray: 5 5; }
.czf-disc { fill: var(--mk-white); }
.czf-ring { fill: none; stroke: var(--mk-blue); stroke-width: 3; }
.czf-card ~ .cz-badge { top: 14px; right: 14px; }
/* Boutons longs : retour à la ligne sur petit écran */
@media (max-width: 480px) { .lv-page .mk-actions .btn { white-space: normal; text-align: center; justify-content: center; } }
@media (max-width: 600px) { .cz-badge { position: relative; right: auto; top: auto; margin-top: 16px; animation: none; } }

/* ---- Parcours d'une opportunité : scènes dessinées dans le style de l'application ---- */
.ui-head .av--blue { background: var(--mk-blue); }
.ui-head .av--ink { background: var(--mk-ink); color: var(--mk-cream); font: 800 0.8rem var(--mk-font-t); }
.sp-post { overflow: hidden; }
.sp-react { display: flex; gap: 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mk-line); font-size: 0.8rem; font-weight: 700; }
.sp-react span { display: inline-flex; align-items: center; gap: 6px; }
.sp-react svg { width: 15px; height: 15px; }
/* L'IA lit la publication : un faisceau la parcourt */
.sp-scan { display: none; position: absolute; left: 0; right: 0; top: -70px; height: 70px; pointer-events: none; background: linear-gradient(to bottom, rgba(75, 180, 187, 0), rgba(75, 180, 187, 0.14) 70%, rgba(75, 180, 187, 0.6) 97%, rgba(75, 180, 187, 0)); }
.lv-js .fl-stage .fl-pane.is-on .sp-scan { display: block; animation: sp-scan 2.6s ease-in-out 0.9s infinite; }
@keyframes sp-scan { from { top: -70px; } to { top: 100%; } }
/* Message proposé : brouillon tapé lettre à lettre */
.sp-msg { min-height: 8.4em; padding: 14px 16px; border-radius: 14px; background: var(--mk-blue-wash-2); border: 1px solid rgba(75, 180, 187, 0.24); }
.lv-js .fl-stage .sp-msg::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.18em; background: var(--mk-blue); animation: sp-caret 1s steps(1) infinite; }
@keyframes sp-caret { 50% { opacity: 0; } }
/* Attribution : Vérifier, Attribuer, Confirmer */
.sp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 800; }
.sp-steps li + li::before { content: ""; position: absolute; top: 15px; right: calc(50% + 24px); width: calc(100% - 48px); height: 4px; border-radius: 2px; background: var(--mk-taupe-wash); }
.sp-steps li.is-on::before { background: var(--mk-blue); }
.sp-steps i { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--mk-taupe-wash); font: 800 0.86rem var(--mk-font-t); }
.sp-steps .is-done i, .sp-steps .is-on i { background: var(--mk-blue); }
.sp-steps i svg { width: 16px; height: 16px; }
.sp-neg { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.sp-neg li { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; border: 1px solid var(--mk-line); transition: border-color 0.4s, background-color 0.4s; }
.sp-neg li div { flex: 1; min-width: 0; }
.sp-neg b { display: block; font-size: 0.92rem; }
.sp-neg small { display: block; font-size: 0.78rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.sp-neg li > i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mk-line); display: flex; align-items: center; justify-content: center; flex: none; transition: background-color 0.4s, border-color 0.4s, transform 0.4s var(--mk-ease); }
.sp-neg li > i svg { width: 12px; height: 12px; }
.sp-neg li.is-on { border-color: var(--mk-blue); background: var(--mk-blue-wash-2); }
.sp-neg li.is-on > i { background: var(--mk-blue); border-color: var(--mk-blue); }
/* Dans la scène : la sélection de Camille arrive après l'entrée de la carte */
.lv-js .fl-stage .fl-pane .sp-neg li.is-on { border-color: var(--mk-line); background: var(--mk-white); }
.lv-js .fl-stage .fl-pane .sp-neg li.is-on > i { background: transparent; border-color: var(--mk-line); transform: scale(0.8); }
.lv-js .fl-stage .fl-pane.is-on .sp-neg li.is-on { border-color: var(--mk-blue); background: var(--mk-blue-wash-2); transition-delay: 1.1s; }
.lv-js .fl-stage .fl-pane.is-on .sp-neg li.is-on > i { background: var(--mk-blue); border-color: var(--mk-blue); transform: none; transition-delay: 1.1s; }
.cro-av { width: 38px; height: 38px; border-radius: 50%; background: var(--mk-taupe-wash); display: inline-flex; align-items: center; justify-content: center; flex: none; font: 800 0.8rem var(--mk-font-t); }
/* Suivi : le lead avance de colonne en colonne */
.sp-pipe { margin-top: 16px; }
.sp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sp-cols span { padding: 6px 8px; border-radius: 10px; background: var(--mk-taupe-wash); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; transition: background-color 0.4s, box-shadow 0.4s; }
.sp-track {
  position: relative; height: 72px; margin-top: 8px; border-radius: 14px; border: 1px dashed var(--mk-line);
  background-image: linear-gradient(to right, transparent calc(33.333% - 1px), var(--mk-line) calc(33.333% - 1px), var(--mk-line) 33.333%, transparent 33.333%, transparent calc(66.666% - 1px), var(--mk-line) calc(66.666% - 1px), var(--mk-line) 66.666%, transparent 66.666%);
}
.sp-lead { position: absolute; top: 9px; left: calc(66.666% + 6px); width: calc(33.333% - 12px); padding: 8px 10px; border-radius: 12px; background: var(--mk-white); box-shadow: var(--mk-shadow); border: 1px solid rgba(75, 180, 187, 0.45); transition: left 0.75s var(--mk-ease); }
.sp-lead b { display: block; font-size: 0.82rem; white-space: nowrap; }
.sp-lead small { display: block; font-size: 0.72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-pipe[data-s="0"] .sp-lead { left: 6px; transition: none; animation: sp-new 0.6s var(--mk-ease); }
@keyframes sp-new { from { opacity: 0; transform: translateY(10px) scale(0.92); } to { opacity: 1; transform: none; } }
.sp-pipe[data-s="1"] .sp-lead { left: calc(33.333% + 6px); }
.sp-pipe[data-s="0"] .sp-lead small { font-size: 0; }
.sp-pipe[data-s="0"] .sp-lead small::after { content: "À attribuer"; font-size: 0.72rem; }
.sp-pipe[data-s="0"] .sp-cols span:nth-child(1), .sp-pipe[data-s="1"] .sp-cols span:nth-child(2),
.sp-pipe:not([data-s="0"]):not([data-s="1"]) .sp-cols span:nth-child(3) { background: var(--mk-blue-wash); box-shadow: inset 0 0 0 1px var(--mk-blue); }
.sp-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.sp-mini span { padding: 10px 12px; border-radius: 12px; background: var(--mk-blue-wash-2); font-size: 0.76rem; font-weight: 700; }
.sp-mini b { display: block; font: 800 1.3rem/1.1 var(--mk-font-t); }

/* ---- Le rythme : deux sessions par jour sur une frise de 24 h ---- */
.cr-day { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; margin-top: 80px; padding: 30px 36px; border-radius: 24px; background: var(--mk-blue-wash-2); border: 1px solid rgba(75, 180, 187, 0.22); }
.cr-k { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.cr-day-txt p + p { margin-top: 8px; font-size: 1.02rem; line-height: 1.6; }
.cr-line { position: relative; height: 128px; margin: 0 24px; }
.cr-track { position: absolute; left: 0; right: 0; top: 92px; height: 6px; border-radius: 3px; background: rgba(174, 162, 144, 0.3); overflow: hidden; }
.cr-now { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(75, 180, 187, 0.35), var(--mk-blue)); transform-origin: left; animation: cr-day 9s linear infinite; }
@keyframes cr-day { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cr-tick { position: absolute; top: 106px; left: calc(var(--x) * 100%); transform: translateX(-50%); font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.cr-ev { position: absolute; top: 0; left: calc(var(--x) * 100%); width: 190px; margin-left: -95px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cr-ev::after { content: ""; position: absolute; top: 74px; left: 50%; width: 2px; height: 18px; margin-left: -1px; background: var(--mk-blue); }
.cr-ev i { width: 36px; height: 36px; border-radius: 50%; background: var(--mk-blue); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px rgba(75, 180, 187, 0.18); animation: cr-ping 9s linear infinite; animation-delay: calc(var(--x) * 9s); }
.cr-ev i svg { width: 18px; height: 18px; }
.cr-ev b { margin-top: 6px; font: 800 0.95rem/1.2 var(--mk-font-t); }
.cr-ev small { font-size: 0.76rem; font-weight: 700; line-height: 1.3; white-space: nowrap; }
@keyframes cr-ping { 0% { transform: scale(1); } 3% { transform: scale(1.22); box-shadow: 0 0 0 14px rgba(75, 180, 187, 0.28); } 9%, 100% { transform: scale(1); box-shadow: 0 0 0 6px rgba(75, 180, 187, 0.18); } }
@media (max-width: 980px) { .cr-day { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 600px) { .cr-day { padding: 24px 20px; margin-top: 56px; } .cr-line { margin: 0 14px; height: 120px; } .cr-ev { width: 90px; margin-left: -45px; } .cr-ev small { display: none; } .cr-ev::after { top: 58px; height: 34px; } }

/* ---- Les quatre intentions : la publication, puis l'opportunité qualifiée ---- */
.ci { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 60px; align-items: center; max-width: 1040px; margin: 0 auto; }
.ci .ui-card { max-width: none; }
.ci-post .ui-text { font-size: 1.02rem; }
.ci-post::after {
  content: ""; position: absolute; top: 50%; right: -46px; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
  background: var(--mk-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: 0 0 0 6px rgba(75, 180, 187, 0.18);
}
.lv-js .ci.is-on .ui-field, .lv-js .cro.is-on .cro-list li, .lv-js .cro.is-on .cro-tiles span { animation: ci-fill 0.5s var(--mk-ease) both; }
.lv-js .ci.is-on .ui-field:nth-child(1), .lv-js .cro.is-on .cro-list li:nth-child(1), .lv-js .cro.is-on .cro-tiles span:nth-child(1) { animation-delay: 0.35s; }
.lv-js .ci.is-on .ui-field:nth-child(2), .lv-js .cro.is-on .cro-list li:nth-child(2), .lv-js .cro.is-on .cro-tiles span:nth-child(2) { animation-delay: 0.5s; }
.lv-js .ci.is-on .ui-field:nth-child(3), .lv-js .cro.is-on .cro-list li:nth-child(3), .lv-js .cro.is-on .cro-tiles span:nth-child(3) { animation-delay: 0.65s; }
.lv-js .ci.is-on .ui-field:nth-child(4) { animation-delay: 0.8s; }
.lv-js .ci.is-on .ui-field:nth-child(5) { animation-delay: 0.95s; }
@keyframes ci-fill { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .ci { grid-template-columns: 1fr; gap: 56px; }
  .ci-post::after { top: auto; right: auto; left: 50%; bottom: -44px; margin: 0 0 0 -16px; transform: rotate(90deg); }
}

/* ---- Groupes proposés : l'agence accepte ou refuse ---- */
.cg { max-width: 600px; justify-self: center; }
.cg-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.cg-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid var(--mk-line); }
.cg-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--mk-blue-wash); display: flex; align-items: center; justify-content: center; }
.cg-ic svg { width: 20px; height: 20px; }
.cg-row b { display: block; font-size: 0.9rem; line-height: 1.3; }
.cg-row small { display: block; margin-top: 2px; font-size: 0.78rem; font-weight: 600; line-height: 1.35; }
.cg-acts { display: none; gap: 6px; }
.cg-acts .ui-btn { padding: 7px 12px; }
.cg-done { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: var(--mk-pill); font-size: 0.78rem; font-weight: 800; white-space: nowrap; animation: cg-pop 0.5s var(--mk-ease); }
.cg-done.is-ok { background: var(--mk-blue-wash); }
.cg-done.is-no { padding-left: 12px; background: var(--mk-taupe-wash); }
.cg-done i { width: 20px; height: 20px; border-radius: 50%; background: var(--mk-blue); display: inline-flex; align-items: center; justify-content: center; }
.cg-done i svg { width: 11px; height: 11px; }
.cg[data-s="0"] .cg-row .cg-acts, .cg[data-s="1"] .cg-row:nth-child(n+2) .cg-acts, .cg[data-s="2"] .cg-row:nth-child(3) .cg-acts { display: inline-flex; }
.cg[data-s="0"] .cg-row .cg-done, .cg[data-s="1"] .cg-row:nth-child(n+2) .cg-done, .cg[data-s="2"] .cg-row:nth-child(3) .cg-done { display: none; }
@keyframes cg-pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .cg-row { grid-template-columns: auto minmax(0, 1fr); } .cg-acts, .cg-done { grid-column: 2; justify-self: start; } }

/* ---- Chaque rôle son espace ---- */
.cro { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; max-width: 1040px; margin: 0 auto; }
.cro-k { font: 700 clamp(1.3rem, 2vw, 1.6rem)/1.2 var(--mk-font-t); }
.cro-desc { margin-top: 10px; font-size: 1.05rem; line-height: 1.6; }
.cro-mock { max-width: none; }
.cro-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.cro-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--mk-line); }
.cro-list b { font-size: 0.9rem; line-height: 1.35; }
.cro-list em { font-style: normal; padding: 4px 10px; border-radius: var(--mk-pill); background: var(--mk-blue-wash-2); border: 1px solid rgba(75, 180, 187, 0.25); font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
.cro-list em.who { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mk-taupe-wash); font: 800 0.74rem var(--mk-font-t); }
.cro-list .ui-btn { padding: 6px 12px; font-size: 0.76rem; }
.cro-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.cro-tiles span { display: flex; flex-direction: column; gap: 4px; padding: 16px 14px; border-radius: 14px; background: var(--mk-blue-wash-2); border: 1px solid rgba(75, 180, 187, 0.25); }
.cro-tiles svg { width: 22px; height: 22px; margin-bottom: 6px; color: var(--mk-blue); }
.cro-tiles b { font-size: 0.88rem; line-height: 1.3; }
.cro-tiles small { font-size: 0.74rem; font-weight: 700; }
.cro-tiles .is-off { background: var(--mk-white); border: 1px dashed var(--mk-line); opacity: 0.72; }
.cro-tiles .is-off svg { color: var(--mk-taupe); }
@media (max-width: 860px) { .cro { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 520px) {
  .cro-tiles { grid-template-columns: 1fr; }
  .cro-list li { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
  .cro-list li > :last-child { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .cz-pin, .cz-badge, .cr-now, .cr-ev i, .cg-done { animation: none !important; }
  .cz-pulse, .lv-js .fl-stage .fl-pane.is-on .sp-scan { display: none; }
  .lv-js .ci.is-on .ui-field, .lv-js .cro.is-on .cro-list li, .lv-js .cro.is-on .cro-tiles span, .lv-js .fl-stage .sp-msg::after { animation: none; }
  .sp-lead, .sp-neg li, .sp-neg li > i { transition: none; }
}

/* ==========================================================================
   10. Page Écosystème digital
   ========================================================================== */

/* ---- En-tête à galerie défilante (rétabli le 30/10 au soir) : titre plus long, galerie rapprochée des boutons ---- */
.eco-galerie .mk-page-title { max-width: 26ch; }
.eco-galerie .mk-curve { margin-top: -12px; }
@media (max-width: 760px) { .eco-galerie .mk-curve { margin-top: 0; } }

/* ---- Hero : trois écrans en profondeur, reliés au logo ---- */
.eco-hv { aspect-ratio: 1 / 0.86; }
.eco-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.eco-links path { fill: none; stroke: var(--mk-blue); stroke-width: 2; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; animation: eco-dash 1.4s linear infinite; }
@keyframes eco-dash { to { stroke-dashoffset: -20; } }
.eco-scr { position: absolute; width: 70%; border-radius: 16px; overflow: hidden; background: var(--mk-white); box-shadow: var(--mk-shadow-lg), 0 0 0 1px rgba(61, 92, 96, 0.06); transform: perspective(1600px) rotateY(-12deg) rotateX(4deg); transform-origin: left center; z-index: 1; }
.eco-scr img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }
.eco-scr--a { right: -10%; top: 0; }
.eco-scr--b { right: 0; top: 22%; z-index: 2; }
.eco-scr--c { right: 10%; top: 44%; z-index: 3; }
.eco-core { position: absolute; left: 10%; top: 34.9%; width: 21%; aspect-ratio: 1; margin: -10.5% 0 0 -10.5%; border-radius: 50%; background: var(--mk-white); box-shadow: var(--mk-shadow-lg); display: flex; align-items: center; justify-content: center; z-index: 4; }
.eco-core img { position: relative; width: 66%; height: auto; }
.eco-ring { position: absolute; inset: -14%; border-radius: 50%; border: 2px solid rgba(75, 180, 187, 0.5); animation: eco-ring 3.2s ease-out infinite; }
.eco-ring--2 { animation-delay: 1.6s; }
@keyframes eco-ring { 0% { transform: scale(0.75); opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } }
.eco-hv .lv-float { z-index: 5; }
.eco-hv .lv-float--1 { left: auto; right: 0; top: -8%; }
.eco-hv .lv-float--2 { left: 4%; bottom: -3%; }
.eco-hv .lv-float--3 { right: -6%; bottom: 34%; }
@media (max-width: 980px) { .eco-hv { max-width: 620px; margin: 0 auto; width: 100%; } }

/* ---- Notre promesse : deux piliers et la citation ---- */
.eco-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 52px; }
.eco-pillar { position: relative; overflow: hidden; padding: 34px 32px; border-radius: 24px; background: var(--mk-white); box-shadow: var(--mk-shadow); border: 1px solid rgba(174, 162, 144, 0.24); }
.eco-pillar::before { content: ""; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(75, 180, 187, 0.18), transparent); pointer-events: none; }
.pl-ic { position: relative; width: 56px; height: 56px; border-radius: 16px; background: var(--mk-blue); display: flex; align-items: center; justify-content: center; }
.pl-ic svg { width: 26px; height: 26px; }
.pl-k { margin-top: 20px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.mk .eco-pillar h3 { margin: 6px 0 0; font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 700; }
.eco-quote { margin: 44px auto 0; max-width: 860px; text-align: center; }
.eco-quote blockquote { margin: 0; font: 700 clamp(1.35rem, 2.4vw, 1.9rem)/1.35 var(--mk-font-t); letter-spacing: -0.01em; color: var(--mk-ink); }
.eco-quote blockquote::before { content: "«\00a0"; }
.eco-quote blockquote::after { content: "\00a0»"; }
.eco-quote figcaption { margin-top: 12px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
@media (max-width: 860px) { .eco-pillars { grid-template-columns: 1fr; } .eco-pillar { padding: 28px 24px; } }

/* ---- Notre vision : l'IA prépare, votre équipe décide ---- */
.eco-duo { max-width: 980px; margin: 48px auto 0; }
.eco-duo-head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-bottom: 14px; }
.eco-duo-head span { display: inline-flex; align-items: center; gap: 10px; font: 700 1.1rem var(--mk-font-t); }
.eco-duo-head i { width: 34px; height: 34px; border-radius: 50%; background: var(--mk-blue); display: inline-flex; align-items: center; justify-content: center; }
.eco-duo-head i svg { width: 17px; height: 17px; }
.eco-duo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.eco-duo li { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
.eco-duo li > span { display: flex; align-items: center; padding: 16px 20px; border-radius: 16px; background: var(--mk-white); font-weight: 700; line-height: 1.45; box-shadow: 0 12px 28px -20px rgba(61, 92, 96, 0.5); }
.ed-ia { border: 1px solid rgba(75, 180, 187, 0.35); }
.ed-you { border: 1px solid rgba(174, 162, 144, 0.4); }
.ed-arrow { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--mk-blue); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px rgba(75, 180, 187, 0.16); }
.ed-arrow svg { width: 16px; height: 16px; }
.eco-time { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.eco-time li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 7px; border-radius: var(--mk-pill); background: var(--mk-white); border: 1px solid var(--mk-line); font-weight: 800; font-size: 0.9rem; }
.eco-time i { width: 28px; height: 28px; border-radius: 50%; background: var(--mk-blue); display: inline-flex; align-items: center; justify-content: center; }
.eco-time i svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .eco-duo-head { display: none; }
  .eco-duo ul { gap: 22px; }
  .eco-duo li { grid-template-columns: 1fr; gap: 0; }
  .eco-duo li > span { display: block; }
  .eco-duo li > span::before { display: block; margin-bottom: 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
  .ed-ia::before { content: "L'IA prépare"; }
  .ed-you::before { content: "Votre équipe décide"; }
  .ed-arrow { position: relative; left: auto; top: auto; margin: -6px auto; transform: rotate(90deg); z-index: 1; }
}

/* ---- Les trois leviers : grandes cartes ---- */
.eco-levers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 52px; }
.eco-lever { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--mk-white); box-shadow: var(--mk-shadow); border: 1px solid rgba(174, 162, 144, 0.24); transition: transform 0.4s var(--mk-ease), box-shadow 0.4s; }
.eco-lever:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow-lg); }
.el-shot { position: relative; display: block; overflow: hidden; background: var(--mk-blue-wash-2); border-bottom: 1px solid var(--mk-line); }
.el-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; transition: transform 0.8s var(--mk-ease); }
.eco-lever:hover .el-shot img { transform: scale(1.04); }
.el-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 26px; }
.el-k { display: inline-flex; align-items: center; gap: 10px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.el-k b { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--mk-blue); font: 800 0.8rem var(--mk-font-t); letter-spacing: 0; }
.mk .eco-lever h3 { margin: 12px 0 0; font-size: 1.32rem; font-weight: 700; }
.el-txt { margin-top: 8px; font-size: 0.98rem; line-height: 1.58; }
.eco-lever .mk-checks { margin-top: 16px; gap: 9px; font-size: 0.94rem; }
.el-go { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(75, 180, 187, 0.7); text-underline-offset: 4px; }
.el-go svg { width: 16px; height: 16px; transition: transform 0.3s; }
.eco-lever:hover .el-go svg { transform: translateX(4px); }
@media (max-width: 980px) { .eco-levers { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }

/* ---- Comment ils se complètent : schéma interactif (faisceaux et comètes) ---- */
.eco-beams { margin-top: 48px; }
.eb-diagram { position: relative; max-width: 1040px; margin: 0 auto; aspect-ratio: 1000 / 560; }
.eb-diagram > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eb-path { fill: none; stroke: rgba(174, 162, 144, 0.55); stroke-width: 3; stroke-dasharray: 8 10; transition: stroke 0.4s; }
.eb-comet { fill: none; stroke: var(--mk-blue); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 70 930; stroke-dashoffset: 1000; opacity: 0.28; animation: eb-run 3.4s linear infinite; transition: opacity 0.4s; }
@keyframes eb-run { to { stroke-dashoffset: 0; } }
.eb-node { position: absolute; z-index: 1; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px; background: var(--mk-white); box-shadow: var(--mk-shadow); border: 1px solid rgba(174, 162, 144, 0.25); white-space: nowrap; transition: box-shadow 0.4s, border-color 0.4s, transform 0.5s var(--mk-ease); }
.eb-node .ic { width: 38px; height: 38px; border-radius: 12px; background: var(--mk-blue); display: flex; align-items: center; justify-content: center; flex: none; }
.eb-node .ic svg { width: 19px; height: 19px; }
.eb-node b { display: block; font: 700 0.9rem/1.25 var(--mk-font-t); }
.eb-node small { display: block; font-size: 0.74rem; font-weight: 700; }
.eb-node--core { flex-direction: column; gap: 2px; padding: 12px 18px 10px; border-radius: 22px; text-align: center; }
.eb-logo { width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--mk-white); box-shadow: 0 0 0 8px rgba(75, 180, 187, 0.14); display: flex; align-items: center; justify-content: center; }
.eb-logo img { width: 54px; height: 54px; }
.eb-side { max-width: 900px; margin: 30px auto 0; }
.eb-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.eb-tab { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 30px; border: 1px solid var(--mk-line); background: var(--mk-white); color: var(--mk-ink); font: 800 0.95rem var(--mk-font-b); text-align: left; cursor: pointer; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; }
.eb-tab i { width: 30px; height: 30px; border-radius: 50%; background: var(--mk-blue-wash); display: inline-flex; align-items: center; justify-content: center; flex: none; font: 800 0.8rem var(--mk-font-t); }
.eb-tab:hover { border-color: var(--mk-blue); }
.eb-tab[aria-selected="true"] { background: var(--mk-blue-wash-2); border-color: var(--mk-blue); box-shadow: var(--mk-shadow); }
.eb-tab[aria-selected="true"] i { background: var(--mk-blue); }
.eb-side .lv-tabpanels { margin-top: 20px; }
.eb-panel { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 24px 28px; border-radius: 20px; background: var(--mk-ink); color: var(--mk-cream); }
.eb-panel > :not(.eb-ico) { grid-column: 2; }
.eb-ico { grid-row: 1 / span 3; width: 48px; height: 48px; border-radius: 14px; background: var(--mk-blue); display: flex; align-items: center; justify-content: center; }
.eb-ico svg { width: 20px; height: 20px; }
.mk .eb-panel h3 { margin: 2px 0 0; color: var(--mk-cream); font-size: 1.15rem; font-weight: 700; }
.mk .eb-panel p { margin-top: 8px; color: var(--mk-cream); font-size: 0.98rem; line-height: 1.6; }
.mk .eb-panel .eb-who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.eb-who span { padding: 4px 11px; border-radius: var(--mk-pill); border: 1px solid rgba(249, 242, 231, 0.32); font-size: 0.76rem; font-weight: 800; line-height: 1.3; }
/* Le lien choisi s'allume : faisceaux en bleu, comètes visibles, nœuds concernés en avant */
.eco-beams:has(#flux-1-t[aria-selected="true"]) .eb-b.f1 .eb-path { stroke: var(--mk-blue); stroke-dasharray: none; }
.eco-beams:has(#flux-1-t[aria-selected="true"]) .eb-b.f1 .eb-comet { opacity: 1; }
.eco-beams:has(#flux-1-t[aria-selected="true"]) .eb-node[data-f~="1"] { border-color: var(--mk-blue); box-shadow: 0 0 0 5px rgba(75, 180, 187, 0.22), var(--mk-shadow-lg); transform: translate(-50%, -50%) scale(1.05); }
.eco-beams:has(#flux-2-t[aria-selected="true"]) .eb-b.f2 .eb-path { stroke: var(--mk-blue); stroke-dasharray: none; }
.eco-beams:has(#flux-2-t[aria-selected="true"]) .eb-b.f2 .eb-comet { opacity: 1; }
.eco-beams:has(#flux-2-t[aria-selected="true"]) .eb-node[data-f~="2"] { border-color: var(--mk-blue); box-shadow: 0 0 0 5px rgba(75, 180, 187, 0.22), var(--mk-shadow-lg); transform: translate(-50%, -50%) scale(1.05); }
.eco-beams:has(#flux-3-t[aria-selected="true"]) .eb-b.f3 .eb-path { stroke: var(--mk-blue); stroke-dasharray: none; }
.eco-beams:has(#flux-3-t[aria-selected="true"]) .eb-b.f3 .eb-comet { opacity: 1; }
.eco-beams:has(#flux-3-t[aria-selected="true"]) .eb-node[data-f~="3"] { border-color: var(--mk-blue); box-shadow: 0 0 0 5px rgba(75, 180, 187, 0.22), var(--mk-shadow-lg); transform: translate(-50%, -50%) scale(1.05); }
.eco-beams:has(#flux-4-t[aria-selected="true"]) .eb-b.f4 .eb-path { stroke: var(--mk-blue); stroke-dasharray: none; }
.eco-beams:has(#flux-4-t[aria-selected="true"]) .eb-b.f4 .eb-comet { opacity: 1; }
.eco-beams:has(#flux-4-t[aria-selected="true"]) .eb-node[data-f~="4"] { border-color: var(--mk-blue); box-shadow: 0 0 0 5px rgba(75, 180, 187, 0.22), var(--mk-shadow-lg); transform: translate(-50%, -50%) scale(1.05); }
.eco-beams:has(#flux-5-t[aria-selected="true"]) .eb-b.f5 .eb-path { stroke: var(--mk-blue); stroke-dasharray: none; }
.eco-beams:has(#flux-5-t[aria-selected="true"]) .eb-b.f5 .eb-comet { opacity: 1; }
.eco-beams:has(#flux-5-t[aria-selected="true"]) .eb-node[data-f~="5"] { border-color: var(--mk-blue); box-shadow: 0 0 0 5px rgba(75, 180, 187, 0.22), var(--mk-shadow-lg); transform: translate(-50%, -50%) scale(1.05); }
@media (max-width: 600px) {
  .eb-node { padding: 6px; border-radius: 14px; gap: 0; }
  .eb-node b, .eb-node small { display: none; }
  .eb-node .ic { width: 30px; height: 30px; border-radius: 10px; }
  .eb-node .ic svg { width: 16px; height: 16px; }
  .eb-node--core { padding: 8px 10px; }
  .eb-panel { grid-template-columns: 1fr; padding: 20px; }
  .eb-panel > :not(.eb-ico) { grid-column: 1; }
  .eb-ico { grid-row: auto; margin-bottom: 12px; width: 40px; height: 40px; }
  .eb-node--core b { display: block; font-size: 0.74rem; }
  .eb-logo { width: 44px; height: 44px; box-shadow: 0 0 0 5px rgba(75, 180, 187, 0.14); }
  .eb-logo img { width: 38px; height: 38px; }
}

/* ---- Une journée avec MANAKRIA : frise qui se remplit au défilement ---- */
.eco-day { position: relative; list-style: none; max-width: 1000px; margin: 60px auto 0; padding: 0; display: grid; gap: 22px; }
.eco-day::before, .eco-day::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; }
.eco-day::before { background: rgba(174, 162, 144, 0.32); }
.eco-day::after { background: linear-gradient(var(--mk-blue), rgba(75, 180, 187, 0.6)); transform-origin: top; transform: scaleY(var(--p, 1)); }
.ed-item { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); align-items: center; }
.ed-time { grid-column: 2; grid-row: 1; justify-self: center; padding: 7px 14px; border-radius: var(--mk-pill); background: var(--mk-white); border: 2px solid var(--mk-blue); font: 800 0.9rem var(--mk-font-t); white-space: nowrap; box-shadow: 0 0 0 6px var(--mk-blue-wash-2); }
.ed-card { grid-row: 1; padding: 20px 22px; border-radius: 18px; background: var(--mk-white); box-shadow: var(--mk-shadow); border: 1px solid rgba(174, 162, 144, 0.22); }
.ed-item:nth-child(odd) .ed-card { grid-column: 3; }
.ed-item:nth-child(even) .ed-card { grid-column: 1; }
.ed-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ed-tag i { width: 26px; height: 26px; border-radius: 50%; background: var(--mk-blue); display: inline-flex; align-items: center; justify-content: center; }
.ed-tag i svg { width: 13px; height: 13px; }
.mk .ed-card h3 { margin: 10px 0 0; font-size: 1.08rem; font-weight: 700; }
.ed-card p { margin-top: 6px; font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 760px) {
  .eco-day::before, .eco-day::after { left: 36px; }
  .ed-item { grid-template-columns: 72px minmax(0, 1fr); gap: 0 12px; }
  .ed-time { grid-column: 1; padding: 6px 8px; font-size: 0.74rem; }
  .ed-item:nth-child(odd) .ed-card, .ed-item:nth-child(even) .ed-card { grid-column: 2; }
  .ed-card { padding: 16px 18px; }
}

/* ---- Complet, à votre rythme : on retire un levier, jamais le dernier ---- */
.eco-pick { max-width: 520px; justify-self: center; }
.ep-list { display: grid; gap: 10px; margin-top: 18px; }
.ep-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px 14px 14px; border-radius: 16px; border: 1px solid var(--mk-blue); background: var(--mk-blue-wash-2); color: var(--mk-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.35s, border-color 0.35s; }
.ep-item .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--mk-blue); display: flex; align-items: center; justify-content: center; flex: none; transition: opacity 0.35s, filter 0.35s; }
.ep-item .ic svg { width: 21px; height: 21px; }
.ep-txt { flex: 1; min-width: 0; transition: opacity 0.35s; }
.ep-txt b { display: block; font: 700 0.98rem/1.3 var(--mk-font-t); }
.ep-txt small { display: block; margin-top: 2px; font-size: 0.8rem; font-weight: 600; }
.ep-sw { position: relative; width: 46px; height: 26px; border-radius: 13px; background: var(--mk-blue); flex: none; transition: background-color 0.35s; }
.ep-sw i { position: absolute; top: 3px; left: 23px; width: 20px; height: 20px; border-radius: 50%; background: var(--mk-white); box-shadow: 0 2px 6px rgba(61, 92, 96, 0.3); transition: left 0.35s var(--mk-ease); }
.ep-item[aria-pressed="false"] { background: var(--mk-white); border-color: var(--mk-line); border-style: dashed; }
.ep-item[aria-pressed="false"] .ic { opacity: 0.45; filter: grayscale(1); }
.ep-item[aria-pressed="false"] .ep-txt { opacity: 0.55; }
.ep-item[aria-pressed="false"] .ep-sw { background: rgba(174, 162, 144, 0.45); }
.ep-item[aria-pressed="false"] .ep-sw i { left: 3px; }
.ep-item.is-nope { animation: ep-nope 0.45s; }
@keyframes ep-nope { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.ep-sum { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mk-line); font-size: 0.92rem; line-height: 1.5; }
/* Ce que l'on perd en retirant un levier (30/10 au soir) : la liste se déplie sous le levier retiré */
.ep-row { display: grid; }
.ep-loss { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.45s var(--mk-ease), visibility 0s 0.45s; }
.ep-loss > div { min-height: 0; overflow: hidden; }
.ep-row.is-off .ep-loss { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.45s var(--mk-ease), visibility 0s; }
.ep-loss-in { margin: 8px 0 2px; padding: 14px 16px; border-radius: 14px; background: rgba(174, 162, 144, 0.12); border: 1px dashed rgba(174, 162, 144, 0.65); }
.ep-loss-k { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ep-loss ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.ep-loss li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; font-weight: 600; line-height: 1.45; }
.ep-loss li i { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: rgba(174, 162, 144, 0.35); display: flex; align-items: center; justify-content: center; }
.ep-loss li i::before { content: ""; width: 8px; height: 2px; border-radius: 1px; background: var(--mk-ink); }
.ep-row.is-off .ep-loss li { animation: ep-in 0.5s var(--mk-ease) both; }
.ep-row.is-off .ep-loss li:nth-child(2) { animation-delay: 0.08s; }
.ep-row.is-off .ep-loss li:nth-child(3) { animation-delay: 0.16s; }
.ep-row.is-off .ep-loss li:nth-child(4) { animation-delay: 0.24s; }
.ep-row.is-off .ep-loss li:nth-child(5) { animation-delay: 0.32s; }
.ep-row.is-off .ep-loss li:nth-child(6) { animation-delay: 0.4s; }
@keyframes ep-in { from { opacity: 0; transform: translateX(-8px); } }

/* ---- L'accompagnement en 4 temps (bandeau vert sombre) ---- */
.eco-steps { position: relative; list-style: none; margin: 84px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.eco-steps::before { content: ""; position: absolute; left: 4%; right: 4%; top: -1px; height: 2px; background: linear-gradient(90deg, rgba(75, 180, 187, 0), rgba(75, 180, 187, 0.75) 15%, rgba(75, 180, 187, 0.75) 85%, rgba(75, 180, 187, 0)); }
.eco-steps li { position: relative; padding: 0 22px 26px; border-radius: 20px; background: rgba(249, 242, 231, 0.07); border: 1px solid rgba(249, 242, 231, 0.18); }
.es-n { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: -28px 0 18px; border-radius: 50%; background: var(--mk-blue); color: var(--mk-ink); font: 800 1.05rem var(--mk-font-t); box-shadow: 0 0 0 8px rgba(75, 180, 187, 0.18); }
.mk .eco-steps h3 { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.mk .eco-steps p { margin-top: 8px; font-size: 0.95rem; line-height: 1.58; }
@media (max-width: 980px) { .eco-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 52px; } .eco-steps::before { display: none; } }
@media (max-width: 560px) { .eco-steps { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .eco-links path, .eco-ring, .eb-comet { animation: none !important; }
  .eco-ring { display: none; }
  .eb-comet { stroke-dashoffset: 0; stroke-dasharray: none; opacity: 0; }
  .ep-item.is-nope { animation: none; }
  .ep-loss, .ep-row.is-off .ep-loss { transition: none; }
  .ep-row.is-off .ep-loss li { animation: none; }
}

/* ==========================================================================
   11. Page Agent de visibilité
   ========================================================================== */
.rv-stars { display: inline-flex; gap: 2px; color: var(--mk-blue); }
.rv-stars i { display: inline-flex; }
.rv-stars svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; }
.rv-stars i.is-off { color: rgba(174, 162, 144, 0.45); }

/* ---- Annuaires : une mise à jour, diffusée partout ---- */
.mk-dirs { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.6fr); gap: 40px; align-items: start; margin-top: 52px; }
.dr-update { position: sticky; top: 120px; }
.dr-send { position: relative; overflow: hidden; }
.mk-dirs.is-visible .dr-send::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); transform: translateX(-100%); animation: dr-shine 1.1s 0.2s ease-out both; }
@keyframes dr-shine { to { transform: translateX(100%); } }
.dr-k { margin: 0 0 12px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.dr-grid { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; }
.dr { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--mk-white); border: 1px solid rgba(174, 162, 144, 0.25); box-shadow: 0 8px 20px -16px rgba(61, 92, 96, 0.45); transition: border-color 0.4s; transition-delay: var(--d, 0s); }
.dr img { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 10px; }
.dr-n { font-size: 0.82rem; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-st { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 0.7rem; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.dr-st i { width: 14px; height: 14px; border-radius: 50%; background: var(--mk-blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dr-st i svg { width: 8px; height: 8px; }
/* Avec JS : les statuts s'allument un à un quand le bloc arrive à l'écran */
.lv-js .mk-dirs .dr-st { transition: opacity 0.4s ease, transform 0.4s var(--mk-ease); transition-delay: var(--d, 0s); }
.lv-js .mk-dirs:not(.is-visible) .dr-st { opacity: 0; transform: translateY(4px); }
.mk-dirs.is-visible .dr { border-color: rgba(75, 180, 187, 0.45); }
@media (max-width: 980px) { .mk-dirs { grid-template-columns: 1fr; } .dr-update { position: relative; top: auto; justify-self: center; } }
@media (max-width: 520px) { .dr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .dr { padding: 8px 10px; column-gap: 8px; grid-template-columns: 30px minmax(0, 1fr); } .dr img { width: 30px; height: 30px; } }

/* ---- Fiche Google : complétude, recommandations validées une à une ---- */
@property --gv { syntax: '<number>'; inherits: true; initial-value: 0.96; }
.gb { justify-self: center; max-width: 560px; transition: --gv 1s var(--mk-ease); }
.gb[data-s="0"] { --gv: 0.62; }
.gb[data-s="1"] { --gv: 0.74; }
.gb[data-s="2"] { --gv: 0.86; }
.gb[data-s="3"] { --gv: 0.96; }
.gb-top { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.gb-ring { position: relative; width: 104px; height: 104px; border-radius: 50%; flex: none; background: conic-gradient(var(--mk-blue) calc(var(--gv, 0.96) * 1turn), var(--mk-taupe-wash) 0); }
.gb-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--mk-white); }
.gb-ring::after { content: "Complétude"; position: absolute; left: 50%; bottom: -21px; transform: translateX(-50%); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.gb-v { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.gb-v b { position: absolute; font: 800 1.3rem var(--mk-font-t); opacity: 0; transition: opacity 0.3s; }
.gb-v .v3 { opacity: 1; }
.gb[data-s] .gb-v b { opacity: 0; }
.gb[data-s="0"] .gb-v .v0, .gb[data-s="1"] .gb-v .v1, .gb[data-s="2"] .gb-v .v2, .gb[data-s="3"] .gb-v .v3 { opacity: 1; }
.gb-id { min-width: 0; }
.gb-id b { display: block; font: 700 1.1rem/1.3 var(--mk-font-t); }
.gb-id small { display: block; font-size: 0.8rem; font-weight: 600; }
.gb-id .rv-stars { margin-top: 5px; }
.gb-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gb-cats span { padding: 3px 10px; border-radius: var(--mk-pill); background: var(--mk-blue-wash); font-size: 0.72rem; font-weight: 800; }
.gb-recos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.gb-reco { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--mk-line); }
.gb-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--mk-blue-wash); display: flex; align-items: center; justify-content: center; }
.gb-ic svg { width: 16px; height: 16px; }
.gb-reco b { display: block; font-size: 0.86rem; line-height: 1.3; }
.gb-reco small { display: block; font-size: 0.72rem; font-weight: 700; }
.gb-do { display: none; padding: 6px 12px; }
.gb-done { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 5px; border-radius: var(--mk-pill); background: var(--mk-blue-wash); font-size: 0.74rem; font-weight: 800; animation: cg-pop 0.5s var(--mk-ease); }
.gb-done i { width: 18px; height: 18px; border-radius: 50%; background: var(--mk-blue); display: inline-flex; align-items: center; justify-content: center; }
.gb-done i svg { width: 10px; height: 10px; }
.gb[data-s="0"] .gb-reco .gb-do, .gb[data-s="1"] .gb-reco:nth-child(n+2) .gb-do, .gb[data-s="2"] .gb-reco:nth-child(3) .gb-do { display: inline-flex; }
.gb[data-s="0"] .gb-reco .gb-done, .gb[data-s="1"] .gb-reco:nth-child(n+2) .gb-done, .gb[data-s="2"] .gb-reco:nth-child(3) .gb-done { display: none; }
.gb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mk-line); }
.gb-dup { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 800; }
.gb-dup svg { width: 15px; height: 15px; }
@media (max-width: 520px) { .gb-top { flex-direction: column; align-items: flex-start; gap: 30px; } .gb-reco { grid-template-columns: auto minmax(0, 1fr); } .gb-do, .gb-done { grid-column: 2; justify-self: start; } }

/* ---- Avis clients : boîte de réception, réponse proposée qui s'écrit ---- */
.rv-wrap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr); gap: 28px; align-items: start; margin-top: 48px; }
.rv-inbox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rv-tab { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--mk-line); background: var(--mk-white); color: var(--mk-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s; }
.rv-tab .cro-av { grid-row: 1 / span 2; width: 36px; height: 36px; }
.rv-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.rv-who b { font-size: 0.86rem; }
.rv-tab small { font-size: 0.72rem; font-weight: 700; }
.rv-tab:hover { border-color: var(--mk-blue); }
.rv-tab[aria-selected="true"] { border-color: var(--mk-blue); background: var(--mk-blue-wash-2); box-shadow: var(--mk-shadow); }
.rv-main .lv-tabpanels { margin-top: 14px; }
.rv-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: start; }
.rv-panel .ui-card { max-width: none; }
.rv-review .ui-head .rv-stars { margin-left: auto; }
.rv-msg { min-height: 6.6em; padding: 12px 14px; border-radius: 14px; background: var(--mk-blue-wash-2); border: 1px solid rgba(75, 180, 187, 0.24); }
.lv-js .rv-msg::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.18em; background: var(--mk-blue); animation: sp-caret 1s steps(1) infinite; }
.rv-side { display: grid; gap: 12px; }
.rv-score { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px; background: var(--mk-white); box-shadow: var(--mk-shadow); }
.rv-score > b { font: 800 2.6rem/1 var(--mk-font-t); letter-spacing: -0.03em; }
.rv-score small { display: block; margin-top: 4px; font-size: 0.78rem; font-weight: 700; }
.rv-score .rv-stars svg { width: 17px; height: 17px; }
.rv-box { padding: 16px 18px; border-radius: 18px; background: var(--mk-white); box-shadow: var(--mk-shadow); }
.rv-k { margin: 0; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rv-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--mk-pill); border: 1px solid var(--mk-line); font-size: 0.8rem; font-weight: 800; }
.rv-chips span.is-on { border-color: var(--mk-blue); background: var(--mk-blue-wash); }
.rv-chips svg { width: 14px; height: 14px; }
.rv-chips span.is-on svg { width: 12px; height: 12px; border-radius: 50%; background: var(--mk-blue); padding: 2px; box-sizing: content-box; }
.rv-note { margin-top: 8px; font-size: 0.8rem; font-weight: 600; }
@media (max-width: 1100px) { .rv-wrap { grid-template-columns: 1fr; } .rv-side { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .rv-inbox { grid-template-columns: 1fr; } .rv-panel { grid-template-columns: 1fr; } .rv-side { grid-template-columns: 1fr; } }

/* ---- Satisfaction : étapes, jauge et thèmes ---- */
.sat-steps { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: st; }
.sat-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: var(--mk-pill); border: 1px solid var(--mk-line); background: var(--mk-white); font-size: 0.86rem; font-weight: 800; counter-increment: st; transition: border-color 0.35s, background-color 0.35s, box-shadow 0.35s; }
.sat-steps li::before { content: counter(st); width: 24px; height: 24px; border-radius: 50%; background: var(--mk-blue-wash); display: inline-flex; align-items: center; justify-content: center; font: 800 0.74rem var(--mk-font-t); transition: background-color 0.35s; }
.sat-steps[data-s="0"] li:nth-child(1), .sat-steps[data-s="1"] li:nth-child(2), .sat-steps[data-s="2"] li:nth-child(3),
.sat-steps[data-s="3"] li:nth-child(4), .sat-steps[data-s="4"] li:nth-child(5) { border-color: var(--mk-blue); background: var(--mk-blue-wash-2); box-shadow: 0 0 0 4px rgba(75, 180, 187, 0.16); }
.sat-steps[data-s="0"] li:nth-child(1)::before, .sat-steps[data-s="1"] li:nth-child(2)::before, .sat-steps[data-s="2"] li:nth-child(3)::before,
.sat-steps[data-s="3"] li:nth-child(4)::before, .sat-steps[data-s="4"] li:nth-child(5)::before { background: var(--mk-blue); }
.sat-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; margin-top: 14px; align-items: stretch; }
.sat-gauge { position: relative; padding: 16px 12px 12px; border-radius: 16px; background: var(--mk-blue-wash-2); text-align: center; }
.sat-gauge svg { display: block; width: 100%; max-width: 190px; margin: 0 auto; overflow: visible; }
.sat-gauge path { fill: none; stroke-width: 11; stroke-linecap: round; }
.sat-gauge .bg { stroke: var(--mk-taupe-wash); }
.sat-gauge .fg { stroke: var(--mk-blue); stroke-dasharray: var(--v) 100; }
.lv-js .ch-anim .sat-gauge .fg { stroke-dasharray: 0 100; transition: stroke-dasharray 1.6s var(--mk-ease); }
.lv-js .ch-anim.is-in .sat-gauge .fg { stroke-dasharray: var(--v) 100; }
.sat-gauge > b { display: block; margin-top: -30px; font: 800 1.9rem/1 var(--mk-font-t); }
.sat-gauge > b small { font-size: 0.9rem; font-weight: 700; }
.sat-gauge p { margin-top: 6px; font-size: 0.78rem; font-weight: 800; }
.sat-board .ch-panel + .ch-panel, .sat-board > .ch-panel { margin-top: 12px; }
.sat-row .ch-panel { margin-top: 0; }
.ch-bars--themes li { grid-template-columns: 120px minmax(0, 1fr) 44px; }
@media (max-width: 600px) { .sat-row { grid-template-columns: 1fr; } }

/* ---- Veille locale : votre agence face au secteur ---- */
.vl-cmp { display: grid; gap: 14px; margin-top: 16px; }
.vl-row > span { display: block; font-size: 0.8rem; font-weight: 800; }
.vl-bars { display: grid; gap: 6px; margin-top: 6px; }
.vl-bars i { position: relative; display: block; height: 26px; border-radius: 8px; background: var(--mk-blue-wash-2); overflow: hidden; }
.vl-bars i::before { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 100%); border-radius: 8px; background: rgba(61, 92, 96, 0.13); transform-origin: left; }
.vl-bars i.me::before { background: var(--mk-blue); }
.vl-bars em { position: relative; display: flex; align-items: center; height: 100%; padding: 0 10px; font-style: normal; font-size: 0.76rem; font-weight: 800; }
.lv-js .ch-anim .vl-bars i::before { transform: scaleX(0); transition: transform 1.2s var(--mk-ease); }
.lv-js .ch-anim.is-in .vl-bars i::before { transform: scaleX(1); }
.lv-js .ch-anim .vl-row:nth-child(2) .vl-bars i::before { transition-delay: 0.15s; }
.lv-js .ch-anim .vl-row:nth-child(3) .vl-bars i::before { transition-delay: 0.3s; }
.vl .ch-panel { margin-top: 14px; }
.vl-rank { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.vl-rank li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--mk-blue-wash-2); font-size: 0.86rem; font-weight: 800; }
.vl-rank span { width: 24px; height: 24px; border-radius: 50%; background: var(--mk-white); display: inline-flex; align-items: center; justify-content: center; font: 800 0.76rem var(--mk-font-t); flex: none; }
.vl-rank em { margin-left: auto; font-style: normal; font-size: 0.78rem; }
.vl-rank li.me { background: var(--mk-white); border: 1.5px solid var(--mk-blue); box-shadow: 0 0 0 4px rgba(75, 180, 187, 0.14); }
.vl-rank li.me span { background: var(--mk-blue); }
.vl-pos li { grid-template-columns: 130px minmax(0, 1fr) 34px; }

/* ---- Pages locales : recherche, page et réponse d'assistant ---- */
.lp { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto auto; gap: 18px 28px; margin-top: 52px; align-items: start; }
.lp .ui-card { max-width: none; }
.lp-search { grid-column: 1; grid-row: 1; }
.lp-q { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--mk-pill); border: 1.5px solid rgba(75, 180, 187, 0.6); background: var(--mk-blue-wash-2); font-weight: 800; }
.lp-q svg { width: 17px; height: 17px; }
.lp-res { margin-top: 14px; }
.lp-res small { display: block; font-size: 0.74rem; font-weight: 700; }
.lp-res b { display: block; margin-top: 2px; font: 700 1rem/1.35 var(--mk-font-t); text-decoration: underline; text-decoration-color: rgba(75, 180, 187, 0.6); text-underline-offset: 3px; }
.lp-res p { margin-top: 4px; font-size: 0.86rem; line-height: 1.5; }
.lp-ai { grid-column: 1; grid-row: 2; }
.lp-src, .geo-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lp-src span, .geo-src span { padding: 3px 10px; border-radius: var(--mk-pill); background: var(--mk-blue-wash); font-size: 0.72rem; font-weight: 800; }
.lp-page { grid-column: 2; grid-row: 1 / span 2; padding: 0; overflow: hidden; }
.lp-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--mk-taupe-wash); }
.lp-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(174, 162, 144, 0.6); }
.lp-bar span { margin-left: 10px; padding: 3px 12px; border-radius: var(--mk-pill); background: var(--mk-white); font-size: 0.74rem; font-weight: 700; }
.lp-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
.lp-info { padding: 22px; }
.lp-info > b { display: block; font: 700 1.15rem/1.3 var(--mk-font-t); }
.lp-info .rv-stars { margin-top: 6px; }
.lp-info small { display: block; font-size: 0.78rem; font-weight: 700; }
.lp-info p { margin-top: 10px; font-size: 0.86rem; }
.lp-map { position: relative; min-height: 260px; background-color: var(--mk-blue-wash-2); background-image: linear-gradient(rgba(75, 180, 187, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 180, 187, 0.12) 1px, transparent 1px); background-size: 26px 26px; }
.lp-map::before { content: ""; position: absolute; left: -10%; right: -10%; top: 46%; height: 10px; background: rgba(255, 255, 255, 0.9); transform: rotate(-12deg); }
.lp-map::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 55%; width: 8px; background: rgba(255, 255, 255, 0.9); transform: rotate(8deg); }
.lp-pin { position: absolute; z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--mk-white); border: 3px solid rgba(174, 162, 144, 0.8); }
.lp-pin--me { left: 50%; top: 44%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 0; background: var(--mk-blue); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px rgba(75, 180, 187, 0.22); animation: lp-ping 2.4s ease-out infinite; }
.lp-pin--me svg { width: 19px; height: 19px; }
@keyframes lp-ping { 0% { box-shadow: 0 0 0 0 rgba(75, 180, 187, 0.45); } 70%, 100% { box-shadow: 0 0 0 18px rgba(75, 180, 187, 0); } }
@media (max-width: 980px) { .lp { grid-template-columns: 1fr; } .lp-search, .lp-ai, .lp-page { grid-column: 1; grid-row: auto; } }
@media (max-width: 600px) { .lp-body { grid-template-columns: 1fr; } .lp-map { min-height: 170px; } }

/* ---- GEO : les trois clés et une réponse d'assistant ---- */
.geo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 52px; }
.geo-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.geo-keys li { position: relative; padding: 20px 22px 20px 76px; border-radius: 18px; background: rgba(249, 242, 231, 0.07); border: 1px solid rgba(249, 242, 231, 0.18); }
.geo-n { position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--mk-blue); color: var(--mk-ink); display: flex; align-items: center; justify-content: center; font: 800 1rem var(--mk-font-t); }
.mk .geo-keys h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.mk .geo-keys p { margin-top: 6px; font-size: 0.95rem; line-height: 1.55; }
.geo-keys .geo-src span { background: rgba(249, 242, 231, 0.12); border: 1px solid rgba(249, 242, 231, 0.24); }
.geo-chat { padding: 24px; border-radius: 24px; background: var(--mk-white); color: var(--mk-ink); box-shadow: var(--mk-shadow-lg); }
.geo-ais { display: flex; gap: 8px; }
.geo-ais img { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 6px 16px -10px rgba(61, 92, 96, 0.6); }
.mk .mk-band .geo-chat p { color: var(--mk-ink); }
.geo-q { margin: 16px 0 0 auto; max-width: 88%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--mk-blue); font-weight: 700; line-height: 1.5; }
.geo-a { margin-top: 12px; max-width: 94%; padding: 14px 16px; border-radius: 18px 18px 18px 4px; background: var(--mk-blue-wash-2); border: 1px solid rgba(75, 180, 187, 0.24); }
.geo-a p { font-size: 0.95rem; line-height: 1.6; }
.mk .mk-band .geo-chat .geo-note { margin-top: 12px; font-size: 0.78rem; font-style: italic; font-weight: 700; }
.lv-js .geo-chat.reveal .geo-q, .lv-js .geo-chat.reveal .geo-a { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.6s var(--mk-ease); }
.lv-js .geo-chat.reveal.is-visible .geo-q { opacity: 1; transform: none; transition-delay: 0.4s; }
.lv-js .geo-chat.reveal.is-visible .geo-a { opacity: 1; transform: none; transition-delay: 1.2s; }
@media (max-width: 980px) { .geo { grid-template-columns: 1fr; } }

/* ---- Articles : scènes du parcours, création à la demande ---- */
.ar2-src { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ar2-src span { padding: 7px 13px; border-radius: var(--mk-pill); background: var(--mk-blue-wash-2); border: 1px solid rgba(75, 180, 187, 0.24); font-size: 0.82rem; font-weight: 800; }
.ar2-topics { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ar2-topics li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--mk-line); }
.ar2-topics b { flex: 1; font-size: 0.88rem; line-height: 1.35; }
.ar2-topics span { min-width: 42px; padding: 4px 8px; border-radius: 10px; background: var(--mk-taupe-wash); text-align: center; font: 800 0.9rem var(--mk-font-t); }
.ar2-topics li.is-top { border-color: var(--mk-blue); background: var(--mk-blue-wash-2); }
.ar2-topics li.is-top span { background: var(--mk-blue); }
.ar2-count { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; }
.ar2-count b { font: 800 2.4rem/1 var(--mk-font-t); letter-spacing: -0.03em; }
.ar2-count span { font-weight: 800; }
.ar2-toc { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; counter-reset: toc; }
.ar2-toc li { counter-increment: toc; display: flex; gap: 10px; font-size: 0.86rem; font-weight: 700; }
.ar2-toc li::before { content: counter(toc); width: 22px; height: 22px; border-radius: 6px; background: var(--mk-blue-wash); display: inline-flex; align-items: center; justify-content: center; flex: none; font: 800 0.72rem var(--mk-font-t); }
.ar2-checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ar2-checks li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--mk-blue-wash-2); font-size: 0.88rem; font-weight: 700; }
.ar2-checks i { width: 22px; height: 22px; border-radius: 50%; background: var(--mk-blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ar2-checks i svg { width: 12px; height: 12px; }
.ar2-page { padding: 0; overflow: hidden; }
.ar2-banner { height: 120px; display: flex; align-items: flex-end; padding: 12px 18px; background: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1.4px) 0 0 / 14px 14px, linear-gradient(135deg, var(--mk-ink), rgba(75, 180, 187, 0.85)); }
.ar2-banner span { padding: 4px 10px; border-radius: var(--mk-pill); background: var(--mk-white); font-size: 0.72rem; font-weight: 800; }
.ar2-title { padding: 16px 18px 0; font: 700 1.08rem/1.35 var(--mk-font-t); }
.ar2-sum { margin: 12px 18px 0; padding: 12px 14px; border-radius: 12px; border-left: 3px solid var(--mk-blue); background: var(--mk-blue-wash-2); font-size: 0.84rem; line-height: 1.5; }
.ar2-sum b { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ar2-page .ui-btns { padding: 0 18px 18px; }
.ar2-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ar2-list li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--mk-line); }
.ar2-list b { flex: 1; font-size: 0.86rem; line-height: 1.35; }
.ar2-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 72px; align-items: stretch; }
.ar2-more .ui-card { max-width: none; }
.ar2-facts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ar2-facts li { padding: 14px; border-radius: 14px; background: var(--mk-blue-wash-2); }
.ar2-facts b { display: block; font: 800 1.5rem/1.1 var(--mk-font-t); }
.ar2-facts span { display: block; margin-top: 6px; font-size: 0.8rem; font-weight: 700; line-height: 1.4; }
.ar2-inside { padding: 24px 26px; border-radius: 20px; background: var(--mk-blue-wash-2); border: 1px solid rgba(75, 180, 187, 0.22); }
@media (max-width: 860px) { .ar2-more { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ar2-facts { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .mk-dirs.is-visible .dr-send::after, .lp-pin--me, .lv-js .rv-msg::after, .gb-done { animation: none !important; }
  .lv-js .mk-dirs .dr-st, .gb { transition: none; }
  .lv-js .geo-chat.reveal .geo-q, .lv-js .geo-chat.reveal .geo-a { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   12. Page Chatbot Copilot
   ========================================================================== */
.lv-float .ic--img { background: var(--mk-white); border: 1px solid var(--mk-line); }
.lv-float .ic--img img { width: 24px; height: auto; }

/* ---- Bulles de conversation : question, réponse, sources ---- */
.cq-q { width: fit-content; max-width: 88%; margin: 0 0 0 auto; padding: 11px 16px; border-radius: 18px 18px 4px 18px; background: var(--mk-blue); font-weight: 700; line-height: 1.45; }
.cq-a { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; }
.cq-av { width: 34px; height: 34px; border-radius: 50%; background: var(--mk-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.cq-av svg { width: 17px; height: 17px; }
.cq-a > div { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--mk-white); border: 1px solid rgba(174, 162, 144, 0.3); box-shadow: 0 10px 26px -18px rgba(61, 92, 96, 0.5); font-size: 0.95rem; line-height: 1.55; }
.cq-srcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cq-srcs span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--mk-pill); background: var(--mk-blue-wash); font-size: 0.72rem; font-weight: 800; }
.cq-srcs img { width: 14px; height: auto; }
.cq-msg { min-height: 3.1em; }
.lv-js .cq-msg::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.18em; background: var(--mk-blue); animation: sp-caret 1s steps(1) infinite; }

/* ---- Vos outils Google : orbite et onglets ---- */
.cq-tools { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; margin-top: 52px; }
.cq-orb { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; }
.cq-ring { position: absolute; inset: 9%; border-radius: 50%; border: 2px dashed rgba(75, 180, 187, 0.45); animation: cq-spin 50s linear infinite; }
.cq-ring--2 { inset: 24%; border: 1px solid rgba(174, 162, 144, 0.35); animation: none; }
@keyframes cq-spin { to { transform: rotate(360deg); } }
.cq-beam { position: absolute; left: 50%; top: 50%; z-index: 1; width: 41%; height: 3px; margin-top: -1.5px; border-radius: 2px; transform-origin: 0 50%; transform: rotate(-90deg); background: linear-gradient(90deg, rgba(75, 180, 187, 0), var(--mk-blue)); transition: transform 0.8s var(--mk-ease); }
.cq-core { position: absolute; left: 50%; top: 50%; z-index: 2; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--mk-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; box-shadow: 0 0 0 10px rgba(75, 180, 187, 0.14), var(--mk-shadow-lg); }
.cq-core span { width: 46px; height: 46px; border-radius: 14px; background: var(--mk-blue); display: flex; align-items: center; justify-content: center; }
.cq-core span svg { width: 24px; height: 24px; }
.cq-core b { font: 700 0.86rem/1.2 var(--mk-font-t); color: var(--mk-cream); }
.cq-t { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -32px); }
.cq-ti { width: 64px; height: 64px; border-radius: 20px; background: var(--mk-white); border: 1px solid rgba(174, 162, 144, 0.3); box-shadow: var(--mk-shadow); display: flex; align-items: center; justify-content: center; transition: transform 0.5s var(--mk-ease), box-shadow 0.5s, border-color 0.5s; }
.cq-ti img { width: 34px; height: auto; }
.cq-t b { padding: 2px 9px; border-radius: var(--mk-pill); background: var(--mk-white); font-size: 0.76rem; font-weight: 800; box-shadow: 0 6px 14px -10px rgba(61, 92, 96, 0.5); }
.cq-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.cq-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 30px; border: 1px solid var(--mk-line); background: var(--mk-white); color: var(--mk-ink); font: 800 0.9rem var(--mk-font-b); cursor: pointer; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; }
.cq-tab img { width: 20px; height: auto; }
.cq-tab:hover { border-color: var(--mk-blue); }
.cq-tab[aria-selected="true"] { background: var(--mk-blue-wash-2); border-color: var(--mk-blue); box-shadow: var(--mk-shadow); }
.cq-side .lv-tabpanels { margin-top: 18px; }
.cq-side .lv-note { margin-top: 12px; }
.cq-panel { padding: 24px; border-radius: 22px; background: var(--mk-blue-wash-2); border: 1px solid rgba(75, 180, 187, 0.22); }
.cq-does { font: 700 1.12rem/1.45 var(--mk-font-t); }
.cq-chat { margin-top: 16px; }
/* L'outil choisi s'allume, le faisceau du Copilot pivote vers lui */
.cq-tools:has(#outil-gmail-t[aria-selected="true"]) .t-gmail .cq-ti { transform: scale(1.14); border-color: var(--mk-blue); box-shadow: 0 0 0 6px rgba(75, 180, 187, 0.22), var(--mk-shadow-lg); }
.cq-tools:has(#outil-gmail-t[aria-selected="true"]) .cq-beam { transform: rotate(-90deg); }
.cq-tools:has(#outil-agenda-t[aria-selected="true"]) .t-agenda .cq-ti { transform: scale(1.14); border-color: var(--mk-blue); box-shadow: 0 0 0 6px rgba(75, 180, 187, 0.22), var(--mk-shadow-lg); }
.cq-tools:has(#outil-agenda-t[aria-selected="true"]) .cq-beam { transform: rotate(-18deg); }
.cq-tools:has(#outil-drive-t[aria-selected="true"]) .t-drive .cq-ti { transform: scale(1.14); border-color: var(--mk-blue); box-shadow: 0 0 0 6px rgba(75, 180, 187, 0.22), var(--mk-shadow-lg); }
.cq-tools:has(#outil-drive-t[aria-selected="true"]) .cq-beam { transform: rotate(54deg); }
.cq-tools:has(#outil-docs-t[aria-selected="true"]) .t-docs .cq-ti { transform: scale(1.14); border-color: var(--mk-blue); box-shadow: 0 0 0 6px rgba(75, 180, 187, 0.22), var(--mk-shadow-lg); }
.cq-tools:has(#outil-docs-t[aria-selected="true"]) .cq-beam { transform: rotate(126deg); }
.cq-tools:has(#outil-sheets-t[aria-selected="true"]) .t-sheets .cq-ti { transform: scale(1.14); border-color: var(--mk-blue); box-shadow: 0 0 0 6px rgba(75, 180, 187, 0.22), var(--mk-shadow-lg); }
.cq-tools:has(#outil-sheets-t[aria-selected="true"]) .cq-beam { transform: rotate(198deg); }
@media (max-width: 980px) { .cq-tools { grid-template-columns: minmax(0, 1fr); gap: 40px; } .cq-orb { width: min(100%, 380px); } }
@media (max-width: 480px) {
  .cq-ti { width: 50px; height: 50px; border-radius: 16px; }
  .cq-ti img { width: 26px; }
  .cq-t { transform: translate(-50%, -25px); }
  .cq-t b { font-size: 0.7rem; }
  .cq-core span { width: 34px; height: 34px; border-radius: 11px; }
  .cq-core span svg { width: 18px; height: 18px; }
  .cq-core b { font-size: 0.7rem; }
  .cq-panel { padding: 18px; }
}

/* ---- Le marché et la réglementation : sources publiques ---- */
.cq-srcgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.cq-src { display: flex; flex-direction: column; padding: 26px; border-radius: 22px; background: var(--mk-white); box-shadow: var(--mk-shadow); border: 1px solid rgba(174, 162, 144, 0.22); }
.cq-src-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--mk-blue); display: flex; align-items: center; justify-content: center; }
.cq-src-ic svg { width: 24px; height: 24px; }
.cq-src-k { margin-top: 18px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.mk .cq-src h3 { margin: 4px 0 0; font-size: 1.5rem; font-weight: 800; }
.cq-src > p:not([class]) { margin-top: 10px; font-size: 0.96rem; line-height: 1.6; }
.cq-src-q { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 18px; font-size: 0.9rem; font-weight: 800; line-height: 1.45; }
.cq-src-q svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--mk-blue); }
.cq-srcgrid + .mk-kpis { margin-top: 28px; }
@media (max-width: 980px) { .cq-srcgrid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }

/* ---- Comment ça marche : trois étapes reliées ---- */
.cq-how { position: relative; list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cq-how::before { content: ""; position: absolute; left: 17%; right: 17%; top: 27px; height: 2px; background: repeating-linear-gradient(90deg, var(--mk-blue) 0 8px, transparent 8px 16px); opacity: 0.75; animation: cq-flow 1.2s linear infinite; }
@keyframes cq-flow { to { background-position: 16px 0; } }
.cq-how li { position: relative; text-align: center; }
.cq-how-n { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--mk-ink); color: var(--mk-cream); font: 800 1.1rem var(--mk-font-t); box-shadow: 0 0 0 8px var(--mk-white), 0 0 0 9px rgba(75, 180, 187, 0.35); }
.mk .cq-how h3 { margin: 18px 0 0; font-size: 1.15rem; font-weight: 700; }
.cq-how li > p { margin-top: 6px; font-size: 0.96rem; line-height: 1.55; }
.cq-how-ui { display: flex; flex-direction: column; justify-content: center; min-height: 108px; margin-top: 18px; padding: 16px; border-radius: 18px; background: var(--mk-blue-wash-2); border: 1px solid rgba(75, 180, 187, 0.2); text-align: left; }
.cq-how-ui .cq-a { margin: 0; }
.cq-look { flex-direction: row; align-items: center; justify-content: center; gap: 10px; }
.cq-look span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--mk-pill); background: var(--mk-white); border: 1px solid var(--mk-line); font-size: 0.86rem; font-weight: 800; animation: cq-look 2.4s ease-in-out infinite; }
.cq-look span:nth-child(2) { animation-delay: 1.2s; }
.cq-look img { width: 18px; height: auto; }
@keyframes cq-look { 0%, 100% { border-color: var(--mk-line); box-shadow: none; } 30%, 50% { border-color: var(--mk-blue); box-shadow: 0 0 0 4px rgba(75, 180, 187, 0.2); } }
@media (max-width: 860px) { .cq-how { grid-template-columns: 1fr; gap: 36px; } .cq-how::before { display: none; } }

/* ---- Exemples de demandes : liste sur fond vert sombre, conversation à droite ---- */
.cx2 { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); margin-top: 48px; border-radius: 32px; overflow: hidden; background: var(--mk-white); border: 1px solid rgba(174, 162, 144, 0.3); box-shadow: var(--mk-shadow-lg); }
.cx2-side { position: relative; overflow: hidden; padding: 32px 28px; background: var(--mk-ink); color: var(--mk-cream); }
.cx2-side::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 18%, rgba(75, 180, 187, 0.25), transparent 58%); pointer-events: none; }
.cx2-k { position: relative; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.cx2-tabs { position: relative; display: grid; gap: 8px; margin-top: 16px; }
.cx2-tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px 11px 11px; border-radius: 16px; border: 1px solid rgba(249, 242, 231, 0.22); background: transparent; color: rgba(249, 242, 231, 0.78); font: 800 0.9rem/1.35 var(--mk-font-b); text-align: left; cursor: pointer; transition: background-color 0.4s, color 0.4s, border-color 0.4s; }
.cx2-tab i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(249, 242, 231, 0.3); display: inline-flex; align-items: center; justify-content: center; flex: none; font: 800 0.76rem var(--mk-font-t); }
.cx2-tab:hover { color: var(--mk-cream); border-color: rgba(249, 242, 231, 0.5); }
.cx2-tab[aria-selected="true"] { background: var(--mk-white); color: var(--mk-ink); border-color: var(--mk-white); }
.cx2-tab[aria-selected="true"] i { background: var(--mk-blue); border-color: var(--mk-blue); }
.cx2-stage { display: flex; align-items: center; padding: 36px 32px; background: var(--mk-blue-wash-2); }
.cx2-stage .lv-tabpanels { width: 100%; margin: 0; }
.cq-chat--big .cq-q { font-size: 1.02rem; }
.cq-body > * + * { margin-top: 10px; }
.cq-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.cq-kpis span { padding: 12px; border-radius: 12px; background: var(--mk-blue-wash-2); font-size: 0.78rem; font-weight: 700; }
.cq-kpis b { display: block; font: 800 1.35rem/1.1 var(--mk-font-t); }
.cq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cq-list li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--mk-line); font-size: 0.88rem; }
.cq-list li b { flex: 1; font-weight: 700; }
.cq-list em { padding: 2px 9px; border-radius: var(--mk-pill); background: var(--mk-blue-wash); font-style: normal; font-size: 0.72rem; font-weight: 800; }
.cq-list--dots li { position: relative; padding: 0 0 0 18px; border: 0; }
.cq-list--dots li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--mk-blue); }
.cq-draft { padding: 12px 14px; border-radius: 12px; border-left: 3px solid var(--mk-blue); background: var(--mk-blue-wash-2); font-style: italic; }
.cq-ok { font-size: 0.82rem; font-weight: 800; }
.lv-js .cx2-panel.is-on .cq-a { animation: ci-fill 0.6s 0.25s var(--mk-ease) both; }
@media (max-width: 980px) {
  .cx2 { grid-template-columns: minmax(0, 1fr); border-radius: 26px; }
  .cx2-side { padding: 22px 0 22px 22px; }
  .cx2-tabs { display: flex; overflow-x: auto; padding-right: 22px; scrollbar-width: none; }
  .cx2-tabs::-webkit-scrollbar { display: none; }
  .cx2-tab { flex: none; width: auto; white-space: nowrap; }
  .cx2-stage { padding: 24px 18px; }
}

/* ---- Dans chaque agent ---- */
.cq-agents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 980px; margin: 48px auto 0; }
.cq-agent { display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: 24px; background: var(--mk-blue-wash-2); border: 1px solid rgba(75, 180, 187, 0.22); text-decoration: none; transition: transform 0.35s var(--mk-ease), box-shadow 0.35s; }
.cq-agent:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow-lg); }
.cq-agent-ui { padding: 20px; border-radius: 18px; background: var(--mk-white); box-shadow: var(--mk-shadow); }
.cq-agent-hi { margin-top: 18px; font: 700 1.2rem var(--mk-font-t); text-align: center; }
.cq-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.cq-quick span { padding: 7px 14px; border-radius: var(--mk-pill); border: 1px solid rgba(75, 180, 187, 0.5); background: var(--mk-blue-wash-2); font-size: 0.82rem; font-weight: 800; }
.cq-agent .go { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(75, 180, 187, 0.7); text-underline-offset: 4px; }
.cq-agent .go svg { width: 16px; height: 16px; transition: transform 0.3s; }
.cq-agent:hover .go svg { transform: translateX(4px); }
@media (max-width: 860px) { .cq-agents { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .cq-ring, .cq-how::before, .cq-look span, .lv-js .cq-msg::after { animation: none !important; }
  .cq-beam, .cq-ti { transition: none; }
  .lv-js .cx2-panel.is-on .cq-a { animation: none; }
}

/* ==========================================================================
   13. Pied des pages leviers : déplacé dans composants.css le 01/11 (aussi utilisé sur l'accueil)
   ========================================================================== */