@font-face {
  font-family: Inter;
  src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════════
   h3.css — le système de H3.

   `base.css` reste la réplique de la production origami-corp.com, reprise
   de G octet pour octet : c'est l'invariant d'accueil. Tout ce qui suit
   est la surface propre de H2.

   ─── CE QUE H3 SUPPRIME, ET NE MASQUE PAS ───────────────────────────

   Retirés du FICHIER, pas mis en `display: none` : la fenêtre de
   traitement de texte et son ruban, la zone de contrôle Finance, la
   coche causale, le feutre, l'explorateur interne, et toute la matière
   Microsoft — qui vit désormais dans sa propre vue.

   ─── CE QUE H3 APPORTE ──────────────────────────────────────────────

   · un CHROME macOS sur chaque fenêtre : barre de titre légère et trois
     pastilles rouge/jaune/verte, qui définissent la matière « fenêtre »
     et ne portent aucun statut ;
   · une FENÊTRE à deux plans : en haut la FAÇADE — la boîte email de
     l'équipe et la pièce ouverte à côté — et en dessous, sur toute la
     largeur, l'ARRIÈRE-PLAN, où l'agent cherche, parcourt et retient.
     C'est la composition qui dit lequel se passe devant et lequel
     derrière ;
   · un APLAT rectangulaire droit derrière la plage citée, déployé par
     peint sous les mots et lu sur le scroll : ni feutre, ni capsule ;
   · une pile de trois BANNERS ancrée au bas de la fenêtre Finance ;
   La palette sémantique reste à cinq états — teinte, forme et mot
   ensemble — avec `VALIDÉ` et `CORRECTION` renommés depuis H2.

   ─── AUDIT DES BORDURES ─────────────────────────────────────────────

   Défaut corrigé depuis G : les filets colorés servaient de sémantique
   (`.limit-card { border-left: 2px solid red }`, `.zrow[data-k]`), et
   des contours décoratifs traînaient un peu partout. Une bordure ne dit
   rien : elle entoure. C'est la matière, l'espace, la typographie et le
   fond qui portent la hiérarchie.

   Règle de H : toute déclaration `border` restante porte, sur la même
   ligne, un marqueur `BORDER · <catégorie> · <raison>`. Cinq
   catégories, et cinq seulement :

     structure — sépare deux zones d'une même surface
     input     — dessine une commande manipulable
     focus     — rend le focus clavier visible
     document  — contour ou filet nécessaire à la LECTURE d'un document
     invariant — accueil et questionnaire, préservés tels quels

   `BORDERS.md` reprend la liste, ligne par ligne. Le vérificateur relit
   ce fichier et échoue si une seule déclaration `border` n'a pas son
   marqueur.

   ─── ÉCHELLE ────────────────────────────────────────────────────────

   4 8 12 16 20 24 32 40 48 64. Les seules micro-valeurs admises sont de
   la géométrie interne, jamais du layout : filets 1–2 px, rayons
   matériels, et les constantes d'appareil (coque, fente, dossier) qui
   décrivent un objet.

   ─── MATIÈRE ────────────────────────────────────────────────────────

   Planche blueprint en fond, papier blanc par-dessus. Aucun beige,
   aucun noir de console, aucun dégradé « IA », aucun glow. La couleur ne
   marque qu'un état : rouge = limite, vert = correct, encre = actif.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── espace ── */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;
  --container: 1600px;
  --gutter: 24px;
  --card-pad: 24px;
  --section: 64px;

  /* ── rayons ──
     Trois valeurs portent la surface, et trois seulement : 8 pour la
     navigation et les petits contrôles, 16 pour les cards et les
     fenêtres, 99 px pour les boutons — un CTA est une pilule, et sur un
     carré de 44 px la pilule EST le cercle des flèches de pagination.
     Le rayon intermédiaire de 12 px a disparu du fichier : il n'était
     ni un contrôle ni une card, et il brouillait les deux. */
  --r-s: 8px; --r-l: 16px; --r-xl: 24px;
  --r-screen: 44px; --r-body: 56px;

  /* ── encre : TROIS niveaux, jamais quatre ──
     `base.css` est chargé avant et pose ses propres jetons ; ils sont
     repris ici sans que le fichier invariant soit touché. La hiérarchie
     se lit à trois encres :

       #292929  principal   — le texte qu'on lit
       #5D5D5D  secondaire  — ce qui accompagne, y compris tout ce que
                              G appelait « muted » : deux gris pour un
                              même rang ne hiérarchisaient rien
       #9E9E9E  tertiaire   — les repères, codes et micro-libellés

     `--text-muted` reste déclaré parce que des dizaines de règles le
     citent : il vaut désormais exactement le secondaire. */
  --text: #292929;
  --text-secondary: #5D5D5D;
  --text-muted: #5D5D5D;
  --text-tertiary: #9E9E9E;

  --line: rgba(0, 0, 0, .09);
  --line-soft: rgba(0, 0, 0, .05);
  --line-ink: rgba(0, 0, 0, .16);
  --paper: #ffffff;
  --paper-2: #f7f7fa;
  --paper-3: #eff0f3;
  --paper-4: #e6e8ec;
  --blue: #0071e3;
  --blue-ios: #0a84ff;
  --green: #3f7a4a;
  --amber: #8b4a00;
  --red: #c2261c;
  --red-deep: #a01a12;
  --red-surface: #fdf2f1;
  --red-surface-2: #f9e6e4;

  /* ── courbes ── */
  --e-out: cubic-bezier(.23, 1, .32, 1);
  --e-travel: cubic-bezier(.32, .72, 0, 1);

  /* ── constantes d'appareil : la coque iPhone est CANONIQUE ──
     Elles ne sont jamais recalculées à partir du contenu. C'est tout
     l'écart avec G, et c'est ce qui rend la géométrie mesurable. */
  --phone-w: 340px;
  --phone-screen-h: 604px;
  --phone-pad: 12px;
}



/* ══════════════ 1. MODÈLE DE SCROLL ══════════════ */
.view { position: static; inset: auto; overflow: visible; -webkit-overflow-scrolling: auto }
.view[data-state="hidden"] { display: none; visibility: visible; pointer-events: auto }
.view[data-state="leaving"] { position: fixed; inset: 0; z-index: 3; overflow: hidden; pointer-events: none }
#stage { min-height: 100dvh }



/* ══════════════ 2. PRIMITIVES ══════════════ */
button, input, textarea, select { font: inherit; color: inherit }
[hidden] { display: none !important }
:focus-visible { outline: 3px solid rgba(0, 113, 227, .35); outline-offset: 2px; border-radius: var(--r-s) } /* BORDER · focus · anneau de focus clavier, seul repère de la position au clavier */
.is-pressed { transform: scale(.978) }

.wrapf { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) }
.g12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter) }
.sec { padding: var(--section) 0 }
.sec-tight { padding: var(--s7) 0 }

/* Les trois décisions de fin de page forment un seul bento : le parcours
   et le diagnostic restent à gauche, l'offre d'exploitation de l'agent
   garde toute la colonne droite. */
.services-bento {
  --bento-enter: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(400px, .78fr);
  grid-template-areas:
    "offers models"
    "diagnostic models";
  gap: var(--s4); min-height: 100svh; align-content: center; align-items: stretch;
  margin-top: 0; padding: var(--s7) 0;
  opacity: var(--bento-enter);
  filter: blur(calc((1 - var(--bento-enter)) * 10px));
  transform: translate3d(0, calc((1 - var(--bento-enter)) * -100svh), 0);
}
.services-bento > .sec-tight { min-width: 0; padding: 0 }
.bento-diagnostic { grid-area: diagnostic }
.bento-models { grid-area: models }
.bento-offers { grid-area: offers }
.bento-models .run-models-plate { height: 100%; padding: 0; overflow: visible }
.bento-models .run-model-ticket {
  box-shadow: 0 1px 2px rgba(20,31,48,.05), 0 12px 28px -18px rgba(20,31,48,.3);
}
@media (min-width: 1280px) {
  .bento-models .run-model-ticket { display: flex; flex-direction: column; height: 100% }
  .bento-models .run-model-ticket-stack { flex: 1 }
  .bento-models .run-model-panel { min-height: 0 }
}

.eyebrow, .mono {
  font: 12px/1.4 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  margin: 0;
}
/* ── L'ÉCHELLE TYPOGRAPHIQUE : 12 · 13 · 14 · 24 ──
   Quatre corps, et quatre seulement. 12 pour tout ce qui accompagne —
   micro-libellés mono compris, qui vivaient entre 7 et 9 px et n'étaient
   plus lus mais devinés ; 13 pour la ligne dense ; 14 pour le texte
   courant et les contrôles ; 24 pour ce qui titre.

   Une seule exception, et elle est nommée : le DISPLAY du hero, qui
   n'appartient pas à l'échelle d'interface — il tient une ligne, une
   fois par vue, et sa taille est une fonction de la largeur du champ. */
.h1f { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -.035em; margin: var(--s3) 0 var(--s4); max-width: 20ch }
.h2f { font-size: 24px; line-height: 1.15; letter-spacing: -.02em; margin: var(--s3) 0 var(--s4); max-width: 34ch }
.h3f { font-size: 24px; line-height: 1.25; letter-spacing: -.015em; margin: 0 0 var(--s2) }
.lede { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0; max-width: 62ch }
.small { font-size: 12px; line-height: 1.5; color: var(--text-muted); margin: 0 }

/* La plaque : c'est elle qui sépare le texte du blueprint. La bordure
   est structurelle — sans elle, le bord du papier se confond avec le
   fond de la planche. */
.cardf {
  background: var(--paper);
  border: 1px solid var(--line-soft); /* BORDER · structure · bord de la plaque, sépare le papier du fond blueprint */
  border-radius: var(--r-l); padding: var(--card-pad);
  box-shadow: var(--card-shadow);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; min-width: 44px; padding: var(--s3) var(--s4);
  border: 1px solid var(--line); /* BORDER · input · contour d'un bouton, dit où l'on peut appuyer */
  /* le CTA est une PILULE : c'est la seule forme de bouton du système.
     Sur les carrés de 44 px de la pagination, 99 px donne exactement le
     cercle que ces deux flèches avaient déjà. */
  background: var(--paper); border-radius: 99px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform .12s var(--e-out), background .16s var(--e-out), border-color .16s var(--e-out);
}
.btn-primary { background: var(--text); color: #fff; border-color: transparent } /* BORDER · input · le bouton primaire porte sa matière pleine, son contour s'efface */
.btn-s { min-height: 36px; padding: var(--s2) var(--s3); font-size: 13px; font-weight: 600 }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed }
@media (hover: hover) { .btn:not([disabled]):not([aria-disabled="true"]):hover { border-color: var(--line-ink) } } /* BORDER · input · le contour déjà présent se renforce au survol */

.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: var(--s2) var(--s4); margin: var(--s6) 0 0;
  border: 1px solid var(--line-soft); /* BORDER · input · contour du bouton retour, posé sur le blueprint */
  border-radius: 99px;
  background: var(--paper); box-shadow: var(--card-shadow);
  color: var(--text-secondary); font-weight: 600; font-size: 14px; cursor: pointer;
  transition: transform .12s var(--e-out), border-color .16s var(--e-out);
}
.chip svg { color: var(--blue) }

.view .footer { align-items: center }
.foot-plate { max-width: 78ch; text-align: left }
.footer .foot-plate p { margin: 0 }

/* la source officielle : un lien, lisible, ouvrable */
.src {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s3);
  align-items: center; min-height: 44px; padding: var(--s2) var(--s3);
  border-radius: var(--r-s); background: var(--paper-2); text-decoration: none; color: var(--text-secondary);
}
.src svg { color: var(--blue) }
.src-t { font-size: 12px; font-weight: 650; line-height: 1.35 }
.src-u { grid-column: 2; font: 12px var(--font-mono); color: var(--text-tertiary); word-break: break-all }
@media (hover: hover) { .src:hover { background: #eaf4ff; color: #0562b8 } }



/* ══════════════ 3. ACCUEIL — invariant de production ══════════════
   Matière décidée par Tomy et reprise de G sans modification. Seule la
   COPY de la carte a changé. */
.card-services {
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255, 255, 255, .76), rgba(238, 246, 255, .52));
  border-color: rgba(255, 255, 255, .75); /* BORDER · invariant · matière de l'accueil de production, préservée telle quelle */
  box-shadow: 0 var(--s3) var(--s6) rgba(20, 55, 90, .12), inset 0 1px 0 #fff;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}
.card-services:before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle 130px at var(--mx, 80%) var(--my, 20%), rgba(255, 255, 255, .8), transparent);
}
/* Hors de l'échelle à quatre corps, et volontairement : l'indice
   « Ouvrir » n'existe QUE sur l'accueil de production — il est masqué dès
   que la carte entre dans la vue Services. Le design-system s'arrête au
   bord de l'accueil. */
.svc-hint {
  position: absolute; right: var(--s6); bottom: var(--s4); z-index: 4;
  font: 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--blue);
}



/* ══════════════ 4. TÊTE DE SCÈNE ══════════════ */
.svc-head { align-items: start; padding: var(--s7) 0 var(--s6) }
.svc-head-copy { grid-column: span 7 }
/* les deux entrées de Services IA : le diagnostic et les
   démonstrations. Secondaire par la taille, jamais par la clarté. */
.svc-entry { margin-top: var(--s4); font-size: 14px; color: var(--text-muted) }
.svc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) }
.svc-actions .small { margin: 0 }
/* ── LE RÉSUMÉ D'ACCUEIL SE RETIRE, IL NE DISPARAÎT PAS ──
   Il était en `display: none` dès que la vue basculait : la phrase
   s'évaporait d'un coup, AVANT même que la carte ne commence son
   trajet, et pendant le vol — la carte est alors dans `#morph-layer`,
   hors de `#view-services` — la règle ne s'appliquait plus, si bien que
   le texte revenait puis repartait. Deux sauts pour une seule sortie.

   L'état est maintenant porté par la carte elle-même, donc il la suit
   dans la couche de morph. La phrase s'efface en fondu, se floute
   légèrement pour masquer le repli, et la hauteur se referme sur une
   valeur mesurée. Le retour Accueil rejoue exactement l'inverse. */
.card-services .card-desc {
  overflow: hidden; max-height: var(--desc-h, none);
  transition: opacity .24s var(--e-out), filter .3s var(--e-out),
              transform .34s var(--e-out), max-height .38s var(--e-out),
              margin-top .38s var(--e-out);
}
.card-services[data-doorway="open"] .card-desc {
  opacity: 0; filter: blur(5px); transform: translate3d(0,-6px,0);
  max-height: 0; margin-top: -6px; pointer-events: none;
}
.svc-slot { grid-column: span 5; min-height: 208px }
.svc-slot > .card-services { height: 100%; min-height: 208px; opacity: 1; animation: none; cursor: default }
.svc-slot > .card-services .svc-hint { display: none }



/* ══════════════ 6. LES FAMILLES MÉTIER ══════════════
   Une icône littérale, un résultat et une phrase courte : le choix
   mène directement à la démonstration. */
.rail-plate { display: grid; gap: var(--s5); padding: 0; background: transparent }
.rail-head { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); align-items: baseline; gap: var(--s6) }
.metier-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) }
.metier-card {
  position: relative; isolation: isolate;
  display: grid; align-content: start; gap: var(--s2);
  min-height: 0; padding: var(--s4);
  text-align: left; cursor: pointer;
  background: var(--paper); border: 0; border-radius: var(--r-l);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  visibility: visible;
  transition: transform .76s cubic-bezier(.22,1,.36,1), opacity .62s cubic-bezier(.22,1,.36,1), filter .68s cubic-bezier(.22,1,.36,1), visibility 0s, box-shadow .2s var(--e-out), background .16s var(--e-out);
}
.metier-rail[data-focus] .metier-card:not([aria-current="true"]) {
  visibility: hidden; opacity: 0; filter: blur(5px);
  transform: translate3d(var(--metier-exit-x), 0, 0) scale(.97);
  pointer-events: none;
  transition: transform .54s cubic-bezier(.22,1,.36,1), opacity .42s cubic-bezier(.22,1,.36,1), filter .48s cubic-bezier(.22,1,.36,1), visibility 0s linear .54s;
}
.metier-rail[data-focus] .metier-card[aria-current="true"] { z-index: 2; transform: translate3d(0,-4px,0); box-shadow: var(--card-shadow) }
.metier-motion { display: none }
.metier-card:after { content: none }
@media (hover: hover) and (pointer: fine) {
  .metier-card:hover { transform: translate3d(0,-3px,0); box-shadow: var(--card-shadow) }
}
.metier-card:active { transform: scale(.99) }
.metier-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s2) }
.metier-code { font: 12px var(--font-mono); letter-spacing: .06em; color: var(--text-tertiary) }
.metier-n { font-size: 14px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25 }
.metier-l { font-size: 12px; line-height: 1.45; color: var(--text-muted) }
.metier-cur {
  display: none; padding: 1px var(--s2); border-radius: 4px;
  background: var(--s-lu-bg); color: var(--s-lu-ink);
  font: 12px var(--font-mono); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.metier-card[aria-current="true"] { background: var(--s-lu-bg) }
.metier-card[aria-current="true"] .metier-cur { display: inline-block; background: var(--paper) }
.metier-card[aria-current="true"] .metier-l { color: var(--text-secondary) }

.metier-icon {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--r-s); background: var(--paper-2); color: var(--text-secondary);
}
.metier-card[aria-current="true"] .metier-icon { background: var(--paper); color: var(--s-lu-ink) }
#metier-slot:empty { display: none }
#metier-slot > .metier-card { width: 100%; min-height: 0; cursor: default; background: var(--paper) }
.travel-spacer { min-width: 0 }



/* ══════════════ A. PALETTE SÉMANTIQUE ══════════════
   H avait retiré les pilules décoratives de G — c'était juste — puis
   avait retiré la couleur avec elles. Une interface de contrôle sans
   vert, sans ambre et sans rouge ne se lit pas plus vite : tout y a le
   même poids.

   H2 réintroduit CINQ états, au sens de Fluent 2 et de WCAG : la
   couleur porte un statut, jamais une catégorie, et jamais seule. Chaque
   état a sa teinte, sa forme d'icône et son mot.

     lu         bleu         œil               la valeur a été lue
     valide     vert         coche cerclée     le contrôle passe
     correction rouge-orangé flèche de reprise il échoue, c'est réparable
     manquant  ambre       triangle         la donnée est absente
     nonfait   rouge       cercle barré     hors périmètre, jamais fait

   `correction` et `manquant` ne partagent NI teinte, NI forme, NI mot :
   ce sont deux problèmes différents. */
:root {
  --s-lu: #0b5fbf;        --s-lu-bg: #eef4fd;      --s-lu-ink: #08498f;
  --s-valide: #1f7a3d;   --s-valide-bg: #ecf6ef; --s-valide-ink: #175e2f;
  --s-correction: #b4400f;  --s-correction-bg: #fdf0e9; --s-correction-ink: #8d3009;
  --s-manquant: #8a5a00;  --s-manquant-bg: #fbf3e2; --s-manquant-ink: #6d4700;
  --s-nonfait: #b3261e;   --s-nonfait-bg: #fdeeed;  --s-nonfait-ink: #8c1c16;
}

/* la puce d'état : teinte + icône + mot, les trois ensemble.
   Rayon 4 px et pas 99 px : ce n'est pas une pilule de catégorie, c'est
   un état accolé à une valeur. */
.st {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 2px var(--s2); border-radius: 4px;
  font: 12px/1.3 var(--font-mono); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
}
.st-i { display: flex }
.st[data-k="lu"]       { background: var(--s-lu-bg);       color: var(--s-lu-ink) }
.st[data-k="valide"]  { background: var(--s-valide-bg);  color: var(--s-valide-ink) }
.st[data-k="correction"] { background: var(--s-correction-bg); color: var(--s-correction-ink) }
.st[data-k="manquant"] { background: var(--s-manquant-bg); color: var(--s-manquant-ink) }
.st[data-k="nonfait"]  { background: var(--s-nonfait-bg);  color: var(--s-nonfait-ink) }


/* ══════════════ G. CHROME macOS ══════════════
   Toute fenêtre desktop simulée porte le même chrome : barre de titre
   légère de hauteur stable, et trois pastilles rouge/jaune/verte en
   haut à gauche.

   Ces pastilles définissent la MATIÈRE « fenêtre ». Elles ne portent
   aucun statut — c'est la palette sémantique qui s'en charge — et comme
   aucune action de storyboard ne leur est attachée, elles ne sont pas
   annoncées comme des contrôles.

   Interprétation Origami de conventions de plateforme : ni asset, ni
   capture, ni reproduction d'un chrome existant. */
.os-bar {
  display: flex; align-items: center; gap: var(--s3);
  height: 32px; padding: 0 var(--s4); flex: none;
  background: var(--paper-2);
  box-shadow: inset 0 -1px 0 var(--line-soft);
}
.os-lights { display: flex; gap: var(--s2); flex: none }
.os-lights i { width: 11px; height: 11px; border-radius: 50%; display: block }
.os-lights i[data-l="close"] { background: #ec6a5e }
.os-lights i[data-l="min"]   { background: #f4bf50 }
.os-lights i[data-l="zoom"]  { background: #61c454 }
.os-title {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-size: 12px; font-weight: 650; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.os-sim { flex: none; font: 12px var(--font-mono); letter-spacing: .04em; color: var(--s-manquant-ink) }

/* ══════════════ H. LA SCÈNE — le mockup comme preuve ══════════════ */
.scene { position: relative; height: 620vh }
.scene-grid {
  position: sticky; top: 0; min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--s4) 0;
}
.stage-col {
  width: min(100%, 1120px); min-width: 0;
  display: grid; align-content: center;
}
.stage-sticky {
  --scene-exit: 0;
  position: relative; display: grid; justify-items: stretch;
  opacity: calc(1 - var(--scene-exit));
  filter: blur(calc(var(--scene-exit) * 10px));
}
.metier-selection { z-index: 30; height: 40px; margin: 0 0 8px; justify-self: start }
.metier-selection-card {
  height: 40px; display: grid; grid-template-columns: 28px auto minmax(0,1fr); align-items: center; gap: 8px;
  max-width: min(520px, calc(100vw - 40px)); padding: 0 12px 0 7px; border-radius: 10px;
  background: rgba(255,255,255,.94); box-shadow: 0 10px 28px rgba(27,35,48,.1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: metierSelectionIn .45s cubic-bezier(.22,1,.36,1) both;
}
.metier-selection-card > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #eef5fc; color: #0077e6 }
.metier-selection-card small { color: #777777; font-size: 12px; line-height: 16px }
.metier-selection-card b { overflow: hidden; color: #333333; font-size: 13px; font-weight: 500; line-height: 16px; text-overflow: ellipsis; white-space: nowrap }
@keyframes metierSelectionIn { from { opacity: 0; filter: blur(8px); transform: translateY(-10px) } to { opacity: 1; filter: none; transform: none } }
#stage-slot { width: 100%; display: grid; justify-items: center }
/* ══════════════ I. LA FENÊTRE — façade et arrière-plan ══════════════

   ─── CE QUE LA COMPOSITION DIT MAINTENANT ───────────────────────────

   La fenêtre montrait trois zones de même rang : conversation,
   document, contexte. Le référentiel documentaire venait remplacer la
   conversation dans la colonne gauche, si bien que la page affirmait,
   par sa géométrie, qu'un visiteur devait regarder un explorateur de
   fichiers travailler. C'est l'inverse de la promesse : votre équipe
   voit une boîte email et une pièce ouverte, l'agent va chercher
   ailleurs.

   Deux plans, séparés par une ligne horizontale :

     · en HAUT, la FAÇADE — l'email reçu, la réponse préparée, et la
       pièce ouverte à côté. C'est ce qu'une personne a sous les yeux ;
     · en BAS, sur toute la largeur, l'ARRIÈRE-PLAN — la requête, les
       pièces parcourues, le passage retenu, les sorties. C'est ce qui
       se fait sans elle, et qui reste montrable.

   Le document reste plus large que la façade : c'est lui qu'on lit. */
.os-deck { width: 100% }
.os {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: 100%; height: 620px;
  background: var(--paper); border-radius: var(--r-l); overflow: hidden;
  border: 1px solid var(--line); /* BORDER · structure · cadre de la fenêtre, il délimite la surface de travail */
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.07);
}
/* 348 px : à 12 px, « Façade · ce que vous voyez » et « Boîte email »
   ne tenaient plus côte à côte dans 324 et le nom de la zone tombait en
   points de suspension. Le document reste le plus large des deux, ce qui
   est la règle de la composition. */
.os-body { display: grid; grid-template-columns: 348px minmax(0, 1fr); min-height: 0 }

/* ── zone 1 : la FAÇADE, une boîte email ── */
.os-chat {
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--s2);
  padding: var(--s3); min-height: 0; background: var(--paper-2);
  box-shadow: inset -1px 0 0 var(--line-soft);
}
.os-zone {
  display: flex; align-items: center; gap: var(--s1); margin: 0; min-width: 0;
  /* .02em et non .08 : à 12 px l'interlettrage large coûtait une
     vingtaine de pixels sur une ligne qui doit tenir entière — un nom de
     zone tronqué ne nomme plus rien. */
  font: 12px var(--font-mono); letter-spacing: .02em; text-transform: uppercase; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.os-zone-i { display: flex; flex: none }
.os-zone-front { color: var(--s-lu-ink) }
.os-zone-back { color: var(--text-muted) }
.front-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-width: 0 }
.front-app {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  font: 12px var(--font-mono); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.chat { display: grid; gap: var(--s2); align-content: start; overflow-y: auto; min-height: 0 }
.msg { opacity: calc(var(--t, 0)); transform: translate3d(0, calc((1 - var(--t, 0)) * 6px), 0) }
/* le message reçu : une carte d'email, pas une bulle noire alignée à
   droite — personne ne traite un contrat dans une messagerie instantanée */
.msg-you {
  display: grid; gap: var(--s2); max-width: 100%; padding: var(--s3);
  background: var(--paper); border-radius: var(--r-l);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.fmail-h { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: var(--s2); align-items: center }
.fmail-av {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper-3); color: var(--text-secondary);
  font: 12px var(--font-mono); font-weight: 700;
}
.fmail-who { display: grid; gap: 0; min-width: 0 }
.fmail-who b { font-size: 12px; letter-spacing: -.01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.fmail-who small { font-size: 12px; color: var(--text-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.fmail-t { font: 12px var(--font-mono); color: var(--text-tertiary) }
.fmail-subject { margin: 0; font-size: 12px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3 }
.fmail-body { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary) }
/* la réponse est en retrait : c'est une réplique, pas un second sujet */
.msg-agent {
  max-width: 100%; margin-left: var(--s4); padding: var(--s3); background: var(--paper);
  border-radius: var(--r-l); box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.msg-who { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); font-size: 12px; font-weight: 700; color: var(--s-lu-ink) }
.msg-av { display: flex; color: var(--s-lu) }
.fmail-state {
  margin-left: auto; padding: 1px var(--s2); border-radius: 4px;
  background: var(--s-manquant-bg); color: var(--s-manquant-ink);
  font: 12px var(--font-mono); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.msg-t { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary) }

/* ══════ L'ARRIÈRE-PLAN — une bande, sous la façade ══════
   Elle traverse toute la largeur de la fenêtre et se lit de gauche à
   droite : ce qui est cherché, ce qui est parcouru, ce qui est retenu.
   Un seul mouvement, une seule direction. */
.os-backstage {
  display: grid; gap: var(--s2); padding: var(--s2) var(--s4) var(--s3);
  background: var(--paper-2); box-shadow: inset 0 1px 0 var(--line-soft);
}
.backstage-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); min-width: 0 }
.backstage-count { flex: none; font: 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary) }
.os-gateway {
  /* La colonne des pièces prend ce que les deux autres n'utilisaient
     pas : à 12 px, trois vignettes se partageaient 44 px de libellé
     chacune et l'état débordait sur la vignette voisine. */
  display: grid; grid-template-columns: 148px minmax(0, 1fr) minmax(168px, 200px);
  gap: var(--s4); align-items: start; min-width: 0;
}
.gateway-query {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2); align-items: center;
  min-height: 48px; padding: var(--s2) var(--s3); background: var(--paper); border-radius: var(--r-s);
  opacity: var(--t, 0); transform: translate3d(0, calc((1 - var(--t, 0)) * 6px), 0);
}
.gateway-query-i { display: grid; place-items: center; width: 22px; height: 22px; color: var(--s-lu-ink) }
.gateway-query-b { display: grid; gap: 1px; min-width: 0 }
.gateway-query-b small { font: 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary) }
.gateway-query-b b { font-size: 12px; line-height: 1.3 }

/* ── LES PIÈCES PARCOURUES SONT DE PETITES PAGES ──
   C'était une liste de lignes séparées par des filets : trois fois le
   même rectangle gris, et rien qui montre qu'on LIT quelque chose. Ce
   sont maintenant des pages miniatures. Chacune reçoit un balayage
   pendant sa bande, et celle qui est retenue reçoit un aplat sur une de
   ses lignes — le même geste, au même instant, que l'aplat réel dans le
   document ouvert au-dessus. */
.gateway-items {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: var(--s2); align-items: start; min-width: 0;
}
.gateway-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto;
  gap: 2px var(--s2); align-items: center; min-width: 0;
  opacity: var(--t, 0); transform: translate3d(0, calc((1 - var(--t, 0)) * 8px), 0);
}
.gw-page {
  position: relative; grid-row: span 2; width: 40px; height: 52px; overflow: hidden;
  display: grid; align-content: start; gap: 4px; padding: 7px 5px;
  background: var(--paper); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
}
.gw-page i { display: block; width: var(--w, 80%); height: 2px; border-radius: 1px; background: var(--paper-4) }
/* l'aplat simplifié : il couvre la ligne que l'agent retient */
.gw-mark {
  position: absolute; left: 5px; top: 20px; width: 26px; height: 5px;
  background: #ffdf8a; border-radius: 1px;
  transform: scaleX(var(--hl, 0)); transform-origin: left;
}
/* le balayage de lecture : une bande qui descend la page UNE fois,
   pendant que la pièce est parcourue */
.gw-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 16px;
  background: linear-gradient(180deg, rgba(11,95,191,0), rgba(11,95,191,.20), rgba(11,95,191,0));
  transform: translate3d(0, calc(var(--scan, 0) * 68px - 16px), 0);
  opacity: var(--scan-o, 0);
}
.gateway-item-b { grid-column: 2; display: grid; gap: 1px; min-width: 0; align-self: end }
.gateway-item-b b { font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
/* une ligne, et une seule : sur trois pièces côte à côte, un libellé
   qui passe à la ligne déborde par-dessus la page miniature voisine */
.gateway-item-b small { font-size: 12px; line-height: 1.3; color: var(--text-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
/* l'état passe SOUS la vignette, sur toute la largeur de la pièce : à
   12 px, « CORRECTION » ne tient pas dans la colonne du libellé, et un
   mot d'état tronqué n'est plus un état. */
.gateway-item-state {
  grid-column: 1 / -1; align-self: start;
  display: inline-flex; align-items: center; gap: 3px;
  font: 12px var(--font-mono); font-weight: 700; text-transform: uppercase;
  white-space: nowrap; color: var(--s-lu-ink);
}
.gateway-item[data-found="1"] .gw-page { box-shadow: 0 2px 6px rgba(0,0,0,.12), inset 0 0 0 1.5px var(--s-valide) } /* BORDER · document · la pièce retenue se distingue des pièces écartées */
.gateway-item[data-k="valide"] .gateway-item-state { color: var(--s-valide-ink) }
.gateway-item[data-k="correction"] .gateway-item-state { color: var(--s-correction-ink) }
.gateway-item[data-k="manquant"] .gateway-item-state { color: var(--s-manquant-ink) }
.gateway-item[data-k="manquant"] .gw-page { background: repeating-linear-gradient(45deg, var(--paper-2) 0 4px, var(--paper-3) 4px 8px) }
.gateway-item[data-k="manquant"] .gw-page i { opacity: .3 }
.os-gateway[data-gateway-kind="finance"] .gateway-item[data-target="1"] .gateway-item-state { color: var(--s-correction-ink) }

.gateway-result {
  display: grid; gap: var(--s1); align-content: start; min-width: 0;
  opacity: var(--t, 0); transform: translate3d(0, calc((1 - var(--t, 0)) * 6px), 0);
}
.gateway-result-state { display: flex; align-items: center; gap: var(--s1); margin: 0; font: 12px var(--font-mono); font-weight: 700; text-transform: uppercase; color: var(--s-valide-ink) }
/* le passage retenu, brut : la citation sourcée vit en façade, là où
   une personne la lit — l'afficher deux fois serait deux preuves */
.gateway-found {
  margin: 0; padding: var(--s2); border-radius: var(--r-s);
  background: var(--paper); font-size: 12px; line-height: 1.45; color: var(--text-secondary);
}
.gateway-src { margin: 0; font: 12px var(--font-mono); line-height: 1.4; color: var(--text-tertiary) }
/* les deux sorties : une rangée, deux colonnes, sous les pièces */
.gateway-branches {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2); margin-top: 0;
}
.gateway-branch {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 var(--s2); align-items: center;
  padding: var(--s1) var(--s3); border-radius: var(--r-s); background: var(--paper);
  opacity: var(--t, 0); transform: translate3d(0, calc((1 - var(--t, 0)) * 8px), 0);
}
.gateway-branch-i { display: flex }
.gateway-branch-b { display: grid; gap: 1px; min-width: 0 }
.gateway-branch-b b { font-size: 12px }
.gateway-branch-b span { font-size: 12px; line-height: 1.3; color: var(--text-muted) }
.gateway-branch-state { grid-column: 2 / -1; justify-self: start; font: 12px var(--font-mono); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3 }
.gateway-branch[data-k="valide"] { background: var(--s-valide-bg); color: var(--s-valide-ink) }
.gateway-branch[data-k="correction"] { background: var(--s-correction-bg); color: var(--s-correction-ink) }
.gateway-branch[data-selected="1"] { box-shadow: inset 0 0 0 1px currentColor }

/* la citation : elle porte sa source, et elle est visible hors survol */
.cite {
  margin: var(--s3) 0 0; padding: var(--s2) var(--s3);
  background: var(--s-lu-bg); border-radius: var(--r-s);
  opacity: var(--t, 0); transform: translate3d(0, calc((1 - var(--t, 0)) * 4px), 0);
}
.cite-q { margin: 0; font-size: 12px; line-height: 1.45; color: var(--s-lu-ink); font-style: normal }
.cite-s { margin: var(--s1) 0 0; font: 12px var(--font-mono); letter-spacing: .04em; color: var(--s-lu-ink); opacity: .8 }
.cite-go {
  margin: var(--s2) 0 0; min-height: 32px; padding: 0 var(--s2);
  border: 0; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 650; color: var(--s-lu-ink); text-decoration: underline;
  text-underline-offset: 2px;
}
.cite[data-active="1"] { box-shadow: inset 0 0 0 1px var(--s-lu) } /* BORDER · document · la citation active se distingue de ses voisines, en encre d'état */
/* Dans la façade, la citation partage la colonne avec l'email reçu et
   la réponse : elle se resserre pour que les trois tiennent ensemble
   sans que la source, qui est la preuve, tombe hors du cadre. */
.os-front .cite { margin-top: var(--s2); padding: var(--s2) }
.os-front .cite-q { font-size: 12px; line-height: 1.4 }
.os-front .cite-s { margin-top: 2px; font-size: 12px }
.os-front .cite-go { margin-top: 2px; min-height: 26px; padding: 0; font-size: 12px }
.os-front .msg-you { padding: var(--s2) var(--s3) }

/* ── zone 2 : le document, avec sa barre COURTE ── */
.os-doc { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; min-width: 0 }
.os-tools {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4);
  background: var(--paper); box-shadow: inset 0 -1px 0 var(--line-soft);
}
/* Un TÉMOIN, pas un bouton : il rapporte l'état du document et ne se
   clique pas. */
.tool {
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: 30px; min-width: 30px; padding: 0 var(--s2);
  border: 0; background: transparent; border-radius: var(--r-s);
  font-size: 12px; color: var(--text-secondary);
  transition: background .14s var(--e-out), color .14s var(--e-out);
}
.tool-i { display: flex }

.tool[data-active="true"] { background: var(--s-lu-bg); color: var(--s-lu-ink) }
.tool-state {
  margin-left: auto; font: 12px var(--font-mono); font-weight: 700;
  letter-spacing: .08em; color: var(--s-valide-ink);
}

.doc-scroll { overflow-y: auto; min-height: 0; padding: var(--s4) var(--s5); background: var(--paper-3) }
.doc {
  background: #fff; padding: var(--s6);
  border: 1px solid var(--line); /* BORDER · document · bord de la feuille, il faut voir où la page commence et finit */
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
}
.doc-k { margin: 0 0 var(--s4); font: 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted) }
.doc-t { margin: 0 0 var(--s1); font-size: 14px; font-weight: 700; letter-spacing: -.015em }
.doc-p { margin: 0 0 var(--s4); font-size: 12px; color: var(--text-muted) }
.doc-sk { margin: var(--s4) 0 }
.doc-meta {
  display: grid; gap: var(--s3); margin: 0 0 var(--s4); padding: var(--s3) 0;
  border-top: 1px solid var(--line-soft);    /* BORDER · document · filet du bloc d'en-tête de la pièce */
  border-bottom: 1px solid var(--line-soft); /* BORDER · document · filet du bloc d'en-tête de la pièce */
}
.doc-meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4) }
.doc-meta dt { font: 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary) }
.doc-meta dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums }
.cl { margin: var(--s5) 0 0 }
.cl-h { margin: 0 0 var(--s2); font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap }
/* le verdict de la clause : il tombe au temps « Sortie », un par un */
.cl-v { margin-left: auto; opacity: var(--t, 0); transform: translate3d(0, calc((1 - var(--t, 0)) * 4px), 0) }
.cl-n { font: 12px var(--font-mono); letter-spacing: .06em; color: var(--text-tertiary); margin-right: var(--s2) }
.cl-b { margin: 0; font-size: 13px; line-height: 1.8; color: var(--text-secondary) }

/* ── L'APLAT DE SURLIGNAGE ──
   Un rectangle DROIT posé DERRIÈRE la plage de texte. Sa largeur est
   celle du contenu : c'est la plage qui décide. Rayon 1 px, donc
   imperceptible — jamais une capsule. Le texte reste au-dessus.

   Il se déploie depuis le bord gauche, et cette valeur est LUE SUR LE
   SCROLL : reculer le rétracte exactement.

   ─── POURQUOI CE N'EST PLUS UNE BOÎTE ABSOLUE ───────────────────────

   L'aplat était un `<span>` frère, positionné en absolu sur la plage et
   étiré par `scaleX`. Une boîte absolue est RECTANGULAIRE : dès que la
   plage citée passe à la ligne, elle ne peut plus épouser deux
   fragments, et elle se réduit au fragment vide entre les deux — un
   filet vertical de quatre pixels à droite du texte. C'est exactement
   ce que la référence interdit : « si la citation est portée par une
   barre verticale ». Le défaut ne se voyait pas à 1440 px, où la plage
   d'exemple tenait sur une ligne ; il apparaissait à 390 px, et à toute
   largeur de colonne ou métrique de police qui fait tomber la coupure
   ailleurs.

   L'aplat est donc peint PAR LE TEXTE LUI-MÊME, en fond, avec
   `box-decoration-break: clone` : chaque fragment de ligne reçoit sa
   propre boîte de fond, donc son propre aplat. La progression reste
   `--t`, elle reste lue sur le scroll, elle reste strictement monotone
   et exactement réversible — c'est la largeur peinte qui l'exprime, au
   lieu d'une échelle. Le texte reste au-dessus de son fond par
   construction. */
.hl { position: relative; display: inline; z-index: 0 }
.hl-tx {
  position: relative; z-index: 1;
  background-image: linear-gradient(var(--hl-ink, #ffe8a3), var(--hl-ink, #ffe8a3));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: calc(var(--t, 0) * 100%) calc(100% + 3px);
  border-radius: 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hl[data-active="1"] { --hl-ink: #ffdf8a }

/* ── les banners Finance : trois au maximum, ancrés en bas ── */
/* le bas du chrome : sur toute la largeur, sous les deux colonnes.
   C'est une PILE, pas une rangée. Trois cartes côte à côte partagent
   la même ordonnée : elles ne s'empilent pas, elles s'alignent — et
   la lecture naturelle de la pile. Une ligne par résultat, dans l'ordre
   causal contrôle → écart → résultat, chacune ancrée sous la
   précédente et la dernière posée sur le contexte. */
.banners {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1);
  align-content: end;
  padding: var(--s2) var(--s4);
  background: var(--paper-2); box-shadow: inset 0 1px 0 var(--line-soft);
}
.bn {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s1) var(--s2);
  align-items: center; text-align: left; width: 100%;
  min-height: 44px; padding: var(--s2) var(--s3);
  border: 0; border-radius: var(--r-s); cursor: pointer;
  background: var(--paper);
  /* transform et opacity SEULEMENT : ni flou, ni lueur, ni échelle
     décorative. La pile monte, elle ne respire pas. */
  opacity: var(--t, 0);
  transform: translate3d(0, calc((1 - var(--t, 0)) * 10px), 0);
}
.bn-i { display: flex }
/* titre et explication sur la même ligne tant que la largeur le permet :
   c'est ce qui garde la pile compacte sans rogner la feuille au-dessus */
.bn-b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); min-width: 0 }
.bn-s { grid-column: 3; justify-self: end }
.bn-t { font-size: 12px; font-weight: 650 }
.bn-d { font-size: 12px; line-height: 1.4; color: var(--text-muted) }
.bn-s { font: 12px var(--font-mono); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap }
.bn[data-k="valide"]     { background: var(--s-valide-bg) }
.bn[data-k="valide"] .bn-i, .bn[data-k="valide"] .bn-s         { color: var(--s-valide-ink) }
.bn[data-k="correction"] { background: var(--s-correction-bg) }
.bn[data-k="correction"] .bn-i, .bn[data-k="correction"] .bn-s { color: var(--s-correction-ink) }
.bn[data-k="nonfait"]    { background: var(--s-nonfait-bg) }
.bn[data-k="nonfait"] .bn-i, .bn[data-k="nonfait"] .bn-s       { color: var(--s-nonfait-ink) }
.bn[data-active="1"] { box-shadow: inset 0 0 0 1px currentColor } /* BORDER · input · le banner sélectionné se distingue, en encre de son propre état */

/* ── zone 3 : le contexte, densité secondaire ── */
/* Le pied de fenêtre porte quatre colonnes de trace : il est SERRÉ,
   parce que chaque pixel qu'il prend est un pixel que la citation de la
   façade perd, et la citation est la preuve. */
.os-ctx {
  display: grid; gap: var(--s1); padding: var(--s2) var(--s4);
  background: var(--paper-2); box-shadow: inset 0 1px 0 var(--line-soft);
}
/* ── 02, 05 et 06 : le contexte porte trois des six temps ──
   La source se nomme au temps « Contexte », les quatre lignes de trace
   s'écrivent une par une au temps « Trace », et la ligne de validation
   s'accentue au dernier. Avant, tout était posé d'emblée : le pied de
   la fenêtre ne racontait rien. */
.ctx-src { opacity: var(--t, 1); transform: translate3d(0, calc((1 - var(--t, 1)) * 4px), 0) }
.ctx-l { opacity: var(--t, 1); transform: translate3d(0, calc((1 - var(--t, 1)) * 4px), 0) }
.ctx-l[data-hot="1"] dt { color: var(--s-valide-ink) }
.ctx-l[data-hot="1"] { box-shadow: inset 2px 0 0 var(--s-valide-ink); padding-left: var(--s2) } /* BORDER · document · la seule ligne qui attend un geste humain */
.ctx-src { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; min-width: 0 }
.ctx-k { font: 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary) }
.ctx-v { font-size: 12px; color: var(--text-secondary) }
.ctx-state {
  font: 12px var(--font-mono); font-weight: 700; letter-spacing: .08em;
  padding: 1px var(--s2); border-radius: 3px;
}
.ctx-state[data-k="lu"]     { background: var(--s-lu-bg); color: var(--s-lu-ink) }
.ctx-state[data-k="valide"] { background: var(--s-valide-bg); color: var(--s-valide-ink) }
/* quatre lignes, et quatre seulement : la limite est attachée à
   l'agent actif, jamais rassemblée dans un bloc global */
/* quatre colonnes égales : la limite se lit d'un coup d'œil, et
   aucune des quatre n'écrase les trois autres */
.ctx-lines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin: 0 }
.ctx-l { display: grid; gap: 1px; min-width: 0; align-content: start }
.ctx-l dt { font: 12px var(--font-mono); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary) }
.ctx-l dd { margin: 0; font-size: 12px; line-height: 1.35; color: var(--text-secondary) }
.ctx-l[data-k="nonfait"] dt { color: var(--s-nonfait-ink) }
.ctx-l[data-k="nonfait"] dd { color: var(--s-nonfait-ink) }
.ctx-l[data-k="validation"] dt { color: var(--s-manquant-ink) }

/* ══════════════ K. LES CRÉNEAUX ══════════════
   De vrais contrôles : sélection par texte, coche ET structure. */
.slots { display: grid; gap: var(--s2) }
.slots-note { font: 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--s-manquant-ink) }
.slot-list { display: grid; gap: var(--s1) }
.slot {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: var(--s2);
  align-items: center; text-align: left; width: 100%; min-height: 44px;
  padding: var(--s1) var(--s2); border-radius: var(--r-s); cursor: pointer;
  background: var(--paper-2);
  border: 1px solid transparent; /* BORDER · input · contour d'une option, neutre tant qu'elle n'est pas choisie */
}
.slot-mark { display: grid; place-items: center; color: var(--s-valide-ink); opacity: 0 }
.slot[aria-checked="true"] {
  background: var(--s-valide-bg);
  border-color: var(--s-valide); /* BORDER · input · le créneau choisi prend l'encre de son état, en plus de la coche et du texte */
}
.slot[aria-checked="true"] .slot-mark { opacity: 1 }
.slot-b { display: grid; gap: 0; min-width: 0 }
.slot-t { font-size: 12px; font-weight: 650 }
.slot-h { font-size: 12px; color: var(--text-muted) }
.slot-s { font: 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--s-manquant-ink); white-space: nowrap }
.slot-chosen { margin: 0; font-size: 12px; font-weight: 650; color: var(--s-valide-ink); min-height: 13px }
.slot-go { width: 100%; margin-top: var(--s1) }

/* ══════════════ 12. TÉLÉPHONE — coque canonique ══════════════
   Largeur et hauteur sont des CONSTANTES. Aucune n'est dérivée du
   contenu, aucun `scale` n'est appliqué à la scène. Le fil se remplit
   par le bas et les messages anciens sortent par le haut derrière un
   fondu progressif — jamais derrière une coupure nette. */
.phone-deck { display: grid; justify-items: center; width: 100%; margin: 0 auto }
.phone-deck-folder { grid-template-columns: 264px 1fr; gap: var(--s6); align-items: start; justify-items: stretch }
.deck-phone { display: grid; justify-items: center }
.phone { --phone-body: #0b0b0d; width: var(--phone-w); max-width: 100% }
.phone-body {
  position: relative; padding: var(--phone-pad); border-radius: var(--r-body);
  background: linear-gradient(155deg, #2a2a2e 0%, #101013 18%, #08080a 52%, #131317 84%, #34343a 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07) inset, 0 1px 2px rgba(0, 0, 0, .5),
    0 var(--s6) var(--s9) rgba(0, 0, 0, .26), 0 var(--s2) var(--s4) rgba(0, 0, 0, .14);
}
.phone-body:before, .phone-body:after {
  content: ""; position: absolute; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #3a3a40, #17171b);
}
.phone-body:before { left: -2px; top: 112px; height: var(--s7) }
.phone-body:after  { right: -2px; top: 96px;  height: var(--s10) }
.phone-screen {
  position: relative; border-radius: var(--r-screen);
  overflow: hidden;                        /* l'écran BORNE le contenu */
  background: #fff;
  height: var(--phone-screen-h);           /* constante, jamais le contenu */
  display: flex; flex-direction: column;
}
.phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 6; pointer-events: none }
.phone-notch path { fill: var(--phone-body) }

/* safe area haute : la barre d'état garde sa hauteur quoi qu'il arrive */
.sbar {
  position: relative; z-index: 5; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s6); font-size: 12px; font-weight: 650; letter-spacing: -.01em;
}
.sbar-icons { display: flex; align-items: center; gap: var(--s1) }
.sbar-icons svg { display: block }

.phone-header {
  flex: none; display: grid; gap: var(--s1); padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--line-soft); /* BORDER · structure · sépare l'en-tête de conversation du fil */
}
.phone-id { display: flex; align-items: center; gap: var(--s3); min-width: 0 }
.phone-act { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.phone-act i { flex: none; width: var(--s1); height: var(--s1); border-radius: 50%; background: var(--blue-ios) }
.phone-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #eaf4ff; color: var(--blue); font-weight: 700; font-size: 14px; flex: none }
.phone-who { display: grid; gap: var(--s1); min-width: 0 }
.phone-who b { font-size: 14px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.phone-who span { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.channel-switch {
  flex: none; align-self: center; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  width: calc(100% - var(--s6)); margin: var(--s2) var(--s3) 0; padding: 2px;
  background: #ececf0; border-radius: 9px;
}
.channel-switch button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 44px; padding: 0 var(--s3); border: 0; border-radius: 7px;
  background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 650; cursor: pointer;
  transition: background .16s var(--e-out), color .16s var(--e-out), box-shadow .16s var(--e-out);
}
.channel-switch button[aria-selected="true"] { background: var(--paper); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12) }
.channel-switch button:focus-visible { outline: 2px solid rgba(0,113,227,.38); outline-offset: 2px } /* BORDER · focus · position clavier dans le sélecteur de canal */
/* ── LE SÉLECTEUR DE CANAL — deux onglets, rien autour ──
   C'était une plaque de 64 px avec son ombre portée, l'étiquette
   « Canal simulé » en capitales et deux boutons de 44 px : plus haute
   que le pied du téléphone qu'elle commande. Il reste deux onglets
   posés directement sur le fond, avec leur icône. L'étiquette vit dans
   le `aria-label` du groupe — elle nommait le contrôle pour l'œil alors
   que les deux mots « Messages » et « Email » le font déjà. */
.channel-picker {
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 var(--s2); padding: 0; background: none; box-shadow: none;
}
.channel-picker-label {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.channel-picker .channel-switch {
  width: auto; margin: 0; padding: 2px; gap: 1px;
  grid-template-columns: auto auto;
  background: rgba(236,236,240,.9); box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.channel-picker .channel-switch button { min-height: 28px; padding: 0 var(--s3); font-size: 12px }
.channel-panel { flex: 1; min-height: 0 }
.channel-panel[hidden] { display: none }
.channel-messages { display: grid; grid-template-rows: minmax(0, 1fr) auto }
.channel-email { overflow-y: auto; padding: var(--s3) var(--s4); background: var(--paper-2) }
.channel-empty { margin: 0; min-height: 100%; display: grid; place-items: center; padding: var(--s5); text-align: center; font-size: 12px; line-height: 1.5; color: var(--text-muted) }
.phone[hidden], .email-deck[hidden] { display: none }
.email-deck { width: 100%; min-width: 0 }
.email-window {
  display: grid; grid-template-rows: 32px minmax(0, 1fr); width: 100%; height: 552px;
  overflow: hidden; background: var(--paper); border-radius: var(--r-l);
  border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.07); /* BORDER · structure · cadre de la fenêtre email simulée */
}
.email-window-bar { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4); background: var(--paper-2); box-shadow: inset 0 -1px 0 var(--line-soft) }
.email-window-title { flex: 1; text-align: center; font-size: 12px; font-weight: 650; color: var(--text-secondary) }
.email-window-sim { font: 12px var(--font-mono); color: var(--s-manquant-ink) }
.email-window-body { display: grid; grid-template-columns: 164px minmax(0, 1fr); min-height: 0 }
.email-mailbox { display: grid; align-content: start; gap: var(--s1); padding: var(--s4); background: var(--paper-2); box-shadow: inset -1px 0 0 var(--line-soft) }
.email-mailbox b { margin-bottom: var(--s2); font-size: 12px }
.email-reader { min-height: 0; overflow-y: auto; display: grid; place-items: start center; padding: var(--s6); background: var(--paper-3) }
/* ── LE FIL : la demande d'abord, la réponse ensuite ──
   Une réponse seule ne se lit pas. Le message reçu ouvre le fil et y
   reste, la réponse préparée s'ajoute dessous et se décale légèrement
   vers la droite — le décalage dit « ceci répond à cela » sans un mot. */
.email-thread { width: min(100%, 560px); display: grid; gap: var(--s3); align-content: start }
.email-received {
  display: grid; gap: var(--s2); padding: var(--s4) var(--s5);
  background: var(--paper); border-radius: var(--r-l);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
}
.email-in-head { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: var(--s2); align-items: center }
.email-in-av {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--paper-3); color: var(--text-secondary);
  font: 12px var(--font-mono); font-weight: 700;
}
.email-in-who { display: grid; gap: 1px; min-width: 0 }
.email-in-who b { font-size: 12px; letter-spacing: -.01em }
.email-in-who small { font-size: 12px; color: var(--text-muted) }
.email-in-meta { display: flex; align-items: center; gap: var(--s2) }
.email-in-tag {
  padding: 2px var(--s2); border-radius: 4px;
  background: var(--s-lu-bg); color: var(--s-lu-ink);
  font: 12px var(--font-mono); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.email-in-meta time { font: 12px var(--font-mono); color: var(--text-tertiary) }
.email-in-subject { margin: 0; font-size: 13px; font-weight: 650; letter-spacing: -.01em }
.email-in-body { display: grid; gap: var(--s1) }
.email-in-body p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-secondary) }
/* la réponse est en retrait : c'est une réplique, pas un second sujet */
.email-reader .phone-email {
  width: 100%; margin-left: var(--s6); padding: var(--s5); gap: var(--s3);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}
.email-reader .channel-empty {
  margin: 0 0 0 var(--s6); padding: var(--s4); border-radius: var(--r-l);
  background: var(--paper-2); color: var(--text-muted);
  font-size: 12px; line-height: 1.5;
}
.email-reader .email-app, .email-reader .email-status { font-size: 12px }
.email-reader .email-fields { gap: var(--s2); padding-bottom: var(--s3) }
.email-reader .email-fields > div { grid-template-columns: 52px minmax(0,1fr) }
.email-reader .email-fields dt { font-size: 12px }
.email-reader .email-fields dd { font-size: 12px }
.email-reader .email-body { gap: var(--s2) }
.email-reader .email-body p { font-size: 12px; line-height: 1.6 }
.email-reader .email-sources-k, .email-reader .email-wait { font-size: 12px }
.email-reader .email-sources li { font-size: 12px }
.email-attachments { display: grid; gap: var(--s2); padding-top: var(--s3); box-shadow: inset 0 1px 0 var(--line-soft) }
.email-attachments-title { margin: 0; font: 12px var(--font-mono); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary) }
.email-attachment-list { list-style: none; display: grid; gap: var(--s1); margin: 0; padding: 0 }
.email-attachment { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s2); align-items: center; min-height: 42px; padding: var(--s2); background: var(--paper-2); border-radius: var(--r-s) }
.email-attachment-icon { display: flex; color: var(--text-secondary) }
.email-attachment-copy { display: grid; gap: 1px; min-width: 0 }
.email-attachment-name { font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.email-attachment-meta { font-size: 12px; color: var(--text-muted) }
.email-attachment-state { font-size: 12px }

/* le fil : borné, rempli par le bas, fondu progressif en haut */
/* Le fil est coupé en deux. La TÊTE porte la demande du client et ne
   défile jamais : c'est l'entrée de la scène, elle doit rester lisible
   du début à la fin. Le FLUX porte ce que l'agent ajoute, et lui seul
   défile.

   Avant, le fil était un bloc unique en `justify-content: flex-end`
   avec `overflow: hidden`. Quand le contenu dépassait, il sortait par
   le HAUT — et le débordement d'un conteneur ancré en bas n'est pas
   atteignable au défilement, `scrollHeight` valant alors `clientHeight`.
   Le message entrant était donc coupé de 54 px en 1440 et de 160 px en
   390, à toutes les progressions, sans aucun moyen de le retrouver. */
.thread {
  flex: 1; min-height: 0; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  gap: var(--s2); padding: var(--s2) var(--s4);
}
.thread-head { display: grid; gap: var(--s2); align-content: start; min-height: 0 }
.thread-flow {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--s2);
}
/* `margin-top: auto` plutôt que `justify-content: flex-end` : tant que
   le flux tient, il reste posé en bas ; dès qu'il dépasse, la marge se
   résorbe et le défilement redevient normal, vers le bas. */
.thread-flow > :first-child { margin-top: auto }
/* Le fondu haut ne sert QUE si le flux dépasse la coque : appliqué en
   permanence, il effaçait un bloc parfaitement lisible — un dégradé qui
   cache une phrase ment sur ce qu'il reste à lire. */
.thread-flow[data-over="1"] {
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--s6), #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--s6), #000 100%);
}
.thread-day { text-align: center; font-size: 12px; color: var(--text-muted); margin: var(--s1) 0 var(--s2) }
.thread-day b { color: var(--text-secondary) }
.thread-slot { display: contents }

.b { position: relative; max-width: 82%; padding: var(--s2) var(--s3); border-radius: 20px; font-size: 13px; line-height: 1.35; word-wrap: break-word }
.b.them { align-self: flex-start; background: #e9e9eb; color: #000; border-bottom-left-radius: var(--s1) }
.b.mine { align-self: flex-end; background: var(--blue-ios); color: #fff; border-bottom-right-radius: var(--s1) }
.b.them:before, .b.mine:before { content: ""; position: absolute; bottom: 0; width: var(--s4); height: var(--s4) }
.b.them:after,  .b.mine:after  { content: ""; position: absolute; bottom: 0; width: var(--s3); height: var(--s4); background: #fff }
.b.them:before { left: -8px; background: #e9e9eb; border-bottom-right-radius: var(--s4) }
.b.them:after  { left: -12px; border-bottom-right-radius: var(--s3) }
.b.mine:before { right: -8px; background: var(--blue-ios); border-bottom-left-radius: var(--s4) }
.b.mine:after  { right: -12px; border-bottom-left-radius: var(--s3) }
.b-h { display: block; margin-top: var(--s1); font-size: 12px; opacity: .75; text-align: right }
.b.mine .b-h { color: rgba(255, 255, 255, .9) }
.b.draft { box-shadow: 0 0 0 2px rgba(10, 132, 255, .22) }
.b.draft.sent { box-shadow: none }

/* ── LES BLOCS DU FIL ENTRENT SUR LEUR BANDE ──
   `phone.js` écrivait déjà `--t` et `data-on` sur chaque bloc, mais
   AUCUNE règle ne les lisait : tout le fil était donc visible dès la
   première image, à toutes les progressions. La causalité que la scène
   prétend montrer — la demande, puis le contexte retrouvé, puis la
   proposition, puis ce qui est préparé — ne se jouait jamais.

   Transform et opacity seulement, comme la pile Finance. */
.thread-flow > [data-b] {
  opacity: var(--t, 0);
  transform: translate3d(0, calc((1 - var(--t, 0)) * 8px), 0);
}
/* La demande reste épinglée après son entrée, mais son arrivée appartient
   réellement au premier temps du récit. */
.thread-head [data-b] {
  opacity: var(--t, 0);
  transform: translate3d(0, calc((1 - var(--t, 0)) * 6px), 0);
}
/* Le composeur appartient à la coque. Le sixième temps l'accentue, il
   ne le fait pas naître. */
.composer { opacity: 1 }
.composer[data-on="1"] .composer-note { color: var(--text-secondary) }
.composer[data-on="1"] .composer-send { box-shadow: 0 0 0 3px rgba(0, 0, 0, .06) }

.thread-card {
  align-self: stretch; border-radius: var(--r-l); padding: var(--s2) var(--s3);
  font-size: 12px; line-height: 1.45; background: #fff;
  border: 1px solid var(--line-soft); /* BORDER · document · contour d'une pièce dans le fil, sans lui elle se confond avec le fond de l'écran */
}
.thread-card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2) }
.thread-card b { font-size: 12px }
.thread-card-k { font: 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary) }
.thread-card .offer { display: block; font-weight: 650; color: var(--text) }
.thread-card .fact { display: block; font-weight: 400; color: var(--text-secondary) }
.thread-card .offer + .offer, .thread-card .fact + .fact { margin-top: var(--s1) }

/* Le brouillon Mail reste une surface du téléphone : il remplace le
   panneau de sortie sans ajouter un troisième mockup à la scène. */
.phone-email {
  align-self: start; display: grid; gap: var(--s2); padding: var(--s3);
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-l); /* BORDER · document · bord du brouillon email dans son canal */
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.email-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2) }
.email-app, .email-status { display: inline-flex; align-items: center; gap: var(--s1); font-size: 12px; font-weight: 700 }
.email-app { color: var(--s-lu-ink) }
.email-status { padding: 2px var(--s2); border-radius: 4px; color: var(--s-manquant-ink); background: var(--s-manquant-bg); font: 12px var(--font-mono); text-transform: uppercase; letter-spacing: .05em }
.email-fields { margin: 0; display: grid; gap: var(--s1); box-shadow: inset 0 -1px 0 var(--line-soft); padding-bottom: var(--s2) }
.email-fields > div { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: var(--s2) }
.email-fields dt { font-size: 12px; color: var(--text-tertiary) }
.email-fields dd { margin: 0; font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.email-body { display: grid; gap: var(--s1) }
.email-body p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--text-secondary) }
.email-sources { padding-top: var(--s2); box-shadow: inset 0 1px 0 var(--line-soft) }
.email-sources-k, .email-wait { display: flex; align-items: center; gap: var(--s1); margin: 0; font: 12px var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .05em }
.email-sources-k { color: var(--s-lu-ink) }
.email-sources ul { margin: var(--s1) 0 0; padding-left: var(--s4); display: grid; gap: 1px }
.email-sources li { font-size: 12px; line-height: 1.35; color: var(--text-muted) }
.email-wait { padding: var(--s2); background: var(--s-manquant-bg); border-radius: var(--r-s); color: var(--s-manquant-ink) }

.thread-photo {
  margin: 0; align-self: stretch; border-radius: var(--r-l); overflow: hidden;
  border: 1px solid var(--line-soft); /* BORDER · document · cadre de la photo, marque le bord du cliché */
}
.photo-svg { display: block; width: 100%; height: auto }
.thread-photo figcaption { display: block; padding: var(--s2) var(--s3); font-size: 12px; color: var(--text-muted); background: var(--paper-2) }

.gate-btn { width: 100%; margin-top: var(--s3); font-size: 13px; min-height: 44px }
.gate-state { margin-top: var(--s2); color: var(--green) }

.composer {
  flex: none; display: grid; gap: var(--s2); padding: var(--s3) var(--s4) var(--s2);
  border-top: 1px solid var(--line-soft); /* BORDER · structure · sépare la zone de saisie du fil */
}
.composer > .b.mine { justify-self: end; max-width: 92% }
.composer-row { display: flex; align-items: flex-end; gap: var(--s2) }
.composer-field {
  flex: 1; min-height: 40px; display: flex; align-items: center; padding: var(--s2) var(--s3);
  border: 1px solid var(--line); /* BORDER · input · champ de saisie, contour d'une zone de texte */
  border-radius: 20px; font-size: 14px; color: var(--text-tertiary);
}
.composer-send { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #c7c7cc; color: #fff; display: grid; place-items: center }
.composer-note { font-size: 12px; line-height: 1.4; color: var(--text-muted); margin: 0 }
.composer-state {
  display: none; align-items: center; gap: var(--s2); margin: 0;
  font: 12px var(--font-mono); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--s-manquant-ink);
}
.composer-state span {
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px currentColor;
}
.composer[data-live="1"] .composer-state { display: flex }
.home-ind { flex: none; display: grid; place-items: center; padding: var(--s1) 0 var(--s2) }
.home-ind i { display: block; width: 128px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .85) }



/* ══════════════ 13. LE DOSSIER PHYSIQUE ══════════════
   La position de chaque fiche est une FONCTION DE L'ÉTAT, écrite ici.
   JS ne pose que `data-state` et `data-active` : il n'y a aucune
   trajectoire à annuler, donc le dossier est interruptible par nature.

   Profondeur : faces, décalage et OCCLUSION. Pas une lueur. */
.fold {
  --stage-h: 300px; --flap-h: 128px;
  --step: 34px; --lift: 12px;
  display: grid; gap: var(--s3);
}
.fold-stage { position: relative; height: var(--stage-h); perspective: 1000px }

/* la face arrière : c'est elle qui donne son épaisseur au dossier */
.fold-back {
  position: absolute; left: 6px; right: 6px; bottom: 0; height: calc(var(--flap-h) + 14px);
  border-radius: 4px 4px var(--r-l) var(--r-l);
  background: var(--paper-4);
  border: 1px solid var(--line); /* BORDER · document · contour de la face arrière du dossier, sans lui le volume n'a pas d'arête */
}

/* la fenêtre de sortie : les fiches vivent DEDANS et sont coupées par
   elle quand le dossier est fermé. C'est un clip statique — il ne
   s'anime jamais. */
.fold-sheets {
  position: absolute; left: 18px; right: 18px; top: 0;
  bottom: calc(var(--flap-h) - 36px);
  overflow: hidden;
}
/* Chaque fiche occupe TOUTE la fenêtre et se décale vers le bas de son
   rang : les onglets s'empilent depuis le haut, et la fiche de devant
   masque le corps de celles de derrière. C'est l'occlusion qui range la
   pile, pas une hauteur par fiche.

   Le rang précédent essayait de faire monter la fiche active au-dessus
   de la pile : son onglet sortait alors de la fenêtre de découpe, et on
   ne voyait plus laquelle était choisie. Ici l'onglet actif reste à sa
   place, la fiche se soulève de `--lift`, et son corps passe devant. */
.fold-sheet {
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(100% - 14px);
  display: grid; grid-template-rows: auto 1fr; align-content: start;
  background: var(--paper);
  border: 1px solid var(--line); /* BORDER · document · bord de la fiche, il faut voir où une pièce s'arrête et où la suivante commence */
  border-radius: var(--r-s) var(--r-s) 0 0;
  z-index: calc(10 + var(--i));
  transform: translate3d(0, 115%, 0);
  transition: transform .44s var(--e-travel);
  transition-delay: calc(var(--i) * 40ms);
  overflow: hidden;
}
.fold[data-state="open"] .fold-sheet,
.fold[data-state="extracted"] .fold-sheet {
  transform: translate3d(0, calc(14px + var(--i) * var(--step)), 0);
  transition-delay: calc(120ms + var(--i) * 58ms);
}
.fold[data-state="open"] .fold-sheet[data-active="1"],
.fold[data-state="extracted"] .fold-sheet[data-active="1"] {
  transform: translate3d(0, calc(14px + var(--i) * var(--step) - var(--lift)), 0);
  z-index: 40;
  transition-delay: 0ms;
}
/* la fiche sortie ne laisse pas un trou : l'intercalaire garde son rang */
.fold-spacer { position: absolute; width: 0; height: 0; pointer-events: none }

.fold-tab {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2);
  width: 100%; min-height: 36px; padding: var(--s2) var(--s3);
  border: 0; background: var(--paper-2); text-align: left; cursor: pointer;
  transition: background .16s var(--e-out);
}
.fold-sheet[data-active="1"] .fold-tab { background: var(--paper-3) }
.fold-tab-n { font: 12px var(--font-mono); letter-spacing: .06em; color: var(--text-tertiary) }
.fold-tab-i { display: flex; color: var(--text-secondary) }
.fold-tab-t { font-size: 13px; font-weight: 650; letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.fold-tab-m { font: 12px var(--font-mono); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fold-body { padding: var(--s3); overflow: hidden; min-width: 0 }
/* La fiche au premier plan peut être plus longue que la fenêtre du
   dossier : son corps devient parcourable plutôt que d'allonger le
   dossier ou de couper une source officielle. */
.fold-sheet[data-active="1"] .fold-body { overflow-y: auto }

/* le volet avant : il PIVOTE sur son bord bas, il ne disparaît pas.
   Son onglet est taillé dans la forme, pas posé dessus. */
.fold-flap {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--flap-h);
  z-index: 30; cursor: pointer;
  display: grid; align-content: end; gap: 2px; padding: var(--s4);
  background: var(--paper-3);
  border: 1px solid var(--line); /* BORDER · document · arête du volet avant du dossier, elle porte le pli */
  border-radius: 4px 4px var(--r-l) var(--r-l);
  transform-origin: bottom center;
  transform: rotateX(0deg);
  transition: transform .46s var(--e-travel);
  backface-visibility: hidden;
}
.fold-flap-tab {
  position: absolute; left: 18px; top: -14px; width: 96px; height: 15px;
  background: var(--paper-3);
  border: 1px solid var(--line); /* BORDER · document · onglet du dossier, il prolonge l'arête du volet */
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}
.fold[data-state="open"] .fold-flap,
.fold[data-state="extracted"] .fold-flap { transform: rotateX(-58deg) }
.fold-flap-t { font-size: 14px; font-weight: 650; letter-spacing: -.01em }
.fold-flap-n { font: 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary) }
.fold-state { margin-top: var(--s1) }

/* la fiche EN VOL : elle garde sa matière, elle gagne son ombre de prise */
.fold-sheet.is-traveling, .fold-sheet[data-dragging="1"] {
  transition: none; height: auto; min-height: var(--sheet-h);
  border-radius: var(--r-s); z-index: 60;
}
.fold-sheet[data-dragging="1"] { cursor: grabbing; box-shadow: var(--card-shadow-hover) }

/* une pièce dans le dossier */
.piece { display: grid; gap: var(--s1); min-width: 0 }
.piece-k { margin: 0; font-size: 12px; font-weight: 650; word-break: break-word; overflow-wrap: anywhere }
.piece-m { margin: 0; font-size: 12px; color: var(--text-muted) }
.piece-hl { margin: var(--s2) 0 0; padding-left: var(--s5); font-size: 12px; line-height: 1.5; color: var(--text-secondary) }
.piece-n { margin: var(--s2) 0 0; font-size: 12px; line-height: 1.4; color: var(--text-tertiary) }
.piece-act { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2) }
.piece-grip { display: flex; color: var(--text-tertiary); cursor: grab }

/* dans le fil, la fiche extraite devient la pièce de la conversation */
.thread .fold-sheet {
  position: static; transform: none !important; height: auto; width: 100%;
  border-radius: var(--r-l); transition: none; z-index: auto;
}
.thread .fold-sheet .fold-tab { min-height: 32px }



/* ══════════════ 16. SQUELETTE TYPOGRAPHIQUE ══════════════
   Ce qui n'est pas démontré n'a pas droit à du faux texte. Un squelette
   dit « il y a du contenu ici, et il n'est pas prouvé », et il porte SON
   alternative textuelle pour les lecteurs d'écran. */
.sk { display: grid; gap: var(--s2) }
.sk-l { display: block; height: 8px; width: var(--w); border-radius: 4px; background: var(--paper-3) }
.piece-sk .sk-l { background: var(--paper-2) }



/* ══════════════ 17. LES TROIS OFFRES ══════════════
   Le graphe spatial Hermes occupait cette section : il montrait le
   harnais interne — nœuds, profils, outils, trace — là où le visiteur
   attend un résultat métier, et il est retiré. Ce qui reste est une
   bande basse, discrète, qui ne concurrence jamais la fenêtre. */
.offres-plate {
  position: relative; overflow: hidden; padding: var(--card-pad); background: var(--paper);
  border-radius: var(--r-l); box-shadow: 0 1px 0 rgba(0,0,0,.04);
  display: grid; gap: var(--s5);
}
.offres-head { position: relative; z-index: 1; display: grid; gap: var(--s2); opacity: 0; transform: translate3d(0,8px,0); transition: opacity .34s var(--e-out), transform .34s var(--e-out) }
.offres-plate[data-inview="1"] .offres-head { opacity: 1; transform: translate3d(0,0,0) }
.offres {
  position: relative; z-index: 1; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6);
}
/* ── LE FILET NE TRAVERSE PLUS LA PLAQUE ──
   Il était posé en `position: absolute` sur toute la largeur de la
   liste, à 18 px du haut. Comme `::after` est le DERNIER enfant, il se
   peignait par-dessus les trois pastilles et par-dessus les codes
   `01 02 03` : un trait bleu barrait la rangée entière, puis continuait
   dans le vide à droite du troisième niveau, où il ne reliait plus rien.

   Le filet appartient maintenant à CHAQUE repère. Il part du code et
   court jusqu'à la pastille suivante, en enjambant la gouttière ; le
   dernier s'éteint en dégradé, parce qu'après « Mise en place » il n'y a
   rien à relier. Aucun recouvrement possible : le trait est un frère du
   texte, plus une couche posée dessus. */
.offre {
  position: relative; display: grid; gap: var(--s2); align-content: start; padding: 0 0 var(--s3);
  opacity: 0; transform: translate3d(0,14px,0);
  transition: opacity .32s var(--e-out), transform .38s var(--e-out);
  transition-delay: calc(var(--k, 0) * 80ms);
}
.offre:nth-child(1) { --k: 0 }.offre:nth-child(2) { --k: 1 }.offre:nth-child(3) { --k: 2 }
.offres-plate[data-inview="1"] .offre { opacity: 1; transform: translate3d(0,0,0) }
.offre-mark { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s1) }
.offre-mark:after {
  content: ""; flex: 1 1 auto; min-width: 0; height: 1px;
  margin-right: calc(var(--s6) * -1);
  background: var(--line-ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .52s var(--e-out), background .3s var(--e-out);
  transition-delay: calc(160ms + var(--k, 0) * 190ms);
}
.offres-plate[data-inview="1"] .offre-mark:after { transform: scaleX(1); background: var(--s-lu) }
.offre:last-child .offre-mark:after {
  margin-right: 0;
  background: linear-gradient(90deg, var(--line-ink), transparent);
}
.offres-plate[data-inview="1"] .offre:last-child .offre-mark:after {
  background: linear-gradient(90deg, var(--s-lu), transparent);
}
.offre-n { display: grid; place-items: center; width: 36px; height: 36px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); color: var(--text-secondary); transition: background .28s var(--e-out), color .28s var(--e-out), border-color .28s var(--e-out); transition-delay: calc(120ms + var(--k, 0) * 190ms) } /* BORDER · structure · repère iconographique des trois niveaux */
.offre-code { font: 12px var(--font-mono); font-weight: 700; letter-spacing: .08em; color: var(--text-tertiary) }
.offres-plate[data-inview="1"] .offre-n { background: var(--s-lu-bg); color: var(--s-lu-ink); border-color: rgba(11,95,191,.28) } /* BORDER · structure · la progression atteinte ajoute couleur, icône et numéro */
.offre-t { margin: 0; font-size: 14px; letter-spacing: -.01em }
.offre-d { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary) }
.offre-f { margin: 0; font: 12px var(--font-mono); line-height: 1.5; color: var(--text-tertiary) }
@media (hover: hover) and (pointer: fine) { .offres-plate[data-inview="1"] .offre:hover { transform: translate3d(0,-3px,0) } }



/* ══════════════ 18. TECHNOLOGIES MICROSOFT ══════════════
   Un dossier, quatre fiches. Ni mur de logos, ni quatre cards. */
.ms-head { margin-bottom: var(--s7); max-width: 72ch }
.ms-head > .h2f { margin-top: var(--s3) }
.ms-warn {
  margin: var(--s5) 0 0; padding: var(--s4) var(--s5);
  background: var(--paper); border-radius: var(--r-l);
  font-size: 14px; line-height: 1.6; color: var(--text-secondary); max-width: 76ch;
  box-shadow: var(--card-shadow);
}
/* Le dossier occupe la fenêtre Consulting : plafonné à 760 px il
   laissait la moitié droite vide, et une fenêtre à moitié vide se lit
   comme une fenêtre cassée. */
.ms-folder .fold {
  --stage-h: 470px; --flap-h: 132px;
  --step: 40px; --lift: 12px;
}
.ms-sheet { display: grid; gap: var(--s3) }
.ms-h { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start }
.ms-logo { display: block; width: 32px; height: 32px; object-fit: contain }
.ms-h-b { display: grid; gap: var(--s1) }
.ms-role { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text) }
/* le statut est du TEXTE, jamais une pilule */
.ms-status { margin: 0; font: 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary) }
.ms-points { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s1) }
.ms-points li { font-size: 12px; line-height: 1.5; color: var(--text-secondary) }
.ms-why { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted) }
.ms-src { display: grid; gap: var(--s2) }



/* ══════════════ 19. QUESTIONNAIRE — invariant G ══════════════
   Rythme unique sur les huit écrans : icône → 12 → titre → 8 → aide →
   24 → choix (gap 12), puis 24 avant la navigation. Aucune marge
   inline, aucune exception. Repris de G sans changement de règle. */
.assist { max-width: 720px; margin: 0 auto; padding: var(--s7) 0 var(--section) }
.assist-plate { padding: 0; background: none; border: 0; box-shadow: none }
.q-prog {
  margin: 0 0 var(--s4); padding: var(--s3) var(--s4);
  background: var(--paper);
  border: 1px solid var(--line-soft); /* BORDER · invariant · plaque de progression du questionnaire, reprise de G */
  border-radius: var(--r-l); box-shadow: var(--card-shadow);
}
.q-bar { height: 4px; border-radius: 2px; background: var(--line-soft); overflow: hidden }
.q-bar i { display: block; height: 100%; background: var(--blue); transform-origin: left; transition: transform .32s var(--e-out) }
.q-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s2) 0 0; font-size: 12px; color: var(--text-muted) }
.q-privacy { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; color: var(--text-secondary); text-align: right }
.q-privacy svg { flex: none; color: var(--blue) }

.qcard {
  display: block; padding: var(--card-pad);
  background: var(--paper);
  border: 1px solid var(--line-soft); /* BORDER · invariant · plaque d'écran du questionnaire, reprise de G */
  border-radius: var(--r-l); box-shadow: var(--card-shadow);
}
.q-ico { display: block; margin: 0 0 var(--s3); color: var(--blue) }
.q-ico svg { display: block }
.q-t { margin: 0 0 var(--s2); font-size: clamp(24px, 3.2vw, 28px); line-height: 1.12; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; width: fit-content; max-width: 100% }
.q-t:focus-visible { outline: none } /* le titre reçoit le focus pour l'annonce d'écran, mais n'est pas une commande */
.q-help { margin: 0 0 var(--s3); max-width: 66ch; font-size: 14px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty }
.taka-thinking {
  display: flex; align-items: center; gap: 10px; min-height: 30px; margin: 0 0 var(--s6);
  color: var(--text-muted);
}
.taka-pixels { display: grid; flex: none; grid-template-columns: repeat(3, 4px); gap: 1.5px }
.taka-pixels i {
  width: 4px; height: 4px; border-radius: 1px; background: var(--text); opacity: .15;
  animation: diagnosticPixelOn 650ms ease-in-out var(--pixel-delay) infinite;
}
.taka-thinking-label {
  color: transparent; font-size: 12px; line-height: 16px; font-weight: 550; white-space: nowrap;
  background-image: linear-gradient(90deg, var(--text-tertiary) 35%, var(--text) 50%, var(--text-tertiary) 65%);
  background-size: 200% 100%; background-clip: text; -webkit-background-clip: text;
  animation: diagnosticThinkingShimmer 1.4s linear infinite;
}
.taka-thinking > b {
  margin-left: auto; color: var(--text-tertiary); font: 10px var(--font-mono); font-weight: 500;
  letter-spacing: .035em; white-space: nowrap;
}
.q-opts { display: grid; grid-template-columns: 1fr; gap: var(--s3); margin: 0 }
.q-opts[data-cols="2"] { grid-template-columns: repeat(2, 1fr) }
.q-body { display: grid; gap: var(--s4); margin: 0 }
.q-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s6) 0 0 }
.q-foot { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted) }

.opt {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3);
  align-items: start; min-height: 44px; padding: var(--s4);
  border: 1px solid var(--line); /* BORDER · input · contour d'une réponse pressable du questionnaire */
  border-radius: var(--r-l); background: var(--paper); cursor: pointer;
  transition: transform .12s var(--e-out), border-color .16s var(--e-out), background .16s var(--e-out);
}
@media (hover: hover) and (pointer: fine) { .opt:hover { border-color: rgba(0, 113, 227, .45); background: #fbfdff } } /* BORDER · invariant · survol du questionnaire, repris de G */
.opt:focus-visible { outline: 3px solid rgba(0, 113, 227, .35); outline-offset: 2px } /* BORDER · focus · anneau de focus d'une réponse */
.opt[aria-checked="true"] { border-color: var(--blue); background: #f2f8ff } /* BORDER · invariant · sélection du questionnaire, reprise de G */
.opt-mark {
  flex: none; width: var(--s6); height: var(--s6); border-radius: 50%;
  border: 2px solid #c7c7cc; /* BORDER · input · repère de sélection d'une réponse */
  background: var(--paper); display: grid; place-items: center; color: transparent;
  transition: background .16s var(--e-out), border-color .16s var(--e-out), color .16s var(--e-out);
}
.opt[aria-checked="true"] .opt-mark { background: var(--blue); border-color: var(--blue); color: #fff } /* BORDER · invariant · repère coché du questionnaire, repris de G */
.opt.is-confirmed .opt-mark { animation: diagnosticConfirm .52s cubic-bezier(.22,1,.36,1) both }
.opt-mark path { stroke-dasharray: 22; stroke-dashoffset: 22 }
.opt[aria-checked="true"] .opt-mark path { animation: diagnosticCheckDraw .34s cubic-bezier(.22,1,.36,1) forwards }
@keyframes diagnosticConfirm { 0% { transform: scale(.72) } 42% { transform: scale(1.14) } 68%, 100% { transform: scale(1) } }
@keyframes diagnosticCheckDraw { to { stroke-dashoffset: 0 } }
.opt-body { display: grid; gap: var(--s2); min-width: 0 }
.opt-t { font-size: 14px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em }
.opt-ex { font-size: 12px; line-height: 1.5; color: var(--text-muted) }
/* Le secteur est facultatif et tardif : ses réponses n'ont ni exemple
   ni objet illustratif, donc la card se referme sur son seul libellé.
   Elle garde la même mécanique de sélection, la même cible et le même
   anneau de focus. */
.opt-plain { grid-template-columns: auto 1fr; align-items: center; padding: var(--s3) var(--s4) }

.fig { flex: none; display: block; width: 56px; height: 38px }
.fig svg { display: block; width: 56px; height: 38px; overflow: visible }
.fig :is(g, path, rect, circle) { transform-box: fill-box; transform-origin: center }
.fig .fa, .fig .fb { transition: opacity .26s var(--e-out), transform .32s var(--e-out) }
.fig .fa { opacity: 1; transform: translate3d(0, 0, 0) }
.fig .fb { opacity: 0; transform: translate3d(4px, 0, 0) }
.opt[aria-checked="true"] .fig .fb, .opt:focus-visible .fig .fb { opacity: 1; transform: translate3d(0, 0, 0) }
.opt[aria-checked="true"] .fig .fa, .opt:focus-visible .fig .fa { opacity: .28; transform: translate3d(-3px, 0, 0) }
@media (hover: hover) and (pointer: fine) {
  .opt:hover .fig .fb { opacity: 1; transform: translate3d(0, 0, 0) }
  .opt:hover .fig .fa { opacity: .28; transform: translate3d(-3px, 0, 0) }
}

/* La référence motion suit toujours le même récit : lire, transmettre,
   confirmer. Un seul fragment bleu ou vert bouge à la fois ; les objets
   ne sautent pas et rien ne tourne en boucle lorsque la réponse attend. */
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="msg-reply"] .fb path,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="doc-find"] .fb path,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="photo-slot"] .fb path {
  stroke-dasharray: 52; stroke-dashoffset: 52;
  animation: diagnosticTrace .5s .06s cubic-bezier(.22,1,.36,1) forwards;
}
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="msg-reply"] .fb rect,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="doc-find"] .fb rect,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="photo-slot"] .fb rect {
  animation: diagnosticSurface .34s cubic-bezier(.22,1,.36,1) both;
}
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="repeat-loop"] .fb path,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="copy-sync"] .fb path,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="source-map"] .fb path,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="scatter-gather"] .fb path,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="clock-fast"] .fb path {
  stroke-dasharray: 72; stroke-dashoffset: 72;
  animation: diagnosticTrace .52s .04s cubic-bezier(.22,1,.36,1) forwards;
}
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="copy-sync"] .fb rect,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="source-map"] .fb rect,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="scatter-gather"] .fb rect {
  animation: diagnosticReceive .42s .13s cubic-bezier(.22,1,.36,1) both;
}
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="source-map"] .fb rect:last-of-type {
  animation-delay: .22s;
}
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="rule-check"] .fb,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="shield-alert"] .fb,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="invoice-check"] .fb {
  animation: diagnosticProofIn .48s .08s cubic-bezier(.22,1,.36,1) both;
}
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="rule-check"] .fa circle:nth-of-type(1) { animation: diagnosticReadPoint .42s 0s var(--e-out) both }
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="rule-check"] .fa circle:nth-of-type(2) { animation: diagnosticReadPoint .42s .07s var(--e-out) both }
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="rule-check"] .fa circle:nth-of-type(3) { animation: diagnosticReadPoint .42s .14s var(--e-out) both }
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig .cal-on { animation: diagnosticCellIn .38s cubic-bezier(.22,1,.36,1) both }
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig .cal-on:nth-child(2n) { animation-delay: 60ms }
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig .cal-on:nth-child(3n) { animation-delay: 120ms }
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig^="team-"] .fb > g { animation: diagnosticPersonIn .38s cubic-bezier(.22,1,.36,1) both }
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig^="team-"] .fb > g:nth-child(2) { animation-delay: 45ms }
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig^="team-"] .fb > g:nth-child(3) { animation-delay: 90ms }
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig^="team-"] .fb > g:nth-child(4) { animation-delay: 135ms }
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig^="team-"] .fb > g:nth-child(5) { animation-delay: 180ms }
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="microsoft-suite"] .fb rect {
  animation: diagnosticReceive .36s cubic-bezier(.22,1,.36,1) both;
}
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="microsoft-suite"] .fb rect:nth-of-type(2) { animation-delay: 50ms }
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="microsoft-suite"] .fb rect:nth-of-type(3) { animation-delay: 100ms }
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="microsoft-suite"] .fb rect:nth-of-type(4) { animation-delay: 150ms }
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="crm-window"] .fb,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="business-pc"] .fb,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="paper-stack"] .fb,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig^="error-"] .fb {
  animation: diagnosticProofIn .44s .06s cubic-bezier(.22,1,.36,1) both;
}
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="tool-links"] .fb path,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="volume-team"] .fb path {
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: diagnosticTrace .5s .04s cubic-bezier(.22,1,.36,1) forwards;
}
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="tool-links"] .fb circle,
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="volume-team"] .fb circle {
  animation: diagnosticCellIn .36s .12s cubic-bezier(.22,1,.36,1) both;
}
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="volume-spike"] .fb path {
  stroke-dasharray: 34; stroke-dashoffset: 34;
  animation: diagnosticTrace .5s .08s cubic-bezier(.22,1,.36,1) forwards;
}
.opt:is([aria-checked="true"], :focus-visible, :hover) .fig[data-fig="error-client"] .fb {
  transform-origin: right bottom;
  animation: diagnosticMessageRisk .44s .06s cubic-bezier(.22,1,.36,1) both;
}
@keyframes diagnosticTrace { to { stroke-dashoffset: 0 } }
@keyframes diagnosticSurface { from { opacity: .2; transform: translate3d(5px,0,0) } to { opacity: 1; transform: none } }
@keyframes diagnosticReceive { from { opacity: .2; transform: translate3d(-5px,0,0) scale(.96) } to { opacity: 1; transform: none } }
@keyframes diagnosticProofIn { from { opacity: 0; transform: scale(.78) } 72% { transform: scale(1.06) } to { opacity: 1; transform: scale(1) } }
@keyframes diagnosticReadPoint { 0%, 100% { fill: #dcdce1; transform: scale(1) } 48% { fill: #0071e3; transform: scale(1.18) } }
@keyframes diagnosticCellIn { from { opacity: .18; transform: scale(.6) } to { opacity: 1; transform: scale(1) } }
@keyframes diagnosticPersonIn { from { opacity: .08; transform: translate3d(0,4px,0) } to { opacity: 1; transform: none } }
@keyframes diagnosticMessageRisk { from { opacity: 0; transform: translate3d(6px,4px,0) scale(.94) } to { opacity: 1; transform: none } }

/* ── LA RECOMMANDATION PUBLIQUE — cinq parties, cet ordre ──
   Une seule surface, cinq sections numérotées. La numérotation est
   décorative pour le lecteur d'écran — l'ordre est déjà porté par le
   DOM — mais elle rend le contrat lisible à l'œil. Aucun encadré
   coloré : c'est du texte, et le texte suffit. */
.reco { padding: var(--s5); border-radius: var(--r-l); background: var(--paper-2); display: grid; gap: var(--s5) }
.reco-part { display: grid; grid-template-columns: 2ch minmax(0, 1fr); gap: var(--s1) var(--s3); align-items: baseline }
.reco-part + .reco-part { padding-top: var(--s5); box-shadow: inset 0 1px 0 var(--line-soft) }
.reco-n { grid-row: 1; margin: 0; font: 12px var(--font-mono); color: var(--text-tertiary) }
.reco-t { grid-column: 2; margin: 0; font-size: 14px; line-height: 1.25; letter-spacing: -.01em }
.reco-part > :not(.reco-n):not(.reco-t) { grid-column: 2 }
.reco-p { margin: var(--s2) 0 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary) }
.reco-soft { color: var(--text-muted); font-size: 13px }
.reco-l { margin: var(--s2) 0 0; padding-left: var(--s5); display: grid; gap: var(--s1) }
.reco-l li { font-size: 14px; line-height: 1.55; color: var(--text-secondary) }
/* la piste est la seule ligne mise en avant : une par recommandation */
.reco-piste { margin: var(--s2) 0 0; font-size: 24px; line-height: 1.25; letter-spacing: -.02em; font-weight: 650 }
/* le texte libre est rendu TEL QUEL, sauts de ligne compris */
.reco-q {
  margin: var(--s2) 0 0; padding: var(--s3) var(--s4);
  background: var(--paper); border-radius: var(--r-s);
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.diagnostic-body { gap: var(--s3) }
.diagnostic-result { gap: 0; padding: var(--s4) var(--s5) }
.diagnostic-motion svg * { transform-box: fill-box; transform-origin: center }
.diagnostic-motion :is(.dm-route, .dm-focus path, .dm-confirm path, .dm-step path) {
  fill: none; stroke: #0071e3; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.diagnostic-motion .dm-confirm circle { fill: #edf7ee; stroke: #248a3d; stroke-width: 1.5 }
.diagnostic-motion .dm-confirm path { stroke: #248a3d }
.diagnostic-part {
  grid-template-columns: 2ch minmax(0, 1fr) minmax(124px, 160px);
  grid-template-rows: auto auto; gap: var(--s1) var(--s3);
  align-items: start; padding: var(--s4) 0;
}
.diagnostic-result .diagnostic-part + .diagnostic-part { padding-top: var(--s4) }
.diagnostic-part .reco-n { grid-column: 1; grid-row: 1 }
.diagnostic-part .reco-t { grid-column: 2; grid-row: 1; color: var(--blue); font-size: 12px; line-height: 1.3; font-weight: 650; letter-spacing: .015em }
.diagnostic-part .reco-piste, .diagnostic-part .reco-p { grid-column: 2; grid-row: 2; max-width: 62ch; text-wrap: pretty }
.diagnostic-part .reco-piste { margin-top: var(--s1); font-size: 19px; line-height: 1.28; letter-spacing: -.018em; font-weight: 700 }
.diagnostic-part .reco-p { margin-top: var(--s1); font-size: 14px; line-height: 1.55 }
.reco-part.diagnostic-part > .diagnostic-motion { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 100%; color: var(--blue) }
.diagnostic-motion svg { display: block; width: 100%; height: 58px; overflow: visible }
.diagnostic-motion .dm-sources circle { fill: #d8dde4 }
.diagnostic-motion .dm-focus rect { fill: #eef5fc }
.diagnostic-motion .dm-rows rect { fill: #e4e7eb }
.diagnostic-motion .dm-scan { fill: #0071e3; opacity: 0 }
.diagnostic-motion .dm-step circle { fill: #f0f2f5; stroke: #c9ced5; stroke-width: 1.4 }
.diagnostic-motion .dm-step-4 circle { fill: #edf7ee; stroke: #248a3d }
.diagnostic-motion .dm-step-4 path { stroke: #248a3d }
.diagnostic-motion .dm-route { stroke-dasharray: 180; stroke-dashoffset: 180; animation: diagnosticMotionTrace .62s calc(var(--dm-delay) + .12s) cubic-bezier(.22,1,.36,1) forwards }
.diagnostic-motion .dm-sources circle { animation: diagnosticMotionNode .4s var(--dm-delay) cubic-bezier(.22,1,.36,1) both }
.diagnostic-motion .dm-sources circle:nth-child(2) { animation-delay: calc(var(--dm-delay) + .06s) }
.diagnostic-motion .dm-sources circle:nth-child(3) { animation-delay: calc(var(--dm-delay) + .12s) }
.diagnostic-motion .dm-focus { animation: diagnosticMotionNode .42s calc(var(--dm-delay) + .34s) cubic-bezier(.22,1,.36,1) both }
.diagnostic-motion .dm-confirm { animation: diagnosticMotionReady .44s calc(var(--dm-delay) + .66s) cubic-bezier(.22,1,.36,1) both }
.diagnostic-motion .dm-scan { animation: diagnosticMotionScan .72s calc(var(--dm-delay) + .12s) cubic-bezier(.25,1,.5,1) both }
.diagnostic-motion .dm-step { animation: diagnosticMotionNode .42s calc(var(--dm-delay) + var(--dm-step, 0s)) cubic-bezier(.22,1,.36,1) both }
.diagnostic-motion .dm-step-2 { --dm-step: .14s }
.diagnostic-motion .dm-step-3 { --dm-step: .28s }
.diagnostic-motion .dm-step-4 { --dm-step: .42s }
.diagnostic-part:nth-of-type(1) { --dm-delay: .18s }
.diagnostic-part:nth-of-type(2) { --dm-delay: .38s }
.diagnostic-part:nth-of-type(3) { --dm-delay: .58s }
@keyframes diagnosticPixelOn { 0%, 100% { opacity: .15; transform: scale(1) } 50% { opacity: 1; transform: scale(1.12) } }
@keyframes diagnosticThinkingShimmer { from { background-position: 100% 0 } to { background-position: -100% 0 } }
@keyframes diagnosticMotionTrace { to { stroke-dashoffset: 0 } }
@keyframes diagnosticMotionNode { from { opacity: 0; transform: scale(.72) } to { opacity: 1; transform: scale(1) } }
@keyframes diagnosticMotionReady { from { opacity: 0; transform: scale(.7) } 72% { transform: scale(1.06) } to { opacity: 1; transform: scale(1) } }
@keyframes diagnosticMotionScan { 0% { opacity: 0; transform: translate3d(0,0,0) } 18% { opacity: .28 } 82% { opacity: .2 } 100% { opacity: 0; transform: translate3d(72px,0,0) } }
.stack-lever {
  margin: 0; padding: 0 0 var(--s4); display: grid; gap: var(--s1);
  box-shadow: inset 0 -1px 0 var(--line-soft);
}
.stack-lever span, .lead-brief span { font: 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary) }
.stack-lever strong { font-size: 18px; line-height: 1.3; letter-spacing: -.01em }
.stack-part {
  grid-template-columns: 2ch minmax(0, 1fr) 84px;
  grid-template-rows: auto auto;
}
.stack-part .reco-n { grid-column: 1; grid-row: 1 }
.stack-part .reco-t { grid-column: 2; grid-row: 1 }
.stack-part .reco-p { grid-column: 2; grid-row: 2; max-width: 58ch; text-wrap: pretty }
.stack-result .reco-part.stack-part > .stack-motion { grid-column: 3; grid-row: 1 / span 2; align-self: center }
.stack-motion svg { display: block; width: 74px; height: 36px; overflow: visible }
.stack-motion svg * { transform-box: fill-box; transform-origin: center }
.stack-motion .sm-base :is(rect, circle) { fill: #f1f3f6; stroke: #c9ced5; stroke-width: 1.2 }
.stack-motion :is(.sm-base path, .sm-route, .sm-gate path, .sm-ready path) { fill: none; stroke: #0071e3; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.stack-motion .sm-route { stroke-dasharray: 70; stroke-dashoffset: 70; animation: diagnosticMotionTrace .55s .12s cubic-bezier(.22,1,.36,1) forwards }
.stack-motion .sm-ready { animation: diagnosticMotionReady .4s .42s cubic-bezier(.22,1,.36,1) both }
.stack-motion .sm-ready circle { fill: #edf7ee; stroke: #248a3d; stroke-width: 1.3 }
.stack-motion .sm-ready path { stroke: #248a3d }
.stack-motion .sm-gate rect { fill: #eef5fc; stroke: #0071e3; stroke-width: 1.2 }
.stack-motion .sm-gate { animation: diagnosticMotionNode .4s .3s cubic-bezier(.22,1,.36,1) both }
.stack-motion .sm-pixels { animation: diagnosticMotionNode .4s .05s cubic-bezier(.22,1,.36,1) both }
.stack-motion .sm-pixels rect { fill: #0071e3; opacity: .2; animation: diagnosticPixelOn 650ms ease-in-out calc(var(--pixel-order, 0) * 60ms) 2 }
.stack-motion .sm-measure circle { fill: #d8dde4 }
.stack-motion .sm-measure circle:nth-child(-n+4) { fill: #0071e3 }
.lead-brief {
  display: grid; gap: var(--s1); padding: var(--s4) 0;
  box-shadow: inset 0 1px 0 var(--line-soft), inset 0 -1px 0 var(--line-soft);
}
.lead-brief strong { font-size: 16px; line-height: 1.35 }
.lead-brief small { color: var(--text-muted); font-size: 13px; line-height: 1.45 }

.fields { display: grid; gap: var(--s4) }
.field { display: grid; gap: var(--s2); margin: 0 }
.field label { font-size: 14px; font-weight: 650 }
.field input, .field textarea {
  width: 100%; min-height: 44px; padding: var(--s3);
  border: 1px solid var(--line); /* BORDER · input · champ de saisie du questionnaire */
  border-radius: var(--r-s); background: var(--paper);
  font: inherit; font-size: 14px; color: inherit;
}
/* le détail libre : plusieurs lignes, redimensionnable en hauteur seule */
.field textarea { min-height: 120px; line-height: 1.6; resize: vertical }
.field-h { font-size: 12px; line-height: 1.5; color: var(--text-muted) }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red) } /* BORDER · input · champ en erreur, doublé par le message et le résumé */
.field-err { font-size: 13px; line-height: 1.5; color: var(--red) }
.consent { display: flex; gap: var(--s3); margin: 0; font-size: 13px; line-height: 1.5 }
.consent input { flex: none; width: var(--s6); height: var(--s6); margin: 0 }
.consent input[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 2px } /* BORDER · input · consentement obligatoire non coché */
/* ── le résumé d'erreurs : annoncé, situé, atteignable ──
   Il ouvre le formulaire, il reçoit le focus, et chacune de ses lignes
   est un lien vers le champ concerné. */
.errsum {
  padding: var(--s4); border-radius: var(--r-l);
  background: var(--s-nonfait-bg);
  box-shadow: inset 0 0 0 1px var(--red); /* BORDER · input · encadré du résumé d'erreurs du formulaire */
  display: grid; gap: var(--s2);
}
.errsum:focus-visible { outline: 3px solid rgba(0, 113, 227, .35); outline-offset: 2px } /* BORDER · focus · le résumé reçoit le focus quand la validation échoue */
.errsum-t { margin: 0; font-size: 14px; font-weight: 650; color: var(--s-nonfait-ink) }
.errsum ul { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s1) }
.errsum li { font-size: 13px; line-height: 1.5 }
.errsum a { color: var(--s-nonfait-ink) }
.hpf { position: absolute; left: -10000px }
.formstate { margin: 0; font-size: 13px; line-height: 1.5 }
.formstate[data-state="error"] { color: var(--red) }
.formstate[data-state="ok"] { color: var(--green) }
.gate-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 0 }
#assist-slot:not(:empty) { margin-bottom: var(--s6) }
.assist-target { width: 100%; min-height: 1px }
/* ── LA MAQUETTE N'EST PLUS POSÉE SUR LE TEXTE ──
   L'aperçu des trois questions était `position: absolute; inset: 0` avec
   `place-items: center` : il se centrait donc sur la CARTE ENTIÈRE,
   c'est-à-dire exactement sur le paragraphe. Le fond passait derrière
   les mots, les cases à cocher traversaient les lignes, et la lecture
   devenait pénible là où elle doit être la plus simple de la page.

   L'aperçu prend maintenant sa propre colonne. Il ne recouvre plus
   rien : la grille lui donne sa place, le texte garde la sienne. */
.assist-entry-card {
  position: relative; isolation: isolate; overflow: hidden; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  align-items: center; gap: var(--s8); min-height: 248px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: transform .16s var(--e-out), box-shadow .2s var(--e-out);
}
/* `grid-row: 1` sur les deux : la maquette est le premier nœud du DOM,
   sans ligne explicite le placement automatique la posait au-dessus du
   texte au lieu d'à côté. */
.assist-entry-copy { position: relative; z-index: 2; grid-column: 1; grid-row: 1; max-width: 56ch }
.assist-entry-copy .h3f { margin-top: var(--s3) }
.assist-entry-copy > * { opacity: 0; transform: translate3d(0,10px,0); transition: opacity .3s var(--e-out), transform .36s var(--e-out) }
.assist-entry-copy > :nth-child(2) { transition-delay: 55ms }
.assist-entry-copy > :nth-child(3) { transition-delay: 110ms }
.assist-entry-copy > :nth-child(4) { transition-delay: 165ms }
.assist-entry-card[data-inview="1"] .assist-entry-copy > * { opacity: 1; transform: translate3d(0,0,0) }
.assist-preview {
  position: relative; z-index: 1; grid-column: 2; grid-row: 1; justify-self: end;
  display: grid; justify-items: stretch; width: 100%; padding: 0;
  color: var(--text-tertiary);
  transform: translate3d(18px,0,0); opacity: 0;
  transition: opacity .34s var(--e-out), transform .44s var(--e-out);
}
.assist-entry-card[data-inview="1"] .assist-preview { opacity: .78; transform: translate3d(0,0,0) }
.assist-checklist { width: 100%; max-width: 164px; justify-self: end; display: grid; gap: 14px }
.assist-check { display: grid; justify-items: end; opacity: .28; transform: translate3d(8px,0,0); transition: opacity .28s var(--e-out), transform .36s var(--e-out); transition-delay: calc(80ms + var(--k) * 110ms) }
.assist-entry-card[data-inview="1"] .assist-check { opacity: 1; transform: translate3d(0,0,0) }
.assist-check > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #eef8ef; color: #15b042 }
.assist-check svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.assist-check path { stroke-dasharray: 24; stroke-dashoffset: 24 }
.assist-entry-card[data-inview="1"] .assist-check path { animation: assistCheckDraw .42s cubic-bezier(.22,1,.36,1) calc(100ms + var(--k) * 120ms) forwards }
@keyframes assistCheckDraw { to { stroke-dashoffset: 0 } }
.assist-ascii {
  position: absolute; z-index: 0; inset: 0 0 0 auto; width: min(52%, 620px); margin: 0;
  display: grid; align-content: center; padding: var(--s6); overflow: hidden; pointer-events: none;
  color: rgba(11,95,191,.18); background: linear-gradient(90deg, transparent, rgba(238,244,253,.9));
  font: 12px/1.8 var(--font-mono); white-space: pre-wrap;
  clip-path: inset(0 0 0 36%); opacity: .72;
  transition: clip-path .42s var(--e-out), opacity .24s var(--e-out), transform .42s var(--e-out);
}
.assist-entry-card:active { transform: scale(.99) }
@media (hover: hover) and (pointer: fine) {
  .assist-entry-card:hover { box-shadow: var(--card-shadow-hover) }
  .assist-entry-card:hover .assist-ascii { clip-path: inset(0); opacity: 1; transform: translate3d(-6px,0,0) }
}
.assist-entry-card:focus-within .assist-ascii,
.assist-entry-card[data-assist-mode="active"] .assist-ascii { clip-path: inset(0); opacity: 1 }
.assist-entry-card[data-assist-mode="active"] .gate-row { visibility: hidden; pointer-events: none }

/* ── MODÈLES D'EXPLOITATION ──
   Un ticket unique : le switch garde le châssis stable et réimprime
   uniquement son contenu, comme une petite imprimante de comptoir. */
.run-models-plate {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 536px; padding: var(--s4) 0; background: transparent; overflow-anchor: none;
  opacity: 0; transform: translate3d(0,16px,0);
  transition: opacity .34s var(--e-out), transform .44s var(--e-out);
}
.run-models-plate[data-inview="1"] { opacity: 1; transform: translate3d(0,0,0) }
.run-model-switch {
  position: relative; z-index: 5; display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  width: 100%; min-height: 44px; margin: 0 0 12px; padding: 4px;
  border-radius: 14px; background: rgba(229,232,237,.82); box-shadow: inset 0 1px 2px rgba(17,24,39,.06);
}
.run-model-switch::before {
  content: ""; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / 3); border-radius: 10px; background: #fff;
  box-shadow: 0 2px 8px rgba(24,34,48,.12); transform: translate3d(100%,0,0);
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.run-model-switch[data-mode="local"]::before { transform: translate3d(0,0,0) }
.run-model-switch[data-mode="turnkey"]::before { transform: translate3d(200%,0,0) }
.run-model-switch button {
  position: relative; z-index: 1; min-width: 0; min-height: 36px; padding: 0 var(--s3);
  border: 0; border-radius: 10px; background: transparent; color: var(--text-tertiary);
  font: 600 13px/16px var(--font-sans); cursor: pointer;
  transition: color .22s var(--e-out);
}
.run-model-switch button[aria-selected="true"] { color: var(--text-primary) }
.run-model-switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px }
.run-model-ticket {
  position: relative; isolation: isolate; width: min(100%,780px); margin: 0 auto;
  overflow: hidden; overflow-anchor: none; padding: 0 12px 12px; border-radius: 18px; background: #fff;
  box-shadow: 0 18px 42px rgba(20,31,48,.14), 0 2px 6px rgba(20,31,48,.08);
}
.run-model-ticket-plate {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 8px; gap: var(--s3);
}
.run-model-ticket-plate h2 { margin: 0; font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -.015em }
.run-model-ticket-plate span { flex: none; color: var(--text-tertiary); font: 600 11px/16px var(--font-mono) }
.run-model-ticket-stack {
  position: relative; display: grid; min-width: 0; overflow: hidden; border-radius: 12px;
  transition: background-color .46s var(--e-out);
}
.run-model-ticket[data-mode="local"] .run-model-ticket-stack { background: #f5f5f2 }
.run-model-ticket[data-mode="managed"] .run-model-ticket-stack { background: #080808 }
.run-model-ticket[data-mode="turnkey"] .run-model-ticket-stack { background: #075bea }
.run-model-ascii-bg {
  position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none;
  opacity: .7; filter: saturate(1.1) contrast(1.06);
  transition: opacity .36s var(--e-out), filter .36s var(--e-out);
  mask-image: linear-gradient(90deg,black 0,rgba(0,0,0,.38) 34%,rgba(0,0,0,.38) 66%,black 100%);
  -webkit-mask-image: linear-gradient(90deg,black 0,rgba(0,0,0,.38) 34%,rgba(0,0,0,.38) 66%,black 100%);
}
.run-model-ticket[data-mode="managed"] .run-model-ascii-bg { filter: saturate(1.25) brightness(1.5) contrast(1.1) }
.run-model-ticket[data-mode="turnkey"] .run-model-ascii-bg { filter: saturate(.72) brightness(1.85) contrast(1.08) }
.run-model-panel {
  position: relative; z-index: 2; grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0,1fr);
  min-width: 0; min-height: 400px; overflow: hidden; visibility: hidden; opacity: 0;
  color: var(--text-primary);
}
.run-model-ticket[data-mode="local"] .run-model-panel-local,
.run-model-ticket[data-mode="managed"] .run-model-panel-managed,
.run-model-ticket[data-mode="turnkey"] .run-model-panel-turnkey {
  visibility: visible; opacity: 1; animation: runModelPanelFade .46s var(--e-out) both;
}
.run-model-ticket[data-mode="local"] .run-model-panel-local .run-model-ticket-copy,
.run-model-ticket[data-mode="managed"] .run-model-panel-managed .run-model-ticket-copy,
.run-model-ticket[data-mode="turnkey"] .run-model-panel-turnkey .run-model-ticket-copy { animation: runModelCopyBlur .52s var(--e-out) both }
.run-model-ticket-copy {
  position: relative; z-index: 2; grid-column: 1; display: flex; flex-direction: column;
  align-items: center; justify-self: stretch; width: 100%; min-width: 0;
  padding: 40px clamp(40px, 10%, 88px) 34px; text-align: center;
}
.run-model-ticket-copy > * { opacity: 1; transform: none; filter: none }
.run-model-ticket-copy header { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: var(--s2) var(--s3) }
.run-model-ticket-copy h3 { margin: 0 0 var(--s4); font-size: 22px; line-height: 1.25; font-weight: 650; letter-spacing: -.025em }
.run-model-ticket-copy header h3 { margin-bottom: var(--s4) }
.run-model-ticket-copy header span {
  flex: none; color: var(--blue); font: 650 10px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.run-model-ticket-copy p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary) }
.run-model-ticket-label { margin-bottom: var(--s3) !important; color: var(--blue) !important; font: 650 11px/16px var(--font-mono) !important; letter-spacing: .08em; text-transform: uppercase }
.run-model-ticket-audience { margin-top: var(--s5) !important; color: var(--text-tertiary) !important }
.run-model-ticket-foot { margin-top: auto !important; padding-top: var(--s5); color: var(--text-primary) !important; font-weight: 600 !important }
.run-model-ticket[data-mode="managed"] .run-model-panel-managed h3,
.run-model-ticket[data-mode="managed"] .run-model-panel-managed .run-model-ticket-foot,
.run-model-ticket[data-mode="turnkey"] .run-model-panel-turnkey h3,
.run-model-ticket[data-mode="turnkey"] .run-model-panel-turnkey .run-model-ticket-foot { color: #fff !important }
.run-model-ticket[data-mode="managed"] .run-model-panel-managed p { color: #d8d8d8 !important }
.run-model-ticket[data-mode="managed"] .run-model-panel-managed .run-model-ticket-audience { color: #a8a8a8 !important }
.run-model-ticket[data-mode="managed"] .run-model-panel-managed .run-model-ticket-label,
.run-model-ticket[data-mode="managed"] .run-model-panel-managed header span { color: #69b4ff !important }
.run-model-ticket[data-mode="turnkey"] .run-model-panel-turnkey p { color: rgba(255,255,255,.9) !important }
.run-model-ticket[data-mode="turnkey"] .run-model-panel-turnkey .run-model-ticket-audience { color: rgba(255,255,255,.7) !important }
.run-model-ticket[data-mode="turnkey"] .run-model-panel-turnkey .run-model-ticket-label,
.run-model-ticket[data-mode="turnkey"] .run-model-panel-turnkey header span { color: #fff !important }
@keyframes runModelPanelFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes runModelCopyBlur { from { opacity: .28; filter: blur(10px) } to { opacity: 1; filter: blur(0) } }
.run-models-note { width: min(100%,780px); margin: var(--s4) auto 0; font-size: 13px; line-height: 1.5; color: var(--text-tertiary); text-align: center }
@media (hover: hover) and (pointer: fine) {
  .run-model-ticket[data-mode="local"]:hover .run-model-ascii-bg { opacity: 1; filter: hue-rotate(52deg) saturate(1.55) brightness(1.35) contrast(1.12) }
  .run-model-ticket[data-mode="managed"]:hover .run-model-ascii-bg { opacity: 1; filter: hue-rotate(48deg) saturate(1.5) contrast(1.12) }
  .run-model-ticket[data-mode="turnkey"]:hover .run-model-ascii-bg { opacity: 1; filter: hue-rotate(-110deg) saturate(1.7) brightness(1.4) contrast(1.12) }
}



/* ══════════════ 20. MORPH ══════════════ */
#morph-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none }
#morph-layer > * { pointer-events: auto }
.is-traveling { z-index: 51; opacity: 1 !important; animation: none !important; box-shadow: var(--card-shadow-hover) }



/* ══════════════ L. RESPONSIVE — 390 en cible ══════════════ */
/* La bascule était à 1023 px alors que la grille de scène réclame
   208 + 720 + 272 + 2 × 16 = 1232 px de contenu. Entre les deux, la page
   débordait horizontalement — 24 px à 1232, 76 px à 1180, 232 px à 1024 —
   et l'objet central sortait entièrement du champ.

   Le seuil est maintenant 1280 px : c'est la largeur à laquelle le
   conteneur atteint son propre maximum et où la grille tient
   exactement. Mesuré, pas déduit. */
/* ── Le palier large : quatre colonnes ──
   Il s'ouvrait à 1600 px et figeait la fenêtre à 720 px. Sur un écran
   de 1980 px, la fenêtre restait donc étroite pendant que la colonne
   du décor s'étalait : la bande d'arrière-plan n'avait plus la place
   de nommer ses pièces, et les titres se réduisaient à « Politi… ».
   Le palier s'ouvre plus tard, et c'est la FENÊTRE qui prend la place
   disponible — le décor est plafonné. */
@media (max-width: 1279px) {
  :root {
    --section: 48px; --card-pad: 20px; --gutter: 16px;
    --phone-w: 276px; --phone-screen-h: 404px; --phone-pad: 8px;
  }
  .services-bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "offers" "diagnostic" "models";
  }
  .svc-head-copy, .svc-slot { grid-column: span 12 }
  .svc-slot { min-height: 168px }
  .svc-slot > .card-services { min-height: 168px }
  .rail-head { grid-template-columns: minmax(0, 1fr); gap: var(--s2) }
  .metier-rail { grid-template-columns: repeat(2, 1fr) }
  .metier-card { grid-column: auto !important }
  .assist-entry-card { grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr); gap: var(--s6) }
  .assist-checklist { max-width: 240px }

  .scene-grid { padding: var(--s3) 0 }
  .scene-grid > *, .stage-col, .stage-sticky, #stage-slot, .os-deck, .os {
    min-width: 0; max-width: 100%;
  }
  .os > *, .os-body > *, .os-doc > *, .os-gateway, .doc-scroll, .chat, .banners > * { min-width: 0 }
  /* ── La webapp à 390 px ──
     La réponse d'abord, sa citation dessous, puis le document dans sa
     propre surface : un split view miniature ne se lit pas. Le chrome
     macOS reste reconnaissable, simplement plus court. */
  .os { height: auto; grid-template-rows: auto auto auto }
  .os-bar { height: 30px; padding: 0 var(--s3); gap: var(--s2) }
  .os-title { font-size: 12px; text-align: left }
  .os-sim { display: none }
  .os-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto }
  .os:has(.os-gateway) .os-body { grid-template-columns: minmax(0, 1fr) }
  .os-gateway > * { min-width: 0; max-width: 100% }
  .gateway-query-state { display: none }
  .os-chat, .os-gateway { box-shadow: inset 0 -1px 0 var(--line-soft) }
  .os-chat { padding: var(--s3) }
  .chat { max-height: 168px }
  .os-tools { padding: var(--s2) var(--s3) }
  .tool-t { display: none }
  .doc-scroll { max-height: 232px; padding: var(--s3) }
  .doc { padding: var(--s4) }
  .doc-t { font-size: 14px }
  .cl-b { font-size: 12px; line-height: 1.7 }
  .banners { grid-template-columns: 1fr; padding: var(--s2) var(--s3) }
  /* à 390 px la colonne d'état repasse sous le texte : la garder à
     droite écraserait l'explication en deux mots par ligne */
  .bn { padding: var(--s2); grid-template-columns: auto minmax(0, 1fr) }
  .bn-s { grid-column: 2; justify-self: start }
  .os-ctx { grid-template-columns: 1fr; gap: var(--s2); padding: var(--s3) }
  .ctx-lines { gap: var(--s3) }
  .ctx-l dd { max-width: none; font-size: 12px }

  .fshell { height: 96px; max-width: 320px }

  /* ── le téléphone ── */
  .b { font-size: 12px; padding: var(--s1) var(--s3); line-height: 1.3 }
  .b-h { font-size: 12px }
  .thread { padding: var(--s2) var(--s3); gap: var(--s1) }
  .thread-card { padding: var(--s2); font-size: 12px }
  .thread-day { margin: 0 0 var(--s1); font-size: 12px }
  .sbar { height: var(--s6); padding: 0 var(--s4); font-size: 12px }
  .phone-notch { transform: translateX(-50%) scale(.78); transform-origin: top center }
  .phone-screen { border-radius: var(--s7) }
  .phone-body { border-radius: var(--s8) }
  .phone-body:before { top: 88px }
  .phone-body:after { top: 76px }
  .phone-header { padding: var(--s1) var(--s3) }
  .phone-av { width: var(--s7); height: var(--s7); font-size: 12px }
  .phone-who b { font-size: 13px }
  .composer { padding: var(--s2) var(--s3) var(--s1) }
  .composer-field { min-height: var(--s7); font-size: 12px }
  .composer-send { width: var(--s7); height: var(--s7) }
  .home-ind { display: none }

  /* ── les trois offres en pile ──
     En colonne, un filet horizontal ne relie plus deux repères : il
     barre la ligne. */
  .offres { grid-template-columns: 1fr; gap: var(--s4) }
  .offre-mark:after { display: none }

  /* ── Consulting Microsoft ── */
  .cons-warn { font-size: 13px; padding: var(--s4) }
  .cons-body { padding: var(--s4) }
  .fold-stage { height: auto; perspective: none; display: grid; gap: var(--s2) }
  .fold-back { display: none }
  .fold-flap { position: static; height: auto; min-height: 0; transform: none !important; padding: var(--s3); border-radius: var(--r-s); order: -1 }
  .fold-flap-tab { display: none }
  .fold-sheets { position: static; inset: auto; overflow: visible; display: grid; gap: var(--s2) }
  .fold-sheet { position: static; transform: none !important; height: auto; min-height: 0; border-radius: var(--r-s); transition: none; z-index: auto }
  .fold[data-state="closed"] .fold-sheets { display: none }
  .fold-sheet:not([data-active="1"]) .fold-body { display: none }
  .ms-folder .fold { --stage-h: auto; max-width: none }

  .assist { padding-top: var(--s5) }
  .q-opts[data-cols="2"] { grid-template-columns: 1fr }
  .q-t { font-size: 24px }
  .opt { padding: var(--s3) }
  .fig, .fig svg { width: 48px; height: 32px }
}

@media (max-width: 699px) {
  /* Environ 120 svh par beat, puis 72 svh de résultat net avant sortie. */
  .scene { height: 790svh }
  .scene-grid {
    position: sticky; top: 0; height: 100svh; min-height: 100svh;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    padding: 0; overflow: hidden;
  }
  .stage-col {
    width: 100%; height: 100%; min-height: 0;
    padding: var(--s3); align-content: center; overflow: hidden;
  }
  .stage-sticky, #stage-slot, .os-deck, .phone-deck { min-height: 0; max-height: 100% }
  /* Fenêtre de travail en mode focus : le chrome reste reconnaissable,
     mais une seule zone métier participe au layout de chaque chapitre. */
  .os { height: 340px; grid-template-rows: 30px minmax(0, 1fr) }
  .os-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) }
  .os-body > section:not([data-focus="1"]),
  .os > .os-ctx:not([data-focus="1"]),
  .os > .banners:not([data-focus="1"]) { display: none }
  .os-chat, .os-gateway, .os-doc, .os-ctx { min-height: 0; height: 100% }
  .os-chat { padding: var(--s3); box-shadow: none }
  .os-gateway { padding: var(--s2); gap: var(--s1); box-shadow: none; overflow: hidden }
  .gateway-request { padding: var(--s1) var(--s2) }
  .gateway-request-device { width: 28px; height: 28px; font-size: 12px }
  .gateway-request-b b, .gateway-query-b b { font-size: 12px }
  .gateway-item { min-height: 40px; padding: var(--s1) var(--s2) }
  .gateway-item-i { width: 24px; height: 28px }
  .gateway-skeleton { display: none }
  .gateway-result { padding: var(--s1) var(--s2) }
  .gateway-answer { display: none }
  .gateway-cite .cite-go { display: none }
  .gateway-branch { padding: var(--s1) var(--s2) }
  .chat, .doc-scroll { max-height: none; overflow: hidden }
  .chat .msg:not([data-focus="1"]) { display: none }
  .msg-agent { padding: var(--s3) }
  .msg-t { font-size: 12px; line-height: 1.45 }
  .cite { margin-top: var(--s2) }

  .doc-scroll { padding: var(--s2); background: var(--paper-3) }
  .doc { padding: var(--s3); height: 100%; overflow: hidden }
  .doc-k, .doc-t, .doc-p, .doc-sk { display: none }
  .doc-meta { margin: 0; padding: 0; border: 0; gap: var(--s2) } /* BORDER · document · le mode focus retire les filets de l'en-tête compact */
  .doc-meta > div:not(:has(.hl[data-active="1"])) { display: none }
  .cl:not(:has(.hl[data-active="1"])) { display: none }
  .os[data-chapter="outcome"] .cl { display: block; margin-top: var(--s3) }
  .os[data-chapter="outcome"] .cl-b { display: none }
  .os[data-chapter="outcome"] .cl-h { margin: 0 }
  .os[data-chapter="outcome"] .doc-meta > div { display: flex }
  .os[data-variant="finance"] > .banners[data-focus="1"] {
    display: grid; min-height: 0; padding: var(--s2); overflow: hidden;
  }
  .bn { min-height: 0; padding: var(--s2); grid-template-columns: auto minmax(0, 1fr) }
  .bn-s { grid-column: 2; justify-self: start }

  .os-ctx { padding: var(--s3); overflow: hidden; align-content: center }
  .os-ctx .ctx-src:not([data-focus="1"]),
  .os-ctx .ctx-l:not([data-focus="1"]) { display: none }
  .ctx-lines { grid-template-columns: minmax(0, 1fr); gap: var(--s2) }
  .ctx-l dd { font-size: 12px }

  /* Le téléphone devient une carte de conversation : même objet, sans
     la décoration matérielle qui consommait près de la moitié du mobile. */
  :root { --phone-w: 100%; --phone-screen-h: 340px; --phone-pad: 0px }
  .phone { width: min(100%, 358px) }
  .phone-body {
    padding: 0; border-radius: 20px; background: var(--paper);
    box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 14px 32px rgba(0,0,0,.12);
  }
  .phone-body:before, .phone-body:after, .phone-notch, .sbar, .home-ind { display: none }
  .phone-screen { height: var(--phone-screen-h); border-radius: 20px }
  .phone-header { padding: var(--s2) var(--s3) }
  .channel-picker { width: min(100%, 358px); margin-bottom: var(--s2); padding: var(--s1) var(--s2); gap: var(--s2) }
  .channel-picker-label { display: none }
  .channel-picker .channel-switch { width: 100%; margin: 0 }
  .channel-switch button { min-height: 26px; font-size: 12px }
  .channel-email { padding: var(--s2) var(--s3) }
  .email-window { height: 340px; grid-template-rows: 30px minmax(0,1fr) }
  .email-window-bar { padding: 0 var(--s3); gap: var(--s2) }
  .email-window-title { text-align: left; font-size: 12px }
  .email-window-sim { display: none }
  .email-window-body { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) }
  .email-mailbox { display: flex; gap: var(--s1); padding: var(--s2); overflow-x: auto; box-shadow: inset 0 -1px 0 var(--line-soft) }
  .email-mailbox b { margin: 0 var(--s2) 0 0; align-self: center; white-space: nowrap }
  .email-reader { padding: var(--s2) }
  .email-reader .phone-email { width: 100%; padding: var(--s3); gap: var(--s2); box-shadow: none }
  .email-reader .email-body p { font-size: 12px; line-height: 1.45 }
  .phone-act { display: none }
  .phone-av { width: 30px; height: 30px; font-size: 12px }
  .phone-who b { font-size: 12px }
  .phone-who span { font-size: 12px }
  .thread { padding: var(--s2) var(--s3); gap: var(--s2) }
  .thread-head { gap: var(--s1) }
  .thread-flow { overflow: hidden; display: grid; align-content: end }
  .thread-card { padding: var(--s2); font-size: 12px }
  .thread-card-h { margin-bottom: var(--s1) }
  .thread-card b { font-size: 12px }
  .thread-day { font-size: 12px }
  .b { max-width: 88%; font-size: 12px }
  .slot-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1) }
  .slot { grid-template-columns: 14px minmax(0, 1fr); min-height: 48px; padding: var(--s1); gap: var(--s1) }
  .slot-t { font-size: 12px }
  .slot-h { font-size: 12px }
  .slot-s { grid-column: 2; font-size: 12px }
  .slot-chosen { min-height: 0; font-size: 12px }
  .slot-go { min-height: 30px; margin-top: 0; padding: var(--s1); font-size: 12px }
  .composer { padding: var(--s2) var(--s3) }
  .composer-field { min-height: 30px; font-size: 12px }
  .composer-send { width: 30px; height: 30px }
  .composer-note { font-size: 12px }
  .phone-email { gap: var(--s1); padding: var(--s2); box-shadow: none }
  .email-head { gap: var(--s1) }
  .email-app { font-size: 12px }
  .email-status { font-size: 12px }
  .email-fields { gap: 1px; padding-bottom: var(--s1) }
  .email-fields > div { grid-template-columns: 30px minmax(0,1fr); gap: var(--s1) }
  .email-fields dt, .email-fields dd { font-size: 12px }
  .email-body p { font-size: 12px; line-height: 1.3 }
  .thread-flow[data-chapter="trace"] .email-body,
  .thread-flow[data-chapter="validation"] .email-body { display: none }
  .email-sources { padding-top: var(--s1) }
  .email-sources-k, .email-wait { font-size: 12px }
  .email-sources li { font-size: 12px }

  /* Les six choix restent scannables sans tunnel vertical. */
  .metier-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) }
  .metier-card { min-height: 0; padding: var(--s3) }
  .metier-n { font-size: 13px }
  .metier-l { display: none }
  .metier-code { font-size: 12px }
  .h1f { max-width: none }
  .svc-actions { align-items: flex-start }
  .assist-entry-card { min-height: 0; padding: var(--s5); grid-template-columns: minmax(0, 1fr); gap: 0 }
  .assist-preview { display: none }
  .assist-ascii { inset: 0; width: 100%; padding: var(--s3); font-size: 12px; opacity: .12; clip-path: none }
  .run-models-plate { min-height: 675px; padding: var(--s3) 0 }
  .run-model-switch { width: 100%; margin: 0 0 8px }
  .run-model-switch button { padding-inline: var(--s1); font-size: 12px }
  .run-model-ticket { width: 100%; padding: 0 8px 8px; border-radius: 16px }
  .run-model-ticket-plate { height: 50px; padding-inline: 6px }
  .run-model-ticket-plate h2 { font-size: 15px; line-height: 20px }
  .run-model-ticket-plate span { font-size: 9px }
  .run-model-ticket-stack { border-radius: 10px }
  .run-model-ascii-bg {
    opacity: .5;
    mask-image: linear-gradient(to bottom,black 0 38%,rgba(0,0,0,.22) 56%,transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom,black 0 38%,rgba(0,0,0,.22) 56%,transparent 78%);
  }
  .run-model-panel { grid-template-columns: minmax(0,1fr); min-height: 486px }
  .run-model-ticket-copy { grid-column: 1; justify-self: center; width: 100%; min-height: 486px; padding: 164px 24px 24px }
  .run-model-ticket-foot { margin-top: var(--s5) !important; padding-top: 0 }
  .run-model-ticket-copy h3 { font-size: 19px }
  .run-model-ticket-copy header { align-items: center }
  .run-model-ticket-copy header span { font-size: 9px }

  /* Sur mobile, le même objet occupe le viewport ; seule sa coque
     s'efface pour laisser davantage de place au contenu utile. */
  #view-services .scene { margin-inline: calc(var(--gutter) * -1); height: 620svh }
  #view-services .scene-grid {
    height: 100vh; height: 100svh; min-height: 100vh; min-height: 100svh;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    gap: 0; padding: 0; overflow: hidden;
  }
  #view-services .stage-col {
    height: 100%; padding: var(--s3);
    align-content: stretch;
  }
  #view-services .stage-sticky,
  #view-services #stage-slot,
  #view-services .os-deck,
  #view-services .phone-deck { width: 100%; height: 100%; max-height: none }

  #view-services .os {
    width: 100%; height: 100%; grid-template-rows: minmax(0,1fr);
    border-color: transparent; /* BORDER · structure · la coque desktop devient transparente en plein écran mobile */
    border-radius: 0; box-shadow: none; background: transparent;
  }
  #view-services .os-bar { display: none }
  #view-services .os-body { height: 100%; background: transparent }

  #view-services .phone-deck { align-content: stretch }
  #view-services .phone,
  #view-services .email-deck { width: 100%; max-width: none; height: 100% }
  #view-services .phone-body,
  #view-services .phone-screen {
    width: 100%; max-width: none; height: 100%; border-radius: 0;
    background: transparent; box-shadow: none;
  }
  #view-services .phone-screen { background: var(--paper) }
  #view-services .channel-picker { width: 100%; min-height: 52px; margin: 0 0 var(--s2); background: transparent; box-shadow: none }
  #view-services .channel-switch button { min-height: 44px; font-size: 12px }
  #view-services .email-window {
    width: 100%; height: 100%; grid-template-rows: minmax(0,1fr);
    border-color: transparent; /* BORDER · structure · la fenêtre email perd sa coque mais garde son contenu mobile */
    border-radius: 0; box-shadow: none; background: transparent;
  }
  #view-services .email-window-bar { display: none }
  #view-services .email-window-body { height: 100% }
  #view-services .composer:not([data-live="1"]) { display: none }

}





/* ══════════════ DOSSIERS EMAIL — de vrais contrôles ══════════════
   Les trois <span> de la boîte email sont devenus des boutons : icône,
   libellé, compteur, aria-current. Cliquer change le dossier affiché ;
   un dossier vide se dit vide plutôt que de rejouer le même fil. Aucune
   bordure : l'anneau clavier est celui du site, l'état actif est dit
   par la matière, l'encre et aria-current. */
/* La colonne de dossiers faisait 164 px : « Boîte de réception » y
   arrivait tronqué en « Boîte de réc… » alors qu'aucun autre libellé de
   la page ne l'est. Vingt-quatre pixels de plus et le nom tient en
   entier — le lecteur, lui, n'en perd aucun. Le rail mobile est traité
   plus bas, ce point ne concerne que la fenêtre à deux colonnes. */
@media (min-width: 700px) {
  .email-window-body { grid-template-columns: 212px minmax(0, 1fr) }
}

.email-mailbox .mailbox-list {
  list-style: none; display: grid; gap: 2px; margin: 0; padding: 0;
}
.email-mailbox .mailbox-item { display: grid; min-width: 0 }

/* 32 px de haut : la fenêtre email est dense et ces dossiers ne sont
   pas la surface principale de la Démonstration — mais le doigt les
   atteint. */
.email-mailbox .mailbox-folder {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: var(--s2); align-items: center;
  width: 100%; min-height: 32px; padding: 0 var(--s2);
  border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: -.005em;
  text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background .16s var(--e-out), color .16s var(--e-out);
}
.email-mailbox .mailbox-folder-i {
  display: flex; padding: 0; color: inherit;
  opacity: .72; transition: opacity .16s var(--e-out);
}
.email-mailbox .mailbox-folder-i svg { display: block }
.email-mailbox .mailbox-folder-t {
  padding: 0; min-width: 0; font-size: 12px; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* le compteur : un chiffre, pas une pastille. Il dit combien de
   messages d'exemple ce dossier contient — zéro compris. */
.email-mailbox .mailbox-folder-n {
  padding: 0; min-width: 12px;
  font: 12px var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--text-tertiary); text-align: right;
  transition: color .16s var(--e-out);
}

@media (hover: hover) and (pointer: fine) {
  .email-mailbox .mailbox-folder:hover { background: var(--paper-3); color: var(--text-secondary) }
  .email-mailbox .mailbox-folder:hover .mailbox-folder-i { opacity: 1 }
  .email-mailbox .mailbox-folder:hover .mailbox-folder-n { color: var(--text-secondary) }
  .email-mailbox .mailbox-folder[aria-current="true"]:hover { background: var(--s-lu-bg); color: var(--s-lu-ink) }
}

/* le focus clavier réutilise l'anneau global du site ; ici on ne fait
   qu'asseoir le dossier survolé par le clavier sur la même matière que
   le survol souris, pour que les deux parcours se ressemblent. */
.email-mailbox .mailbox-folder:focus-visible { background: var(--paper-3); color: var(--text-secondary) }
.email-mailbox .mailbox-folder:focus-visible .mailbox-folder-i { opacity: 1 }

.email-mailbox .mailbox-folder:active,
.email-mailbox .mailbox-folder.is-pressed { transform: scale(.97) }

.email-mailbox .mailbox-folder[aria-current="true"] {
  background: var(--s-lu-bg); color: var(--s-lu-ink); font-weight: 700;
}
.email-mailbox .mailbox-folder[aria-current="true"] .mailbox-folder-i { opacity: 1 }
.email-mailbox .mailbox-folder[aria-current="true"] .mailbox-folder-n { color: var(--s-lu-ink) }

/* ── LE DOSSIER VIDE LE DIT ──
   Les données de la Démonstration sont un seul fil d'exemple. Rejouer
   ce fil sous « Brouillons » puis sous « Archives » ferait croire à
   trois contenus là où il n'y en a qu'un. Le dossier vide s'annonce
   donc vide, dans la même plaque que le reste du lecteur. */
.email-reader .mailbox-empty {
  margin: 0 0 0 var(--s6); padding: var(--s4); border-radius: var(--r-l);
  background: var(--paper-2); color: var(--text-muted);
  font-size: 12px; line-height: 1.5;
}
.email-reader .mailbox-empty[hidden] { display: none }

@media (max-width: 699px) {
  /* la colonne devient un rail horizontal : la liste suit. */
  .email-mailbox .mailbox-list { grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--s1) }
  .email-mailbox .mailbox-folder {
    grid-template-columns: 14px auto auto; min-height: 32px; padding: 0 var(--s2);
  }
  .email-mailbox .mailbox-folder-t { white-space: nowrap }
  .email-reader .mailbox-empty { margin: 0; padding: var(--s3); font-size: 12px }
}


/* ══════════════ MICRO-DÉTAILS — les états qui répondent ══════════════
   Une passe unique, pour toute la page : tout ce qui se clique répond
   au survol par sa matière, à l'appui par une très légère échelle, et
   au clavier par l'anneau global. Aucun de ces états ne porte
   d'information — ils confirment le geste, ils ne le remplacent pas. */
@media (hover: hover) and (pointer: fine) {
  .cite-go:hover { color: var(--blue) }
  .slot:not([aria-checked="true"]):hover { background: var(--paper-3) }
  .email-attachment:hover { background: var(--paper-3) }
  .src:active, .chip:active { transform: scale(.98) }
}
.slot:active { transform: scale(.985) }
.cite-go:active { transform: translate3d(0,1px,0) }
.channel-switch button:active { transform: scale(.96) }

/* ══════════════ M. PRÉFÉRENCES SYSTÈME ══════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  /* Les MÊMES états, posés sur la même valeur de scroll, sans le
     micro-déplacement. L'aplat garde sa largeur, la citation garde sa
     place, les banners gardent leur ordre : seule la translation
     disparaît. L'information ne dépend jamais du mouvement. */
  .msg, .cite, .bn, .gateway-request, .gateway-query, .gateway-item,
  .gateway-result, .gateway-branch,
  .assist-entry-copy > *, .assist-preview, .assist-preview-result, .offre, .run-models-plate { transform: none !important }
  .fig .fa, .fig .fb {
  transition-delay: calc(var(--k, 0) * 90ms); transform: none !important }
  .fshell-flap { transform: none !important }
}

/* ══════════════ MICROSOFT — catalogue sans mockup ══════════════ */
.ms-catalog { display: grid; gap: clamp(72px, 9vw, 128px); padding-bottom: var(--s8) }
.ms-solutions { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch }
.ms-expertise { display: grid; grid-template-columns: minmax(220px, 330px) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: start }
.ms-section-head { position: static }
.ms-solutions > .ms-section-head {
  grid-column: 1 / span 4; grid-row: 1; align-self: stretch; padding: clamp(28px, 3vw, 42px);
  border-radius: 26px; overflow: hidden; color: #fff;
  background-color: #111;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),radial-gradient(circle at 86% 15%,rgba(0,119,230,.34),transparent 34%);
  background-size: 28px 28px,28px 28px,100% 100%;
  box-shadow: 0 28px 64px rgba(18,25,36,.15);
}
.ms-solutions > .ms-section-head .eyebrow,
.ms-solutions > .ms-section-head > p:last-child { color: rgba(255,255,255,.66) }
.ms-section-head h2,
.ms-contact h2 { margin: var(--s3) 0 var(--s3); font-size: clamp(28px, 3.2vw, 48px); font-weight: 500; line-height: 1.06; letter-spacing: -.035em }
.ms-section-head > p:last-child,
.ms-contact p { max-width: 50ch; margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.55 }
.ms-app-grid {
  grid-column: 5 / span 8; grid-row: 1; display: grid; gap: 22px; min-width: 0;
  padding: clamp(26px,3vw,38px); border-radius: 26px; background: rgba(255,255,255,.92);
  box-shadow: 0 24px 58px rgba(20,28,42,.09),inset 0 0 0 1px rgba(40,55,80,.045);
}
.ms-apps-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.8fr); gap: 8px 28px; align-items: end }
.ms-apps-head .eyebrow { grid-column: 1 / -1 }
.ms-apps-head h2 { margin: 0; font-size: clamp(24px,2.4vw,34px); font-weight: 500; line-height: 1.08; letter-spacing: -.03em }
.ms-apps-head > p:last-child { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55 }
.ms-app-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 24px }
.ms-app {
  min-width: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 18px 0; background: transparent;
}
.ms-app-icon { width: 68px; height: 68px; display: grid; place-items: center; overflow: hidden; border-radius: 17px; box-shadow: 0 12px 26px rgba(27,35,48,.12), inset 0 1px 0 rgba(255,255,255,.55) }
.ms-app-icon img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 3px 7px rgba(27,35,48,.16)) }
.ms-app-icon-violet { background: linear-gradient(145deg,#f4eaff,#d7c3ff) }
.ms-app-icon-blue { background: linear-gradient(145deg,#e8f3ff,#b9d9ff) }
.ms-app-icon-teal { background: linear-gradient(145deg,#e6fbf8,#aeece4) }
.ms-app-icon-indigo { background: linear-gradient(145deg,#edf0ff,#c4ccff) }
.ms-app-icon-cyan { background: linear-gradient(145deg,#e7fbff,#b7eaf5) }
.ms-app-icon-rose { background: linear-gradient(145deg,#fff0fa,#efc5e4) }
.ms-app h2 { margin: 2px 0 7px; font-size: 16px; font-weight: 500; line-height: 20px }
.ms-app p { margin: 0 0 11px; color: var(--text-secondary); font-size: 14px; line-height: 20px }
.ms-app small { color: var(--blue); font-size: 12px; font-weight: 500; line-height: 16px }
.ms-expertise-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px }
.ms-expertise-list article { display: grid; align-content: start; gap: 14px; min-height: 150px; padding: 24px; border-radius: 20px; background: rgba(255,255,255,.84); box-shadow: 0 14px 36px rgba(20,28,42,.065) }
.ms-expertise-list h3 { margin: 0; font-size: 16px; font-weight: 500; line-height: 20px }
.ms-expertise-list p { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 }
.ms-expertise-list span { color: var(--text-secondary); font-size: 14px; line-height: 20px }
.ms-contact { display: flex; align-items: end; justify-content: space-between; gap: var(--s6); padding: clamp(28px, 5vw, 64px); border-radius: 28px; background: #111; color: #fff; box-shadow: 0 30px 80px rgba(15,20,30,.16) }
.ms-contact .eyebrow,
.ms-contact p { color: rgba(255,255,255,.64) }
.ms-contact .btn { flex: none; background: #fff; color: #111 }
.site-footer { align-items: center }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px }
.site-footer a { color: var(--text-secondary); text-decoration: none }
.site-footer a:hover { color: var(--text) }

/* Bento Microsoft : un grand bloc applications, entouré de blocs de
   contexte et d'expertise. Les cellules changent de matière et de format,
   pas de vocabulaire d'interface. */
.ms-bento {
  display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-auto-rows: minmax(150px,auto); gap: 16px;
  padding: 16px; border-radius: 34px; background: rgba(255,255,255,.74);
  box-shadow: 0 28px 80px rgba(20,28,42,.1);
}
.ms-bento-tile { min-width: 0; border-radius: 26px; background: rgba(247,247,249,.94); box-shadow: 0 14px 36px rgba(20,28,42,.065) }
.ms-bento-intro {
  grid-column: 1 / span 4; grid-row: 1 / span 2; position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 430px; padding: clamp(28px,3vw,44px); color: #fff;
  background-color: #111;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),radial-gradient(circle at 86% 15%,rgba(0,119,230,.38),transparent 35%);
  background-size: 28px 28px,28px 28px,100% 100%;
}
.ms-bento-intro .eyebrow,
.ms-bento-intro > p { color: rgba(255,255,255,.66) }
.ms-bento-intro h2 { margin: var(--s3) 0; max-width: 12ch; font-size: clamp(30px,3.5vw,52px); font-weight: 500; line-height: 1.03; letter-spacing: -.04em }
.ms-bento-intro > p { margin: 0; max-width: 34ch; font-size: 14px; line-height: 1.55 }
.ms-bento-intro > span { margin-top: auto; padding-top: 36px; color: rgba(255,255,255,.58); font: 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase }
.ms-bento-apps { grid-column: 5 / span 8; grid-row: 1 / span 3; display: grid; align-content: start; gap: 22px; padding: clamp(26px,3vw,40px) }
.ms-bento .ms-app-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 28px }
.ms-bento .ms-app { padding: 18px 0 }
.ms-bento-skill { display: grid; align-content: start; gap: 10px; min-height: 170px; padding: 26px }
.ms-bento-skill-1 { grid-column: 1 / span 4; grid-row: 3 }
.ms-bento-skill-2 {
  grid-column: 1 / span 4; grid-row: 4; min-height: 220px; color: #fff;
  background:
    radial-gradient(circle at 78% 18%,rgba(94,232,255,.92),transparent 22%),
    radial-gradient(circle at 22% 88%,rgba(126,83,255,.92),transparent 34%),
    linear-gradient(145deg,#15102d 12%,#4130c8 58%,#087cdb);
  box-shadow: 0 24px 52px rgba(39,42,133,.22);
}
.ms-bento-skill-3 { grid-column: 5 / span 4; grid-row: 4 }
.ms-bento-skill-4 { grid-column: 9 / span 4; grid-row: 4; color: #fff; background: #101012 }
.ms-bento-skill h3 { margin: 0; font-size: clamp(22px,2vw,30px); font-weight: 500; line-height: 1.08; letter-spacing: -.025em }
.ms-bento-skill > p:last-child { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 8px 0 0 }
.ms-bento-skill span { color: var(--text-secondary); font-size: 13px; line-height: 18px }
.ms-bento-skill-2 .eyebrow,
.ms-bento-skill-2 span,
.ms-bento-skill-4 .eyebrow,
.ms-bento-skill-4 span { color: rgba(255,255,255,.72) }
.ms-bento-skill-2 h3 { max-width: 8ch; margin-top: auto; font-size: clamp(28px,2.8vw,42px) }
.ms-bento-skill-4 > p:last-child { gap: 8px }
.ms-bento-skill-4 span { padding: 5px 9px; border-radius: 8px; background: rgba(255,255,255,.08) }
.ms-bento .ms-contact { grid-column: 1 / -1; grid-row: 5; min-height: 230px; background: #111; color: #fff; box-shadow: 0 28px 70px rgba(15,20,30,.16) }

@media (hover: hover) and (pointer: fine) {
  .ms-app { transition: transform .42s cubic-bezier(.23,1,.32,1) }
  .ms-app:hover { transform: translate3d(0,-3px,0) }
  .ms-app-icon { transition: transform .46s cubic-bezier(.23,1,.32,1), box-shadow .46s cubic-bezier(.23,1,.32,1) }
  .ms-app:hover .ms-app-icon { transform: translate3d(0,-3px,0) rotate(-1.5deg); box-shadow: 0 18px 34px rgba(27,35,48,.17), inset 0 1px 0 rgba(255,255,255,.65) }
}

@media (min-width: 700px) and (max-width: 1040px) {
  .ms-solutions { grid-template-columns: minmax(0,1fr) }
  .ms-solutions > .ms-section-head,
  .ms-app-grid { grid-column: 1; grid-row: auto; min-height: 0 }
  .ms-expertise { grid-template-columns: minmax(0,1fr); gap: 28px }
  .ms-bento { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: auto }
  .ms-bento-intro,
  .ms-bento-apps,
  .ms-bento-skill-1,
  .ms-bento-skill-2,
  .ms-bento-skill-3,
  .ms-bento-skill-4,
  .ms-bento .ms-contact { grid-column: auto; grid-row: auto }
  .ms-bento-intro,
  .ms-bento-apps,
  .ms-bento .ms-contact { grid-column: 1 / -1 }
}

@media (max-width: 699px) {
  .cons-head { padding-bottom: 48px }
  .ms-catalog { gap: 72px }
  .ms-solutions,
  .ms-expertise { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 14px }
  .ms-solutions > .ms-section-head { grid-column: 1; grid-row: auto; min-height: 300px; padding: 28px 22px; border-radius: 20px }
  .ms-section-head { position: static }
  .ms-section-head h2,
  .ms-contact h2 { font-size: 30px }
  .ms-app-grid { grid-column: 1; grid-row: auto; gap: 16px; padding: 22px; border-radius: 20px }
  .ms-apps-head { grid-template-columns: minmax(0,1fr) }
  .ms-apps-head .eyebrow { grid-column: 1 }
  .ms-apps-head h2 { font-size: 24px }
  .ms-app-list { grid-template-columns: minmax(0,1fr); gap: 0 }
  .ms-app { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; min-height: 0; padding: 16px 0 }
  .ms-app-icon { width: 58px; height: 58px; border-radius: 15px }
  .ms-app-icon img { width: 32px; height: 32px }
  .ms-expertise-list { grid-template-columns: minmax(0,1fr) }
  .ms-expertise-list article { min-height: 0; gap: 8px }
  .ms-contact { display: grid; align-items: start; padding: 28px 22px; border-radius: 20px }
  .ms-contact .btn { width: 100%; min-height: 44px }
  .site-footer { align-items: flex-start }
  .site-footer nav { justify-content: flex-start }
  .ms-bento { grid-template-columns: minmax(0,1fr); grid-auto-rows: auto; gap: 12px }
  .ms-bento-intro,
  .ms-bento-apps,
  .ms-bento-skill-1,
  .ms-bento-skill-2,
  .ms-bento-skill-3,
  .ms-bento-skill-4,
  .ms-bento .ms-contact { grid-column: 1; grid-row: auto }
  .ms-bento-intro { min-height: 330px; padding: 28px 22px; border-radius: 20px }
  .ms-bento-apps { padding: 22px; border-radius: 20px }
  .ms-bento .ms-app-list { grid-template-columns: minmax(0,1fr); gap: 0 }
  .ms-bento-skill { min-height: 0; padding: 24px; border-radius: 18px }
  .ms-bento { padding: 10px; border-radius: 24px }
  .ms-bento-skill-2 { min-height: 230px }
}

/* ══════════════ CONSULTING — solutions Origami et plateformes animées ══════════════ */
#view-consulting .wrapf { min-height: 100svh; display: flex; flex-direction: column }
#view-consulting .cons-head { width: 100%; max-width: 1200px; margin-inline: auto; padding: 64px 0 26px }
#view-consulting .cons-head .eyebrow { margin-bottom: 12px }
#view-consulting .cons-head .h1f { max-width: 22ch; margin: 0; font-size: clamp(30px,3.6vw,48px); line-height: 1.08; letter-spacing: -.045em }
#view-consulting .cons-head .lede { max-width: 72ch; margin: 12px 0 0; color: #646871; font-size: 15px; line-height: 1.5 }
#view-consulting .ms-intro-contact { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; color: #315c91; font-size: 13px; text-decoration: none }
#view-consulting .ms-intro-contact:hover { text-decoration: underline; text-underline-offset: 4px }
#view-consulting .ms-catalog { flex: 1; padding: 0 0 16px }
#view-consulting .site-footer { min-height: 44px; padding-block: 16px }
.ms-experience { --ms-ease: cubic-bezier(.23,1,.32,1); position: relative; width: min(100%,1200px); margin-inline: auto; display: grid }
.ms-panel { grid-area: 1 / 1; min-width: 0; position: relative; visibility: visible; transition: opacity 180ms var(--ms-ease),transform 220ms var(--ms-ease),visibility 0s }
.ms-panel[aria-hidden="true"] { visibility: hidden; height: 0; min-height: 0; padding: 0; overflow: hidden; opacity: 0; transform: translateY(8px); pointer-events: none }
.ms-panel[aria-hidden="false"] { visibility: visible; opacity: 1; transform: none }
.ms-hub { display: grid; grid-template-columns: 1.05fr 1fr 1fr; grid-template-rows: repeat(2,minmax(248px,auto)) auto; gap: 14px }
.ms-hub-card { position: relative; min-width: 0; padding: 24px; overflow: hidden; border-radius: 22px; border: 1px solid #e2e5eb; color: #292b31; background: #fff; box-shadow: 0 2px 4px #20334a03,0 10px 30px #20334a05 }
.ms-hub-card .eyebrow { color: #6c7180; font-size: 10px; letter-spacing: .1em }
.ms-hub-solutions { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; background: linear-gradient(145deg,#f3f6fc,#fff 65%); padding: 28px }
.ms-solutions-copy { margin-top: auto; position: relative; z-index: 2 }
.ms-count { display: block; font-size: 11px; color: #536f9b; margin-bottom: 10px }
.ms-solutions-copy h2 { margin: 0; font-size: clamp(26px,2.6vw,36px); font-weight: 500; line-height: 1.1; letter-spacing: -.04em }
.ms-solutions-copy p { margin: 14px 0 22px; max-width: 32ch; font-size: 13px; line-height: 1.6; color: #636c7b }
.ms-product-cloud { display: grid; grid-template-columns: repeat(5,1fr); align-content: center; gap: 12px; margin: 26px 0 34px; min-height: 138px; position: relative; z-index: 1 }
.ms-product-cloud > span { display: grid; place-items: center; aspect-ratio: 1; color: var(--ink); background: #fff; border: 1px solid #e7ebf1; border-radius: 14px; box-shadow: 0 8px 12px -7px #263e632d; animation: msBadgeFloat 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * -320ms) }
.ms-product-cloud svg { width: 24px; height: 24px }
@keyframes msBadgeFloat { 0%,70%,100% { transform: translateY(0) } 35% { transform: translateY(-7px) } }
.cons-slot { position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit }
.cons-slot > .card-conseil { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: inherit; visibility: visible; transition: opacity 180ms var(--ms-ease),transform 220ms var(--ms-ease),visibility 0s }
.ms-experience[data-entered="1"] .cons-slot > .card-conseil { opacity: 0; visibility: hidden; transition-delay: 0s,0s,180ms; transform: scale(.985); pointer-events: none }
.ms-tech-heading { position: relative; z-index: 2; display: flex; gap: 10px; align-items: center }
.ms-tech-heading img { width: 24px; height: 24px; object-fit: contain }
.ms-tech-heading h2 { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em }
.ms-tech-description { position: relative; z-index: 2; margin: 10px 0 0; color: #666e7b; font-size: 12px; line-height: 1.5 }
.ms-tech-foot { display: block; position: relative; z-index: 2; margin-top: auto; color: #737b89; font-size: 10px; line-height: 1.5 }
.ms-hub-apps,.ms-hub-automate,.ms-hub-dynamics,.ms-hub-copilot { display: flex; flex-direction: column }
.ms-hub-apps { grid-column: 2; grid-row: 1; background: linear-gradient(160deg,#fff,#faf6fc) }
.ms-hub-automate { grid-column: 3; grid-row: 1; background: linear-gradient(160deg,#fff,#f5f8fd) }
.ms-hub-dynamics { grid-column: 2; grid-row: 2 }
.ms-hub-copilot { grid-column: 3; grid-row: 2; background: linear-gradient(155deg,#fff,#f8f6fc) }
.ms-pills { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 9px 8px; min-height: 125px; padding: 18px 0; margin-block: auto }
.ms-pills > span { white-space: nowrap; border: 1px solid #e4dce9; border-radius: 999px; padding: 7px 11px; color: #785985; background: #fff; font-size: 11px; box-shadow: 0 3px 8px #583b7607; animation: msPillFloat 6s ease-in-out infinite; --angle:-4deg }
.ms-pills > span:nth-child(2n) { --angle:5deg; animation-delay: -2s; background: #f4edf9 }
.ms-pills > span:nth-child(3n) { --angle:-2deg; animation-delay: -4s; color: #546c88; border-color: #dce5f0; background: #f3f7fc }
@keyframes msPillFloat { 0%,100% { transform: translateY(2px) rotate(var(--angle)) } 50% { transform: translateY(-4px) rotate(0deg) } }
.ms-flow { display: block; width: 100%; height: 130px; flex: 1; min-height: 105px; margin: 2px 0 8px; overflow: visible }
.ms-flow-packet { animation: msPacketA 3.8s ease-in-out infinite }
.packet-b { animation-name: msPacketB; animation-delay: -1s }
.packet-c { animation-name: msPacketB; animation-delay: -.4s }
@keyframes msPacketA { 0% { opacity: 0; transform: translateX(0) } 15% { opacity: 1 } 75% { opacity: 1 } 100% { opacity: 0; transform: translateX(69px) } }
@keyframes msPacketB { 0% { opacity: 0; transform: translateX(0) } 15% { opacity: 1 } 75% { opacity: 1 } 100% { opacity: 0; transform: translateX(41px) } }
.ms-module-rail { overflow-x: auto; overflow-y: hidden; margin: 18px -24px; padding: 8px 0; scrollbar-width: none; mask-image: linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image: linear-gradient(to right,transparent,#000 8%,#000 92%,transparent) }
.ms-module-rail::-webkit-scrollbar { display: none }
.ms-module-track { display: flex; width: max-content; animation: msModuleSlide 35s linear infinite }
.ms-module-group { display: flex; gap: 18px; padding-right: 18px }
.ms-module { width: 84px; flex: 0 0 84px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #596171; font-size: 10px; line-height: 1.3; text-align: center }
.ms-module img { width: 42px; height: 42px; object-fit: contain }
@keyframes msModuleSlide { to { transform: translateX(-50%) } }
.ms-hub-contact { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: space-between; align-items: center; gap: 24px; background: #edf3fc; border-color: #dce6f5; padding: 24px 28px }
.ms-hub-contact h2 { margin: 8px 0 6px; font-size: 25px; line-height: 1.15; letter-spacing: -.025em; font-weight: 500 }
.ms-hub-contact p { margin: 0; font-size: 13px; line-height: 1.5; color: #5f6e82 }
.ms-contact-actions { flex-shrink: 0; display: grid; gap: 8px }
.ms-email { display: inline-flex; align-items: center; min-height: 44px; justify-content: center; font-size: 11px; color: #5f6e82; text-decoration: none }
.ms-experience .ms-primary { display: flex; min-height: 44px; gap: 24px; align-items: center; justify-content: space-between; padding: 12px 17px; border: 1px solid #254b79; border-radius: 11px; background: #294f7e; color: #fff; font-size: 12px; line-height: 1.5; font-weight: 500; text-decoration: none; cursor: pointer }
.ms-solutions-copy .ms-primary { width: 100% }
.ms-motion-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 2px 0; color: #7b828e; font: 10px/1.5 var(--font-mono) }
.ms-motion-bar button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: #626c7c; font: inherit; cursor: pointer }
.ms-motion-bar button:disabled { cursor: default; color: #6a7380 }
.ms-panel-solutions { padding: 26px; border: 1px solid #e1e6ee; border-radius: 22px; background: #f3f6fa }
.ms-panel-solutions > header { display: flex; align-items: start; gap: 24px; margin-bottom: 24px }
.ms-panel-solutions > header button { flex-shrink: 0; min-height: 44px; padding: 0 14px; border: 1px solid #e1e6ee; border-radius: 10px; color: #465263; background: #fff; cursor: pointer }
.ms-panel-solutions > header h2 { margin: 6px 0 10px; font-size: clamp(26px,3vw,36px); font-weight: 500; line-height: 1.13; letter-spacing: -.035em }
.ms-panel-solutions > header p { max-width: 68ch; margin: 0; font-size: 13px; line-height: 1.6; color: #626c7b }
.ms-solution-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px }
.ms-product { display: flex; align-items: flex-start; gap: 18px; position: relative; min-width: 0; padding: 24px; border: 1px solid #e4e8ef; border-radius: 16px; background: #fff }
.ms-product-icon { display: grid; flex: 0 0 42px; height: 42px; place-items: center; border: 1px solid #e5e9f0; border-radius: 12px; color: var(--ink); background: #fafbfd }
.ms-product-icon svg { width: 23px; height: 23px }
.ms-product > div { min-width: 0; padding-right: 8px }
.ms-product-theme { color: #747e8d; font-size: 10px }
.ms-product h3 { margin: 5px 0 10px; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.025em }
.ms-product p { margin: 0 0 12px; max-width: 44ch; font-size: 13px; line-height: 1.6; color: #626c7b }
.ms-product small { display: block; color: #77808e; font-size: 10px; line-height: 1.5 }
.ms-product a { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; margin-top: 10px; color: #315c91; text-decoration: none; font-size: 12px }
.ms-product-number { position: absolute; top: 20px; right: 18px; font: 9px/1 var(--font-mono); color: #9198a4 }
.ms-panel-solutions > footer { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 24px 0 0 }
.ms-panel-solutions > footer p { margin: 0; font-size: 13px; color: #626c7b }
.ms-experience :is(button,a) { -webkit-tap-highlight-color: transparent; transition: transform 140ms var(--ms-ease),background-color 140ms ease,color 140ms ease }
.ms-experience :is(button,a):active { transform: scale(.97) }
.ms-experience :is(button,a,[tabindex]):focus-visible { outline: 3px solid #2b72c4; outline-offset: 4px }
.ms-experience[data-input="keyboard"] :is(button,a,.ms-panel) { transition-duration: 0s }
.ms-hub-card:not([data-motion="true"]) * { animation-play-state: paused }
.ms-hub-card[data-motion="true"] * { animation-play-state: running }
.ms-hub-card .ms-pills span { animation-play-state: paused }
.ms-hub-card[data-motion="true"] .ms-pills span { animation-play-state: running }
.ms-module-rail:focus-within .ms-module-track { animation-play-state: paused }
@media (hover:hover) and (pointer:fine) {
  .ms-experience .ms-primary:hover { background: #1e406b }
  .ms-product a:hover,.ms-email:hover { text-decoration: underline; text-underline-offset: 4px }
  .ms-module-rail:hover .ms-module-track { animation-play-state: paused }
}
@media (max-width:1000px) {
  .ms-hub { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto }
  .ms-hub-solutions { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: .9fr 1.1fr; column-gap: 30px; align-items: center }
  .ms-hub-solutions > .eyebrow { grid-column: 1 / -1 }
  .ms-product-cloud { margin: 20px 0; gap: 12px }
  .ms-solutions-copy { margin-top: 18px }
  .ms-hub-apps { grid-column: 1; grid-row: 2 }
  .ms-hub-automate { grid-column: 2; grid-row: 2 }
  .ms-hub-dynamics { grid-column: 1; grid-row: 3 }
  .ms-hub-copilot { grid-column: 2; grid-row: 3 }
  .ms-hub-contact { grid-row: 4 }
  .ms-hub-apps,.ms-hub-automate,.ms-hub-dynamics,.ms-hub-copilot { min-height: 246px }
}
@media (max-width:599px) {
  #view-consulting .cons-head { padding: 60px 0 22px }
  #view-consulting .cons-head .h1f { font-size: 33px; max-width: 19ch }
  #view-consulting .cons-head .lede { font-size: 14px }
  .ms-hub { grid-template-columns: minmax(0,1fr); gap: 12px }
  .ms-hub-card { grid-column: 1; grid-row: auto; padding: 22px; border-radius: 20px }
  .ms-hub-solutions { display: flex }
  .ms-product-cloud { width: 100%; margin: 24px 0; min-height: 126px }
  .ms-solutions-copy { margin-top: 0 }
  .ms-solutions-copy h2 { font-size: 32px }
  .ms-solutions-copy p { font-size: 14px; max-width: none }
  .ms-tech-heading h2 { font-size: 20px }
  .ms-tech-description { font-size: 13px }
  .ms-tech-foot { font-size: 11px }
  .ms-pills > span { font-size: 12px }
  .ms-hub-contact { flex-direction: column; align-items: stretch; gap: 20px }
  .ms-contact-actions { width: 100% }
  .ms-experience .ms-primary { font-size: 14px }
  .ms-email { min-height: 44px; font-size: 12px }
  .ms-motion-bar { flex-wrap: wrap; gap: 0 }
  .ms-motion-bar button { padding-left: 0 }
  .ms-panel-solutions { padding: 18px }
  .ms-panel-solutions > header { flex-direction: column; gap: 18px }
  .ms-solution-grid { grid-template-columns: 1fr }
  .ms-product { padding: 18px; gap: 12px }
  .ms-product-icon { flex-basis: 34px; height: 34px; border-radius: 10px }
  .ms-product h3 { font-size: 19px; overflow-wrap: anywhere }
  .ms-product > div { padding: 0 }
  .ms-product-number { display: none }
  .ms-product small { font-size: 11px }
  .ms-product a { font-size: 13px }
  .ms-panel-solutions > footer { align-items: stretch; flex-direction: column }
}
@media (prefers-reduced-motion:reduce) {
  .ms-experience * { animation: none !important; transition-duration: 0s !important }
  .ms-experience :is(button,a):active { transform: none }
  .ms-module-rail { mask-image: none; -webkit-mask-image: none; margin-inline: 0 }
  .ms-module-track { width: 100%; transform: none }
  .ms-module-group { width: 100%; flex-wrap: wrap; justify-content: center; padding: 0; gap: 16px }
  .ms-module-group[aria-hidden="true"] { display: none }
  .ms-module { width: 70px; flex-basis: 70px }
}

/* Sanyam lab adaptations: occluding folders and pointer-origin button fill. */
.ms-folder-stack { position: relative; height: 280px; flex: 0 0 280px; width: 100%; margin: 18px 0 24px; isolation: isolate }
.ms-folder-trigger { position: absolute; left: 0; bottom: calc(var(--folder) * 42px); width: 100%; height: 125px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); z-index: calc(4 - var(--folder)); text-align: left }
.ms-folder-sheet { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 125px; border: 1px solid color-mix(in srgb,var(--ink) 22%,white); background: color-mix(in srgb,var(--ink) 12%,white); border-radius: 0 13px 13px 13px; box-shadow: 0 10px 20px -15px #20355366; transition: transform 260ms cubic-bezier(.23,1,.32,1); pointer-events: auto }
.ms-folder-tab { position: absolute; bottom: 100%; left: -1px; min-width: 45%; max-width: 90%; padding: 8px 12px 5px; border: 1px solid color-mix(in srgb,var(--ink) 22%,white); border-bottom: none; border-radius: 10px 14px 0 0; background: color-mix(in srgb,var(--ink) 12%,white); font-size: 10px; line-height: 1.4; white-space: nowrap }
.ms-folder-paper { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 8px 10px; margin: 14px 12px; padding: 14px 10px; border-radius: 8px; border: 1px solid #e5e9ee; background: #fff; color: #4a586b }
.ms-folder-paper svg { width: 22px; height: 22px; color: var(--ink) }
.ms-folder-paper b { font-size: 12px; font-weight: 500; align-self: center }
.ms-folder-paper small { grid-column: 1 / -1; font-size: 9px; line-height: 1.5; color: #788291 }
.ms-folder-trigger[aria-pressed="true"] .ms-folder-sheet { transform: translateY(-42px) }
.ms-folder-trigger:focus-visible { outline-offset: 7px; border-radius: 8px }
.ms-experience .ms-primary { position: relative; isolation: isolate; overflow: hidden }
.ms-primary::before { content: ''; position: absolute; inset: -100%; z-index: -1; background: #396d9e; border-radius: 50%; transform: scale(.001); transform-origin: var(--origin-x,50%) var(--origin-y,50%); transition: transform 260ms cubic-bezier(.23,1,.32,1) }
.ms-primary > span { transition: transform 180ms cubic-bezier(.23,1,.32,1) }
@media (hover:hover) and (pointer:fine) {
  .ms-folder-trigger:hover .ms-folder-sheet { transform: translateY(-55px) }
  .ms-experience .ms-primary:hover { background: #294f7e }
  .ms-primary:hover::before { transform: scale(1) }
  .ms-primary:hover > span { transform: translate(2px,-2px) }
}
@media (min-width:1001px) {
  .ms-hub { grid-template-columns: repeat(12,minmax(0,1fr)); grid-template-rows: minmax(280px,auto) minmax(280px,auto) minmax(220px,auto); gap: 16px }
  .ms-hub-solutions { grid-column: 1 / 5; grid-row: 1 / 3; padding: 25px }
  .ms-hub-apps { grid-column: 5 / 10; grid-row: 1 }
  .ms-hub-automate { grid-column: 5 / 10; grid-row: 2 }
  .ms-hub-copilot { grid-column: 10 / 13; grid-row: 1 / 3; background: linear-gradient(165deg,#f6f2fc,#eef2fb) }
  .ms-hub-dynamics { grid-column: 1 / 9; grid-row: 3 }
  .ms-hub-contact { grid-column: 9 / 13; grid-row: 3; flex-direction: column; align-items: stretch; justify-content: center; gap: 16px }
  .ms-hub-contact h2 { font-size: 24px }
  .ms-hub-contact .ms-email { min-height: 44px }
  .ms-folder-stack { height: 260px; flex-basis: 260px; margin: 18px 0 }
  .ms-folder-sheet { height: 100px }
  .ms-folder-paper { margin-top: 9px; padding-block: 9px }
  .ms-solutions-copy h2 { font-size: 29px }
  .ms-solutions-copy p { margin: 12px 0 18px; font-size: 12px }
  .ms-pills { max-width: 390px; align-self: center; gap: 14px 10px }
  .ms-pills > span { font-size: 12px; padding: 9px 15px }
  .ms-module-rail { margin-top: 22px }
  .ms-module { width: 100px; flex-basis: 100px; gap: 14px }
  .ms-module img { width: 48px; height: 48px }
}
@media (min-width:600px) and (max-width:1000px) {
  .ms-folder-stack { height: 280px; margin: 28px 0 10px }
}
@media (prefers-reduced-motion:reduce) {
  .ms-folder-sheet,.ms-primary::before { transition: none !important }
  .ms-primary::before { display: none }
}
.ms-experience[data-input="keyboard"] .ms-folder-sheet { transition: none }

/* Processus séquentiels, silhouettes ASCII et arrivée des pills. */
.ms-process-name { font: 10px/1.4 var(--font-mono); color: #5a769a; margin-top: 12px }
.ms-flow [data-flow-node] rect { fill: #fff; stroke: #d0dce9; transition: fill 160ms ease,stroke 160ms ease }
.ms-flow [data-flow-node] text { fill: #50627a; font: 8px system-ui,sans-serif; text-anchor: middle }
.ms-flow [data-complete="true"] rect { fill: #e7f0fb; stroke: #7fa5d4 }
.ms-process-pulse { filter: drop-shadow(0 0 3px #3c83cb88) }
.ms-pills { overflow: hidden; padding-top: 16px; padding-bottom: 16px }
.ms-hub-apps .ms-pills > span { animation: msPillDrop 2.6s linear both; animation-delay: 0s; --delay:0 }
.ms-hub-card:not([data-motion="true"]) .ms-pills > span { animation-play-state: paused }
.ms-hub-apps .ms-pills > span:nth-child(2) { animation-delay: 180ms }
.ms-hub-apps .ms-pills > span:nth-child(3) { animation-delay: 360ms }
.ms-hub-apps .ms-pills > span:nth-child(4) { animation-delay: 540ms }
.ms-hub-apps .ms-pills > span:nth-child(5) { animation-delay: 720ms }
.ms-hub-apps .ms-pills > span:nth-child(6) { animation-delay: 900ms }
@keyframes msPillDrop {
  0% { transform: translateY(-160px) rotate(-14deg); opacity: 0; animation-timing-function: cubic-bezier(.55,.05,.8,.45) }
  3% { opacity: 1 }
  16% { transform: translateY(6px) rotate(var(--angle)); animation-timing-function: cubic-bezier(.2,.6,.35,1) }
  23% { transform: translateY(-16px) rotate(3deg); animation-timing-function: ease-in }
  30% { transform: translateY(0) rotate(var(--angle)); animation-timing-function: ease-out }
  35% { transform: translateY(-4px) rotate(var(--angle)) }
  40%,100% { transform: translateY(0) rotate(var(--angle)); opacity: 1 }
}
.ms-hub-contact { background: linear-gradient(135deg,#eaf1fc,#f5f8ff); justify-content: space-between }
.ms-hub-contact > div:first-child { position: relative; width: 100% }
.ms-contact-symbol { position: absolute; right: 0; top: 0; color: #436997; font-size: 31px; font-weight: 300 }
.ms-hub-contact .eyebrow { display: block; padding-right: 36px; font-size: 9px }
.ms-hub-contact h2 { margin-top: 18px; font-size: 29px; letter-spacing: -.04em }
.ms-hub-contact p { font-size: 12px; line-height: 1.6; margin: 12px 0 0 }
.ms-hub-contact .ms-primary { width: 100%; margin-top: 8px }
@media (prefers-reduced-motion:reduce) { .ms-hub-apps .ms-pills > span { animation: none !important; transform: none; opacity: 1 } }

/* Conversations et parcours métier : illustrations, sans données client. */
.ms-chat { display:flex; flex-direction:column; gap:14px; margin:auto 0; padding:30px 0; font-size:12px; line-height:1.6 }
.ms-chat-label { font:9px var(--font-mono); color:#8c7aa5; margin-bottom:8px }
.ms-chat-question { align-self:flex-end; max-width:90%; padding:12px 15px; border-radius:16px 16px 4px 16px; background:#e6def5; color:#5e457d; animation:msChatQuestion 12s infinite }
.ms-chat-answer { padding:16px; background:#fff; border:1px solid #e7e0f0; border-radius:4px 16px 16px; animation:msChatAnswer 12s infinite }
.ms-chat-answer small { display:block; margin-top:12px; color:#8b799f; font-size:10px }
.ms-chat-action { border:1px solid #dcd2ed; border-radius:10px; padding:10px 12px; color:#6b5289; display:flex; justify-content:space-between; animation:msChatAction 12s infinite }
.ms-chat-typing { display:flex; gap:4px; height:8px; animation:msChatTyping 12s infinite }
.ms-chat-typing i { width:5px;height:5px;background:#a494bc;border-radius:50%;animation:msTypingDot 900ms ease-in-out infinite alternate }
.ms-chat-typing i:nth-child(2) { animation-delay:150ms }.ms-chat-typing i:nth-child(3) { animation-delay:300ms }
@keyframes msTypingDot { to {transform:translateY(-3px);opacity:.35} }
@keyframes msChatQuestion { 0%,3% {opacity:0;transform:translateY(8px)} 9%,94% {opacity:1;transform:none} 100% {opacity:0;transform:none} }
@keyframes msChatAnswer { 0%,25% {opacity:0;transform:translateY(8px)} 32%,94% {opacity:1;transform:none} 100% {opacity:0;transform:none} }
@keyframes msChatAction { 0%,40% {opacity:0;transform:translateY(6px)} 47%,94% {opacity:1;transform:none} 100% {opacity:0;transform:none} }
@keyframes msChatTyping { 0%,10%,30%,100% {opacity:0} 14%,25% {opacity:1} }
.ms-product { display:flex; flex-direction:column; gap:0; padding:24px; overflow:hidden; background:linear-gradient(155deg,color-mix(in srgb,var(--ink) 7%,white),white 65%) }
.ms-product > header { display:flex; gap:14px; align-items:center; margin-bottom:18px }
.ms-product h3 { margin:4px 0 0 }
.ms-product > .ms-product-window { padding:0; width:100%; overflow:hidden; touch-action:pan-y }
.ms-product-track { display:flex; width:200%; transition:transform 260ms cubic-bezier(.23,1,.32,1) }
.ms-product[data-face="process"] .ms-product-track { transform:translateX(-50%) }
.ms-product-front,.ms-product-back { flex:0 0 50%; min-width:0; box-sizing:border-box }
.ms-product-front p { margin:16px 0 0; max-width:none; min-height:84px }
.ms-app-preview { padding:16px; border:1px solid color-mix(in srgb,var(--ink) 20%,white);border-radius:12px;background:#ffffffbc;box-shadow:0 10px 24px -16px var(--ink);height:214px;box-sizing:border-box;overflow:hidden }
.ms-preview-bar { display:flex;gap:4px;align-items:center;margin-bottom:15px }
.ms-preview-bar > i {width:4px;height:4px;border-radius:50%;background:#c9ced6}
.ms-preview-bar > span { margin-left:auto;font:8px var(--font-mono);color:#929aa4 }
.ms-app-preview > b { font-size:12px;font-weight:500;color:var(--ink) }
.ms-preview-layout { margin-top:12px;display:grid;gap:8px }
.ms-preview-row { display:flex;align-items:center;gap:9px;font-size:10px; animation:msAppRow 6s ease-in-out infinite;animation-delay:calc(var(--row)*250ms) }
.ms-preview-row > span { display:grid;place-items:center;width:25px;height:25px;color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,white);border-radius:6px }
.ms-preview-row svg {width:14px;height:14px}
.ms-preview-row > div {flex:1;color:#77808b}.ms-preview-row div i {display:block;height:3px;margin-top:5px;width:65%;background:color-mix(in srgb,var(--ink) 18%,white);border-radius:3px}
.ms-preview-row em { font-style:normal;color:var(--ink);opacity:.65 }
.ms-preview-desk {grid-template-columns:repeat(3,1fr)}.ms-preview-desk .ms-preview-row {flex-direction:column;border:1px solid #e1e9e6;border-radius:8px;padding:9px 3px;text-align:center}.ms-preview-desk .ms-preview-row div i {margin-inline:auto}
.ms-preview-project .ms-preview-row div i {width:calc(30% + var(--row)*22%);height:9px}
.ms-preview-award .ms-preview-row > span {border-radius:50%;border:2px solid color-mix(in srgb,var(--ink) 30%,white)}
.ms-preview-book {grid-template-columns:repeat(3,1fr)}.ms-preview-book .ms-preview-row {flex-direction:column;align-items:flex-start;background:#f7f5fa;padding:8px;border-radius:7px}
@keyframes msAppRow { 0%,100% {transform:none;opacity:.65} 18%,70% {transform:translateX(3px);opacity:1} }
.ms-journey-label {font:10px var(--font-mono);color:#7c8591;display:block;margin:4px 0 16px}
.ms-infographic {position:relative;min-height:284px;background-image:radial-gradient(#ccd5df80 .7px,transparent .7px);background-size:14px 14px;border-radius:12px}
.ms-journey-wires {position:absolute;inset:0;width:100%;height:284px;overflow:visible;fill:none;stroke:#d9e2ea;stroke-width:2}
.ms-journey-wires .ms-journey-signal {stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-dasharray:.035 .965;animation:msJourneySignal 6s linear infinite}
.ms-journey {position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:130px 130px;gap:24px 12px;list-style:none;margin:0;padding:0}
.ms-journey li {display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding:13px 6px 0;background:none;border:0;color:#60708a;font-size:12px}
.ms-journey li:nth-child(3) {grid-column:2;grid-row:2}.ms-journey li:nth-child(4) {grid-column:1;grid-row:2}
.ms-journey-icon {display:grid;place-items:center;width:56px;height:56px;flex-shrink:0;border:1px solid #dbe3ec;background:#fff;border-radius:17px;color:var(--ink);box-shadow:0 6px 12px -8px #53688870;animation:msJourneyNode 6s ease-in-out infinite;animation-delay:calc(var(--step)*1.35s)}
.ms-journey-icon svg {width:27px;height:27px}
.ms-journey small {font:8px var(--font-mono);letter-spacing:.04em;margin:10px 0 5px;color:#7d8897}
.ms-journey b {font-size:11px;line-height:1.4;font-weight:500;max-width:22ch;background:#fff9;border-radius:4px}
.ms-pain .ms-journey-icon {color:#ae662b;background:#fff1e3;border-color:#edcaa5}.ms-pain small,.ms-pain b {color:#985724}
.ms-output .ms-journey-icon {color:#41825c;background:#e9f6ee;border-color:#b6dbc5}.ms-output small,.ms-output b {color:#3d7755}
@keyframes msJourneySignal {from {stroke-dashoffset:.035} to {stroke-dashoffset:-.965}}
@keyframes msJourneyNode {0%,12%,100% {transform:none;box-shadow:0 6px 12px -8px #53688870} 20%,32% {transform:translateY(-3px);box-shadow:0 0 0 5px color-mix(in srgb,var(--ink) 9%,transparent)}}
.ms-product .ms-infographic * {animation-play-state:paused}
.ms-product[data-motion="true"][data-face="process"] .ms-infographic * {animation-play-state:running}
@media(prefers-reduced-motion:reduce) {.ms-infographic * {animation:none!important}.ms-journey-signal {display:none}}
.ms-product-slide {display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;margin-top:14px;padding:0;background:none;border:0;border-top:1px solid #e4e9ef;color:var(--ink);font-family:inherit;font-size:12px;cursor:pointer;text-align:left}
.ms-product-slide > span:last-child {font:9px var(--font-mono)}
.ms-product-slide:focus-visible {outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.ms-product-slide:active {transform:scale(.98)}
.ms-hub-card:not([data-motion="true"]) .ms-chat * {animation-play-state:paused}
.ms-product:not([data-motion="true"]) *,.ms-product[data-face="process"] .ms-app-preview * {animation-play-state:paused}
.ms-product[data-motion="true"][data-face="app"] .ms-app-preview * {animation-play-state:running}
.ms-experience[data-input="keyboard"] .ms-product-track {transition:none}
@media(max-width:599px) {.ms-product {padding:18px}.ms-product-front p {min-height:105px}.ms-preview-row {font-size:9px}}
@media(prefers-reduced-motion:reduce) { .ms-chat *, .ms-app-preview * {animation:none!important}.ms-chat-typing {display:none}.ms-product-track {transition:none} }

/* Superposed faces share their natural height: toggling never moves the grid. */
.ms-product {padding:18px}
.ms-product > header {margin-bottom:12px;gap:10px}
.ms-product h3 {font-size:18px}
.ms-product-track {display:grid;grid-template-columns:minmax(0,1fr);width:100%;align-items:stretch;transform:none;transition:none}
.ms-product[data-face="process"] .ms-product-track {transform:none}
.ms-product-front,.ms-product-back {grid-area:1 / 1;width:100%;transform-origin:50% 45%;transition:opacity 220ms ease,transform 280ms cubic-bezier(.23,1,.32,1),filter 220ms ease,visibility 0s 280ms}
.ms-product-front {display:flex;flex-direction:column;justify-content:center;padding-block:16px}
.ms-product-front .ms-app-preview {flex-shrink:0}
.ms-product[data-face="app"] .ms-product-front,
.ms-product[data-face="process"] .ms-product-back {opacity:1;transform:none;filter:blur(0);visibility:visible;transition-delay:40ms,0s,0s,0s}
.ms-product[data-face="app"] .ms-product-back {opacity:0;transform:translateY(10px) scale(.97);filter:blur(3px);visibility:hidden;pointer-events:none}
.ms-product[data-face="process"] .ms-product-front {opacity:0;transform:translateY(-8px) scale(1.025);filter:blur(3px);visibility:hidden;pointer-events:none}
.ms-experience[data-input="keyboard"] .ms-product-front,
.ms-experience[data-input="keyboard"] .ms-product-back {transition:none}
@media(prefers-reduced-motion:reduce) {.ms-product-front,.ms-product-back {transition:none!important;filter:none!important;transform:none!important}}
.ms-product-front p {min-height:0;margin-top:12px;font-size:12px}
.ms-app-preview {height:184px;padding:12px}
.ms-preview-bar {margin-bottom:10px}
.ms-preview-layout {gap:6px;margin-top:9px}
.ms-product-slide {margin-top:12px}
.ms-business-graph {height:360px;min-height:0}
.ms-business-graph .ms-journey-wires {top:18px;height:calc(100% - 104px)}
.ms-business-graph .ms-journey {display:block;height:100%}
.ms-business-graph .ms-journey li {position:absolute;width:30%;top:calc(var(--node-y) * (100% - 104px));transform:translateX(-50%);padding:0;box-sizing:border-box}
.ms-business-graph .ms-journey-icon {width:36px;height:36px;border-radius:11px}
.ms-business-graph .ms-journey-icon svg {width:21px;height:21px}
.ms-business-graph .ms-journey small {margin:5px 0 2px;font-size:7px}
.ms-business-graph .ms-journey small:empty {display:none}
.ms-business-graph .ms-journey b {margin-top:3px;font-size:11px;line-height:1.3;overflow-wrap:anywhere}
.ms-business-graph .ms-journey-signal {animation-duration:3.5s;animation-delay:calc(var(--edge)*-650ms)}
.ms-solution-grid {align-items:start}
@media(max-width:900px) {.ms-solution-grid {grid-template-columns:1fr}}
@media(max-width:599px) {
  .ms-product {padding:14px}
  .ms-product-front p {min-height:0}
  .ms-business-graph {height:400px}
  .ms-journey-label {font-size:9px;line-height:1.5}
}

/* Le diagnostic tient dans un viewport mobile : les objets illustratifs
   restent visibles, les exemples détaillés restent disponibles sur desktop. */
@media (max-width: 699px) {
  .assist { padding: 8px 0 24px }
  #view-assist #assist-slot { display: none }
  #assist-root { display: grid; grid-template-rows: auto auto auto; min-height: 0 }
  .q-prog { margin-bottom: 8px; padding: 8px 10px; border-radius: 12px; box-shadow: none }
  .q-meta { align-items: flex-start; margin-top: 6px; font-size: 12px; line-height: 16px }
  .q-privacy { max-width: 62%; white-space: normal }
  .qcard { display: grid; grid-template-columns: 24px minmax(0,1fr); column-gap: 8px; min-height: 0; padding: 12px; border-radius: 14px; box-shadow: none }
  .q-ico { grid-column: 1; grid-row: 1; width: 24px; height: 24px; margin: 0; display: grid; place-items: center }
  .q-t { grid-column: 2; grid-row: 1; margin: 0 0 4px; font-size: 21px; line-height: 1.15 }
  .q-help { grid-column: 1 / -1; margin: 6px 0 8px; font-size: 12px; line-height: 1.4 }
  .taka-thinking { grid-column: 1 / -1; gap: 7px; min-height: 22px; margin: 0 0 10px }
  .taka-pixels { grid-template-columns: repeat(3, 3px); gap: 1px }
  .taka-pixels i { width: 3px; height: 3px }
  .taka-thinking-label { min-width: 0; font-size: 10px; line-height: 13px; white-space: normal }
  .taka-thinking > b { display: none }
  .q-opts,
  .q-body { grid-column: 1 / -1 }
  .q-opts,
  .q-opts[data-cols="2"] { grid-template-columns: 1fr; gap: 6px }
  .opt { min-height: 44px; grid-template-columns: 24px minmax(0,1fr) 36px; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px }
  .opt-mark { width: 22px; height: 22px }
  .opt-body { gap: 0 }
  .opt-t { font-size: 13px; line-height: 16px }
  .opt-ex { display: none }
  .fig, .fig svg { width: 36px; height: 28px }
  .diagnostic-result { padding: 10px 12px }
  .diagnostic-part { grid-template-columns: 14px minmax(0,1fr) 64px; gap: 3px 8px; padding: 10px 0 }
  .diagnostic-result .diagnostic-part + .diagnostic-part { padding-top: 10px }
  .diagnostic-part .reco-t { font-size: 12px; line-height: 1.25 }
  .diagnostic-part .reco-piste, .diagnostic-part .reco-p { grid-column: 2 / -1; font-size: 12px; line-height: 1.4; max-width: none }
  .diagnostic-part .reco-piste { font-size: 16px; line-height: 1.3 }
  .diagnostic-motion { grid-row: 1; width: 64px }
  .diagnostic-motion svg { height: 34px }
  .diagnostic-body > .q-foot { font-size: 11px; line-height: 1.4 }
  .stack-part { grid-template-columns: 14px minmax(0,1fr) 54px; gap: 3px 8px }
  .stack-part .stack-motion { width: 54px }
  .stack-motion svg { width: 54px; height: 30px }
  .stack-part .reco-p { grid-column: 2 / -1; margin-top: 4px; font-size: 12px; line-height: 1.45 }
  .q-nav { margin-top: 8px; gap: 8px }
  .q-nav .btn { min-height: 44px }

  /* Safari réutilise parfois une couche rasterisée quand la barre
     d’adresse modifie `svh` pendant le grand déplacement du bento.
     Sur mobile, le passage reste donc un fondu piloté par le scroll,
     sans translation de viewport ni réduction résiduelle. */
  .services-bento {
    width: 100%; transform: none;
    filter: blur(calc((1 - var(--bento-enter)) * 5px));
  }
}
@media (prefers-reduced-transparency: reduce) {
  .card-services { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none }
  .opt[aria-checked="true"] { background: #fff; border-width: 2px } /* BORDER · invariant · transparence réduite du questionnaire, reprise de G */
  .thread-flow[data-over="1"] { mask-image: none; -webkit-mask-image: none }
}
@media (prefers-contrast: more) {
  :root {
    --line: rgba(0, 0, 0, .34); --line-soft: rgba(0, 0, 0, .22); --line-ink: rgba(0, 0, 0, .48);
    --s-lu-ink: #063a73; --s-valide-ink: #114923; --s-correction-ink: #6f2506;
    --s-manquant-ink: #533600; --s-nonfait-ink: #6d1511;
  }
  .opt { border-width: 2px } /* BORDER · invariant · contraste renforcé du questionnaire, repris de G */
  .opt-ex, .ms-points li, .cl-b { color: var(--text-secondary) }
  .hl-tx { --hl-ink: #ffd25e }
}

/* ══════════════ N. CONSULTING MICROSOFT ══════════════ */
.cons-head { max-width: 74ch; padding: var(--s7) 0 var(--s6) }
.cons-head > .h1f { margin-top: var(--s3) }
#cons-title:focus-visible,
#svc-title:focus-visible { outline: none }
.cons-warn {
  margin: var(--s5) 0 0; padding: var(--s4) var(--s5);
  background: var(--paper); border-radius: var(--r-l);
  font-size: 14px; line-height: 1.6; color: var(--text-secondary); max-width: 78ch;
  box-shadow: var(--card-shadow);
}
.cons-win {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--paper); border-radius: var(--r-l); overflow: hidden;
  border: 1px solid var(--line); /* BORDER · structure · cadre de la fenêtre Consulting, il délimite la surface */
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.07);
}
.cons-body { padding: var(--s6) }

/* ══════════════ O. UI APPLICATIVES DES MOCKUPS ══════════════
   Cette couche est volontairement bornée aux écrans simulés. Elle ne
   change ni la typographie éditoriale du site, ni sa grammaire H3. */
:is(.os, .phone-deck),
:is(.os, .phone-deck) * {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
:is(.os, .phone-deck) {
  --app-text: #333333;
  --app-subtle: #777777;
  color: var(--app-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* Titres applicatifs */
:is(.os, .phone-deck) :is(
  .os-title, .doc-t, .phone-who b, .email-window-title,
  .email-in-subject, .email-app
) {
  color: var(--app-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
}

/* Labels et états */
:is(.os, .phone-deck) :is(
  .os-zone, .front-app, .backstage-count,
  .fmail-who b, .fmail-subject, .msg-who,
  .gateway-query-b small, .gateway-query-b b, .gateway-item-b b,
  .gateway-item-state, .gateway-result-state, .gateway-branch-b b,
  .gateway-branch-state, .doc-k, .doc-meta dt, .tool, .tool-state,
  .bn-t, .bn-s, .ctx-k, .ctx-l dt,
  .phone-act, .thread-day, .thread-card-h b, .thread-card-k,
  .slots-note, .slot-t, .slot-s, .email-status,
  .email-mailbox b, .mailbox-folder, .email-in-who b, .email-in-tag,
  .email-fields dt, .email-attachments-title, .email-attachment-name,
  .email-attachment-state, .email-sources-k, .email-wait,
  .composer-state
) {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
}

/* Corps et textes secondaires */
:is(.os, .phone-deck) :is(
  .fmail-body, .msg-t, .gateway-item-b small, .gateway-found,
  .gateway-src, .gateway-branch-b span, .cite-q, .doc-p,
  .doc-meta dd, .cl-b, .bn-d, .ctx-v, .ctx-l dd,
  .phone-who span, .b, .fact, .slot-h, .slot-chosen,
  .email-in-who small, .email-in-body p, .email-body p,
  .email-fields dd, .email-attachment-meta, .email-sources li,
  .composer-note, .mailbox-empty
) {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}
:is(.os, .phone-deck) :is(
  .fmail-who b, .fmail-subject, .msg-t, .gateway-query-b b,
  .gateway-item-b b, .gateway-found, .gateway-branch-b b,
  .doc-t, .doc-meta dd, .bn-t, .ctx-v, .phone-who b,
  .thread-card-h b, .thread-card .offer, .slot-t,
  .email-in-who b, .email-in-subject, .email-in-body p,
  .email-app, .email-fields dd, .email-body p, .email-attachment-name
) { color: var(--app-text) !important }
:is(.os, .phone-deck) :is(
  .fmail-who small, .fmail-t, .fmail-body, .msg-t,
  .gateway-item-b small, .gateway-src, .gateway-branch-b span,
  .doc-k, .doc-p, .doc-meta dt, .cl-b, .bn-d,
  .ctx-k, .ctx-l dt, .ctx-l dd, .phone-act, .phone-who span,
  .thread-day, .fact, .slot-h, .email-in-who small,
  .email-in-meta time, .email-fields dt, .email-attachment-meta,
  .email-sources li, .composer-note, .mailbox-folder,
  .mailbox-folder-n, .mailbox-empty
) { color: var(--app-subtle) !important }

/* Contrôles, rangées de données et choix de créneau/dossier */
:is(.os, .phone-deck) button {
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 10px !important;
}
:is(.os, .phone-deck) :is(.bn, .email-attachment) {
  height: 40px !important;
  min-height: 40px !important;
}
:is(.os, .phone-deck) :is(.slot, .mailbox-folder) {
  height: 44px !important;
  min-height: 44px !important;
}

/* Badges existants. Les états d'alerte gardent leur palette sémantique. */
:is(.os, .phone-deck) :is(
  .st, .fmail-state, .gateway-item-state, .gateway-branch-state,
  .bn-s, .slots-note, .email-in-tag, .email-status
) {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
}
:is(.os, .phone-deck) :is(
  .st[data-k="valide"],
  .gateway-item[data-k="valide"] .gateway-item-state,
  .gateway-branch[data-k="valide"] .gateway-branch-state,
  .bn[data-k="valide"] .bn-s,
  .email-in-tag
) {
  background: #CAFACE !important;
  color: #15B042 !important;
}

/* Le composant ne contient actuellement aucun switch : aucune commande
   artificielle n'est ajoutée pour matérialiser le token 24 × 14 px. */

/* À 390 et 320 px, seules les métadonnées non décisionnelles restent
   à 12 px afin que les pièces jointes, dates et sources ne débordent pas.
   Titres, labels d'action et corps conservent les tailles du cheatsheet. */
@media (max-width: 390px) {
  /* La gateway desktop devient une liste de données de 40 px. Les trois
     colonnes ne peuvent pas tenir dans les 272/342 px utiles. */
  .os-gateway {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: start;
    overflow-y: auto;
  }
  .backstage-head {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .backstage-count {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
  }
  .gateway-query { min-height: 40px }
  .gateway-items {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
  }
  .gateway-item {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-rows: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0 var(--s1);
  }
  .gw-page { grid-row: 1; width: 28px; height: 36px; padding: 5px 4px }
  .gateway-item-b { grid-column: 2; align-self: center }
  .gateway-item-state { grid-column: 3; align-self: center }
  .gateway-branches { grid-template-columns: minmax(0, 1fr) }

  .email-status { white-space: nowrap }
  .email-reader .phone-email {
    width: calc(100% - var(--s6));
    margin-left: 0;
    justify-self: end;
  }

  :is(.os, .phone-deck) :is(
    .fmail-who small, .fmail-t, .gateway-item-b small, .gateway-src,
    .email-in-who small, .email-in-meta time, .email-attachment-meta,
    .email-sources li, .mailbox-folder-n
  ) {
    font-size: 12px !important;
    line-height: 16px !important;
  }
}

/* ══════════════ R. CONTRAT ET PROSPECTION CONTEXTUALISÉE ══════════════ */
.demo-badge-neutral { background: #ececf0; color: #777777 }
.demo-source-button {
  display: inline-flex; align-items: center; padding: 0 10px; border: 0;
  background: #eef5fc; color: #0068c9; cursor: pointer;
}
.demo-actions { display: flex; flex-wrap: wrap; gap: 8px }
.demo-fields { margin: 0; display: grid; gap: 4px; padding-bottom: 14px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.07) }
.demo-fields > div { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 8px }
.demo-fields dt { color: #777777; font-size: 13px; font-weight: 500; line-height: 16px }
.demo-fields dd { overflow: hidden; margin: 0; color: #333333; font-size: 14px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap }

.contract-request-card { left: 30px; top: 248px; width: min(390px, calc(100% - 390px)) }
.contract-request-card > strong { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; line-height: 16px }
.contract-request-card > p { margin: 4px 0; font-size: 14px; line-height: 20px }
.contract-request-card > small { display: block; white-space: normal }
.contract-library { right: 30px; top: 58px; width: min(720px, calc(100% - 300px)); min-height: 470px }
.contract-doc-head,
.contract-doc-row {
  display: grid; grid-template-columns: minmax(0,1fr) 100px 100px 108px;
  align-items: center; gap: 10px; padding: 0 16px;
}
.contract-doc-head {
  height: 40px; color: #777777; font-size: 13px; font-weight: 500; line-height: 16px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.07);
}
.contract-doc-row {
  grid-template-columns: 20px minmax(0,1fr) 100px 100px 108px;
  height: 44px; min-height: 44px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}
.contract-doc-row > span:first-child { display: flex; color: #777777 }
.contract-doc-row > span:nth-child(2) { min-width: 0; display: grid }
.contract-doc-row > span:nth-child(3),
.contract-doc-row > span:nth-child(4) { color: #777777; font-size: 12px; line-height: 16px }
.contract-version-plane { left: 30px; top: 224px; width: min(360px, calc(100% - 430px)) }
.contract-sheet { right: 30px; top: 54px; width: min(720px, calc(100% - 230px)); min-height: 490px }
.contract-clause { position: relative; margin: 20px; padding: 20px; border-radius: 12px; background: #f7f7fa }
.contract-clause .demo-badge { position: absolute; right: 16px; top: 16px }
.contract-clause h3 { max-width: calc(100% - 120px); margin: 0 0 2px }
.contract-clause p { margin: 14px 0 0 }
.contract-clause-old { color: #777777 }
.contract-clause-old p { text-decoration: line-through; text-decoration-color: rgba(119,119,119,.5) }
.contract-clause-active { background: #f0faef; box-shadow: inset 3px 0 0 #15b042 }
.contract-citations { left: 34px; top: 252px; width: min(370px, calc(100% - 420px)) }
.contract-email { right: 34px; top: 68px; width: min(720px, calc(100% - 230px)); min-height: 500px; padding: 0 24px 24px }
.contract-email .demo-window-bar { margin: 0 -24px 18px }
.contract-email > p:not(.demo-note) { max-width: 64ch; margin: 18px 0 }
.contract-citation-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px }
.contract-email .demo-note { margin: 12px 0 0 }

.outreach-facts { left: 28px; top: 228px; width: min(420px, calc(100% - 390px)) }
.crm-window { right: 28px; top: 64px; width: min(800px, calc(100% - 250px)); min-height: 470px }
.crm-company { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; margin: 24px; padding-bottom: 20px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.07) }
.crm-company > span:nth-child(2) { min-width: 0; display: grid }
.crm-company h3 { margin: 0 }
.crm-fields { margin: 0 24px; display: grid }
.crm-fields > div { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 12px; min-height: 40px; align-items: center; box-shadow: inset 0 -1px 0 rgba(0,0,0,.06) }
.crm-fields dt { color: #777777; font-size: 13px; font-weight: 500; line-height: 16px }
.crm-fields dd { margin: 0; font-size: 14px; line-height: 20px }
.crm-seo-note { display: grid; gap: 2px; margin: 18px 24px; padding: 12px; background: #f7f7fa; border-radius: 10px }
.crm-seo-note b { font-size: 13px; font-weight: 500; line-height: 16px }
.crm-seo-note span { color: #777777; font-size: 13px; line-height: 16px }
.outreach-origin { left: 30px; top: 220px; width: min(410px, calc(100% - 410px)) }
.outreach-email { right: 30px; top: 46px; width: min(780px, calc(100% - 240px)); min-height: 520px; padding: 0 24px 24px }
.outreach-email .demo-window-bar { margin: 0 -24px 18px }
.outreach-lines { display: grid; gap: 12px; margin: 18px 0 }
.outreach-lines p { margin: 0; display: grid; gap: 4px }
.demo-cite {
  width: max-content; max-width: 100%; padding: 0 10px; border: 0;
  background: #eef5fc; color: #0068c9; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.outreach-email .demo-note { margin: 12px 0 0 }
.outreach-rule-source { left: 62px; top: 260px; width: 360px }
.followup-card { right: 54px; top: 20px; width: min(760px, calc(100% - 300px)); min-height: 574px; padding: 22px 24px }
.followup-card > header { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 14px }
.followup-card > header > span:first-child { display: grid }
.followup-card h3 { margin: 0 }
.followup-context { display: grid; gap: 10px; margin-bottom: 12px }
.followup-opportunity { display: grid; gap: 1px }
.followup-opportunity b { font-size: 14px; font-weight: 500; line-height: 20px }
.followup-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); box-shadow: inset 0 1px 0 rgba(0,0,0,.07), inset 0 -1px 0 rgba(0,0,0,.07) }
.followup-facts > div { min-width: 0; min-height: 56px; display: grid; align-content: center; gap: 1px; padding: 8px 10px }
.followup-facts > div + div { box-shadow: inset 1px 0 0 rgba(0,0,0,.07) }
.followup-facts b { overflow: hidden; font-size: 13px; font-weight: 500; line-height: 16px; text-overflow: ellipsis; white-space: nowrap }
.followup-facts small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.followup-draft { display: grid; gap: 7px; padding: 10px 12px; background: #f7f7fa; border-radius: 10px }
.followup-draft > header { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: baseline; gap: 10px }
.followup-draft > header b { font-size: 13px; font-weight: 500; line-height: 16px }
.followup-draft > header small { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap }
.followup-draft p { margin: 0; font-size: 14px; line-height: 20px }
.followup-provenance { display: flex; flex-wrap: wrap; gap: 4px }
.followup-provenance span { min-width: 0; padding: 2px 6px; border-radius: 6px; background: #eef5fc; color: #0068c9; font-size: 12px; line-height: 16px }
.followup-condition { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 12px; background: #f7f7fa; border-radius: 10px }
.followup-condition > span:first-child { display: flex; color: #0077e6 }
.followup-condition > span:last-child { display: grid }
.followup-condition b { font-size: 13px; font-weight: 500; line-height: 16px }
.followup-card .demo-note { margin: 12px 0 0 }

@media (max-width: 900px) and (min-width: 700px) {
  .contract-doc-head { grid-template-columns: minmax(0,1fr) 108px }
  .contract-doc-head span:nth-child(2), .contract-doc-head span:nth-child(3) { display: none }
  .contract-doc-row { grid-template-columns: 20px minmax(0,1fr) 108px }
  .contract-doc-row > span:nth-child(3), .contract-doc-row > span:nth-child(4) { display: none }
}

@media (max-width: 699px) {
  #view-services .demo-contract .demo-source-plane,
  #view-services .demo-outreach .demo-source-plane { display: none }
  #view-services .contract-library,
  #view-services .contract-sheet,
  #view-services .contract-email,
  #view-services .crm-window,
  #view-services .outreach-email,
  #view-services .followup-card {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
    margin: 0; padding: 0 12px 12px; overflow-y: auto; transform: none;
    border-color: transparent; border-radius: 0; box-shadow: none;
  }
  #view-services .contract-library,
  #view-services .contract-sheet,
  #view-services .crm-window { padding: 0 }
  #view-services .contract-doc-head { display: none }
  #view-services .contract-doc-row {
    grid-template-columns: 20px minmax(0,1fr) auto; gap: 8px; height: 44px; min-height: 44px; padding: 0 10px;
  }
  #view-services .contract-doc-row > span:nth-child(3),
  #view-services .contract-doc-row > span:nth-child(4) { display: none }
  #view-services .contract-clause { margin: 12px; padding: 16px }
  #view-services .contract-clause .demo-badge { position: static; margin-bottom: 8px }
  #view-services .contract-clause h3 { max-width: none }
  #view-services :is(.contract-email,.outreach-email) .demo-window-bar { margin: 0 -12px 14px }
  #view-services .contract-email > p:not(.demo-note) { margin: 14px 0 }
  #view-services .contract-citation-list { display: grid; margin-bottom: 14px }
  #view-services .contract-citation-list .demo-source-button { width: 100%; justify-content: start }
  #view-services .crm-company { grid-template-columns: 38px minmax(0,1fr); gap: 10px; margin: 14px 12px; padding-bottom: 14px }
  #view-services .crm-company .demo-badge { grid-column: 2 }
  #view-services .crm-fields { margin: 0 12px }
  #view-services .crm-fields > div { grid-template-columns: 108px minmax(0,1fr) }
  #view-services .crm-seo-note { margin: 14px 12px }
  #view-services .outreach-lines { gap: 10px; margin: 14px 0 }
  #view-services .followup-card { padding: 14px 12px }
  #view-services .followup-card > header { display: grid; gap: 6px; margin-bottom: 10px }
  #view-services .followup-context { gap: 8px; margin-bottom: 10px }
  #view-services .followup-facts { grid-template-columns: minmax(0,1fr) }
  #view-services .followup-facts > div { min-height: 40px; padding: 4px 8px }
  #view-services .followup-facts > div + div { box-shadow: inset 0 1px 0 rgba(0,0,0,.07) }
  #view-services .followup-draft { padding: 8px 10px }
  #view-services .followup-draft > header { grid-template-columns: minmax(0,1fr) }
  #view-services .followup-draft > header small { text-align: left }
  #view-services .followup-provenance { display: grid; gap: 2px }
  #view-services .followup-provenance span { width: max-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  #view-services .followup-condition { margin-bottom: 10px }
}

@media (max-width: 390px) {
  #view-services .contract-doc-row { height: 44px; min-height: 44px }
  #view-services .demo-fields > div { grid-template-columns: 46px minmax(0,1fr) }
  #view-services .crm-fields > div { grid-template-columns: minmax(0,1fr); gap: 0; min-height: 48px; align-content: center }
}

/* ══════════════ S. RENDEZ-VOUS — MESSAGES ET EMAIL DISTINCTS ══════════════ */
.demo-appointment > .channel-picker { position: relative; z-index: 6; height: 40px }
.appointment-panel { position: absolute; inset: 44px 0 0; min-width: 0 }
.appointment-panel[hidden] { display: none }
.appointment-canvas { position: relative; width: 100%; height: 100% }
.appointment-agenda { left: 58px; top: 184px; width: 420px }
.appointment-phone { top: 0; right: 96px; height: 568px }
.appointment-phone .demo-phone-screen { position: relative; grid-template-rows: 44px auto minmax(0,1fr); gap: 0; padding: 0 0 14px }
.appointment-phone-head { display: grid; grid-template-columns: 28px minmax(0,1fr) 28px; align-items: center; gap: 6px; min-height: 68px; padding: 6px 12px 10px !important }
.appointment-iphone-contact { min-width: 0; display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 8px; justify-self: center }
.appointment-iphone-contact > span:last-child { min-width: 0; display: grid }
.appointment-phone-head b { overflow: hidden; font-size: 16px; font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap }
.appointment-thread { min-height: 0; overflow: hidden; display: grid; align-content: start; gap: 12px; padding: 14px }
.appointment-time { margin: 0; color: #777777; text-align: center; font-size: 13px; font-weight: 500; line-height: 16px }
.appointment-bubble { width: fit-content; max-width: 88%; margin: 0; padding: 10px 12px; border-radius: 18px; font-size: 14px; line-height: 20px }
.appointment-bubble-in { justify-self: start; background: #e9e9eb; color: #333333; border-bottom-left-radius: 6px }
.appointment-bubble-out { justify-self: end; background: #0077e6; color: #ffffff; border-bottom-right-radius: 0 }
.appointment-answer { display: grid; justify-items: end; gap: 0; will-change: opacity, transform }
.appointment-slots { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; margin-top: -1px; padding: 4px; border-radius: 10px 0 12px 12px; background: #0077e6 }
.appointment-slots button { padding: 0 10px; border: 0; border-radius: 8px; background: rgba(255,255,255,.94); color: #0068c9; cursor: pointer }
.appointment-slots button[aria-pressed="true"] { background: #caface; color: #15b042 }
.appointment-slots + .demo-primary { margin-top: 8px }
.appointment-answer .demo-note { margin: 8px 0 0; text-align: right }
.appointment-email-window { right: 38px; top: 16px; width: min(660px, calc(100% - 420px)); height: 550px; overflow-y: auto }
.appointment-email-received { margin: 18px 22px 12px; padding: 16px; border-radius: 12px; background: #f7f7fa }
.appointment-email-received h3 { margin: 14px 0 6px }
.appointment-email-received > p { margin: 0 }
.appointment-email-draft { display: grid; gap: 12px; margin: 0 22px 20px 46px; padding: 16px; border-radius: 12px; background: #ffffff; box-shadow: 0 8px 24px rgba(0,0,0,.08); will-change: opacity, transform }
.appointment-email-draft > header { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.appointment-email-draft > header > span:first-child { font-size: 16px; font-weight: 500; line-height: 20px }
.appointment-email-draft > p { margin: 0 }
.appointment-email-draft .demo-file { width: 100% }
.appointment-email-draft .demo-primary { justify-self: start }
.appointment-email-draft .demo-note { margin: 0 }

@media (max-width: 699px) {
  #view-services .demo-appointment { height: 100% }
  #view-services .demo-appointment > .channel-picker { height: 52px; margin: 0 }
  #view-services .appointment-panel { inset: 52px 0 0 }
  #view-services .appointment-canvas { height: 100% }
  #view-services .appointment-phone,
  #view-services .appointment-email-window,
  #view-services .appointment-agenda {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  }
  #view-services .appointment-phone { inset: 2px auto 2px 50%; width: 286px; height: calc(100% - 4px); padding: 7px; border-radius: 46px; background: linear-gradient(145deg,#2a2b2f,#08090b 58%,#24252a); box-shadow: 0 24px 54px rgba(17,22,31,.24); transform: translateX(-50%) }
  #view-services .appointment-phone .demo-phone-screen { border-radius: 39px; padding: 0 0 14px }
  #view-services .appointment-email-window { border-color: transparent; border-radius: 0; box-shadow: none }
  #view-services .appointment-agenda { z-index: 4; padding: 12px; border-radius: 0; box-shadow: none; background: #f7f7fa }
  #view-services .demo-appointment:not([data-beat="2"]) .appointment-agenda { visibility: hidden; opacity: 0 !important }
  #view-services .demo-appointment[data-beat="2"] [data-appointment-dominant] { visibility: hidden; opacity: 0 }
  #view-services .appointment-email-received { margin: 10px; padding: 12px }
  #view-services .appointment-email-draft { margin: 0 10px 10px; padding: 12px; gap: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.07) }
  #view-services .appointment-email-draft > header { display: grid; justify-items: start }
}

@media (max-width: 390px) {
  #view-services .appointment-thread { padding: 12px }
  #view-services .appointment-bubble { max-width: 94% }
  #view-services .appointment-email-received .demo-email-head { grid-template-columns: 32px minmax(0,1fr) auto }
}

/* ══════════════ P. IMMOBILIER — MESSAGES + EMAIL, TROIS BEATS ══════════════
   Le canal humain reste l'objet dominant. Les pièces consultées vivent
   sur un plan arrière plus petit et ne passent au premier plan, sur
   mobile, que pendant le beat où elles causent la réponse. */
.scene[data-beats="3"] { height: 360vh }
.property-demo {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  height: 668px;
}
.property-demo .channel-picker { position: relative; z-index: 6 }
.property-panel { width: 100%; min-height: 0 }
.property-panel[hidden] { display: none }
.property-canvas { position: relative; width: 100%; height: 620px }
.property-canvas [data-property-dominant] { position: relative; z-index: 2 }

.property-sources {
  position: absolute; z-index: 1; left: 56px; top: 146px;
  width: 520px; padding: 16px;
  background: transparent; border-radius: 0; box-shadow: none;
  will-change: opacity, transform;
}
.property-sources-head {
  min-height: 36px; display: flex; align-items: start; justify-content: space-between;
  gap: 12px; color: #333333; font-size: 13px; font-weight: 500; line-height: 16px;
}
.property-sources-head small {
  color: #777777; font-size: 12px; font-weight: 400; line-height: 16px;
  white-space: nowrap;
}
.property-source-close {
  display: none; grid-column: 1 / -1; justify-self: start; padding: 0 10px;
  border: 0; background: #eef5fc; color: #0068c9;
  font-size: 13px; font-weight: 500; line-height: 16px; cursor: pointer;
}
.property-demo[data-source-focus] .property-source-close { display: inline-flex; align-items: center }
.property-source-list { position: relative; overflow: hidden; display: grid; gap: 0 }
.property-source-scan {
  position: absolute; z-index: 3; inset: 0 0 auto; height: 26px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0,119,230,.2), transparent);
}
.property-demo[data-beat="sources"] .property-source-scan { animation: propertySourceScan .86s cubic-bezier(.22,1,.36,1) both }
@keyframes propertySourceScan { from { opacity: 0; transform: translateY(-20px) } 24% { opacity: 1 } to { opacity: 0; transform: translateY(174px) } }
.property-source {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center; gap: 8px; height: 44px; min-height: 44px;
  padding: 0 10px; background: rgba(255,255,255,.72); color: #333333;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
  will-change: opacity, transform;
}
.property-source:first-child { border-radius: 10px 10px 0 0 }
.property-source:last-child { border-radius: 0 0 10px 10px; box-shadow: none }
.property-source-i { display: flex; color: #777777 }
.property-source-copy { min-width: 0; display: grid }
.property-source-copy b {
  overflow: hidden; color: #333333; font-size: 13px; font-weight: 500; line-height: 16px;
  text-overflow: ellipsis; white-space: nowrap;
}
.property-source-copy small {
  overflow: hidden; color: #777777; font-size: 12px; font-weight: 400; line-height: 16px;
  text-overflow: ellipsis; white-space: nowrap;
}
.property-source-mark { display: flex; color: #15b042; opacity: 0 }
.property-source[data-match="1"] { background: #f0faef }
.property-source[data-match="1"] .property-source-mark { opacity: 1 }
.property-source[data-open="1"] { box-shadow: inset 3px 0 0 #0077e6, inset 0 -1px 0 rgba(0,0,0,.06) }
.property-match-note {
  display: flex; align-items: center; min-height: 28px; margin: 8px 0 0;
  color: #15b042; font-size: 13px; font-weight: 500; line-height: 16px;
  will-change: opacity, transform;
}

.property-canvas-message .property-phone { width: 340px; margin: 0 82px 0 auto }
.property-canvas-message .phone-screen { height: 592px }
.property-thread {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; align-content: start; gap: 14px; padding: 14px;
  background: #ffffff;
}
.property-question { display: grid; justify-items: start; gap: 8px }
.property-question .thread-day { width: 100%; text-align: center }
.property-question .b { max-width: 86%; margin: 0 }
.property-answer {
  display: grid; justify-items: end; gap: 10px;
  will-change: opacity, transform;
}
.property-answer .b { max-width: 92%; margin: 0 }
.property-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px }
.property-source-action {
  padding: 0 10px; border: 0; background: #eef5fc; color: #0068c9;
  font-size: 13px; font-weight: 500; line-height: 16px; cursor: pointer;
}
.property-source-action:focus-visible,
.property-review:focus-visible { outline: 2px solid rgba(0,119,230,.45); outline-offset: 2px }
.property-result-foot {
  width: 100%; display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 8px;
}
.property-draft-badge {
  display: inline-flex; align-items: center; min-height: 20px; padding: 2px 6px;
  border-radius: 6px; background: #fff1cc; color: #6f4b00;
  font-size: 13px; font-weight: 500; line-height: 16px;
}
.property-review {
  padding: 0 12px; border: 0; background: #0077e6; color: #ffffff;
  font-size: 13px; font-weight: 500; line-height: 16px; cursor: pointer;
}
.property-review[aria-pressed="true"] { background: #005db5 }
.property-action-state {
  width: 100%; margin: 0; color: #777777; text-align: right;
  font-size: 12px; font-weight: 400; line-height: 16px;
}

.property-canvas-email .property-sources { left: 0; top: 250px; width: 360px }
.property-canvas-email .property-email-window {
  width: min(780px, calc(100% - 340px)); height: 620px; margin: 0 0 0 auto;
}
.property-inbox {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center; gap: 8px; height: 44px; padding: 0 10px;
  border-radius: 10px; background: #ffffff; color: #333333;
  font-size: 13px; font-weight: 500; line-height: 16px;
}
.property-inbox > b { margin: 0; color: #777777 }
.property-email-window .email-reader { padding: 20px }
.property-email-window .email-thread { width: min(100%, 590px) }
.property-email-draft { will-change: opacity, transform }
.property-email-draft .property-actions,
.property-email-draft .property-result-foot { justify-content: flex-start }
.property-email-draft .property-action-state { text-align: left }
.property-email-draft .email-status {
  background: #fff1cc; color: #6f4b00;
}

@media (max-width: 699px) {
  #view-services .scene[data-beats="3"] { height: 470svh }
  #view-services .property-demo {
    grid-template-rows: 52px minmax(0, 1fr); height: 100%;
  }
  #view-services .property-demo .channel-picker { min-height: 44px; margin: 0 }
  #view-services .property-panel,
  #view-services .property-canvas { width: 100%; height: 100%; min-height: 0 }
  #view-services .property-canvas [data-property-dominant],
  #view-services .property-sources {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  }
  #view-services .property-canvas [data-property-dominant] { z-index: 2 }
  #view-services .property-sources {
    z-index: 3; top: 0; padding: 12px; overflow-y: auto; border-radius: 0;
    box-shadow: none; background: #ffffff;
  }
  #view-services .property-demo:not([data-beat="sources"]) .property-sources {
    visibility: hidden; opacity: 0 !important;
  }
  #view-services .property-demo[data-beat="sources"] [data-property-dominant] {
    visibility: hidden; opacity: 0;
  }
  #view-services .property-demo[data-source-focus] .property-sources {
    visibility: visible; opacity: 1 !important;
  }
  #view-services .property-demo[data-source-focus] [data-property-dominant] {
    visibility: hidden; opacity: 0;
  }
  #view-services .property-source { padding-inline: 8px }
  #view-services .property-canvas-message .property-phone { width: 100% }
  #view-services .property-thread { padding: 12px; gap: 12px }
  #view-services .property-question .b,
  #view-services .property-answer .b { max-width: 94% }
  #view-services .property-email-window { width: 100%; height: 100% }
  #view-services .property-email-window .email-mailbox { display: none }
  #view-services .property-email-window .email-window-body { grid-template-columns: minmax(0, 1fr) }
  #view-services .property-email-window .email-reader { padding: 10px }
  #view-services .property-email-window .email-thread { width: 100%; gap: 8px }
  #view-services .property-email-received { padding: 12px }
  #view-services .property-email-draft {
    width: 100%; margin-left: 0; padding: 12px; gap: 8px; justify-self: stretch;
  }
  #view-services .property-email-draft .email-head {
    display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start;
  }
  #view-services .property-email-draft .email-fields { padding-bottom: 8px }
  #view-services .property-email-draft .email-body { gap: 4px }
  #view-services .property-email-draft .email-attachments { padding-top: 8px }
}

@media (max-width: 390px) {
  .property-sources-head { display: grid; gap: 0 }
  .property-sources-head small { white-space: normal }
  #view-services .property-email-draft .email-attachment {
    height: auto !important; min-height: 60px !important; padding-block: 6px;
  }
  #view-services .property-email-draft .email-attachment-name {
    overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere;
  }
  .property-source-copy small,
  .property-action-state { font-size: 12px !important; line-height: 16px !important }
}

/* ══════════════ Q. STORYBOARDS DEVIS ET COMPTABILITÉ ══════════════ */
.demo-stage,
.demo-stage * { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif }
.demo-stage {
  position: relative; width: 100%; height: 620px; color: #333333;
  font-size: 14px; font-weight: 400; line-height: 20px;
}
.demo-stage button {
  height: 32px; min-height: 32px; border-radius: 10px;
  font-size: 13px; font-weight: 500; line-height: 16px;
}
.demo-view {
  position: absolute; inset: 0; min-width: 0;
  will-change: opacity, transform;
}
.demo-window {
  position: absolute; z-index: 2; overflow: hidden;
  background: #ffffff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.08);
}
.demo-window-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 40px; padding: 0 16px; background: #f7f7fa;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.07);
}
.demo-window-bar span,
.demo-source-plane header b,
.demo-stage h3 { color: #333333; font-size: 16px; font-weight: 500; line-height: 20px }
.demo-window-bar small,
.demo-source-plane header small,
.demo-stage small,
.demo-note { color: #777777; font-size: 12px; font-weight: 400; line-height: 16px }
.demo-source-plane {
  position: absolute; z-index: 1; overflow: hidden;
  padding: 16px; background: #f7f7fa; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 16px 38px rgba(0,0,0,.07);
}
.demo-source-plane header {
  min-height: 36px; display: flex; align-items: start; justify-content: space-between; gap: 12px;
}
.demo-source-plane header b { font-size: 13px; line-height: 16px }
.demo-source-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center; gap: 8px; height: 44px; min-height: 44px; padding: 0 10px;
  background: rgba(255,255,255,.8); box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}
.demo-source-row > span:first-child { display: flex; color: #777777 }
.demo-source-row > span:nth-child(2),
.demo-file > span:nth-child(2) { min-width: 0; display: grid }
.demo-source-row b,
.demo-file b,
.quote-row b,
.bank-row b,
.match-row b,
.ready-row b {
  overflow: hidden; color: #333333; font-size: 13px; font-weight: 500; line-height: 16px;
  text-overflow: ellipsis; white-space: nowrap;
}
.demo-source-row i { display: flex; color: #15b042 }
.demo-source-row small,
.demo-file small,
.quote-row small,
.match-row small,
.ready-row small {
  overflow: hidden; color: #777777; font-size: 12px; font-weight: 400; line-height: 16px;
  text-overflow: ellipsis; white-space: nowrap;
}
.demo-badge {
  display: inline-flex; align-items: center; width: max-content; min-height: 20px;
  padding: 2px 6px; border-radius: 6px; background: #caface; color: #15b042;
  font-size: 13px; font-weight: 500; line-height: 16px;
}
.demo-badge-warn { background: #fff1cc; color: #6f4b00 }
.demo-primary {
  padding: 0 12px; border: 0; background: #0077e6; color: #ffffff; cursor: pointer;
}
.demo-primary:focus-visible { outline: 2px solid rgba(0,119,230,.45); outline-offset: 2px }

/* Devis · la demande et les références restent deux plans distincts. */
.quote-request .demo-source-plane { left: 28px; top: 190px; width: min(450px, calc(100% - 330px)) }
.demo-email-object { right: 28px; top: 48px; width: min(670px, calc(100% - 220px)); min-height: 460px; padding: 0 24px 24px }
.demo-email-object .demo-window-bar { margin: 0 -24px 20px }
.demo-email-head { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px }
.demo-email-head > span:nth-child(2) { min-width: 0; display: grid }
.demo-email-head b { font-size: 13px; font-weight: 500; line-height: 16px }
.demo-email-head time { color: #777777; font-size: 12px; line-height: 16px }
.demo-initials {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: #f0f0f4; color: #777777; font-size: 13px; font-weight: 500;
}
.demo-email-object h3 { margin: 20px 0 8px }
.demo-email-object > p { max-width: 62ch; margin: 0 0 20px }
.demo-files { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px }
.demo-file {
  display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 8px;
  height: 40px; min-height: 40px; padding: 0 10px; background: #f7f7fa; border-radius: 10px;
}
.quote-editor .demo-source-plane { left: 22px; top: 220px; width: min(400px, calc(100% - 380px)) }
.quote-sheet { right: 22px; top: 34px; width: min(720px, calc(100% - 190px)); min-height: 540px; padding: 24px }
.quote-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 20px }
.quote-head > span:first-child { display: grid; gap: 2px }
.quote-head h3 { margin: 0 }
.quote-table { display: grid; box-shadow: inset 0 1px 0 rgba(0,0,0,.07) }
.quote-table-head,
.quote-row { display: grid; grid-template-columns: minmax(0,1.6fr) .7fr .7fr .7fr; align-items: center; gap: 12px }
.quote-table-head {
  height: 40px; color: #777777; font-size: 13px; font-weight: 500; line-height: 16px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.07);
}
.quote-row { height: 40px; min-height: 40px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.06) }
.quote-row > span:first-child { min-width: 0; display: grid }
.quote-row > span:not(:first-child), .quote-row > b { text-align: right; font-size: 13px }
.quote-totals { width: min(100%, 320px); margin: 20px 0 0 auto; display: grid; gap: 4px }
.quote-totals > div { display: flex; justify-content: space-between; gap: 16px; min-height: 28px }
.quote-totals dt { color: #777777; font-size: 13px; font-weight: 500; line-height: 16px }
.quote-totals dd { margin: 0; color: #333333; font-size: 14px; line-height: 20px }
.quote-totals .quote-total { padding-top: 8px; box-shadow: inset 0 1px 0 rgba(0,0,0,.08) }
.quote-totals .quote-total :is(dt,dd) { color: #333333; font-size: 16px; font-weight: 500; line-height: 20px }
.quote-gate {
  inset: 110px auto auto 50%; width: min(650px, calc(100% - 48px)); min-height: 340px;
  transform: translateX(-50%); display: grid; place-items: center; align-content: center;
  gap: 10px; padding: 32px; text-align: center;
}
.quote-gate h3, .quote-gate p { margin: 0 }
.quote-gate p { max-width: 52ch; color: #777777 }
.demo-doc-icon { display: flex; color: #0077e6 }
.demo-pdf-result { display: none; position: absolute; inset: 0 }
.demo-stage[data-generated="1"] .quote-gate { display: none }
.demo-stage[data-generated="1"] .demo-pdf-result { display: block }
.demo-pdf-origin { left: 84px; top: 238px; width: 360px }
.demo-pdf-origin p { margin: 8px 0 2px; font-size: 13px }
.demo-pdf-origin strong { font-size: 16px; font-weight: 500; line-height: 20px }
.demo-phone {
  position: absolute; z-index: 2; top: 8px; right: 94px; width: 340px; height: 596px;
  padding: 10px; background: #111114; border-radius: 46px;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 22px 48px rgba(0,0,0,.22);
}
.demo-phone-screen {
  height: 100%; overflow: hidden; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto;
  gap: 12px; padding: 28px 16px 18px; background: #ffffff; border-radius: 37px;
}
.demo-phone-screen > header { min-width: 0; display: grid; padding-bottom: 12px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.07) }
.demo-phone-screen > header b { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap }
.demo-pdf { align-content: center; display: grid; justify-items: center; gap: 14px; padding: 18px; text-align: center; background: #f7f7fa; border-radius: 12px }
.demo-pdf h3, .demo-pdf p { margin: 0 }
.demo-pdf ul { width: 100%; margin: 0; padding: 12px 0; list-style: none; display: grid; gap: 6px; box-shadow: inset 0 1px 0 rgba(0,0,0,.06), inset 0 -1px 0 rgba(0,0,0,.06) }
.demo-pdf li { font-size: 13px; line-height: 16px }
.demo-phone .demo-primary { width: 100% }
.demo-phone .demo-note { text-align: center }

/* Comptabilité · Banque domine, les pièces gardent une origine séparée. */
.accounting-input .accounting-docs { left: 30px; top: 226px; width: min(420px, calc(100% - 380px)) }
.bank-window { right: 30px; top: 66px; width: min(680px, calc(100% - 300px)); min-height: 460px }
.bank-head,
.bank-row { display: grid; grid-template-columns: 92px minmax(0,1fr) 124px; align-items: center; gap: 12px; padding: 0 18px }
.bank-head {
  height: 40px; color: #777777; font-size: 13px; font-weight: 500; line-height: 16px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.07);
}
.bank-row { height: 40px; min-height: 40px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.06) }
.bank-row time { color: #777777; font-size: 13px; line-height: 16px }
.bank-row strong { text-align: right; font-size: 13px; font-weight: 500; line-height: 16px }
.match-window { inset: 70px auto auto 50%; width: min(900px, calc(100% - 48px)); transform: translateX(-50%); padding-bottom: 14px }
.match-row {
  display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(0,1fr) auto;
  align-items: center; gap: 14px; min-height: 92px; padding: 14px 18px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}
.match-number { color: #777777; font-size: 13px; font-weight: 500 }
.match-row > span:nth-child(2), .match-with { min-width: 0; display: grid }
.match-with { padding-left: 14px; box-shadow: inset 1px 0 0 rgba(0,0,0,.07) }
.accounting-ready { inset: 54px auto auto 50%; width: min(860px, calc(100% - 48px)); transform: translateX(-50%); padding: 28px }
.accounting-ready > header { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 20px }
.accounting-ready > header span:first-child { display: grid }
.accounting-ready h3 { margin: 0 }
.ready-list { display: grid; margin-bottom: 20px }
.ready-row {
  display: grid; grid-template-columns: 22px minmax(0,1fr) auto;
  align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}
.ready-row > span:first-child { display: flex; color: #15b042 }
.ready-row:has(.demo-badge-warn) > span:first-child { color: #8b6508 }
.ready-row > span:nth-child(2) { min-width: 0; display: grid }
.accounting-ready .demo-note { margin: 12px 0 0 }

@media (max-width: 699px) {
  #view-services .demo-stage { height: 100% }
  #view-services .demo-window,
  #view-services .demo-phone {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
    margin: 0; transform: none; border-color: transparent; border-radius: 0; box-shadow: none;
  }
  #view-services .demo-source-plane { display: none }
  #view-services .demo-email-object { padding: 0 12px 12px; overflow-y: auto }
  #view-services .demo-email-object .demo-window-bar { margin: 0 -12px 14px }
  #view-services .demo-email-object h3 { margin-top: 16px }
  #view-services .demo-files { grid-template-columns: minmax(0,1fr) }
  #view-services .quote-sheet { padding: 16px 12px; overflow-y: auto }
  #view-services .quote-head { display: grid; gap: 8px; margin-bottom: 12px }
  #view-services .quote-table-head { display: none }
  #view-services .quote-row {
    grid-template-columns: minmax(0,1fr) auto; gap: 8px; height: 40px; min-height: 40px;
  }
  #view-services .quote-row > span:first-child { grid-column: 1 }
  #view-services .quote-row > span:nth-child(2),
  #view-services .quote-row > span:nth-child(3) { display: none }
  #view-services .quote-row > b { grid-column: 2 }
  #view-services .quote-totals { width: 100%; margin-top: 14px }
  #view-services .quote-gate { padding: 24px }
  #view-services .demo-pdf-result { inset: 0 }
  #view-services .demo-phone { padding: 0; background: transparent }
  #view-services .demo-phone-screen { border-radius: 0; padding: 18px 12px 12px }
  #view-services .bank-window { overflow-y: auto }
  #view-services .bank-head,
  #view-services .bank-row { grid-template-columns: 54px minmax(0,1fr) 90px; gap: 6px; padding: 0 8px }
  #view-services .bank-row time,
  #view-services .bank-row b,
  #view-services .bank-row strong { font-size: 12px; line-height: 16px }
  #view-services .match-window { overflow-y: auto; padding-bottom: 0 }
  #view-services .match-row {
    grid-template-columns: 28px minmax(0,1fr); gap: 8px; min-height: 0; padding: 12px;
  }
  #view-services .match-with { grid-column: 2; padding: 8px 0 0; box-shadow: inset 0 1px 0 rgba(0,0,0,.07) }
  #view-services .match-row .demo-badge { grid-column: 2 }
  #view-services .accounting-ready { padding: 18px 12px; overflow-y: auto }
  #view-services .accounting-ready > header { display: grid; gap: 8px; margin-bottom: 12px }
  #view-services .ready-row { grid-template-columns: 20px minmax(0,1fr); min-height: 64px; padding: 8px 4px }
  #view-services .ready-row .demo-badge { grid-column: 2 }
}

@media (max-width: 390px) {
  #view-services .demo-window-bar small { display: none }
  #view-services .demo-stage :is(.demo-source-row small, .demo-file small, .quote-row small, .match-row small, .ready-row small, .demo-note) {
    font-size: 12px; line-height: 16px;
  }
}

/* Les plans sources restent en retrait, mais leur en-tête et leurs noms
   restent entièrement lisibles dans la capture desktop. */
@media (min-width: 901px) {
  .property-canvas-email .property-sources-head,
  :is(.contract-request-card, .contract-version-plane, .contract-citations,
      .appointment-agenda, .quote-request .demo-source-plane,
      .quote-editor .demo-source-plane, .accounting-docs) > header {
    display: grid; justify-content: start; gap: 0;
  }
}

/* Palier tablette : la boîte email immobilière garde ses deux colonnes,
   mais abandonne le retrait desktop qui excède les 768 px disponibles. */
@media (min-width: 700px) and (max-width: 900px) {
  .property-canvas-email .property-sources { width: 300px }
  .property-canvas-email .property-email-window { width: calc(100% - 120px) }
  .property-email-window .email-window-body { grid-template-columns: 150px minmax(0,1fr) }
  .property-email-window .email-reader { min-width: 0; padding: 12px }
  .property-email-window .email-thread { width: 100%; min-width: 0 }
  .property-email-window .phone-email { width: 100%; min-width: 0; margin-left: 0 }
}

/* Placées en dernier pour gagner sur la palette positive commune. */
.demo-stage .demo-badge.demo-badge-neutral { background: #ececf0; color: #777777 }

@media (max-width: 699px) {
  #view-services .contract-email .demo-window-bar {
    display: grid; justify-items: start; gap: 4px; padding-block: 8px;
  }
}

/* ══════════════ T. GRAMMAIRE MOTION ORIGAMI CONSOLIDÉE ══════════════ */
.demo-window { border: 0 }
.demo-window-bar { position: relative; padding-left: 58px }
.demo-window-bar::before {
  content: ""; position: absolute; left: 17px; top: 16px; width: 9px; height: 9px;
  border-radius: 50%; background: #ff5f57; box-shadow: 15px 0 #febc2e, 30px 0 #28c840;
}
.demo-source-plane {
  overflow: visible; background: transparent; border-radius: 0; box-shadow: none;
}
.demo-view { transition: opacity .5s cubic-bezier(.22,1,.36,1), filter .5s cubic-bezier(.22,1,.36,1) }

/* Comptabilité : deux cas d'usage distincts, un contrat de scroll commun. */
.accounting-picker {
  position: absolute; z-index: 40; left: 50%; top: 0; display: flex; align-items: center;
  gap: 10px; transform: translateX(-50%); color: #777777; font-size: 13px; line-height: 16px;
}
.accounting-picker > div { display: flex; padding: 3px; border-radius: 12px; background: #eceef2 }
.accounting-picker button { padding: 0 12px; border: 0; background: transparent; color: #777777; cursor: pointer }
.accounting-picker button[aria-selected="true"] { background: #ffffff; color: #333333; box-shadow: 0 3px 12px rgba(27,35,48,.1) }
.accounting-panel { position: absolute; inset: 46px 0 0 }
.accounting-panel[hidden] { display: none }
.accounting-canvas { position: relative; width: 100%; height: 100%; isolation: isolate }
.acct-window {
  height: 430px; transition: opacity .5s cubic-bezier(.22,1,.36,1), filter .5s cubic-bezier(.22,1,.36,1),
    transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.acct-macbar {
  height: 38px; display: grid; grid-template-columns: 76px minmax(0,1fr) 76px;
  align-items: center; padding: 0 12px; background: #e7e9ed;
}
.acct-macbar > b { overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; line-height: 16px }
.acct-lights { display: flex; gap: 6px }
.acct-lights i { width: 10px; height: 10px; border-radius: 50% }
.acct-lights i:nth-child(1) { background: #ff5f57 }
.acct-lights i:nth-child(2) { background: #febc2e }
.acct-lights i:nth-child(3) { background: #28c840 }
.acct-app { height: calc(100% - 38px); display: grid; grid-template-columns: 62px minmax(0,1fr) }
.acct-nav { display: grid; align-content: start; justify-items: center; gap: 14px; padding: 16px 8px; background: #f0edff; color: #7164c7 }
.acct-nav-dark { background: #24334a; color: #ffffff }
.acct-nav > b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #7b68e8; color: #ffffff }
.acct-nav-dark > b { background: #0077e6 }
.acct-nav > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px }
.acct-nav > span.active { background: #ffffff; color: #0077e6 }
.acct-content { min-width: 0; padding: 28px 18px }
.acct-content h3 { margin: 0 0 24px }
.acct-list { position: relative; display: grid; gap: 10px; overflow: hidden }
.acct-skeleton-row {
  position: relative; height: 54px; display: grid; grid-template-columns: 34px minmax(0,1fr) 22px;
  align-items: center; gap: 10px; padding: 0 10px; border-radius: 11px; background: #f5f6f8;
}
.acct-row-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #dfe4ea; color: #66707d }
.demo-accounting[data-usecase="supplier"]:is([data-beat="2"],[data-beat="3"],[data-beat="4"],[data-beat="5"],[data-beat="6"]) .acct-skeleton-row:nth-of-type(2) { background: #e7f8e7 }
.demo-accounting[data-usecase="supplier"]:is([data-beat="2"],[data-beat="3"],[data-beat="4"],[data-beat="5"],[data-beat="6"]) .acct-skeleton-row:nth-of-type(2) .acct-row-icon { background: #caface; color: #15b042 }
.acct-lines { min-width: 0; display: grid; gap: 7px }
.acct-lines > i, .acct-tax-line { display: block; height: 6px; border-radius: 4px; background: #d6dbe2 }
.acct-lines > i:last-child { width: 54% }
.acct-row-state { width: 20px; height: 20px; border-radius: 50%; background: #dfe4e8 }
.acct-scan, .acct-page-scan, .overdue-scan, .overdue-payment-scan {
  position: absolute; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(0,119,230,.2), transparent);
}
.acct-scan { inset: 0 0 auto; height: 24px }
.acct-portal { z-index: 3; left: 4px; top: 74px; width: 400px }
.acct-viewer { z-index: 2; left: 50%; top: 10px; width: 450px; transform: translateX(-50%) }
.acct-ledger { z-index: 1; right: 4px; top: 106px; width: 430px }
.acct-document { height: calc(100% - 38px); background: #d9dde3 }
.acct-viewer-tools { height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: #6f747c; color: #ffffff }
.acct-viewer-tools b { font-size: 13px; font-weight: 500 }
.acct-page-canvas { position: relative; height: calc(100% - 36px); overflow: hidden; display: grid; place-items: center }
.acct-page-scan { left: calc(50% - 100px); top: 30px; width: 200px; height: 28px }
.acct-invoice { position: relative; width: 200px; height: 282px; padding: 42px 24px; background: #ffffff; box-shadow: 0 14px 36px rgba(27,35,48,.1) }
.acct-invoice-lines { display: grid; gap: 10px }
.acct-invoice-lines i { height: 7px; border-radius: 4px; background: #d9dde3 }
.acct-invoice-lines i:last-child { width: 58% }
.acct-invoice strong { position: absolute; right: 24px; bottom: 52px; padding: 3px 7px; background: #caface; color: #15b042; font-size: 16px; font-weight: 500; line-height: 20px }
.acct-invoice small { position: absolute; right: 24px; bottom: 28px }
.acct-columns, .acct-ledger-row { display: grid; grid-template-columns: 34px minmax(0,1fr) 58px 74px 22px; align-items: center; gap: 8px }
.acct-columns { grid-template-columns: 34px minmax(0,1fr) 58px 74px 22px; height: 32px; color: #777777; font-size: 11px; line-height: 16px }
.acct-columns span:first-child { grid-column: 1 / 3 }
.acct-ledger-row { height: 58px; padding: 0 8px; border-radius: 11px; background: #f5f6f8; transition: background-color .3s cubic-bezier(.22,1,.36,1) }
.acct-ledger-row strong { font-size: 13px; font-weight: 500; white-space: nowrap }
.acct-ledger-check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #15b042; color: #ffffff; font-style: normal; opacity: 0 }
.acct-ledger .acct-content > p { margin: 18px 0 0; color: #777777; text-align: center; font-size: 13px; opacity: 0 }
.acct-flying-file {
  --flight: var(--accounting-flight, 0); position: absolute; z-index: 12; left: calc(50% - 96px); top: 188px;
  width: 108px; height: 146px; padding: 24px 16px; background: #ffffff; box-shadow: 0 18px 44px rgba(27,35,48,.2);
  opacity: calc(sin(var(--flight) * 3.1416));
  transform: translate3d(calc(var(--flight) * 330px), calc(var(--flight) * 158px), 0) scale(calc(1 - var(--flight) * .72));
}
.acct-flying-file > span { display: grid; gap: 7px }
.acct-flying-file > span i { height: 5px; border-radius: 3px; background: #d8dde3 }
.acct-flying-file > strong { position: absolute; right: 12px; bottom: 22px; font-size: 13px; font-weight: 500 }
.acct-flying-file > svg { position: absolute; left: 12px; bottom: 18px; color: #15b042 }
.acct-drag-cursor {
  position: absolute; z-index: 13; left: calc(50% + 10px); top: 314px; width: 27px; height: 33px;
  color: #333333; opacity: calc(sin(var(--accounting-flight, 0) * 3.1416));
  transform: translate3d(calc(var(--accounting-flight, 0) * 330px), calc(var(--accounting-flight, 0) * 158px), 0);
}
.acct-drag-cursor svg { width: 100%; height: 100%; fill: #ffffff; stroke: currentColor; stroke-width: 1.5; filter: drop-shadow(0 3px 5px rgba(27,35,48,.2)) }
.acct-phone {
  position: absolute; z-index: 20; left: 50%; top: 0; width: 286px; height: 558px; padding: 7px;
  border-radius: 49px; background: linear-gradient(145deg,#2a2b2f,#08090b 58%,#24252a);
  box-shadow: 0 38px 82px rgba(17,22,31,.27); transform: translateX(-50%);
  transition: opacity .5s cubic-bezier(.22,1,.36,1), filter .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.acct-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 42px; background: linear-gradient(155deg,#d9e9ff,#f1e5fb 48%,#f8f8fa) }
.acct-phone-screen > header { height: 48px; display: grid; grid-template-columns: 1fr 82px 1fr; align-items: center; padding: 0 16px; font-size: 11px }
.acct-phone-screen > header > i { width: 82px; height: 25px; border-radius: 16px; background: #101114 }
.acct-phone-screen > header > span { justify-self: end; font-size: 9px; letter-spacing: 2px }
.acct-phone-date { display: grid; justify-items: center; margin-top: 16px }
.acct-phone-date b { margin-top: 2px; font-size: 30px; font-weight: 500; line-height: 36px }
.acct-notice {
  position: absolute; left: 12px; right: 12px; top: 150px; min-height: 78px; display: grid;
  grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 18px; background: rgba(255,255,255,.82); box-shadow: 0 16px 36px rgba(27,35,48,.16);
  backdrop-filter: blur(18px); transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.acct-notice > span:last-child { min-width: 0; display: grid }
.acct-notice > span:last-child > span { display: flex; justify-content: space-between; gap: 8px }
.acct-notice b, .acct-notice strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 17px }
.acct-notice strong { font-weight: 600 }
.acct-notice time, .acct-notice small { color: #696a70; font-size: 12px; line-height: 16px }
.acct-mail-icon, .acct-message-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #ffffff }
.acct-mail-icon { background: #168ff2 }
.acct-message-icon { background: #24c744 }
.acct-notice-out { opacity: 0; transform: translateY(-10px) scale(.97) }
.demo-accounting[data-beat="1"] .acct-window { opacity: .42; filter: blur(3px); transform: translateY(8px) scale(.982) }
.demo-accounting[data-beat="1"] .acct-viewer { transform: translateX(-50%) translateY(8px) scale(.982) }
.demo-accounting[data-usecase="supplier"]:is([data-beat="2"],[data-beat="3"],[data-beat="4"],[data-beat="5"]) .acct-phone { opacity: 0; filter: blur(8px); transform: translate(-50%, 480px) scale(.92); pointer-events: none }
.demo-accounting[data-usecase="supplier"]:is([data-beat="2"],[data-beat="3"],[data-beat="4"],[data-beat="5"]) .acct-window { opacity: .42; filter: blur(3px); transform: translateY(8px) scale(.982) }
.demo-accounting[data-usecase="supplier"]:is([data-beat="2"],[data-beat="3"],[data-beat="4"],[data-beat="5"]) .acct-viewer { transform: translateX(-50%) translateY(8px) scale(.982) }
.demo-accounting[data-usecase="supplier"][data-beat="2"] .acct-portal { z-index: 5; opacity: 1; filter: none; transform: none; box-shadow: 0 30px 70px rgba(27,35,48,.18) }
.demo-accounting[data-usecase="supplier"][data-beat="2"] .acct-scan { animation: acctScan .8s cubic-bezier(.22,1,.36,1) both }
.demo-accounting[data-usecase="supplier"][data-beat="3"] .acct-viewer { z-index: 5; opacity: 1; filter: none; transform: translateX(-50%); box-shadow: 0 30px 70px rgba(27,35,48,.18) }
.demo-accounting[data-usecase="supplier"][data-beat="3"] .acct-page-scan { animation: acctPageScan .8s cubic-bezier(.22,1,.36,1) both }
.demo-accounting[data-usecase="supplier"][data-beat="4"] .acct-ledger { z-index: 5; opacity: 1; filter: none; transform: none; box-shadow: 0 30px 70px rgba(27,35,48,.18) }
.demo-accounting[data-usecase="supplier"][data-beat="4"] .acct-ledger-row { background: #eef5fc }
.demo-accounting[data-usecase="supplier"][data-beat="5"] .acct-ledger { z-index: 5; opacity: 1; filter: none; transform: none; box-shadow: 0 30px 70px rgba(27,35,48,.18) }
.demo-accounting[data-usecase="supplier"]:is([data-beat="5"],[data-beat="6"]) .acct-ledger-row { background: #e7f8e7 }
.demo-accounting[data-usecase="supplier"]:is([data-beat="5"],[data-beat="6"]) .acct-ledger-check,
.demo-accounting[data-usecase="supplier"]:is([data-beat="5"],[data-beat="6"]) .acct-ledger .acct-content > p { opacity: 1 }
.demo-accounting[data-usecase="supplier"][data-beat="6"] .acct-window { opacity: .34; filter: blur(4px); transform: translateY(8px) scale(.98) }
.demo-accounting[data-usecase="supplier"][data-beat="6"] .acct-viewer { transform: translateX(-50%) translateY(8px) scale(.98) }
.demo-accounting[data-usecase="supplier"][data-beat="6"] .acct-notice-in { opacity: 0; transform: translateY(-10px) scale(.97) }
.demo-accounting[data-usecase="supplier"][data-beat="6"] .acct-notice-out { opacity: 1; transform: none }
@keyframes acctScan { from { opacity: 0; transform: translateY(-20px) } 25% { opacity: 1 } to { opacity: 0; transform: translateY(112px) } }
@keyframes acctPageScan { from { opacity: 0; transform: translateY(-80px) } 25% { opacity: 1 } to { opacity: 0; transform: translateY(210px) } }

/* Relance impayée : Mail reste le canal, les lectures restent ouvertes sur les côtés. */
.acct-overdue { padding-top: 8px }
.overdue-mail { z-index: 6; left: 50%; top: 10px; width: 620px; height: 540px; transform: translateX(-50%); box-shadow: 0 30px 72px rgba(27,35,48,.15) }
.overdue-mail-app { height: calc(100% - 38px); position: relative; overflow: hidden }
.overdue-history, .overdue-compose { position: absolute; inset: 0; transition: opacity .5s cubic-bezier(.22,1,.36,1), filter .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1) }
.overdue-history { display: grid; grid-template-columns: 100px 150px minmax(0,1fr) }
.overdue-history nav { display: grid; align-content: start; gap: 12px; padding: 18px 12px; background: #f4f5f7 }
.overdue-history nav b { margin-bottom: 8px }
.overdue-history nav span { color: #777777; font-size: 12px; line-height: 16px }
.overdue-history nav span.active { color: #333333; font-weight: 500 }
.overdue-history > aside { padding: 18px 10px; background: #fafafa }
.overdue-history > aside .acct-skeleton-row { grid-template-columns: 28px minmax(0,1fr); padding: 0 6px }
.overdue-history > aside .acct-row-state { display: none }
.overdue-history > article { padding: 24px 22px }
.overdue-history > article > header { display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 10px }
.overdue-history > article > header > span:last-child { min-width: 0; display: grid }
.overdue-history h3 { margin: 20px 0 }
.overdue-thread-lines { max-width: 260px }
.overdue-compose { padding: 20px 22px; opacity: 0; filter: blur(10px); transform: scale(.985) }
.overdue-compose > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px }
.overdue-compose > header > b { font-size: 13px; font-weight: 500 }
.overdue-send { position: relative; width: 76px; overflow: hidden; border: 0; background: #0077e6; color: #ffffff; opacity: 1 !important }
.overdue-send span { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .18s cubic-bezier(.22,1,.36,1) }
.overdue-send span:last-child { opacity: 0 }
.overdue-compose .demo-fields { margin-top: 0 }
.overdue-body { min-height: 250px; padding-top: 16px; white-space: pre-line; font-size: 14px; line-height: 20px }
.overdue-typed.is-typing::after { content: ""; display: inline-block; width: 1px; height: 14px; margin-left: 2px; background: #0077e6; vertical-align: -2px; animation: overdueCaret .65s steps(1,end) infinite }
.overdue-attachment { position: absolute; left: 22px; bottom: 18px; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; opacity: 0; transform: translateY(8px) }
.overdue-attachment > span:first-child { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: #eef5fc; color: #0077e6; font-size: 11px; font-weight: 500 }
.overdue-attachment > span:last-child { display: grid }
.overdue-attachment b { font-size: 13px; font-weight: 500 }
.overdue-source { position: absolute; z-index: 3; opacity: 0; filter: blur(7px); transform: scale(.97); transition: opacity .5s cubic-bezier(.22,1,.36,1), filter .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1) }
.overdue-source-invoice { left: 32px; top: 150px; width: 160px; height: 240px }
.overdue-source-invoice > article { position: relative; width: 132px; height: 184px; padding: 42px 16px; background: #ffffff; box-shadow: 0 20px 48px rgba(27,35,48,.12) }
.overdue-source-invoice > article > span { display: grid; gap: 8px }
.overdue-source-invoice > article > span i { height: 6px; border-radius: 3px; background: #d9dde3 }
.overdue-source-invoice strong { position: absolute; right: 14px; bottom: 42px; padding: 2px 5px; background: #caface; color: #15b042; font-size: 13px }
.overdue-source-invoice small { position: absolute; left: 16px; bottom: 18px; color: #d55a52 }
.overdue-scan { inset: 0 20px auto 0; height: 28px }
.overdue-source-payment { right: 30px; top: 184px; width: 170px; min-height: 170px }
.overdue-payment-scan { inset: 0 -4px auto; height: 26px }
.overdue-payment-row { height: 50px; display: grid; grid-template-columns: 30px minmax(0,1fr) 22px; align-items: center; gap: 9px }
.overdue-payment-row > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #e5eceb; color: #4e746e; font-style: normal; font-size: 12px }
.overdue-payment-row > span { display: grid; gap: 6px }
.overdue-payment-row > span i { height: 6px; border-radius: 3px; background: #d4dadd }
.overdue-payment-row > span i:last-child { width: 58% }
.overdue-payment-row > b { width: 21px; height: 21px; border-radius: 50%; background: #e5e9e8 }
.overdue-cross { position: relative; background: #e2554f !important }
.overdue-cross::before, .overdue-cross::after { content: ""; position: absolute; left: 6px; top: 10px; width: 9px; height: 2px; border-radius: 1px; background: #ffffff; transform: rotate(45deg) }
.overdue-cross::after { transform: rotate(-45deg) }
.demo-accounting[data-beat="2"] .overdue-source { opacity: 1; filter: none; transform: none }
.demo-accounting[data-beat="2"] .overdue-history { opacity: .22; filter: blur(7px); transform: scale(.985) }
.demo-accounting[data-beat="2"] .overdue-scan { animation: overdueScan .8s cubic-bezier(.22,1,.36,1) both }
.demo-accounting[data-beat="2"] .overdue-payment-scan { animation: overduePaymentScan .8s cubic-bezier(.22,1,.36,1) .08s both }
.demo-accounting[data-beat="3"] .overdue-history { opacity: 0; filter: blur(10px); transform: scale(.985) }
.demo-accounting[data-beat="3"] .overdue-compose { opacity: 1; filter: none; transform: none }
.demo-accounting[data-beat="3"] .overdue-source { opacity: .12; filter: blur(5px); transform: scale(.96) }
.demo-accounting[data-beat="3"] .overdue-attachment { opacity: 1; transform: none; transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1) }
.demo-accounting[data-sent="1"] .overdue-send { background: #15b042 }
.demo-accounting[data-sent="1"] .overdue-send span:first-child { opacity: 0 }
.demo-accounting[data-sent="1"] .overdue-send span:last-child { opacity: 1 }
@keyframes overdueScan { from { opacity: 0; transform: translateY(-22px) } 25% { opacity: 1 } to { opacity: 0; transform: translateY(170px) } }
@keyframes overduePaymentScan { from { opacity: 0; transform: translateY(-18px) } 25% { opacity: 1 } to { opacity: 0; transform: translateY(136px) } }
@keyframes overdueCaret { 0%,48% { opacity: 1 } 49%,100% { opacity: 0 } }

@media (max-width: 699px) {
  #view-services .accounting-picker { top: 2px; width: calc(100% - 16px); justify-content: center }
  #view-services .accounting-picker > span { display: none }
  #view-services .accounting-picker > div { width: 100% }
  #view-services .accounting-picker button { flex: 1; padding-inline: 6px }
  #view-services .accounting-panel { inset: 44px 0 0 }
  #view-services .acct-window { inset: 0; width: 100%; height: 100%; transform: none; border-radius: 0; box-shadow: none; opacity: 0; filter: blur(10px); pointer-events: none }
  #view-services .acct-app { grid-template-columns: 1fr }
  #view-services .acct-nav { display: none }
  #view-services .acct-content { padding: 22px 12px }
  #view-services .acct-phone { top: 2px; width: 286px; height: calc(100% - 6px) }
  #view-services .demo-accounting[data-beat="1"] .acct-window { opacity: 0; transform: none }
  #view-services .demo-accounting[data-usecase="supplier"]:is([data-beat="2"],[data-beat="3"],[data-beat="4"],[data-beat="5"]) .acct-window { opacity: 0; filter: blur(10px); transform: none }
  #view-services .demo-accounting[data-usecase="supplier"][data-beat="2"] .acct-portal,
  #view-services .demo-accounting[data-usecase="supplier"][data-beat="3"] .acct-viewer,
  #view-services .demo-accounting[data-usecase="supplier"]:is([data-beat="4"],[data-beat="5"]) .acct-ledger { opacity: 1; filter: none; transform: none; pointer-events: auto }
  #view-services .demo-accounting[data-usecase="supplier"][data-beat="3"] .acct-viewer { transform: none }
  #view-services .demo-accounting[data-usecase="supplier"][data-beat="6"] .acct-window { opacity: 0; transform: none }
  #view-services .acct-flying-file { left: calc(50% - 54px); top: 158px; transform: translate3d(0, calc(var(--accounting-flight) * 230px), 0) scale(calc(1 - var(--accounting-flight) * .72)) }
  #view-services .acct-drag-cursor { left: calc(50% + 38px); top: 276px; transform: translate3d(0, calc(var(--accounting-flight) * 230px), 0) }
  #view-services .acct-columns { display: none }
  #view-services .acct-ledger-row { grid-template-columns: 34px minmax(0,1fr) auto 22px; margin-top: 22px }
  #view-services .acct-tax-line { display: none }
  #view-services .overdue-mail { inset: 0; width: 100%; height: 100%; transform: none; border-radius: 0; box-shadow: none }
  #view-services .overdue-history { grid-template-columns: 1fr }
  #view-services .overdue-history nav, #view-services .overdue-history > aside { display: none }
  #view-services .overdue-history > article { padding: 26px 18px }
  #view-services .overdue-compose { padding: 20px 16px }
  #view-services .overdue-body { min-height: 330px }
  #view-services .overdue-attachment { left: 16px; bottom: 16px }
  #view-services .demo-accounting[data-beat="2"] .overdue-history { opacity: .12; filter: blur(8px) }
  #view-services .overdue-source-invoice { z-index: 8; left: 58px; top: 138px; width: 130px; height: 190px }
  #view-services .overdue-source-invoice > article { width: 112px; height: 156px; padding: 38px 14px }
  #view-services .overdue-source-payment { z-index: 8; right: 30px; top: 350px; width: 154px }
  #view-services .demo-accounting[data-beat="3"] .overdue-source { opacity: 0 }
}

/* Les mockups n’ouvrent jamais un second contexte de défilement : le
   geste vertical reste réservé au storyboard piloté par la page. */
#stage-slot :is(
  .demo-window,
  .email-mailbox,
  .property-thread,
  .property-sources,
  .email-reader,
  .appointment-thread,
  .appointment-email-window,
  .demo-email-object,
  .quote-sheet,
  .bank-window,
  .match-window,
  .accounting-ready
) {
  overflow: hidden !important;
  overscroll-behavior: auto;
  touch-action: pan-y;
}

@media (prefers-reduced-motion: reduce) {
  .fig *, .fig .fa, .fig .fb, .fig .cal-on { animation: none !important; transition: none !important }
  .taka-thinking *, .diagnostic-motion *, .stack-motion * { animation: none !important; transition: none !important; opacity: 1; transform: none; stroke-dashoffset: 0 }
  .taka-thinking .taka-pixels i { opacity: .35 }
  .diagnostic-motion .dm-scan { display: none }
  .acct-window, .acct-phone, .acct-notice, .overdue-history, .overdue-compose, .overdue-source { transition-duration: .01ms }
  .acct-scan, .acct-page-scan, .overdue-scan, .overdue-payment-scan { animation: none !important }
  .acct-flying-file, .acct-drag-cursor { display: none }
  .overdue-typed.is-typing::after { display: none }
}

/* Les storyboards à quatre vues gardent une longueur proportionnée. */
.scene[data-beats="4"] { height: 460vh }

/* Rendez-vous : l'agenda est un plan de lecture, pas une carte explicative. */
.appointment-agenda { overflow: hidden; background: transparent; box-shadow: none }
.appointment-scan {
  position: absolute; z-index: 3; inset: 34px 0 auto; height: 26px; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(0,119,230,.2), transparent);
}
.demo-appointment[data-beat="2"] .appointment-scan { animation: appointmentScan .82s cubic-bezier(.22,1,.36,1) both }
@keyframes appointmentScan { from { opacity: 0; transform: translateY(-18px) } 24% { opacity: 1 } to { opacity: 0; transform: translateY(92px) } }

/* Contrat : Mail et GED sont deux systèmes superposés et reconnaissables. */
.contract-library { left: 32px; right: auto; top: 156px; width: 620px; min-height: 420px; overflow: hidden }
.contract-library-inner { position: relative; min-height: 382px; overflow: hidden }
.contract-library-inner > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 18px 12px }
.contract-library-inner > header h3 { margin: 0 }
.contract-scan { position: absolute; z-index: 3; left: 0; right: 0; top: 72px; height: 28px; opacity: 0; background: linear-gradient(180deg,transparent,rgba(0,119,230,.2),transparent) }
.demo-contract[data-beat="2"] .contract-scan { animation: contractScan 1s cubic-bezier(.22,1,.36,1) both }
@keyframes contractScan { from { opacity: 0; transform: translateY(-26px) } 22% { opacity: 1 } to { opacity: 0; transform: translateY(176px) } }
.contract-inbox { z-index: 4; right: 30px; top: 48px; width: 650px; min-height: 340px }
.contract-inbox-inner { padding: 22px 24px }
.contract-inbox-inner h3 { margin: 20px 0 8px }
.contract-inbox-inner > p { max-width: 56ch; margin: 0 0 20px }
.contract-mail-files { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px }
.contract-mail-files > span { min-width: 0; height: 40px; display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 8px; padding: 0 10px; border-radius: 10px; background: #f5f6f8 }
.contract-mail-files i { display: flex; color: #777777 }
.contract-mail-files b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500 }
.contract-library-behind { opacity: .54; filter: blur(2px); transform: translateY(8px) scale(.985) }
.contract-inbox-behind { opacity: .28; filter: blur(5px); transform: translateY(10px) scale(.98) }
.contract-scan-view .contract-library { z-index: 5; top: 62px; box-shadow: 0 30px 72px rgba(27,35,48,.16) }
.contract-sheet { overflow: hidden }
.contract-review-app { height: calc(100% - 38px); display: grid; grid-template-columns: 52px minmax(0,1fr) }
.contract-review-app > nav { display: grid; grid-template-rows: 34px 34px 34px minmax(0,1fr); justify-items: center; gap: 12px; padding: 14px 8px; background: #24334a; color: #ffffff }
.contract-review-app > nav > b,
.contract-review-app > nav > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px }
.contract-review-app > nav > b { background: #0077e6; font-size: 11px; font-weight: 500 }
.contract-review-app > nav > span.active { background: #ffffff; color: #0077e6 }
.contract-review-app > section { min-width: 0; padding: 16px 18px }
.contract-review-app > section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px }
.contract-review-app > section > header > span:first-child { min-width: 0; display: grid }
.contract-clause-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px }
.contract-review-app .contract-clause { min-width: 0; min-height: 168px; margin: 0; padding: 16px }
.contract-review-app .contract-clause h3 { padding-right: 70px; font-size: 14px; line-height: 20px }
.contract-review-app .contract-clause p { font-size: 13px; line-height: 18px }
.contract-deadline { display: grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1.2fr) 34px minmax(0,1.2fr); align-items: center; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #f5f6f8 }
.contract-deadline > span { min-width: 0; display: grid; gap: 2px }
.contract-deadline small { color: #777777; font-size: 11px; line-height: 14px }
.contract-deadline b { font-size: 13px; font-weight: 500; line-height: 16px }
.contract-deadline > i { position: relative; height: 2px; overflow: hidden; background: #d8dde4 }
.contract-deadline > i b { position: absolute; inset: 0; background: #15b042; transform: scaleX(0); transform-origin: left }
.demo-contract[data-beat="3"] .contract-clause-active { animation: contractClauseIn .5s cubic-bezier(.22,1,.36,1) both }
.demo-contract[data-beat="3"] .contract-deadline > i b { animation: contractDeadline .6s cubic-bezier(.22,1,.36,1) .18s forwards }
@keyframes contractClauseIn { from { opacity: .25; filter: blur(5px); transform: translateX(-8px) } to { opacity: 1; filter: none; transform: none } }
@keyframes contractDeadline { to { transform: scaleX(1) } }
.contract-sheet-behind { z-index: 2; left: 18px; right: auto; top: 78px; width: 640px; opacity: .62; filter: blur(2px); transform: translateX(-38px) scale(.98) }
.contract-email { padding: 0; overflow: hidden }
.contract-result .contract-email { z-index: 5; right: 20px; top: 38px; width: 690px; min-height: 540px }
.contract-email-inner { padding: 20px 24px 24px }
.contract-email-inner > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px }
.contract-email-inner > p { max-width: 64ch; margin: 18px 0 }

/* SAV : trois systèmes lisibles — Mail, commandes et support. */
.support-mail { z-index: 4; right: 24px; top: 22px; width: 700px; height: 570px }
.support-mail-inner { height: calc(100% - 40px); overflow: hidden; padding: 16px 20px 20px }
.support-mail-received { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: #f5f6f8 }
.support-mail-received h3,
.support-mail-received p { margin: 0 }
.support-photo { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: #ffffff }
.support-photo > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #eef5fc; color: #0077e6 }
.support-photo > span:last-child { min-width: 0; display: grid }
.support-photo b { overflow: hidden; font-size: 13px; font-weight: 500; line-height: 16px; text-overflow: ellipsis; white-space: nowrap }
.support-mail-response { display: grid; gap: 10px; padding: 14px 4px 0 }
.support-mail-response > header { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.support-typed { min-height: 118px }
.support-label { min-height: 60px }
.support-mail-behind { z-index: 2; right: 12px; top: 12px; opacity: .38; filter: blur(3px); transform: translateX(22px) scale(.985) }
.support-order { z-index: 5; left: 30px; top: 92px; width: 640px; height: 430px }
.support-order-app,
.support-ticket-app { height: calc(100% - 40px); display: grid; grid-template-columns: 54px minmax(0,1fr) }
.support-order-app > nav,
.support-ticket-app > nav { display: grid; grid-template-rows: 34px 34px 34px minmax(0,1fr); justify-items: center; gap: 12px; padding: 14px 8px; background: #24334a; color: #ffffff }
.support-order-app > nav > b,
.support-order-app > nav > span,
.support-ticket-app > nav > b,
.support-ticket-app > nav > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px }
.support-order-app > nav > b,
.support-ticket-app > nav > b { background: #0077e6; font-size: 11px; font-weight: 500 }
.support-order-app > nav > span.active,
.support-ticket-app > nav > span.active { background: #ffffff; color: #0077e6 }
.support-order-app > section,
.support-ticket-app > section { min-width: 0; padding: 20px }
.support-order-app > section > header,
.support-ticket-app > section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px }
.support-order-app > section > header > span,
.support-ticket-app > section > header > span:first-child { min-width: 0; display: grid }
.support-order-app > section > header h3,
.support-ticket-app > section > header h3 { margin: 0 }
.support-order-app > section > header > i { width: 150px; height: 32px; border-radius: 10px; background: #eef5fc }
.support-order-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 72px; padding: 10px 12px; border-radius: 12px; background: #f5f6f8 }
.support-order-card > span:nth-of-type(2) { min-width: 0; display: grid }
.support-order-card b { font-size: 14px; font-weight: 500; line-height: 20px }
.support-order-card strong { min-height: 20px; padding: 2px 8px; border-radius: 6px; background: #caface; color: #15b042; font-size: 12px; font-weight: 500; line-height: 16px }
.support-product-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #ffffff; color: #0077e6 }
.support-order-scan { position: absolute; z-index: 3; inset: 0 0 auto; height: 26px; opacity: 0; background: linear-gradient(180deg,transparent,rgba(0,119,230,.24),transparent) }
.demo-support[data-beat="2"] .support-order-scan { animation: supportOrderScan .9s cubic-bezier(.22,1,.36,1) both }
@keyframes supportOrderScan { from { opacity: 0; transform: translateY(-22px) } 24% { opacity: 1 } to { opacity: 0; transform: translateY(68px) } }
.support-order-app dl { margin: 16px 0 0; display: grid }
.support-order-app dl > div { min-height: 40px; display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: center; gap: 12px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.06) }
.support-order-app dt { color: #777777; font-size: 13px; font-weight: 500; line-height: 16px }
.support-order-app dd { margin: 0; font-size: 14px; line-height: 20px }
.support-order-behind { z-index: 2; left: 12px; opacity: .38; filter: blur(3px); transform: translateX(-20px) scale(.985) }
.support-ticket { z-index: 5; right: 34px; top: 72px; width: 650px; height: 460px }
.support-checks { display: grid; gap: 8px }
.support-checks > span { min-height: 44px; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 10px; padding: 0 12px; border-radius: 10px; background: #f5f6f8 }
.support-checks i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #15b042; color: #ffffff; font-size: 12px; font-style: normal; opacity: 0; transform: scale(.7) }
.support-checks b { font-size: 13px; font-weight: 500; line-height: 16px }
.demo-support[data-beat="3"] .support-checks i { animation: supportCheck .42s cubic-bezier(.22,1,.36,1) calc(var(--support-step) * 110ms) forwards }
@keyframes supportCheck { to { opacity: 1; transform: scale(1) } }
.support-label-file { min-width: 0; display: grid; grid-template-columns: 40px minmax(0,1fr) 24px; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #eef5fc }
.support-label-file > span:nth-child(2) { min-width: 0; display: grid }
.support-label-file > span:first-child { color: #0077e6 }
.support-label-file > i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #15b042; color: #ffffff; font-style: normal }
.support-ticket-behind { z-index: 2; left: 12px; right: auto; opacity: .48; filter: blur(3px); transform: translateX(-24px) scale(.985) }
.support-result .support-mail { right: 18px; top: 12px }
.support-result .support-mail-received { gap: 4px; padding-block: 10px }
.support-result .support-mail-received > p,
.support-result .support-mail-received .support-photo { display: none }
.support-result .support-mail-response { gap: 8px; padding-top: 10px }
.support-result .support-typed { min-height: 104px }

/* Appels d’offres : notification, veille latérale, préparation puis envoi. */
.scene[data-beats="6"] { height: 660vh }
.tender-sources { left: 50%; top: 54px; width: 720px; height: 470px; transform: translateX(-50%) }
.tender-sources-app,
.tender-folder-app { height: calc(100% - 40px); display: grid; grid-template-columns: 56px minmax(0,1fr) }
.tender-sources-app > nav,
.tender-folder-app > nav { display: grid; grid-template-rows: 34px 34px 34px minmax(0,1fr); justify-items: center; gap: 12px; padding: 14px 8px; background: #24334a; color: #ffffff }
.tender-sources-app > nav > b,
.tender-sources-app > nav > span,
.tender-folder-app > nav > b,
.tender-folder-app > nav > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px }
.tender-sources-app > nav > b,
.tender-folder-app > nav > b { background: #0077e6; font-size: 11px; font-weight: 500 }
.tender-sources-app > nav > span.active,
.tender-folder-app > nav > span.active { background: #ffffff; color: #0077e6 }
.tender-sources-app > section,
.tender-folder-app > section { min-width: 0; padding: 22px 24px }
.tender-sources-app > section > header,
.tender-folder-app > section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px }
.tender-sources-app > section > header > span,
.tender-folder-app > section > header > span:first-child { min-width: 0; display: grid }
.tender-sources-app h3,
.tender-folder-app h3 { margin: 0 }
.tender-sources-app > section > header > i { width: 170px; height: 32px; border-radius: 10px; background: #eef5fc }
.tender-source-list { position: relative; overflow: hidden; display: grid; gap: 10px }
.tender-source-list > article { min-height: 72px; display: grid; grid-template-columns: 42px minmax(0,1fr) 22px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #f5f6f8 }
.tender-source-list > article > span:nth-child(2) { min-width: 0; display: grid }
.tender-source-list > article > i { width: 20px; height: 20px; border-radius: 50%; background: #e2e7ec }
.tender-source-logo { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #ffffff; color: #0077e6; font-size: 11px; font-weight: 500 }
.tender-source-scan { position: absolute; z-index: 3; inset: 0 0 auto; height: 30px; opacity: 0; background: linear-gradient(180deg,transparent,rgba(0,119,230,.26),transparent) }
.demo-tender[data-beat="1"] .tender-source-scan { animation: tenderSourceScan 1.3s cubic-bezier(.22,1,.36,1) both }
@keyframes tenderSourceScan { from { opacity: 0; transform: translateY(-24px) } 18% { opacity: 1 } 76% { opacity: 1 } to { opacity: 0; transform: translateY(226px) } }
.tender-sources-behind { z-index: 2; left: 14px; top: 88px; width: 610px; opacity: .38; filter: blur(3px); transform: translateX(-20px) scale(.985) }
.tender-watch { z-index: 5; right: 24px; top: 34px; width: 760px; height: 520px }
.tender-watch-app { height: calc(100% - 40px); display: grid; grid-template-columns: 244px minmax(0,1fr) }
.tender-watch-app > aside { padding: 22px 16px; background: #f5f6f8 }
.tender-watch-app > aside h3 { margin: 0 0 18px }
.tender-watch-app > aside > span { min-height: 68px; display: grid; grid-template-columns: 32px minmax(0,1fr) 22px; align-items: center; gap: 8px }
.tender-watch-app > aside > span > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #ffffff; color: #0077e6 }
.tender-watch-app > aside > span > span { min-width: 0; display: grid }
.tender-watch-app > aside > span > strong { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #15b042; color: #ffffff; font-size: 11px; opacity: 0; transform: scale(.7) }
.demo-tender[data-beat="2"] .tender-watch-app > aside > span > strong { animation: tenderCheck .42s cubic-bezier(.22,1,.36,1) calc(var(--tender-step) * 120ms) forwards }
@keyframes tenderCheck { to { opacity: 1; transform: scale(1) } }
.tender-watch-app > section { min-width: 0; padding: 22px 20px }
.tender-watch-app > section > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 22px }
.tender-watch-app > section > header > span { min-width: 0; display: grid }
.tender-watch-app > section > header h3 { margin: 0 }
.tender-watch-app > section > header > i { width: 100px; height: 32px; border-radius: 10px; background: #eef5fc }
.tender-result-card { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; background: #eef5fc }
.tender-result-card > span:nth-child(2) { min-width: 0; display: grid }
.tender-result-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: #ffffff; color: #0077e6 }
.tender-result-card dl { grid-column: 1 / -1; margin: 6px 0 0; display: grid }
.tender-result-card dl > div { min-height: 40px; display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: center; gap: 10px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.06) }
.tender-result-card dt { color: #777777; font-size: 13px; font-weight: 500 }
.tender-result-card dd { margin: 0 }
.tender-watch-behind { z-index: 2; left: 22px; right: auto; top: 52px; width: 800px; opacity: .34; filter: blur(4px); transform: translateX(-24px) scale(.985) }
.tender-phone { opacity: 1 }
.tender-notice-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #0077e6; color: #ffffff }
.tender-notice strong { white-space: normal }
.tender-opportunity { left: 24px; top: 84px; width: 500px; height: 390px }
.tender-opportunity-inner { padding: 20px }
.tender-opportunity-inner > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 18px }
.tender-opportunity-inner > header > span:first-child { min-width: 0; display: grid }
.tender-opportunity-inner h3 { margin: 0 }
.tender-opportunity-inner dl { margin: 0; display: grid }
.tender-opportunity-inner dl > div { min-height: 52px; display: grid; grid-template-columns: 120px minmax(0,1fr); align-items: center; gap: 10px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.06) }
.tender-opportunity-inner dt { color: #777777; font-size: 13px; font-weight: 500 }
.tender-opportunity-inner dd { margin: 0 }
.tender-form { z-index: 5; right: 24px; top: 36px; width: 650px; height: 520px }
.tender-form-inner { padding: 20px 22px }
.tender-form-inner > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px }
.tender-form-inner h3 { margin: 0 }
.tender-questions { display: grid; gap: 8px }
.tender-questions > span { min-height: 54px; display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: #f5f6f8 }
.tender-questions > span > i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #15b042; color: #ffffff; font-size: 11px; font-style: normal; opacity: 0; transform: scale(.7) }
.tender-questions > span > span { min-width: 0; display: grid; gap: 6px }
.tender-questions > span small { width: 76%; height: 6px; border-radius: 3px; background: #dfe3e8 }
.demo-tender[data-beat="4"] .tender-questions > span > i { animation: tenderCheck .42s cubic-bezier(.22,1,.36,1) calc(var(--tender-step) * 120ms) forwards }
.tender-form-files { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 14px }
.tender-form-files > span { min-width: 0; min-height: 40px; display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 8px; padding: 0 10px; border-radius: 10px; background: #eef5fc }
.tender-form-files > span > i { display: flex; color: #0077e6 }
.tender-form-files b { overflow: hidden; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap }
.tender-form-behind { z-index: 2; left: 18px; right: auto; top: 62px; width: 620px; opacity: .4; filter: blur(3px); transform: translateX(-18px) scale(.985) }
.tender-folder { z-index: 5; right: 24px; top: 48px; width: 680px; height: 500px }
.tender-folder-files { display: grid; gap: 8px }
.tender-folder-files > article { min-height: 48px; display: grid; grid-template-columns: 24px minmax(0,1fr) 22px; align-items: center; gap: 10px; padding: 0 12px; border-radius: 10px; background: #f5f6f8 }
.tender-folder-files > article > span { display: flex; color: #0077e6 }
.tender-folder-files b { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap }
.tender-folder-files > article > i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #15b042; color: #ffffff; font-size: 10px; font-style: normal; opacity: 0 }
.demo-tender[data-beat="5"] .tender-folder-files > article > i { animation: tenderCheck .4s cubic-bezier(.22,1,.36,1) calc(var(--tender-step,0) * 110ms) forwards }
.tender-folder-app > section > p { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 0; padding: 12px; border-radius: 10px; background: #eef5fc }
.tender-folder-app > section > p b { color: #15b042; font-size: 13px; font-weight: 500 }
.tender-flying-file { position: absolute; z-index: 9; left: 440px; top: calc(230px + var(--tender-step) * 54px); width: 96px; min-height: 54px; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 6px; border-radius: 8px; background: #ffffff; color: #0077e6; box-shadow: 0 14px 34px rgba(27,35,48,.16); font-style: normal; opacity: 0 }
.tender-flying-file b { max-width: 84px; overflow: hidden; color: #333333; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap }
.demo-tender[data-beat="5"] .tender-flying-file { animation: tenderFileDrop .72s cubic-bezier(.22,1,.36,1) calc(var(--tender-step) * 120ms) both }
@keyframes tenderFileDrop { 0% { opacity: 0; filter: blur(4px); transform: translate3d(-110px,0,0) scale(.88) } 24% { opacity: 1; filter: none } 82% { opacity: 1 } 100% { opacity: 0; transform: translate3d(280px,90px,0) scale(.42) } }
.tender-folder-behind { z-index: 2; left: 18px; right: auto; opacity: .36; filter: blur(4px); transform: translateX(-24px) scale(.985) }

/* Parcours final AO : six temps, infographies latérales et dépôt direct dans Mail. */
.tender-canvas { position: relative; width: 100%; height: 100%; overflow: hidden }
.tender-canvas > :is(.tender-sources-side,.tender-signal,.tender-prepared,.tender-email,.tender-phone) {
  opacity: 0; pointer-events: none; transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.tender-sources-side { z-index: 3; left: 20px; top: 116px; width: 398px; height: 350px; transform: translateX(-24px) }
.tender-sources-side .tender-sources-app { grid-template-columns: 48px minmax(0,1fr) }
.tender-sources-side .tender-sources-app > nav { padding-inline: 6px }
.tender-sources-side .tender-sources-app > section { padding: 16px }
.tender-sources-side .tender-sources-app > section > header { margin-bottom: 10px }
.tender-sources-side .tender-sources-app > section > header > i { display: none }
.tender-sources-side .tender-source-list { gap: 6px }
.tender-sources-side .tender-source-list > article { min-height: 58px; grid-template-columns: 34px minmax(0,1fr) 18px; gap: 9px; padding: 7px 9px }
.tender-sources-side .tender-source-logo { width: 32px; height: 32px; border-radius: 8px }
.demo-tender[data-beat="2"] .tender-source-scan { animation: tenderSourceScan 1.3s cubic-bezier(.22,1,.36,1) both }

.tender-signal { position: absolute; z-index: 4; right: 112px; top: 176px; width: 390px; min-height: 220px; display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: center; gap: 16px; padding: 24px; border-radius: 22px; background: #ffffff; box-shadow: 0 20px 54px rgba(27,35,48,.12); transform: translateX(26px) }
.tender-signal-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: #eef5fc; color: #0077e6 }
.tender-signal-reading { display: grid; gap: 10px }
.tender-signal-reading i { height: 8px; border-radius: 5px; background: #dfe4ea }
.tender-signal-reading i:nth-child(2) { width: 78% }
.tender-signal-reading i:nth-child(3) { width: 52% }
.tender-signal-found { display: none; gap: 4px }
.tender-signal-found > small { color: #15b042; font-weight: 500 }
.tender-signal-found > b { font-size: 16px; font-weight: 500; line-height: 20px }
.tender-signal-found > span { color: #777777 }
.tender-signal-match { width: max-content; max-width: 100%; display: flex; align-items: center; gap: 7px; margin-top: 14px; padding: 5px 9px; border-radius: 8px; background: #caface; color: #15b042; font-size: 13px; font-weight: 500; line-height: 16px }
.tender-signal-match i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #15b042; color: #fff; font-size: 10px; font-style: normal }
.demo-tender[data-beat="3"] .tender-signal { background: #f3fff3; box-shadow: 0 24px 58px rgba(21,176,66,.14) }
.demo-tender[data-beat="3"] .tender-signal-reading { display: none }
.demo-tender[data-beat="3"] .tender-signal-found { display: grid }

.tender-prepared { position: absolute; z-index: 4; left: 28px; top: 136px; width: 390px; padding: 18px; border-radius: 20px; background: #ffffff; box-shadow: 0 18px 48px rgba(27,35,48,.1); transform: translateX(-24px) }
.tender-prepared > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px }
.tender-prepared > header b { font-size: 16px; font-weight: 500; line-height: 20px }
.tender-prepared-inner { display: grid; gap: 8px }
.tender-prepared-file { min-width: 0; min-height: 64px; display: grid; grid-template-columns: 42px minmax(0,1fr) 22px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #f5f6f8 }
.tender-prepared-file > span:nth-child(2) { min-width: 0; display: grid; gap: 7px }
.tender-prepared-file > span:nth-child(2) b { overflow: hidden; font-size: 12px; font-weight: 500; line-height: 16px; text-overflow: ellipsis; white-space: nowrap }
.tender-file-paper { width: 40px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: #ffffff; color: #0077e6 }
.tender-file-skeleton { display: grid; gap: 5px }
.tender-file-skeleton i { height: 5px; border-radius: 3px; background: #dce2e8 }
.tender-file-skeleton i:last-child { width: 58% }
.tender-prepared-file > i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #15b042; color: #fff; font-size: 10px; font-style: normal; transform: scale(.72); opacity: 0; transition: opacity .3s ease-out, transform .35s cubic-bezier(.22,1,.36,1) }
.demo-tender:is([data-beat="4"],[data-beat="5"],[data-beat="6"]) .tender-prepared-file > i { opacity: 1; transform: scale(1) }

.tender-email { z-index: 5; right: 18px; top: 18px; width: 700px; height: 560px; transform: translateX(30px) }
.tender-email-inner { height: calc(100% - 40px); display: grid; grid-template-rows: auto auto minmax(132px,1fr) auto auto; gap: 10px; padding: 18px 20px 16px }
.tender-email-inner > header { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.tender-email-inner > header > b { font-size: 16px; font-weight: 500; line-height: 20px }
.tender-email-typed { min-height: 132px; padding: 14px 0; box-shadow: inset 0 1px 0 rgba(0,0,0,.06), inset 0 -1px 0 rgba(0,0,0,.06); white-space: pre-line }
.demo-tender .tender-email-files { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; opacity: var(--tender-attach,0); transform: translateY(calc((1 - var(--tender-attach,0)) * 10px)) }
.demo-tender .tender-email-files > article { min-width: 0; min-height: 68px; grid-template-columns: 28px minmax(0,1fr) 18px; gap: 8px; padding: 8px }
.demo-tender .tender-email-files > article > span:nth-child(2) { min-width: 0 }
.demo-tender .tender-email-files b { overflow-wrap: anywhere; white-space: normal; font-size: 11px; line-height: 14px }
.demo-tender .tender-email-files small { display: none }
.demo-tender .tender-email-files > article > i { width: 18px; height: 18px }

.demo-tender .tender-flying-file { --flight: var(--tender-flight,0); left: 352px; top: calc(240px + var(--tender-step) * 56px); width: 82px; min-height: 48px; animation: none !important; opacity: calc(sin(var(--flight) * 3.1416)); transform: translate3d(calc(var(--flight) * var(--tender-target-x)),calc(var(--flight) * var(--tender-target-y)),0) rotate(calc(var(--flight) * -2deg)) scale(calc(1 - var(--flight) * .48)) }
.tender-drag-cursor { position: absolute; z-index: 14; left: 0; top: 0; width: 27px; height: 33px; color: #333333; opacity: var(--tender-cursor-opacity,0); transform: translate3d(var(--tender-cursor-x,352px),var(--tender-cursor-y,240px),0) }
.tender-drag-cursor svg { width: 100%; height: 100%; fill: #ffffff; stroke: currentColor; stroke-width: 1.5; filter: drop-shadow(0 3px 5px rgba(27,35,48,.2)) }
.demo-tender[data-beat="6"] .tender-email-files > article { background: #f1fbf1 }
.tender-phone-home { position: absolute; left: 50%; bottom: 7px; width: 92px; height: 4px; border-radius: 3px; background: #1c1c1e; transform: translateX(-50%) }

.demo-tender[data-beat="1"] .tender-phone { opacity: 1; pointer-events: auto; transform: translateX(-50%) }
.demo-tender:is([data-beat="2"],[data-beat="3"]) .tender-phone { opacity: 0; transform: translate(-50%,420px) scale(.92) }
.demo-tender:is([data-beat="2"],[data-beat="3"]) .tender-sources-side { opacity: 1; transform: none; pointer-events: auto }
.demo-tender[data-beat="2"] .tender-signal { opacity: .72; transform: none }
.demo-tender[data-beat="3"] .tender-sources-side { opacity: .56 }
.demo-tender[data-beat="3"] .tender-signal { opacity: 1; transform: none; pointer-events: auto }
.demo-tender:is([data-beat="4"],[data-beat="5"],[data-beat="6"]) .tender-prepared { opacity: 1; transform: none; pointer-events: auto }
.demo-tender:is([data-beat="4"],[data-beat="5"],[data-beat="6"]) .tender-email { opacity: 1; transform: none; pointer-events: auto }
.demo-tender[data-beat="4"] .tender-email { opacity: .66 }
.demo-tender[data-beat="6"] .tender-prepared { opacity: .34; transform: translateX(-18px) scale(.985) }
.demo-tender[data-beat="6"] .tender-email { box-shadow: 0 30px 72px rgba(27,35,48,.15) }

/* Prospection : CRM minimaliste, sélection automatique, Mail en résultat. */
.crm-skeleton-app { height: calc(100% - 38px); display: grid; grid-template-columns: 64px minmax(0,1fr) }
.crm-skeleton-app > nav { min-height: 100%; display: grid; grid-template-rows: repeat(4,30px) minmax(0,1fr) 30px; align-items: center; justify-items: center; gap: 14px; padding: 14px 8px; background: #24334a; color: #ffffff }
.crm-skeleton-app > nav > b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #0077e6 }
.crm-skeleton-app > nav > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px }
.crm-skeleton-app > nav > span.active { background: #ffffff; color: #0077e6 }
.crm-skeleton-app > nav > i { width: 1px; min-height: 1px }
.crm-nav-avatar { background: rgba(255,255,255,.14); color: #ffffff; font-size: 10px; font-weight: 500 }
.crm-skeleton-app > section { min-width: 0; padding: 26px 24px }
.crm-skeleton-app > section > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px }
.crm-skeleton-app > section > header > span { display: grid }
.crm-skeleton-app > section h3 { margin: 0 }
.crm-skeleton-app > section > header i { width: 180px; height: 32px; border-radius: 10px; background: #eef5fc }
.crm-skeleton-list { position: relative; overflow: hidden; display: grid; gap: 10px }
.crm-reading-line { position: absolute; z-index: 3; inset: 0 0 auto; height: 28px; opacity: 0; background: linear-gradient(180deg,transparent,rgba(0,119,230,.2),transparent) }
.demo-outreach[data-beat="1"] .crm-reading-line { animation: crmRead 1s cubic-bezier(.22,1,.36,1) both }
@keyframes crmRead { from { opacity: 0; transform: translateY(-24px) } 22% { opacity: 1 } to { opacity: 0; transform: translateY(174px) } }
.crm-skeleton-row { height: 62px; display: grid; grid-template-columns: 38px minmax(0,1fr) 64px 22px; align-items: center; gap: 12px; padding: 0 12px; border-radius: 11px; background: #f5f6f8 }
.crm-person { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e3e7ec; color: #697482 }
.crm-state { width: 58px; height: 20px; border-radius: 6px; background: #e6ebf0 }
.crm-skeleton-row > b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #15b042; color: #ffffff; opacity: 0 }
.crm-skeleton-row.target { background: #e7f8e7 }
.crm-skeleton-row.target .crm-person { background: #caface; color: #15b042 }
.crm-skeleton-row.target > b { opacity: 1 }
.crm-lead-copy { min-width: 0; display: grid }
.crm-lead-copy b, .crm-lead-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.crm-lead-copy b { font-size: 13px; font-weight: 500; line-height: 16px }
.crm-window { height: 470px; min-height: 470px }
.outreach-input .crm-window { left: 50%; right: auto; width: 800px; transform: translateX(-50%) }
.crm-window-behind { z-index: 1; left: 40px; right: auto; top: 110px; width: 610px; opacity: .42; filter: blur(2.5px); transform: scale(.985) }
.outreach-email { z-index: 4; right: 34px; top: 54px; width: 680px; min-height: 500px; padding: 0; overflow: hidden }
.outreach-email-inner { padding: 20px 24px }
.outreach-email-inner > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px }
.outreach-email-inner > p { max-width: 58ch; margin: 18px 0 }
.outreach-provenance, .outreach-fact-labels { display: flex; flex-wrap: wrap; gap: 6px }
.outreach-provenance span, .outreach-fact-labels span { padding: 2px 6px; border-radius: 6px; background: #eef5fc; color: #0068c9; font-size: 12px; line-height: 16px }
.followup-card { z-index: 4; right: 36px; top: 38px; width: 700px; min-height: 520px; padding: 0; overflow: hidden }
.followup-mail-inner { padding: 20px 24px }
.followup-mail-inner > header { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 18px }
.followup-mail-inner > header > span:first-child { min-width: 0; display: grid }
.followup-mail-inner h3 { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap }
.followup-mail-inner .followup-draft { margin-bottom: 14px }

/* Devis : Mail, catalogue marchand, chiffrage et PDF sont quatre systèmes lisibles. */
.quote-merchant-window { left: 30px; top: 150px; width: 560px; height: 410px; overflow: hidden }
.merchant-app { height: calc(100% - 38px); display: grid; grid-template-columns: 54px minmax(0,1fr) }
.merchant-app > nav { display: grid; align-content: start; justify-items: center; gap: 14px; padding: 14px 8px; background: #f1eee8; color: #776b5b }
.merchant-app > nav > b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #d98b35; color: #ffffff }
.merchant-app > nav > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px }
.merchant-app > nav > span.active { background: #ffffff; color: #b66b1f }
.merchant-app > section { min-width: 0; padding: 24px 18px }
.merchant-app > section > header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 22px }
.merchant-app > section > header i { width: 48%; height: 30px; border-radius: 9px; background: #ece8e1 }
.merchant-app > section > header span { width: 96px; height: 30px; border-radius: 9px; background: #f5eee2 }
.merchant-list { position: relative; overflow: hidden; display: grid; gap: 10px }
.merchant-scan { position: absolute; z-index: 3; inset: 0 0 auto; height: 28px; opacity: 0; background: linear-gradient(180deg,transparent,rgba(217,139,53,.23),transparent) }
.demo-quote[data-beat="2"] .merchant-scan { animation: merchantScan 1.45s cubic-bezier(.22,1,.36,1) both }
@keyframes merchantScan { from { opacity: 0; transform: translateY(-24px) } 16% { opacity: 1 } 78% { opacity: 1 } to { opacity: 0; transform: translateY(200px) } }
.merchant-row { height: 58px; display: grid; grid-template-columns: 34px minmax(0,1fr) 22px; align-items: center; gap: 10px; padding: 0 10px; border-radius: 11px; background: #f6f5f2 }
.merchant-row.target { background: #fff2df }
.merchant-thumb { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #ece7df; color: #8b7c69 }
.merchant-row > b { color: #b66b1f; font-size: 13px; font-weight: 500 }
.quote-request .demo-email-object { z-index: 4; left: 50%; top: 48px; width: 700px; transform: translateX(-50%) }
.quote-scan .quote-merchant-window { z-index: 3; left: 20px; top: 92px; width: 400px; box-shadow: 0 24px 58px rgba(27,35,48,.12) }
.quote-scan .quote-email-scan { z-index: 4; right: 20px; top: 48px; width: 650px }
.quote-email-inner { padding: 20px 24px 24px }
.quote-email-inner h3 { margin: 20px 0 8px }
.quote-email-inner > p { max-width: 62ch; margin: 0 0 20px }
.quote-final-mail { z-index: 4; right: 30px; top: 48px; width: 680px; min-height: 500px }
.quote-final-inner { padding: 20px 24px 24px }
.quote-final-inner > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px }
.quote-final-inner > p { max-width: 58ch; margin: 18px 0 }
.quote-pdf-file { min-height: 64px; display: grid; grid-template-columns: 40px minmax(0,1fr) 24px; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 18px; border-radius: 10px; background: #f5f6f8 }
.quote-pdf-file > span:nth-child(2) { min-width: 0; display: grid }
.quote-pdf-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500 }
.quote-pdf-file small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.quote-pdf-file > i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #15b042; color: #ffffff; font-style: normal }
.demo-quote[data-beat="4"] .quote-pdf-file { animation: quoteFileIn .5s cubic-bezier(.22,1,.36,1) both }
@keyframes quoteFileIn { from { opacity: 0; filter: blur(8px); transform: translateY(-12px) scale(.98) } to { opacity: 1; filter: none; transform: none } }

@media (max-width: 699px) {
  #view-services .scene[data-beats="4"] { height: 580svh }
  #view-services .appointment-agenda { display: none; background: #ffffff }
  #view-services .demo-appointment[data-beat="2"] .appointment-agenda { display: block; visibility: visible; opacity: 1 !important }
  #view-services .contract-input .contract-library { display: none }
  #view-services .contract-inbox, #view-services .contract-scan-view .contract-library { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; transform: none; border-radius: 0; box-shadow: none }
  #view-services .contract-inbox-inner { padding: 18px 14px }
  #view-services .contract-mail-files { grid-template-columns: minmax(0,1fr) }
  #view-services .contract-scan-view .contract-inbox { display: none }
  #view-services .contract-library-inner > header { padding: 16px 12px 10px }
  #view-services .contract-email-inner { padding: 16px 12px }
  #view-services .crm-window-behind { display: none }
  #view-services .outreach-input .crm-window { left: 0; width: 100%; transform: none }
  #view-services .crm-skeleton-app { grid-template-columns: 1fr }
  #view-services .crm-skeleton-app > nav { display: none }
  #view-services .crm-skeleton-app > section { padding: 20px 12px }
  #view-services .crm-skeleton-app > section > header i { width: 130px }
  #view-services .crm-skeleton-row { grid-template-columns: 36px minmax(0,1fr) 48px 22px; gap: 8px; padding-inline: 8px }
  #view-services .outreach-email, #view-services .followup-card { padding: 0 }
  #view-services .outreach-email-inner, #view-services .followup-mail-inner { padding: 16px 12px }
  #view-services .outreach-provenance, #view-services .followup-provenance { display: grid }
  #view-services .quote-request .quote-merchant-window,
  #view-services .quote-scan :is(.quote-email-scan,.quote-final-mail) { display: none }
  #view-services .quote-request .demo-email-object, #view-services .quote-scan .quote-merchant-window { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; transform: none; border-radius: 0; box-shadow: none }
  #view-services .quote-result .quote-merchant-window { display: none }
  #view-services .quote-final-mail { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; border-radius: 0; box-shadow: none }
  #view-services .quote-final-inner { padding: 16px 12px }
  #view-services .quote-pdf-file { grid-template-columns: 36px minmax(0,1fr) 22px }
  #view-services .quote-pdf-file small { white-space: normal }
  #view-services .merchant-app { grid-template-columns: 1fr }
  #view-services .merchant-app > nav { display: none }
  #view-services .quote-email-inner { padding: 16px 12px }

  /* Mobile raconte les plans dans l'ordre : interface reçue, sources
     lues par l'agent, puis résultat. Aucun plan flouté ne reste sous le
     plan actif, même pendant une transition de beat. */
  #view-services .contract-input .contract-library-behind,
  #view-services .contract-scan-view .contract-inbox-behind,
  #view-services .contract-result .contract-sheet-behind { display: none }
  #view-services .demo-accounting[data-usecase="overdue"][data-beat="2"] .overdue-mail {
    visibility: hidden; opacity: 0; filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .property-source-scan, .appointment-scan, .contract-scan, .crm-reading-line, .merchant-scan { animation: none !important }
  .quote-pdf-file { animation: none !important }
}

/* ══════════════ U. ENVOIS AGENT, IMESSAGE ET SYSTÈMES MÉTIER ══════════════ */
.agent-send-state,
.property-send-state {
  position: relative; display: inline-grid; place-items: center; min-width: 82px; min-height: 20px;
  padding: 2px 6px; border-radius: 6px; background: #eef5fc; color: #0068c9;
  font-size: 13px; font-weight: 500; line-height: 16px; white-space: nowrap;
  transition: background .22s cubic-bezier(.23,1,.32,1), color .22s cubic-bezier(.23,1,.32,1);
}
.agent-send-state > span,
.property-send-state > span { grid-area: 1 / 1; transition: opacity .2s cubic-bezier(.23,1,.32,1), filter .2s cubic-bezier(.23,1,.32,1) }
.agent-send-state > span:last-child,
.property-send-state > span:last-child { opacity: 0; filter: blur(3px) }
.demo-stage[data-sent="1"] .agent-send-state,
.agent-send-state.is-sent,
.property-demo[data-sent="1"] .property-send-state { background: #caface; color: #15b042 }
.demo-stage[data-sent="1"] .agent-send-state > span:first-child,
.agent-send-state.is-sent > span:first-child,
.property-demo[data-sent="1"] .property-send-state > span:first-child { opacity: 0; filter: blur(3px) }
.demo-stage[data-sent="1"] .agent-send-state > span:last-child,
.agent-send-state.is-sent > span:last-child,
.property-demo[data-sent="1"] .property-send-state > span:last-child { opacity: 1; filter: none }
.agent-typed-body { min-height: 150px; padding: 16px 0; white-space: pre-line; font-size: 14px; line-height: 20px }
.agent-typed-body [data-agent-typing].is-typing::after,
[data-property-typed].is-typing::after,
[data-appointment-typed].is-typing::after {
  content: ""; display: inline-block; width: 1px; height: 14px; margin-left: 2px;
  background: #0077e6; vertical-align: -2px; animation: agentCaret .65s steps(1,end) infinite;
}
@keyframes agentCaret { 0%,48% { opacity: 1 } 49%,100% { opacity: 0 } }
.agent-mail-attachment,
.agent-mail-files > article {
  min-height: 56px; display: grid; grid-template-columns: 36px minmax(0,1fr) 22px; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; background: #f5f6f8;
}
.agent-mail-attachment > span:nth-child(2),
.agent-mail-files > article > span:nth-child(2) { min-width: 0; display: grid }
.agent-mail-attachment b,
.agent-mail-files b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; line-height: 16px }
.agent-mail-attachment small,
.agent-mail-files small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.agent-mail-attachment > i,
.agent-mail-files > article > i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #15b042; color: #ffffff; font-style: normal }
.agent-mail-files { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px }
.demo-outreach:not([data-sent="1"]) .agent-mail-attachment,
.demo-contract:not([data-sent="1"]) .agent-mail-files { opacity: 0; transform: translateY(10px); filter: blur(3px) }
.agent-mail-attachment,
.agent-mail-files { transition: opacity .28s cubic-bezier(.23,1,.32,1), transform .32s cubic-bezier(.23,1,.32,1), filter .28s cubic-bezier(.23,1,.32,1) }

/* Indicateur Messages fidèle au motif iOS : bulle, trois points et queue en deux volumes. */
.imessage-typing-indicator {
  position: relative; display: none; align-items: center; justify-content: center; gap: 5px;
  justify-self: start; width: 66px; height: 42px; margin: 2px 0 8px 10px;
  border-radius: 22px; border-bottom-left-radius: 14px; background: #e9e9eb;
}
.imessage-typing-indicator::before,
.imessage-typing-indicator::after { content: ""; position: absolute; border-radius: 50%; background: #e9e9eb }
.imessage-typing-indicator::before { left: -7px; bottom: -3px; width: 16px; height: 16px }
.imessage-typing-indicator::after { left: -12px; bottom: -9px; width: 8px; height: 8px }
.imessage-typing-indicator i { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: #a7a7aa; animation: imessageDot .9s ease-in-out infinite }
.imessage-typing-indicator i:nth-child(2) { animation-delay: .12s }
.imessage-typing-indicator i:nth-child(3) { animation-delay: .24s }
@keyframes imessageDot { 0%,60%,100% { opacity: .38; transform: translateY(1px) } 30% { opacity: 1; transform: translateY(-1px) } }
.property-demo[data-typing="indicator"] .imessage-typing-indicator,
.demo-appointment[data-typing="indicator"] .imessage-typing-indicator { display: flex }
.property-demo[data-typing="indicator"] .property-typed-bubble,
.demo-appointment[data-typing="indicator"] .appointment-bubble-out { display: none }
.property-demo[data-typing="indicator"] .property-message-files,
.property-demo[data-typing="indicator"] .property-delivery,
.demo-appointment[data-typing="indicator"] .appointment-delivery { opacity: 0 }

/* Conversation immobilière : chrome iMessage et pièces jointes raccordées au message. */
.property-imessage-head { display: grid; grid-template-columns: 30px minmax(0,1fr) 30px; align-items: center; min-height: 72px; padding: 8px 12px 10px !important }
.imessage-back { color: #007aff; font-size: 30px; font-weight: 300; line-height: 30px }
.imessage-contact { min-width: 0; display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 8px; justify-self: center }
.property-imessage-head .phone-who { gap: 1px }
.property-imessage-head .phone-who b { color: #1c1c1e; font-size: 14px; font-weight: 500; line-height: 18px }
.property-imessage-head .phone-who span { max-width: 174px; color: #8e8e93; font-size: 11px; line-height: 14px }
.imessage-info { display: grid; place-items: center; justify-self: end; width: 24px; height: 24px; border-radius: 50%; background: #eef5fc; color: #0077e6; font-size: 13px; font-weight: 500 }
.property-question .b { justify-self: start; border-radius: 18px 18px 18px 5px }
.property-typed-bubble { justify-self: end; margin-left: auto !important; border-radius: 18px 18px 5px 18px; white-space: pre-wrap }
.property-typed-bubble [data-property-typed].is-typing::after { background: rgba(255,255,255,.92) }
.property-message-files {
  width: min(88%, 292px); display: grid; justify-items: stretch; gap: 8px; justify-self: end; margin: 0; padding: 0;
  border-radius: 0; background: transparent;
  opacity: var(--property-file,0); transform: translateY(calc((1 - var(--property-file,0)) * 10px));
}
.property-message-files button {
  box-sizing: border-box; width: 100%; height: 68px !important; min-height: 68px !important; overflow: hidden;
  display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 11px;
  padding: 10px 12px !important; border: 0; border-radius: 17px; background: #e9e9eb; color: #1c1c1e; text-align: left; cursor: pointer; box-shadow: none;
}
.property-message-files button > span:first-child { display: grid; place-items: center; width: 42px; height: 48px; border-radius: 10px; background: #ffffff; color: #007aff }
.property-message-files button > span:last-child { min-width: 0; display: grid; align-content: center; gap: 2px; overflow: hidden }
.property-message-files b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; line-height: 17px }
.property-message-files small { display: block; overflow: hidden; color: #8e8e93; font-size: 11px; line-height: 15px; text-overflow: ellipsis; white-space: nowrap }
.property-delivery,
.appointment-delivery { position: relative; min-height: 16px; margin: 4px 4px 0; color: #777777; font-size: 12px; line-height: 16px; text-align: right }
.property-delivery span,
.appointment-delivery span { position: absolute; right: 0; top: 0; transition: opacity .2s cubic-bezier(.23,1,.32,1), filter .2s cubic-bezier(.23,1,.32,1) }
.property-delivery span:last-child,
.appointment-delivery span:last-child { opacity: 0; filter: blur(3px) }
.property-demo[data-sent="1"] .property-delivery span:first-child,
.demo-appointment[data-sent="1"] .appointment-delivery span:first-child { opacity: 0; filter: blur(3px) }
.property-demo[data-sent="1"] .property-delivery span:last-child,
.demo-appointment[data-sent="1"] .appointment-delivery span:last-child { opacity: 1; filter: none }
.property-email-window .email-reader { overflow-x: hidden; padding: 26px 30px 34px }
.property-email-window .email-thread { width: min(calc(100% - 8px), 560px); margin-inline: auto }
.property-email-window .email-thread,
.property-email-draft,
.property-email-draft > * { min-width: 0 }
.property-email-draft { padding: 20px 24px 22px; gap: 14px }
.property-email-draft .email-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px }
.property-email-draft .email-fields { gap: 8px; padding-bottom: 14px }
.property-email-draft .email-fields > div { grid-template-columns: 54px minmax(0,1fr) }
.property-email-draft .email-fields dd { min-width: 0; overflow-wrap: anywhere }
.property-email-typed { min-height: 112px; padding: 4px 0 14px; white-space: pre-line }
.property-email-draft .email-attachments {
  opacity: var(--property-file,0); filter: blur(calc((1 - var(--property-file,0)) * 3px));
  transform: translateY(calc((1 - var(--property-file,0)) * 12px));
}
.property-email-draft .email-attachment-list { display: grid; padding: 0 }
.property-email-draft .email-attachment {
  box-sizing: border-box; width: 100%; height: auto !important; min-height: 72px !important; overflow: hidden;
  padding: 10px 12px !important; border: 0; border-radius: 12px; background: #f5f6f8; text-align: left; cursor: pointer;
}
.property-email-draft .email-attachment-icon { width: 42px; height: 46px; display: grid; place-items: center; border-radius: 9px; background: #eef5fc; color: #0077e6 }
.property-email-draft .email-attachment-name { font-size: 13px; line-height: 16px }
.property-email-draft .email-attachment-meta { font-size: 12px; line-height: 16px }
.property-action-state { padding-top: 0 }
.property-send-state > span { visibility: visible }
.property-demo[data-sent="1"] .property-send-state > span:first-child { visibility: hidden }
.property-demo:not([data-sent="1"]) .property-send-state > span:last-child { visibility: hidden }

/* Le DPE suit le même geste que la facture comptable : fichier détaché,
   déplacement lisible, puis réduction dans la zone de pièce jointe. */
.property-flying-file {
  --flight: var(--property-flight,0); position: absolute; z-index: 12; left: 266px; top: 300px;
  width: 88px; height: 116px; display: grid; place-items: center; align-content: center; gap: 8px;
  background: #ffffff; color: #0077e6; box-shadow: 0 18px 44px rgba(27,35,48,.2); font-style: normal;
  opacity: calc(sin(var(--flight) * 3.1416));
  transform: translate3d(calc(var(--flight) * 330px), calc(var(--flight) * 150px), 0) scale(calc(1 - var(--flight) * .55));
}
.property-flying-file b { color: #333333; font-size: 11px; font-weight: 500; line-height: 16px }

/* Planning hebdomadaire skeleton : une grille, aucun détail concurrent au message. */
.appointment-agenda { left: 20px; top: 138px; width: 400px; padding: 16px }
.appointment-agenda > header > span { display: grid }
.appointment-week { overflow: hidden; padding-top: 12px }
.appointment-days,
.appointment-calendar-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px }
.appointment-days { margin-bottom: 8px }
.appointment-days b { color: #777777; text-align: center; font-size: 12px; font-weight: 500; line-height: 16px }
.appointment-calendar-grid i { height: 34px; border-radius: 8px; background: #eceff3 }
.appointment-calendar-grid i.is-free { background: #caface; box-shadow: inset 0 0 0 1px rgba(21,176,66,.14) }
.appointment-scan { inset: 72px 16px auto !important }
@keyframes appointmentScan { from { opacity: 0; transform: translateY(-18px) } 24% { opacity: 1 } to { opacity: 0; transform: translateY(178px) } }
.appointment-answer .imessage-typing-indicator { justify-self: start }
.appointment-email-typed { min-height: 120px }
.appointment-invite { opacity: var(--appointment-file,0); transform: translateY(calc((1 - var(--appointment-file,0)) * 10px)); transition: opacity .25s cubic-bezier(.23,1,.32,1), transform .3s cubic-bezier(.23,1,.32,1) }
.appointment-email-window { right: 20px; top: 0; width: min(700px, calc(100% - 464px)); height: 568px }
.appointment-email-window > .acct-macbar { position: sticky; z-index: 4; top: 0 }
.appointment-client-accept { opacity: 0; will-change: opacity, transform }
.appointment-email-accept { opacity: 0; display: grid; gap: 8px; margin: -8px 22px 18px 46px; padding: 12px 16px; border-radius: 12px; background: #f5f6f8; will-change: opacity, transform }
.appointment-email-accept p { margin: 0; font-size: 14px; line-height: 20px }
.demo-appointment[data-beat="4"] .appointment-email-received {
  max-height: 0; margin-block: 0; padding-block: 0; overflow: hidden; opacity: 0;
  transform: translateY(-10px); transition: max-height .5s cubic-bezier(.22,1,.36,1), margin .5s cubic-bezier(.22,1,.36,1), padding .5s cubic-bezier(.22,1,.36,1), opacity .35s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.appointment-calendar-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #168ff2; color: #ffffff }
.appointment-inline-notice { position: absolute; z-index: 9; left: 10px; right: 10px; top: 48px; min-height: 78px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: rgba(246,246,248,.92); box-shadow: 0 14px 34px rgba(27,35,48,.18); backdrop-filter: blur(18px); opacity: 0; transform-origin: top center; will-change: opacity, transform }
.appointment-inline-notice > span:last-child { min-width: 0; display: grid }
.appointment-inline-notice > span:last-child > span { display: flex; justify-content: space-between; gap: 8px }
.appointment-inline-notice b,
.appointment-inline-notice strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 17px }
.appointment-inline-notice strong { font-weight: 600 }
.appointment-inline-notice time,
.appointment-inline-notice small { color: #696a70; font-size: 11px; line-height: 15px }
.demo-appointment[data-beat="4"] .appointment-calendar-grid .is-choice { position: relative; background: #ff3b30; box-shadow: inset 0 0 0 1px rgba(168,18,10,.18) }
.demo-appointment[data-beat="4"] .appointment-calendar-grid .is-choice::after { content: "✓"; position: absolute; inset: 50% auto auto 50%; color: #ffffff; font-size: 13px; font-style: normal; font-weight: 600; transform: translate(-50%,-50%) }

/* Catalogue marchand : une grille shopping skeleton plutôt qu’une table de lignes. */
.demo-quote > .channel-picker { position: relative; z-index: 8; height: 40px }
.quote-panel { position: absolute; inset: 44px 0 0; min-width: 0 }
.quote-panel[hidden] { display: none }
.quote-message-phone { right: 82px; top: 0; height: 568px }
.quote-message-phone .demo-phone-screen { position: relative; grid-template-rows: 44px auto minmax(0,1fr); gap: 0; padding: 0 0 14px }
.quote-iphone-status { display: grid; grid-template-columns: 1fr 96px 1fr; align-items: center; min-height: 44px; padding: 0 14px; color: #1c1c1e; font-size: 11px }
.quote-iphone-status > b { font-size: 11px; font-weight: 500 }
.quote-dynamic-island { width: 86px; height: 25px; justify-self: center; border-radius: 16px; background: #09090b }
.quote-status-icons { justify-self: end; display: flex; align-items: center; gap: 5px }
.quote-status-icons > i:first-child { width: 14px; height: 10px; background: linear-gradient(to right, currentColor 2px,transparent 2px 4px,currentColor 4px 7px,transparent 7px 9px,currentColor 9px 13px); clip-path: polygon(0 100%,0 70%,30% 70%,30% 45%,60% 45%,60% 20%,100% 20%,100% 100%) }
.quote-status-icons > i:nth-child(2) { width: 13px; height: 9px; border: 2px solid currentColor; border-top-color: transparent; border-left-color: transparent; border-radius: 50%; transform: rotate(45deg) translateY(-2px) }
.quote-status-icons > i:last-child { width: 17px; height: 8px; border: 1.5px solid currentColor; border-radius: 3px; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 8px currentColor }
.quote-phone-head { grid-template-columns: 28px minmax(0,1fr) 28px; align-items: center; gap: 6px; min-height: 68px; padding: 6px 12px 10px !important }
.quote-iphone-contact { min-width: 0; display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 8px; justify-self: center }
.quote-iphone-contact > span:last-child { min-width: 0; display: grid }
.quote-iphone-back { color: #007aff; font-size: 30px; font-weight: 300; line-height: 30px }
.quote-iphone-info { width: 24px; height: 24px; display: grid; place-items: center; justify-self: end; border-radius: 50%; background: #eef5fc; color: #0077e6; font-size: 13px; font-style: normal; font-weight: 500 }
.quote-phone-head b { font-size: 16px !important; line-height: 20px }
.quote-iphone-home { position: absolute; z-index: 5; left: 50%; bottom: 6px; width: 92px; height: 4px; border-radius: 3px; background: #1c1c1e; transform: translateX(-50%) }
.quote-phone-thread { min-height: 0; overflow: hidden; display: grid; align-content: start; gap: 10px; padding: 12px 14px 18px }
.quote-phone-time { margin: 0; color: #777777; text-align: center; font-size: 13px; font-weight: 500; line-height: 16px }
.quote-phone-user,
.quote-phone-agent { width: fit-content; max-width: 92%; display: grid; gap: 8px; padding: 10px 12px; border-radius: 18px }
.quote-phone-user { justify-self: end; border-bottom-right-radius: 6px; background: #0077e6; color: #ffffff }
.quote-phone-agent { justify-self: start; border-bottom-left-radius: 6px; background: #e9e9eb; color: #333333 }
.quote-phone-user > p,
.quote-phone-agent > p { margin: 0; font-size: 14px; line-height: 19px }
.quote-voice-message { min-width: 0; display: grid; gap: 9px }
.quote-voice-player { min-width: 0; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 34px }
.quote-voice-play { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #ffffff; color: #0077e6; font-size: 11px; line-height: 1; padding-left: 2px }
.quote-voice-wave { min-width: 0; height: 32px; display: flex; align-items: center; gap: 2px; overflow: hidden }
.quote-voice-wave i { width: 2px; height: var(--voice-height); flex: 0 0 2px; border-radius: 2px; background: rgba(255,255,255,.96); transform: scaleY(.55); transform-origin: center }
.demo-quote[data-beat="1"] .quote-message-request .quote-voice-wave i { animation: quoteVoiceWave .82s cubic-bezier(.22,1,.36,1) calc(var(--voice-step) * 18ms) both }
@keyframes quoteVoiceWave { 0% { opacity: .45; transform: scaleY(.34) } 48% { opacity: 1; transform: scaleY(1) } 100% { opacity: .78; transform: scaleY(.62) } }
.quote-voice-player time { color: rgba(255,255,255,.72); font-size: 11px; line-height: 14px }
.quote-voice-transcript { padding-top: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.22) }
.quote-voice-transcript small { display: block; margin-bottom: 3px; color: rgba(255,255,255,.72); font-size: 11px; line-height: 14px }
.quote-voice-transcript p { margin: 0; color: #ffffff; font-size: 11px; line-height: 15px }
.quote-message-result .quote-voice-transcript { display: none }
.quote-phone-file { min-width: 0; display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 8px; padding: 8px; border-radius: 10px }
.quote-phone-file > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px }
.quote-phone-file > span:last-child { min-width: 0; display: grid }
.quote-phone-file b { overflow: hidden; font-size: 12px; font-weight: 500; line-height: 16px; text-overflow: ellipsis; white-space: nowrap }
.quote-phone-file small { overflow: hidden; font-size: 11px; line-height: 14px; text-overflow: ellipsis; white-space: nowrap }
.quote-phone-source-file { background: rgba(255,255,255,.16) }
.quote-phone-source-file > span:first-child { background: rgba(255,255,255,.16); color: #ffffff }
.quote-phone-source-file small { color: rgba(255,255,255,.76) }
.quote-phone-pdf { background: #ffffff }
.quote-phone-pdf > span:first-child { background: #eef5fc; color: #0077e6 }
.quote-phone-delivery { justify-self: start; margin: -4px 0 0 10px }
.quote-message-phone-behind { opacity: 1; filter: none; transform: none }
.quote-message-scan .quote-merchant-final { top: 82px }
.quote-message-result .quote-merchant-behind { opacity: .56; filter: none; transform: translateX(-12px) scale(.98) }
.quote-message-result .quote-phone-agent,
.quote-message-result .quote-phone-delivery { opacity: var(--quote-reply,0); transform: translateY(calc((1 - var(--quote-reply,0)) * 12px)); transition: opacity .12s linear, transform .12s linear }
.merchant-grid { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px }
.merchant-product { position: relative; min-width: 0; min-height: 156px; display: grid; grid-template-rows: 78px auto 20px; gap: 9px; padding: 10px; border-radius: 12px; background: #f6f5f2 }
.merchant-product.target { background: #fff2df }
.merchant-visual { display: grid; place-items: center; border-radius: 9px; background: #ebe6de; color: #8b7c69 }
.merchant-product .acct-lines { align-content: start }
.merchant-product > b { color: #b66b1f; font-size: 13px; font-weight: 500 }
.merchant-scan { z-index: 8; inset: 0 0 auto !important; width: 100%; height: 34px; pointer-events: none; background: linear-gradient(180deg,transparent,rgba(0,119,230,.08) 18%,rgba(0,119,230,.28) 52%,rgba(0,119,230,.08) 82%,transparent) }
.demo-quote[data-beat="2"] .merchant-scan { animation: merchantScan 1.45s cubic-bezier(.22,1,.36,1) both }
.quote-merchant-final { z-index: 3; left: 20px; top: 92px; width: 400px; height: 400px; opacity: 1; filter: none; transform: none }
.quote-merchant-final .merchant-app { grid-template-columns: 48px minmax(0,1fr) }
.quote-merchant-final .merchant-app > section { padding: 18px 12px }
.quote-merchant-final .merchant-grid { grid-template-columns: repeat(2,minmax(0,1fr)) }
.quote-final-mail { right: 20px; top: 10px; width: 650px; height: 600px; min-height: 600px; overflow: hidden }
.quote-final-thread { height: calc(100% - 38px); overflow: hidden }
.quote-final-received { display: grid; gap: 8px; margin: 14px 20px 0; padding: 12px 14px; border-radius: 12px; background: #f5f6f8 }
.quote-final-received h3,
.quote-final-received p { margin: 0 }
.quote-final-received h3 { font-size: 16px; font-weight: 500; line-height: 20px }
.quote-final-received p { font-size: 13px; line-height: 18px }
.quote-final-received-files { display: flex; min-width: 0; gap: 8px }
.quote-final-received-files > span { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; background: #ffffff; color: #777777 }
.quote-final-received-files b { overflow: hidden; color: #333333; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; line-height: 16px }
.quote-final-inner {
  padding: 14px 20px 18px; opacity: var(--quote-reply,0);
  filter: blur(calc((1 - var(--quote-reply,0)) * 5px));
  transform: translateY(calc((1 - var(--quote-reply,0)) * 12px));
}
.quote-typed { min-height: 150px }
.quote-pdf-file {
  opacity: var(--quote-flight,0); filter: blur(calc((1 - var(--quote-flight,0)) * 3px));
  transform: translateY(calc((1 - var(--quote-flight,0)) * 12px));
  animation: none !important;
}
.quote-flight-file {
  position: absolute; z-index: 7; left: 420px; top: 300px; width: 58px; height: 72px;
  display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 7px; background: #ffffff; color: #0077e6;
  box-shadow: 0 14px 34px rgba(27,35,48,.16); font-style: normal;
  opacity: calc(var(--quote-flight,0) * (1 - var(--quote-flight,0)) * 4);
  transform: translate3d(calc(var(--quote-flight,0) * 220px), calc(var(--quote-flight,0) * 130px), 0) scale(calc(1 - var(--quote-flight,0) * .25));
}
.quote-flight-file b { color: #777777; font-size: 10px; font-weight: 500 }

/* Padding Mail uniforme et feux macOS stables. */
.acct-lights { flex-direction: row !important; align-items: center; white-space: nowrap }
.acct-lights i { display: block; flex: 0 0 auto }
.outreach-email-inner,
.followup-mail-inner,
.contract-email-inner { padding: 20px 24px 24px }
.outreach-email-inner .agent-typed-body { min-height: 210px }

@media (max-width: 699px) {
  #view-services .stage-sticky.has-metier-selection { height: 100%; grid-template-rows: 40px minmax(0,1fr); gap: 6px }
  #view-services .stage-sticky.has-metier-selection #stage-slot { height: auto; min-height: 0 }
  #view-services .stage-sticky.has-metier-selection #stage-slot > :is(.demo-stage,.phone-deck) { height: 100% }
  #view-services .metier-selection { width: 100%; height: 40px; margin: 0 }
  #view-services .metier-selection-card { max-width: 100%; box-shadow: 0 6px 18px rgba(27,35,48,.08) }
  #view-services .property-imessage-head { min-height: 68px }
  #view-services .property-thread { padding: 10px 14px 22px }
  #view-services .property-message-files { width: 88% }
  #view-services .property-email-window .email-reader { padding: 14px 16px 28px }
  #view-services .property-email-window .email-thread { width: 100% }
  #view-services .property-email-draft { padding: 16px }
  #view-services .property-email-draft .email-head { grid-template-columns: minmax(0,1fr) auto; justify-items: stretch }
  #view-services .property-email-draft .email-attachment-copy { align-content: center; gap: 2px }
  #view-services .property-email-typed { min-height: 118px }
  #view-services .appointment-agenda { padding: 14px 12px }
  #view-services .appointment-calendar-grid i { height: 40px }
  #view-services .appointment-phone { inset: 2px auto 2px 50%; width: 286px; height: calc(100% - 4px); padding: 7px; border-radius: 46px; background: linear-gradient(145deg,#2a2b2f,#08090b 58%,#24252a); box-shadow: 0 24px 54px rgba(17,22,31,.24); transform: translateX(-50%) }
  #view-services .appointment-phone .demo-phone-screen { border-radius: 39px; padding: 0 0 14px }
  #view-services .appointment-email-draft { padding: 14px 12px; margin-inline: 8px }
  #view-services .appointment-email-accept { margin: -4px 8px 12px; padding: 10px 12px }
  #view-services .appointment-email-typed { min-height: 170px }
  #view-services .agent-typed-body { font-size: 14px; line-height: 20px }
  #view-services .agent-mail-files { grid-template-columns: minmax(0,1fr) }
  #view-services .quote-merchant-final { display: none }
  #view-services .quote-flight-file { display: none }
  #view-services .quote-typed { min-height: 280px }
  #view-services .outreach-email-inner,
  #view-services .followup-mail-inner,
  #view-services .contract-email-inner,
  #view-services .quote-final-inner { padding: 16px 14px }
  #view-services .quote-final-thread { height: calc(100% - 30px) }
  #view-services .quote-final-received { margin: 10px 12px 0; padding: 10px 12px }
  #view-services .quote-final-received-files > span:last-child { display: none }
  #view-services .quote-typed { min-height: 210px }
  #view-services .merchant-grid { grid-template-columns: repeat(2,minmax(0,1fr)) }
  #view-services .merchant-product { min-height: 144px }
  #view-services .demo-quote > .channel-picker { height: 52px; margin: 0 }
  #view-services .quote-panel { inset: 52px 0 0 }
  #view-services .quote-message-phone { inset: 2px auto 2px 50%; width: 286px; height: calc(100% - 4px); padding: 7px; border-radius: 46px; background: linear-gradient(145deg,#2a2b2f,#08090b 58%,#24252a); box-shadow: 0 24px 54px rgba(17,22,31,.24); transform: translateX(-50%) }
  #view-services .quote-message-phone .demo-phone-screen { border-radius: 39px; padding: 0 0 14px }
  #view-services .quote-phone-thread { padding: 10px 12px 16px }
  #view-services .quote-message-scan .quote-message-phone { visibility: hidden; opacity: 0 }
  #view-services :is(.quote-scan,.quote-message-scan) .quote-merchant-final {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    border-radius: 0; box-shadow: none;
  }
  #view-services .property-flying-file { display: none }
  #view-services .support-mail-inner { padding: 10px 12px 14px }
  #view-services .support-mail-received { padding: 10px 12px }
  #view-services .support-mail-response { padding-top: 10px; gap: 8px }
  #view-services .support-typed { min-height: 150px }
  #view-services .support-order-app > section,
  #view-services .support-ticket-app > section { padding: 16px 12px }
  #view-services :is(.support-mail-behind,.support-order-behind,.support-ticket-behind) { display: none }
  #view-services .scene[data-beats="6"] { height: 820svh }
  #view-services :is(.tender-sources,.tender-watch,.tender-opportunity,.tender-form,.tender-folder,.tender-prepared,.tender-email) {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; transform: none; border-radius: 0; box-shadow: none;
  }
  #view-services :is(.tender-sources-behind,.tender-watch-behind,.tender-form-behind,.tender-prepared-behind,.tender-folder-behind) { display: none }
  #view-services .tender-phone { top: 4px; width: 286px; height: calc(100% - 8px) }
  #view-services .tender-signal { left: 12px; right: 12px; top: 148px; width: auto; min-height: 220px; transform: none }
  #view-services .tender-form-view .tender-opportunity { display: none }
  #view-services .tender-sources-app > section,
  #view-services .tender-folder-app > section { padding: 16px 12px }
  #view-services .tender-watch-app { grid-template-columns: 1fr }
  #view-services .tender-watch-app > aside { padding: 14px 12px }
  #view-services .tender-watch-app > section { display: none }
  #view-services .tender-form-inner { padding: 16px 12px }
  #view-services .tender-form-files { grid-template-columns: minmax(0,1fr) }
  #view-services .tender-prepared { padding: 18px 12px }
  #view-services .tender-prepared-inner { height: calc(100% - 42px); grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(3,minmax(0,1fr)); gap: 8px; padding: 0 }
  #view-services .tender-prepared-file { min-height: 0; grid-template-columns: 58px minmax(0,1fr) 22px; justify-items: start; align-content: center; align-items: center; gap: 10px; padding: 10px 12px }
  #view-services .tender-prepared-file > span:nth-child(2) { text-align: left }
  #view-services .tender-file-paper { width: 52px; height: 68px; gap: 5px; padding: 12px 8px }
  #view-services .tender-file-paper::after { width: 16px; height: 17px }
  #view-services .tender-email-inner { grid-template-rows: auto auto minmax(130px,1fr) auto auto; gap: 8px; padding: 12px }
  #view-services .tender-email-typed { min-height: 130px; padding-block: 10px; font-size: 13px; line-height: 18px }
  #view-services .tender-email-files { grid-template-columns: minmax(0,1fr); gap: 5px }
  #view-services .tender-email-files > article { min-height: 52px; padding: 6px 8px }
  #view-services .tender-email-inner .demo-note { margin: 0; font-size: 12px; line-height: 16px }
  #view-services .tender-flying-file { display: none }
  #view-services .tender-drag-cursor { display: none }
  #view-services .demo-tender[data-beat="2"] .tender-signal,
  #view-services .demo-tender[data-beat="3"] .tender-sources-side,
  #view-services .demo-tender[data-beat="4"] .tender-email,
  #view-services .demo-tender:is([data-beat="5"],[data-beat="6"]) .tender-prepared { opacity: 0; pointer-events: none }
  @keyframes tenderFileDrop { 0% { opacity: 0; filter: blur(4px); transform: translateY(-54px) scale(.88) } 24% { opacity: 1; filter: none } 82% { opacity: 1 } 100% { opacity: 0; transform: translateY(250px) scale(.42) } }
}

@media (max-width: 390px) {
  #view-services .property-email-draft .email-attachment-name,
  #view-services .property-email-draft .email-attachment-meta {
    overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere;
  }
}

/* Portrait mobile : l'application reste la preuve, pas la coque.
   Les conversations passent bord à bord et les écrans verrouillés deviennent
   des notifications iOS compactes. Le desktop conserve les mockups complets. */
@media (max-width: 699px) and (orientation: portrait) {
  #view-services :is(.appointment-phone, .quote-message-phone) {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  #view-services :is(.appointment-phone, .quote-message-phone) .demo-phone-screen {
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 0;
    padding: 0 0 8px;
  }
  #view-services :is(.appointment-phone, .quote-message-phone) .quote-iphone-status,
  #view-services :is(.appointment-phone, .quote-message-phone) .quote-iphone-home {
    display: none;
  }
  #view-services :is(.appointment-phone-head, .quote-phone-head) {
    min-height: 58px;
    padding: 6px 10px 8px !important;
  }
  #view-services :is(.appointment-thread, .quote-phone-thread) {
    padding: 10px 12px 14px;
  }
  #view-services .appointment-inline-notice {
    top: 8px;
  }

  #view-services .acct-phone,
  #view-services .tender-phone {
    top: 50%;
    width: min(calc(100% - 20px), 310px);
    height: 244px;
    padding: 0;
    border-radius: 28px;
    background: transparent;
    box-shadow: none;
    transform: translate(-50%, -50%);
  }
  #view-services :is(.acct-phone, .tender-phone) .acct-phone-screen {
    border-radius: 28px;
    box-shadow: 0 18px 42px rgba(17, 22, 31, .14);
  }
  #view-services :is(.acct-phone, .tender-phone) .acct-phone-screen > header,
  #view-services .tender-phone-home {
    display: none;
  }
  #view-services :is(.acct-phone, .tender-phone) .acct-phone-date {
    margin-top: 18px;
  }
  #view-services :is(.acct-phone, .tender-phone) .acct-phone-date b {
    font-size: 28px;
    line-height: 32px;
  }
  #view-services :is(.acct-phone, .tender-phone) .acct-notice {
    top: 100px;
  }

  #view-services .demo-window-bar {
    min-height: 34px;
    padding: 0 10px 0 52px;
  }
  #view-services .demo-window-bar::before {
    left: 12px;
    top: 13px;
    width: 8px;
    height: 8px;
    box-shadow: 13px 0 #febc2e, 26px 0 #28c840;
  }
  #view-services .demo-window-bar span {
    overflow: hidden;
    font-size: 13px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 360px) and (orientation: portrait) {
  #view-services .property-email-window .email-reader {
    padding: 8px;
  }
  #view-services .property-email-received,
  #view-services .property-email-draft {
    padding: 10px;
  }
  #view-services .property-email-draft .email-attachment {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 6px 8px;
    min-height: 68px !important;
    padding: 8px !important;
  }
  #view-services .property-email-draft .email-attachment-icon {
    width: 36px;
    height: 40px;
  }
  #view-services .property-email-draft .email-attachment-copy {
    grid-column: 2;
  }
  #view-services .property-email-draft .email-attachment-name {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }
  #view-services .property-email-draft .email-attachment-meta,
  #view-services .property-email-draft .property-result-foot {
    display: none;
  }
  #view-services .property-email-draft .email-attachment-state {
    grid-column: 2;
    justify-self: start;
    font-size: 0;
  }
}

/* Mobile : une seule preuve au premier plan. Les plans de recherche,
   calendriers et systèmes intermédiaires restent réservés au desktop ;
   le téléphone ou l'email conserve toute la place de lecture. */
@media (max-width: 699px) {
  #view-services .channel-picker,
  #view-services .demo-quote > .channel-picker,
  #view-services .demo-appointment > .channel-picker {
    margin-bottom: 12px;
  }
  #view-services .demo-quote > .channel-picker { height: 52px }
  #view-services .quote-panel,
  #view-services .appointment-panel { inset-block-start: 64px }

  #view-services .property-sources,
  #view-services .appointment-agenda,
  #view-services .quote-merchant-final,
  #view-services .quote-flight-file,
  #view-services .acct-portal,
  #view-services .acct-viewer,
  #view-services .acct-ledger,
  #view-services .acct-flying-file,
  #view-services .acct-drag-cursor,
  #view-services .overdue-source,
  #view-services .tender-sources-side,
  #view-services .tender-signal,
  #view-services .tender-prepared,
  #view-services .tender-flying-file,
  #view-services .tender-drag-cursor,
  #view-services .contract-library,
  #view-services .contract-sheet,
  #view-services .contract-version-plane,
  #view-services .contract-citations {
    display: none !important;
  }

  #view-services .demo-outreach .crm-window {
    display: none !important;
  }
  #view-services .demo-outreach .outreach-draft {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
    filter: none !important;
    transform: none !important;
  }
  #view-services .demo-outreach .outreach-email {
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    filter: none !important;
    transform: none;
  }

  #view-services .quote-message-scan .quote-message-phone {
    visibility: visible;
    opacity: 1;
  }
  #view-services .quote-message-phone-behind {
    display: none;
  }
  #view-services .demo-quote[data-beat="2"] .quote-message-phone-behind {
    display: block;
  }
  #view-services .demo-quote[data-beat="2"] .quote-message-request .quote-message-phone {
    visibility: hidden;
    opacity: 0 !important;
  }
  #view-services .quote-scan .quote-email-scan {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  #view-services .quote-scan .quote-final-mail {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  #view-services .demo-quote:not([data-beat="2"]) .quote-scan .quote-final-mail {
    display: none !important;
  }

  #view-services .contract-scan-view .contract-inbox {
    display: block;
  }
  #view-services .demo-accounting[data-usecase="supplier"] .acct-phone {
    opacity: 1;
    visibility: visible;
  }
  #view-services .demo-accounting[data-usecase="overdue"] .overdue-mail {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  #view-services .demo-accounting[data-usecase="overdue"][data-beat="2"] .overdue-history {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  #view-services .demo-tender:is([data-beat="1"],[data-beat="2"],[data-beat="3"]) .tender-phone {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%);
  }
  #view-services .demo-tender:is([data-beat="1"],[data-beat="2"],[data-beat="3"]) .tender-email {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  #view-services .demo-tender:is([data-beat="4"],[data-beat="5"],[data-beat="6"]) .tender-phone {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  #view-services .demo-tender:is([data-beat="4"],[data-beat="5"],[data-beat="6"]) .tender-email {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .metier-rail[data-focus] .metier-card:not([aria-current="true"]) { transform: none; filter: none }
  .imessage-typing-indicator i, .agent-typed-body [data-agent-typing].is-typing::after,
  [data-property-typed].is-typing::after, [data-appointment-typed].is-typing::after { animation: none }
  .quote-flight-file { display: none }
  .quote-voice-wave i { animation: none !important; transform: scaleY(.72) }
}

.ms-flow [data-flow-icon],.ms-flow-previous {transform-box:fill-box;transform-origin:center}