@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
src:url(/assets/fonts/inter-latin-opsz.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Bleu de la marque : relevé dans le CSS de production de Sortlist le 8 octobre 2026
     (bouton #305EF3, survol #2649DE, pastilles #DEEAFD, filets #C4DAFC). Une seule teinte d'accent. */
  :root {
    --blue-100: #EDF3FE;
    --blue-200: #DEEAFD;      /* fond des pastilles */
    --blue-300: #C4DAFC;      /* filets bleus */
    --blue-400: #9BC4FE;
    --blue-500: #477FFC;      /* grands titres, illustrations : blanc dessus = 3,7:1, réservé au texte de 24 px et plus */
    --blue-600: #305EF3;      /* boutons, points, anneaux */
    --blue-700: #2649DE;      /* survol, liens et petit texte */
    --bg: #F3F4F6;            /* fond de page : gris clair neutre */
    --band: #E6E8EC;          /* bandeau gris un peu plus foncé, en alternance avec le fond */
    --foot: #DCDFE4;          /* footer */
    --ink: #0E1424;
    --text: #384155;
    --muted: #596378;
    --line: #D8DCE2;          /* filets et bordures des cartes (aucune ombre portée sous les cartes) */
    --dot: #AEB6C6;
    --accent: #305EF3;        /* bleu de la marque : lentille, points, anneaux, indicateurs */
    --accent-btn: #305EF3;    /* boutons pleins : blanc dessus = 5,2:1 */
    --accent-strong: #2649DE; /* survol des boutons pleins */
    --accent-text: #2649DE;   /* bleu lisible en petit texte : 6,8:1 sur blanc, 6,0:1 sur le bandeau clair */
    /* Échelle de rayons. 50 % reste réservé aux vrais ronds : points, avatars, lentille, indicateurs, anneaux. */
    --r-xl: 16px;             /* grands conteneurs : panneaux, cadres de démo, carte finale, FAQ, vignette vidéo */
    --r-lg: 14px;             /* barres et blocs de verre : navigation, dock, serveur, pilule du système */
    --r-md: 12px;             /* fenêtres, cartes et bulles dans les démos, commande segmentée, cartes de contenu */
    --r-sm: 10px;             /* boutons, icônes du dock, tuiles */
    --r-xs: 8px;              /* puces, étiquettes, liens de la barre, boutons compacts */
    --r-thumb: 9px;           /* pastille de sélection de la commande segmentée */
    --r-tail: 4px;            /* angle pointu d'une bulle de conversation */
    --r-bar: 2px;             /* traits fins : lignes de texte, barre de lecture, forme d'onde */
    --g1: rgba(255, 255, 255, .74);
    --g2: rgba(255, 255, 255, .48);
    --wrap: 1200px;
    --gut: clamp(18px, 4vw, 56px);
    --section: clamp(96px, 11vw, 168px);
    --f: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --spring: cubic-bezier(.2, .8, .2, 1);
    --spring-pop: cubic-bezier(.2, .8, .2, 1);
    --sh-glass: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(16, 28, 80, .10);
    --sh-chip: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(16, 28, 80, .10);
    --sh-tile: inset 0 1px 0 #fff, 0 0 0 1px rgba(16, 28, 80, .11);
    --sh-btn: inset 0 0 0 1px rgba(255, 255, 255, .14);
    --sh-btn-hover: inset 0 0 0 1px rgba(255, 255, 255, .14);
    --sh-line: inset 0 0 0 1px rgba(16, 28, 80, .14), 0 1px 2px rgba(16, 28, 80, .05);
    --sh-card: 0 0 0 1px var(--line);
    --sh-card-hover: 0 0 0 1px var(--blue-500);
    --ring: #2649DE;
    /* Fond des scènes : un aplat gris bleuté, sans dégradé ni trame (retour de Théo du 8 octobre). */
    --stage: #E3E8F0;
    --wall: var(--stage);
  }
  /* Ressort avec léger rebond (amortissement 0,7 et 0,62), repli sur cubic-bezier(.2,.8,.2,1). */
  @supports (transition-timing-function: linear(0, 1)) {
    :root {
      --spring: linear(0, 0.0271 2.8%, 0.096 5.6%, 0.1911 8.3%, 0.2998 11.1%, 0.4126 13.9%, 0.5225 16.7%, 0.6248 19.4%, 0.7164 22.2%, 0.7957 25%, 0.8624 27.8%, 0.9166 30.6%, 0.9593 33.3%, 0.9916 36.1%, 1.0149 38.9%, 1.0306 41.7%, 1.0402 44.4%, 1.0449 47.2%, 1.046 50%, 1.0443 52.8%, 1.0409 55.6%, 1.0364 58.3%, 1.0314 61.1%, 1.0262 63.9%, 1.0212 66.7%, 1.0165 69.4%, 1.0124 72.2%, 1.0089 75%, 1.0059 77.8%, 1.0035 80.6%, 1.0016 83.3%, 1.0002 86.1%, 0.9992 88.9%, 0.9985 91.7%, 0.9981 94.4%, 0.9979 97.2%, 1);
      --spring-pop: linear(0, 0.0344 2.8%, 0.1217 5.6%, 0.2407 8.3%, 0.3744 11.1%, 0.5099 13.9%, 0.6377 16.7%, 0.7518 19.4%, 0.8487 22.2%, 0.9272 25%, 0.9875 27.8%, 1.0311 30.6%, 1.0599 33.3%, 1.0763 36.1%, 1.083 38.9%, 1.0824 41.7%, 1.0765 44.4%, 1.0674 47.2%, 1.0566 50%, 1.0452 52.8%, 1.0342 55.6%, 1.0242 58.3%, 1.0155 61.1%, 1.0084 63.9%, 1.0028 66.7%, 0.9986 69.4%, 0.9958 72.2%, 0.994 75%, 0.9932 77.8%, 0.993 80.6%, 0.9934 83.3%, 0.9941 86.1%, 0.9949 88.9%, 0.9959 91.7%, 0.9968 94.4%, 0.9977 97.2%, 1);
    }
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; interpolate-size: allow-keywords; scroll-padding-top: 96px; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: var(--f); font-optical-sizing: auto; font-weight: 400; font-size: 17px; line-height: 1.62;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
  }
  h1, h2, h3, h4 { font-weight: 500; color: var(--ink); margin: 0; text-wrap: balance; letter-spacing: -0.026em; }
  p { margin: 0; text-wrap: pretty; }
  a { color: inherit; }
  svg { display: block; }
  .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .defs { position: absolute; width: 0; height: 0; overflow: hidden; }

  /* Verre : teinte blanche, bord en dégradé, reflet spéculaire, ombre douce */
  .glass { position: relative; isolation: isolate; background: #fff; box-shadow: var(--sh-glass); }
  .blur { -webkit-backdrop-filter: blur(20px) saturate(175%); backdrop-filter: blur(20px) saturate(175%); }
  @media (max-width: 720px) { .blur { -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); } }
  @media (prefers-reduced-transparency: reduce) {
    .glass { background: rgba(246, 249, 255, .95); }
    .blur { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .btn-clear { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }

  /* Boutons : plats et nets. Plein corail pour l'action, verre clair pour le reste. Pas de dégradé, pas de reflet. */
  .btn, .nav-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-sm); cursor: pointer;
    font: 500 15px/1 var(--f); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
    transition: background-color .18s ease, box-shadow .2s ease, transform .18s ease;
  }
  .btn-lg { height: 48px; }
  .btn-main, .nav-cta { color: #fff; background: var(--accent-btn); box-shadow: var(--sh-btn); }
  .btn-main:hover, .nav-cta:hover { background: var(--accent-strong); box-shadow: var(--sh-btn-hover); }
  .btn-clear { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px #CDD2DA; }
  .btn-clear:hover { background: #F6F7F9; box-shadow: inset 0 0 0 1px #A9B1BE; }
  .btn:active, .nav-cta:active { transform: scale(.98); box-shadow: var(--sh-btn); }
  .btn-clear:active { box-shadow: var(--sh-line); }
  .btn:focus-visible, .nav a:focus-visible, .nav-cta:focus-visible, .logo:focus-visible, .seg button:focus-visible, .replay:focus-visible, summary:focus-visible, .foot-col a:focus-visible, .panel:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

  /* En-tête : pilule de verre flottante */
  .site-head { position: fixed; z-index: 60; top: 14px; left: 0; right: 0; padding: 0 var(--gut); pointer-events: none; }
  .nav-pill { pointer-events: auto; display: flex; align-items: center; width: fit-content; max-width: 100%; margin: 0 auto; height: 56px; padding: 0 9px 0 20px; border-radius: var(--r-lg); }
  .logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; margin-right: 22px; white-space: nowrap; border-radius: var(--r-xs); }
  .logo i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(48, 94, 243, .15); }
  .nav { display: flex; gap: 2px; margin-right: 10px; }
  .nav a { padding: 9px 14px; border-radius: var(--r-xs); font-size: 14.5px; font-weight: 400; color: var(--text); text-decoration: none; transition: background-color .3s var(--ease), color .3s var(--ease); white-space: nowrap; }
  .nav a:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
  .nav-cta { height: 38px; padding: 0 16px; border-radius: var(--r-xs); font-size: 14px; }

  /* Hero : champ de points et lentille */
  .hero { position: relative; overflow: hidden; min-height: clamp(800px, 100svh, 1000px); display: flex; }
  .hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; padding-top: clamp(124px, 15svh, 156px); padding-bottom: clamp(200px, 25svh, 250px); }
  .hero-copy { max-width: 690px; }
  .h1 { font-size: clamp(38px, 4.7vw, 68px); line-height: 1.04; letter-spacing: -0.036em; font-weight: 500; }
  .h1 .accent { color: var(--accent); }
  .lead { margin-top: 30px; max-width: 31em; font-size: clamp(17px, 1.32vw, 19px); line-height: 1.6; color: var(--text); }
  .actions { margin-top: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
  .topics { margin: 36px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
  .topics li { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: var(--r-xs); background: rgba(255, 255, 255, .8); box-shadow: var(--sh-line); white-space: nowrap; }
  .tray { border-radius: var(--r-xl); }
  .tray .stage { --sh: 410px; background: none; box-shadow: none; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .tray .demo-foot { margin: 0; padding: 0 14px 12px 22px; }

  /* Sections */
  .section { position: relative; isolation: isolate; padding: var(--section) 0 0; overflow-x: clip; }
  .sec { isolation: isolate; overflow-x: clip; }
  .head { position: relative; padding-top: 44px; }
  .head::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line);
  }
  .h2 { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.07; letter-spacing: -0.034em; max-width: 22ch; }
  .sub { margin-top: 22px; font-size: clamp(17px, 1.32vw, 19px); line-height: 1.6; max-width: 36em; color: var(--text); }
  .halo { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }

  /* Services : commande segmentée et panneaux */
  /* Services : quatre onglets en cartes, avec les logos des outils (8 octobre 2026) */
  .seg-wrap { position: relative; z-index: 2; }
  .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .seg button {
    appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; text-align: left;
    display: grid; align-content: start; gap: 4px; padding: 16px 18px 18px; border-radius: var(--r-md);
    background: #fff; box-shadow: 0 0 0 1px var(--line); font: inherit; color: var(--ink);
    transition: box-shadow .2s var(--ease);
  }
  .seg button:hover { box-shadow: 0 0 0 1px #A9B1BE; }
  .seg button[aria-selected="true"] { box-shadow: 0 0 0 2px var(--accent); }
  .tab-logos { display: flex; align-items: center; gap: 8px; height: 28px; margin-bottom: 8px; }
  .tab-logos img { display: block; width: auto; height: 24px; }
  .tab-t { font: 600 17px/1.25 var(--f); letter-spacing: -0.012em; color: var(--ink); }
  .seg button[aria-selected="true"] .tab-t { color: var(--accent-text); }
  .tab-d { font: 400 14px/1.4 var(--f); color: var(--muted); }
  .tab-play { position: relative; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); }
  .tab-play::before { content: ""; position: absolute; left: 9.5px; top: 7px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
  .tab-srv { position: relative; width: 22px; height: 24px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1.6px var(--ink); }
  .tab-srv::before, .tab-srv::after { content: ""; position: absolute; left: 5px; right: 5px; height: 1.6px; background: var(--ink); }
  .tab-srv::before { top: 8px; } .tab-srv::after { top: 14px; }
  .panels { margin-top: 24px; }
  .panel { border-radius: var(--r-xl); padding: clamp(20px, 3.2vw, 44px); background: #fff; }
  .panel[hidden] { display: none; }
  .panel-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 3.4vw, 52px); row-gap: 28px; align-items: start; }
  .panel-copy { padding-top: 8px; }
  .panel h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.1; letter-spacing: -0.032em; }
  .benefit { margin-top: 16px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink); font-weight: 500; }
  .desc { margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--text); font-weight: 400; }
  .details { margin-top: clamp(26px, 3.2vw, 40px); padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid rgba(16, 28, 80, .08); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 44px); }
  .ig h4 { font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--accent-text); }
  .ig ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
  .ig li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; font-weight: 400; color: var(--text); }
  .ig li::before { content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--blue-200) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232649DE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 10.4l3 3 5.8-6.2'/%3E%3C/svg%3E") center / 19px 19px no-repeat; }
  .ig p { margin-top: 14px; font-size: 15.5px; line-height: 1.6; font-weight: 400; color: var(--text); }

  /* Démo : scène commune */
  .demo { position: relative; margin: 0; min-width: 0; }
  .stage { position: relative; height: var(--sh, 460px); border-radius: var(--r-xl); overflow: hidden; container-type: size; background: var(--wall); box-shadow: inset 0 0 0 1px rgba(16, 28, 80, .05); }
  .demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin-top: 10px; padding: 0 2px 0 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
  .replay {
    appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; height: 32px; padding: 0 14px; border-radius: var(--r-xs);
    font: 500 13px/1 var(--f); color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px #CDD2DA;
    opacity: 0; pointer-events: none; transform: scale(.94); transition: opacity .25s ease, transform .2s ease, background-color .18s ease;
  }
  .done .replay { opacity: 1; pointer-events: auto; transform: none; }
  .done .replay:hover { background: #F6F7F9; }
  .done .replay:active { transform: scale(.98); }
  .instant, .instant * { transition: none !important; animation: none !important; }
  /* Mouvement réduit : quand .instant tombe, une animation CSS repartirait ; on la ramène à son état final, sans mouvement */
  @media (prefers-reduced-motion: reduce) { .demo .stage * { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } }


  /* Questions fréquentes */
  .faq { margin-top: 48px; border-radius: var(--r-xl); padding: 6px clamp(20px, 3.4vw, 44px); }
  .faq details + details { border-top: 1px solid rgba(16, 28, 80, .08); }
  .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; color: var(--ink); font-weight: 400; letter-spacing: -0.015em; border-radius: var(--r-md); }
  .faq summary::-webkit-details-marker { display: none; }
  .pm { flex: none; position: relative; width: 34px; height: 34px; border-radius: var(--r-xs); background: #F1F3F6; box-shadow: none; transition: background-color .18s ease, box-shadow .2s ease; }
  .pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin: -1px 0 0 -6.5px; border-radius: var(--r-bar); background: var(--ink); transition: transform .45s var(--spring-pop), background-color .18s ease; }
  .pm::after { transform: rotate(90deg); }
  .faq details[open] .pm { background: var(--accent-btn); box-shadow: var(--sh-btn); }
  .faq details[open] .pm::before, .faq details[open] .pm::after { background: #fff; }
  .faq details[open] .pm::after { transform: rotate(0deg); }
  .faq details p { padding: 0 56px 26px 0; max-width: 46em; font-size: 17px; line-height: 1.65; color: var(--text); font-weight: 400; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
  @media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } }

  /* Appel final */
  .final { padding-bottom: var(--section); }
  .final-stage { position: relative; border-radius: var(--r-xl); overflow: hidden; padding: clamp(36px, 7vw, 96px) clamp(14px, 5vw, 80px); background: var(--accent-btn); }
  .final-card { background: #fff; max-width: 760px; margin: 0 auto; border-radius: var(--r-xl); padding: clamp(40px, 5.4vw, 68px) clamp(22px, 4vw, 60px); text-align: center; }
  .final-card .h2 { margin: 0 auto; max-width: 16ch; }
  .final-card p { margin: 22px auto 0; max-width: 28em; font-size: clamp(17px, 1.32vw, 19px); font-weight: 400; color: var(--text); }
  .final-card .actions { justify-content: center; }

  /* Footer clair */
  .site-foot { background: var(--foot); padding: 72px 0 40px; font-size: 15px; font-weight: 400; color: var(--text); }
  .foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
  .foot-brand p { margin-top: 14px; color: var(--muted); }
  .foot-col h4 { font-size: 13.5px; font-weight: 500; letter-spacing: .02em; color: var(--ink); }
  .foot-col ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
  .foot-col a { text-decoration: none; color: var(--muted); border-radius: var(--r-xs); }
  .foot-col a:hover { color: var(--ink); }
  .foot-bottom { position: relative; margin-top: 56px; padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13.5px; }
  .foot-bottom::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #CBD0D8; }
.annex .head { padding-top: 36px; }
.annex h3 { margin-top: 34px; font-size: 13.5px; font-weight: 500; letter-spacing: .02em; color: var(--ink); }
.annex strong { color: var(--ink); font-weight: 500; }

  /* Responsive */
  @media (max-width: 1060px) {
    .nav { display: none; }
    .panel-top { grid-template-columns: minmax(0, 1fr); }
    .panel-copy { padding-top: 0; }
  }
  @media (max-width: 900px) {
    .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .details { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .details .ig:last-child { grid-column: 1 / -1; }
  }
  @media (max-width: 720px) {
    .seg { gap: 8px; }
    .seg button { padding: 12px 14px 14px; }
    .tab-d { display: none; }
    .tab-t { font-size: 15.5px; }
    .tab-logos { margin-bottom: 4px; }
    :root { --section: 84px; }
    body { font-size: 16.5px; }
    .site-head { position: absolute; top: 12px; }
    .nav-pill { width: 100%; justify-content: space-between; height: 54px; padding: 0 8px 0 18px; }
    .nav-cta { padding: 0 14px; }
    .nav-cta .lg { display: none; }
    .hero { min-height: 0; }
    .hero .wrap { align-items: start; padding-top: 318px; padding-bottom: 84px; }
    .h1 br { display: none; }
    .h1 { font-size: clamp(34px, 9.6vw, 40px); line-height: 1.07; }
    .lead { margin-top: 22px; font-size: 17px; }
    .actions { margin-top: 30px; gap: 10px; }
    .topics { margin-top: 32px; font-size: 13px; gap: 6px 16px; }
    .panels { margin-top: 18px; }
    .panel { padding: 22px 12px 14px; }
    .panel-copy, .details { padding-left: 8px; padding-right: 8px; }
    .stage { --sh: 420px; }
    .details { grid-template-columns: minmax(0, 1fr); }
    .faq { padding: 4px 20px; }
    .faq summary { padding: 22px 0; }
    .faq details p { padding-right: 0; font-size: 16.5px; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .foot-brand { grid-column: 1 / -1; }
    .demo-foot { min-height: 36px; }
  }

/* Pages de service, contact, mentions légales, 404.
   Gabarit v2 du 8 octobre 2026 : bleu de la marque, cartes, étapes, chiffres.
   Réutilise les variables de site.css (--ink, --text, --muted, --accent*, --blue-*, --line, --band, --r-*, --sh-*). */

.skip { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: var(--r-xs); background: var(--ink); color: #fff; font: 500 14px/1 var(--f); text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }

.nav a[aria-current] { color: var(--accent-text); background: var(--blue-200); }

/* ------------------------------------------------------------------ En-tête de page */
.phero { position: relative; isolation: isolate; padding: clamp(112px, 11vw, 148px) 0 clamp(52px, 6vw, 92px); }

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; list-style: none; margin: 0 0 clamp(22px, 3vw, 34px); padding: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .45; }
.crumbs a { color: inherit; text-decoration: none; border-radius: 4px; }
.crumbs a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); }

.phero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.phero-grid.no-demo { grid-template-columns: minmax(0, 1fr); }
.phero-copy { max-width: 640px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; margin: 0 0 20px; border-radius: var(--r-xs); background: var(--blue-200); color: var(--accent-text); font: 500 13.5px/1 var(--f); }
.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.phero .h1 { font-size: clamp(36px, 4.5vw, 62px); line-height: 1.04; }
.phero .lead { margin-top: 22px; max-width: 33em; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.6; color: var(--text); }
.phero .lead p + p { margin-top: 12px; }
.phero .benefit { margin-top: 18px; max-width: 30em; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.45; font-weight: 500; color: var(--ink); }
.phero .actions { margin-top: 30px; }
.phero-demo { min-width: 0; }
.phero-demo .stage { --sh: clamp(400px, 34vw, 440px); }

.facts { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.facts li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 10px; border-radius: var(--r-xs); background: #fff; box-shadow: var(--sh-card); font-size: 14.5px; line-height: 1.25; font-weight: 500; color: var(--ink); }
.ck { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.facts .ck { color: var(--accent); }

/* ------------------------------------------------------------------ Sections */
.sec { position: relative; padding: clamp(64px, 8vw, 112px) 0; }
.sec.band { background: var(--band); border-block: 1px solid var(--line); }
.sec-head { max-width: 520px; }
.sec-head-top { max-width: 780px; margin-bottom: clamp(28px, 3.6vw, 48px); }
.kicker { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; margin: 0 0 16px; border-radius: var(--r-xs); background: var(--blue-200); color: var(--accent-text); font: 500 13px/1 var(--f); }
.band .kicker { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sec .h2 { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.1; letter-spacing: -0.034em; max-width: 21ch; }
.sec-lead { margin-top: 16px; max-width: 34em; font-size: 17px; line-height: 1.6; color: var(--text); }
.sec-lead p + p { margin-top: 10px; }
.sec-lead a, .note a, .prose-in a { color: var(--accent-text); text-underline-offset: 3px; }
.sec-lead a:hover, .note a:hover, .prose-in a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ Cartes */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Cinq cartes : trois puis deux plus larges, sans case vide */
.cards.cols-3.n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cards.cols-3.n5 > li:nth-child(-n+3) { grid-column: span 2; }
.cards.cols-3.n5 > li:nth-child(n+4) { grid-column: span 3; }
.card { position: relative; background: #fff; border-radius: var(--r-md); padding: 24px 24px 26px; box-shadow: var(--sh-card); }
.card h3 { font-size: 18.5px; line-height: 1.28; font-weight: 600; letter-spacing: -0.016em; color: var(--ink); }
.card p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--text); }
.card h3 + p { margin-top: 8px; }
.card a:not(.btn):not(.card-link) { color: var(--accent-text); text-underline-offset: 3px; }
.card a:not(.btn):not(.card-link):hover { color: var(--ink); }
.cards li > .card { height: 100%; }

/* « Ce que vous obtenez » : pastille de coche à gauche */
.card.feat { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.disc { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-200); color: var(--accent-text); }
.disc .ck { width: 16px; height: 16px; stroke-width: 2.1; }
.card.feat h3 { margin-top: 5px; }
.card.feat h3:only-child + p, .card.feat p:first-child { margin-top: 6px; }

/* « Pour qui » et comparaisons : étiquette puis phrase */
.tag { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 11px; border-radius: var(--r-xs); background: var(--blue-200); color: var(--accent-text); font: 600 14.5px/1.25 var(--f); letter-spacing: 0; }
.band .tag { background: var(--blue-200); }
.card.who h3, .card.cmp h3 { font-size: inherit; line-height: 1; }
.card.who p, .card.cmp p { margin-top: 16px; font-size: 17px; line-height: 1.55; color: var(--ink); }
.card.cmp p { font-size: 16.5px; color: var(--text); }

/* Icônes des cartes (8 octobre 2026, icons.py) : au-dessus du titre ; à gauche dans « Ce que vous obtenez » */
.emo { display: block; width: 46px; height: 46px; margin-bottom: 16px; }
.card.feat { grid-template-columns: 42px minmax(0, 1fr); }
.card.feat .emo { width: 42px; height: 42px; margin: 0; }
.card.feat .emo + div h3 { margin-top: 10px; }
.ic { display: block; width: 100%; height: 100%; overflow: visible; }
.ic .a { fill: var(--accent-btn); }
.ic .b { fill: #A9C1FF; }
.ic .ab { fill: #1E3A9E; }
.ic .w { fill: #fff; }
.ic-i { display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; }

/* Cartes-liens (pages liées, choix d'une formation) */
.card-link { display: block; padding-right: 66px; color: inherit; text-decoration: none; transition: box-shadow .25s var(--ease); }
.card-link h3 { color: var(--ink); }
.card-link:hover { box-shadow: var(--sh-card-hover); }
.card-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.go { position: absolute; right: 18px; top: 20px; width: 32px; height: 32px; border-radius: var(--r-xs); background: var(--blue-200); transition: background-color .25s var(--ease); }
.go::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -5px 0 0 -6px; border-top: 1.9px solid var(--accent-text); border-right: 1.9px solid var(--accent-text); transform: rotate(45deg); transition: border-color .25s var(--ease); }
.card-link:hover .go { background: var(--accent-btn); }
.card-link:hover .go::before { border-color: #fff; }
.related .card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--muted); font-size: 15px; }

/* Chiffres */
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card.stat { padding: 28px 26px 30px; }
.card.stat .big { margin: 0; font-size: clamp(42px, 5.2vw, 68px); line-height: 1; font-weight: 500; letter-spacing: -0.045em; color: var(--accent); }
.card.stat .cap { margin-top: 14px; font-size: 16.5px; line-height: 1.5; color: var(--text); }

/* Note sous une liste */
.note { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.note p, .note ul { max-width: 48em; }
.note p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.note p + p { margin-top: 10px; }
.note p:has(+ ul) { font-size: 17px; color: var(--text); }
.note ul { margin-top: 14px; }
.band .note { border-top-color: #CBD0D8; }

/* ------------------------------------------------------------------ Étapes */
.steps-h, .steps-v { list-style: none; margin: 0; padding: 0; }
.steps-h { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.steps-h li { position: relative; padding-top: 68px; }
.steps-h li:not(:last-child)::after { content: ""; position: absolute; left: 58px; right: calc(-1 * clamp(20px, 3vw, 40px) + 14px); top: 21px; height: 0; border-top: 2px dotted var(--blue-400); }
.n { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-btn); color: #fff; font: 600 17px/1 var(--f); }
.steps-h h3, .steps-v h3 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.018em; color: var(--ink); }
.steps-h p, .steps-v p { margin-top: 8px; font-size: 16px; line-height: 1.58; color: var(--text); }
.steps-h a, .steps-v a { color: var(--accent-text); text-underline-offset: 3px; }

.steps-v { display: grid; gap: 28px; counter-reset: sv; }
.steps-v li { position: relative; padding-left: 64px; min-height: 44px; }
.steps-v li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 52px; bottom: -22px; width: 0; border-left: 2px dotted var(--blue-400); }
.steps-v .n { top: 0; }

/* ------------------------------------------------------------------ Texte */
.prose-in { max-width: 720px; }
.prose-in.two { max-width: none; column-count: 2; column-gap: clamp(32px, 5vw, 72px); }
.prose-in.two p { break-inside: avoid; }
.prose-in.two p + p { margin-top: 0; }
.steps-wrap { max-width: 820px; }
.sec .faq { max-width: 900px; }
.prose-in h3 { margin: 26px 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); }
.prose-in p { margin: 0; font-size: 18px; line-height: 1.66; color: var(--text); }
.prose-in p + p { margin-top: 16px; }
.prose-in strong { font-weight: 600; color: var(--ink); }
.prose-in ul, .prose-in ol, .note ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.prose-in li, .note li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.55; color: var(--text); }
.prose-in ul li::before, .note ul li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--blue-200) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232649DE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 10.4l3 3 5.8-6.2'/%3E%3C/svg%3E") center / 20px 20px no-repeat; }
.prose-in ol { counter-reset: pi; }
.prose-in ol li { counter-increment: pi; }
.prose-in ol li::before { content: counter(pi); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-200); color: var(--accent-text); font: 600 12.5px/1 var(--f); }
.prose-in ul + p, .prose-in ol + p { margin-top: 20px; }

/* ------------------------------------------------------------------ Questions */
.faq { margin: 48px 0 0; padding: 0; display: grid; gap: 10px; background: none; box-shadow: none; border-radius: 0; }
.faq details { background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-card); }
.faq details + details { border-top: 0; }
.faq summary { padding: 20px 20px 20px 24px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.35; font-weight: 500; letter-spacing: -0.012em; }
.faq details p { padding: 0 64px 0 24px; max-width: 46em; font-size: 16.5px; line-height: 1.62; }
.faq details > p:last-child { padding-bottom: 24px; }
.faq details p + p { margin-top: -12px; padding-top: 0; }
.faq a { color: var(--accent-text); text-underline-offset: 3px; }
.faq a:hover { color: var(--ink); }
.faq summary:focus-visible { outline-offset: -2px; }

/* ------------------------------------------------------------------ Appel final */
.sec.final { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(72px, 9vw, 128px); }
.sec.band + .sec.final, .sec + .sec.final { background: var(--bg); }

/* ------------------------------------------------------------------ Pages de texte (contact, mentions légales, 404) */
.section.prose { padding-block: clamp(24px, 3.4vw, 48px); }
.section.prose + .section.prose { padding-top: 0; }
.prose-in.glass { position: relative; padding: clamp(26px, 3.4vw, 48px); border-radius: var(--r-xl); max-width: 860px; }
.prose-in.glass h2 { margin: 0 0 18px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.14; letter-spacing: -0.03em; font-weight: 500; color: var(--ink); max-width: 26ch; }
.prose.legal .prose-in h2 { margin-top: 38px; }
.prose.legal .prose-in h2:first-child { margin-top: 0; }
.page-404 .cards { margin-top: clamp(32px, 4vw, 56px); }

/* ------------------------------------------------------------------ Liens d'approfondissement (accueil) */
.more { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 8px; }
.btn-link { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: var(--r-xs); background: #fff; box-shadow: var(--sh-line); font: 500 14.5px/1.25 var(--f); color: var(--ink); text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.btn-link::after { content: ""; flex: none; width: 6px; height: 6px; border-top: 1.8px solid var(--accent-text); border-right: 1.8px solid var(--accent-text); transform: rotate(45deg); transition: transform .25s var(--ease); }
.btn-link:hover { background: var(--blue-200); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--blue-300); }
.btn-link:hover::after { transform: translateX(2px) rotate(45deg); }
.btn-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Pied de page à quatre colonnes */
.foot-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 48px); }
.foot-brand { grid-column: auto; }
.foot-col .ft { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.foot-col a:hover { color: var(--accent-text); }

/* ------------------------------------------------------------------ Adaptation */
@media (max-width: 1060px) {
  .cards.cols-3, .cards.cols-3.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.cols-3.n5 > li:nth-child(n) { grid-column: auto; }
  .cards.cols-3.n5 > li:last-child { grid-column: 1 / -1; }
  .steps-h { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .steps-h li:nth-child(2n)::after { display: none; }
}
@media (max-width: 960px) {
  .prose-in.two { column-count: 1; }
  .phero-grid { grid-template-columns: minmax(0, 1fr); }
  .phero-demo .stage { --sh: 430px; }
      .sec-head, .sec-head-top { max-width: 640px; }
}
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .phero { padding-top: 96px; }
  .cards.cols-2, .cards.cols-3, .cards.cols-3.n5 { grid-template-columns: minmax(0, 1fr); }
  .cards.cols-3.n5 > li:last-child { grid-column: auto; }
  .steps-h { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps-h li { padding: 0 0 30px 62px; min-height: 44px; }
  .steps-h li:last-child { padding-bottom: 0; }
  .steps-h li:not(:last-child)::after, .steps-h li:nth-child(2n)::after { display: block; left: 21px; right: auto; top: 52px; bottom: 6px; width: 0; height: auto; border-top: 0; border-left: 2px dotted var(--blue-400); }
  .facts li { font-size: 14px; }
  .prose-in p { font-size: 17px; }
  .card { padding: 20px 20px 22px; }
  .faq details p { padding-right: 24px; }
  .faq summary { padding: 18px 16px 18px 20px; }
}

/* ------------------------------------------------------------------ Contact : aperçu de l'e-mail, réservation */
.mail-mock { margin: 0; justify-self: end; width: min(100%, 520px); border-radius: var(--r-xl); overflow: hidden; background: #fff; box-shadow: var(--sh-card); }
.mm-bar { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 16px; background: #EEF0F3; box-shadow: inset 0 -1px 0 var(--line); font: 500 14px/1 var(--f); color: var(--muted); }
.mm-dots { display: inline-flex; gap: 6px; }
.mm-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--blue-300); }
.mm-rows { margin: 0; padding: 4px 20px 0; }
.mm-rows > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; padding: 13px 0; box-shadow: inset 0 -1px 0 var(--line); font-size: 15.5px; line-height: 1.35; }
.mm-rows dt { margin: 0; color: var(--muted); }
.mm-rows dd { margin: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.mm-body { padding: 18px 20px 6px; display: grid; gap: 9px; }
.mm-body p { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--text); }
.mm-field { display: block; height: 40px; border-radius: var(--r-xs); background: #F6F7F9; box-shadow: inset 0 0 0 1px var(--line); }
.mm-cap { margin: 0; padding: 12px 20px 18px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: stretch; }
.duo .card { padding: clamp(24px, 3vw, 36px); }
.duo .h3 { font-size: clamp(22px, 2vw, 26px); line-height: 1.2; font-weight: 600; letter-spacing: -0.022em; color: var(--ink); max-width: 18ch; }
.duo .card p { margin-top: 12px; font-size: 17px; line-height: 1.6; }
.duo .card.free { background: var(--accent-btn); }
.duo .card.free .h3, .duo .card.free p { color: #fff; }
.duo .card.free p { margin-top: 16px; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.45; font-weight: 500; max-width: 18em; }
.duo .card-cta .actions { margin-top: 24px; }
.duo .small p { margin-top: 18px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.info { margin-top: clamp(32px, 4vw, 48px); max-width: 720px; }
.info .h3 { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.info p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.info a { color: var(--accent-text); text-underline-offset: 3px; }

/* Document (mentions légales) */
.doc { max-width: 820px; padding: clamp(24px, 4vw, 52px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--sh-card); }
.doc h2 { margin: 40px 0 14px; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.18; letter-spacing: -0.026em; font-weight: 500; color: var(--ink); max-width: 28ch; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { margin: 26px 0 8px; }

@media (max-width: 960px) {
  .mail-mock { justify-self: stretch; width: 100%; max-width: 560px; }
  .duo { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ Apparition douce au défilement (sans script ; ignorée sans prise en charge ou en mouvement réduit) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
    .sec .card, .steps-h li, .steps-v li, .faq details, .sec-head > *, .mail-mock { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  }
}

/* Fond gris uni : plus de halos colorés derrière les blocs (retour de Théo du 8 octobre) */
.halo { display: none; }


/* _apps.css */
/* Kit commun des scènes « vrais outils » (8 octobre 2026).
   Une scène montre l'outil que le client utilise déjà (Gmail, Outlook, Excel, Word, Teams, ChatGPT, Claude, n8n…),
   avec son vrai logo, en aplats : aucun dégradé, aucune ombre portée, des filets de 1 px.
   Le bleu de la marque est réservé à l'agent IA : barre d'agent, pastille « Réponse prête », bouton de validation, bilan « Après ».
   Classes préfixées ui- ; le décor propre à chaque outil vit dans assets/demos/<scène>.css, préfixé .scene-<scène>. */

.tray .ui-stage, .ui-stage { --ui-line: #D9DEE6; --ui-soft: #F4F6F9; --ui-ink: #1F2328; --ui-mute: #5F6672;
  display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--stage); }

/* Bilan avant / après, au-dessus de la fenêtre : on comprend le gain sans lire la démo */
.ui-bilan { flex: none; position: relative; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 30px; }
.ui-b { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; font: 500 13px/1 var(--f); white-space: nowrap; }
.ui-b b { font-weight: 600; }
.ui-b-avant { background: #fff; color: var(--ui-mute); box-shadow: inset 0 0 0 1px var(--ui-line); }
.ui-b-avant b { color: var(--ui-ink); }
.ui-b-to { flex: none; width: 16px; height: 16px; color: #8C95A3; opacity: 0; transition: opacity .3s var(--ease); }
.ui-b-apres { background: var(--accent-btn); color: #fff; opacity: 0; transform: translateX(-6px); transition: opacity .35s var(--ease), transform .5s var(--spring); }
.s-done .ui-b-to { opacity: 1; }
.s-done .ui-b-apres { opacity: 1; transform: none; }

/* Fenêtre d'application */
.ui-win { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line); color: var(--ui-ink); font: 400 13px/1.35 var(--f); }
.ui-top { flex: none; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-bottom: 1px solid #E8EBF0; background: #fff; }
.ui-logo { flex: none; display: block; width: auto; height: 22px; }
.ui-name { font: 500 15px/1 var(--f); letter-spacing: -0.01em; color: #3C4043; white-space: nowrap; }
.ui-dots { display: flex; gap: 6px; margin-right: 2px; }
.ui-dots i { width: 10px; height: 10px; border-radius: 50%; background: #DADFE6; }
.ui-body { position: relative; flex: 1; min-height: 0; }
.ui-file { font: 500 13px/1 var(--f); color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-file small { font-weight: 400; color: var(--ui-mute); margin-left: 6px; }

/* Barre de l'agent IA : glisse en haut de la zone de travail, puis affiche ce qui est fait */
.ui-agent { flex: none; position: relative; display: flex; align-items: center; gap: 8px; height: 0; padding: 0 12px; overflow: hidden; background: #EEF3FE; color: #1E3A9E; font: 500 12.5px/1 var(--f); white-space: nowrap; transition: height .45s var(--spring); }
.s-agent .ui-agent { height: 34px; box-shadow: inset 0 -1px 0 #D6E2FB; }
.ui-agent .t2 { display: none; }
.s-agentdone .ui-agent .t1 { display: none; }
.s-agentdone .ui-agent .t2 { display: inline; }
.ui-agent .ui-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent-btn); transform-origin: 0 50%; transform: scaleX(0); }
.s-agent .ui-agent .ui-prog { transform: scaleX(1); transition: transform var(--prog, 1.8s) linear .2s; }
.s-agentdone .ui-agent .ui-prog { opacity: 0; transition: opacity .3s; }
.ui-spark { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--accent-btn); color: #fff; }
.ui-spark svg { width: 13px; height: 13px; }

/* Pastilles, avatars, coche */
.ui-chip { display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 7px; border-radius: 5px; font: 500 11.5px/1 var(--f); background: #E8EAED; color: #3C4043; white-space: nowrap; }
.ui-chip.ai { background: #E3EBFE; color: #2649DE; }
.ui-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 600 11px/1 var(--f); color: #1F2328; background: #E3E7EE; }
.ui-ok { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-btn); color: #fff; }
.ui-ok svg { width: 12px; height: 12px; }
@keyframes ui-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* Résultat de l'agent et validation par une personne */
.ui-toast { position: absolute; z-index: 25; left: 50%; bottom: 26px; display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #C9D0DB; font: 500 13.5px/1.2 var(--f); color: var(--ink); white-space: nowrap; opacity: 0; transform: translate(-50%, 10px); transition: opacity .3s var(--ease), transform .55s var(--spring-pop); }
.s-toast .ui-toast { opacity: 1; transform: translate(-50%, 0); }
.ui-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--accent-btn); color: #fff; font: 500 13px/1 var(--f); white-space: nowrap; transition: transform .15s ease, background-color .2s ease; }
.ui-btn svg { width: 15px; height: 15px; }
.ui-btn .ok { display: none; align-items: center; gap: 5px; }
.s-press .ui-toast .ui-btn { transform: scale(.94); }
.s-valid .ui-toast .ui-btn { background: #1E3A9E; }
.s-valid .ui-toast .ui-btn .lab { display: none; }
.s-valid .ui-toast .ui-btn .ok { display: inline-flex; }

/* Curseur de la personne qui valide */
.ui-cursor { position: absolute; z-index: 40; width: 20px; height: 20px; left: 92%; top: 104%; opacity: 0; pointer-events: none; transition: left .75s var(--ease), top .75s var(--ease), opacity .25s var(--ease); }
.s-cursor .ui-cursor { opacity: 1; }
.s-done .ui-cursor { opacity: 0; transition-delay: .5s; }

/* La scène est elle-même le conteneur (.stage, container-type: size) : ses règles propres ne peuvent pas dépendre de cette requête */
@container (max-width: 460px) {
  .ui-b { height: 26px; padding: 0 8px; font-size: 11.5px; gap: 5px; }
  .ui-b-to { width: 13px; height: 13px; }
  .ui-top { height: 40px; padding: 0 10px; gap: 8px; }
  .ui-logo { height: 19px; }
  .ui-name { font-size: 13.5px; }
  .ui-toast { bottom: 18px; font-size: 12.5px; gap: 8px; }
}

/* Une scène posée dans un panneau de l'accueil : pas de second cadre autour de la scène */
.panel .demo.tray { background: transparent; box-shadow: none; }
.panel .demo.tray .stage { border-radius: var(--r-xl); }
.panel .demo.tray .demo-foot { padding: 0 2px 0 6px; }

/* chat.css */
/* Chat : un gabarit, trois habillages (stage .ct-chatgpt, .ct-claude, .ct-copilot).
   La pièce jointe arrive dans le champ, la demande se tape puis part dans la conversation, la réponse s'écrit ;
   une personne valide (bulle .ui-toast) ou, dans Word, insère le résumé dans le document.
   Aplats et filets ; chaque outil garde ses couleurs, le bleu de la marque reste à ce que fait l'IA et à la validation.
   États : s-file, s-typing, s-sent, s-answer, s-extra, s-toast, s-cursor, s-press, s-valid, s-insert, s-done. */
.scene-chat.ui-stage { background: var(--stage); }
.scene-chat .ct-top { gap: 8px; }
.scene-chat .ct-menu { display: none; flex: none; width: 18px; height: 18px; color: #5D5D5D; }
.scene-chat .ct-chev { flex: none; width: 15px; height: 15px; margin-left: -4px; color: #8F8F8F; }
.scene-chat .ct-av { margin-left: auto; }

/* Lignes qui s'ouvrent : la conversation part du bas et remonte quand un message arrive.
   Repliée (0fr), une ligne garde la hauteur de son padding : les écarts passent par des marges. */
.scene-chat .ct-row { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--spring), opacity .3s var(--ease); }
.scene-chat .ct-row > * { min-height: 0; overflow: hidden; }
.scene-chat.s-file .ct-rcf,
.scene-chat.s-sent .ct-rh, .scene-chat.s-sent .ct-rfile, .scene-chat.s-sent .ct-rme,
.scene-chat.s-answer .ct-rai,
.scene-chat.s-insert .ct-rins { grid-template-rows: 1fr; opacity: 1; }
.scene-chat.s-sent .ct-rcf { grid-template-rows: 0fr; opacity: 0; }

/* Fenêtre de conversation (ChatGPT, Claude) */
.scene-chat .ct-body { display: grid; grid-template-columns: 148px minmax(0, 1fr); }
.scene-chat .ct-side { display: flex; flex-direction: column; gap: 1px; min-height: 0; padding: 8px 6px; overflow: hidden; background: #F9F9F9; border-right: 1px solid #ECECEC; }
.scene-chat .ct-si { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 9px; border-radius: 8px; font: 400 12.5px/1 var(--f); color: #0D0D0D; white-space: nowrap; }
.scene-chat .ct-si span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scene-chat .ct-si svg { flex: none; width: 15px; height: 15px; color: #0D0D0D; }
.scene-chat .ct-si.on { background: #ECECEC; }
.scene-chat .ct-sh { margin: 12px 9px 4px; font: 500 11.5px/1 var(--f); color: #5F6672; }
.scene-chat .ct-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }
.scene-chat .ct-conv { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 2px 20px 10px; overflow: hidden; }
.scene-chat .ct-hello { position: absolute; inset: 0 0 6px; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 0 16px; font: 500 18px/1.25 var(--f); letter-spacing: -0.01em; color: #0D0D0D; text-align: center; transition: opacity .25s var(--ease); }
.scene-chat .ct-hello img { flex: none; width: 26px; height: 26px; border-radius: 7px; }
.scene-chat.s-sent .ct-hello { opacity: 0; }

/* Pièce jointe : dans le champ, puis au-dessus de la demande */
.scene-chat .ct-rfile > div { display: flex; justify-content: flex-end; }
.scene-chat .ct-rfile .ct-file { margin-top: 6px; }
.scene-chat .ct-file { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 6px 12px 6px 6px; border: 1px solid #E3E3E3; border-radius: 12px; background: #fff; }
.scene-chat .ct-ftile { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #5D5D5D; color: #fff; }
.scene-chat .ct-ftile svg { width: 17px; height: 17px; }
.scene-chat .ct-fpdf { flex: none; display: block; width: auto; height: 30px; margin-left: 3px; }
.scene-chat .ct-fn { display: grid; gap: 4px; min-width: 0; text-align: left; }
.scene-chat .ct-fn b { font: 600 12.5px/1.1 var(--f); color: #0D0D0D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-chat .ct-fn small { font: 400 11.5px/1.1 var(--f); color: #5F6672; white-space: nowrap; }
.scene-chat .ct-small { padding: 4px 10px 4px 4px; border-radius: 10px; }
.scene-chat .ct-small .ct-ftile { width: 28px; height: 28px; border-radius: 7px; }
.scene-chat .ct-small .ct-fpdf { height: 26px; }
.scene-chat .ct-rcf .ct-small { margin: 2px 2px 6px; }

/* Demande et réponse */
.scene-chat .ct-rme > div { display: flex; justify-content: flex-end; }
.scene-chat .ct-rme .ct-me { margin-top: 8px; }
.scene-chat .ct-me { max-width: 84%; margin: 0; padding: 8px 13px 9px; border-radius: 18px; background: #F4F4F4; font: 400 13px/1.42 var(--f); color: #0D0D0D; text-wrap: pretty; }
.scene-chat .ct-ai { display: flex; align-items: flex-start; gap: 10px; padding-top: 11px; }
.scene-chat .ct-aiav { flex: none; display: block; width: 24px; height: 24px; border-radius: 50%; }
.scene-chat .ct-ans { min-width: 0; display: grid; gap: 1px; justify-items: start; padding-top: 2px; }
.scene-chat .ct-l { margin: 0; font: 400 13px/1.5 var(--f); color: #0D0D0D; text-wrap: pretty; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .45s var(--spring); transition-delay: calc(.12s + var(--k, 0) * .17s); }
.scene-chat.s-answer .ct-l { opacity: 1; transform: none; }
.scene-chat .ct-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.scene-chat .ct-chip { display: inline-flex; align-items: center; height: 27px; padding: 0 12px; border-radius: 14px; border: 1px solid #E3E3E3; background: #fff; font: 500 12px/1 var(--f); color: #0D0D0D; white-space: nowrap; opacity: 0; transform: translateY(4px) scale(.96); transition: opacity .3s var(--ease), transform .5s var(--spring-pop); transition-delay: calc(var(--k, 0) * .1s); }
.scene-chat.s-extra .ct-chip { opacity: 1; transform: none; }

/* Champ de saisie */
.scene-chat .ct-comp { flex: none; margin: 0 16px 12px; padding: 5px; border: 1px solid #E3E3E3; border-radius: 22px; background: #fff; }
.scene-chat .ct-crow { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.scene-chat .ct-plus { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #0D0D0D; }
.scene-chat .ct-plus svg { width: 18px; height: 18px; }
.scene-chat .ct-in { flex: 1; min-width: 0; display: grid; font: 400 13px/1.35 var(--f); color: #0D0D0D; }
.scene-chat .ct-phd, .scene-chat .ct-typed { grid-area: 1 / 1; min-width: 0; }
.scene-chat .ct-phd { color: #5F6672; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-chat.s-typing .ct-phd { visibility: hidden; }
.scene-chat .ct-typed.busy::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -.2em; background: currentColor; }
.scene-chat .ct-send { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #D7D7D7; color: #fff; transition: background-color .2s var(--ease); }
.scene-chat .ct-send svg { width: 17px; height: 17px; }
.scene-chat.s-typing .ct-send { background: #0D0D0D; }
/* Validation : la bulle de l'agent prend la place du champ de saisie ; le curseur part du bas de la scène */
.scene-chat .ct-main .ui-toast { left: 16px; right: 16px; bottom: 12px; transform: translateY(8px); }
.scene-chat.s-toast .ct-main .ui-toast { transform: none; }
.scene-chat .ct-main .ui-toast .ui-btn { margin-left: auto; }
.scene-chat .ct-main .ui-toast > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scene-chat .ui-cursor { left: 56%; }

/* Claude : fond chaud, réponse à empattement, bouton d'envoi orange */
.scene-chat.ct-claude .ct-win, .scene-chat.ct-claude .ct-main, .scene-chat.ct-claude .ct-top { background: #F7F6F2; }
.scene-chat.ct-claude .ct-top { border-bottom-color: #E8E5DB; }
.scene-chat.ct-claude .ct-name { font: 400 17px/1 Georgia, "Times New Roman", serif; letter-spacing: 0; color: #1F1E1D; }
.scene-chat .ct-ttl { min-width: 0; padding-left: 10px; border-left: 1px solid #E0DCD0; font: 400 12.5px/1 var(--f); color: #66655F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .3s var(--ease) .3s; }
.scene-chat.s-sent .ct-ttl { opacity: 1; }
.scene-chat.ct-claude .ct-body { grid-template-columns: 46px minmax(0, 1fr); }
.scene-chat .ct-rail { align-items: center; gap: 6px; padding: 10px 0; background: #F0EEE6; border-right-color: #E6E2D7; }
.scene-chat .ct-new { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 4px; border-radius: 50%; background: #C96442; color: #fff; }
.scene-chat .ct-new svg { width: 16px; height: 16px; }
.scene-chat .ct-ri { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #8A877D; }
.scene-chat .ct-ri svg { width: 17px; height: 17px; }
.scene-chat.ct-claude .ct-hello { font: 400 22px/1.2 Georgia, "Times New Roman", serif; letter-spacing: 0; color: #3D3929; }
.scene-chat.ct-claude .ct-file { border-color: #E2DED3; }
.scene-chat.ct-claude .ct-me { border-radius: 14px; background: #ECE9E0; color: #1F1E1D; }
.scene-chat.ct-claude .ct-aiav { border-radius: 7px; }
.scene-chat.ct-claude .ct-l { font: 400 13.5px/1.42 Georgia, "Times New Roman", serif; color: #29261B; }
.scene-chat.ct-claude .ct-at { margin-bottom: 2px; font-weight: 700; }
.scene-chat .ct-pts { margin: 0; padding: 0 0 0 20px; display: grid; gap: 1px; }
.scene-chat .ct-pts li { padding-left: 2px; }
.scene-chat .ct-pts li::marker { color: #8A877D; }
.scene-chat .ct-risk { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.scene-chat .ct-risk .ui-chip { font-family: var(--f); }
.scene-chat.ct-claude .ct-comp { border-color: #E2DED3; border-radius: 16px; padding: 5px 5px 5px 6px; }
.scene-chat.ct-claude .ct-plus { color: #73726C; }
.scene-chat.ct-claude .ct-phd { color: #66655F; }
.scene-chat.ct-claude .ct-send { border-radius: 9px; background: #E7B9A7; }
.scene-chat.ct-claude.s-typing .ct-send { background: #C96442; }

/* Copilot dans Word : bandeau bleu Word, page du document, panneau Copilot à droite */
.scene-chat .ct-word .ct-top { gap: 9px; height: 44px; background: #185ABD; border-bottom-color: #185ABD; }
.scene-chat .ct-tile { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #fff; }
.scene-chat .ct-tile .ui-logo { height: 20px; }
.scene-chat .ct-word .ui-name { color: #fff; font-weight: 600; }
.scene-chat .ct-word .ui-file { min-width: 0; color: #DCE7F7; font-weight: 400; }
.scene-chat .ct-word .ct-av { background: #fff; color: #185ABD; }
.scene-chat .ct-tabs { flex: none; display: flex; align-items: stretch; height: 31px; padding: 0 8px; border-bottom: 1px solid #E1DFDD; background: #fff; font: 400 12px/1 var(--f); color: #424242; white-space: nowrap; }
.scene-chat .ct-tabs > span { display: flex; align-items: center; padding: 0 8px; }
.scene-chat .ct-tabs .on { font-weight: 600; color: #185ABD; box-shadow: inset 0 -2px 0 #185ABD; }
.scene-chat .ct-tabs .ct-cop { align-self: center; gap: 6px; height: 24px; margin-left: auto; padding: 0 9px; border-radius: 5px; background: #EBEBEB; font-weight: 500; color: #242424; }
.scene-chat .ct-cop img { width: 13px; height: 13px; }
.scene-chat .ct-wbody { display: grid; grid-template-columns: minmax(0, 1fr) 230px; }
.scene-chat .ct-canvas { position: relative; min-width: 0; overflow: hidden; padding: 12px 12px 0; background: #EEEFF1; }
.scene-chat .ct-page { min-height: 100%; padding: 16px 16px 10px; background: #fff; box-shadow: 0 0 0 1px #DCDEE2; }
.scene-chat .ct-pt { margin: 0 0 8px; font: 600 16px/1.2 var(--f); letter-spacing: -0.01em; color: #1F1F1F; }
.scene-chat .ct-ph { margin: 12px 0 8px; font: 600 12px/1.2 var(--f); color: #0F4761; }
.scene-chat .ct-pl { display: block; height: 6px; margin-bottom: 7px; border-radius: 3px; background: #E3E5E9; }
.scene-chat .ct-ins { display: grid; gap: 2px; justify-items: start; margin: 2px 0; padding: 8px 10px 9px; border-radius: 6px; background: #EEF3FE; box-shadow: inset 0 0 0 1px #D6E2FB; }
.scene-chat .ct-ins .ui-chip { margin-bottom: 4px; }
.scene-chat .ct-ins p { margin: 0; font: 400 11.5px/1.45 var(--f); color: #1C2B4F; }
.scene-chat .ct-pane { position: relative; z-index: 3; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; border-left: 1px solid #E1DFDD; }
.scene-chat .ct-phead { flex: none; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px 0 12px; border-bottom: 1px solid #EDEBE9; font: 600 13px/1 var(--f); color: #242424; white-space: nowrap; }
.scene-chat .ct-phead img { width: 14px; height: 14px; }
.scene-chat .ct-px { display: grid; margin-left: auto; color: #616161; }
.scene-chat .ct-px svg { width: 14px; height: 14px; }
.scene-chat .ct-pok { display: none; align-items: center; gap: 5px; margin-left: auto; font: 500 12px/1 var(--f); color: var(--accent-text); }
.scene-chat .ct-pok svg { width: 14px; height: 14px; }
.scene-chat .ct-word .ct-conv { padding: 2px 12px 8px; }
.scene-chat .ct-word .ct-hello { flex-direction: column; gap: 10px; padding: 0 18px; font: 600 13px/1.35 var(--f); letter-spacing: 0; color: #242424; }
.scene-chat .ct-word .ct-hello img { width: 22px; height: 22px; border-radius: 0; }
.scene-chat .ct-word .ct-me { max-width: 92%; padding: 7px 11px 8px; border-radius: 12px; background: #F0F0F0; font-size: 12.5px; color: #242424; }
.scene-chat .ct-card { display: grid; gap: 2px; justify-items: start; margin-top: 8px; padding: 8px 10px 10px; border: 1px solid #E1DFDD; border-radius: 10px; background: #fff; }
.scene-chat .ct-card .ct-l { font-size: 12.5px; line-height: 1.45; color: #242424; }
.scene-chat .ct-acts { display: flex; align-items: center; gap: 10px; margin-top: 7px; opacity: 0; transition: opacity .3s var(--ease) .55s; }
.scene-chat.s-answer .ct-acts { opacity: 1; }
.scene-chat .ct-go { height: 28px; padding: 0 12px; font-size: 12.5px; }
.scene-chat.s-press .ct-go { transform: scale(.94); }
.scene-chat.s-valid .ct-go { background: #1E3A9E; }
.scene-chat.s-valid .ct-go .lab { display: none; }
.scene-chat.s-valid .ct-go .ok { display: inline-flex; }
.scene-chat .ct-ghost { font: 500 12px/1 var(--f); color: #424242; }
.scene-chat .ct-word .ct-comp { margin: 0 10px 10px; padding: 4px 4px 4px 10px; border-color: #D1D1D1; border-radius: 10px; }
.scene-chat .ct-word .ct-in { font-size: 12.5px; }
.scene-chat .ct-word .ct-send { width: 28px; height: 28px; border-radius: 6px; background: none; color: #A0A0A0; }
.scene-chat .ct-word .ct-send svg { width: 16px; height: 16px; }
.scene-chat.s-typing .ct-word .ct-send { background: none; color: #185ABD; }

/* scène basse (moins de 412 px) : réponse de Claude resserrée, champ de Copilot replié après l'envoi */
@container (max-height: 385px) {
  .scene-chat .ct-at { display: none; }
  .scene-chat.ct-claude .ct-l { line-height: 1.34; }
  .scene-chat .ct-rme .ct-me { margin-top: 6px; }
  .scene-chat .ct-ai { padding-top: 9px; }
  .scene-chat.s-sent .ct-word .ct-comp { display: none; }
}
@container (max-width: 500px) {
  .scene-chat .ct-menu { display: block; }
  .scene-chat .ct-body, .scene-chat.ct-claude .ct-body { grid-template-columns: minmax(0, 1fr); }
  .scene-chat .ct-side { display: none; }
  .scene-chat .ct-conv { padding: 2px 12px 8px; }
  .scene-chat .ct-comp { margin: 0 10px 10px; }
  .scene-chat .ct-main .ui-toast { left: 10px; right: 10px; bottom: 10px; }
  .scene-chat .ct-me { max-width: 90%; }
  .scene-chat .ct-hello { font-size: 16px; }
  .scene-chat.ct-claude .ct-hello { font-size: 19px; }
  /* Claude : le titre de la réponse cède sa place, la pièce jointe reste visible */
  .scene-chat .ct-at { display: none; }
  .scene-chat.ct-claude .ct-l { line-height: 1.34; }
  .scene-chat .ct-rme .ct-me { margin-top: 6px; }
  .scene-chat .ct-ai { padding-top: 9px; }
  .scene-chat .ct-ttl { display: none; }
  /* Word : le panneau Copilot devient une feuille du bas, qui se replie une fois le résumé inséré */
  .scene-chat .ct-tabs .ct-tx { display: none; }
  .scene-chat .ct-word .ui-file { display: none; }
  .scene-chat .ct-wbody { grid-template-columns: minmax(0, 1fr); }
  .scene-chat .ct-canvas { padding: 10px 10px 0; }
  .scene-chat .ct-page { padding: 14px 14px 10px; }
  .scene-chat .ct-pane { position: absolute; left: 0; right: 0; bottom: 0; height: 84%; border-left: 0; border-top: 1px solid #D9D7D4; border-radius: 14px 14px 0 0; transition: transform .6s var(--spring); }
  .scene-chat.s-sent .ct-word .ct-comp { display: none; }
  .scene-chat.s-valid .ct-pane { transform: translateY(calc(100% - 38px)); }
  .scene-chat .ct-pok { display: inline-flex; opacity: 0; transition: opacity .3s var(--ease) .3s; }
  .scene-chat.s-valid .ct-pok { opacity: 1; }
  .scene-chat .ct-px { margin-left: 8px; }
}
@container (max-width: 380px) {
  .scene-chat .ct-tabs > span { padding: 0 6px; }
  .scene-chat .ct-chip { padding: 0 10px; }
}
/* très petits téléphones (scène de moins de 340 px, contenu sous 310 px) : la réponse prend toute la largeur */
@container (max-width: 310px) {
  .scene-chat .ct-aiav { display: none; }
  .scene-chat .ct-main .ui-toast .ui-spark { display: none; }
}

/* digest.css */
/* Gmail, lundi matin : l'agent lit les lettres de veille et envoie un résumé en trois points. */
.scene-digest { --prog: 1.4s; }

/* Barre de Gmail */
.scene-digest .vg-top { gap: 12px; height: 48px; }
.scene-digest .vg-menu { flex: none; width: 18px; height: 18px; color: #5F6368; }
.scene-digest .vg-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 17px; background: #EAF1FB; color: #5F6368; font: 400 12.5px/1 var(--f); white-space: nowrap; overflow: hidden; }
.scene-digest .vg-search svg { flex: none; width: 15px; height: 15px; }
.scene-digest .vg-me { background: #E3E7EE; }

/* Colonne de gauche */
.scene-digest .vg-body { display: grid; grid-template-columns: 176px minmax(0, 1fr); }
.scene-digest .vg-nav { display: flex; flex-direction: column; gap: 1px; padding: 10px 8px 10px 0; border-right: 1px solid #EEF0F3; }
.scene-digest .vg-compose { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 38px; margin: 0 0 10px 8px; padding: 0 12px 0 11px; border-radius: 14px; background: #C2E7FF; color: #001D35; font: 500 12px/1 var(--f); white-space: nowrap; }
.scene-digest .vg-compose svg { width: 15px; height: 15px; }
.scene-digest .vg-item { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px 0 12px; border-radius: 0 14px 14px 0; color: #202124; font: 400 11.5px/1 var(--f); white-space: nowrap; }
.scene-digest .vg-item span { overflow: hidden; text-overflow: ellipsis; }
.scene-digest .vg-item svg { width: 15px; height: 15px; flex: none; color: #444746; }
.scene-digest .vg-item.vg-on { background: #D3E3FD; color: #001D35; font-weight: 600; }
.scene-digest .vg-count { margin-left: auto; font-weight: 600; font-size: 11.5px; }
.scene-digest .vg-count .vg-c2, .scene-digest.s-new .vg-count .vg-c1 { display: none; }
.scene-digest.s-new .vg-count .vg-c2 { display: inline; }

/* Liste des mails, puis le mail ouvert, au même endroit */
.scene-digest .vg-main { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.scene-digest .ui-agent .t1, .scene-digest .ui-agent .t2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scene-digest .vg-stack { position: relative; flex: 1; min-height: 0; }
.scene-digest .vg-list { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity .2s var(--ease), visibility 0s linear .2s; }
.scene-digest.s-open .vg-list { opacity: 0; visibility: hidden; }
.scene-digest .vg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "from time" "subj subj"; align-items: center; column-gap: 10px; row-gap: 6px; padding: 10px 14px; border-bottom: 1px solid #EEF0F3; background: #fff; color: #202124; font: 400 12.5px/1.2 var(--f); transition: background-color .4s var(--ease); }
.scene-digest .vg-from { grid-area: from; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.scene-digest .vg-time { grid-area: time; color: #5F6368; font-size: 11.5px; text-align: right; white-space: nowrap; }
.scene-digest .vg-subj { grid-area: subj; min-width: 0; color: #5F6368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-digest .vg-subj b { color: #202124; font-weight: 400; }
.scene-digest .vg-unread .vg-from, .scene-digest .vg-unread .vg-subj b { font-weight: 700; }
.scene-digest .vg-unread .vg-time { color: #202124; font-weight: 700; }
/* L'agent lit chaque lettre : bleu pâle, puis la ligne passe en « lu » */
.scene-digest .vg-feed.vg-read { background: #EEF3FE; }
.scene-digest .vg-feed.vg-read .vg-from, .scene-digest .vg-feed.vg-read .vg-subj b, .scene-digest .vg-feed.vg-read .vg-time { font-weight: 400; }
.scene-digest.s-agentdone .vg-feed.vg-read { background: #F6F8FB; }
/* Le mail de l'agent arrive en tête */
.scene-digest .vg-fold { flex: none; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--spring); }
.scene-digest .vg-in { min-height: 0; overflow: hidden; }
.scene-digest.s-new .vg-new { grid-template-rows: 1fr; }
.scene-digest .vg-new .vg-row { background: #F5F8FF; }
.scene-digest .vg-new .vg-row.vg-press { background: #E3EBFE; }

/* Le mail ouvert : trois titres, leur source et un lien */
.scene-digest .vg-mail { position: absolute; inset: 0; padding: 8px 16px 0; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease) .12s, transform .55s var(--spring) .12s; }
.scene-digest.s-open .vg-mail { opacity: 1; transform: none; }
.scene-digest .vg-mhead { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.scene-digest .vg-mhead b { min-width: 0; color: #202124; font: 500 15.5px/1.2 var(--f); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-digest .vg-sender { display: flex; align-items: center; gap: 8px; height: 30px; margin-top: 2px; color: #5F6368; font: 400 12px/1 var(--f); white-space: nowrap; }
.scene-digest .vg-av { width: 26px; height: 26px; border-radius: 50%; }
.scene-digest .vg-av svg { width: 15px; height: 15px; }
.scene-digest .vg-sender b { color: #202124; font: 600 13px/1 var(--f); }
.scene-digest .vg-sender .vg-time { margin-left: auto; }
.scene-digest .vg-items { list-style: none; margin: 4px 0 0; padding: 0; }
.scene-digest .vg-it { display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-template-areas: "k title" "k meta"; align-items: center; column-gap: 10px; row-gap: 4px; padding: 6px 0; border-top: 1px solid #EEF0F3; }
.scene-digest .vg-k { grid-area: k; align-self: start; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #EEF0F3; color: #3C4043; font: 600 11.5px/1 var(--f); }
.scene-digest .vg-it b { grid-area: title; min-width: 0; color: #202124; font: 600 13px/1.3 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-digest .vg-meta { grid-area: meta; display: flex; align-items: center; gap: 10px; min-width: 0; }
.scene-digest .vg-meta .ui-chip { height: 18px; padding: 0 6px; }
.scene-digest .vg-link { display: inline-flex; align-items: center; gap: 4px; color: #2649DE; font: 500 12px/1 var(--f); white-space: nowrap; }
.scene-digest .vg-link svg { width: 13px; height: 13px; }
@keyframes vg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .scene-digest.s-open .vg-it { animation: vg-in .45s var(--spring) both; animation-delay: calc(.12s + var(--i) * 110ms); }
}
.scene-digest .ui-toast { bottom: 24px; }

/* Les requêtes mesurent la boîte de contenu de la scène (sans ses 14 px de marge) : 412 px de haut en bureau. */
@container (max-height: 404px) {
  .scene-digest .vg-top { height: 44px; }
  .scene-digest .vg-row { padding: 9px 14px; row-gap: 5px; }
  .scene-digest .ui-toast { bottom: 14px; }
}
@container (max-width: 500px) {
  .scene-digest .vg-top { height: 40px; }
  .scene-digest .vg-sender { display: none; }
  .scene-digest .vg-items { margin-top: 6px; }
  .scene-digest .vg-body { grid-template-columns: minmax(0, 1fr); }
  .scene-digest .vg-nav, .scene-digest .vg-search span { display: none; }
  .scene-digest .vg-search { flex: 0 0 34px; padding: 0; justify-content: center; margin-left: auto; }
  .scene-digest .vg-row { padding: 9px 12px; }
  .scene-digest .vg-mail { padding: 8px 12px 0; }
  .scene-digest .vg-mhead b { font-size: 15px; }
  .scene-digest .vg-it b { font-size: 12.5px; }
}
@container (max-width: 300px) {
  .scene-digest .vg-more, .scene-digest .vg-long, .scene-digest .vg-mhead .ui-chip { display: none; }
}
/* En dernier : sur un écran bas et étroit (961 à 1024 px), ces réglages l'emportent */
@container (max-height: 380px) {
  .scene-digest .vg-sender { display: none; }
  .scene-digest .vg-mail { padding-top: 6px; }
  .scene-digest .vg-items { margin-top: 4px; }
  .scene-digest .vg-it { padding: 5px 0; }
  .scene-digest .ui-toast { bottom: 8px; }
}

/* dock.css */
/* Formation IA dans ChatGPT : avant, une demande vague et une réponse générique ; après, le modèle de demande appris en formation.
   ChatGPT garde son noir et blanc ; le bleu de la marque va à ce qu'apporte la formation (bouton et modèle de demande).
   En bas, un dock d'applications réelles. États : s-vague, s-gen, s-bad, s-cursor, s-press, s-tpl, s-answer, s-done.
   Classes dk- uniquement : les anciennes classes globales (.dock, .app, .ico, .win, .lbl, .bub-me, .bub-ai) restent dans site.css.
   Repliée (0fr), une ligne garde la hauteur de son padding : les écarts passent par des marges. */
.scene-dock.ui-stage { background: var(--stage); }
.scene-dock .dk-top { gap: 8px; height: 40px; }
.scene-dock .dk-chev { flex: none; width: 15px; height: 15px; margin-left: -4px; color: #8F8F8F; }
.scene-dock .dk-av { margin-left: auto; width: 26px; height: 26px; }
.scene-dock .dk-body { display: flex; flex-direction: column; }

/* Conversation : elle part du bas et remonte quand un message arrive */
.scene-dock .dk-conv { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 2px 20px 6px; overflow: hidden; }
.scene-dock .dk-row { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--spring), opacity .3s var(--ease); }
.scene-dock .dk-row > * { min-height: 0; overflow: hidden; }
.scene-dock.s-vague .dk-r1, .scene-dock.s-gen .dk-r2, .scene-dock.s-tpl .dk-r3, .scene-dock.s-answer .dk-r4 { grid-template-rows: 1fr; opacity: 1; }
.scene-dock .dk-r1 > div, .scene-dock .dk-r3 > div { display: flex; justify-content: flex-end; }
.scene-dock .dk-me { margin: 8px 0 0; padding: 7px 13px 8px; border-radius: 18px; background: #F4F4F4; font: 400 13px/1.42 var(--f); color: #0D0D0D; }
.scene-dock .dk-ai { display: flex; align-items: flex-start; gap: 10px; padding-top: 7px; }
.scene-dock .dk-aiav { flex: none; display: block; width: 24px; height: 24px; border-radius: 50%; }

/* Avant : réponse générique, barrée d'une pastille « Trop vague » */
.scene-dock .dk-txt { margin: 0; padding-top: 2px; font: 400 13px/1.5 var(--f); color: #0D0D0D; }
.scene-dock .dk-g { transition: color .35s var(--ease), text-decoration-color .35s var(--ease); text-decoration: line-through; text-decoration-color: transparent; }
.scene-dock.s-bad .dk-g { color: #6B6B6B; text-decoration-color: #A8A8A8; }
.scene-dock .dk-bad { display: inline-flex; align-items: center; height: 20px; margin-left: 2px; padding: 0 7px; border-radius: 5px; background: #FCE8E6; font: 600 11.5px/1 var(--f); color: #B42318; vertical-align: 1px; opacity: 0; transform: scale(.7); transition: opacity .3s var(--ease), transform .45s var(--spring-pop); }
.scene-dock.s-bad .dk-bad { opacity: 1; transform: none; }

/* Après : le modèle de demande (contexte, objectif, ton) et la réponse précise */
.scene-dock .dk-tpl { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 12px; row-gap: 0; max-width: 92%; margin-top: 7px; padding: 7px 13px 8px 12px; border-radius: 14px; background: #EEF3FE; box-shadow: inset 0 0 0 1px #D6E2FB; }
.scene-dock .dk-f { display: contents; }
.scene-dock .dk-f > * { opacity: 0; transform: translateY(3px); transition: opacity .3s var(--ease), transform .45s var(--spring); transition-delay: calc(.2s + var(--k, 0) * .15s); }
.scene-dock.s-tpl .dk-f > * { opacity: 1; transform: none; }
.scene-dock .dk-f b { font: 600 12.5px/1.42 var(--f); color: #1E3A9E; }
.scene-dock .dk-f span { min-width: 0; font: 400 12.5px/1.42 var(--f); color: #0D0D0D; }
.scene-dock .dk-ans { min-width: 0; display: grid; padding-top: 2px; }
.scene-dock .dk-l { margin: 0; font: 400 13px/1.5 var(--f); color: #0D0D0D; text-wrap: pretty; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .45s var(--spring); transition-delay: calc(.12s + var(--k, 0) * .17s); }
.scene-dock.s-answer .dk-l { opacity: 1; transform: none; }

/* Champ de saisie, avec le bouton du modèle de demande */
.scene-dock .dk-comp { flex: none; display: flex; align-items: center; gap: 6px; margin: 0 16px 10px; padding: 5px; border: 1px solid #E3E3E3; border-radius: 22px; background: #fff; }
.scene-dock .dk-plus { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: #0D0D0D; }
.scene-dock .dk-plus svg { width: 18px; height: 18px; }
.scene-dock .dk-phd { flex: 1; min-width: 0; font: 400 13px/1 var(--f); color: #5F6672; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-dock .dk-tbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 14px; background: #E3EBFE; font: 500 12px/1 var(--f); color: #2649DE; white-space: nowrap; transition: transform .15s ease, background-color .25s var(--ease), color .25s var(--ease); }
.scene-dock .dk-tbtn svg { width: 14px; height: 14px; }
.scene-dock.s-press .dk-tbtn { transform: scale(.94); }
.scene-dock.s-tpl .dk-tbtn { background: var(--accent-btn); color: #fff; }
.scene-dock .dk-i2, .scene-dock.s-tpl .dk-i1 { display: none; }
.scene-dock.s-tpl .dk-i2 { display: block; }
.scene-dock .dk-send { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #D7D7D7; color: #fff; }
.scene-dock .dk-send svg { width: 17px; height: 17px; }
.scene-dock .ui-cursor { left: 60%; }

/* Dock d'applications réelles : les outils couverts par la formation */
.scene-dock .dk-dock { flex: none; align-self: center; display: flex; gap: 6px; padding: 4px 10px 3px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line); }
.scene-dock .dk-app { position: relative; display: grid; justify-items: center; gap: 5px; width: 54px; }
.scene-dock .dk-ico { display: block; width: 30px; height: 30px; border-radius: 8px; }
.scene-dock .dk-tile { display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px #E1E4E9; }
.scene-dock .dk-tile img { display: block; width: 20px; height: 20px; }
.scene-dock .dk-app b { font: 500 11px/1.1 var(--f); color: #3C4043; white-space: nowrap; }
.scene-dock .dk-app.on::after { content: ""; position: absolute; left: 50%; top: 31.5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #3C4043; }

/* scène basse (moins de 412 px) : la demande vague défile hors de la fenêtre quand le modèle arrive */
@container (max-height: 385px) {
  .scene-dock.s-tpl .dk-r1 { grid-template-rows: 0fr; opacity: 0; }
}
@container (max-width: 500px) {
  .scene-dock .dk-conv { padding: 2px 12px 6px; }
  .scene-dock .dk-comp { margin: 0 10px 8px; }
  .scene-dock .dk-phd { visibility: hidden; }
  /* la conversation défile : la demande vague, puis la réponse générique, laissent leur place */
  .scene-dock.s-tpl .dk-r1 { grid-template-rows: 0fr; opacity: 0; }
  .scene-dock .dk-tpl { max-width: 100%; }
  .scene-dock.s-answer .dk-r2 { grid-template-rows: 0fr; opacity: 0; }
  .scene-dock .dk-dock { gap: 2px; padding: 5px 8px 4px; }
  .scene-dock .dk-app { width: 52px; gap: 5px; }
  .scene-dock .dk-ico { width: 28px; height: 28px; border-radius: 7px; }
  .scene-dock .dk-tile img { width: 19px; height: 19px; }
  .scene-dock .dk-app.on::after { top: 30px; }
}
/* très petits téléphones (scène de moins de 340 px, contenu sous 310 px) : la réponse prend toute la largeur et se limite à sa première phrase */
@container (max-width: 310px) {
  .scene-dock .dk-aiav { display: none; }
  .scene-dock .dk-app { width: 46px; }
  .scene-dock .dk-l + .dk-l { display: none; }
}

/* flow.css */
/* n8n : l'éditeur de workflow. Canevas gris uni, nœuds blancs à bord gris avec le logo de l'outil, reliés par des traits.
   Les nœuds s'exécutent l'un après l'autre (petite coche verte n8n), le trait pointillé devient plein, le nœud « Validation »
   attend une personne (anneau bleu, bulle de validation), puis le dernier nœud s'exécute.
   États : .nf-run (en cours), .nf-ok (exécuté), .nf-wait (attend la personne) sur .nf-node ; .nf-on sur .nf-edge. */
.scene-flow .ui-agent .t1, .scene-flow .ui-agent .t2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scene-flow .nf { --nd: 64px; --nf-line: #C3C8D0; --nf-done: #5F6672; }
.scene-flow .nf-top { gap: 10px; }
.scene-flow .nf-sep { flex: none; font: 400 16px/1 var(--f); color: #C4C7CC; }
.scene-flow .nf-top .ui-file { min-width: 0; }
.scene-flow .nf-tabs { flex: none; display: flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: 8px; background: #F1F2F4; font: 500 12px/1 var(--f); color: #5F6672; white-space: nowrap; }
.scene-flow .nf-tabs > * { padding: 6px 9px; border-radius: 6px; }
.scene-flow .nf-tabs b { font-weight: 500; color: #1F2328; background: #fff; box-shadow: 0 0 0 1px #DADEE4; }
.scene-flow .nf-act { flex: none; display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; font: 500 12.5px/1 var(--f); color: #3C4043; white-space: nowrap; }
.scene-flow .nf-sw { position: relative; width: 30px; height: 18px; border-radius: 9px; background: #1F2328; }
.scene-flow .nf-sw::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }

/* Canevas uni et rangée de nœuds */
.scene-flow .nf-body { display: flex; flex-direction: column; }
.scene-flow .nf-canvas { position: relative; flex: 1; min-height: 0; background: #F3F4F6; }
.scene-flow .nf-row { position: absolute; left: 14px; right: 14px; top: 42%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.scene-flow .nf-col { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; }

/* Nœud : carré blanc à bord gris, déclencheur arrondi à gauche, poignées d'entrée et de sortie */
.scene-flow .nf-node { position: relative; display: grid; place-items: center; width: var(--nd); height: var(--nd); border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 2px var(--nf-line); outline: 2px solid transparent; outline-offset: 3px; transition: box-shadow .2s var(--ease), outline-color .25s var(--ease); }
.scene-flow .nf-node.nf-trig { border-radius: calc(var(--nd) * .4) 8px 8px calc(var(--nd) * .4); }
.scene-flow .nf-node:not(.nf-trig)::before { content: ""; position: absolute; left: -3px; top: 50%; width: 4px; height: 13px; margin-top: -6.5px; border-radius: 2px; background: var(--nf-line); }
.scene-flow .nf-node:not(.nf-end)::after { content: ""; position: absolute; right: -5px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--nf-line); }
.scene-flow .nf-node img { display: block; width: 46%; height: auto; }
.scene-flow .nf-node.nf-ai img { width: 50%; border-radius: 22%; }
.scene-flow .nf-gl { width: 50%; height: 50%; color: #5F6672; }
.scene-flow .nf-av { width: 58%; height: 58%; font-size: 12px; }
.scene-flow .nf-node.nf-run { box-shadow: inset 0 0 0 2px var(--nf-done); }
.scene-flow .nf-node.nf-ai.nf-run, .scene-flow .nf-node.nf-wait { outline-color: var(--accent-btn); }

/* Coche d'exécution : verte n8n, petite, dans le coin */
.scene-flow .nf-ck { position: absolute; right: 4px; bottom: 4px; width: 15px; height: 15px; color: #29A365; opacity: 0; transform: scale(.4); transition: opacity .2s var(--ease), transform .4s var(--spring-pop); }
.scene-flow .nf-node.nf-ok .nf-ck { opacity: 1; transform: none; }

/* Nom du nœud */
.scene-flow .nf-lbl { max-width: calc(100% - 6px); font: 600 13px/1.25 var(--f); color: #2D3139; text-align: center; text-wrap: balance; transition: color .25s var(--ease); }
.scene-flow .nf-col:has(.nf-wait) .nf-lbl { color: var(--accent-text); }

/* Trait : pointillé gris, puis plein quand l'exécution passe ; pointe de flèche au bout */
.scene-flow .nf-edge { position: absolute; top: calc(var(--nd) / 2 - 1px); left: calc(50% + var(--nd) / 2 + 6px); width: calc(100% - var(--nd) - 13px); height: 0; border-top: 2px dashed var(--nf-line); }
.scene-flow .nf-edge i { position: absolute; left: 0; right: 2px; top: -2px; height: 2px; background: var(--nf-done); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s linear; }
.scene-flow .nf-edge::after { content: ""; position: absolute; right: -2px; top: -6px; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var(--nf-line); transition: border-color .1s linear .26s; }
.scene-flow .nf-edge.nf-on i { transform: scaleX(1); }
.scene-flow .nf-edge.nf-on::after { border-left-color: var(--nf-done); }

/* Éclair du déclencheur, bouton « + » en haut à droite et commandes de zoom en bas à gauche, comme dans n8n */
.scene-flow .nf-bolt { position: absolute; top: calc(var(--nd) / 2 - 7px); left: calc(50% - var(--nd) / 2 - 19px); width: 14px; height: 14px; color: #A3A9B4; }
.scene-flow .nf-add { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #D5DAE1; color: #5F6672; }
.scene-flow .nf-add svg { width: 17px; height: 17px; }
.scene-flow .nf-zoom { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }
.scene-flow .nf-zoom i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #D5DAE1; color: #5F6672; }
.scene-flow .nf-zoom svg { width: 14px; height: 14px; }
/* Bulle de validation sous le nœud « Validation » (à droite), les commandes de zoom restent libres à gauche */
.scene-flow .ui-toast { left: auto; right: 28px; bottom: 28px; transform: translateY(10px); }
.scene-flow.s-toast .ui-toast { transform: none; }

@container (max-width: 540px) {
  .scene-flow .nf-tabs { display: none; }
  .scene-flow .nf-act { margin-left: auto; }
}
@container (max-width: 500px) {
  .scene-flow .nf { --nd: 42px; }
  .scene-flow .nf-zoom, .scene-flow .nf-bolt { display: none; }
  .scene-flow .nf-add { top: 10px; right: 10px; width: 28px; height: 28px; }
  .scene-flow .nf-add svg { width: 15px; height: 15px; }
  .scene-flow .nf-top .ui-name, .scene-flow .nf-sep { display: none; }
  .scene-flow .nf-row { left: 4px; right: 4px; top: 42%; }
  .scene-flow .nf-col { gap: 7px; }
  .scene-flow .nf-lbl { font-size: 11.5px; line-height: 1.2; max-width: calc(100% + 6px); }
  .scene-flow .nf-ck { right: 2px; bottom: 2px; width: 12px; height: 12px; }
  .scene-flow .nf-av { font-size: 11px; width: 62%; height: 62%; }
  .scene-flow .nf-node:not(.nf-trig)::before { height: 10px; margin-top: -5px; }
  .scene-flow .nf-node:not(.nf-end)::after { width: 7px; height: 7px; margin-top: -3.5px; right: -4px; }
  .scene-flow .nf-edge { left: calc(50% + var(--nd) / 2 + 4px); width: calc(100% - var(--nd) - 9px); }
  .scene-flow .ui-toast { left: 50%; right: auto; bottom: 18px; transform: translate(-50%, 10px); }
  .scene-flow.s-toast .ui-toast { transform: translate(-50%, 0); }
}
/* Très étroit : nœuds un peu plus petits, libellés serrés pour qu'ils ne se touchent pas */
@container (max-width: 320px) {
  .scene-flow .nf { --nd: 38px; }
  .scene-flow .nf-row { left: 2px; right: 2px; }
  .scene-flow .nf-lbl { font-size: 11px; letter-spacing: -0.012em; }
}

/* local.css */
/* Assistant interne sur le serveur de l'entreprise (modèle Mistral) : question, réponse sourcée ; les documents restent sur le serveur, le service en ligne n'est pas utilisé.
   États : s-type, s-ask, s-agent, s-answer, s-src, s-agentdone, s-cloud, s-done ; documents .rd (lus) et .src (source). */
.scene-local .lc-row { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; gap: 10px; }
.scene-local .lc-row > .ui-win { flex: 1; min-width: 0; }
.scene-local .lc-top { gap: 10px; }
.scene-local .lc-top .ui-logo { height: 19px; }
.scene-local .lc-top .ui-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scene-local .lc-here { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 7px; background: #F1F3F5; color: var(--ui-ink); font: 500 12px/1 var(--f); white-space: nowrap; }
.scene-local .lc-here svg { width: 14px; height: 14px; color: #5F6672; }
.scene-local .ui-agent { --prog: 1.85s; }

/* Conversation */
.scene-local .lc-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 12px; }
.scene-local .lc-q { display: flex; justify-content: flex-end; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .5s var(--spring); }
.scene-local.s-ask .lc-q { opacity: 1; transform: none; }
.scene-local .lc-qb { max-width: 92%; text-wrap: balance; padding: 9px 12px; border-radius: 12px 12px 4px 12px; background: #F0F2F5; color: var(--ui-ink); font: 400 13px/1.35 var(--f); }
.scene-local .lc-a { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .5s var(--spring); }
.scene-local.s-answer .lc-a { opacity: 1; transform: none; }
.scene-local .lc-who { display: flex; align-items: center; gap: 7px; font: 600 12.5px/1 var(--f); color: var(--ui-ink); }
.scene-local .lc-who img { display: block; width: auto; height: 14px; }
.scene-local .lc-txt { margin: 0; text-wrap: pretty; color: var(--ui-ink); font: 400 13.5px/1.45 var(--f); }
.scene-local .lc-txt.busy::after { content: ""; display: inline-block; width: 1.5px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--ui-ink); }
.scene-local .lc-src { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 8px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px #D9DEE6; color: var(--ui-ink); font: 500 12px/1 var(--f); white-space: nowrap; opacity: 0; transform: scale(.85); transform-origin: 0 50%; transition: opacity .25s var(--ease), transform .45s var(--spring-pop); }
.scene-local .lc-src img { display: block; width: auto; height: 16px; }
.scene-local.s-src .lc-src { opacity: 1; transform: none; }
.scene-local .lc-input { flex: none; margin-top: auto; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 5px 0 12px; border-radius: 10px; box-shadow: 0 0 0 1px #D9DEE6; color: #5F6672; font: 400 12.5px/1 var(--f); white-space: nowrap; overflow: hidden; }
.scene-local .lc-in { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scene-local.s-type .lc-in { color: var(--ui-ink); }
.scene-local.s-ask .lc-in { color: #5F6672; }
.scene-local .lc-send { flex: none; margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #E8EAED; color: #5F6672; }
.scene-local .lc-send svg { width: 14px; height: 14px; }

/* Le serveur de l'entreprise : le modèle et les documents ; le service en ligne, barré */
.scene-local .lc-side { flex: none; width: 168px; display: flex; flex-direction: column; gap: 10px; }
.scene-local .lc-srv { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line); }
.scene-local .lc-sh { display: flex; align-items: center; gap: 8px; padding: 0 2px; color: var(--ui-ink); font: 600 13px/1 var(--f); white-space: nowrap; }
.scene-local .lc-sh svg { flex: none; width: 17px; height: 17px; color: #3C4043; }
.scene-local .lc-docs { display: flex; flex-direction: column; gap: 5px; }
.scene-local .lc-lab { margin: 6px 0 0 2px; color: var(--ui-mute); font: 500 11.5px/1 var(--f); }
.scene-local .lc-doc { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 7px; background: #F4F6F9; color: var(--ui-ink); font: 400 12px/1 var(--f); white-space: nowrap; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.scene-local .lc-doc img { flex: none; display: block; width: auto; height: 16px; }
.scene-local .lc-model img { height: 13px; }
.scene-local .lc-dn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scene-local .lc-model .lc-dn { font-weight: 600; }
.scene-local .lc-doc.rd { background: #EEF3FE; box-shadow: inset 0 0 0 1px #C9D7FB; }
.scene-local.s-agentdone .lc-doc.rd { background: #F4F6F9; box-shadow: none; }
.scene-local.s-agentdone .lc-doc.src { background: #EEF3FE; box-shadow: inset 0 0 0 1px #C9D7FB; }
.scene-local .lc-cloud { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line); }
.scene-local .lc-cl { position: relative; flex: none; width: 34px; height: 26px; color: #C4C9D2; }
.scene-local .lc-cl svg { display: block; width: 34px; height: 26px; }
.scene-local .lc-cl i { position: absolute; left: -3px; right: -3px; top: 12px; height: 2px; border-radius: 1px; background: #5F6672; box-shadow: 0 0 0 2px #fff; transform: rotate(-30deg) scaleX(0); transition: transform .45s var(--ease); }
.scene-local.s-cloud .lc-cl i { transform: rotate(-30deg) scaleX(1); }
.scene-local .lc-ct { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.scene-local .lc-ct b { color: var(--ui-mute); font: 500 12.5px/1.2 var(--f); }
.scene-local .lc-no { opacity: 0; transform: scale(.85); transform-origin: 0 50%; transition: opacity .25s var(--ease), transform .45s var(--spring-pop); }
.scene-local.s-cloud .lc-no { opacity: 1; transform: none; }

@container (max-width: 500px) {
  .scene-local .lc-row { flex-direction: column; gap: 8px; }
  .scene-local .lc-side { width: auto; flex-direction: row; gap: 8px; }
  .scene-local .lc-srv { flex: 1; min-width: 0; gap: 6px; padding: 8px 10px; }
  .scene-local .lc-sh { font-size: 12.5px; }
  .scene-local .lc-docs { flex-direction: row; gap: 5px; }
  .scene-local .lc-lab { display: none; }
  .scene-local .lc-srv { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "h h" "m d"; column-gap: 5px; }
  .scene-local .lc-sh { grid-area: h; }
  .scene-local .lc-model { grid-area: m; }
  .scene-local .lc-docs { grid-area: d; }
  .scene-local .lc-doc { justify-content: center; width: 28px; height: 23px; padding: 0; }
  .scene-local .lc-doc img { height: 14px; }
  .scene-local .lc-model img { height: 11px; }
  .scene-local .lc-dn { display: none; }
  .scene-local .lc-cloud { gap: 9px; padding: 8px 10px; }
  .scene-local .lc-cl, .scene-local .lc-cl svg { width: 30px; height: 23px; }
  .scene-local .lc-cl i { top: 10.5px; }
  .scene-local .lc-ct b { font-size: 12px; }
  .scene-local .lc-body { gap: 8px; padding: 9px 12px 8px; }
  .scene-local .lc-a { gap: 6px; }
  .scene-local .lc-input { display: none; }
  .scene-local .lc-txt { font-size: 13px; }
  .scene-local .lc-qb { max-width: 72%; }
}
@container (max-width: 380px) {
  .scene-local .lc-here { padding: 0 8px; }
  .scene-local .lc-here svg { display: none; }
}

/* mail.css */
/* Gmail : boîte de réception réaliste ; l'agent pose les libellés et prépare les réponses. */
.scene-mail .gm-top { gap: 12px; height: 50px; }
.scene-mail .gm-menu { width: 18px; height: 18px; color: #5F6368; flex: none; }
.scene-mail .gm-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 17px; background: #EAF1FB; color: #5F6368; font: 400 12.5px/1 var(--f); white-space: nowrap; overflow: hidden; }
.scene-mail .gm-search svg { width: 15px; height: 15px; flex: none; }
.scene-mail .gm-me { background: #1E8E3E; color: #fff; }
.scene-mail .gm-body { display: grid; grid-template-columns: 168px minmax(0, 1fr); }
.scene-mail .gm-nav { display: flex; flex-direction: column; gap: 1px; padding: 10px 8px 10px 0; border-right: 1px solid #EEF0F3; }
.scene-mail .gm-compose { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 38px; margin: 0 0 10px 8px; padding: 0 12px 0 11px; border-radius: 14px; background: #C2E7FF; color: #001D35; font: 500 12px/1 var(--f); white-space: nowrap; }
.scene-mail .gm-compose svg { width: 15px; height: 15px; }
.scene-mail .gm-item { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px 0 14px; border-radius: 0 14px 14px 0; color: #202124; font: 400 12px/1 var(--f); white-space: nowrap; }
.scene-mail .gm-item span { overflow: hidden; text-overflow: ellipsis; }
.scene-mail .gm-item svg { width: 15px; height: 15px; flex: none; color: #444746; }
.scene-mail .gm-item b { margin-left: auto; font-weight: 600; font-size: 11.5px; }
.scene-mail .gm-item.on { background: #D3E3FD; font-weight: 600; color: #001D35; }
.scene-mail .gm-sec { margin: 10px 0 3px 16px; font: 500 11.5px/1 var(--f); color: #444746; }
.scene-mail .gm-lab i { flex: none; width: 9px; height: 9px; margin: 0 3px; border-radius: 2px; background: #9AA0A6; }
.scene-mail .gm-lab b { opacity: 0; transform: scale(.6); transition: opacity .3s var(--ease), transform .45s var(--spring-pop); }
.scene-mail.s-counts .gm-lab b { opacity: 1; transform: none; }
.scene-mail .gm-main { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.scene-mail .gm-row { flex: none; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "star from time" "star subj subj"; align-items: center; column-gap: 10px; row-gap: 6px; padding: 10px 14px 10px 12px; border-bottom: 1px solid #EEF0F3; background: #fff; color: #202124; font: 400 12.5px/1.2 var(--f); transition: background-color .4s var(--ease); }
.scene-mail .gm-star { grid-area: star; align-self: start; width: 15px; height: 15px; color: #C4C7CC; }
.scene-mail .gm-from { grid-area: from; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-mail .gm-subj { grid-area: subj; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.scene-mail .gm-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #5F6368; }
.scene-mail .gm-txt b { color: #202124; font-weight: 700; }
.scene-mail .gm-time { grid-area: time; text-align: right; font-weight: 700; font-size: 11.5px; }
.scene-mail .gm-l, .scene-mail .gm-r { display: none; }
.scene-mail .gm-row.on { background: #F5F8FF; }
.scene-mail .gm-row.on .gm-l { display: inline-flex; animation: ui-pop .4s var(--spring-pop) both; }
.scene-mail .gm-row.rd .gm-r { display: inline-flex; animation: ui-pop .4s var(--spring-pop) both; }
.scene-mail.s-agentdone .gm-row { background: #fff; }
/* La validation se pose en barre d'action au bas de la fenêtre : aucun mail à moitié caché ne dépasse sur ses côtés */
.scene-mail .ui-toast { left: 14px; right: 14px; bottom: 14px; padding: 9px 10px 9px 14px; border-radius: 0 0 12px 12px; box-shadow: 0 -1px 0 #E3E7ED; transform: translateY(8px); }
.scene-mail.s-toast .ui-toast { transform: none; }
.scene-mail .ui-toast .ui-btn { margin-left: auto; }

@container (max-width: 500px) {
  .scene-mail .gm-body { grid-template-columns: minmax(0, 1fr); }
  .scene-mail .gm-nav { display: none; }
  .scene-mail .gm-search span { display: none; }
  .scene-mail .gm-search { flex: 0 0 34px; padding: 0; justify-content: center; margin-left: auto; }
  .scene-mail .gm-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "from time" "subj subj"; padding: 9px 12px; }
  .scene-mail .gm-star { display: none; }
  .scene-mail .gm-snip { display: none; }
}

/* meeting.css */
/* Teams puis Word. Teams (thème clair) : réunion terminée, enregistrement et transcription, lignes qui défilent.
   Puis la fenêtre Word passe devant (le bandeau de Teams reste visible derrière) : l'agent rédige le compte rendu,
   décisions puis actions avec le responsable et l'échéance ; une personne l'envoie à l'équipe.
   États : s-word (Word au premier plan) sur la scène ; .mt-on sur les lignes de transcription et les blocs du document. */
.scene-meeting .ui-agent .t1, .scene-meeting .ui-agent .t2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scene-meeting .mt-short { display: none; }
.scene-meeting .mt-desk { position: relative; flex: 1; min-height: 0; }
.scene-meeting .mt-teams { position: absolute; inset: 0; }
.scene-meeting .mt-word { position: absolute; z-index: 3; top: 34px; left: 12px; right: 12px; bottom: 0; --prog: 1.3s; transform: translateY(calc(100% + 60px)); transition: transform .6s var(--ease); }   /* la fenêtre Word monte du bas de la scène, sans fondu */
.scene-meeting.s-word .mt-word { transform: none; }

/* Teams : barre de titre, carte d'enregistrement, onglets, transcription */
.scene-meeting .mt-ttop, .scene-meeting .mt-wtop { gap: 10px; }
.scene-meeting .mt-ttop .ui-file, .scene-meeting .mt-wtop .ui-file { min-width: 0; }
.scene-meeting .mt-end { margin-left: auto; }
.scene-meeting .mt-tbody { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: #F5F5F5; }
.scene-meeting .mt-rec { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #E1E4E9; }
.scene-meeting .mt-thumb { position: relative; flex: none; display: grid; place-items: center; width: 76px; height: 44px; border-radius: 6px; background: #3A3D46; color: #fff; }
.scene-meeting .mt-thumb svg { width: 17px; height: 17px; }
.scene-meeting .mt-thumb small { position: absolute; right: 4px; bottom: 3px; font: 500 11px/1 var(--f); }
.scene-meeting .mt-rect { display: grid; gap: 4px; min-width: 0; }
.scene-meeting .mt-rect b { font: 600 13px/1.2 var(--f); color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-meeting .mt-rect small { font: 400 12px/1.2 var(--f); color: var(--ui-mute); white-space: nowrap; }
.scene-meeting .mt-ppl { flex: none; display: flex; margin-left: auto; padding-left: 6px; }
.scene-meeting .mt-ppl .ui-av { width: 26px; height: 26px; margin-left: -2px; outline: 2px solid #fff; }
.scene-meeting .mt-tabs { flex: none; display: flex; gap: 18px; padding: 2px 2px 0; border-bottom: 1px solid #E1E4E9; font: 500 12.5px/1 var(--f); color: var(--ui-mute); }
.scene-meeting .mt-tabs > * { padding-bottom: 8px; }
.scene-meeting .mt-tabs b { font-weight: 600; color: var(--ui-ink); box-shadow: inset 0 -2px 0 #5B5FC7; }
.scene-meeting .mt-tr { display: grid; gap: 9px; padding: 0 2px; }
.scene-meeting .mt-ln { display: flex; align-items: flex-start; gap: 10px; min-width: 0; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .5s var(--spring); }
.scene-meeting .mt-ln.mt-on { opacity: 1; transform: none; }
.scene-meeting .mt-ln .ui-av { width: 26px; height: 26px; }
.scene-meeting .mt-lt { display: grid; gap: 2px; min-width: 0; }
.scene-meeting .mt-lh { font: 600 12.5px/1.2 var(--f); color: var(--ui-ink); white-space: nowrap; }
.scene-meeting .mt-lh small { margin-left: 8px; font: 400 11.5px/1 var(--f); color: var(--ui-mute); }
.scene-meeting .mt-lx { font: 400 13px/1.3 var(--f); color: #2D3139; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Word : barre de l'agent, puis la page du compte rendu */
.scene-meeting .mt-wbody { display: flex; flex-direction: column; }
.scene-meeting .mt-page { flex: 1; min-height: 0; overflow: hidden; padding: 12px 22px 0; }
.scene-meeting .mt-blk { opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .45s var(--spring); }
.scene-meeting .mt-blk.mt-on { opacity: 1; transform: none; }
.scene-meeting .mt-h { margin: 0; font: 600 19px/1.15 var(--f); letter-spacing: -0.015em; color: var(--ui-ink); }
.scene-meeting .mt-meta { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font: 400 12.5px/1.2 var(--f); color: var(--ui-mute); white-space: nowrap; }
.scene-meeting .mt-meta img { flex: none; width: 15px; height: 15px; }
.scene-meeting .mt-sec { margin: 8px 0 1px; font: 600 13.5px/1.3 var(--f); color: var(--ui-ink); }
.scene-meeting .mt-dec, .scene-meeting .mt-act { list-style: none; margin: 0; padding: 0; }
.scene-meeting .mt-dec li { display: flex; align-items: center; gap: 9px; height: 20px; font: 400 13.5px/1.2 var(--f); color: #2D3139; }
.scene-meeting .mt-dec i { flex: none; width: 5px; height: 5px; margin-left: 3px; border-radius: 50%; background: #2D3139; }
.scene-meeting .mt-act li { display: flex; align-items: center; gap: 9px; max-width: 380px; height: 26px; font: 400 13.5px/1.2 var(--f); color: #2D3139; }
.scene-meeting .mt-act .ui-av { width: 22px; height: 22px; font-size: 11px; }
.scene-meeting .mt-at { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-meeting .ui-toast { bottom: 20px; }
.scene-meeting .mt-due { flex: none; height: 21px; padding: 0 8px; border-radius: 5px; background: #F1F3F5; font: 500 12px/21px var(--f); color: #3C4043; }

@container (max-width: 440px) {
  .scene-meeting .mt-long { display: none; }
  .scene-meeting .mt-short { display: inline; }
}
@container (max-width: 500px) {
  .scene-meeting .mt-word { top: 30px; left: 6px; right: 6px; }
  .scene-meeting .ui-toast { bottom: 16px; }
  .scene-meeting .mt-ttop .ui-name { display: none; }
  .scene-meeting .mt-tbody { padding: 10px 10px; gap: 9px; }
  .scene-meeting .mt-ppl { display: none; }
  .scene-meeting .mt-thumb { width: 64px; height: 38px; }
  .scene-meeting .mt-page { padding: 10px 14px 0; }
  .scene-meeting .mt-h { font-size: 17px; }
  .scene-meeting .mt-sec { margin-top: 6px; font-size: 13px; }
  .scene-meeting .mt-dec li { height: 20px; font-size: 13px; }
  .scene-meeting .mt-act li { height: 25px; font-size: 13px; }
}
/* Très étroit ou scène basse : la ligne de contexte du document s'efface pour laisser la place à la bulle d'envoi */
@container (max-height: 385px) {
  .scene-meeting .mt-meta { display: none; }
}
@container (max-width: 320px) {
  .scene-meeting .mt-meta { display: none; }
  .scene-meeting .mt-rect b { white-space: normal; }
  .scene-meeting .mt-thumb { width: 56px; height: 36px; }
}

/* records.css */
/* Explorateur de fichiers (Windows 11) : le dossier partagé reçoit les trois documents de la formation, l'équipe se coche, une personne valide la charte.
   États : rangées .in puis .ok, avatars .ok ; scène s-toast, s-cursor, s-press, s-valid, s-done (kit). */
.scene-records .rc-top { gap: 4px; height: 40px; padding: 0 0 0 8px; align-items: flex-end; background: #EEF0F3; border-bottom: 0; }
.scene-records .rc-tab { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 33px; padding: 0 10px 0 11px; border-radius: 8px 8px 0 0; background: #F9FAFB; box-shadow: 0 0 0 1px #E3E6EA; clip-path: inset(-2px -2px 0 -2px); }
.scene-records .rc-app { flex: none; width: 18px; height: 18px; }
.scene-records .rc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 12.5px/1 var(--f); letter-spacing: 0; color: var(--ui-ink); }
.scene-records .rc-x, .scene-records .rc-plus { flex: none; width: 9px; height: 9px; fill: none; stroke: #5F6672; stroke-width: 1.2; stroke-linecap: round; }
.scene-records .rc-x { margin-left: 10px; }
.scene-records .rc-plus { align-self: center; margin: 4px 0 0 8px; }
.scene-records .rc-ctl { flex: none; align-self: center; display: flex; align-items: center; gap: 22px; margin-left: auto; padding: 0 16px 0 12px; }
.scene-records .rc-ctl svg { width: 10px; height: 10px; fill: none; stroke: #3C4043; stroke-width: 1; }

/* Barre d'adresse : retour, fil Documents › Maîtrise de l'IA, recherche */
.scene-records .rc-bar { flex: none; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px 0 12px; background: #F9FAFB; border-bottom: 1px solid #E6E8EB; }
.scene-records .rc-navs { flex: none; display: flex; align-items: center; gap: 13px; color: #5F6672; }
.scene-records .rc-navs svg { width: 14px; height: 14px; }
.scene-records .rc-back { transform: scaleX(-1); }
.scene-records .rc-fwd { color: #C2C7CF; }
.scene-records .rc-up { transform: rotate(-90deg); }
.scene-records .rc-addr { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #E1E4E8; color: var(--ui-ink); font: 400 12.5px/1 var(--f); white-space: nowrap; overflow: hidden; }
.scene-records .rc-addr i { font-style: normal; color: #8C95A3; }
.scene-records .rc-addr b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.scene-records .rc-fold { flex: none; width: 15px; height: 15px; color: #F0B429; }
.scene-records .rc-find { flex: none; display: flex; align-items: center; gap: 7px; width: 120px; height: 28px; padding: 0 10px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #E1E4E8; color: #6B7280; font: 400 12px/1 var(--f); white-space: nowrap; overflow: hidden; }
.scene-records .rc-find svg { flex: none; width: 13px; height: 13px; }

/* Volet de navigation et liste des fichiers (vue Détails) */
.scene-records .rc-body { display: grid; grid-template-columns: 126px minmax(0, 1fr); }
.scene-records .rc-nav { display: flex; flex-direction: column; gap: 1px; padding: 8px 6px; border-right: 1px solid #EEF0F3; }
.scene-records .rc-ni { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 5px; color: var(--ui-ink); font: 400 12px/1 var(--f); white-space: nowrap; overflow: hidden; }
.scene-records .rc-ni svg { flex: none; width: 15px; height: 15px; color: #F0B429; }
.scene-records .rc-ni .rc-home { color: #5F6672; }
.scene-records .rc-ni.on { background: #ECEEF1; font-weight: 500; }
.scene-records .rc-main { position: relative; display: flex; flex-direction: column; min-width: 0; }
.scene-records .rc-head { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 104px 22px; align-items: center; height: 28px; padding: 0 12px 0 44px; border-bottom: 1px solid #EEF0F3; color: var(--ui-mute); font: 400 11.5px/1 var(--f); }
.scene-records .rc-list { position: relative; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 5px 6px; }
.scene-records .rc-empty { position: absolute; left: 0; right: 0; top: 22px; margin: 0; text-align: center; color: #5F6672; font: 400 12.5px/1 var(--f); transition: opacity .25s var(--ease); }
.scene-records.s-fill .rc-empty { opacity: 0; }
.scene-records .rc-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 104px 22px; align-items: center; column-gap: 12px; height: 34px; padding: 0 6px 0 12px; border-radius: 6px; color: var(--ui-ink); font: 400 12.5px/1 var(--f); opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .55s var(--spring), background-color .5s var(--ease); }
.scene-records .rc-row img { justify-self: center; display: block; width: auto; height: 20px; }
.scene-records .rc-fn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-records .rc-dt { color: var(--ui-mute); font-size: 12px; white-space: nowrap; }
.scene-records .rc-ok { justify-self: end; opacity: 0; transform: scale(.4); transition: opacity .2s var(--ease), transform .45s var(--spring-pop); }
.scene-records .rc-row.in { opacity: 1; transform: none; background: #EEF1F5; }
.scene-records .rc-row.ok { background: transparent; }
.scene-records .rc-row.ok .rc-ok { opacity: 1; transform: none; }

/* L'équipe : six avatars qui se cochent, le compteur suit */
.scene-records .rc-team { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 12px 0 18px; padding-top: 11px; border-top: 1px solid #EEF0F3; }
.scene-records .rc-tl { display: flex; flex-direction: column; gap: 5px; min-width: 0; white-space: nowrap; }
.scene-records .rc-tl b { font: 600 12.5px/1 var(--f); color: var(--ui-ink); }
.scene-records .rc-count { font: 400 12px/1 var(--f); color: var(--ui-mute); }
.scene-records .rc-avs { display: flex; gap: 7px; padding-right: 4px; }
.scene-records .rc-av { position: relative; width: 28px; height: 28px; }
.scene-records .rc-ck { position: absolute; right: -5px; bottom: -6px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-btn); color: #fff; box-shadow: 0 0 0 2px #fff; opacity: 0; transform: scale(.4); transition: opacity .2s var(--ease), transform .45s var(--spring-pop); }
.scene-records .rc-ck svg { width: 9.5px; height: 9.5px; }
.scene-records .rc-av.ok .rc-ck { opacity: 1; transform: none; }

/* Barre d'état : le nombre d'éléments suit l'arrivée des fichiers */
.scene-records .rc-status { flex: none; display: flex; align-items: center; height: 26px; padding: 0 14px; border-top: 1px solid #EEF0F3; background: #fff; color: var(--ui-mute); font: 400 11.5px/1 var(--f); }

/* Validation de la charte */
.scene-records .rc-tlogo { flex: none; display: block; width: 20px; height: 20px; }
.scene-records .ui-toast { bottom: 48px; }

@container (max-width: 500px) {
  .scene-records .rc-body { grid-template-columns: minmax(0, 1fr); }
  .scene-records .rc-nav, .scene-records .rc-find, .scene-records .rc-fwd, .scene-records .rc-up, .scene-records .rc-plus { display: none; }
  .scene-records .rc-head { display: none; }
  .scene-records .rc-list { padding-top: 6px; }
  .scene-records .rc-row { grid-template-columns: 20px minmax(0, 1fr) 20px; height: 34px; column-gap: 10px; padding: 0 6px 0 8px; }
  .scene-records .rc-dt { display: none; }
  .scene-records .rc-team { margin: 4px 10px 0 12px; padding-top: 10px; }
  .scene-records .rc-ctl { gap: 18px; padding-right: 12px; }
  .scene-records .rc-status { display: none; }
  .scene-records .ui-toast { bottom: 18px; }
}
@container (max-width: 380px) {
  .scene-records .rc-avs { gap: 6px; }
  .scene-records .rc-av { width: 26px; height: 26px; }
  .scene-records .rc-ctl svg:not(:last-child) { display: none; }
}

/* reply.css */
/* Outlook : un long fil avec un client ; l'agent le résume et rédige la réponse en trois tons. */
.scene-reply { --prog: 2.7s; }
.scene-reply .ol-win { --ol-blue: #0F6CBD; --ol-line: #E3E6EA; --ol-pane: #F4F5F7; }

/* Bandeau bleu d'Outlook */
.scene-reply .ol-top { height: 44px; gap: 10px; padding: 0 10px 0 13px; border-bottom: 0; background: var(--ol-blue); }
.scene-reply .ol-waffle { flex: none; width: 15px; height: 15px; color: #fff; }
.scene-reply .ol-logo { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #fff; }
.scene-reply .ol-logo .ui-logo { height: 20px; }
.scene-reply .ol-name { color: #fff; font-weight: 600; }
.scene-reply .ol-search { flex: 1; min-width: 0; max-width: 230px; margin-left: auto; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px; border-radius: 6px; background: #fff; color: #616161; font: 400 12.5px/1 var(--f); white-space: nowrap; overflow: hidden; }
.scene-reply .ol-search svg { flex: none; width: 14px; height: 14px; color: var(--ol-blue); }
.scene-reply .ol-me { background: #fff; color: #1F2328; }

/* Rail des applications, puis le fil dans le volet de lecture */
.scene-reply .ol-body { display: grid; grid-template-columns: 46px minmax(0, 1fr); }
.scene-reply .ol-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 10px; background: #fff; box-shadow: inset -1px 0 0 var(--ol-line); }
.scene-reply .ol-rail span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #6B7280; }
.scene-reply .ol-rail svg { width: 18px; height: 18px; }
.scene-reply .ol-rail .ol-on { background: #E8EBEF; color: #1F2328; }
.scene-reply .ol-pane { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--ol-pane); }
.scene-reply .ol-subj { flex: none; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 14px; background: #fff; border-bottom: 1px solid var(--ol-line); }
.scene-reply .ol-subj b { min-width: 0; color: #1F2328; font: 600 14px/1.2 var(--f); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-reply .ol-count { margin-left: auto; }
.scene-reply .ui-agent .t1, .scene-reply .ui-agent .t2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Volets qui se replient ou s'ouvrent à leur hauteur réelle */
.scene-reply .ol-fold { flex: none; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease), opacity .4s var(--ease); }
.scene-reply .ol-in { min-height: 0; overflow: hidden; }
.scene-reply .ol-thread { grid-template-rows: 1fr; }
.scene-reply.s-fold .ol-thread { grid-template-rows: 0fr; opacity: 0; }
.scene-reply.s-fold .ol-sum, .scene-reply.s-reply .ol-reply { grid-template-rows: 1fr; }

/* Le fil : 12 messages repliés */
.scene-reply .ol-older { display: flex; justify-content: center; margin: 8px 12px 6px; }
.scene-reply .ol-older span { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--ol-line); color: #5F6672; font: 500 11.5px/1 var(--f); }
.scene-reply .ol-msg { display: grid; grid-template-columns: 24px auto minmax(0, 1fr) auto; align-items: center; column-gap: 9px; height: 32px; margin: 0 12px 6px; padding: 0 11px 0 7px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--ol-line); color: #1F2328; font: 400 12.5px/1 var(--f); transition: background-color .35s var(--ease), box-shadow .35s var(--ease); }
.scene-reply .ol-msg .ui-av { width: 24px; height: 24px; font-size: 11px; background: #E3E7EE; }
.scene-reply .ol-msg .ol-av-me { background: #D6DEEA; }
.scene-reply .ol-msg b { font-weight: 600; white-space: nowrap; }
.scene-reply .ol-snip { min-width: 0; color: #5F6672; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-reply .ol-date { color: #5F6672; font-size: 11.5px; white-space: nowrap; }
.scene-reply .ol-msg.ol-read { background: #EEF3FE; box-shadow: 0 0 0 1px #C5D5FB; }

/* Résumé de l'agent */
.scene-reply .ol-sumbox { margin: 8px 12px 0; padding: 9px 12px 10px; border-radius: 10px; background: #EEF3FE; box-shadow: inset 0 0 0 1px #D6E2FB; }
.scene-reply .ol-sumt { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: #1E3A9E; font: 600 12.5px/1.2 var(--f); white-space: nowrap; }
.scene-reply .ol-sumbox p { position: relative; margin: 0; padding-left: 17px; color: #1F2328; font: 400 12.5px/1.5 var(--f); }
.scene-reply .ol-sumbox p::before { content: ""; position: absolute; left: 6px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #2649DE; }

/* Réponse rédigée, en trois tons */
.scene-reply .ol-rbox { margin: 8px 12px 0; padding: 0 12px 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #D3D9E2; }
.scene-reply .ol-rhead { display: flex; align-items: center; gap: 8px; height: 34px; margin-bottom: 8px; border-bottom: 1px solid #EEF0F3; }
.scene-reply .ol-to { min-width: 0; color: #5F6672; font: 400 12px/1 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-reply .ol-to b { color: #1F2328; font-weight: 500; }
.scene-reply .ol-tones { display: flex; gap: 5px; margin-left: auto; }
.scene-reply .ol-tones .ui-chip { height: 22px; padding: 0 9px; background: #fff; box-shadow: inset 0 0 0 1px #D9DEE6; color: #3C4043; }
.scene-reply .ol-tones .ui-chip.ai { background: #E3EBFE; box-shadow: inset 0 0 0 1px #C5D5FB; color: #2649DE; }
.scene-reply .ol-draft { position: relative; margin: 0; color: #1F2328; font: 400 12.5px/1.5 var(--f); }
.scene-reply .ol-ghost { visibility: hidden; }
.scene-reply .ol-typed { position: absolute; inset: 0; }
.scene-reply .ol-typed.busy::after { content: ""; display: inline-block; width: 1.5px; height: 13px; margin-left: 1px; vertical-align: -2px; background: #2649DE; }
.scene-reply .ui-toast { bottom: 24px; }
/* Le bouton garde sa largeur quand « Valider et envoyer » devient « Validé et envoyé » : le curseur reste dessus */
.scene-reply .ui-toast .ui-btn { display: inline-grid; justify-items: center; }
.scene-reply .ui-toast .ui-btn > span { grid-area: 1 / 1; }
.scene-reply .ui-toast .ui-btn .ok { display: inline-flex; visibility: hidden; }
.scene-reply.s-valid .ui-toast .ui-btn .lab { display: inline; visibility: hidden; }
.scene-reply.s-valid .ui-toast .ui-btn .ok { visibility: visible; }

/* Les requêtes mesurent la boîte de contenu de la scène (sans ses 14 px de marge) : 412 px de haut en bureau. */
@container (max-height: 404px) {
  .scene-reply .ol-top { height: 40px; }
  .scene-reply .ol-subj { height: 36px; }
  .scene-reply .ol-msg { height: 30px; margin-bottom: 5px; }
  .scene-reply .ol-older { margin: 6px 12px 5px; }
  .scene-reply .ol-sumbox { margin-top: 6px; padding: 8px 11px 8px; }
  .scene-reply .ol-sumt { margin-bottom: 4px; }
  .scene-reply .ol-sumbox p, .scene-reply .ol-draft { font-size: 12px; line-height: 1.45; }
  .scene-reply .ol-rbox { margin-top: 6px; padding-bottom: 8px; }
  .scene-reply .ol-rhead { height: 30px; margin-bottom: 6px; }
  .scene-reply .ui-toast { bottom: 14px; }
}
@container (max-height: 380px) {
  .scene-reply .ol-subj { height: 32px; }
  .scene-reply .ol-subj b { font-size: 13px; }
  .scene-reply .ol-sumbox { margin-top: 5px; padding: 7px 10px; }
  .scene-reply .ol-rbox { margin-top: 5px; }
  .scene-reply .ol-rhead { height: 26px; margin-bottom: 5px; }
  .scene-reply .ui-toast { bottom: 8px; }
}
@container (max-width: 500px) {
  .scene-reply .ol-body { grid-template-columns: minmax(0, 1fr); }
  .scene-reply .ol-rail, .scene-reply .ol-to, .scene-reply .ol-long { display: none; }
  .scene-reply .ol-search { flex: 0 0 30px; padding: 0; justify-content: center; }
  .scene-reply .ol-search span { display: none; }
  .scene-reply .ol-subj { padding: 0 10px 0 12px; }
  .scene-reply .ol-subj b { font-size: 13px; }
  .scene-reply .ol-older, .scene-reply .ol-msg, .scene-reply .ol-sumbox, .scene-reply .ol-rbox { margin-left: 8px; margin-right: 8px; }
  .scene-reply .ol-msg { column-gap: 8px; padding-right: 9px; }
  .scene-reply .ol-tones { margin-left: 0; }
}
@container (max-width: 300px) {
  .scene-reply .ol-more, .scene-reply .ol-snip { display: none; }
  .scene-reply .ol-sumbox { padding: 7px 10px; }
  .scene-reply .ol-rhead { height: 26px; margin-bottom: 5px; }
  .scene-reply .ui-toast { bottom: 10px; }
  .scene-reply .ol-msg { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .scene-reply .ol-name { display: none; }
}

/* sheet.css */
/* Excel : un tableau de ventes en désordre ; l'agent aligne les dates, supprime le doublon, calcule le total. */
.scene-sheet { --prog: 2.6s; }
.scene-sheet .xl-win { --xl-g: #107C41; --xl-line: #E3E5E9; --xl-edge: #D3D7DD; --xl-head: #F4F5F7;
  --xl-n: 34px; --xl-hh: 22px; --xl-rh: 23px; --xl-cols: 92px 132px 92px 84px 84px 84px 84px minmax(84px, 1fr); }

/* Barre de titre, onglets, barre de formule */
.scene-sheet .xl-top { height: 44px; gap: 10px; }
.scene-sheet .xl-top .ui-file small { font-size: 12px; }
.scene-sheet .xl-search { margin-left: auto; display: flex; align-items: center; gap: 7px; width: 168px; min-width: 0; height: 28px; padding: 0 10px; border-radius: 6px; background: #F1F3F5; color: #5F6672; font: 400 12px/1 var(--f); white-space: nowrap; overflow: hidden; }
.scene-sheet .xl-search svg { flex: none; width: 14px; height: 14px; }
.scene-sheet .xl-me { background: #E3E7EE; }
.scene-sheet .xl-tabs { flex: none; display: flex; height: 30px; padding: 0 6px; border-bottom: 1px solid var(--xl-line); color: #424850; font: 400 12.5px/1 var(--f); white-space: nowrap; overflow: hidden; }
.scene-sheet .xl-tabs span { position: relative; display: flex; align-items: center; padding: 0 9px; }
.scene-sheet .xl-tabs .xl-on { color: #1F2328; font-weight: 600; }
.scene-sheet .xl-tabs .xl-on::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--xl-g); }
.scene-sheet .xl-fx { flex: none; display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-bottom: 1px solid var(--xl-edge); font: 400 12.5px/1 var(--f); }
.scene-sheet .xl-ref { flex: none; display: flex; align-items: center; width: 58px; height: 22px; padding: 0 7px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--xl-edge); color: #1F2328; font-weight: 500; }
.scene-sheet .xl-fxi { flex: none; padding: 0 8px 0 9px; border-left: 1px solid var(--xl-line); color: #5F6672; font: italic 500 13px/1 Georgia, "Times New Roman", serif; }
.scene-sheet .xl-f { flex: 1; min-width: 0; color: #1F2328; white-space: nowrap; overflow: hidden; }
.scene-sheet .xl-f.busy::after { content: ""; display: inline-block; width: 1px; height: 13px; margin-left: 1px; vertical-align: -2px; background: #1F2328; }

/* Grille : en-têtes fixes, lignes de cellules */
.scene-sheet .xl-body { display: grid; grid-template-columns: var(--xl-n) minmax(0, 1fr); grid-template-rows: var(--xl-hh) minmax(0, 1fr); overflow: hidden; }
.scene-sheet .xl-corner { background: var(--xl-head); box-shadow: inset -1px -1px 0 var(--xl-edge); }
.scene-sheet .xl-cols { display: grid; grid-template-columns: var(--xl-cols); overflow: hidden; }
.scene-sheet .xl-cols span, .scene-sheet .xl-nums span { display: grid; place-items: center; background: var(--xl-head); color: #5F6672; font: 400 11.5px/1 var(--f); transition: background-color .25s, color .25s; }
.scene-sheet .xl-cols span { box-shadow: inset -1px -1px 0 var(--xl-edge); }
.scene-sheet .xl-nums { overflow: hidden; }
.scene-sheet .xl-nums span { height: var(--xl-rh); box-shadow: inset -1px -1px 0 var(--xl-edge); }
.scene-sheet .xl-cols span.xl-on { background: #E2E8E4; color: var(--xl-g); font-weight: 600; box-shadow: inset -1px 0 0 var(--xl-edge), inset 0 -2px 0 var(--xl-g); }
.scene-sheet .xl-nums span.xl-on { background: #E2E8E4; color: var(--xl-g); font-weight: 600; }
.scene-sheet .xl-cells { min-width: 0; overflow: hidden; }
.scene-sheet .xl-r { display: grid; grid-template-columns: var(--xl-cols); height: var(--xl-rh); overflow: hidden; }
.scene-sheet .xl-c { position: relative; display: flex; align-items: center; min-width: 0; padding: 0 7px; box-shadow: inset -1px -1px 0 var(--xl-line); color: #1F2328; font: 400 12.5px/1 var(--f); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; transition: background-color .45s var(--ease); }
.scene-sheet .xl-num, .scene-sheet .xl-d { justify-content: flex-end; }
.scene-sheet .xl-d.xl-txt { justify-content: flex-start; }
.scene-sheet .xl-th .xl-c { font-weight: 600; }
.scene-sheet .xl-d b { font-weight: inherit; }
.scene-sheet .xl-d .xl-now { display: none; }

/* Cellule active (cadre vert d'Excel) */
.scene-sheet .xl-c.xl-sel { box-shadow: inset 0 0 0 2px var(--xl-g); }
.scene-sheet .xl-c.xl-sel::after { content: ""; position: absolute; right: 0; bottom: 0; width: 5px; height: 5px; background: var(--xl-g); box-shadow: 0 0 0 1px #fff; }

/* Avant : une ligne en double, en rouge pâle */
.scene-sheet .xl-dup { transition: height .4s var(--ease), opacity .3s var(--ease); }
.scene-sheet .xl-dup .xl-c { background: #FCE4E6; color: #A4262C; }
.scene-sheet .xl-dup.xl-out { height: 0; opacity: 0; }

/* L'agent corrige : la cellule passe en bleu pâle, la date prend le bon format et s'aligne à droite */
.scene-sheet .xl-c.xl-ag { background: #E3EBFE; }
.scene-sheet .xl-d.xl-fixed { justify-content: flex-end; }
.scene-sheet .xl-d.xl-fixed .xl-was { display: none; }
.scene-sheet .xl-d.xl-fixed .xl-now { display: inline; }
.scene-sheet.s-agentdone .xl-c.xl-ag { background: transparent; }

/* Ligne Total */
.scene-sheet .xl-tot b { font-weight: 600; opacity: 0; transition: opacity .3s var(--ease); }
.scene-sheet.s-total .xl-tot .xl-tl b, .scene-sheet.s-sum .xl-tot .xl-tv b { opacity: 1; }
.scene-sheet.s-total .xl-tot .xl-c:nth-child(-n+3) { box-shadow: inset -1px -1px 0 var(--xl-line), inset 0 1px 0 #6E7681; }
.scene-sheet.s-total .xl-tot .xl-c.xl-sel { box-shadow: inset 0 0 0 2px var(--xl-g); }

/* Graphique en colonnes, posé sur la grille à droite des colonnes A à C (92 + 132 + 92 px en grand format ; masqué en petit) */
.scene-sheet .xl-chart { position: absolute; z-index: 3; top: calc(var(--xl-hh) + 5px); left: calc(var(--xl-n) + 92px + 132px + 92px + 12px); width: min(210px, calc(100% - var(--xl-n) - 92px - 132px - 92px - 22px)); height: calc(var(--xl-rh) * 5 + 4px); display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; background: #fff; box-shadow: 0 0 0 1px #C5CAD1; opacity: 0; transform: scale(.94); transform-origin: 0 0; transition: opacity .3s var(--ease), transform .5s var(--spring); }
.scene-sheet .xl-ct { flex: none; color: #3C4043; font: 500 11.5px/1.15 var(--f); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-sheet .xl-plot { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 4px; box-shadow: inset 0 -1px 0 #A9B0B9; }
.scene-sheet .xl-plot::before, .scene-sheet .xl-plot::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: #E7E9EC; }
.scene-sheet .xl-plot::before { top: 0; }
.scene-sheet .xl-plot::after { top: 50%; }
.scene-sheet .xl-plot i { position: relative; z-index: 1; width: 16%; max-width: 22px; height: var(--h); background: #21A366; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--spring) calc(.12s + var(--k) * 70ms); }
.scene-sheet.s-chart .xl-chart { opacity: 1; transform: none; }
.scene-sheet.s-chart .xl-plot i { transform: none; }

/* Barre du bas : feuille et état */
.scene-sheet .xl-foot { flex: none; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-top: 1px solid var(--xl-edge); background: var(--xl-head); color: #5F6672; font: 400 12px/1 var(--f); }
.scene-sheet .xl-sheet { position: relative; display: flex; align-items: center; height: 100%; padding: 0 12px; background: #fff; color: #1F2328; font-weight: 600; box-shadow: inset 1px 0 0 var(--xl-line), inset -1px 0 0 var(--xl-line); }
.scene-sheet .xl-sheet::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--xl-g); }
.scene-sheet .xl-add { position: relative; width: 14px; height: 14px; }
.scene-sheet .xl-add::before, .scene-sheet .xl-add::after { content: ""; position: absolute; left: 6px; top: 1px; width: 2px; height: 12px; border-radius: 1px; background: #8C95A3; }
.scene-sheet .xl-add::after { transform: rotate(90deg); }
.scene-sheet .xl-ready { margin-left: auto; }
.scene-sheet .ui-toast { bottom: 24px; }
.scene-sheet .ui-agent .t1, .scene-sheet .ui-agent .t2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Les requêtes mesurent la boîte de contenu de la scène (sans ses 14 px de marge) : 412 px de haut en bureau. */
/* Scène plus basse (tablette, mobile, écrans de 961 à 1280 px) : barres plus fines */
@container (max-height: 404px) {
  .scene-sheet .xl-win { --xl-hh: 20px; --xl-rh: 21px; }
  .scene-sheet .xl-top { height: 40px; }
  .scene-sheet .xl-tabs, .scene-sheet .xl-fx { height: 27px; }
  .scene-sheet .xl-ref { height: 20px; }
  .scene-sheet .xl-foot { height: 26px; }
  .scene-sheet .ui-toast { bottom: 14px; }
}
@container (max-height: 380px) {
  .scene-sheet .xl-tabs { display: none; }
  .scene-sheet .xl-win { --xl-rh: 20px; }
}

/* Petite largeur : colonnes resserrées ; graphique, recherche et barre du bas masqués */
@container (max-width: 500px) {
  .scene-sheet .xl-win { --xl-n: 26px; --xl-cols: 88px 106px 76px 64px 64px 64px 64px minmax(64px, 1fr); }
  .scene-sheet .xl-search, .scene-sheet .xl-top .ui-file small, .scene-sheet .xl-chart, .scene-sheet .xl-foot { display: none; }
  .scene-sheet .xl-me { margin-left: auto; }
  .scene-sheet .xl-tabs span:nth-child(n+5) { display: none; }
  .scene-sheet .xl-c { padding: 0 6px; font-size: 12px; }
  .scene-sheet .xl-cols span, .scene-sheet .xl-nums span { font-size: 11px; }
  .scene-sheet .xl-fx { gap: 7px; }
  .scene-sheet .xl-ref { width: 46px; }
}
@container (max-width: 300px) {
  .scene-sheet .xl-long { display: none; }
  .scene-sheet .xl-tabs span:nth-child(n+4) { display: none; }
  .scene-sheet .xl-win { --xl-n: 20px; --xl-cols: 76px 90px 68px 60px 60px 60px 60px minmax(60px, 1fr); }
  .scene-sheet .xl-c { padding: 0 5px; font-size: 11px; }
  .scene-sheet .xl-ref { width: 40px; }
}

/* system.css */
/* Des agents IA au travail : note vocale, transcription, page Notion, trois agents Claude en parallèle, document Word prêt à relire ; une personne valide.
   La figure entière : la scène à gauche, les cinq étapes à droite, qui passent dessous quand la place manque.
   États de la scène : s-rec, s-text, s-notion, s-agents, s-word, s-toast, s-cursor, s-press, s-valid, s-done ; agents .ok ; étapes .on et .ok. */
.scene-system.sy-fig { padding: clamp(12px, 2.2vw, 24px); border-radius: var(--r-xl, 16px); }
.scene-system .sy-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 22px clamp(24px, 3.6vw, 52px); }
.scene-system .sy-visual { flex: 7 1 470px; min-width: 0; }
.scene-system.ui-stage { --sh: 420px; border-radius: 12px; box-shadow: none; }
.scene-system .demo-foot { margin-top: 8px; }

/* Le téléphone : la note vocale, puis sa transcription */
.scene-system .sy-flow { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; align-items: flex-start; }
.scene-system .sy-phone { position: relative; flex: none; display: flex; flex-direction: column; gap: 10px; width: 138px; height: min(100%, 300px); padding: 30px 12px 12px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line); }
.scene-system .sy-island { position: absolute; left: 50%; top: 9px; width: 40px; height: 11px; margin-left: -20px; border-radius: 6px; background: #1F2328; }
.scene-system .sy-memo { display: flex; align-items: center; gap: 5px; color: var(--ui-ink); font: 600 12.5px/1 var(--f); white-space: nowrap; }
.scene-system .sy-mic { flex: none; width: 14px; height: 14px; color: #E5484D; }
.scene-system .sy-time { align-self: center; margin-top: -2px; color: var(--ui-ink); font: 600 19px/1 var(--f); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.scene-system .sy-wave { flex: none; display: flex; align-items: center; justify-content: space-between; height: 36px; }
.scene-system .sy-wave i { width: 3px; height: calc(var(--h) * 100%); border-radius: 2px; background: #1F2328; transform: scaleY(.1); transition: transform .4s var(--spring) calc(var(--i) * 34ms); }
.scene-system.s-rec .sy-wave i { transform: none; }
.scene-system .sy-trl { color: var(--ui-mute); font: 500 11px/1 var(--f); opacity: 0; transition: opacity .25s var(--ease); }
.scene-system.s-text .sy-trl { opacity: 1; }
.scene-system .sy-tr { margin: -3px 0 0; color: var(--ui-ink); font: 400 12px/1.4 var(--f); text-wrap: pretty; }
.scene-system .sy-tr.busy::after { content: ""; display: inline-block; width: 1.5px; height: 12px; margin-left: 1px; vertical-align: -2px; background: var(--ui-ink); }
.scene-system .sy-rec { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin: auto auto 0; border-radius: 50%; box-shadow: inset 0 0 0 2.5px #D9DEE6; }
.scene-system .sy-rec i { width: 24px; height: 24px; border-radius: 12px; background: #E5484D; transition: width .3s var(--ease), height .3s var(--ease), border-radius .3s var(--ease); }
.scene-system.s-rec .sy-rec i { width: 13px; height: 13px; border-radius: 3px; }
.scene-system.s-text .sy-rec i { width: 24px; height: 24px; border-radius: 12px; }
.scene-system .sy-to { flex: none; align-self: center; width: 16px; height: 16px; margin: 0 7px; color: #8C95A3; }

/* Notion, les trois agents, le document Word */
.scene-system .sy-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.scene-system .sy-card { border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line); opacity: 0; transform: translateY(10px); transition: opacity .3s var(--ease), transform .55s var(--spring); }
.scene-system.s-notion .sy-notion, .scene-system.s-agents .sy-ag, .scene-system.s-word .sy-word { opacity: 1; transform: none; }
.scene-system .sy-notion { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px 13px; }
.scene-system .sy-ntop { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ui-mute); font: 400 12px/1 var(--f); white-space: nowrap; overflow: hidden; }
.scene-system .sy-ntop img { flex: none; display: block; width: 18px; height: 18px; margin-right: 2px; }
.scene-system .sy-ntop i { font-style: normal; color: #B4BAC4; }
.scene-system .sy-ntitle { margin: 0; color: #1F2328; font: 700 17px/1.2 var(--f); letter-spacing: -0.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-system .sy-props { display: flex; align-items: center; gap: 8px; color: var(--ui-mute); font: 400 12px/1 var(--f); white-space: nowrap; }
.scene-system .sy-pk + .sy-tag { margin-right: 6px; }
.scene-system .sy-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; background: #EDECE9; color: #32302C; font: 400 12px/1 var(--f); }
.scene-system .sy-agents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.scene-system .sy-ag { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 10px 10px 11px; }
.scene-system.s-agents .sy-ag:nth-child(2) { transition-delay: .06s; }
.scene-system.s-agents .sy-ag:nth-child(3) { transition-delay: .12s; }
.scene-system .sy-al { display: flex; align-items: center; gap: 8px; min-width: 0; }
.scene-system .sy-cl { position: relative; flex: none; width: 20px; height: 20px; }
.scene-system .sy-cl img { display: block; width: 20px; height: 20px; border-radius: 5px; }
.scene-system .sy-ck { position: absolute; right: -5px; bottom: -4px; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: var(--accent-btn); color: #fff; box-shadow: 0 0 0 2px #fff; opacity: 0; transform: scale(.4); transition: opacity .2s var(--ease), transform .45s var(--spring-pop); }
.scene-system .sy-ck svg { width: 9px; height: 9px; }
.scene-system .sy-ag.ok .sy-ck { opacity: 1; transform: none; }
.scene-system .sy-al b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-ink); font: 500 12.5px/1 var(--f); }
.scene-system .sy-bar { display: block; height: 3px; border-radius: 2px; overflow: hidden; background: #E6E9EF; }
.scene-system .sy-bar i { display: block; width: 100%; height: 100%; background: var(--accent-btn); transform: scaleX(0); transform-origin: 0 50%; }
.scene-system.s-agents .sy-bar i { transform: none; transition: transform var(--d, 1s) cubic-bezier(.45, .05, .35, 1) .2s; }
.scene-system .sy-word { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; column-gap: 11px; padding: 11px 12px; }
.scene-system .sy-word > img { display: block; width: 28px; height: 28px; }
.scene-system .sy-wt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.scene-system .sy-wt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-ink); font: 600 13px/1.15 var(--f); }
.scene-system .sy-wt small { color: var(--ui-mute); font: 400 11.5px/1 var(--f); white-space: nowrap; }
.scene-system .sy-tlogo { flex: none; display: block; width: 20px; height: 20px; }
/* La bulle de validation se centre sous la colonne de droite (téléphone 138 px + flèche 30 px) */
.scene-system .ui-toast { left: calc(50% + 84px); bottom: 22px; }

/* Les cinq étapes : le numéro devient une coche */
.scene-system .sy-steps { flex: 5 1 260px; display: grid; gap: 18px; margin: 0; padding: 0 4px 0 2px; list-style: none; }
.scene-system .sy-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 14px; }
.scene-system .sy-num { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #CDD3DC; color: var(--muted); font: 500 14px/1 var(--f); transition: background-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease); }
.scene-system .sy-num b { font-weight: 500; transition: opacity .2s var(--ease); }
.scene-system .sy-num svg { position: absolute; width: 16px; height: 16px; opacity: 0; transform: scale(.4); transition: opacity .2s var(--ease), transform .45s var(--spring-pop); }
.scene-system .sy-step.on .sy-num { box-shadow: inset 0 0 0 2px var(--accent-btn); color: var(--accent-text); }
.scene-system .sy-step.ok .sy-num { background: var(--accent-btn); box-shadow: none; color: #fff; }
.scene-system .sy-step.ok .sy-num b { opacity: 0; }
.scene-system .sy-step.ok .sy-num svg { opacity: 1; transform: none; }
.scene-system .sy-step p { margin: 0; color: var(--text); font-size: 16px; line-height: 1.45; }
.scene-system .sy-step.on p { color: var(--ink); }

/* Seuils sur la largeur utile de la scène (sans ses marges de 14 px) */
@container (max-width: 560px) {
  .scene-system .sy-phone { width: 124px; }
  .scene-system .sy-to { width: 12px; margin: 0; visibility: hidden; }
  .scene-system .sy-ag { padding: 10px 8px 11px; }
  .scene-system .sy-al { gap: 7px; }
  .scene-system .sy-al b { font-size: 12px; }
  .scene-system .sy-cl, .scene-system .sy-cl img { width: 18px; height: 18px; }
  .scene-system .ui-toast { left: calc(50% + 68px); }
}
@container (max-width: 440px) {
  .scene-system .sy-flow { flex-direction: column; align-items: stretch; gap: 8px; }
  .scene-system .sy-to, .scene-system .sy-island, .scene-system .sy-rec, .scene-system .sy-trl, .scene-system .sy-props, .scene-system .sy-wt small { display: none; }
  .scene-system .sy-phone { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "m t" "w w" "x x"; width: auto; height: auto; gap: 8px; padding: 10px 12px 11px; border-radius: 10px; }
  .scene-system .sy-memo { grid-area: m; }
  .scene-system .sy-time { grid-area: t; align-self: center; margin: 0; color: var(--ui-mute); font: 500 12px/1 var(--f); }
  .scene-system .sy-wave { grid-area: w; }
  .scene-system .sy-tr { grid-area: x; }
  .scene-system .sy-wave { height: 24px; }
  .scene-system .sy-tr { margin: 0; min-height: 2.8em; }
  .scene-system .sy-col { gap: 8px; }
  .scene-system .sy-notion { gap: 8px; padding: 10px 12px; }
  .scene-system .sy-ntitle { font-size: 15px; }
  .scene-system .sy-agents { gap: 6px; }
  .scene-system .sy-ag { gap: 8px; padding: 9px 7px 10px; }
  .scene-system .sy-al { gap: 5px; }
  .scene-system .sy-al b { font-size: 11.5px; }
  .scene-system .sy-cl, .scene-system .sy-cl img { width: 16px; height: 16px; }
  .scene-system .sy-ck { right: -4px; bottom: -4px; width: 12px; height: 12px; }
  .scene-system .sy-ck svg { width: 8px; height: 8px; }
  .scene-system .sy-word { grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 9px; padding: 9px 10px; }
  .scene-system .sy-word > img { width: 24px; height: 24px; }
  .scene-system .sy-wt b { font-size: 12.5px; }
  .scene-system .ui-toast { left: 50%; bottom: 14px; }
}
@container (max-width: 380px) {
  .scene-system .sy-word { grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "l t" "l c"; row-gap: 6px; }
  .scene-system .sy-word > img { grid-area: l; }
  .scene-system .sy-wt { grid-area: t; }
  .scene-system .sy-ready { grid-area: c; justify-self: start; }
}
@container (max-width: 290px) {
  .scene-system .sy-al { flex-direction: column; align-items: flex-start; gap: 7px; }
}
@media (max-width: 720px) {
  .scene-system.ui-stage { --sh: 470px; }
}

/* tasks.css */
/* Le lundi matin : quatre cartes, une par outil réel (logo, nom de l'outil, tâche). L'agent passe de carte en carte
   (filet bleu pendant qu'il travaille), la pastille « À faire » devient « Prêt » et le résultat s'écrit sous le titre.
   États : .tk-run (l'agent travaille sur la carte) et .tk-on (prête) sur .tk-card. Large : grille 2 × 2 ; étroit : liste. */
.scene-tasks .ui-agent .t1, .scene-tasks .ui-agent .t2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scene-tasks .tk-top { gap: 9px; }
.scene-tasks .tk-cal { flex: none; width: 21px; height: 21px; color: #5F6672; }
.scene-tasks .tk-time { font: 400 13px/1 var(--f); color: var(--ui-mute); white-space: nowrap; }
.scene-tasks .tk-count { margin-left: auto; height: 24px; padding: 0 9px; font-size: 12px; }
.scene-tasks .tk { --prog: 2.1s; }
.scene-tasks .tk-short, .scene-tasks .tk-xs { display: none; }

/* Corps : la barre de l'agent, puis les cartes */
.scene-tasks .tk-body { display: flex; flex-direction: column; background: #F6F7F9; }
.scene-tasks .tk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }

/* Carte d'un outil */
.scene-tasks .tk-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo app st" "title title title" "res res res"; align-items: center; column-gap: 8px; row-gap: 8px; min-width: 0; padding: 12px 12px 13px 13px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #E0E4EA; transition: box-shadow .25s var(--ease); }
.scene-tasks .tk-card.tk-run { box-shadow: 0 0 0 1px #E0E4EA, inset 0 0 0 1.5px #8FAAF8; }
.scene-tasks .tk-logo { grid-area: logo; display: block; width: auto; height: 22px; }
.scene-tasks .tk-logo[src$="gmail.svg"] { height: 17px; margin: 0 1px; }
.scene-tasks .tk-app { grid-area: app; min-width: 0; font: 500 12.5px/1 var(--f); color: var(--ui-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-tasks .tk-title { grid-area: title; min-width: 0; font: 600 15px/1.2 var(--f); letter-spacing: -0.01em; color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pastille : « À faire » en gris, puis « Prêt » en bleu avec sa coche */
.scene-tasks .tk-st { grid-area: st; display: grid; justify-items: end; }
.scene-tasks .tk-st > * { grid-area: 1 / 1; transition: opacity .2s var(--ease), transform .4s var(--spring-pop); }
.scene-tasks .tk-ready { gap: 4px; padding: 0 7px 0 5px; opacity: 0; transform: scale(.7); }
.scene-tasks .tk-ready svg { width: 13px; height: 13px; }
.scene-tasks .tk-card.tk-on .tk-todo { opacity: 0; transform: scale(.8); }
.scene-tasks .tk-card.tk-on .tk-ready { opacity: 1; transform: none; }

/* Résultat : une ligne grise à remplir, puis le résultat écrit par l'agent */
.scene-tasks .tk-res { grid-area: res; position: relative; min-width: 0; height: 18px; }
.scene-tasks .tk-skel { position: absolute; left: 0; top: 5px; width: 64%; height: 8px; border-radius: 4px; background: #ECEFF3; transition: opacity .2s var(--ease), background-color .25s var(--ease); }
.scene-tasks .tk-skel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #9DB4F9; transform: scaleX(0); transform-origin: 0 50%; }
.scene-tasks .tk-card.tk-run .tk-skel { background: #DCE6FD; }
.scene-tasks .tk-card.tk-run .tk-skel::after { transform: scaleX(1); transition: transform .36s linear; }
.scene-tasks .tk-out { display: block; font: 400 13.5px/18px var(--f); color: #3C4043; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .45s var(--spring); }
.scene-tasks .tk-card.tk-on .tk-skel { opacity: 0; }
.scene-tasks .tk-card.tk-on .tk-out { opacity: 1; transform: none; }

/* Étroit : les cartes deviennent une liste, logo à gauche, pastille à droite, résultat sous le titre */
@container (max-width: 500px) {
  .scene-tasks .ui-b-apres .tk-long { display: none; }
  .scene-tasks .tk-short { display: inline; }
  .scene-tasks .tk-time { display: none; }
  .scene-tasks .tk-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px; }
  .scene-tasks .tk-card { grid-template-areas: "logo title st" "logo res st"; column-gap: 10px; row-gap: 2px; padding: 6px 9px 6px 10px; }
  .scene-tasks .tk-app { display: none; }
  .scene-tasks .tk-logo { width: 22px; height: auto; }
  .scene-tasks .tk-logo[src$="gmail.svg"] { width: 20px; height: auto; margin: 0 1px; }
  .scene-tasks .tk-title { font-size: 13.5px; }
  .scene-tasks .tk-res { height: 17px; }
  .scene-tasks .tk-skel { top: 5px; width: 70%; height: 7px; }
  .scene-tasks .tk-out { font-size: 12.5px; line-height: 17px; }
}

/* Scène basse (accueil, 410 px ; écrans moyens) : cartes plus serrées pour laisser la place à la bulle de validation */
@container (max-height: 395px) {
  .scene-tasks .tk-grid { gap: 8px; padding: 10px; }
  .scene-tasks .tk-card { row-gap: 5px; padding: 10px 11px 10px 12px; }
}
@container (min-width: 501px) and (max-height: 395px) {
  .scene-tasks .tk-logo { height: 20px; }
}
@container (max-width: 500px) and (max-height: 395px) {
  .scene-tasks .tk-grid { gap: 6px; padding: 8px; }
  .scene-tasks .tk-card { row-gap: 1px; padding: 5px 9px 5px 10px; }
}
/* Très étroit (accueil sur téléphone) : le bilan « Avant » se raccourcit pour tenir sur une ligne */
@container (max-width: 320px) {
  .scene-tasks .ui-b-avant .tk-long { display: none; }
  .scene-tasks .tk-xs { display: inline; }
}

/* terminal.css */
/* Claude Code dans un terminal clair : la transcription à gauche, le dossier du projet à droite (dessous sur mobile).
   Le terminal garde ses couleurs (encadré d'accueil orange Claude) ; le bleu va à l'autorisation et à ce que l'agent a fait.
   États : s-typing, s-sent, s-plan, s-perm, s-cursor, s-press, s-valid, s-sorted, s-made, s-done ; étapes .on (en cours) et .ok (faites).
   Repliée (0fr), une ligne garde la hauteur de son padding : les écarts passent par des marges. */
.scene-terminal.ui-stage { background: var(--stage); }
.scene-terminal .tm-win { --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.scene-terminal .tm-top .ui-logo { height: 20px; border-radius: 5px; }
.scene-terminal .tm-top .ui-file { min-width: 0; font-weight: 500; color: #3C4043; }
.scene-terminal .tm-body { display: grid; grid-template-columns: minmax(0, 1fr) 182px; }

/* Lignes qui s'ouvrent */
.scene-terminal .tm-row { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--spring), opacity .3s var(--ease); }
.scene-terminal .tm-row > * { min-height: 0; overflow: hidden; }
.scene-terminal .tm-rin, .scene-terminal .tm-rhi,
.scene-terminal.s-sent .tm-rask, .scene-terminal.s-plan .tm-rplan, .scene-terminal.s-perm .tm-rbox,
.scene-terminal.s-valid .tm-rok, .scene-terminal.s-done .tm-rdone { grid-template-rows: 1fr; opacity: 1; }
.scene-terminal.s-valid .tm-rbox { grid-template-rows: 0fr; opacity: 0; }

/* Terminal */
.scene-terminal .tm-term { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px 14px; background: #fff; font: 400 12px/1.5 var(--mono); color: #1F2328; }
.scene-terminal .tm-flow { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.scene-terminal .tm-hi { flex: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 10px; border: 1px solid #D77757; border-radius: 8px; white-space: nowrap; overflow: hidden; }
.scene-terminal .tm-star { flex: none; width: 14px; height: 14px; color: #D77757; }
.scene-terminal .tm-hi b { font-weight: 700; }
.scene-terminal .tm-hi span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #5F6672; }
.scene-terminal .tm-gt { flex: none; margin-right: 8px; color: #5F6672; }
.scene-terminal .tm-ask { display: flex; margin: 10px 0 0; padding: 5px 9px; border-radius: 6px; background: #F2F3F5; }

/* Plan : chaque étape se coche */
.scene-terminal .tm-todo { list-style: none; display: grid; gap: 3px; margin: 10px 0 0; padding: 0 0 0 2px; }
.scene-terminal .tm-td { display: flex; align-items: center; gap: 9px; color: #5F6672; transition: color .25s var(--ease); }
.scene-terminal .tm-box { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #B9BFC8; color: #fff; transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.scene-terminal .tm-box svg { width: 11px; height: 11px; opacity: 0; transform: scale(.5); transition: opacity .2s var(--ease), transform .4s var(--spring-pop); }
.scene-terminal .tm-td.on { font-weight: 700; color: #1F2328; }
.scene-terminal .tm-td.on .tm-box { box-shadow: inset 0 0 0 1.5px #D77757; }
.scene-terminal .tm-td.ok { color: #1F2328; }
.scene-terminal .tm-td.ok .tm-box { background: var(--accent-btn); box-shadow: none; }
.scene-terminal .tm-td.ok .tm-box svg { opacity: 1; transform: none; }
.scene-terminal .tm-tt { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.scene-terminal .tm-lg { flex: none; width: 15px; height: 15px; }
.scene-terminal .tm-tt b { font-weight: inherit; }

/* Autorisation : Claude Code demande avant d'écrire, une personne répond « Oui » */
.scene-terminal .tm-perm { margin: 10px 0 0; padding: 7px 10px 8px; border: 1px solid var(--accent-btn); border-radius: 8px; }
.scene-terminal .tm-q { margin: 0 0 4px; font-weight: 700; }
.scene-terminal .tm-opts { display: flex; align-items: center; gap: 6px; margin: 0; }
.scene-terminal .tm-opt { display: flex; align-items: center; padding: 1px 8px 1px 6px; border-radius: 5px; color: #5F6672; white-space: nowrap; }
.scene-terminal .tm-yes { font-weight: 700; color: var(--accent-text); background: #E3EBFE; transition: transform .15s ease, background-color .2s var(--ease); }
.scene-terminal .tm-yes .tm-gt { margin-right: 6px; color: var(--accent-text); }
.scene-terminal.s-press .tm-yes { transform: scale(.94); background: #CFDCFC; }
.scene-terminal .tm-okl { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-weight: 700; color: var(--accent-text); }
.scene-terminal .tm-okl .ui-ok { width: 16px; height: 16px; }
.scene-terminal .tm-okl .ui-ok svg { width: 11px; height: 11px; }
.scene-terminal .tm-end { display: flex; align-items: center; gap: 9px; margin: 7px 0 0; font-weight: 700; }
.scene-terminal .tm-dot { flex: none; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: #1F2328; }

/* Champ de saisie de Claude Code */
.scene-terminal .tm-input { display: flex; align-items: flex-start; min-height: 32px; margin: 10px 0 0; padding: 6px 10px; border: 1px solid #C9CED6; border-radius: 8px; }
.scene-terminal .tm-in { min-width: 0; white-space: pre-wrap; }
.scene-terminal .tm-typed.busy::after { content: ""; display: inline-block; width: 7px; height: 1.2em; margin-left: 1px; vertical-align: -.25em; background: #1F2328; }

/* Dossier du projet : du vrac aux dossiers clients */
.scene-terminal .tm-files { min-width: 0; min-height: 0; padding: 10px 8px; overflow: hidden; background: #F7F8FA; border-left: 1px solid #E6E8EC; }
.scene-terminal .tm-fh { display: flex; align-items: center; gap: 7px; height: 24px; margin: 0 0 4px; padding: 0 6px; font: 600 12px/1 var(--f); color: #1F2328; white-space: nowrap; }
.scene-terminal .tm-fh svg { flex: none; width: 15px; height: 15px; color: #8A93A2; }
.scene-terminal .tm-fl { list-style: none; margin: 0; padding: 0 0 0 12px; }
.scene-terminal .tm-f { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--spring), opacity .3s var(--ease); }
.scene-terminal .tm-f > div { min-height: 0; overflow: hidden; display: flex; align-items: center; gap: 7px; padding: 0 6px; font: 400 12px/25px var(--f); color: #1F2328; white-space: nowrap; }
.scene-terminal .tm-f span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scene-terminal .tm-fi { flex: none; display: block; width: auto; height: 15px; }
.scene-terminal .tm-fo { flex: none; width: 16px; height: 16px; color: var(--accent); }
.scene-terminal .tm-f small { margin-left: auto; padding-left: 6px; font: 500 11.5px/1 var(--f); font-variant-numeric: tabular-nums; color: #5F6672; }
.scene-terminal .tm-more > div { color: #5F6672; }
.scene-terminal .tm-m2 { display: none; }
.scene-terminal .tm-new { grid-template-rows: 0fr; opacity: 0; }
.scene-terminal.s-sorted .tm-old { grid-template-rows: 0fr; opacity: 0; transition-delay: calc(var(--k, 0) * 50ms); }
.scene-terminal.s-sorted .tm-new:not(.tm-made) { grid-template-rows: 1fr; opacity: 1; transition-delay: calc(.2s + var(--k, 0) * .12s); }
.scene-terminal.s-made .tm-made { grid-template-rows: 1fr; opacity: 1; }

@container (max-width: 500px) {
  .scene-terminal .tm-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .scene-terminal .tm-term { padding: 10px 12px; font-size: 11.5px; }
  /* le terminal défile : le plus récent reste en bas, le champ se replie une fois la demande envoyée */
  .scene-terminal .tm-flow { justify-content: flex-end; }
  .scene-terminal.s-sent .tm-rin { grid-template-rows: 0fr; opacity: 0; }
  .scene-terminal.s-plan .tm-rhi { grid-template-rows: 0fr; opacity: 0; }
  .scene-terminal .tm-files { padding: 7px 10px 8px; border-left: 0; border-top: 1px solid #E6E8EC; }
  .scene-terminal .tm-fh { height: 20px; margin: 0 0 2px; padding: 0 2px; }
  .scene-terminal .tm-fl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; padding: 0; }
  .scene-terminal .tm-old:nth-child(4) { display: none; }
  .scene-terminal .tm-m1 { display: none; }
  .scene-terminal .tm-m2 { display: inline; }
  .scene-terminal .tm-f > div { padding: 0 4px; line-height: 23px; }
}
/* très petits téléphones (scène de moins de 340 px, contenu sous 310 px) : texte et marges resserrés, compteurs masqués */
@container (max-width: 310px) {
  .scene-terminal .tm-term { padding: 9px 10px; font-size: 11px; }
  .scene-terminal .tm-hi span { display: none; }
  .scene-terminal .tm-f small { display: none; }
  .scene-terminal .tm-ask { margin-top: 6px; padding: 3px 7px; }
  .scene-terminal .tm-todo, .scene-terminal .tm-okl { margin-top: 7px; }
  .scene-terminal .tm-end { margin-top: 5px; }
}

/* video.css */
/* PowerPoint devient une vidéo : l'agent écrit le script dans les notes, la diapositive devient un lecteur 16:9, une personne valide.
   États : s-agent, s-script, s-video (lecteur), s-play (scène 1), s-sc2 (scène 2), s-agentdone, s-toast, s-cursor, s-press, s-valid, s-done. */
.scene-video .vd-top { display: grid; grid-template-columns: minmax(0, 1fr); }
.scene-video .vd-id { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; min-width: 0; transition: opacity .2s var(--ease); }
.scene-video .vd-id-mp4 { opacity: 0; }
.scene-video.s-video .vd-id-ppt { opacity: 0; }
.scene-video.s-video .vd-id-mp4 { opacity: 1; transition: opacity .3s var(--ease) .2s; }
.scene-video .vd-app { flex: none; }
.scene-video .vd-id .ui-file { min-width: 0; color: #5F6672; font-weight: 400; }
.scene-video .vd-id-mp4 .ui-file { color: var(--ui-ink); font-weight: 500; }
.scene-video .vd-mp4 { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #1F2328; color: #fff; }
.scene-video .vd-mp4 svg { width: 12px; height: 12px; margin-left: 1px; }
.scene-video .vd-len { margin-left: 2px; }
.scene-video .vd-body { overflow: hidden; }

/* PowerPoint : ruban, miniatures, diapositive, notes */
.scene-video .vd-ppt { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; transition: opacity .4s var(--ease); }
.scene-video.s-video .vd-ppt { opacity: 0; }
.scene-video .vd-rib { flex: none; display: flex; align-items: stretch; gap: 16px; height: 30px; padding: 0 14px; border-bottom: 1px solid #EEF0F3; color: #3C4043; font: 400 12px/1 var(--f); white-space: nowrap; overflow: hidden; }
.scene-video .vd-rib span { display: flex; align-items: center; border-bottom: 2px solid transparent; }
.scene-video .vd-rib .on { font-weight: 600; color: var(--ui-ink); border-bottom-color: #C43E1C; }
.scene-video .vd-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 78px minmax(0, 1fr); }
.scene-video .vd-thumbs { display: flex; flex-direction: column; gap: 9px; padding: 10px 8px 0 8px; border-right: 1px solid #EEF0F3; overflow: hidden; }
.scene-video .vd-th { display: grid; grid-template-columns: 11px minmax(0, 1fr); gap: 5px; align-items: start; }
.scene-video .vd-th b { font: 400 11px/1 var(--f); color: var(--ui-mute); text-align: right; }
.scene-video .vd-mini { display: flex; flex-direction: column; gap: 3px; aspect-ratio: 16 / 9; padding: 6px 7px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px #D9DEE6; }
.scene-video .vd-mini i { display: block; height: 3px; border-radius: 1px; background: #D3D8E0; }
.scene-video .vd-mini i:first-child { width: 70%; height: 4px; background: #8C95A3; }
.scene-video .vd-mini i:nth-child(3) { width: 55%; }
.scene-video .vd-th.on .vd-mini { box-shadow: 0 0 0 2px #C43E1C; }
.scene-video .vd-canvas { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #EFF1F4; }
.scene-video .vd-box { flex: 1; min-height: 0; display: grid; place-items: center; padding: 10px 14px; container-type: size; }
.scene-video .vd-slide { position: relative; display: flex; flex-direction: column; width: min(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9; padding: 7% 8% 0; background: #fff; box-shadow: 0 0 0 1px #DADDE2; container-type: inline-size; }
.scene-video .vd-st { margin: 0; font: 600 max(13px, 7cqw)/1.15 var(--f); letter-spacing: -0.01em; color: var(--ui-ink); }
.scene-video .vd-ul { margin: max(7px, 4.5cqw) 0 0; padding: 0 0 0 1.1em; display: grid; gap: max(3px, 2cqw); font: 400 max(11px, 4.6cqw)/1.25 var(--f); color: #3C4043; }
.scene-video .vd-ul li::marker { color: #8C95A3; }
.scene-video .vd-sfoot { position: absolute; left: 8%; bottom: 6%; font: 400 max(11px, 3.4cqw)/1 var(--f); color: #5F6672; }
.scene-video .vd-notes { position: relative; flex: none; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; background: #fff; border-top: 1px solid #E3E6EA; color: var(--ui-ink); font: 400 12px/1.3 var(--f); white-space: nowrap; overflow: hidden; }
.scene-video .vd-ph { color: #5F6672; }
.scene-video .vd-tag, .scene-video .vd-script { display: none; }
.scene-video.s-script .vd-ph { display: none; }
.scene-video.s-script .vd-tag { display: inline-flex; }
.scene-video.s-script .vd-script { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scene-video .vd-script.busy::after { content: ""; display: inline-block; width: 1.5px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--ui-ink); }

/* Lecteur vidéo : cadre 16:9, scène en aplats, sous-titre, barre de lecture */
.scene-video .vd-player { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 10px; background: #fff; opacity: 0; pointer-events: none; container-type: size; transition: opacity .4s var(--ease); }
.scene-video.s-video .vd-player { opacity: 1; }
.scene-video .vd-frame { position: relative; flex: none; width: min(100cqw - 24px, (100cqh - 62px) * 16 / 9); aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #EEF3FE; box-shadow: 0 0 0 1px #DCE3F0; }
.scene-video .vd-scene { display: block; width: 100%; height: 100%; }
.scene-video .vd-scene text { font-family: var(--f); }
.scene-video .vd-h { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; fill: #1F2328; }
.scene-video .vd-s { font-size: 12.5px; font-weight: 400; fill: #5F6672; }
.scene-video .vd-pop { opacity: 0; transform: translateY(7px); transition: opacity .3s var(--ease) var(--d, 0s), transform .55s var(--spring) var(--d, 0s); }
.scene-video.s-play .vd-s1 .vd-pop, .scene-video.s-sc2 .vd-s2 .vd-pop { opacity: 1; transform: none; }
.scene-video .vd-s1 { transition: opacity .25s var(--ease); }
.scene-video.s-sc2 .vd-s1 { opacity: 0; }
.scene-video .vd-big { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #1F2328; color: #fff; opacity: 0; transform: scale(.8); transition: opacity .25s var(--ease), transform .45s var(--spring-pop); }
.scene-video .vd-big svg { width: 22px; height: 22px; margin-left: 3px; }
.scene-video.s-video .vd-big { opacity: 1; transform: none; transition-delay: .25s; }
.scene-video.s-play .vd-big { opacity: 0; transform: scale(1.15); transition-delay: 0s; }
.scene-video .vd-sub { position: absolute; left: 0; right: 0; bottom: 7%; margin: 0; display: grid; justify-items: center; }
.scene-video .vd-sub span { grid-area: 1 / 1; padding: 5px 9px; border-radius: 5px; background: #1F2328; color: #fff; font: 500 12.5px/1.2 var(--f); white-space: nowrap; opacity: 0; transition: opacity .25s var(--ease); }
.scene-video.s-play .vd-sub .vd-sa { opacity: 1; }
.scene-video.s-sc2 .vd-sub .vd-sa { opacity: 0; }
.scene-video.s-sc2 .vd-sub .vd-sb { opacity: 1; }
.scene-video .vd-ctrl { flex: none; display: flex; align-items: center; gap: 10px; width: min(100cqw - 24px, (100cqh - 62px) * 16 / 9); height: 38px; padding: 0 2px; color: #3C4043; opacity: 0; transition: opacity .3s var(--ease); }
.scene-video.s-play .vd-ctrl { opacity: 1; }
.scene-video.s-toast .vd-ctrl { opacity: 0; }
.scene-video .vd-pp { position: relative; flex: none; width: 16px; height: 16px; }
.scene-video .vd-pp svg { position: absolute; inset: 0; width: 16px; height: 16px; }
.scene-video .vd-pause { display: none; }
.scene-video.s-play .vd-play { display: none; }
.scene-video.s-play .vd-pause { display: block; }
.scene-video.s-toast .vd-play { display: block; }
.scene-video.s-toast .vd-pause { display: none; }
.scene-video .vd-track { position: relative; flex: 1; height: 4px; border-radius: 2px; overflow: hidden; background: #DDE1E8; }
.scene-video .vd-track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #3C4043; }
.scene-video.s-play .vd-track i { width: 35%; transition: width 2.6s linear; }
.scene-video .vd-time { flex: none; font: 400 12px/1 var(--f); font-variant-numeric: tabular-nums; color: var(--ui-mute); }
.scene-video .vd-time b { font-weight: 500; color: var(--ui-ink); }

/* La bulle de validation vit dans le lecteur : centrée sous la vidéo, à la place de la barre de lecture qui s'efface */
.scene-video .vd-player .ui-toast { bottom: max(4px, (100cqh - 10px - min((100cqw - 24px) * 9 / 16, 100cqh - 62px) - 44px) / 2); }

@container (max-width: 500px) {
  .scene-video .vd-main { grid-template-columns: minmax(0, 1fr); }
  .scene-video .vd-thumbs, .scene-video .vd-rib .vd-x2 { display: none; }
  .scene-video .vd-rib { gap: 14px; height: 28px; padding: 0 12px; }
  .scene-video .vd-box { padding: 8px 12px; }
  .scene-video .vd-notes { height: 38px; padding: 0 12px; }
  .scene-video .vd-player { padding-top: 8px; }
  .scene-video .vd-frame, .scene-video .vd-ctrl { width: min(100cqw - 20px, (100cqh - 58px) * 16 / 9); }
  .scene-video .vd-ctrl { height: 34px; }
  .scene-video .vd-sub span { font-size: 12px; padding: 4px 8px; }
  .scene-video .vd-player .ui-toast { bottom: max(4px, (100cqh - 8px - min((100cqw - 20px) * 9 / 16, 100cqh - 58px) - 44px) / 2); }
}
@container (max-width: 380px) {
  .scene-video .vd-app, .scene-video .vd-rib .vd-x1 { display: none; }
}
.scene-video .ui-agent { --prog: 3.2s; }