/* =============================================================
   Gentica — Landing V2 (composition inspirée des standards 2026)
   Identité : blanc pur · indigo #343BED · point-signature bleu→vert
   Typo : Schibsted Grotesk variable (locale) · zéro dépendance
   ============================================================= */

/* ---------- Police ---------- */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("assets/fonts/SchibstedGrotesk-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
:where(h1, h2, h3, h4) { font-weight: 400; }

/* ---------- Tokens ---------- */
:root {
  --blanc: #FFFFFF;
  --souple: #FAFAFC;
  --survol: #F3F3F6;
  --encre: #26262E;
  --encre-forte: #121218;
  --sourdine: #6E6E78;
  --bord: #E6E6EA;
  --bord-fort: #D2D2D9;
  --brand: #343BED;
  --brand-survol: #292FD2;
  --brand-doux: #EEEEFF;
  --indigo-profond: #12103F;
  --vert-point: #2FD4A6;
  --degrade-point: linear-gradient(135deg, #3538E0, #2FD4A6);

  --pastel-rose: #FFDCE8;
  --pastel-lavande: #E8E0FF;
  --pastel-ciel: #DDEBFF;

  --ok: #18794E;
  --attention: #946200;
  --erreur: #C9362B;

  --sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --mono: var(--sans); /* décision produit : pas de mono, la hiérarchie vient de la casse et de l’espacement */

  --maxw: 1220px;
  --gouttiere: 24px;
  --r-panneau: 20px;
  --r-carte: 16px;
  --r-pill: 64px;
  --section-y: clamp(88px, 12vw, 148px);

  --ombre-flottant: 0 12px 32px rgba(18, 16, 63, .08);
  --ombre-fenetre: 0 24px 70px rgba(18, 16, 63, .10);

  --sortie: cubic-bezier(.22, 1, .36, 1);
  --standard: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Base ---------- */
html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: clip; }
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* garde anti-débordement : les pistes de grille ne gonflent jamais */
.agents__grille > *, .socle__grille > *, .preuve__grille > *, .secu__grille > *,
.agents__droite, .fenetre, .scene, .tuile, .carte-secu { min-width: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: var(--section-y); position: relative; }
.section--souple { background: var(--souple); }
.tabulaire { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.br-desk { display: none; }
@media (min-width: 720px) { .br-desk { display: inline; } }

.skip { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.avatar-mini { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: inline-block; vertical-align: -5px; margin-right: 2px; }
.msg__qui--ia, .tour__qui { display: flex; align-items: center; }

/* Méta, horodatages, kickers : mono système */
.msg__qui, .tour__qui, .brief-ligne__k, .agent__meta, .rec__quand, .rec-frise__h,
.tri__k, .vj-jour, .vcf-titre, .appel__groupe, .vi-nuage__etq,
.modeles__legende, .fenetre__titre {
  font-family: var(--mono);
}

/* Point-signature : l'unique accent « actif », toujours le SVG canonique */
.pt-sig {
  display: inline-block; width: 9px; height: 9px;
  background: url("assets/gentica-point.svg") center / contain no-repeat;
  flex: 0 0 auto;
}

/* ---------- Titres ---------- */
.h2 {
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--encre-forte);
  text-wrap: balance;
}
.h2--centre { text-align: center; }
.h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; color: var(--encre-forte); font-weight: 500; text-wrap: balance; }
.lead { font-size: 19px; line-height: 1.55; color: var(--encre); max-width: 62ch; }
.section-tete--centre { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border-radius: var(--r-pill);
  font-size: 15px; font-weight: 500;
  border: 1px solid transparent;
  transition: background-color .16s var(--standard), border-color .16s var(--standard),
              color .16s var(--standard), transform .16s var(--standard);
  white-space: nowrap; cursor: pointer;
}
.btn:active { transform: scale(.97); }
.btn--noir { background: var(--brand); color: #fff; position: relative; overflow: hidden; }
.btn--noir:hover { background: var(--brand-survol); }
.btn--noir::after {
  content: ""; position: absolute; inset: -40% auto -40% -30%; width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-160%) skewX(-24deg);
  animation: none;
  pointer-events: none;
}
.hero__actions .btn--noir::after, .final__actions .btn--noir::after { animation: balayageCta 5.6s ease-in-out infinite; }
.hero__actions .btn--noir::after { animation-delay: 1.2s; }
.final__actions .btn--noir::after { animation-delay: 2.8s; }
.btn--noir:hover::after { animation: balayageCta 1.1s var(--standard) 1; }
@keyframes balayageCta {
  0% { transform: translateX(-160%) skewX(-24deg); opacity: 0; }
  10% { opacity: 1; }
  38% { transform: translateX(560%) skewX(-24deg); opacity: 1; }
  52%, 100% { transform: translateX(560%) skewX(-24deg); opacity: 0; }
}
.btn--blanc { background: #fff; color: var(--encre-forte); border-color: var(--bord); }
.btn--blanc:hover { border-color: var(--bord-fort); background: var(--souple); }
.btn--fantome { background: #fff; color: var(--encre); border-color: var(--bord); height: 36px; padding: 0 14px; font-size: 14px; }
.btn--fantome:hover { border-color: var(--brand); color: var(--brand); }
.btn--lg { height: 54px; padding: 0 30px; font-size: 16px; }
.btn--bloc { width: 100%; }

.lien-fleche { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; color: var(--encre-forte); border-bottom: 1px solid var(--encre-forte); padding-bottom: 2px; transition: color .16s, border-color .16s; }
.lien-fleche:hover { color: var(--brand); border-color: var(--brand); }
.lien-fleche svg { transition: transform .16s var(--sortie); }
.lien-fleche:hover svg { transform: translateX(3px); }

/* =============================================================
   Navigation flottante
   ============================================================= */
.topbar { position: sticky; top: 0; z-index: 100; pointer-events: none; padding-top: 14px; }
.navpill {
  pointer-events: auto;
  max-width: 1080px; margin-inline: auto;
  height: 62px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid rgba(230, 230, 234, .8);
  border-radius: var(--r-pill);
  box-shadow: var(--ombre-flottant);
  display: flex; align-items: center; gap: 18px;
  padding-inline: 22px 10px;
  margin-inline: var(--gouttiere);
  overflow: hidden; isolation: isolate;
}
@media (min-width: 1128px) { .navpill { margin-inline: auto; } }
.navpill__brand img { height: 40px; width: auto; }
.navpill__links { display: none; flex: 1; justify-content: center; gap: 26px; }
@media (min-width: 900px) { .navpill__links { display: flex; } }
.navpill__links a { font-size: 15px; color: var(--encre); padding: 6px 2px; border-radius: 6px; transition: color .15s var(--standard); }
.navpill__links a:hover { color: var(--brand); }
.navpill__cta { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.navpill__login { display: none; align-items: center; min-height: 44px; padding-inline: 6px; font-size: 15px; color: var(--sourdine); transition: color .15s var(--standard); }
.navpill__login:hover { color: var(--encre-forte); }
@media (min-width: 720px) { .navpill__login { display: inline-flex; } }
.navpill__burger { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--encre); }
.navpill__burger:hover { background: var(--survol); }
@media (min-width: 900px) { .navpill__burger { display: none; } }

.annonce { display: flex; justify-content: center; margin-bottom: 38px; }
.annonce__pill {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff; font-size: 13px; font-weight: 400;
  transition: background-color .16s var(--standard);
}
.annonce__pill:hover { background: var(--brand-survol); }
.annonce__pill .pt-sig { width: 15px; height: 15px; border-radius: 50%; background: #fff url("assets/gentica-point.svg") center / 9px 9px no-repeat; }

.menu-panel[hidden] { display: none; }
.menu-panel {
  pointer-events: auto;
  position: absolute; left: var(--gouttiere); right: var(--gouttiere); top: 84px;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-panneau);
  box-shadow: var(--ombre-fenetre);
  padding: 18px; display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .19s var(--sortie), transform .19s var(--sortie);
}
.menu-panel.ouvert { opacity: 1; transform: none; }
.menu-panel a { padding: 12px 14px; border-radius: 10px; font-size: 16px; }
.menu-panel a:hover { background: var(--survol); }
.menu-panel .btn { margin-top: 10px; }

/* =============================================================
   1. HERO — fond imagé + démo chorégraphiée
   ============================================================= */
.hero { position: relative; margin-top: -76px; padding: calc(clamp(64px, 8vw, 104px) + 96px) 0 clamp(64px, 8vw, 112px); overflow: hidden; }
.hero__fond {
  position: absolute; inset: 0;
  background: url("assets/img/fonds/fond-hero.jpg") center / cover no-repeat;
}
.hero__fond::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 34% at 50% 18%,
      rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .84) 58%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg,
      rgba(255, 255, 255, .74) 0%,
      rgba(255, 255, 255, .52) 34%,
      rgba(255, 255, 255, .46) 62%,
      rgba(255, 255, 255, .88) 88%,
      #FFFFFF 100%);
}
@media (max-width: 720px) { .hero__fond { background-image: url("assets/img/fonds/fond-hero-m.jpg"); } }
.hero__inner { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
html.js .annonce, html.js .hero__titre, html.js .hero__sous, html.js .hero__actions, html.js .demo { animation: fondu .6s var(--sortie) both; }
html.js .hero__titre { animation-delay: .08s; }
html.js .hero__sous { animation-delay: .16s; }
html.js .hero__actions { animation-delay: .24s; }
html.js .demo { animation-delay: .34s; }
@keyframes fondu { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hero__titre {
  font-size: clamp(36px, 6.2vw, 82px);
  line-height: 1.03;
  letter-spacing: -0.042em;
  color: var(--encre-forte);
  text-wrap: balance;
}
.hero__sous { margin-top: 26px; font-size: clamp(16.5px, 1.9vw, 20px); line-height: 1.5; color: var(--encre); }
.hero__actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero__micro { margin-top: 18px; font-size: 14px; color: var(--sourdine); }

/* ---------- La démo ---------- */
.demo { margin-top: clamp(36px, 4.6vw, 58px); width: 100%; max-width: 920px; }
.demo__fenetre {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-panneau);
  box-shadow: var(--ombre-fenetre); overflow: hidden; text-align: left;
}
.demo__barre { gap: 14px; }
.demo__favicon { flex: 0 0 auto; }
.demo__timeline { flex: 1; display: flex; gap: 5px; min-width: 0; }
/* UN dégradé bleu vers vert traverse toute la barre, découpé en tranches :
   chaque segment porte exactement sa portion du dégradé global (bornes interpolées
   entre #3538E0 et #2FD4A6 aux cinquièmes). Le voile gris recule à la lecture. */
.tlseg { flex: 1; height: 3px; border-radius: 3px; position: relative; overflow: hidden; }
.tlseg:nth-child(1) { background-image: linear-gradient(90deg, #3538E0, #3457D4); }
.tlseg:nth-child(2) { background-image: linear-gradient(90deg, #3457D4, #3376C9); }
.tlseg:nth-child(3) { background-image: linear-gradient(90deg, #3376C9, #3196BD); }
.tlseg:nth-child(4) { background-image: linear-gradient(90deg, #3196BD, #30B5B2); }
.tlseg:nth-child(5) { background-image: linear-gradient(90deg, #30B5B2, #2FD4A6); }
.tlseg i {
  position: absolute; top: 0; right: 0; bottom: 0; display: block;
  width: calc(100% - var(--p, 0%));
  background: var(--bord);
}
.demo__lecteur { display: flex; gap: 6px; flex: 0 0 auto; }
.lect {
  width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--bord); background: #fff; color: var(--sourdine); cursor: pointer;
  transition: color .15s var(--standard), border-color .15s var(--standard), background-color .15s var(--standard);
}
.lect:hover { color: var(--brand); border-color: var(--brand); }
.lect .lect__lecture { display: none; }
.demo--pause .lect .lect__pause { display: none; }
.demo--pause .lect .lect__lecture { display: block; }
.demo__corps { display: grid; grid-template-columns: 216px 1fr; min-height: 348px; }

.demo__rail { border-right: 1px solid var(--bord); background: var(--souple); padding: 18px 14px; display: flex; flex-direction: column; gap: 2px; }
.etape { position: relative; padding: 9px 10px 9px 28px; border-radius: 10px; opacity: .42; transition: opacity .3s var(--standard), background-color .3s var(--standard); }
.etape::before {
  content: ""; position: absolute; left: 8px; top: 14px; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--bord-fort); background: #fff;
  transition: background-color .3s, border-color .3s, opacity .3s;
}
.etape--active { opacity: 1; background: #fff; }
.etape--active::before { border-color: var(--brand); }
.etape--faite { opacity: .92; }
.etape--faite::before { background: url("assets/gentica-point.svg") center / contain no-repeat; border-color: transparent; }
.etape__nom { display: block; font-size: 14px; font-weight: 500; color: var(--encre-forte); }
.etape__resume { display: block; font-family: var(--mono); font-size: 11px; color: var(--sourdine); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s var(--sortie), opacity .35s, margin .35s; }
.etape--faite .etape__resume { max-height: 34px; opacity: 1; margin-top: 3px; }

.demo__scene { position: relative; padding: 26px 30px; min-width: 0; }
.dscene { display: none; }
.dscene.active { display: block; animation: fondu .45s var(--sortie); }
.dscene__k { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sourdine); margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }

.dobjectif {
  display: flex; align-items: center; min-height: 68px;
  border: 1px solid var(--bord); border-radius: 14px; background: var(--souple);
  padding: 16px 20px;
  font-size: clamp(18px, 2.3vw, 25px); letter-spacing: -0.015em; color: var(--encre-forte);
}
.dobjectif__curseur { width: 2px; height: 1.15em; background: var(--brand); margin-left: 3px; animation: clignote 1.1s steps(2) infinite; }
@keyframes clignote { 50% { opacity: 0; } }

.dagent {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--bord); border-radius: 14px; background: #fff;
  box-shadow: 0 10px 28px rgba(18, 16, 63, .07); padding: 16px 18px;
  opacity: 0; transform: translateY(8px) scale(.985); transition: opacity .22s linear, transform .38s var(--sortie);
}
.dagent.visible { opacity: 1; transform: none; }
.dagent img { border-radius: 50%; object-fit: cover; box-shadow: 0 6px 14px rgba(18, 16, 63, .18); flex: 0 0 auto; }
.dagent__nom { font-size: 17px; font-weight: 500; color: var(--encre-forte); }
.dagent__sous { font-size: 13px; color: var(--encre); margin-top: 3px; }
.dcoche { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--ok); background: #EAF7F0; border-radius: var(--r-pill); padding: 6px 13px; font-size: 13px; flex: 0 0 auto; }

.dchips { display: flex; flex-wrap: wrap; gap: 10px; }
.dchip {
  border: 1px solid var(--bord); background: #fff; border-radius: var(--r-pill);
  padding: 9px 16px; font-size: 14px; color: var(--encre-forte);
  box-shadow: 0 4px 12px rgba(18, 16, 63, .05);
  opacity: 0; transform: translateY(6px) scale(.985); transition: opacity .18s linear, transform .3s var(--sortie);
}
.dchip.visible { opacity: 1; transform: none; }

.dconnecteurs { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.dconn { display: flex; align-items: center; gap: 12px; border: 1px solid var(--bord); border-radius: 12px; background: #fff; padding: 10px 14px; }
.dconn__nom { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: var(--encre-forte); }
.dconn__nom svg { color: var(--brand); }
.dconn__mode { margin-left: auto; font-size: 12px; color: var(--sourdine); }
.dconn__toggle { width: 34px; height: 20px; border-radius: 12px; background: var(--bord); position: relative; transition: background-color .25s var(--standard); flex: 0 0 auto; }
.dconn__toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .22s var(--sortie);
}
.dconn.actif .dconn__toggle { background: var(--brand); }
.dconn.actif .dconn__toggle::after { transform: translateX(14px); }

.dvivant { width: 9px; height: 9px; background: url("assets/gentica-point.svg") center / contain no-repeat; display: inline-block; animation: pulseDoux 2s ease-in-out infinite; }
@keyframes pulseDoux { 50% { opacity: .35; } }
.dfeed { display: flex; flex-direction: column; gap: 10px; max-width: 100%; }
.dligne {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 14px; line-height: 1.5; color: var(--encre);
  opacity: 0; transform: translateY(4px); transition: opacity .18s linear, transform .3s var(--sortie);
}
.dligne.visible { opacity: 1; transform: none; }
.dligne__t { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--sourdine); flex: 0 0 40px; font-variant-numeric: tabular-nums; }
.dbilan {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--bord);
  display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--encre-forte);
  opacity: 0; transition: opacity .5s var(--sortie);
}
.dbilan.visible { opacity: 1; }

/* Sans JS : la démo montre directement son état final */
html:not(.js) .etape { opacity: .92; }
html:not(.js) .etape::before { background: url("assets/gentica-point.svg") center / contain no-repeat; border-color: transparent; }
html:not(.js) .etape__resume { max-height: 34px; opacity: 1; margin-top: 3px; }
html:not(.js) .dscene[data-scene="lancement"] { display: block; }
html:not(.js) .dligne, html:not(.js) .dbilan { opacity: 1; transform: none; }

@media (min-width: 721px) and (max-width: 920px) {
  .demo__scene { min-height: 470px; }
  .demo__corps { grid-template-columns: 190px 1fr; }
}
@media (min-width: 721px) {
  .demo__scene { min-height: 380px; padding: 0; overflow: hidden; }
  .demo .dscene {
    display: block; position: absolute; inset: 26px 30px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(6px);
    transition: opacity .18s linear, transform .28s var(--sortie), visibility 0s linear .28s;
  }
  .demo .dscene.active {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    animation: none;
    transition: opacity .22s linear, transform .34s var(--sortie), visibility 0s;
  }
  html:not(.js) .demo .dscene[data-scene="lancement"] { opacity: 1; visibility: visible; transform: none; }
}

@media (max-width: 720px) {
  .demo__corps { grid-template-columns: 1fr; }
  .demo__rail { flex-direction: row; justify-content: flex-start; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--bord); gap: 6px; padding: 12px 14px; }
  .demo__rail .etape:first-child { margin-left: auto; }
  .demo__rail .etape:last-child { margin-right: auto; }
  .etape { flex: 0 0 auto; padding: 7px 10px 7px 24px; }
  .etape::before { top: 11px; left: 8px; }
  .etape__resume { display: none; }
  .demo__scene { padding: 20px 18px; }
  .dconn__mode { display: none; }
}

/* Trajectoire partagée avec le curseur du plateau */
@keyframes derive3 { 0% { transform: translate(0, 0); } 50% { transform: translate(13px, -18px); } 100% { transform: translate(-18px, 5px); } }

/* =============================================================
   2. AGENTS
   ============================================================= */
.agents__grille { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 980px) { .agents__grille { grid-template-columns: 5fr 7fr; gap: 56px; } }

.agents__liste { margin-top: 40px; display: flex; flex-direction: column; }
.agent {
  position: relative; display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 18px 18px 22px;
  border-top: 1px solid var(--bord);
  transition: background-color .18s var(--standard);
}
.agent:last-of-type { border-bottom: 1px solid var(--bord); }
.agent::before {
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px;
  background: var(--brand);
  transform: scaleY(0); transform-origin: top center;
  transition: transform .3s var(--sortie);
}
.agent:hover { background: var(--souple); }
.agent[aria-selected="true"] { background: var(--souple); }
.agent[aria-selected="true"]::before { transform: scaleY(1); }
.agent__photo {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  filter: grayscale(1); opacity: .72;
  transition: filter .3s var(--standard), opacity .3s var(--standard), box-shadow .3s var(--standard);
}
.agent:hover .agent__photo { opacity: .92; }
.agent[aria-selected="true"] .agent__photo { filter: none; opacity: 1; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand-doux); }
.agent__txt { display: flex; flex-direction: column; min-width: 0; }
.agent__nom { font-size: 17px; font-weight: 500; color: var(--encre-forte); letter-spacing: -0.01em; }
.agent[aria-selected="true"] .agent__nom { color: var(--brand); }
.agent__titre { font-size: 13px; color: var(--sourdine); margin-top: 1px; }
.agent__desc {
  display: block; max-height: 0; opacity: 0; overflow: hidden;
  font-size: 14px; line-height: 1.55; color: var(--sourdine);
  transition: max-height .32s var(--sortie), opacity .22s var(--standard), margin .32s var(--sortie);
}
.agent[aria-selected="true"] .agent__desc { max-height: 110px; opacity: 1; margin-top: 8px; }

/* Progression auto (fine ligne sous l'item actif) */
.agent__progress { position: absolute; left: 20px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; background: var(--bord); overflow: hidden; display: none; }
.agent[aria-selected="true"] .agent__progress { display: block; }
.agent__progress::after { content: ""; position: absolute; inset: 0; background: var(--brand); transform: scaleX(var(--p, 0)); transform-origin: left; }

.agents__droite { position: relative; }

.scene { display: none; }
.scene.active { display: block; }
.scene.active .fenetre__corps > * { opacity: 0; animation: monteeDouce .45s var(--sortie) forwards; }
.scene.active .fenetre__corps > *:nth-child(2) { animation-delay: .1s; }
.scene.active .fenetre__corps > *:nth-child(3) { animation-delay: .2s; }
.scene.active .fenetre__corps > *:nth-child(4) { animation-delay: .3s; }
.scene.active .fenetre__corps > *:nth-child(5) { animation-delay: .4s; }
@keyframes monteeDouce { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes fondu { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Fond pastel derrière la fenêtre */
.agents__droite::before {
  content: ""; position: absolute; inset: 30px -20px auto -20px; height: 420px;
  border-radius: 28px; z-index: -1;
  background:
    radial-gradient(circle at 15% 20%, var(--pastel-rose) 0, transparent 38%),
    radial-gradient(circle at 75% 15%, var(--pastel-lavande) 0, transparent 42%),
    radial-gradient(circle at 65% 85%, var(--pastel-ciel) 0, transparent 40%), #fff;
  opacity: .55;
  filter: blur(42px);
}

.fenetre {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte);
  box-shadow: var(--ombre-fenetre);
  overflow: hidden;
}
.fenetre__barre {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--bord); background: var(--souple);
}
.fenetre__dots { display: inline-flex; gap: 5px; }
.fenetre__dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--bord-fort); }
.fenetre__titre { font-size: 13px; color: var(--sourdine); }
.fenetre__corps { padding: 22px; display: flex; flex-direction: column; gap: 16px; background: linear-gradient(180deg, #fff 0%, var(--souple) 140%); }
.fenetre__corps--cols { flex-direction: row; gap: 14px; flex-wrap: wrap; }

.msg { max-width: 100%; }
.msg--humain { align-self: flex-end; max-width: 78%; background: var(--souple); border: 1px solid var(--bord); border-radius: 14px 14px 4px 14px; padding: 12px 16px; font-size: 14px; color: var(--encre); }
.msg--agent { align-self: flex-start; font-size: 15px; color: var(--encre-forte); display: flex; flex-direction: column; gap: 9px; }
.msg__qui { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sourdine); margin-bottom: 6px; }
.msg__qui--ia { color: var(--brand); display: flex; align-items: center; gap: 6px; }
.tag-ia {
  display: inline-block; font-size: 10.5px; letter-spacing: .1em;
  border: 1px solid currentColor; border-radius: 4px; padding: 1px 5px;
}
.msg__src { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sourdine); background: var(--souple); border: 1px solid var(--bord); border-radius: var(--r-pill); padding: 6px 12px; max-width: max-content; transition: border-color .15s var(--standard), color .15s var(--standard); }
.msg__src:hover { border-color: var(--brand); color: var(--brand); }
.msg__src svg { color: var(--brand); flex: 0 0 auto; }

.carte-brouillon { width: 100%; border: 1px solid var(--bord); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; background: #fff; transition: border-color .15s var(--standard); }
.carte-brouillon:hover { border-color: var(--bord-fort); }
.carte-brouillon { border-left: 2px solid var(--brand); }
.carte-brouillon__tete { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--encre-forte); font-weight: 400; }
.carte-brouillon__tete svg { color: var(--brand); }
.carte-brouillon__objet { font-size: 14px; color: var(--encre); }
.carte-brouillon__etat { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ok); }

.carte-etat { display: flex; align-items: center; gap: 10px; border: 1px solid #DEE0F1; border-radius: 13px; background: linear-gradient(180deg, #fff 0%, #F8F8FF 100%); padding: 11px 12px; transition: border-color .2s var(--standard); }
@media (hover: hover) { .carte-etat:hover { border-color: #C9CCF6; } }
.carte-etat__txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.carte-etat__txt strong { color: var(--encre-forte); font-size: 13px; font-weight: 500; }
.carte-etat__txt small { margin-top: 3px; color: var(--sourdine); font-size: 12px; }
.carte-etat__pill { flex: 0 0 auto; margin-left: auto; padding: 5px 10px; border: 1px solid #D9DBFB; border-radius: var(--r-pill); background: var(--brand-doux); color: var(--brand); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }

.abstention { font-size: 14px; color: var(--encre); background: #FFF7E6; border: 1px solid #F0E1BC; border-radius: 10px; padding: 10px 13px; }
.abstention__k { display: inline-block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--attention); margin-right: 8px; }

.brief-ligne { display: flex; gap: 14px; align-items: baseline; font-size: 15px; }
.brief-ligne__k { flex: 0 0 64px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sourdine); font-variant-numeric: tabular-nums; }
.brief-ligne--voix { align-items: center; color: var(--sourdine); border-top: 1px dashed var(--bord); padding-top: 14px; }
.brief-ligne--voix svg { color: var(--brand); flex: 0 0 auto; }

.tri { position: relative; flex: 1 1 140px; border: 1px solid var(--bord); border-radius: 12px; padding: 13px 14px 14px; background: var(--souple); overflow: hidden; transition: border-color .18s var(--standard), background-color .18s var(--standard); }
.tri::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 2px; border-radius: 0 0 2px 2px; background: var(--brand); opacity: .72; }
.tri__k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); font-weight: 500; margin-bottom: 9px; }
.tri__item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 10px 11px; }
.tri__marque { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 4px; background: url("assets/gentica-point.svg") center / contain no-repeat; }
@media (hover: hover) {
  .tri:hover { border-color: var(--bord-fort); background: #fff; }
}

/* Jalons de mise en service */
.travail {
  margin-top: 30px; background: #fff; border: 1px solid var(--bord);
  border-radius: var(--r-carte); padding: 22px 24px 20px;
  transition: border-color .18s var(--standard);
}
.travail:hover { border-color: var(--bord-fort); }
.travail__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.travail__titre { font-size: 15px; color: var(--encre-forte); font-weight: 500; }
.travail__agent { color: var(--brand); }
.travail__note { font-size: 12px; color: var(--sourdine); }

.travail__corps { display: grid; grid-template-columns: 1fr 210px; gap: 26px; align-items: stretch; }
.travail__graphe { position: relative; }
.tgrille { position: absolute; inset: 0 0 42px 0; display: flex; flex-direction: column; justify-content: space-between; }
.tgrille span { height: 1px; background: var(--bord); opacity: .8; }
.tbarres { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 3vw, 28px); align-items: end; height: 168px; padding: 0 4px; }
.tjour { display: flex; flex-direction: column; align-items: center; gap: 9px; height: 100%; justify-content: flex-end; }
.tbar {
  width: 100%; max-width: 46px; display: flex; flex-direction: column; justify-content: flex-end;
  height: var(--h, 60%); border-radius: 7px; overflow: hidden;
  transition: height .7s var(--sortie), filter .18s var(--standard);
}
.tjour:hover .tbar { filter: saturate(1.15); }
.tpart { display: block; width: 100%; }
.tpart--decider { height: var(--d, 34%); background: linear-gradient(180deg, #3538E0, #4A4FF0); }
.tpart--faire { height: var(--f, 44%); background: linear-gradient(180deg, #6B71F6, #8E93F9); }
.tpart--verifier { height: var(--v, 22%); background: linear-gradient(180deg, #2FD4A6, #5FE0BC); }
.tjour__l { font-size: 11.5px; color: var(--sourdine); }
.tlegende { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.tleg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--sourdine); }
.tpuce { width: 9px; height: 9px; border-radius: 3px; }
.tpuce--decider { background: #3538E0; }
.tpuce--faire { background: #6B71F6; }
.tpuce--verifier { background: #2FD4A6; }

.travail__cote { display: flex; flex-direction: column; gap: 14px; border-left: 1px solid var(--bord); padding-left: 24px; }
.tstat { display: flex; flex-direction: column; }
.tstat__v { font-size: 25px; line-height: 1.1; letter-spacing: -0.02em; color: var(--encre-forte); font-variant-numeric: tabular-nums; font-weight: 500; }
.tstat__l { font-size: 12px; line-height: 1.35; color: var(--sourdine); margin-top: 2px; text-wrap: pretty; }
.tstat__envoi { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ok); }

.travail__outils { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bord); }
.travail__k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sourdine); margin-bottom: 12px; }
.outils { display: flex; flex-wrap: wrap; gap: 10px; }
.outil {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--bord);
  box-shadow: 0 3px 10px rgba(18, 16, 63, .05);
  transition: border-color .18s var(--standard), transform .25s var(--sortie), opacity .3s var(--standard);
}
.outil img { width: var(--lw, 27px); height: var(--lh, 27px); object-fit: contain; }
html.js .travail:not(.travail--vu) .outil { opacity: 0; transform: scale(.96); }
.travail--vu .outil { animation: entreeOutil .32s var(--sortie) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes entreeOutil { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.travail--vu .outil--eteint { animation: none; }
.outil:hover { border-color: var(--bord-fort); transform: translateY(-2px); }
.outil--plus { font-size: 12.5px; color: var(--sourdine); background: var(--souple); box-shadow: none; }
.outil--eteint { opacity: .32; filter: grayscale(1); }

/* entrée : les barres poussent quand le bloc devient visible */
html.js .travail:not(.travail--vu) .tbar { height: 0; }

@media (max-width: 720px) {
  .travail__corps { grid-template-columns: 1fr; gap: 20px; }
  .travail__cote { flex-direction: row; flex-wrap: wrap; gap: 20px; border-left: 0; border-top: 1px solid var(--bord); padding-left: 0; padding-top: 16px; }
  .tstat__envoi { margin-top: 0; width: 100%; }
}

/* =============================================================
   3. SOCLE — grille 2×2
   ============================================================= */
.socle__grille { margin-top: 56px; display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 880px) { .socle__grille { grid-template-columns: 1fr 1fr; } }

.tuile {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-panneau);
  padding: 26px;
  transition: border-color .12s var(--standard);
}
.tuile { transition: border-color .15s var(--standard), transform .3s var(--sortie), box-shadow .3s var(--sortie); }
.tuile:hover { border-color: var(--bord-fort); transform: translateY(-2px); box-shadow: var(--ombre-flottant); }
.tuile__visuel {
  position: relative; border-radius: 14px; min-height: 230px;
  border: 1px solid var(--bord);
  background-color: var(--souple);
  background-image: radial-gradient(rgba(18, 16, 63, .05) 1px, transparent 1px);
  background-size: 16px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  overflow: hidden; margin-bottom: 22px; padding: 24px;
}
.tuile__visuel--pastel {
  background-image:
    radial-gradient(circle at 20% 25%, var(--pastel-ciel) 0, transparent 45%),
    radial-gradient(circle at 80% 75%, var(--pastel-lavande) 0, transparent 45%),
    radial-gradient(rgba(18, 16, 63, .04) 1px, transparent 1px);
  background-size: auto, auto, 16px 16px;
}
.tuile__visuel--pastel2 {
  background-image:
    radial-gradient(circle at 78% 20%, var(--pastel-rose) 0, transparent 42%),
    radial-gradient(circle at 15% 80%, var(--pastel-ciel) 0, transparent 45%),
    radial-gradient(rgba(18, 16, 63, .04) 1px, transparent 1px);
  background-size: auto, auto, 16px 16px;
}
.tuile .h3 { margin-bottom: 10px; }
.tuile__p { font-size: 15px; line-height: 1.55; color: var(--sourdine); }

/* a. Modèles : six sphères uniformes, aucune superposition */
.modeles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.6vw, 26px) clamp(10px, 2.4vw, 22px);
  width: 100%; max-width: 330px;
}
.mod { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.mod img {
  width: 52px; height: 52px; border-radius: 50%;
  box-shadow: 0 6px 16px rgba(18, 16, 63, .12);
  transition: transform .28s var(--sortie), box-shadow .28s var(--sortie);
}
.mod em {
  font-style: normal; font-size: 12px; color: var(--sourdine);
  transition: color .2s var(--standard);
}
@media (hover: hover) {
  .mod:hover img { transform: translateY(-4px) scale(1.06); box-shadow: 0 12px 26px rgba(18, 16, 63, .18); }
  .mod:hover em { color: var(--encre-forte); }
}
html.js .tuile__visuel--pastel:not(.vu) .mod { opacity: 0; transform: scale(.94); }
.tuile__visuel--pastel.vu .mod { animation: entreeMod .34s var(--sortie) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes entreeMod { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* b. Données */
.tuiles-donnees { display: grid; grid-template-columns: repeat(5, minmax(0, 52px)); gap: clamp(7px, 1.4vw, 12px); width: 100%; max-width: 320px; }
.td {
  aspect-ratio: 1; border-radius: 13px;
  background: #fff; border: 1px solid var(--bord);
  display: grid; place-items: center; color: var(--encre);
  box-shadow: 0 4px 12px rgba(18, 16, 63, .05);
}
.td--vide { background: transparent; box-shadow: none; border-style: dashed; opacity: .5; }

/* c. Récurrences */
.recurrences { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.rec {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--bord); border-radius: 12px;
  padding: 11px 15px; font-size: 13px;
  box-shadow: 0 4px 12px rgba(18, 16, 63, .05);
}
.rec__nom { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--encre-forte); }
.rec__nom svg { color: var(--brand); }
.rec__quand { color: var(--sourdine); font-size: 12px; margin-left: auto; }
.rec__etat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sourdine); }
.rec-frise { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 0; }
.rec-frise::before { content: ""; position: absolute; left: 36px; right: 42px; top: calc(50% + 6px); height: 1px; background: var(--bord-fort); }
.rec-frise__h { font-size: 11px; color: var(--sourdine); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.rec-frise__pt { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 1.5px solid var(--bord-fort); box-shadow: 0 0 0 3px var(--souple); }
.rec-frise__pt--actif { width: 15px; height: 15px; border: 0; border-radius: 50%; background: #fff url("assets/gentica-point.svg") center / contain no-repeat; box-shadow: 0 0 0 3px var(--souple); }

/* d. Plateau / canvas */
.canvas { position: relative; width: 100%; max-width: 460px; height: 190px; }
.canvas__liens { position: absolute; inset: 0; width: 100%; height: 100%; }
.lien { fill: none; stroke: var(--bord-fort); stroke-width: 1.6; stroke-dasharray: 5 6; stroke-linecap: round; }
.lien--retour { stroke: var(--brand); opacity: .5; }
.canvas.anime .lien { animation: filer 14s linear infinite; }
@keyframes filer { to { stroke-dashoffset: -220; } }
.noeud {
  position: absolute; display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-pill);
  box-shadow: 0 5px 14px rgba(18, 16, 63, .07);
  font-size: 13px; padding: 8px 13px; white-space: nowrap; color: var(--encre-forte);
}
.noeud svg { color: var(--brand); }
.noeud--cond { border-style: dashed; color: var(--sourdine); font-size: 12px; background: var(--souple); box-shadow: none; }
.canvas__curseur { position: absolute; right: 14px; bottom: 6px; color: var(--brand); display: flex; align-items: flex-start; gap: 2px; }
.canvas.anime .canvas__curseur { animation: derive3 13s ease-in-out infinite alternate; }
.canvas__curseur span { margin-top: 13px; margin-left: -4px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: var(--r-pill); }

/* =============================================================
   4. QUOTIDIEN — mockup d'appel
   ============================================================= */
.modes { margin-top: 40px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.mode {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border-radius: var(--r-pill);
  border: 1px solid var(--bord); background: #fff;
  font-size: 14px; color: var(--sourdine); cursor: pointer;
  transition: color .15s var(--standard), border-color .15s var(--standard), background-color .15s var(--standard);
}
.mode:hover { color: var(--encre-forte); border-color: var(--bord-fort); }
.mode svg { color: var(--brand); }
.mode--actif { border-color: var(--encre-forte); color: var(--encre-forte); font-weight: 500; }

.fmodes { margin-top: 30px; position: relative; }
.fmode { display: none; }
.fmode--actif { display: block; animation: fondu .4s var(--sortie); }
.fmode__note { margin: 18px auto 0; max-width: 62ch; text-align: center; font-size: 13px; color: var(--sourdine); }

/* --- Visio --- */
.visio { max-width: 860px; margin-inline: auto; }
.visio__ecran {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-panneau); overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(83, 88, 240, .25) 0, transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(47, 212, 166, .12) 0, transparent 50%),
    var(--indigo-profond);
  box-shadow: var(--ombre-fenetre);
  display: flex; flex-direction: column;
}
.visio__haut {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 18px; font-size: 12px; color: rgba(255, 255, 255, .85);
}
.pt-sig--sombre { width: 10px; height: 10px; }
.tag-ia--clair { color: rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .5); margin-left: 6px; }
.visio__centre { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: relative; }
.visio__halo {
  position: absolute; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 113, 246, .4) 0, transparent 70%);
  animation: pulseDoux 3.2s ease-in-out infinite;
}
.visio__portrait { position: relative; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .35); }
.visio__nom { margin-top: 12px; color: #fff; font-size: 16px; font-weight: 500; position: relative; }
.visio__role { color: rgba(255, 255, 255, .6); font-size: 12px; position: relative; }
.visio__soustitres {
  margin: 0 auto 12px; max-width: 78%;
  background: rgba(255, 255, 255, .1); border-radius: 10px;
  padding: 8px 14px; font-size: 13px; color: rgba(255, 255, 255, .92); text-align: center;
}
.visio__barre { display: flex; justify-content: center; gap: 12px; padding-bottom: 18px; }
.visio__cmd {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: #fff;
}
.visio__cmd--fin { background: #C9362B; }

/* --- Vocal --- */
.vocal { max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.vocal__scene { position: relative; display: flex; flex-direction: column; align-items: center; padding: 26px 0 8px; }
.vocal__orbe { position: relative; filter: drop-shadow(0 18px 34px rgba(18, 16, 63, .18)); animation: flotterOrbe 7s ease-in-out infinite alternate; }
@keyframes flotterOrbe { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
.vocal__onde {
  position: absolute; top: 26px; width: 150px; height: 150px; border-radius: 50%;
  border: 1px solid rgba(52, 59, 237, .3);
  animation: onde 3.4s var(--standard) infinite;
}
.vocal__onde--2 { animation-delay: 1.7s; }
@keyframes onde { from { transform: scale(1); opacity: .8; } to { transform: scale(1.55); opacity: 0; } }
.vocal__etat { margin-top: 14px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sourdine); }
.vocal__fil { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; width: 100%; }

/* --- Brouillons Gmail --- */
.gm {
  max-width: 860px; margin-inline: auto;
  display: grid; grid-template-columns: 240px 1fr;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-panneau);
  box-shadow: var(--ombre-fenetre); overflow: hidden;
}
.gm__liste { border-right: 1px solid var(--bord); background: var(--souple); padding: 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.gm__k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sourdine); margin-bottom: 6px; }
.gm__item { border: 1px solid transparent; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.gm__item strong { display: block; color: var(--encre-forte); font-weight: 500; }
.gm__item span { display: block; color: var(--sourdine); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm__item--actif { background: #fff; border-color: var(--bord); }
.gm__apercu { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.gm__ligne { display: flex; gap: 12px; font-size: 13px; border-bottom: 1px solid var(--bord); padding-bottom: 8px; }
.gm__ligne span { flex: 0 0 44px; color: var(--sourdine); }
.gm__corps { font-size: 14px; line-height: 1.6; color: var(--encre); padding: 6px 0; }
.gm__actions { display: flex; gap: 10px; margin-top: 4px; pointer-events: none; }
@media (max-width: 720px) {
  .gm { grid-template-columns: 1fr; }
  .gm__liste { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--bord); }
  .gm__k { display: none; }
  .gm__item { flex: 0 0 auto; max-width: 220px; }
}

.appel { position: relative; }
.appel::before {
  content: ""; position: absolute; inset: 40px -30px -20px; z-index: -1; border-radius: 32px;
  background:
    radial-gradient(circle at 12% 15%, var(--pastel-ciel) 0, transparent 40%),
    radial-gradient(circle at 88% 20%, var(--pastel-lavande) 0, transparent 42%),
    radial-gradient(circle at 60% 95%, var(--pastel-rose) 0, transparent 38%), transparent;
  opacity: .5;
  filter: blur(42px);
}
.appel__cadre {
  display: grid; grid-template-columns: 1fr; max-width: 940px; margin-inline: auto;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-panneau);
  box-shadow: var(--ombre-fenetre); overflow: hidden;
}
@media (min-width: 760px) { .appel__cadre { grid-template-columns: 230px 1fr; } }

.appel__cote { border-right: 1px solid var(--bord); background: var(--souple); padding: 20px 18px; display: none; flex-direction: column; gap: 4px; }
@media (min-width: 760px) { .appel__cote { display: flex; } }
.appel__societe { font-size: 13px; font-weight: 400; color: var(--encre-forte); padding-bottom: 12px; border-bottom: 1px solid var(--bord); margin-bottom: 10px; }
.appel__groupe { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sourdine); margin: 10px 0 4px; }
.appel__agent { font-size: 14px; color: var(--encre); padding: 7px 10px; border-radius: 8px; display: flex; align-items: center; gap: 8px; }
.appel__agent--actif { background: #fff; border: 1px solid var(--bord); font-weight: 500; }
.appel__agent--mut { color: var(--sourdine); }

.appel__fil { padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; }
.appel__mention {
  font-size: 12px; color: var(--brand);
  background: var(--brand-doux); border: 1px solid #D9DBFB; border-radius: 9px;
  padding: 8px 13px;
}
.tour { max-width: 88%; opacity: 1; }
html.js .appel.sequence-prete .tour, html.js .appel.sequence-prete .appel__actions { opacity: 0; }
.appel.sequence .tour { opacity: 0; transform: translateY(10px); animation: tourEntre .5s var(--sortie) forwards; }
.appel.sequence .tour:nth-of-type(1) { animation-delay: .15s; }
.appel.sequence .tour:nth-of-type(2) { animation-delay: .75s; }
.appel.sequence .tour:nth-of-type(3) { animation-delay: 1.5s; }
.appel.sequence .tour:nth-of-type(4) { animation-delay: 2.2s; }
.appel.sequence .appel__actions { opacity: 0; animation: tourEntre .5s var(--sortie) 2.9s forwards; }
@keyframes tourEntre { to { opacity: 1; transform: none; } }
.tour--vous { align-self: flex-end; background: var(--souple); border: 1px solid var(--bord); border-radius: 14px 14px 4px 14px; padding: 12px 16px; font-size: 14px; color: var(--encre); }
.tour--ia { align-self: flex-start; font-size: 15px; display: flex; flex-direction: column; gap: 8px; }
.tour__qui { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sourdine); display: flex; align-items: center; gap: 6px; }
.tour--ia .tour__qui { color: var(--brand); }
.tour__src { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sourdine); background: var(--souple); border: 1px solid var(--bord); border-radius: var(--r-pill); padding: 6px 12px; max-width: max-content; transition: border-color .15s var(--standard), color .15s var(--standard); }
.tour__src:hover { border-color: var(--brand); color: var(--brand); }
.tour__src svg { color: var(--brand); }
.tour__abst { background: #FFF7E6; border: 1px solid #F0E1BC; border-radius: 10px; padding: 10px 13px; font-size: 14px; }
.appel__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; pointer-events: none; }
.appel__actions .btn { cursor: default; }

/* =============================================================
   6. SÉCURITÉ — grille 3×3
   ============================================================= */
.secu__grille { margin-top: 56px; display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 680px) { .secu__grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .secu__grille { grid-template-columns: 1fr 1fr 1fr; } }

.carte-secu {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte);
  padding: 18px 18px 22px;
  transition: border-color .12s var(--standard);
}
.carte-secu { transition: border-color .15s var(--standard), transform .3s var(--sortie), box-shadow .3s var(--sortie); }
.carte-secu:hover { border-color: var(--bord-fort); transform: translateY(-2px); box-shadow: var(--ombre-flottant); }
.carte-secu__visuel {
  position: relative; height: auto; min-height: 168px; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--bord);
  background-color: var(--souple);
  background-image: radial-gradient(rgba(18, 16, 63, .05) 1px, transparent 1px);
  background-size: 15px 15px;
  display: grid; place-items: center;
  margin-bottom: 16px; padding: 16px;
}
.carte-secu__visuel--pastel {
  background-image:
    radial-gradient(circle at 25% 20%, var(--pastel-ciel) 0, transparent 48%),
    radial-gradient(circle at 80% 80%, var(--pastel-lavande) 0, transparent 48%),
    radial-gradient(rgba(18, 16, 63, .04) 1px, transparent 1px);
  background-size: auto, auto, 15px 15px;
}
.carte-secu h3 { font-size: 17px; letter-spacing: -0.01em; margin-bottom: 7px; color: var(--encre-forte); font-weight: 500; }
.carte-secu p { font-size: 14px; line-height: 1.55; color: var(--sourdine); }

/* visuels */
.vis-roles { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.vr-pill { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--bord); border-radius: var(--r-pill); font-size: 12px; line-height: 1.35; padding: 6px 12px; color: var(--encre); box-shadow: 0 3px 10px rgba(18,16,63,.05); }
.vr-pill svg { color: var(--brand); }
.vr-pill--refus { color: var(--sourdine); border-style: dashed; box-shadow: none; background: transparent; }

.vis-instance { display: grid; place-items: center; }
.vi-nuage { position: relative; border: 1.5px dashed var(--bord-fort); border-radius: 26px; padding: 26px 34px 20px; background: rgba(255,255,255,.6); }
.vi-nuage__etq { position: absolute; top: -9px; left: 18px; background: var(--souple); padding: 0 8px; font-size: 11px; color: var(--sourdine); }
.vi-boite { display: flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 12px 20px; font-size: 15px; font-weight: 400; color: var(--encre-forte); box-shadow: 0 6px 16px rgba(18,16,63,.08); }

.vis-modeles { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 210px; }
.vm { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--bord); border-radius: var(--r-pill); padding: 8px 14px; font-size: 13px; box-shadow: 0 3px 10px rgba(18,16,63,.05); }
.vm em { font-style: normal; color: var(--encre-forte); }
.vm .ok { color: var(--ok); }
.vm .non { color: var(--erreur); }
.vm:last-child { border-style: dashed; opacity: .75; }
.vm:last-child em { color: var(--sourdine); }

.vis-plafond svg { width: 100%; max-width: 230px; height: auto; }
.vp-limite { stroke: var(--erreur); stroke-width: 1.5; stroke-dasharray: 6 5; }
.vp-etq { font-size: 10px; fill: var(--erreur); font-family: var(--sans); }
.vp-usage { stroke: var(--brand); stroke-width: 2.2; stroke-linecap: round; }
.vis-plafond .vp-usage { stroke-dasharray: none; }

.vis-journal { width: 100%; max-width: 230px; display: flex; flex-direction: column; gap: 7px; }
.vj-jour { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sourdine); margin-top: 3px; }
.vj-l { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--bord); border-radius: 9px; padding: 7px 11px; font-size: 12px; line-height: 1.35; color: var(--encre); }
.vj-pt { width: 8px; height: 8px; background: url("assets/gentica-point.svg") center / contain no-repeat; flex: 0 0 auto; }

.vis-cles { display: flex; flex-direction: column; gap: 8px; }
.vc { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--bord); border-radius: var(--r-pill); padding: 8px 14px; font-size: 13px; color: var(--encre-forte); box-shadow: 0 3px 10px rgba(18,16,63,.05); }
.vc svg { color: var(--brand); }
.vc--note { border: none; box-shadow: none; background: transparent; color: var(--sourdine); font-size: 12px; justify-content: center; }

.vis-portail { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 200px; }
.vpo-champ { background: #fff; border: 1px solid var(--bord); border-radius: 9px; padding: 9px 13px; font-size: 13px; color: var(--sourdine); }
.vpo-btn { background: var(--encre-forte); color: #fff; border-radius: var(--r-pill); padding: 9px 13px; font-size: 13px; text-align: center; font-weight: 400; }

.vis-confirm { background: #fff; border: 1px solid var(--bord); border-radius: 13px; padding: 14px 16px; box-shadow: 0 8px 22px rgba(18,16,63,.08); max-width: 220px; }
.vcf-titre { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--sourdine); margin-bottom: 6px; }
.vcf-txt { font-size: 13px; color: var(--encre-forte); margin-bottom: 10px; }
.vcf-btns { display: flex; gap: 8px; }
.vcf-oui { background: var(--encre-forte); color: #fff; font-size: 12px; border-radius: var(--r-pill); padding: 6px 13px; }
.vcf-non { border: 1px solid var(--bord); color: var(--sourdine); font-size: 12px; border-radius: var(--r-pill); padding: 6px 13px; }

.vis-badges { display: flex; gap: 16px; }
.badge-rond {
  width: 92px; height: 92px; border-radius: 50%;
  border: 1.5px solid var(--bord-fort);
  display: grid; place-items: center; text-align: center;
  font-size: 12px; line-height: 1.25; letter-spacing: .04em; color: var(--sourdine);
  background: #fff; box-shadow: 0 4px 14px rgba(18,16,63,.05);
}

/* =============================================================
   7. MÉMOIRE — isométrie
   ============================================================= */
/* ---------- La trace : suivre une information de la source à la réponse ---------- */
.trace {
  margin: 56px auto 0; max-width: 1040px;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-panneau);
  box-shadow: var(--ombre-fenetre);
  padding: 24px 28px 28px;
}
.trace__tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.trace__titre { font-size: 19px; letter-spacing: -0.015em; color: var(--encre-forte); font-weight: 500; }
.trace__modes { display: flex; gap: 6px; background: var(--souple); border: 1px solid var(--bord); border-radius: var(--r-pill); padding: 4px; }
.tmode {
  border-radius: var(--r-pill); padding: 7px 16px; font-size: 13px; color: var(--sourdine);
  transition: background-color .18s var(--standard), color .18s var(--standard), box-shadow .18s var(--standard);
}
.tmode--actif { background: #fff; color: var(--encre-forte); font-weight: 500; box-shadow: 0 2px 8px rgba(18, 16, 63, .08); }

.trace__scene {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 72px;
  align-items: center; min-height: 320px;
}
.trace__fils { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tfil { fill: none; stroke-linecap: round; }
.tfil--calme { stroke: var(--bord-fort); stroke-width: 1.4; stroke-dasharray: 4 7; }
.tfil--vif { stroke: url(#degrade-trace) var(--brand); stroke-width: 2.4; }
.tfil--mort { stroke: var(--bord-fort); stroke-width: 1.8; stroke-dasharray: 3 8; opacity: 0; }
.tfil--rep, .tfil--mort { transition: opacity .3s var(--standard); }
.trace--bascule .trep:not([hidden]) { animation: fondu .3s var(--sortie); }

/* chorégraphie : les fils vifs se dessinent au reveal et à chaque bascule
   (longueurs mesurées et posées par le JS via stroke-dasharray/offset) */
.trace--joue .tfil--doc { animation: tracerFil .7s var(--sortie) .25s forwards; }
.trace--joue .tfil--rep { animation: tracerFil .55s var(--sortie) .95s forwards; }
@keyframes tracerFil { to { stroke-dashoffset: 0; } }
html:not(.js) .trace__fils { display: none; }

/* mode abstention : le fil de réponse s'éteint, le fil mort apparaît */
.trace--abstention .tfil--rep { opacity: 0; }
.trace--abstention .tfil--mort { opacity: 1; }

.trace__col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.trace__k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sourdine); margin-bottom: 2px; }

.tdoc { background: var(--souple); border: 1px solid var(--bord); border-radius: 12px; padding: 11px 14px; transition: border-color .15s var(--standard); }
.tdoc:hover { border-color: var(--bord-fort); }
.tdoc__nom { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--encre-forte); }
.tdoc__nom svg { color: var(--brand); flex: 0 0 auto; }
.tdoc__extrait { margin-top: 7px; font-size: 13px; line-height: 1.45; color: var(--encre); }
.tdoc__extrait mark { background: var(--brand-doux); color: var(--brand); border-radius: 4px; padding: 1px 4px; }
.tdoc--vif { background: #fff; box-shadow: 0 8px 22px rgba(18, 16, 63, .08); border-color: var(--bord-fort); }
.trace--abstention .tdoc--vif { box-shadow: none; background: var(--souple); border-color: var(--bord); }
.trace--abstention .tdoc__extrait mark { background: transparent; color: var(--encre); padding: 0; }

.tfiche { background: #fff; border: 1px solid var(--bord-fort); border-radius: 14px; padding: 15px 17px; box-shadow: 0 10px 26px rgba(18, 16, 63, .08); }
.tfiche__nom { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--encre-forte); padding-bottom: 10px; border-bottom: 1px solid var(--bord); margin-bottom: 10px; }
.tfiche__champs { display: flex; flex-direction: column; gap: 6px; }
.tfiche__champs div { display: flex; gap: 10px; font-size: 13px; }
.tfiche__champs dt { flex: 0 0 68px; color: var(--sourdine); }
.tfiche__champs dd { margin: 0; color: var(--encre-forte); }
.tfiche__origine { padding-top: 6px; border-top: 1px dashed var(--bord); }
.tfiche__origine dd { color: var(--brand); }
.trace__note { font-size: 12px; line-height: 1.5; color: var(--sourdine); }

.trep { border: 1px solid var(--bord); border-radius: 14px; padding: 15px 17px; background: #fff; box-shadow: 0 8px 22px rgba(18, 16, 63, .07); }
.trep[hidden] { display: none; }
.trep__etat { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 500; margin-bottom: 8px; }
.trep__etat--ok { color: var(--ok); }
.trep__etat--attention { color: var(--attention); }
.trep__q { font-size: 13px; color: var(--sourdine); margin-bottom: 8px; text-wrap: pretty; }
.trep__r { font-size: 15px; line-height: 1.55; color: var(--encre-forte); }
.trep__src { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--sourdine); background: var(--souple); border: 1px solid var(--bord); border-radius: var(--r-pill); padding: 5px 11px; cursor: pointer; transition: border-color .15s var(--standard), color .15s var(--standard); }
.trep__src:hover { border-color: var(--brand); color: var(--brand); }
.trep__src svg { color: var(--brand); }
.trep__ouvrir { margin-top: 10px; cursor: pointer; }
.trep__abst { font-size: 14px; line-height: 1.5; background: #FFF7E6; border: 1px solid #F0E1BC; border-radius: 10px; padding: 10px 13px; }
.trep__note { margin-top: 10px; font-size: 12px; color: var(--sourdine); }

/* apparitions au reveal / à la bascule */
.trace .tdoc, .trace .tfiche, .trace .trep, .trace .trace__note { opacity: 0; transform: translateY(8px); transition: opacity .35s var(--sortie), transform .35s var(--sortie), border-color .15s var(--standard), box-shadow .3s var(--standard), background-color .3s var(--standard); }
.trace--joue .tdoc { opacity: 1; transform: none; }
.trace--joue .tdoc:nth-of-type(2) { transition-delay: .08s; }
.trace--joue .tdoc:nth-of-type(3) { transition-delay: .16s; }
.trace--joue .tfiche { opacity: 1; transform: none; transition-delay: .5s; }
.trace--joue .trace__note { opacity: 1; transform: none; transition-delay: .7s; }
.trace--joue .trep { opacity: 1; transform: none; transition-delay: 1.15s; }
html:not(.js) .trace .tdoc, html:not(.js) .trace .tfiche, html:not(.js) .trace .trep, html:not(.js) .trace .trace__note { opacity: 1; transform: none; }

/* la remontée : de la réponse au passage d'origine */
.tfil--vif, .tfiche, .tdoc--vif .tdoc__extrait mark { transition: stroke-width .25s var(--standard), box-shadow .3s var(--standard), background-color .3s var(--standard); }
.trace--remonte-rep .tfil--rep, .trace--remonte-doc .tfil--doc { stroke-width: 3.6; }
.trace--remonte-fiche .tfiche { box-shadow: 0 0 0 3px var(--brand-doux), 0 10px 26px rgba(18, 16, 63, .12); }
.trace--remonte-source .tdoc--vif { box-shadow: 0 0 0 3px var(--brand-doux), 0 8px 22px rgba(18, 16, 63, .1); }
.trace--remonte-source .tdoc__extrait mark { background: var(--brand); color: #fff; }

@media (max-width: 860px) {
  .trace__scene { grid-template-columns: 1fr; gap: 22px; min-height: 0; }
  .trace__fils { display: none; }
  .trace__col--centre { order: 2; }
}

.memoire__points { margin-top: 64px; display: grid; grid-template-columns: 1fr; gap: 34px 48px; }
@media (min-width: 760px) { .memoire__points { grid-template-columns: 1fr 1fr; } }
.mpoint h3 { font-size: 17px; margin-bottom: 8px; color: var(--encre-forte); font-weight: 500; }
.mpoint p { font-size: 15px; line-height: 1.55; color: var(--sourdine); }

/* =============================================================
   8. ZÉRO — odomètre
   ============================================================= */
.section--zero { overflow: hidden; }
.chiffres__wrap { text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 5vw, 64px); }
.chiffres__titre { color: #fff; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); width: 100%; max-width: 1000px; }
.chiffre {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: clamp(28px, 3vw, 40px) 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .25s var(--standard), border-color .25s var(--standard), transform .3s var(--sortie);
}
@media (hover: hover) {
  .chiffre:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .26); transform: translateY(-3px); }
}
.chiffre__valeur {
  font-size: clamp(46px, 6.6vw, 88px); line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; font-weight: 500; color: #fff;
}
.chiffre__l { font-size: clamp(14px, 1.6vw, 17px); color: rgba(255, 255, 255, .92); font-weight: 500; letter-spacing: -0.01em; }
@media (max-width: 700px) {
  .chiffres { grid-template-columns: 1fr; gap: 14px; }
  .chiffre { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 16px; padding: 22px 24px; text-align: left; }
  .chiffre__valeur { font-size: 42px; flex: 0 0 auto; min-width: 100px; }
}

/* =============================================================
   9. CTA FINAL
   ============================================================= */
.final {
  position: relative; overflow: hidden;
  border: 1px solid var(--bord); border-radius: 24px;
  padding: clamp(48px, 7vw, 96px) 24px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.final__pastel {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, var(--pastel-rose) 0, transparent 38%),
    radial-gradient(circle at 75% 15%, var(--pastel-lavande) 0, transparent 42%),
    radial-gradient(circle at 65% 85%, var(--pastel-ciel) 0, transparent 40%), #fff;
  opacity: .8;
}
.final .h2, .final__actions, .final__micro { position: relative; }
.final__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.final__micro { font-size: 14px; color: var(--sourdine); max-width: 58ch; }
.final__mail { position: relative; font-size: 14px; color: var(--sourdine); }
.final__mail a { color: var(--brand); border-bottom: 1px solid currentColor; }

/* =============================================================
   10. FOOTER
   ============================================================= */
.pied { border-top: 1px solid var(--bord); padding: 64px 0 40px; background: var(--blanc); }
.pied__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; }
@media (min-width: 900px) { .pied__grille { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } }
.pied__marque { grid-column: 1 / -1; max-width: 340px; }
@media (min-width: 900px) { .pied__marque { grid-column: auto; } }
.pied__marque img { height: 52px; width: auto; }
.pied__marque p { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--sourdine); }
.pied__col h3 { font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--encre-forte); margin-bottom: 14px; }
.pied__col ul { display: flex; flex-direction: column; gap: 9px; list-style: none; padding: 0; margin: 0; }
.pied__col a { display: inline-block; padding-block: 4px; font-size: 14px; color: var(--sourdine); transition: color .15s var(--standard); }
.pied__col a:hover { color: var(--encre-forte); }
.pied__bas { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--bord); display: flex; flex-direction: column; gap: 8px; }
.pied__warn { font-size: 13px; color: var(--sourdine); }
.pied__meta { font-size: 13px; color: var(--sourdine); }

/* =============================================================
   Fonds imagés (bulles) — voiles de lisibilité par-dessus
   ============================================================= */
#memoire.section--souple {
  background-color: transparent;
  background-image:
    linear-gradient(180deg, #FAFAFC 0%, rgba(250, 250, 252, .93) 10%, rgba(250, 250, 252, .85) 45%, rgba(250, 250, 252, .93) 90%, #FAFAFC 100%),
    url("assets/img/fonds/fond-memoire.jpg");
  background-size: auto, cover; background-position: center;
}
.section--zero {
  background-color: var(--indigo-profond);
  background-image:
    linear-gradient(180deg, #0B0A2A 0%, rgba(11, 10, 42, .72) 18%, rgba(11, 10, 42, .58) 50%, rgba(11, 10, 42, .78) 84%, #0B0A2A 100%),
    url("assets/img/fonds/fond-chiffres.jpg");
  background-size: auto, cover; background-position: center;
}
.section--zero :focus-visible { outline-color: #fff; }
.final { border: 1px solid var(--bord); }
.final__pastel {
  background:
    radial-gradient(ellipse 58% 70% at 50% 48%,
      rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .78) 48%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .45) 45%, rgba(255, 255, 255, .68)),
    url("assets/img/fonds/fond-final.jpg") center / cover no-repeat;
  opacity: 1;
}
@media (max-width: 720px) {
  #memoire.section--souple { background-image: linear-gradient(180deg, rgba(250,250,252,.95), rgba(250,250,252,.86) 45%, rgba(250,250,252,.95)), url("assets/img/fonds/fond-memoire-m.jpg"); }
  .section--zero { background-image: linear-gradient(180deg, #0B0A2A 0%, rgba(11,10,42,.7) 18%, rgba(11,10,42,.56) 50%, rgba(11,10,42,.76) 84%, #0B0A2A 100%), url("assets/img/fonds/fond-chiffres-m.jpg"); }
  .final__pastel { background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.5) 45%, rgba(255,255,255,.72)), url("assets/img/fonds/fond-final-m.jpg") center / cover no-repeat; }
}

/* Rendu différé sous la ligne de flottaison */
#quotidien, #securite, #memoire, #demonstration, .pied {
  content-visibility: auto; contain-intrinsic-size: 1px 900px;
}


/* =============================================================
   Pages internes : tarifs, démonstration
   ============================================================= */
.hero--interne { padding: clamp(64px, 9vw, 120px) 0 clamp(28px, 4vw, 52px); }
.hero__fond--interne { opacity: .8; }
.hero__titre--interne { font-size: clamp(34px, 5.2vw, 64px); }

/* --- Choix d'effectif --- */
.section--tarifs { padding-top: clamp(24px, 3vw, 44px); }
.tchoix { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 40px; }
.tchoix__q { font-size: 15px; color: var(--encre); }
.tchoix__seg { display: flex; background: var(--souple); border: 1px solid var(--bord); border-radius: var(--r-pill); padding: 4px; gap: 4px; }
.tchoix__seg label {
  padding: 9px 22px; border-radius: var(--r-pill); font-size: 14px; color: var(--sourdine); cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background-color .18s var(--standard), color .18s var(--standard), box-shadow .18s var(--standard);
}
/* Le libellé de l'annuel porte son avantage : une remise qu'il faut deviner en
   changeant d'onglet n'est pas une remise, c'est une surprise. */
.tchoix__seg label { display: inline-flex; align-items: center; gap: 8px; }
.tchoix__eco {
  font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--brand);
  background: rgba(52, 59, 237, .08); border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
#rythme-mois:checked ~ .tchoix label[for="rythme-mois"],
#rythme-an:checked ~ .tchoix label[for="rythme-an"] {
  background: #fff; color: var(--encre-forte); font-weight: 500; box-shadow: 0 2px 8px rgba(18, 16, 63, .08);
}
#rythme-mois:focus-visible ~ .tchoix label[for="rythme-mois"],
#rythme-an:focus-visible ~ .tchoix label[for="rythme-an"] { outline: 3px solid var(--brand); outline-offset: 2px; }

/* --- Cartes forfaits --- */
.tarifs-grille { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
@media (min-width: 900px) { .tarifs-grille { grid-template-columns: 1fr 1fr 1fr; } }
.tcarte {
  position: relative; background: #fff; border: 1px solid var(--bord); border-radius: var(--r-panneau);
  padding: 26px 26px 26px; display: flex; flex-direction: column;
  transition: border-color .2s var(--standard), box-shadow .3s var(--sortie), transform .3s var(--sortie);
}
.tcarte__nom { font-size: 19px; font-weight: 500; color: var(--encre-forte); }
.tcarte__tranche { font-size: 13px; color: var(--sourdine); margin-top: 2px; }
/* ⚠️ LE BADGE « RECOMMANDÉ » A QUITTÉ CETTE PAGE (03/08/2026). Il répondait à un
   effectif que le visiteur déclarait ici ; ce sélecteur est devenu un choix de
   rythme, et recommander sans rien savoir de l'entreprise n'est plus un conseil.
   Il vit désormais à l'étape du forfait, dans le parcours, où l'effectif a été
   déclaré. La règle reste inchangée sur les cartes : Équipe est mise en avant
   par sa bordure, sans affirmation d'adoption que rien ne soutient. */
/* LE PRIX EST LE PRIX — plus de montant barré (arbitrage 02/08) : une remise permanente
   affichée en permanence n'est pas une remise, c'est le prix. */
.tcarte__prix { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; }
.tcarte__montant { font-size: 46px; line-height: 1; letter-spacing: -0.03em; font-weight: 500; color: var(--encre-forte); font-variant-numeric: tabular-nums; }
.tcarte__par { font-size: 14px; color: var(--sourdine); }
.tcarte__sous { font-size: 12.5px; line-height: 1.45; color: var(--sourdine); margin-top: 8px; }

/* L'INSTALLATION EST MISE EN ÉVIDENCE : c'est le montant qui surprend le plus tard
   quand il est relégué en petit. Encadré, chiffre à la même échelle que le reste. */
.tcarte__install {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding: 14px 16px;
  background: var(--souple); border-radius: 12px;
}
.tcarte__install-lib { font-size: 13px; font-weight: 500; color: var(--encre-forte); }
.tcarte__install-lib em { display: block; font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--sourdine); margin-top: 2px; }
.tcarte__install-val { font-size: 20px; font-weight: 500; color: var(--encre-forte); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* LA RÉDUCTION, DISCRÈTE : une ligne et une pastille, pas une bannière. */
.tcarte__promo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--encre); margin-top: 14px; }
/* Pas de chiffres tabulaires ici : c'est une phrase, pas une colonne — la chasse fixe
   écartait la virgule décimale (« 62 , 50 » à l'écran). */
.tcarte__promo strong { font-weight: 500; color: var(--encre-forte); }
.tcarte__tag {
  font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--brand);
  background: rgba(52, 59, 237, .08); border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.tcarte__capacites {
  display: flex; flex-direction: column; gap: 9px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bord);
  margin-bottom: 28px; font-size: 13.5px; line-height: 1.45; color: var(--encre);
}
/* La puce est un point de marque, pas une coche : une coche par ligne ferait
   une colonne de validations là où il s'agit simplement d'un contenu. */
.tcarte__capacites li { position: relative; padding-left: 17px; }
.tcarte__capacites li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 999px; background: var(--brand); opacity: .55;
}

.tcarte__memoire {
  font-size: 13px; color: var(--sourdine);
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bord);
  /* L'AIR AVANT LE BOUTON se pose ICI, sur le dernier bloc de contenu. Il était
     posé en `padding-top` SUR le bouton : comme `.btn--lg` a une hauteur fixe de
     54 px, ce padding ne créait aucune marge — il poussait le libellé vers le bas
     dans un bouton déformé (vu sur la capture du 02/08). Un espacement se règle
     entre les éléments, jamais à l'intérieur d'un contrôle. */
  margin-bottom: 28px;
}
.tcarte__memoire strong { font-weight: 500; color: var(--encre-forte); }
/* `auto` colle le bouton au bas de la carte ; les cartes ayant la même hauteur
   (align-items: stretch), les trois boutons s'alignent. La marge minimale, elle,
   est garantie par le `margin-bottom` ci-dessus, y compris sur une carte courte. */
.tcarte__cta { margin-top: auto; }

/* LA BASCULE MENSUEL / ANNUEL. Les deux montants sont dans la page ; la radio
   décide lequel se voit. `display: none` et non `visibility` : un prix invisible
   mais présent réserverait sa hauteur et décalerait tout le bas de la carte. */
.tcarte__prix--an, .tcarte__sous--an, .tcarte__promo--an { display: none; }
#rythme-an:checked ~ * .tcarte__prix--mois,
#rythme-an:checked ~ * .tcarte__sous--mois,
#rythme-an:checked ~ * .tcarte__promo--mois { display: none; }
#rythme-an:checked ~ * .tcarte__prix--an { display: flex; }
#rythme-an:checked ~ * .tcarte__sous--an,
#rythme-an:checked ~ * .tcarte__promo--an { display: flex; }

/* LE FORFAIT MIS EN AVANT est désormais FIXE : le choix d'effectif ne le pilote
   plus. Équipe, comme dans le parcours d'installation, pour que la page publique
   et le produit ne recommandent pas deux choses différentes.
   ⚠️ « Recommandé » est un conseil de l'éditeur, jamais « le plus choisi » : nous
   n'avons aucun chiffre d'adoption, et un chiffre qu'on ne peut pas produire ne
   doit pas être suggéré. */
.tcarte[data-plan="equipe"] {
  border-color: var(--brand); box-shadow: var(--ombre-fenetre); transform: translateY(-4px);
}
.tcarte[data-plan="equipe"] .tcarte__reco { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .tcarte[data-plan="equipe"] { transform: none; }
}

/* La note de prix : des faits séparés, alignés sur la largeur des cartes. En colonnes
   sur grand écran, empilée au-dessous — jamais un pavé de texte justifié qu'on saute. */
.tnote { display: grid; gap: 8px 28px; margin-top: 26px; padding: 0; list-style: none;
  font-size: 12.5px; line-height: 1.55; color: var(--sourdine); }
.tnote li { position: relative; padding-left: 14px; }
.tnote li::before { content: ""; position: absolute; left: 0; top: .58em; width: 4px; height: 4px;
  border-radius: 50%; background: var(--bord-fort); }
.tnote strong { color: var(--encre-forte); font-weight: 500; }
.tnote a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tnote a:hover { color: var(--encre-forte); }
@media (min-width: 760px) { .tnote { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .tnote { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- À prévoir en plus --- */
.tbudget { margin-top: 28px; background: #fff; border: 1px solid var(--bord); border-radius: var(--r-panneau); padding: clamp(24px, 3vw, 36px); }
.tbudget__intro { margin-top: 8px; font-size: 14.5px; color: var(--sourdine); }
.tbudget__lignes { margin-top: 18px; display: flex; flex-direction: column; }
.tbudget__ligne { display: grid; grid-template-columns: 1fr; gap: 4px 24px; padding: 13px 0; border-top: 1px solid var(--bord); font-size: 14px; }
@media (min-width: 720px) { .tbudget__ligne { grid-template-columns: 220px 1fr; } }
.tbudget__ligne strong { font-weight: 500; color: var(--encre-forte); }
.tbudget__ligne span { color: var(--sourdine); line-height: 1.55; }
.tbudget__formule { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--encre-forte); }


/* --- Ce qui est inclus (commun aux trois forfaits) --- */
.tinclus { margin-top: 28px; background: #fff; border: 1px solid var(--bord); border-radius: var(--r-panneau); padding: clamp(24px, 3vw, 36px); }
.tinclus__intro { margin-top: 8px; font-size: 14.5px; color: var(--sourdine); }
.tinclus__liste { margin-top: 20px; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .tinclus__liste { grid-template-columns: 1fr 1fr; gap: 18px 32px; } }
.tinclus__liste li { display: flex; gap: 11px; font-size: 13.5px; line-height: 1.5; color: var(--sourdine); }
.tinclus__liste svg { flex: 0 0 auto; color: var(--brand); margin-top: 2px; }
.tinclus__liste strong { display: block; font-weight: 500; color: var(--encre-forte); margin-bottom: 2px; }

/* --- Estimation chiffrée (10 000 documents) --- */
.testim { margin-top: 22px; border: 1px solid var(--bord); border-radius: 14px; padding: 20px 22px; }
.testim__titre { font-size: 14.5px; font-weight: 500; color: var(--encre-forte); }
.testim__lignes { margin-top: 6px; }
.testim__l { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid var(--bord); }
.testim__l:first-child { border-top: 0; }
.testim__lib { font-size: 13.5px; color: var(--sourdine); line-height: 1.45; }
.testim__val { font-size: 16px; font-weight: 500; color: var(--encre-forte); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.testim__val em { display: block; font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--sourdine); margin-top: 1px; }
.testim__note { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--sourdine); }
.testim__note strong { font-weight: 500; color: var(--encre); }

/* La section Tarifs respirait mal en bas : la note touchait le bord (capture du 02/08). */
#tarifs.section { padding-bottom: clamp(56px, 7vw, 96px); }

/* --- FAQ --- */
.faq { max-width: 860px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte);
  transition: border-color .2s var(--standard);
}
.faq details:hover { border-color: var(--bord-fort); }
.faq details[open] { border-color: var(--bord-fort); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 500; color: var(--encre-forte);
}
.faq summary::-webkit-details-marker { display: none; }
.faq__plus { flex: 0 0 auto; color: var(--sourdine); transition: transform .25s var(--sortie); }
.faq details[open] .faq__plus { transform: rotate(45deg); color: var(--brand); }
.faq__r { padding: 0 22px 20px; font-size: 14.5px; line-height: 1.65; color: var(--sourdine); max-width: 74ch; }

/* --- Démonstration --- */
.section--demo-form { padding-top: clamp(24px, 3vw, 44px); }
.demform__wrap { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 960px) { .demform__wrap { grid-template-columns: 7fr 5fr; } }
.demform { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-panneau); padding: clamp(24px, 3vw, 36px); }
.demform__grille { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .demform__grille { grid-template-columns: 1fr 1fr; } }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-size: 13.5px; font-weight: 500; color: var(--encre-forte); }
.champ__req { color: var(--brand); }
.champ input, .champ select, .champ textarea {
  border: 1px solid var(--bord); border-radius: 11px; padding: 12px 14px;
  font-size: 15px; background: var(--souple); color: var(--encre);
  transition: border-color .15s var(--standard), background-color .15s var(--standard);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--brand); background: #fff; }
.champ textarea { resize: vertical; min-height: 88px; }
.champ__err { display: none; font-size: 12.5px; color: var(--erreur); }
.champ.invalid input, .champ.invalid select { border-color: var(--erreur); }
.champ.invalid .champ__err { display: block; }
.champ__aide { font-size: 12.5px; color: var(--sourdine); }
.demform__hp { position: absolute; left: -9999px; top: -9999px; }
.demform__pied { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; margin-top: 6px; min-width: 0; }
.demform .btn { white-space: normal; text-align: center; height: auto; min-height: 54px; padding-block: 12px; }
.demform__grille > .champ { min-width: 0; }
.demform__statut { font-size: 14px; min-height: 20px; }
.demform__statut.ok { color: var(--ok); }
.demform__statut.err { color: var(--erreur); }
.demform__statut a { color: var(--brand); border-bottom: 1px solid currentColor; }
.demform__notice { font-size: 12.5px; color: var(--sourdine); }
.demform__notice a { color: var(--brand); border-bottom: 1px solid currentColor; }

.demtest { background: var(--souple); border: 1px solid var(--bord); border-radius: var(--r-panneau); padding: clamp(24px, 3vw, 32px); }
.demtest__intro { margin-top: 8px; font-size: 14px; color: var(--sourdine); }
.demtest__liste { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; counter-reset: test; }
.demtest__liste li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--encre); }
.demtest__liste .pt-sig { margin-top: 5px; }
.demtest__concl { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bord); font-size: 13.5px; color: var(--encre-forte); font-weight: 500; }
.demtest__mail { margin-top: 14px; font-size: 13.5px; color: var(--sourdine); }
.demtest__mail a { color: var(--brand); border-bottom: 1px solid currentColor; }

/* =============================================================
   Reveals au scroll (état masqué UNIQUEMENT quand le JS est là)
   ============================================================= */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--sortie), transform .55s var(--sortie); transition-delay: var(--rd, 0ms); }
html.js .reveal.visible { opacity: 1; transform: none; }


/* =============================================================
   Mouvement réduit — tout est posé, rien ne bouge
   ============================================================= */

/* =============================================================
   Navbar en taille réduite : logo en grand, pas de bouton
   ============================================================= */
@media (max-width: 760px) {
  .navpill__cta .btn { display: none; }
  .navpill { height: 64px; padding-inline: 18px 12px; }
  .navpill__brand img { height: 46px; }
  .hero { margin-top: -78px; }
  .hero--interne { padding-top: 128px; }
}
@media (max-width: 560px) {
  .navpill { margin-inline: 12px; }
  .fenetre__corps { padding: 16px; }
  .appel__fil { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .etapes-service__prog { transform: scaleX(1); }
  .es__pt { filter: none; }
}

/* =============================================================
   Impression
   ============================================================= */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .topbar, .curseur, .flot, .orbe { display: none !important; }
  .section--zero { background: #fff !important; }
  .zero__sur, .zero__phrase { color: #000 !important; }
}