/* Hubflow — styles du site (jetons du kit, composants de la landing, pages intérieures) */

/* Hubflow — jetons de design. Généré à partir du prototype (source de vérité). */
/* Thème : clair par défaut, sombre avec <html data-theme="dark"> ou selon le système si data-theme est absent. */

:root {
  color-scheme: light;
  --stone-50: #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;
  --stone-400: #a8a29e;
  --stone-500: #78716c;
  --stone-600: #57534e;
  --stone-700: #44403c;
  --stone-800: #292524;
  --stone-900: #1c1917;
  --stone-950: #0c0a09;
  --white: #ffffff;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --green-50: #f0fdf4;
  --green-400: #4ade80;
  --green-700: #15803d;
  --bg-canvas: #fafaf9;  /* Fond de l’application, derrière le menu latéral */
  --bg-panel: #ffffff;  /* Bloc de contenu, cartes, fenêtres, menus */
  --bg-surface: #f5f5f4;  /* Lignes, champs, cartes au repos sur le bloc blanc */
  --bg-surface-hover: #e7e5e4;  /* Survol d’une surface */
  --bg-surface-pressed: #d6d3d1;  /* Surface pressée */
  --bg-subtle: #fafaf9;  /* Pied de fenêtre, carte « Nouveau » */
  --bg-glass: rgba(255, 255, 255, 0.92);  /* Barres flottantes floutées */
  --bg-overlay: rgba(28, 25, 23, 0.22);  /* Voile derrière une fenêtre (avec flou 3 px) */
  --bg-overlay-light: rgba(28, 25, 23, 0.18);  /* Voile de la recherche ⌘K et du panneau latéral */
  --control-rest: #f5f5f4;  /* Recherche, filtre, bouton secondaire, interrupteur éteint */
  --control-hover: #e7e5e4;  /* Survol d’un contrôle */
  --control-pressed: #d6d3d1;  /* Contrôle pressé */
  --state-selected: #ffffff;  /* Segment actif d’un contrôle segmenté (avec ombre carte) */
  --nav-hover: #f5f5f4;  /* Survol d’une entrée du menu latéral */
  --nav-pressed: #e7e5e4;  /* Entrée pressée */
  --nav-active: #e7e5e4;  /* Page en cours */
  --nav-active-hover: #d6d3d1;  /* Survol de la page en cours */
  --text-primary: #1c1917;  /* Texte principal, titres */
  --text-secondary: #44403c;  /* Texte courant secondaire */
  --text-muted: #78716c;  /* Descriptions, métadonnées */
  --text-faint: #a8a29e;  /* Compteurs, indications discrètes */
  --text-on-primary: #ffffff;  /* Texte et icônes sur un bouton principal */
  --text-danger: #c2410c;  /* Actions destructives (Supprimer…) */
  --text-success: #15803d;  /* Confirmation, document validé */
  --action-primary: #1c1917;  /* Bouton principal (noir) */
  --action-primary-hover: #292524;  /* Survol du bouton principal */
  --action-primary-pressed: #44403c;  /* Bouton principal pressé */
  --action-danger: #c2410c;  /* Bouton de suppression */
  --action-danger-hover: #9a3412;  /* Survol du bouton de suppression */
  --action-ghost-hover: #fafaf9;  /* Survol d’un bouton à contour */
  --action-ghost-pressed: #f5f5f4;  /* Bouton à contour pressé */
  --border-divider: #e7e5e4;  /* Séparateurs fins */
  --border-ring: #d6d3d1;  /* Contour des éléments discrets */
  --border-field-focus: #a8a29e;  /* Contour 1 px d’un champ actif */
  --border-focus: #78716c;  /* Anneau de focus clavier */
  --border-danger: #f0a58a;  /* Contour d’un élément à corriger */
  --status-progress: #5b7cf0;  /* Pastille « En cours » */
  --status-waiting: #e0a43a;  /* Pastille « En attente » */
  --status-done: #3fa66b;  /* Pastille « Terminé », document validé */
  --status-draft: #a8a29e;  /* Pastille « Brouillon » */
  --status-done-surface: #f0fdf4;  /* Fond d’un bandeau de succès */
  --status-danger-surface: #fff1ec;  /* Fond d’un motif de refus */
  --status-danger-surface-2: #fff5f2;  /* Fond très léger d’un élément à corriger */
  --focus-halo: rgba(28, 25, 23, 0.08);  /* Halo de 4 px autour d’un champ actif */
  --canvas: var(--bg-canvas);
  --panel: var(--bg-panel);
  --tint: var(--bg-surface);
  --tint-2: var(--bg-surface-hover);
  --tint-3: var(--bg-surface-pressed);
  --glass: var(--bg-glass);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --muted: var(--text-muted);
  --faint: var(--text-faint);
  --on-ink: var(--text-on-primary);
  --danger: var(--text-danger);
  --success: var(--text-success);
  --primary: var(--action-primary);
  --primary-hover: var(--action-primary-hover);
  --primary-pressed: var(--action-primary-pressed);
  --danger-strong: var(--action-danger-hover);
  --ghost-hover: var(--action-ghost-hover);
  --ghost-pressed: var(--action-ghost-pressed);
  --hair: var(--border-divider);
  --ring: var(--border-ring);
  --focus: var(--border-focus);
  --danger-ring: var(--border-danger);
  --blue: var(--status-progress);
  --amber: var(--status-waiting);
  --green: var(--status-done);
  --grey: var(--status-draft);
  --success-tint: var(--status-done-surface);
  --danger-tint: var(--status-danger-surface);
  --danger-tint-2: var(--status-danger-surface-2);
  --radius-xs: 6px;  /* Pastilles de format, petites puces */
  --radius-sm: 10px;  /* Petits boutons carrés, vignettes */
  --radius-md: 12px;  /* Icônes en tuile, champs compacts */
  --radius-lg: 14px;  /* Éléments de menu */
  --radius-xl: 18px;  /* Lignes, champs, cartes internes */
  --radius-2xl: 20px;  /* Cartes, bulle de guide */
  --radius-3xl: 24px;  /* Fenêtres, grandes cartes */
  --radius-tile: 26px;  /* Tuiles de la grille */
  --radius-panel: 28px;  /* Bloc de contenu principal */
  --radius-full: 999px;  /* Boutons, pastilles, avatars, interrupteurs */
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-11: 44px;
  --space-14: 56px;
  --size-control: 42px;  /* Hauteur recherche / filtre / champ */
  --size-button: 40px;  /* Bouton moyen */
  --size-button-sm: 34px;  /* Bouton petit */
  --size-nav-item: 40px;  /* Entrée du menu latéral */
  --size-sidebar: 264px;  /* Menu latéral ouvert */
  --size-sidebar-collapsed: 76px;  /* Menu latéral réduit */
  --size-content: 1100px;  /* Largeur maximale du contenu */
  --size-drawer: 620px;  /* Panneau latéral (participant) */
  --size-dialog: 440px;  /* Fenêtre standard */
  --size-switch-w: 38px;  /* Interrupteur, largeur */
  --size-switch-h: 22px;  /* Interrupteur, hauteur */
  --font-sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mono: var(--font-mono);  /* alias du prototype */
  --shadow-carte: 0 1px 2px rgba(28, 25, 23, 0.05), 0 4px 14px rgba(28, 25, 23, 0.05);  /* Cartes blanches posées sur une surface, segment actif, boutons blancs */
  --shadow-panneau: 0 1px 2px rgba(28, 25, 23, 0.03), 0 12px 40px rgba(28, 25, 23, 0.06);  /* Bloc de contenu principal */
  --shadow-popover: 0 2px 6px rgba(28, 25, 23, 0.06), 0 16px 40px rgba(28, 25, 23, 0.12);  /* Menus, listes déroulantes, menu du profil, menu des variables */
  --shadow-fenetre: 0 4px 12px rgba(28, 25, 23, 0.06), 0 24px 64px rgba(28, 25, 23, 0.18);  /* Fenêtres modales, recherche ⌘K */
  --shadow-panneau-lateral: 0 2px 6px rgba(28, 25, 23, 0.06), 0 24px 60px rgba(28, 25, 23, 0.18);  /* Panneau du participant, fenêtres des paramètres */
  --shadow-barre-flottante: 0 2px 6px rgba(28, 25, 23, 0.05), 0 8px 24px rgba(28, 25, 23, 0.08);  /* Barre « Modifications non enregistrées » */
  --shadow-notification: 0 12px 30px rgba(28, 25, 23, 0.25);  /* Notification éphémère (toast) */
  --shadow-bulle-de-guide: 0 12px 40px rgba(28, 25, 23, 0.18), 0 2px 6px rgba(28, 25, 23, 0.08);  /* Bulle du guide au premier lancement */
  --shadow-pastille: 0 1px 2px rgba(28, 25, 23, 0.2);  /* Rond de l’interrupteur */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);  /* Toutes les transitions et animations de l’interface */
  --ease-theme: cubic-bezier(0.22, 1, 0.36, 1);  /* Bascule clair / sombre en cercle */
  --duration-press: 150ms;  /* Appui sur un bouton (scale 0.97) */
  --duration-fast: 180ms;  /* Ouverture d’un menu ou d’une liste déroulante */
  --duration-base: 200ms;  /* Survol, changement de couleur, fondu du voile */
  --duration-pop: 250ms;  /* Fenêtre, menu riche, bulle de guide, interrupteur */
  --duration-panel: 280ms;  /* Entrée du panneau latéral */
  --duration-toast: 300ms;  /* Notification éphémère, voile du menu mobile */
  --duration-move: 350ms;  /* Déplacement de la découpe du guide */
  --duration-theme-fade: 400ms;  /* Bascule de thème sans View Transitions */
  --duration-enter: 500ms;  /* Apparition des cartes et lignes (en cascade de 40 ms) */
  --duration-theme: 700ms;  /* Bascule de thème en cercle */
  --stagger-list: 40ms;  /* Décalage entre deux cartes ou lignes à l’apparition */
  --ease: var(--ease-standard);  /* alias du prototype */
  --blur-overlay: 3px;  /* Voile des fenêtres et de la recherche ⌘K */
  --blur-glass: 12px;  /* Barres flottantes (étapes, enregistrement) */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas: #0c0a09;
  --bg-panel: #1c1917;
  --bg-surface: #292524;
  --bg-surface-hover: #44403c;
  --bg-surface-pressed: #57534e;
  --bg-subtle: #0c0a09;
  --bg-glass: rgba(28, 25, 23, 0.88);
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-overlay-light: rgba(0, 0, 0, 0.4);
  --control-rest: #292524;
  --control-hover: #44403c;
  --control-pressed: #57534e;
  --state-selected: #57534e;
  --nav-hover: #292524;
  --nav-pressed: #44403c;
  --nav-active: #44403c;
  --nav-active-hover: #57534e;
  --text-primary: #fafaf9;
  --text-secondary: #e7e5e4;
  --text-muted: #a8a29e;
  --text-faint: #78716c;
  --text-on-primary: #1c1917;
  --text-danger: #fb923c;
  --text-success: #4ade80;
  --action-primary: #fafaf9;
  --action-primary-hover: #f5f5f4;
  --action-primary-pressed: #e7e5e4;
  --action-danger: #fb923c;
  --action-danger-hover: #fdba74;
  --action-ghost-hover: #0c0a09;
  --action-ghost-pressed: #292524;
  --border-divider: #44403c;
  --border-ring: #57534e;
  --border-field-focus: #78716c;
  --border-focus: #a8a29e;
  --border-danger: #9a3412;
  --status-progress: #5b7cf0;
  --status-waiting: #e0a43a;
  --status-done: #3fa66b;
  --status-draft: #78716c;
  --status-done-surface: rgba(34, 197, 94, 0.14);
  --status-danger-surface: rgba(234, 88, 12, 0.14);
  --status-danger-surface-2: rgba(234, 88, 12, 0.10);
  --focus-halo: rgba(250, 250, 249, 0.12);
  --shadow-carte: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.2);
  --shadow-panneau: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 40px rgba(0, 0, 0, 0.25);
  --shadow-popover: 0 2px 6px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.35);
  --shadow-fenetre: 0 4px 12px rgba(0, 0, 0, 0.35), 0 24px 64px rgba(0, 0, 0, 0.45);
  --shadow-panneau-lateral: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-barre-flottante: 0 2px 6px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-notification: 0 12px 30px rgba(0, 0, 0, 0.5);
  --shadow-bulle-de-guide: 0 12px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-pastille: 0 1px 2px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-canvas: #0c0a09;
    --bg-panel: #1c1917;
    --bg-surface: #292524;
    --bg-surface-hover: #44403c;
    --bg-surface-pressed: #57534e;
    --bg-subtle: #0c0a09;
    --bg-glass: rgba(28, 25, 23, 0.88);
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-overlay-light: rgba(0, 0, 0, 0.4);
    --control-rest: #292524;
    --control-hover: #44403c;
    --control-pressed: #57534e;
    --state-selected: #57534e;
    --nav-hover: #292524;
    --nav-pressed: #44403c;
    --nav-active: #44403c;
    --nav-active-hover: #57534e;
    --text-primary: #fafaf9;
    --text-secondary: #e7e5e4;
    --text-muted: #a8a29e;
    --text-faint: #78716c;
    --text-on-primary: #1c1917;
    --text-danger: #fb923c;
    --text-success: #4ade80;
    --action-primary: #fafaf9;
    --action-primary-hover: #f5f5f4;
    --action-primary-pressed: #e7e5e4;
    --action-danger: #fb923c;
    --action-danger-hover: #fdba74;
    --action-ghost-hover: #0c0a09;
    --action-ghost-pressed: #292524;
    --border-divider: #44403c;
    --border-ring: #57534e;
    --border-field-focus: #78716c;
    --border-focus: #a8a29e;
    --border-danger: #9a3412;
    --status-progress: #5b7cf0;
    --status-waiting: #e0a43a;
    --status-done: #3fa66b;
    --status-draft: #78716c;
    --status-done-surface: rgba(34, 197, 94, 0.14);
    --status-danger-surface: rgba(234, 88, 12, 0.14);
    --status-danger-surface-2: rgba(234, 88, 12, 0.10);
    --focus-halo: rgba(250, 250, 249, 0.12);
    --shadow-carte: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.2);
    --shadow-panneau: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 40px rgba(0, 0, 0, 0.25);
    --shadow-popover: 0 2px 6px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.35);
    --shadow-fenetre: 0 4px 12px rgba(0, 0, 0, 0.35), 0 24px 64px rgba(0, 0, 0, 0.45);
    --shadow-panneau-lateral: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 60px rgba(0, 0, 0, 0.45);
    --shadow-barre-flottante: 0 2px 6px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-notification: 0 12px 30px rgba(0, 0, 0, 0.5);
    --shadow-bulle-de-guide: 0 12px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-pastille: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--bg-canvas); color: var(--text-primary); font: 400 15px/24px var(--font-sans); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; overflow-x: hidden; }
  a { color: inherit; }
  h1, h2, h3, h4, p { text-wrap: balance; }
  .wrap { max-width: 1160px; margin: 0 auto; padding-inline: 32px; }
  :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
  .mono { font-family: var(--font-mono); }

  /* Boutons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; font: 500 15px/20px var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background .2s var(--ease-standard), color .2s var(--ease-standard), transform .15s var(--ease-standard); }
  .btn:active { transform: scale(.97); }
  .btn-dark { background: var(--action-primary); color: var(--text-on-primary); }
  .btn-dark:hover { background: var(--action-primary-hover); }
  .btn-soft { background: var(--control-rest); color: var(--text-primary); }
  .btn-soft:hover { background: var(--control-hover); }
  .btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
  .btn-lg { height: 52px; padding: 0 28px; font-size: 16px; }
  .btn .go { transition: transform .2s var(--ease-standard); }
  .btn:hover .go { transform: translateX(3px); }

  /* En-tête */
  .top { position: sticky; top: 0; z-index: 30; transition: background .25s var(--ease-standard), box-shadow .25s var(--ease-standard); }
  .top .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
  .top .logo { display: inline-flex; color: var(--text-primary); }
  .top nav { display: flex; gap: 2px; }
  .top nav a { padding: 8px 12px; border-radius: 999px; color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: background .2s var(--ease-standard), color .2s var(--ease-standard); }
  .top nav a:hover { background: var(--nav-hover); color: var(--text-primary); }
  .top .sp { flex: 1; }
  .top .login { color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500; }
  .top .login:hover { color: var(--text-primary); }
  .top.scrolled { background: var(--bg-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--border-divider); }

  /* Héros */
  .hero { padding-block: 64px 0; text-align: center; }
  .eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--bg-panel); box-shadow: var(--shadow-carte); color: var(--text-secondary); font-size: 13px; font-weight: 500; }
  .eyebrow i { width: 8px; height: 8px; border-radius: 99px; background: var(--status-done); animation: blink 2.4s var(--ease-standard) infinite; }
  @keyframes blink { 50% { opacity: .35; } }
  h1 { margin: 22px auto 0; max-width: 900px; font-size: 60px; line-height: 64px; letter-spacing: -2px; font-weight: 600; }
  h1 .w { display: inline-block; }
  h1 .soft { color: var(--text-faint); }
  .lead { margin: 22px auto 0; max-width: 620px; color: var(--text-muted); font-size: 17.5px; line-height: 28px; }
  .cta { display: flex; justify-content: center; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
  .reassure { display: flex; justify-content: center; gap: 20px; margin-top: 18px; color: var(--text-faint); font-size: 13px; flex-wrap: wrap; }
  .reassure span { display: inline-flex; align-items: center; gap: 6px; }
  .reassure svg { color: var(--text-muted); }

  /* Scène du héros : l'app et la page du client, côte à côte */
  .stage-fit { position: relative; margin: 60px auto 0; max-width: 1100px; overflow: hidden; padding-top: 40px; margin-top: 44px; }
  /* Coupe seulement le bas : les ombres des fenêtres restent visibles sur les côtés */
  @supports (overflow: clip) { .stage-fit { overflow-x: visible; overflow-y: clip; } }
  /* Bas de la scène coupé par un fondu vers le fond de page */
  .stage-fit::after { content: ""; position: absolute; left: -40px; right: -40px; bottom: 0; height: 130px; background: linear-gradient(to bottom, rgba(250, 250, 249, 0), var(--bg-canvas) 78%); pointer-events: none; z-index: 2; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stage-fit::after { background: linear-gradient(to bottom, rgba(12, 10, 9, 0), var(--bg-canvas) 78%); } }
  .stage { position: relative; width: 1100px; height: 570px; transform-origin: top left; text-align: left; }
  .tag { position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--bg-panel); box-shadow: var(--shadow-carte); font-size: 12px; font-weight: 500; color: var(--text-secondary); }
  .tag i { width: 6px; height: 6px; border-radius: 99px; background: var(--text-faint); }
  .win { border-radius: 28px; background: var(--bg-canvas); box-shadow: 0 0 0 1px rgba(28, 25, 23, 0.04), 0 30px 80px rgba(28, 25, 23, 0.13), 0 4px 14px rgba(28, 25, 23, 0.05); padding: 10px; }
  .h-app { position: absolute; left: 0; top: 40px; width: 758px; display: grid; grid-template-columns: 176px minmax(0, 1fr); }
  .side { padding: 14px 8px; display: grid; align-content: start; gap: 2px; }
  .side .lg { margin: 0 8px 16px; color: var(--text-primary); }
  .side .lg svg { width: 82px; height: auto; }
  .side a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 999px; color: var(--text-secondary); font-size: 13px; text-decoration: none; }
  .side a.on { background: var(--nav-active); color: var(--text-primary); font-weight: 500; }
  .pnl { padding: 24px 24px 20px; border-radius: 20px; background: var(--bg-panel); box-shadow: var(--shadow-panneau); }
  .ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .ph h3 { margin: 0; font-size: 21px; line-height: 28px; letter-spacing: -.4px; font-weight: 600; }
  .meta { margin-top: 4px; color: var(--text-muted); font-size: 13px; }
  .pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; background: var(--bg-surface); font-size: 12px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
  .pill i { width: 6px; height: 6px; border-radius: 99px; background: var(--status-progress); }
  .pill.p-done i { background: var(--status-done); } .pill.p-wait i { background: var(--status-waiting); } .pill.p-draft i { background: var(--status-draft); }
  .sum { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 14px 18px; border-radius: 18px; background: var(--bg-surface); }
  .sum b { display: block; font-weight: 600; font-size: 14px; }
  .sum small { color: var(--text-muted); font-size: 12.5px; }
  .bar { flex: 0 0 180px; height: 6px; border-radius: 99px; background: var(--bg-surface-hover); overflow: hidden; margin-left: auto; }
  .bar i { display: block; width: 0; height: 100%; border-radius: 99px; background: var(--action-primary); transition: width .7s var(--ease-standard); }
  .rows { display: grid; gap: 6px; margin-top: 12px; }
  .row { position: relative; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px 0 12px; border-radius: 18px; background: var(--bg-surface); font-size: 13.5px; transition: background .3s var(--ease-standard); }
  .row.flash { animation: flash 1.2s var(--ease-standard); }
  @keyframes flash { 0% { background: var(--bg-surface-hover); } 100% { background: var(--bg-surface); } }
  .row .fi { width: 30px; height: 30px; border-radius: 10px; background: var(--bg-panel); display: grid; place-items: center; color: var(--text-muted); flex-shrink: 0; }
  .row b { font-weight: 500; }
  .row small { color: var(--text-faint); font-size: 12px; }
  .st { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-faint); white-space: nowrap; transition: color .3s; }
  .st i { width: 6px; height: 6px; border-radius: 99px; background: var(--status-draft); }
  .st[data-s="recv"] { color: var(--text-secondary); } .st[data-s="recv"] i { background: var(--status-progress); }
  .st[data-s="ok"] { color: var(--text-success); } .st[data-s="ok"] i { display: none; }
  .st em { font-style: normal; }
  .st svg { display: none; } .st[data-s="ok"] svg { display: block; }
  .st.pop { animation: pop .4s var(--ease-standard); }
  .act { position: absolute; right: 118px; height: 30px; padding: 0 12px; border-radius: 99px; background: var(--action-primary); color: var(--text-on-primary); font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; opacity: 0; transform: scale(.9); transition: opacity .2s var(--ease-standard), transform .2s var(--ease-standard); }
  .row.hov { background: var(--bg-surface-hover); } .row.hov .act { opacity: 1; transform: none; }
  .act.press { transform: scale(.94); }

  .h-guest { position: absolute; right: 0; top: 0; width: 352px; }
  .bro { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; margin: 2px 4px 10px; border-radius: 99px; background: var(--bg-surface); color: var(--text-muted); font-size: 12px; }
  .g { padding: 22px 20px 18px; border-radius: 20px; background: var(--bg-panel); box-shadow: var(--shadow-panneau); }
  .g .who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
  .av { width: 30px; height: 30px; border-radius: 99px; background: var(--bg-surface); display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; }
  .g .h4 { display: block; margin: 14px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
  .ph .h3 { display: block; margin: 0; font-size: 21px; line-height: 28px; letter-spacing: -.4px; font-weight: 600; }
  .scn .ph .h3 { font-size: 19px; }
  .h1x { margin-top: 0 !important; }
  .h1x .eyebrow { display: flex; width: fit-content; margin: 0 auto 22px; font-size: 13px; line-height: 20px; letter-spacing: 0; font-weight: 500; }
  .h1x .h1w { display: block; }
  .g h4 { margin: 14px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
  .g p { margin: 0; color: var(--text-muted); font-size: 13px; }
  .gl { display: grid; gap: 4px; margin-top: 14px; }
  .gl div { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; border-radius: 12px; font-size: 13px; color: var(--text-secondary); transition: background .3s var(--ease-standard); }
  .gl .ck { width: 18px; height: 18px; border-radius: 99px; background: var(--bg-surface); display: grid; place-items: center; color: transparent; flex-shrink: 0; transition: background .3s var(--ease-standard), color .3s; }
  .gl div.sent .ck { background: var(--status-done); color: #fff; }
  .gl div.sent { color: var(--text-muted); }
  .drop { position: relative; margin-top: 12px; height: 92px; border-radius: 16px; background: var(--bg-surface); display: grid; place-items: center; text-align: center; color: var(--text-muted); font-size: 12.5px; overflow: hidden; transition: background .3s var(--ease-standard); }
  .drop.over { background: var(--bg-surface-hover); }
  .drop .hint { display: grid; justify-items: center; gap: 6px; transition: opacity .2s; }
  .drop.busy .hint { opacity: 0; }
  .up { position: absolute; left: 12px; right: 12px; top: 50%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg-panel); box-shadow: var(--shadow-carte); transform: translateY(-50%) scale(.96); opacity: 0; transition: opacity .25s var(--ease-standard), transform .25s var(--ease-standard); }
  .drop.busy .up { opacity: 1; transform: translateY(-50%); }
  .up .fi { width: 28px; height: 28px; border-radius: 9px; background: var(--bg-surface); display: grid; place-items: center; color: var(--text-muted); flex-shrink: 0; }
  .up > span:not(.fi) { flex: 1; min-width: 0; text-align: left; }
  .up b { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .up .pb { display: block; height: 4px; margin-top: 5px; border-radius: 9px; background: var(--bg-surface); overflow: hidden; }
  .up .pb i { display: block; height: 100%; width: 0; background: var(--action-primary); border-radius: 9px; }
  .g .foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; color: var(--text-faint); font-size: 11.5px; }

  .toast { position: absolute; left: 300px; top: 330px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; background: var(--bg-panel); box-shadow: var(--shadow-popover); font-size: 13px; opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .35s var(--ease-standard), transform .35s var(--ease-standard); pointer-events: none; }
  .toast.show { opacity: 1; transform: none; }
  .toast .ic { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-surface); color: var(--text-secondary); flex-shrink: 0; }
  .toast b { display: block; font-weight: 500; }
  .toast small { color: var(--text-muted); font-size: 12px; }
  .cursor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 2px 4px rgba(28, 25, 23, .25)); }
  .flyer { position: fixed; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--bg-panel); box-shadow: var(--shadow-popover); font-size: 12px; font-weight: 500; pointer-events: none; white-space: nowrap; }
  .flyer .fi { width: 22px; height: 22px; border-radius: 7px; background: var(--bg-surface); display: grid; place-items: center; color: var(--text-muted); }



  /* Sections */
  section { padding-top: 120px; }
  .kicker { color: var(--text-faint); font-size: 13px; font-weight: 500; }
  h2 { margin: 8px 0 0; max-width: 700px; font-size: 42px; line-height: 48px; letter-spacing: -1.3px; font-weight: 600; }
  .center { text-align: center; } .center h2, .center .sub { margin-inline: auto; }
  .sub { margin: 16px 0 0; max-width: 600px; color: var(--text-muted); font-size: 16.5px; line-height: 27px; }

  /* Problème */
  .pains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 44px; }
  .pain { padding: 22px; border-radius: 22px; background: var(--bg-surface); }
  .pain .was { position: relative; display: inline; color: var(--text-muted); font-size: 14px; line-height: 22px; background: linear-gradient(var(--text-faint), var(--text-faint)) no-repeat 0 55% / 0 1px; transition: background-size .7s var(--ease-standard) calc(var(--i, 0) * 140ms + 400ms); }
  .pain.in .was { background-size: 100% 1px; }
  .pain .now { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14.5px; font-weight: 500; line-height: 22px; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease-standard) calc(var(--i, 0) * 140ms + 900ms), transform .5s var(--ease-standard) calc(var(--i, 0) * 140ms + 900ms); }
  .pain.in .now { opacity: 1; transform: none; }
  .pain .now svg { flex-shrink: 0; color: var(--status-done); margin-top: 2px; }

  /* Métiers */
  .sect { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 36px; }
  .sect button { height: 38px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--control-rest); color: var(--text-secondary); font: 500 14px/20px var(--font-sans); cursor: pointer; transition: background .2s var(--ease-standard), color .2s var(--ease-standard), transform .15s var(--ease-standard); }
  .sect button:hover { background: var(--control-hover); }
  .sect button:active { transform: scale(.97); }
  .sect button[aria-selected="true"] { background: var(--action-primary); color: var(--text-on-primary); }
  .tpl { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 12px; margin-top: 16px; padding: 10px; border-radius: 28px; background: var(--bg-surface); }
  .tpl .l { padding: 28px; display: grid; align-content: space-between; gap: 24px; }
  .tpl .l h3 { margin: 6px 0 0; font-size: 22px; line-height: 29px; letter-spacing: -.6px; font-weight: 600; }
  .tpl .l p { margin: 12px 0 0; color: var(--text-muted); font-size: 15px; line-height: 24px; }
  .t-ic { width: 44px; height: 44px; margin-bottom: 16px; border-radius: 14px; background: var(--bg-panel); box-shadow: var(--shadow-carte); display: grid; place-items: center; color: var(--text-secondary); }
  .t-link { justify-self: start; background: var(--bg-panel); box-shadow: var(--shadow-carte); }
  .t-link:hover { background: var(--bg-panel); }
  .tpl .l .note { padding: 14px 16px; border-radius: 16px; background: var(--bg-panel); color: var(--text-secondary); font-size: 13px; line-height: 20px; }
  .tpl .l .note b { display: block; font-size: 12px; color: var(--text-faint); font-weight: 500; margin-bottom: 2px; }
  .tpl .r { padding: 22px; border-radius: 20px; background: var(--bg-panel); box-shadow: var(--shadow-carte); min-height: 420px; }
  .tpl .r .ph h4 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
  .tpl .r .desc { margin: 4px 0 14px; color: var(--text-muted); font-size: 13px; }
  .pc { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 16px; background: var(--bg-surface); margin-top: 6px; }
  .pc .fi { width: 32px; height: 32px; border-radius: 10px; background: var(--bg-panel); display: grid; place-items: center; color: var(--text-muted); flex-shrink: 0; }
  .pc > span:not(.fi):not(.chips) { flex: 1; min-width: 0; }
  .pc .chips { flex-shrink: 0; max-width: 46%; }
  .pc b { display: block; font-size: 13.5px; font-weight: 500; }
  .pc small { display: block; color: var(--text-muted); font-size: 12px; line-height: 17px; }
  .chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .chip { height: 22px; padding: 0 8px; border-radius: 99px; background: var(--bg-panel); color: var(--text-muted); font-size: 11.5px; font-weight: 500; display: inline-flex; align-items: center; white-space: nowrap; }
  .chip.req { color: var(--text-primary); }
  .tpl .r .btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

  /* Modules : un vrai navigateur, un onglet par module */
  .mtabs { display: flex; justify-content: center; margin-top: 44px; overflow-x: auto; scrollbar-width: none; }
  .mtabs::-webkit-scrollbar { display: none; }
  .btab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; min-width: 150px; padding: 0 18px; border: 0; background: transparent; color: var(--text-faint); font: 500 14.5px/20px var(--font-sans); white-space: nowrap; cursor: pointer; flex-shrink: 0; transition: color .25s var(--ease-standard); }
  .btab::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--border-divider); }
  .btab:hover { color: var(--text-secondary); }
  .btab .ti { display: grid; place-items: center; color: inherit; }
  .btab.on { color: var(--text-primary); }
  .btab .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--text-primary); transform: scaleX(0); transform-origin: left; }
  .btab.on .prog { transform: scaleX(1); transition: transform .35s var(--ease-standard); }
  .btab.on.run .prog { transform: scaleX(0); transition: none; animation: prog var(--dur, 7s) linear forwards; }
  @keyframes prog { to { transform: scaleX(1); } }
  .mdescs { display: grid; margin-top: 30px; text-align: center; }
  .mdesc { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .4s var(--ease-standard), transform .4s var(--ease-standard), visibility 0s .4s; }
  .mdesc.on { opacity: 1; visibility: visible; transform: none; transition: opacity .4s var(--ease-standard) .1s, transform .4s var(--ease-standard) .1s, visibility 0s; }
  .mdesc h3 { margin: 0; font-size: 26px; line-height: 32px; letter-spacing: -.6px; font-weight: 600; }
  .mdesc p { margin: 8px auto 0; max-width: 640px; color: var(--text-muted); font-size: 15.5px; line-height: 25px; }
  .mdesc ol { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; margin: 16px auto 0; padding: 0; max-width: 900px; }
  .mdesc li { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 14px; }
  .mdesc li svg { color: var(--status-done); flex-shrink: 0; }
  .screen { position: relative; margin-top: 28px; height: 600px; padding: 10px; border-radius: 28px; background: var(--bg-canvas); box-shadow: 0 0 0 1px rgba(28, 25, 23, 0.04), 0 30px 80px rgba(28, 25, 23, 0.12), 0 4px 14px rgba(28, 25, 23, 0.05); }
  #scenes { position: relative; height: 100%; overflow: hidden; padding: 0; }
  /* Repères numérotés posés sur l'écran, reliés à la liste */
  .hs { position: absolute; z-index: 4; width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; background: var(--bg-panel); color: var(--text-muted); font-size: 11.5px; font-weight: 600; box-shadow: var(--shadow-popover); opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease-standard), transform .4s var(--ease-standard), background .3s, color .3s; pointer-events: none; }
  .hs.is { opacity: 1; transform: none; }
  .hs.on { background: var(--action-primary); color: var(--text-on-primary); transform: scale(1.12); }
  .hs-x { outline: 1.5px solid transparent; outline-offset: 5px; }
  /* Bulle de guide : explique le point montré à l'écran */
  .coach { position: absolute; z-index: 6; display: flex; gap: 10px; align-items: flex-start; width: 280px; padding: 14px 16px 14px 14px; border-radius: 16px; background: var(--bg-panel); box-shadow: var(--shadow-bulle-de-guide, var(--shadow-popover)); font-size: 13.5px; line-height: 20px; font-weight: 500; color: var(--text-primary); opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .3s var(--ease-standard), transform .35s var(--ease-standard); pointer-events: none; }
  .coach.on { opacity: 1; transform: none; }
  .coach .n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; background: var(--action-primary); color: var(--text-on-primary); font-size: 11.5px; font-weight: 600; }
  .coach small { display: block; margin-top: 4px; color: var(--text-faint); font-size: 11.5px; font-weight: 500; }
  .hs-x.hs-t { outline-color: var(--text-primary); }
  .scn { position: absolute; inset: 0; padding: 26px 26px 22px; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.99); transition: opacity .45s var(--ease-standard), transform .45s var(--ease-standard), visibility 0s .45s; }
  .scn.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease-standard), transform .45s var(--ease-standard), visibility 0s; }
  .scn .ph h3 { font-size: 19px; }
  .scn .lst { display: grid; gap: 6px; margin-top: 16px; }
  .scn .ln { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px 8px 12px; border-radius: 16px; background: var(--bg-surface); font-size: 13.5px; }
  .scn .ln > span:not(.av):not(.fi):not(.pill):not(.chip) { min-width: 0; }
  .scn .ln b { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scn .ln small { color: var(--text-muted); font-size: 12px; display: block; }
  .scn .ln .r { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .scn .fi { width: 30px; height: 30px; border-radius: 10px; background: var(--bg-panel); display: grid; place-items: center; color: var(--text-muted); flex-shrink: 0; }
  .mini { width: 90px; height: 5px; border-radius: 9px; background: var(--bg-surface-hover); overflow: hidden; }
  .mini i { display: block; height: 100%; width: 0; border-radius: 9px; background: var(--action-primary); transition: width .9s var(--ease-standard); }
  .mini.is i { width: var(--p); }
  .cnt { font-size: 12px; color: var(--text-muted); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
  .card-f { position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 18px; background: var(--bg-panel); box-shadow: var(--shadow-popover); font-size: 13px; max-width: 360px; }
  .card-f b { display: block; font-weight: 500; }
  .card-f small { display: block; color: var(--text-muted); font-size: 12px; line-height: 17px; }
  .card-f .ic { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-surface); color: var(--text-secondary); flex-shrink: 0; }
  .card-f .ic.ok { background: var(--status-done); color: #fff; }
  .ap { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-standard), transform .45s var(--ease-standard); }
  .ap.is { opacity: 1; transform: none; }
  .apx { opacity: 0; transform: scale(.92); transition: opacity .35s var(--ease-standard), transform .45s var(--ease-standard); }
  .apx.is { opacity: 1; transform: none; }
  .sw { width: 36px; height: 22px; border-radius: 99px; background: var(--control-pressed, #d6d3d1); position: relative; transition: background .25s var(--ease-standard); flex-shrink: 0; }
  .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 99px; background: #fff; box-shadow: 0 1px 2px rgba(28, 25, 23, .2); transition: transform .25s var(--ease-standard); }
  .sw.is { background: var(--action-primary); } .sw.is::after { transform: translateX(14px); }
  .swap { display: inline-grid; } .swap > * { grid-area: 1 / 1; transition: opacity .3s var(--ease-standard), transform .3s var(--ease-standard); }
  .swap > :last-child { opacity: 0; transform: translateY(4px); }
  .swap.is > :first-child { opacity: 0; transform: translateY(-4px); } .swap.is > :last-child { opacity: 1; transform: none; }
  .ok-t { color: var(--text-success); display: inline-flex; align-items: center; gap: 4px; }
  .sect-h { margin: 18px 0 8px; color: var(--text-faint); font-size: 12px; font-weight: 500; }
  .tl { display: grid; gap: 0; margin-top: 18px; }
  .tl .s { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding-bottom: 16px; position: relative; }
  .tl .s::before { content: ""; position: absolute; left: 13.5px; top: 28px; bottom: 0; width: 1px; background: var(--border-divider); }
  .tl .s:last-child::before { display: none; }
  .tl .dot { width: 28px; height: 28px; border-radius: 99px; background: var(--bg-surface); display: grid; place-items: center; color: transparent; transition: background .35s var(--ease-standard), color .35s; }
  .tl .s.is .dot { background: var(--status-done); color: #fff; }
  .tl .s b { font-size: 13.5px; font-weight: 500; display: block; color: var(--text-faint); transition: color .35s; }
  .tl .s.is b { color: var(--text-primary); }
  .tl .s small { font-size: 12px; color: var(--text-muted); }
  .tl .s time { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .35s; }
  .tl .s.is time { opacity: 1; }
  .hash { margin-top: 6px; padding: 14px 16px; border-radius: 16px; background: var(--bg-surface); font-family: var(--font-mono); font-size: 12.5px; line-height: 20px; color: var(--text-secondary); word-break: break-all; min-height: 68px; }
  .hash em { font-style: normal; color: var(--text-faint); display: block; font-family: var(--font-sans); font-size: 12px; margin-bottom: 2px; }
  .caret::after { content: ""; display: inline-block; width: 7px; height: 14px; margin-left: 1px; vertical-align: -2px; background: var(--text-muted); animation: blink 1s steps(1) infinite; }
  .months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
  .months div { padding: 12px 10px; border-radius: 14px; background: var(--bg-surface); font-size: 12px; color: var(--text-faint); text-align: center; transition: background .35s var(--ease-standard), color .35s; }
  .months div i { display: block; width: 8px; height: 8px; margin: 0 auto 8px; border-radius: 99px; background: var(--bg-surface-hover); transition: background .35s; }
  .months div.is { background: var(--bg-panel); color: var(--text-primary); box-shadow: var(--shadow-carte); }
  .months div.is i { background: var(--status-done); }
  .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  .kpi { padding: 14px 16px; border-radius: 16px; background: var(--bg-surface); }
  .kpi small { display: block; color: var(--text-muted); font-size: 12px; }
  .kpi b { display: block; margin-top: 2px; font-size: 24px; line-height: 30px; letter-spacing: -.6px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .chart { margin-top: 10px; padding: 16px 16px 10px; border-radius: 16px; background: var(--bg-surface); }
  .chart .lg2 { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
  .chart .lg2 span { display: inline-flex; align-items: center; gap: 6px; }
  .chart .lg2 i { width: 8px; height: 8px; border-radius: 3px; }
  .bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: end; height: 150px; margin-top: 12px; padding-bottom: 2px; border-bottom: 1px solid var(--border-divider); }
  .bars div { display: flex; gap: 2px; align-items: end; height: 100%; }
  .bars i { flex: 1; height: 0; border-radius: 4px 4px 0 0; transition: height .8s var(--ease-standard); }
  .bars i:first-child { background: var(--bg-surface-pressed, #d6d3d1); } .bars i:last-child { background: var(--status-progress); }
  .bars div.is i:first-child { height: var(--a); } .bars div.is i:last-child { height: var(--r); }
  .axis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; margin-top: 6px; font-size: 11px; color: var(--text-faint); text-align: center; }
  .log { margin-top: 8px; padding: 12px 14px; border-radius: 16px; background: var(--bg-surface); font-family: var(--font-mono); font-size: 12px; line-height: 26px; color: var(--text-secondary); }
  .log div { display: flex; gap: 12px; }
  .log .c { color: var(--text-success); } .log .t { color: var(--text-faint); margin-left: auto; }
  .csv { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--bg-surface); margin-top: 16px; }
  .csv .pb { flex: 1; height: 5px; border-radius: 9px; background: var(--bg-surface-hover); overflow: hidden; }
  .csv .pb i { display: block; height: 100%; width: 0; background: var(--action-primary); transition: width 1s var(--ease-standard); }
  .csv.is .pb i { width: 100%; }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

  /* Bandeau d'appel */
  .band { margin-top: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border-radius: 28px; background: var(--bg-panel); box-shadow: var(--shadow-panneau); }
  .band b { font-size: 20px; letter-spacing: -.4px; font-weight: 600; }
  .band p { margin: 4px 0 0; color: var(--text-muted); font-size: 14.5px; }

  /* Sécurité */
  .trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
  .trust div { padding: 22px; border-radius: 22px; background: var(--bg-surface); }
  .trust svg { color: var(--text-secondary); }
  .trust b { display: block; margin-top: 14px; font-weight: 600; font-size: 15px; }
  .trust small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 13.5px; line-height: 21px; }

  /* Tarifs */
  .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 860px; margin: 44px auto 0; }
  .plan { padding: 10px; border-radius: 28px; background: var(--bg-surface); text-align: left; transition: transform .25s var(--ease-standard); }
  .plan:hover { transform: translateY(-3px); }
  .plan .in2 { height: 100%; display: grid; align-content: start; padding: 28px; border-radius: 20px; background: var(--bg-panel); box-shadow: var(--shadow-carte); }
  .plan .nm { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; }
  .plan .for { color: var(--text-muted); font-size: 14px; margin-top: 2px; }
  .plan .pr { margin-top: 22px; font-size: 44px; line-height: 48px; letter-spacing: -1.6px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .plan .pr small { font-size: 15px; letter-spacing: 0; font-weight: 500; color: var(--text-muted); }
  .plan ul { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 10px; }
  .plan li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--text-secondary); }
  .plan li svg { color: var(--text-muted); flex-shrink: 0; }
  .plan .btn { width: 100%; }
  .plans-note { margin-top: 16px; color: var(--text-faint); font-size: 13px; text-align: center; }

  /* FAQ */
  .faq { max-width: 760px; margin: 40px auto 0; display: grid; gap: 6px; }
  details { border-radius: 20px; background: var(--bg-surface); transition: background .2s var(--ease-standard); }
  details:hover { background: var(--bg-surface-hover); }
  details[open] { background: var(--bg-panel); box-shadow: var(--shadow-carte); }
  summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-size: 15.5px; font-weight: 500; cursor: pointer; }
  summary::-webkit-details-marker { display: none; }
  summary svg { color: var(--text-muted); transition: transform .25s var(--ease-standard); flex-shrink: 0; }
  details[open] summary svg { transform: rotate(45deg); }
  details p { margin: 0; padding: 0 22px 20px; color: var(--text-muted); font-size: 14.5px; line-height: 23px; animation: rise .35s var(--ease-standard); }
  @keyframes rise { from { opacity: 0; transform: translateY(-4px); } }

  /* Démo */
  .demo { padding-block: 120px 96px; }
  .demo .box { display: grid; justify-items: center; gap: 32px; padding: 72px 56px 64px; border-radius: 32px; background: var(--bg-panel); box-shadow: var(--shadow-panneau); text-align: center; }
  .demo h2 { max-width: 680px; text-wrap: balance; }
  .demo-pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; max-width: 780px; }
  .demo-pts span { display: grid; justify-items: center; gap: 12px; color: var(--text-secondary); font-size: 14.5px; line-height: 21px; }
  .demo-pts em { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--bg-surface); color: var(--text-primary); }
  .demo-r { width: 100%; max-width: 460px; text-align: left; }
  .demo-note { margin: 12px 0 0; text-align: center; color: var(--text-faint); font-size: 13px; }
  form.sent .demo-note { display: none; }
  form { display: grid; gap: 10px; padding: 10px; border-radius: 26px; background: var(--bg-surface); }
  form .f { padding: 24px; border-radius: 18px; background: var(--bg-panel); box-shadow: var(--shadow-carte); display: grid; gap: 14px; }
  label { display: grid; gap: 6px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--text-secondary); }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  input, select { width: 100%; min-width: 0; height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--control-rest); color: var(--text-primary); font: 400 14.5px/20px var(--font-sans); outline: none; transition: background .2s var(--ease-standard), box-shadow .2s var(--ease-standard); appearance: none; -webkit-appearance: none; }
  input::placeholder { color: var(--text-faint); }
  input:hover, select:hover { background: var(--control-hover); }
  input:focus, select:focus { background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--border-field-focus), 0 0 0 4px var(--focus-halo); }
  select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9s-4.42 6-6 6-6-6-6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
  form .btn { width: 100%; height: 50px; }
  form .note { text-align: center; color: var(--text-faint); font-size: 12.5px; padding: 2px 8px 6px; }
  .done { display: none; text-align: center; padding: 48px 24px; border-radius: 18px; background: var(--bg-panel); box-shadow: var(--shadow-carte); }
  .done .ok { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 99px; background: var(--status-done); color: #fff; display: grid; place-items: center; animation: pop .5s var(--ease-standard); }
  .done b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
  .done p { margin: 8px 0 0; color: var(--text-muted); font-size: 14px; }
  form.sent .f, form.sent .note { display: none; } form.sent .done { display: block; }
  @keyframes pop { from { opacity: 0; transform: scale(.6); } }

  /* Calculateur */
  .calc { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 12px; margin-top: 44px; padding: 10px; border-radius: 30px; background: var(--bg-surface); }
  .calc-in { padding: 30px 30px 26px; display: grid; gap: 26px; align-content: start; }
  .rg { display: grid; gap: 12px; }
  .rg-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; font-weight: 500; color: var(--text-secondary); }
  .rg-h b { font-size: 18px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
  .calc input[type=range] { --v: 50%; width: 100%; height: 24px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; }
  .calc input[type=range]:hover, .calc input[type=range]:focus { background: transparent; box-shadow: none; }
  .calc input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 9px; background: linear-gradient(var(--action-primary), var(--action-primary)) 0 / var(--v) 100% no-repeat, var(--bg-surface-pressed); }
  .calc input[type=range]::-moz-range-track { height: 6px; border-radius: 9px; background: linear-gradient(var(--action-primary), var(--action-primary)) 0 / var(--v) 100% no-repeat, var(--bg-surface-pressed); }
  .calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 99px; background: #fff; box-shadow: 0 1px 3px rgba(28, 25, 23, .25), 0 0 0 1px rgba(28, 25, 23, .06); transition: transform .15s var(--ease-standard); }
  .calc input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 99px; background: #fff; box-shadow: 0 1px 3px rgba(28, 25, 23, .25); }
  .calc input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
  .calc input[type=range]:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 4px; border-radius: 8px; }
  .calc-note { margin: 0; color: var(--text-faint); font-size: 13px; line-height: 20px; }
  .calc-out { display: grid; gap: 18px; align-content: start; padding: 30px; border-radius: 22px; background: var(--bg-panel); box-shadow: var(--shadow-panneau); }
  .kpi2 b { display: block; font-size: 52px; line-height: 56px; letter-spacing: -2px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .kpi2 span { display: block; margin-top: 4px; color: var(--text-muted); font-size: 14.5px; }
  .kpi2 em { font-style: normal; color: var(--text-primary); font-weight: 500; }
  .kpi2 + .kpi2 b { font-size: 36px; line-height: 42px; letter-spacing: -1.2px; }
  .vs { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--bg-surface); font-size: 14px; color: var(--text-secondary); }
  .vs b { font-weight: 600; color: var(--text-primary); }
  .ratio { margin: 0; font-size: 15px; color: var(--text-secondary); }
  .ratio b { color: var(--text-primary); }
  .calc-out .btn { width: 100%; }
  .bump { animation: bump .35s var(--ease-standard); }
  @keyframes bump { 40% { transform: translateY(-2px); } }

  /* Comparatif */
  .cmp-seg { display: flex; width: max-content; gap: 2px; margin: 28px auto 0; padding: 4px; border-radius: 999px; background: var(--bg-surface-hover); }
  .cmp-seg button { border: 0; padding: 9px 20px; border-radius: 999px; background: none; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; color: var(--text-muted); cursor: pointer; transition: background .2s var(--ease-standard), color .2s var(--ease-standard); }
  .cmp-seg button:hover { color: var(--text-primary); }
  .cmp-seg button.on { background: var(--bg-panel); color: var(--text-primary); box-shadow: 0 1px 2px rgba(28, 25, 23, .1); }
  .cmp-seg button:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
  .cmp { max-width: 820px; margin: 24px auto 0; display: grid; gap: 6px; }
  .cr { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px 22px; border-radius: 18px; background: var(--bg-panel); box-shadow: 0 1px 2px rgba(28, 25, 23, .05); font-size: 14.5px; line-height: 21px; }
  .cr b { font-weight: 500; color: var(--text-muted); }
  .cr .old, .cr .new { display: flex; gap: 10px; align-items: flex-start; }
  .cr .old { color: var(--text-muted); } .cr .old svg { color: var(--text-faint); flex-shrink: 0; margin-top: 2px; }
  .cr .new { color: var(--text-primary); font-weight: 500; } .cr .new svg { color: var(--text-primary); flex-shrink: 0; margin-top: 2px; }
  .cmp[data-show="new"] .old, .cmp[data-show="old"] .new { display: none; }

  /* Témoignages */
  .quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 40px; text-align: left; }
  .quote { margin: 0; padding: 26px; border-radius: 22px; background: var(--bg-panel); box-shadow: var(--shadow-carte); }
  .quote p { margin: 0; font-size: 16px; line-height: 25px; }
  .quote .who { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13px; color: var(--text-muted); }
  .quote .who b { display: block; color: var(--text-primary); font-weight: 500; }
  .quote .res { display: inline-block; margin-bottom: 12px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }

  /* Facturation et formules */
  .bill { display: inline-flex; gap: 2px; margin-top: 28px; padding: 4px; border-radius: 99px; background: var(--control-rest); }
  .bill button { height: 36px; padding: 0 16px; border: 0; border-radius: 99px; background: transparent; color: var(--text-muted); font: 500 14px/20px var(--font-sans); cursor: pointer; transition: background .2s var(--ease-standard), color .2s; }
  .bill button span { margin-left: 6px; color: var(--text-success); font-size: 12.5px; }
  .bill button.on { background: var(--bg-panel); color: var(--text-primary); box-shadow: var(--shadow-carte); }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: 1096px !important; margin-top: 28px !important; }
  .plan.hot { background: var(--bg-surface-hover); }
  .plan .per { margin-top: 6px; min-height: 20px; color: var(--text-muted); font-size: 13px; }
  .plan .pr-q { font-size: 34px; }
  .plan .nm .pill { font-weight: 500; }

  /* Démo */
  .host { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 14px 18px 14px 14px; border-radius: 20px; background: var(--bg-surface); width: fit-content; }
  .av-lg { width: 48px; height: 48px; font-size: 15px; background: var(--bg-panel); }
  .host b { display: block; font-weight: 600; } .host small { color: var(--text-muted); font-size: 13.5px; }
  .cal { display: none; } form.cal-on .f, form.cal-on .done { display: none; } form.cal-on .cal { display: block; }
  .cal iframe { width: 100%; height: 620px; border: 0; border-radius: 18px; background: var(--bg-panel); }

  footer { padding: 28px 0 40px; color: var(--text-faint); font-size: 13px; }
  footer .wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  footer svg { width: 84px; height: auto; color: var(--text-muted); }
  footer a { color: var(--text-muted); text-decoration: none; } footer a:hover { color: var(--text-primary); }
  footer .sp { flex: 1; }

  /* Bouton flottant : la démo reste à portée de main */
    transform: translate(-50%, 130%); opacity: 0; transition: transform .45s var(--ease-standard), opacity .45s var(--ease-standard); white-space: nowrap; font-size: 14px; color: var(--text-secondary); }
  .glass { background: var(--bg-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

  /* Apparition au défilement */
  .js .rv { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-standard), transform .7s var(--ease-standard); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .rv.in { opacity: 1; transform: none; }
  .js h1 .w { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .7s var(--ease-standard), transform .7s var(--ease-standard), filter .7s var(--ease-standard); transition-delay: calc(var(--i) * 70ms + 100ms); }
  .js h1.in .w { opacity: 1; transform: none; filter: none; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
    .js .rv, .js h1 .w, .pain .now { opacity: 1; transform: none; filter: none; }
  }
  @media (max-width: 1000px) {
    h1 { font-size: 42px; line-height: 48px; letter-spacing: -1.2px; } h2 { font-size: 32px; line-height: 38px; }
    .top nav, .top .login { display: none; }
    .pains, .trust { grid-template-columns: 1fr 1fr; } .tpl, .demo .box, .calc { grid-template-columns: 1fr; } .plans { grid-template-columns: 1fr !important; }
    .cr { grid-template-columns: 1fr; gap: 6px; }
    .demo .box { padding: 40px 20px; } .demo-pts { grid-template-columns: 1fr; gap: 16px; }
    .coach { width: 230px; } .band { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 640px) { .pains, .trust { grid-template-columns: 1fr; } .wrap { padding-inline: 16px; } .two { grid-template-columns: 1fr; } }

/* ———————————————— Site : navigation, pages intérieures ———————————————— */

/* En-tête et menus déroulants */
.top .wrap { gap: 22px; }
.mnav { display: flex; align-items: center; gap: 2px; }
.mnav > a, .dd-b { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); font: 500 14px/20px var(--font-sans); text-decoration: none; cursor: pointer; transition: background .2s var(--ease-standard), color .2s var(--ease-standard); }
.mnav > a:hover, .dd-b:hover, .dd.open .dd-b, .mnav > a.on, .dd-b.on { background: var(--nav-hover); color: var(--text-primary); }
.dd-b svg { transition: transform .2s var(--ease-standard); }
.dd.open .dd-b svg { transform: rotate(180deg); }
.dd { position: relative; }
.dd-p { position: absolute; left: -12px; top: calc(100% + 10px); z-index: 50; min-width: 300px; padding: 10px; border-radius: 22px; background: var(--bg-panel); box-shadow: var(--shadow-popover); opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top left; transition: opacity .18s var(--ease-standard), transform .18s var(--ease-standard), visibility 0s .18s; }
.dd.open .dd-p { opacity: 1; visibility: visible; transform: none; transition: opacity .18s var(--ease-standard), transform .18s var(--ease-standard), visibility 0s; }
.dd-p::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.dd-cols { display: grid; grid-auto-flow: column; gap: 6px; }
.dd-col { display: grid; align-content: start; gap: 2px; min-width: 250px; }
.dd-col + .dd-col { padding-left: 6px; box-shadow: -1px 0 0 var(--border-divider); }
.dd-h { padding: 8px 12px 6px; color: var(--text-faint); font-size: 12px; font-weight: 500; }
.dd-i { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--text-primary); transition: background .2s var(--ease-standard); }
.dd-i:hover { background: var(--bg-surface); }
.dd-i .ic { width: 34px; height: 34px; border-radius: 11px; background: var(--bg-surface); display: grid; place-items: center; color: var(--text-secondary); flex-shrink: 0; transition: background .2s var(--ease-standard); }
.dd-i:hover .ic { background: var(--bg-panel); }
.dd-i b { display: block; font-size: 14px; font-weight: 500; }
.dd-i small { display: block; color: var(--text-muted); font-size: 12.5px; line-height: 18px; }
.dd-s { display: block; padding: 8px 12px; border-radius: 12px; color: var(--text-secondary); text-decoration: none; font-size: 14px; transition: background .2s var(--ease-standard), color .2s; }
.dd-s:hover { background: var(--bg-surface); color: var(--text-primary); }
.dd-all { display: block; margin-top: 4px; padding: 10px 12px; border-radius: 12px; color: var(--text-primary); font-size: 13.5px; font-weight: 500; text-decoration: none; background: var(--bg-surface); }
.dd-all:hover { background: var(--bg-surface-hover); }
.burger { display: none; width: 40px; height: 40px; border: 0; border-radius: 99px; background: var(--control-rest); color: var(--text-primary); align-items: center; justify-content: center; cursor: pointer; }
.mpanel { display: none; }
@media (max-width: 1080px) {
  .mnav, .top .login { display: none !important; }
  .burger { display: inline-flex; }
  .mpanel { position: fixed; inset: 72px 0 0; z-index: 29; display: block; overflow-y: auto; padding: 16px 16px 40px; background: var(--bg-canvas); opacity: 0; visibility: hidden; transition: opacity .2s var(--ease-standard), visibility 0s .2s; }
  .mpanel.open { opacity: 1; visibility: visible; transition: opacity .2s var(--ease-standard), visibility 0s; }
  .mpanel h4 { margin: 18px 12px 6px; color: var(--text-faint); font-size: 12px; font-weight: 500; }
  .mpanel a { display: block; padding: 12px; border-radius: 14px; color: var(--text-primary); text-decoration: none; font-size: 15px; }
  .mpanel a:hover { background: var(--bg-surface); }
}

/* En-tête de page */
.phero { padding-block: 64px 0; }
.phero.center { text-align: center; }
.crumb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--text-faint); font-size: 13px; }
.phero.center .crumb { justify-content: center; }
.crumb a { color: var(--text-muted); text-decoration: none; } .crumb a:hover { color: var(--text-primary); }
.phero h1 { margin: 18px 0 0; max-width: 860px; font-size: 52px; line-height: 58px; letter-spacing: -1.7px; }
.phero.center h1, .phero.center .lead { margin-inline: auto; }
.phero .lead { margin: 20px 0 0; max-width: 680px; }
.phero .cta { justify-content: flex-start; }
.phero.center .cta, .phero.center .reassure { justify-content: center; }
.phero .reassure { justify-content: flex-start; }
.chip-l { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 10px 14px; border-radius: 14px; background: var(--bg-surface); color: var(--text-secondary); font-size: 13.5px; }
.chip-l b { font-weight: 600; color: var(--text-primary); }
.phero-shot { margin-top: 56px; }
.screen.auto { height: auto; min-height: 560px; }
.scenes { position: relative; height: 100%; overflow: hidden; padding: 0 !important; }
.screen .scenes { min-height: 540px; }

/* Grilles de cartes */
.g2, .g3, .g4 { display: grid; gap: 12px; margin-top: 40px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card2 { display: block; padding: 10px; border-radius: 26px; background: var(--bg-surface); text-decoration: none; color: inherit; transition: transform .25s var(--ease-standard); }
a.card2:hover { transform: translateY(-3px); }
.card2 .in2 { height: 100%; padding: 24px; border-radius: 18px; background: var(--bg-panel); box-shadow: var(--shadow-carte); }
.card2 .ic { width: 40px; height: 40px; border-radius: 13px; background: var(--bg-surface); display: grid; place-items: center; color: var(--text-secondary); }
.card2 h3 { margin: 18px 0 6px; font-size: 17px; line-height: 23px; letter-spacing: -.3px; font-weight: 600; }
.card2 p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 22px; }
.card2 .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--text-primary); font-size: 13.5px; font-weight: 500; }
.card2 .more svg { transition: transform .2s var(--ease-standard); }
a.card2:hover .more svg { transform: translateX(3px); }
.card2 .tagl { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border-radius: 99px; background: var(--bg-surface); color: var(--text-muted); font-size: 11.5px; font-weight: 500; }
.tile { padding: 22px; border-radius: 22px; background: var(--bg-surface); }
.tile svg { color: var(--text-secondary); }
.tile b { display: block; margin-top: 12px; font-size: 15px; font-weight: 600; }
.tile small, .tile p { display: block; margin: 4px 0 0; color: var(--text-muted); font-size: 13.5px; line-height: 21px; }

/* Étapes numérotées */
.nsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 44px; }
.nstep { padding-top: 18px; box-shadow: inset 0 1px 0 var(--border-divider); }
.nstep .n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 99px; background: var(--action-primary); color: var(--text-on-primary); font-size: 12.5px; font-weight: 600; }
.nstep h3 { margin: 14px 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.nstep p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 23px; }

/* Moments métier */
.mom { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; margin-top: 44px; align-items: start; }
.mom-l { display: grid; gap: 4px; position: sticky; top: 96px; }
.mbtn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px 12px 12px; border: 0; border-radius: 18px; background: transparent; text-align: left; cursor: pointer; font: inherit; color: var(--text-secondary); transition: background .2s var(--ease-standard), box-shadow .2s, color .2s; }
.mbtn:hover { background: var(--bg-surface); }
.mbtn .mi2 { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-surface); color: var(--text-muted); flex-shrink: 0; transition: background .2s var(--ease-standard), color .2s; }
.mbtn b { display: block; font-size: 14.5px; font-weight: 500; color: var(--text-primary); }
.mbtn small { display: block; color: var(--text-faint); font-size: 12.5px; }
.mbtn.on { background: var(--bg-panel); box-shadow: var(--shadow-carte); }
.mbtn.on .mi2 { background: var(--action-primary); color: var(--text-on-primary); }
.mom-r { display: grid; padding: 10px; border-radius: 28px; background: var(--bg-surface); }
.mpan { grid-area: 1 / 1; padding: 30px; border-radius: 20px; background: var(--bg-panel); box-shadow: var(--shadow-panneau); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s var(--ease-standard), transform .35s var(--ease-standard), visibility 0s .35s; }
.mpan.on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease-standard), transform .35s var(--ease-standard), visibility 0s; }
.mp-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-meta a, .mp-meta span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--bg-surface); color: var(--text-secondary); font-size: 12.5px; font-weight: 500; text-decoration: none; }
.mp-meta a:hover { background: var(--bg-surface-hover); }
.mpan h3 { margin: 16px 0 0; font-size: 26px; line-height: 32px; letter-spacing: -.6px; font-weight: 600; }
.mpan > p { margin: 8px 0 0; color: var(--text-muted); font-size: 15px; }
.mp-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; margin-top: 22px; }
.mp-cols .sect-h { margin: 0 0 10px; }
.mp-cols .pc { margin-top: 6px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 22px; color: var(--text-secondary); }
.ticks li svg { flex-shrink: 0; margin-top: 2px; color: var(--status-done); }
.mp-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }

/* Tableaux */
.tbl { width: 100%; margin-top: 36px; border-collapse: separate; border-spacing: 0 6px; font-size: 14.5px; text-align: left; }
.tbl th { padding: 0 18px 6px; color: var(--text-faint); font-size: 12.5px; font-weight: 500; }
.tbl td { padding: 15px 18px; background: var(--bg-surface); vertical-align: top; line-height: 21px; }
.tbl td:first-child { border-radius: 16px 0 0 16px; font-weight: 500; }
.tbl td:last-child { border-radius: 0 16px 16px 0; }
.tbl td.muted { color: var(--text-muted); }
.tbl .ok-c { color: var(--text-success); font-weight: 500; }
.tbl .grp td { background: transparent; padding: 18px 18px 2px; color: var(--text-faint); font-size: 12.5px; font-weight: 500; }
.stat { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.stat i { width: 7px; height: 7px; border-radius: 99px; background: var(--status-draft); }
.stat.ok i { background: var(--status-done); } .stat.go i { background: var(--status-progress); } .stat.wait i { background: var(--status-waiting); }

/* Bloc arborescence et règles (modèles Share et Send) */
.tree { padding: 22px 24px; border-radius: 20px; background: var(--bg-surface); font-family: var(--font-mono); font-size: 13px; line-height: 26px; color: var(--text-secondary); }
.tree div:first-child { color: var(--text-primary); font-weight: 500; }
.tree div:not(:first-child)::before { content: "├ "; color: var(--text-faint); }
.tree div:last-child::before { content: "└ "; }

/* Filtres */
.chipsf { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 32px; }
.chipsf button { height: 36px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--control-rest); color: var(--text-secondary); font: 500 13.5px/20px var(--font-sans); cursor: pointer; transition: background .2s var(--ease-standard), color .2s; }
.chipsf button:hover { background: var(--control-hover); }
.chipsf button.on { background: var(--action-primary); color: var(--text-on-primary); }
[data-hide] { display: none !important; }

/* Études de cas */
.case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 28px; background: var(--bg-surface); }
.case + .case { margin-top: 12px; }
.case .l { padding: 26px; }
.case .l h3 { margin: 10px 0 0; font-size: 22px; letter-spacing: -.5px; font-weight: 600; }
.case .l p { margin: 10px 0 0; color: var(--text-muted); font-size: 14.5px; line-height: 23px; }
.case .l p b { color: var(--text-primary); font-weight: 500; }
.case .r { padding: 26px; border-radius: 20px; background: var(--bg-panel); box-shadow: var(--shadow-carte); display: grid; align-content: space-between; gap: 18px; }
.case blockquote { margin: 0; font-size: 19px; line-height: 28px; letter-spacing: -.3px; font-weight: 500; }

/* Texte long : documentation et mentions */
.doc { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; padding-top: 48px; align-items: start; }
.doc-nav { position: sticky; top: 96px; display: grid; gap: 2px; }
.doc-nav .dd-h { padding-left: 12px; }
.doc-nav a { display: block; padding: 8px 12px; border-radius: 12px; color: var(--text-muted); text-decoration: none; font-size: 14px; transition: background .2s, color .2s; }
.doc-nav a:hover { background: var(--bg-surface); color: var(--text-primary); }
.doc-nav a.on { background: var(--bg-panel); color: var(--text-primary); font-weight: 500; box-shadow: var(--shadow-carte); }
.prose { max-width: 760px; font-size: 15.5px; line-height: 26px; color: var(--text-secondary); }
.prose h1 { margin: 0; font-size: 40px; line-height: 46px; letter-spacing: -1.2px; color: var(--text-primary); }
.prose h2 { margin: 44px 0 0; font-size: 24px; line-height: 30px; letter-spacing: -.5px; color: var(--text-primary); scroll-margin-top: 96px; }
.prose h3 { margin: 28px 0 0; font-size: 17px; line-height: 24px; color: var(--text-primary); scroll-margin-top: 96px; }
.prose h4 { margin: 22px 0 0; font-size: 15px; color: var(--text-primary); }
.prose p, .prose ul, .prose ol { margin: 12px 0 0; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 4px; }
.prose a { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--border-ring); text-underline-offset: 3px; }
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--bg-surface); font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); }
.prose pre { margin: 14px 0 0; padding: 16px 18px; border-radius: 16px; background: var(--bg-surface); overflow-x: auto; line-height: 21px; }
.prose pre code { padding: 0; background: transparent; font-size: 12.5px; }
.prose table { width: 100%; margin-top: 14px; border-collapse: separate; border-spacing: 0 4px; font-size: 14px; }
.prose th { padding: 6px 12px; text-align: left; color: var(--text-faint); font-size: 12.5px; font-weight: 500; }
.prose td { padding: 10px 12px; background: var(--bg-surface); vertical-align: top; }
.prose td:first-child { border-radius: 12px 0 0 12px; } .prose td:last-child { border-radius: 0 12px 12px 0; }
.prose blockquote { margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--bg-surface); color: var(--text-secondary); }
.prose hr { border: 0; height: 1px; background: var(--border-divider); margin: 32px 0; }
.prose .lead2 { margin-top: 12px; color: var(--text-muted); font-size: 17px; line-height: 27px; }

/* Bandeau final */
.endband { margin-top: 120px; }
.endband .band { margin-top: 0; }

/* Pied de page complet */
footer.big { margin-top: 120px; padding: 56px 0 40px; box-shadow: inset 0 1px 0 var(--border-divider); }
footer.big .wrap { display: block; }
.fcols { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.fcols h4 { margin: 0 0 12px; color: var(--text-primary); font-size: 13.5px; font-weight: 600; }
.fcols a { display: block; padding: 4px 0; color: var(--text-muted); text-decoration: none; font-size: 14px; }
.fcols a:hover { color: var(--text-primary); }
.fcols p { margin: 14px 0 0; max-width: 260px; color: var(--text-muted); font-size: 14px; line-height: 22px; }
.fbot { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-top: 48px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--border-divider); color: var(--text-faint); font-size: 13px; }
.fbot .sp { flex: 1; }
.fbot a { color: var(--text-muted); text-decoration: none; } .fbot a:hover { color: var(--text-primary); }

@media (max-width: 1000px) {
  .phero h1 { font-size: 38px; line-height: 44px; }
  .g3, .g4, .nsteps, .case, .mp-cols { grid-template-columns: 1fr; } .g2 { grid-template-columns: 1fr; }
  .mom { grid-template-columns: 1fr; } .mom-l { position: static; grid-auto-flow: column; overflow-x: auto; grid-auto-columns: minmax(220px, 1fr); }
  .doc { grid-template-columns: 1fr; gap: 24px; } .doc-nav { position: static; grid-auto-flow: column; overflow-x: auto; }
  .fcols { grid-template-columns: 1fr 1fr; }
  .tbl { display: block; overflow-x: auto; }
}
@media (max-width: 560px) { .top .wrap > .btn-sm { display: none; } .top .wrap { gap: 12px; } }

/* Offre métier */
.offer { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; margin-top: 44px; padding: 10px; border-radius: 30px; background: var(--bg-surface); }
.offer-l { padding: 30px; }
.offer-l .sect-h { margin-top: 0; }
.offer-l .ticks li { font-size: 15px; }
.offer-r { display: grid; align-content: start; gap: 14px; padding: 30px; border-radius: 22px; background: var(--bg-panel); box-shadow: var(--shadow-panneau); }
.offer-r .from { color: var(--text-faint); font-size: 13px; font-weight: 500; }
.offer-r .big { font-size: 48px; line-height: 52px; letter-spacing: -1.8px; font-weight: 600; }
.offer-r .big small { font-size: 15px; letter-spacing: 0; color: var(--text-muted); font-weight: 500; }
.offer-r p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 22px; }
.offer-r .btn { width: 100%; }
.lives .pain { padding: 0; background: none; margin-top: 14px; }
@media (max-width: 1000px) { .offer { grid-template-columns: 1fr; } }

/* Menu Solutions, large */
.dd-wide .dd-p { left: -140px; }
.dd-col-s { min-width: 228px; }
.dd-col-s .dd-s { padding: 7px 12px; }
.dd-p2 { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 6px; color: var(--text-muted) !important; font-size: 13px !important; }
.dd-p2:hover { color: var(--text-primary) !important; }

/* Navigation : survols en angles doux, jamais en pastille */
.top .mnav > a, .top .mnav .dd-b { border-radius: 999px; }
.top .mnav .dd-p a { border-radius: 12px; font-size: 14px; color: var(--text-primary); }
.top .mnav .dd-p a.dd-i { padding: 10px 12px; }
.top .mnav .dd-p a.dd-s { padding: 7px 12px; color: var(--text-secondary); }
.top .mnav .dd-p a.dd-s:hover { color: var(--text-primary); }
.top .mnav .dd-p a.dd-all { padding: 10px 12px; font-size: 13.5px; }
.mpanel a { border-radius: 12px; }

/* Moment : le modèle montré comme dans l'app */
.mp-vis { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.mw { padding: 8px; border-radius: 22px; background: var(--bg-canvas); box-shadow: 0 0 0 1px rgba(28, 25, 23, 0.04), 0 18px 44px rgba(28, 25, 23, 0.10), 0 2px 8px rgba(28, 25, 23, 0.04); }
.mw-in { padding: 16px 16px 12px; border-radius: 16px; background: var(--bg-panel); box-shadow: var(--shadow-carte); }
.mw-h { display: flex; align-items: center; gap: 10px; }
.mw-h .ic { width: 32px; height: 32px; border-radius: 10px; background: var(--bg-surface); display: grid; place-items: center; color: var(--text-secondary); flex-shrink: 0; }
.mw-h > span:nth-child(2) { flex: 1; min-width: 0; }
.mw-h b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.mw-h small { display: block; color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-surface); font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.mw-sum .mini { background: var(--bg-surface-hover); }
.mw-rows { display: grid; gap: 5px; margin-top: 8px; }
.mw-row { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 10px 6px 8px; border-radius: 12px; background: var(--bg-surface); font-size: 13px; }
.mw-row .fi { width: 26px; height: 26px; border-radius: 8px; background: var(--bg-panel); display: grid; place-items: center; color: var(--text-muted); flex-shrink: 0; }
.mw-row b { font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-row .chip { flex-shrink: 0; }
.mw-row .swap { flex-shrink: 0; font-size: 12px; white-space: nowrap; }
.mw-st { color: var(--text-faint); }
.mw-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0 4px; color: var(--text-faint); font-size: 12px; }
.mtl { margin-top: 4px; }
.mtl .s b { font-size: 14px; line-height: 21px; }
.mtl .s small { display: block; color: var(--text-faint); font-size: 12px; margin-top: 2px; }
.mp-vis { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; }
.mp-vis > * { min-width: 0; }
.mw-row b { flex: 1 1 auto; }
.mw-row .swap { margin-left: 0 !important; }
.mw-rows { grid-template-columns: minmax(0, 1fr); }
.mw-row { min-width: 0; }
.mw-row b { width: 0; }
/* Le modèle prend toute la largeur, les étapes Hubflow se lisent dessous, de gauche à droite */
.mp-vis { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.mtl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 0; }
.mtl .s { grid-template-columns: 28px minmax(0, 1fr); padding: 14px 14px 14px 12px; border-radius: 16px; background: var(--bg-surface); transition: background .35s var(--ease-standard), box-shadow .35s var(--ease-standard); }
.mtl .s::before { display: none; }
.mtl .s.is { background: var(--bg-panel); box-shadow: var(--shadow-carte); }
@media (max-width: 1000px) { .mtl { grid-template-columns: 1fr; } }

/* Moment, version simple */
.ms-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ms-top h3 { margin: 0 !important; }
.ms-top span { color: var(--text-faint); font-size: 13px; font-weight: 500; }
.ms-rows { display: grid; gap: 6px; margin-top: 22px; }
.ms-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; padding: 8px 16px; border-radius: 14px; background: var(--bg-surface); font-size: 14px; }
.ms-row b { font-weight: 500; }
.ms-row .swap { flex-shrink: 0; font-size: 13px; white-space: nowrap; }
.ms-t { margin-top: 22px; }

/* Pièces d'un moment : une ligne comme dans l'app, qui passe au vert à la réception */
.ms-rows { gap: 8px; }
.ms-row { gap: 14px; min-height: 62px; padding: 10px 12px 10px 10px; border-radius: 18px; transition: background .35s var(--ease-standard); }
.ms-row:has(.st2.is) { animation: flash 1.2s var(--ease-standard); }
.ms-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--bg-panel); box-shadow: var(--shadow-carte); color: var(--text-muted); flex-shrink: 0; transition: background .35s var(--ease-standard), color .35s var(--ease-standard), box-shadow .35s; }
.ms-ic > span { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .3s var(--ease-standard), transform .4s var(--ease-standard); }
.ms-ic .tk { opacity: 0; transform: scale(.4); }
.ms-row:has(.st2.is) .ms-ic { background: var(--status-done); color: #fff; box-shadow: none; }
.ms-row:has(.st2.is) .ms-ic .fl { opacity: 0; transform: scale(.6); }
.ms-row:has(.st2.is) .ms-ic .tk { opacity: 1; transform: none; }
.ms-tx { flex: 1; min-width: 0; }
.ms-tx b { display: block; font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-tx small { display: block; margin-top: 1px; color: var(--text-faint); font-size: 12.5px; }
.st2 { flex-shrink: 0; }
.st2 > span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; background: var(--bg-panel); font-size: 12.5px; font-weight: 500; white-space: nowrap; justify-self: end; }
.st2 .w { color: var(--text-muted); } .st2 .w i { width: 6px; height: 6px; border-radius: 99px; background: var(--status-draft); }
.st2 .r { color: var(--text-success); } .st2 .r i { width: 6px; height: 6px; border-radius: 99px; background: var(--status-done); }
/* Moment statique : le modèle, sans animation */
.ms-row { animation: none !important; }
.st2 > span { color: var(--text-muted); }
.ms-t0 { margin-top: 0; }

/* Maillage entre métiers */
.rel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 28px; }
.rel span { margin-right: 6px; color: var(--text-faint); font-size: 13px; font-weight: 500; }
.rel a { padding: 6px 12px; border-radius: 99px; background: var(--control-rest); color: var(--text-secondary); font-size: 13.5px; text-decoration: none; transition: background .2s var(--ease-standard), color .2s; }
.rel a:hover { background: var(--control-hover); color: var(--text-primary); }

/* ——— Fragments d'interface (repris de l'ancien site, au nouveau design) ——— */
.ui2 { margin-top: 18px; padding: 6px; border-radius: 18px; background: var(--bg-surface); text-align: left; }
.ui2-h { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px 6px; color: var(--text-faint); font-size: 12px; font-weight: 500; }
.ui2-r { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 4px; padding: 7px 10px; border-radius: 12px; background: var(--bg-panel); font-size: 13px; }
.ui2-h + .ui2-r { margin-top: 0; }
.ui2-r .av { width: 28px; height: 28px; font-size: 10.5px; flex-shrink: 0; }
.ui2-r .l { flex: 1; min-width: 0; }
.ui2-r .l b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui2-r .l small { display: block; color: var(--text-muted); font-size: 11.5px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui2-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px 4px; color: var(--text-muted); font-size: 12px; }
.pl2 { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px; background: var(--bg-surface); color: var(--text-secondary); font-size: 11.5px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.pl2 i { width: 6px; height: 6px; border-radius: 99px; background: var(--status-draft); }
.pl2.ok { color: var(--text-success); } .pl2.ok i { background: var(--status-done); }
.pl2.err { color: var(--text-danger); } .pl2.err i { background: var(--text-danger); }
.pl2.wait i { background: var(--status-waiting); } .pl2.info i { background: var(--status-progress); }
.ch2 { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 8px; background: var(--bg-panel); color: var(--text-secondary); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.mono2 { font-family: var(--font-mono); font-size: 11.5px; }
.card2 .ui2 { margin-top: 18px; }
.nstep .ui2 { margin-top: 18px; }

/* Avant / après */
.ba2 { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 44px; }
.ba2 .lbl { margin-bottom: 14px; color: var(--text-muted); font-size: 13px; font-weight: 500; }
.ba2 .lbl.bad { color: var(--text-danger); }
.ba2-arrow { width: 44px; height: 44px; border-radius: 99px; background: var(--bg-panel); box-shadow: var(--shadow-carte); display: grid; place-items: center; color: var(--text-secondary); }
.em2-stack { display: grid; padding: 6px 10px; }
.em2 { padding: 14px 16px; border-radius: 16px; background: var(--bg-panel); box-shadow: var(--shadow-carte); transform: rotate(var(--r, 0deg)); font-size: 13px; }
.em2 + .em2 { margin-top: -6px; }
.em2 .h { display: flex; align-items: center; gap: 10px; }
.em2 .h .av { width: 28px; height: 28px; font-size: 10.5px; }
.em2 .h b { display: block; font-size: 13px; font-weight: 600; } .em2 .h small { display: block; color: var(--text-faint); font-size: 11.5px; }
.em2 .s { margin-top: 8px; font-weight: 600; }
.em2 .t { margin-top: 2px; color: var(--text-muted); line-height: 19px; }
.em2.q .t { margin-top: 0; color: var(--text-secondary); font-style: italic; }
.em2 .atts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.em2 .ch2 { background: var(--bg-surface); font-family: var(--font-mono); font-weight: 400; }
.em2 .ui2 { background: var(--bg-surface); } .em2 .ui2-r { min-height: 36px; }
.win3 { padding: 8px; border-radius: 22px; background: var(--bg-canvas); box-shadow: 0 0 0 1px rgba(28, 25, 23, 0.04), 0 18px 44px rgba(28, 25, 23, 0.10), 0 2px 8px rgba(28, 25, 23, 0.04); }
.win3 .in { padding: 14px; border-radius: 16px; background: var(--bg-panel); box-shadow: var(--shadow-carte); }
.win3 .wh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 10px; font-size: 14px; }
.win3 .wh b { font-weight: 600; }
.win3 .ui2-r { background: var(--bg-surface); }
.win3 .ui2-r .pl2 { background: var(--bg-panel); }
.bar2 { height: 5px; margin: 0 4px 10px; border-radius: 9px; background: var(--bg-surface-hover); overflow: hidden; }
.bar2 i { display: block; height: 100%; border-radius: 9px; background: var(--action-primary); }
.grp2 { padding: 12px 4px 4px; color: var(--text-faint); font-size: 12px; font-weight: 500; }

/* Conformité : chaque case cochée */
.cchk { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cchk span { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 99px; background: var(--bg-surface); color: var(--text-secondary); font-size: 13.5px; font-weight: 500; }
.cchk svg { color: var(--status-done); }

/* Bibliothèque de pièces */
.plib { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.plib span { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 8px; border-radius: 12px; background: var(--bg-surface); font-size: 14px; }
.plib span i { width: 24px; height: 24px; border-radius: 8px; background: var(--bg-panel); display: grid; place-items: center; color: var(--text-muted); font-style: normal; }
@media (max-width: 1000px) { .ba2 { grid-template-columns: 1fr; } .ba2-arrow { transform: rotate(90deg); margin: 0 auto; } }
/* Icône devant chaque métier dans le menu Solutions */
.top .mnav .dd-p a.dd-ic { display: flex; align-items: center; gap: 10px; }
.dd-ic svg { color: var(--text-muted); flex-shrink: 0; transition: color .2s; }
.dd-ic:hover svg { color: var(--text-primary); }

/* Les trois outils, mis en avant */
.prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 44px; }
.prod { display: block; padding: 10px; border-radius: 30px; background: var(--bg-surface); color: inherit; text-decoration: none; transition: transform .25s var(--ease-standard); }
.prod:hover { transform: translateY(-4px); }
.prod .in2 { height: 100%; display: flex; flex-direction: column; padding: 28px 26px 24px; border-radius: 22px; background: var(--bg-panel); box-shadow: var(--shadow-panneau); }
.prod-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prod-ic { width: 52px; height: 52px; border-radius: 16px; background: var(--bg-surface); color: var(--text-primary); display: grid; place-items: center; }
.prod-life { height: 26px; padding: 0 10px; border-radius: 99px; background: var(--bg-surface); color: var(--text-muted); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; }
.prod h3 { margin: 22px 0 0; font-size: 30px; line-height: 34px; letter-spacing: -.9px; font-weight: 600; }
.prod h3 span { color: var(--text-faint); }
.prod-tag { margin: 6px 0 0; color: var(--text-muted); font-size: 15px; }
.prod .ui2 { margin-top: 20px; }
.prod-ba { display: grid; gap: 6px; margin-top: 18px; font-size: 13.5px; line-height: 20px; }
.prod-ba .was { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--text-faint); }
.prod-ba .now { display: flex; gap: 8px; align-items: flex-start; color: var(--text-primary); font-weight: 500; }
.prod-ba .now svg { flex-shrink: 0; margin-top: 2px; color: var(--status-done); }
.prod-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin-top: auto; padding: 0 18px; border-radius: 99px; background: var(--control-rest); font-size: 14px; font-weight: 500; transition: background .2s var(--ease-standard); }
.prod .ui2 + .prod-ba + .prod-go, .prod-ba + .prod-go { margin-top: 22px; }
.prod:hover .prod-go { background: var(--action-primary); color: var(--text-on-primary); }
.prod-go .go { transition: transform .2s var(--ease-standard); } .prod:hover .prod-go .go { transform: translateX(3px); }
@media (max-width: 1000px) { .prods { grid-template-columns: 1fr; } }

/* Cartes outils, version texte */
.prod-tag { font-size: 15.5px !important; line-height: 24px; color: var(--text-secondary) !important; }
.prod-pts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.prod-pts li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--text-primary); }
.prod-pts li svg { color: var(--text-primary); flex-shrink: 0; }
.prod-pts { margin-bottom: 28px; }
.prod-pts + .prod-go { margin-top: auto; }

/* Six visuels distincts */
.viz { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; height: 158px; margin-top: 20px; padding: 16px; border-radius: 18px; background: var(--bg-surface); overflow: hidden; }
.viz-files .vf { display: grid; justify-items: center; gap: 10px; }
.doc3 { display: grid; align-content: start; gap: 7px; width: 70px; height: 86px; padding: 14px 10px; border-radius: 10px; background: var(--bg-panel); box-shadow: var(--shadow-carte); }
.doc3 i { display: block; height: 5px; border-radius: 3px; background: var(--bg-surface-pressed); }
.doc3.blur i { filter: blur(2px); opacity: .7; }
.viz .pl2 { background: var(--bg-panel); }
.tl3 { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
.tl3::before { content: ""; position: absolute; left: 12%; right: 12%; top: 11px; height: 2px; background: var(--bg-surface-pressed); }
.tl3 .pt { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; }
.tl3 .pt::before { content: ""; width: 22px; height: 22px; margin-bottom: 8px; border-radius: 99px; background: var(--bg-panel); box-shadow: inset 0 0 0 2px var(--bg-surface-pressed); }
.tl3 .pt.on::before { background: var(--action-primary); box-shadow: none; }
.tl3 .pt.ok::before { background: var(--status-done); box-shadow: 0 0 0 4px var(--bg-surface); }
.tl3 .pt b { font-size: 13px; font-weight: 600; } .tl3 .pt small { color: var(--text-muted); font-size: 11.5px; }
.tl3 .pt.off b, .tl3 .pt.off small { color: var(--text-faint); text-decoration: line-through; }
.viz-avs { gap: 22px; }
.va { position: relative; display: grid; justify-items: center; gap: 8px; }
.va .av { width: 54px; height: 54px; font-size: 15px; background: var(--bg-panel); box-shadow: var(--shadow-carte); }
.va i { position: absolute; top: 40px; right: -2px; width: 14px; height: 14px; border-radius: 99px; box-shadow: 0 0 0 3px var(--bg-surface); }
.va i.ok { background: var(--status-done); } .va i.wait { background: var(--status-waiting); } .va i.info { background: var(--status-progress); }
.va small { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.rq { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; width: 100%; padding: 14px; border-radius: 14px; background: var(--bg-panel); box-shadow: var(--shadow-popover); }
.rq .av { width: 34px; height: 34px; }
.rq-t b { display: block; font-size: 13.5px; font-weight: 600; } .rq-t small { display: block; color: var(--text-muted); font-size: 12px; }
.rq-b { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rq-b span { display: grid; place-items: center; height: 32px; border-radius: 99px; font-size: 12.5px; font-weight: 500; }
.rq-b .b0 { background: var(--control-rest); color: var(--text-secondary); } .rq-b .b1 { background: var(--action-primary); color: var(--text-on-primary); }
.seal { width: 64px; height: 64px; border-radius: 99px; background: var(--bg-panel); box-shadow: var(--shadow-carte); display: grid; place-items: center; color: var(--text-primary); flex-shrink: 0; }
.pf { display: grid; gap: 3px; justify-items: start; }
.pf b { font-size: 14px; font-weight: 600; } .pf small { color: var(--text-muted); font-size: 12px; }
.pf .mono2, .pf .pl2 { margin-top: 6px; }
.pf .mono2 { padding: 4px 8px; border-radius: 8px; background: var(--bg-panel); color: var(--text-secondary); }
.cal3 { display: grid; justify-items: center; width: 72px; padding: 8px 0 10px; border-radius: 14px; background: var(--bg-panel); box-shadow: var(--shadow-carte); flex-shrink: 0; }
.cal3 small { color: var(--text-danger); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.cal3 b { font-size: 30px; line-height: 34px; font-weight: 600; letter-spacing: -1px; }
/* Cartes outils : titres plus discrets */
.prod h3 { margin-top: 18px; font-size: 22px; line-height: 28px; letter-spacing: -.5px; }
.prod-ic { width: 44px !important; height: 44px !important; border-radius: 14px !important; }
.prod-tag { font-size: 14.5px !important; line-height: 22px; }
/* Plus de surtitres au-dessus des titres */
.kicker { display: none !important; }
.phero h1 { margin-top: 0; }

/* ——— Illustrations minimalistes, en gris uniquement ——— */
.viz { height: 132px; gap: 14px; padding: 14px; border-radius: 16px; }
.doc3 { width: 46px; height: 58px; gap: 5px; padding: 10px 8px; border-radius: 8px; box-shadow: 0 1px 2px rgba(28, 25, 23, .06); }
.doc3 i { height: 3px; border-radius: 2px; background: var(--bg-surface-hover); }
.doc3.blur i { filter: blur(1.5px); opacity: .9; }
.viz-files .vf { gap: 8px; }
.viz .pl2, .ui2 .pl2, .win3 .pl2 { height: 22px; padding: 0 8px; font-size: 11px; }
/* Pastilles : plus de bleu, d'orange ni de vert, seulement des gris */
.pl2, .pl2.ok, .pl2.err, .pl2.wait, .pl2.info { color: var(--text-secondary); }
.pl2 i, .pl2.wait i, .pl2.info i { background: var(--bg-surface-pressed); }
.pl2.ok i { background: var(--text-primary); }
.pl2.err { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-faint); }
.pl2.err i { background: var(--text-faint); }
.tl3::before { top: 5px; height: 1px; background: var(--bg-surface-pressed); }
.tl3 .pt::before { width: 11px; height: 11px; margin-bottom: 8px; box-shadow: inset 0 0 0 1.5px var(--bg-surface-pressed); }
.tl3 .pt.on::before { background: var(--text-muted); }
.tl3 .pt.ok::before { background: var(--text-primary); box-shadow: 0 0 0 3px var(--bg-surface); }
.tl3 .pt b { font-size: 12px; font-weight: 500; } .tl3 .pt small { font-size: 11px; color: var(--text-faint); }
.viz-avs { gap: 18px; }
.va .av { width: 38px; height: 38px; font-size: 12px; box-shadow: 0 1px 2px rgba(28, 25, 23, .06); }
.va i { top: 28px; right: -1px; width: 10px; height: 10px; box-shadow: 0 0 0 2px var(--bg-surface); }
.va i.ok { background: var(--text-primary); } .va i.wait { background: var(--text-faint); } .va i.info { background: var(--bg-surface-pressed); }
.va small { font-size: 11px; color: var(--text-faint); }
.rq { gap: 8px 10px; padding: 10px 12px; border-radius: 12px; box-shadow: 0 1px 2px rgba(28, 25, 23, .06); }
.rq .av { width: 26px; height: 26px; font-size: 10px; }
.rq-t b { font-size: 12.5px; font-weight: 500; } .rq-t small { font-size: 11px; color: var(--text-faint); }
.rq-b span { height: 24px; font-size: 11px; }
.seal { width: 44px; height: 44px; box-shadow: 0 1px 2px rgba(28, 25, 23, .06); color: var(--text-secondary); }
.seal svg { width: 20px; height: 20px; }
.pf b { font-size: 12.5px; font-weight: 500; } .pf small { font-size: 11px; color: var(--text-faint); }
.pf .mono2 { font-size: 10.5px; padding: 2px 6px; }
.cal3 { width: 52px; padding: 6px 0 8px; border-radius: 10px; box-shadow: 0 1px 2px rgba(28, 25, 23, .06); }
.cal3 small { color: var(--text-faint); font-size: 9.5px; }
.cal3 b { font-size: 20px; line-height: 24px; font-weight: 500; }
/* Autres touches de couleur des blocs : en gris */
.cchk svg, .ba2 .lbl.bad { color: var(--text-muted); }
.prod-ba .now svg, .ticks li svg { color: var(--text-primary); }

/* Jamais de vert pour les coches et les états « fait » : tout passe en gris foncé */
:root { --status-done: #44403c; --text-success: #1c1917; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --status-done: #d6d3d1; --text-success: #fafaf9; } }
:root[data-theme="dark"] { --status-done: #d6d3d1; --text-success: #fafaf9; }
.cchk svg { color: var(--text-primary); }

/* Fichiers refusés : un document moitié flou, moitié net (variante 10) */
.viz-split { flex-direction: column; gap: 10px; height: 150px; }
.sp-doc { position: relative; display: grid; align-content: start; gap: 8px; width: 86px; height: 104px; padding: 16px 13px; border-radius: 10px; background: var(--bg-panel); box-shadow: 0 1px 3px rgba(28, 25, 23, .08), 0 6px 16px rgba(28, 25, 23, .06); overflow: hidden; }
.sp-doc i { display: block; height: 4px; border-radius: 2px; background: var(--bg-surface-pressed); }
.sp-doc i:first-child { height: 6px; background: var(--text-faint); }
.sp-veil { position: absolute; inset: 0 50% 0 0; backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); background: rgba(255, 255, 255, .25); box-shadow: 1px 0 0 var(--bg-surface-hover); }
.sp-lbl { display: grid; grid-template-columns: 1fr 1fr; width: 86px; text-align: center; font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.sp-lbl .off { color: var(--text-faint); text-decoration: line-through; }
.viz { height: 150px; }
.sp-doc i { background: var(--text-faint); opacity: .55; } .sp-doc i:first-child { background: var(--text-secondary); opacity: .8; }
.sp-veil { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* Relances : la semaine, un point sous les jours de relance */
.viz-wk { gap: 6px; }
.viz-wk .d { display: grid; justify-items: center; gap: 6px; }
.viz-wk b { width: 32px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--bg-panel); box-shadow: 0 1px 2px rgba(28, 25, 23, .06); font-size: 12.5px; font-weight: 500; color: var(--text-faint); }
.viz-wk .on b { color: var(--text-primary); font-weight: 600; }
.viz-wk .d::after { content: ""; width: 5px; height: 5px; border-radius: 99px; }
.viz-wk .on::after { background: var(--text-primary); }

/* Chacun dépose sa part : l'avancement de chacun */
.pp { display: grid; gap: 6px; width: 220px; }
.pp > span { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--bg-panel); box-shadow: 0 1px 2px rgba(28, 25, 23, .05); }
.pp .av { width: 24px; height: 24px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--bg-surface); box-shadow: none; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.pp b { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: var(--text-primary); }
.pp-bar { width: 48px; height: 4px; border-radius: 9px; background: var(--bg-surface-pressed); overflow: hidden; }
.pp-bar i { display: block; height: 100%; background: var(--text-primary); }

/* Vous choisissez qui voit quoi : un interrupteur par personne */
.acc-sw { position: relative; flex: none; width: 26px; height: 15px; border-radius: 999px; background: var(--bg-surface-pressed); transition: background .2s var(--ease-standard); }
.acc-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(28, 25, 23, .15); }
.acc-sw.on { background: var(--text-primary); }
.acc-sw.on::after { left: 13px; background: var(--bg-panel); }

/* Chaque envoi est prouvé : le certificat */
.cert { display: flex; align-items: center; gap: 14px; width: 210px; padding: 14px 16px; border-radius: 14px; background: var(--bg-panel); box-shadow: 0 1px 3px rgba(28, 25, 23, .08), 0 6px 16px rgba(28, 25, 23, .05); }
.cert-t { flex: 1; min-width: 0; display: grid; gap: 4px; }
.cert-t b { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.cert-t small { font-size: 11px; color: var(--text-faint); }
.cert-t i { height: 3px; border-radius: 2px; background: var(--bg-surface-pressed); opacity: .6; }
.cert-t i + i { width: 60%; }
.cert-s { flex: none; color: var(--text-primary); display: grid; }

/* Rien ne traîne : la durée de conservation */
.keep { display: grid; gap: 1px; width: 180px; padding: 7px 8px; border-radius: 14px; background: var(--bg-panel); box-shadow: 0 1px 3px rgba(28, 25, 23, .08), 0 6px 16px rgba(28, 25, 23, .05); line-height: 16px; }
.keep small { padding: 2px 8px 4px; font-size: 11px; color: var(--text-faint); }
.keep span { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: 12px; color: var(--text-muted); }
.keep span i { flex: none; width: 11px; height: 11px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--bg-surface-pressed); }
.keep span.on { background: var(--bg-surface); color: var(--text-primary); font-weight: 500; }
.keep span.on i { box-shadow: inset 0 0 0 3.5px var(--text-primary); }

/* Avant / après : l'après au premier plan, l'avant estompé derrière */
.ba3 { position: relative; display: grid; max-width: 640px; margin: 48px auto 0; padding: 10px 0; }
.ba3-bk { position: absolute; left: 0; top: 0; width: 340px; pointer-events: none; }
.ba3-bk .em2 { opacity: .55; filter: grayscale(1); box-shadow: var(--shadow-carte); }
.ba3-fr { position: relative; width: 410px; justify-self: end; margin-top: 76px; }
.ba3 .ui2-r { min-height: 44px; }
.ba3 .ui2-r time { color: var(--text-faint); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .ba3-bk { width: 80%; } .ba3-fr { width: 90%; margin-top: 96px; } }

/* Étapes illustrées : une image simple par étape */
.scards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.sc { padding: 8px; border-radius: 22px; background: var(--bg-panel); box-shadow: var(--shadow-carte); }
.sc-il { position: relative; display: grid; place-items: center; height: 170px; border-radius: 16px; background: var(--bg-surface); }
.sc-tx { padding: 18px 14px 14px; }
.sc-tx h3 { display: flex; gap: 10px; align-items: baseline; margin: 0 0 4px; font-size: 17px; }
.sc-tx h3 span { color: var(--text-faint); font-size: 13px; font-weight: 500; }
.sc-tx p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 22px; }
.sc-pg { display: grid; align-content: start; gap: 7px; width: 84px; height: 108px; margin-top: -22px; padding: 16px 13px; border-radius: 10px; background: var(--bg-panel); box-shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 8px 20px rgba(28, 25, 23, .06); }
.sc-pg i { display: block; height: 3px; border-radius: 2px; background: var(--bg-surface-hover); } .sc-pg i.h { width: 55%; height: 5px; margin-bottom: 5px; background: var(--bg-surface-pressed); }
.sc-tags { position: absolute; bottom: 22px; display: flex; gap: 4px; } .sc-tags .ch2 { background: var(--bg-panel); }
.sc-sig { display: grid; justify-items: center; color: var(--text-primary); } .sc-sig i { width: 150px; height: 1px; margin-top: 2px; background: var(--bg-surface-pressed); } .sc-sig small { margin-top: 6px; color: var(--text-faint); font-size: 11px; }
.sc-seal { position: relative; width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; background: var(--bg-panel); color: var(--text-primary); box-shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 8px 20px rgba(28, 25, 23, .06); }
.sc-seal em { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; background: var(--text-primary); color: var(--bg-panel); box-shadow: 0 0 0 2px var(--bg-surface); }
@media (max-width: 900px) { .scards { grid-template-columns: 1fr; } }

/* En-tête des pages produit : même héros que l'accueil, scène animée propre à chaque outil */
.phero2 .h1x .eyebrow i { animation: none; background: var(--text-primary); }
.pstage .chg > * { display: none; }
.pstage .chg > :first-child:not(:has(~ .is)), .pstage .chg > .is:not(:has(~ .is)) { display: inline; }
.pstage .st .chg > * { align-items: center; gap: 6px; } .pstage .st .chg > :first-child:not(:has(~ .is)), .pstage .st .chg > .is:not(:has(~ .is)) { display: inline-flex; }
.pstage .st i { background: var(--text-faint); } .pstage .st s { text-decoration-color: var(--text-faint); }
.pstage .st .chg > .is { color: var(--text-primary); } .pstage .st .chg > .is i { background: var(--text-primary); }
.pstage .row.prow[data-at].is { animation: flash 1.2s var(--ease-standard); }
.pstage .pbar { position: relative; } .pstage .pbar i { position: absolute; left: 0; top: 0; width: 0; transition: none; } .pstage .pbar i:first-child, .pstage .pbar i.is { transition: width .7s var(--ease-standard); }
.pstage .pbar i[data-at]:not(.is) { width: 0 !important; }
.pstage .pgl div .ck { color: transparent; } .pstage .pgl div.is .ck { background: var(--text-primary); color: var(--bg-panel); } .pstage .pgl div.is { color: var(--text-muted); }
.pstage .pdrop.is .hint { opacity: 0; } .pstage .pdrop.is .up { opacity: 1; transform: translateY(-50%); } .pstage .pdrop .pb i { transition: none; } .pstage .pdrop.is .pb i { width: 100%; transition: width 3.6s linear; }
.pstage .ptoast { top: 318px; left: 430px; } .pstage .pill i { background: var(--text-primary); } .pstage .ptoast.is { opacity: 1; transform: none; }
.pstage .ptoast .ic { color: var(--text-primary); }
.pstage .pavs { display: flex; margin-left: auto; } .pstage .pavs .av { width: 28px; height: 28px; font-size: 10px; background: var(--bg-panel); box-shadow: 0 0 0 2px var(--bg-surface); } .pstage .pavs .av + .av { margin-left: -8px; }
.pstage .pav { width: 30px; height: 30px; font-size: 10.5px; }
.pstage .pfiles { display: grid; gap: 4px; margin-top: 14px; }
.pstage .pfiles > div { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px 0 6px; border-radius: 12px; background: var(--bg-surface); font-size: 13px; }
.pstage .pfiles .fi { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-panel); color: var(--text-muted); flex-shrink: 0; }
.pstage .pfiles b { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstage .pfiles em { font-style: normal; font-size: 11.5px; color: var(--text-faint); white-space: nowrap; } .pstage .pfiles em.on { padding: 2px 8px; border-radius: 99px; background: var(--text-primary); color: var(--bg-panel); font-weight: 500; }
.pstage .pnote { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg-surface); color: var(--text-secondary); opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease-standard), transform .4s var(--ease-standard); }
.pstage .pnote.is { opacity: 1; transform: none; } .pstage .pnote b { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); } .pstage .pnote small { font-size: 12px; color: var(--text-muted); }
.pstage .ptl { margin-top: 18px; } .pstage .ptl .s { padding-bottom: 10px; } .pstage .ptl .dot { width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; background: var(--bg-surface); color: transparent; transition: background .35s, color .35s; }
.pstage .ptl .s.is .dot { background: var(--text-primary); color: var(--bg-panel); } .pstage .ptl small { display: block; color: var(--text-faint); font-size: 12px; } .pstage .ptl time { color: var(--text-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .35s; } .pstage .ptl .s.is time { opacity: 1; }
.pstage .phash { display: grid; gap: 6px; margin-top: 8px; padding: 14px 16px; border-radius: 16px; background: var(--bg-surface); } .pstage .phash em { font-style: normal; font-size: 12px; color: var(--text-faint); } .pstage .phash .mono2 { min-height: 18px; font-size: 12.5px; color: var(--text-secondary); word-break: break-all; }
.pstage .psig { display: grid; justify-items: center; margin-top: 16px; color: var(--text-primary); } .pstage .psig path { stroke-dasharray: 1; stroke-dashoffset: 1; } .pstage .psig.is path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-standard); }
.pstage .psig i { width: 180px; height: 1px; margin-top: 2px; background: var(--bg-surface-pressed); } .pstage .psig small { margin-top: 6px; font-size: 11px; color: var(--text-faint); }
.pstage .pbtn { display: flex; justify-content: center; align-items: center; height: 40px; margin-top: 16px; border-radius: 999px; background: var(--action-primary); color: var(--text-on-primary); font-size: 13px; font-weight: 500; transition: transform .15s; } .pstage .pbtn.is { transform: scale(.97); }
.pstage .h-guest .g { min-height: 520px; display: flex; flex-direction: column; } .pstage .h-guest .foot { margin-top: auto; }

/* Étapes illustrées : Collect et Share */
.sc-list { display: grid; gap: 9px; width: 132px; margin-top: -22px; padding: 16px 14px; border-radius: 12px; background: var(--bg-panel); box-shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 8px 20px rgba(28, 25, 23, .06); }
.sc-list span { display: flex; align-items: center; gap: 9px; } .sc-list i { width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--bg-surface-pressed); flex-shrink: 0; } .sc-list b { height: 4px; border-radius: 2px; background: var(--bg-surface-hover); }
.sc-ppl { display: grid; gap: 10px; } .sc-ppl > span { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 999px; background: var(--bg-panel); box-shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 8px 20px rgba(28, 25, 23, .05); }
.sc-ppl .av { width: 28px; height: 28px; font-size: 11.5px; } .sc-ppl .ch2 { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-surface); } .sc-ppl svg { color: var(--text-muted); }
.sc-ring { position: relative; display: grid; place-items: center; color: var(--text-primary); } .sc-ring b { position: absolute; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-il .sc-tags .ch2 { display: inline-flex; align-items: center; gap: 5px; } .sc-il .sc-tags svg { color: var(--text-muted); }
.sc-il1 .sc-seal { margin-top: -22px; }
.sc-seg { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--bg-surface-hover); } .sc-seg i { padding: 7px 12px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-muted); } .sc-seg i.on { background: var(--bg-panel); color: var(--text-primary); box-shadow: 0 1px 2px rgba(28, 25, 23, .1); }
.sc-ver { position: relative; display: grid; gap: 10px; justify-items: start; padding: 14px 16px; border-radius: 14px; background: var(--bg-panel); box-shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 8px 20px rgba(28, 25, 23, .06); }
.sc-file { display: flex; align-items: center; gap: 8px; font-size: 13px; } .sc-file svg { color: var(--text-muted); } .sc-file b { font-weight: 500; }
.sc-v { display: flex; align-items: center; gap: 8px; font-size: 12px; } .sc-v s { color: var(--text-faint); } .sc-v i { padding: 2px 9px; border-radius: 99px; font-style: normal; font-weight: 500; background: var(--text-primary); color: var(--bg-panel); }
.sc-ver em { position: absolute; right: -8px; top: -8px; width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; background: var(--text-primary); color: var(--bg-panel); box-shadow: 0 0 0 2px var(--bg-surface); }

.sc-docs { display: flex; gap: 18px; } .sc-pg.sm { position: relative; width: 70px; height: 90px; margin-top: 0; padding: 14px 11px; }
.sc-pg.sm em { position: absolute; right: -8px; bottom: -8px; width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; background: var(--text-primary); color: var(--bg-panel); box-shadow: 0 0 0 2px var(--bg-surface); }
.sc-pg.sm.off { opacity: .55; } .sc-pg.sm.off em { background: var(--bg-panel); color: var(--text-muted); box-shadow: 0 0 0 2px var(--bg-surface), 0 1px 2px rgba(28, 25, 23, .1); }

/* Moments : un rendu propre à chaque outil */
.mc-list { display: grid; gap: 4px; padding: 8px; border-radius: 18px; background: var(--bg-surface); }
.mc-list > div { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: 12px; background: var(--bg-panel); font-size: 14px; }
.mc-list .ck { width: 18px; height: 18px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--bg-surface-pressed); flex-shrink: 0; }
.mc-list b { flex: 1; min-width: 0; font-weight: 500; } .mc-list small { color: var(--text-faint); font-size: 12px; }
.mr-win { border-radius: 18px; background: var(--bg-surface); padding: 8px; }
.mr-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; font-size: 13.5px; } .mr-bar .fo { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-panel); color: var(--text-primary); }
.mr-bar b { flex: 1; font-weight: 600; } .mr-bar .ch2 { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-panel); } .mr-bar .ch2 svg { color: var(--text-muted); }
.mr-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mr-files > div { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--bg-panel); font-size: 13.5px; min-width: 0; } .mr-files svg { color: var(--text-muted); flex-shrink: 0; }
.mr-files b { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mr-files em { font-style: normal; font-size: 11.5px; color: var(--text-faint); }
.mr-acc { display: flex; align-items: center; gap: 12px; padding: 12px 10px 4px; font-size: 13px; color: var(--text-muted); } .mr-acc .avs { display: flex; } .mr-acc .av { width: 26px; height: 26px; font-size: 10px; background: var(--bg-panel); box-shadow: 0 0 0 2px var(--bg-surface); } .mr-acc .av + .av { margin-left: -7px; }
.me-env { display: grid; gap: 14px; padding: 18px; border-radius: 18px; background: var(--bg-surface); }
.me-files { display: flex; flex-wrap: wrap; gap: 6px; } .me-files span { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border-radius: 10px; background: var(--bg-panel); font-size: 13px; font-weight: 500; } .me-files svg { color: var(--text-muted); }
.me-rules { display: flex; flex-wrap: wrap; gap: 6px; } .me-rules .ch2 { background: transparent; box-shadow: inset 0 0 0 1px var(--bg-surface-pressed); }
.me-tl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 6px; }
.me-tl span { position: relative; display: grid; justify-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.me-tl span::before { content: ""; position: absolute; top: 9px; left: -50%; right: 50%; height: 1px; background: var(--bg-surface-pressed); } .me-tl span:first-child::before { display: none; }
.me-tl i { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center; background: var(--text-primary); color: var(--bg-panel); }

/* Moment Share : la page que voit le lecteur, dans un mini navigateur */
.mr-bro { border-radius: 16px; background: var(--bg-panel); box-shadow: 0 0 0 1px var(--bg-surface-hover), 0 1px 2px rgba(28, 25, 23, .05); overflow: hidden; }
.mr-bro .bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--bg-surface); }
.mr-bro .dots { display: flex; gap: 5px; } .mr-bro .dots i { width: 8px; height: 8px; border-radius: 9px; background: var(--bg-surface-pressed); }
.mr-bro .ad { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--bg-panel); color: var(--text-muted); font-size: 12px; overflow: hidden; white-space: nowrap; }
.mr-bro .pg { padding: 20px 22px 18px; } .mr-bro .t { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.2px; } .mr-bro .pg > small { display: block; font-size: 12.5px; color: var(--text-faint); }
.mr-bro .fl { margin-top: 12px; } .mr-bro .fl div { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 13.5px; border-top: 1px solid var(--bg-surface); } .mr-bro .fl svg { color: var(--text-faint); flex-shrink: 0; }
.mr-bro .fl span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mr-bro .pg > p { margin: 10px 0 0; font-size: 12px; color: var(--text-faint); }

/* Moment Send : les fichiers, puis la signature du destinataire */
.me-sig ul { list-style: none; margin: 0; padding: 0; } .me-sig li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--bg-surface); } .me-sig li svg { color: var(--text-faint); flex-shrink: 0; }
.me-sig .sg { margin-top: 16px; padding: 10px 18px 14px; border-radius: 16px; background: var(--bg-surface); } .me-sig .sg svg { display: block; color: var(--text-primary); }
.me-sig .sl { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding-top: 8px; border-top: 1px solid var(--bg-surface-pressed); font-size: 12.5px; color: var(--text-muted); } .me-sig .sl span:first-child { color: var(--text-primary); font-weight: 500; }

/* Moment Collect : la page de dépôt que reçoit le client, en miniature */
.mc-page { padding: 6px; border-radius: 18px; background: var(--bg-surface); }
.mc-page .url { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px 10px; color: var(--text-faint); font-size: 12px; overflow: hidden; white-space: nowrap; }
.mc-page .bd { padding: 18px 18px 10px; border-radius: 14px; background: var(--bg-panel); box-shadow: 0 1px 2px rgba(28, 25, 23, .05); }
.mc-page .who { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .mc-page .lg { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--text-primary); color: var(--bg-panel); }
.mc-page .who b { display: block; font-size: 15px; font-weight: 600; } .mc-page .who small { color: var(--text-muted); font-size: 13px; }
.mc-page .r { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding-block: 8px; border-top: 1px solid var(--bg-surface); font-size: 14px; line-height: 20px; }
.mc-page .r a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; background: var(--bg-surface); color: var(--text-primary); font-size: 12.5px; font-weight: 500; white-space: nowrap; }

/* ——— Site Flask : sélecteur de langue (pied de page) ——— */
.fbot .langs { display: inline-flex; gap: 10px; padding-left: 20px; box-shadow: inset 1px 0 0 var(--border-divider); }
.fbot .langs a[aria-current] { color: var(--text-primary); font-weight: 600; }

/* ——— Site Flask : formulaires (champ refusé, erreur d'envoi) ——— */
form [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--text-danger, #dc2626); }
.hf-toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 14px; background: var(--bg-panel, #fff); color: var(--text-primary); box-shadow: var(--shadow-popover); font-size: 14px; opacity: 0; transform: translate(-50%, 12px); transition: opacity .3s, transform .3s; pointer-events: none; }
.hf-toast.show { opacity: 1; transform: translate(-50%, 0); }