/* LaGomme — animation du hero, à la place de la capture (23 octobre 2026).
   Tout est exprimé en em : la taille de base suit la largeur du cadre (unités cqw),
   ce qui garde la composition identique à toutes les largeurs.
   Trois formats selon la largeur du cadre : bureau, tablette (561 à 860 px) et téléphone.
   Sans JavaScript ou avec « réduire les animations », le cadre affiche un état fixe lisible. */

.hero-motion { position: relative; margin: 0; container-type: inline-size; }
.hero-motion *, .hero-motion *::before, .hero-motion *::after { box-sizing: border-box; }
.hm-viewport { width: 100%; }

.hm-stage {
  --hm-blue: #0864ed;
  --hm-blue-ink: #075bc9;
  --hm-blue-pale: #eaf1fc;
  --hm-pink: #d73564;
  --hm-ink: #1d2633;
  --hm-muted: #596371;
  --hm-line: #e2e7ee;
  --hm-app: #f3f6fa;
  --hm-person: #fde6ed;
  --hm-person-edge: #f3b5c8;
  --hm-place: #e2f3e5;
  --hm-place-edge: #b3dcbc;
  --hm-manual: #cfe1ff;
  --hm-restored: #a52b51;
  --hm-restored-bg: #fff0f4;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1280 / 800;
  font-size: 1.25cqw;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.4;
  color: var(--hm-ink);
  background: var(--hm-app);
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
  user-select: none;
}
.hm-stage img { display: block; max-width: none; }
.hm-word { font-family: LaGommeOutfit, Outfit, Inter, system-ui, sans-serif; font-weight: 700; letter-spacing: -.035em; white-space: nowrap; color: #2879bd; }
.hm-word span:last-child { color: #f54483; }
.hm-blue { color: var(--hm-blue); }
.hm-pink { color: var(--hm-pink); }
.hm-eyebrow { display: block; font-size: .6em; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: #6a7383; }

/* Application */
.hm-app { position: absolute; inset: 0 0 7em 0; display: flex; flex-direction: column; }
.hm-bar { flex: 0 0 3.5em; display: flex; align-items: center; justify-content: space-between; padding: 0 1.75em; background: #fff; border-bottom: 1px solid var(--hm-line); }
.hm-brand { display: flex; align-items: center; gap: .15em; }
.hm-brand img { width: 2.2em; height: 2.2em; }
.hm-brand .hm-word { font-size: 1.45em; }
.hm-bar-links { display: flex; align-items: center; gap: 2em; font-size: .78em; font-weight: 600; }
.hm-save { border: 1px solid #cfd6e0; border-radius: .55em; padding: .55em 1em; }

.hm-steps { flex: 0 0 4em; display: flex; align-items: center; justify-content: space-around; margin: 0; padding: 0 2.5em; list-style: none; }
.hm-steps li { display: flex; align-items: center; gap: .7em; padding: .5em 1.1em; border: 1px solid transparent; border-radius: .6em; font-size: .82em; font-weight: 550; color: #3a4350; transition: background-color .35s ease, border-color .35s ease; }
.hm-steps i { display: grid; place-items: center; width: 1.75em; height: 1.75em; border-radius: 50%; font-style: normal; font-size: .9em; font-weight: 650; background: #e8ecf1; color: #5b6575; transition: background-color .35s ease, color .35s ease; }
.hm-steps .hm-check { display: none; }
.hm-steps li[data-state="on"] { border-color: #3b82e6; background: #eaf2fd; color: var(--hm-blue-ink); }
.hm-steps li[data-state="on"] i { background: var(--hm-blue); color: #fff; }
.hm-steps li[data-state="done"] i { background: var(--hm-blue-pale); color: var(--hm-blue); }
.hm-steps li[data-state="done"] .hm-num { display: none; }
.hm-steps li[data-state="done"] .hm-check { display: inline; }

.hm-work { flex: 1; min-height: 0; display: flex; gap: 1em; padding: 1em 1.5em 1.25em; }
.hm-panel { background: #fff; border: 1px solid var(--hm-line); border-radius: .75em; }

.hm-folder { flex: 0 0 12.5em; padding: 1.15em 1em; display: flex; flex-direction: column; }
.hm-folder-name { margin-top: .9em; font-size: .9em; font-weight: 650; }
.hm-folder-meta { margin-top: .2em; font-size: .72em; color: var(--hm-muted); }
.hm-file { margin-top: 1.4em; display: grid; grid-template-columns: 1.1em 1fr; gap: .25em .55em; padding: .8em .75em; border: 1px solid var(--hm-line); border-radius: .55em; }
.hm-file svg { width: 1.1em; height: 1.1em; fill: none; stroke: #5b6575; stroke-width: 1.6; stroke-linejoin: round; }
.hm-file-name { font-size: .76em; font-weight: 600; line-height: 1.35; }
.hm-file-meta { grid-column: 2; font-size: .64em; color: var(--hm-muted); }
.hm-file-page { grid-column: 1 / -1; margin-top: .6em; padding: .55em .7em; border: 1px solid #3b82e6; border-radius: .45em; background: #eaf2fd; color: var(--hm-blue-ink); font-size: .68em; font-weight: 600; }

.hm-doc { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.hm-doc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; padding: 1.05em 1.5em .95em; border-bottom: 1px solid var(--hm-line); }
.hm-doc-titles { min-width: 0; }
.hm-eyebrows { display: grid; }
.hm-eyebrows > span { grid-area: 1 / 1; }
.hm-eyebrow-reply { opacity: 0; visibility: hidden; }
.hm-titles { display: grid; margin-top: .35em; }
.hm-titles strong { grid-area: 1 / 1; font-size: 1em; font-weight: 650; letter-spacing: -.015em; white-space: nowrap; }
.hm-title-reply { opacity: 0; visibility: hidden; }
.hm-head-actions { flex-shrink: 0; display: grid; justify-items: end; align-items: end; }
.hm-head-actions > * { grid-area: 1 / 1; }
.hm-seg { flex-shrink: 0; display: flex; padding: .22em; border-radius: .55em; background: #edf1f6; font-size: .72em; }
.hm-seg span { padding: .5em .85em; border-radius: .42em; color: #4b5563; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.hm-seg[data-view="read"] .hm-seg-read,
.hm-seg[data-view="copy"] .hm-seg-copy { background: #fff; color: var(--hm-blue-ink); box-shadow: 0 1px 3px #1d263318; }
/* Bouton de restitution (étape 4), comme dans le logiciel */
.hm-restore { display: inline-flex; align-items: center; gap: .55em; padding: .62em 1em; border-radius: .5em; background: var(--hm-blue); color: #fff; font-size: .72em; font-weight: 600; white-space: nowrap; box-shadow: inset 0 1px 0 #ffffff30, 0 .3em .7em #0864ed26; opacity: 0; visibility: hidden; }
.hm-restore svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.hm-page { position: relative; flex: 1; min-height: 0; display: grid; padding: 1.7em 2.4em; overflow: hidden; }
.hm-text { grid-area: 1 / 1; font-size: 1.14em; line-height: 2.05; color: #2a313c; }
.hm-heading { font-size: .78em; font-weight: 650; letter-spacing: .07em; margin-bottom: .5em; }
.hm-par { margin-bottom: .75em; }
.hm-reply { opacity: 0; visibility: hidden; }
.hm-reply-empty { grid-area: 1 / 1; align-self: start; font-size: .9em; color: var(--hm-muted); opacity: 0; visibility: hidden; }
.hm-scan { position: absolute; left: 0; right: 0; top: 0; height: 3.2em; background: linear-gradient(#2783fc00, #2783fc1c); border-bottom: 2px solid #458df6; opacity: 0; visibility: hidden; }

/* Données repérées, pseudonymes et restitution */
.hm-sw { display: inline-block; position: relative; white-space: nowrap; vertical-align: baseline; clip-path: inset(-.5em -.1em); }
.hm-b { display: inline-block; }
.hm-a { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; white-space: nowrap; opacity: 0; visibility: hidden; }
.hm-sw mark { color: inherit; background-color: transparent; padding: .14em .22em; border-radius: .3em; box-shadow: inset 0 0 0 1px transparent; transition: background-color .35s ease, box-shadow .35s ease; }
.hm-sw[data-cat="person"][data-hl="1"] mark { background-color: var(--hm-person); box-shadow: inset 0 0 0 1px var(--hm-person-edge); }
.hm-sw[data-cat="place"][data-hl="1"] mark { background-color: var(--hm-place); box-shadow: inset 0 0 0 1px var(--hm-place-edge); }
.hm-sw[data-cat="manual"] mark { padding-inline: 0; background-image: linear-gradient(var(--hm-manual), var(--hm-manual)); background-repeat: no-repeat; background-size: 0% 100%; }
.hm-tok { display: inline-block; font-family: Inter, system-ui, sans-serif; font-size: .74em; font-weight: 600; line-height: 1; letter-spacing: .03em; padding: .45em .5em; border-radius: .32em; color: var(--hm-blue-ink); background: var(--hm-blue-pale); box-shadow: inset 0 0 0 1px #cddff9; }
.hm-name { color: var(--hm-restored); background: var(--hm-restored-bg); padding: .12em .2em; border-radius: .3em; }

.hm-data { flex: 0 0 17em; padding: 1em .95em; display: flex; flex-direction: column; gap: .75em; }
.hm-data-head { display: flex; align-items: center; gap: .5em; font-size: .86em; font-weight: 650; }
.hm-count { min-width: 1.6em; padding: .1em .45em; border-radius: 1em; background: #edf0f4; font-size: .8em; text-align: center; font-variant-numeric: tabular-nums; }
.hm-count::after { content: attr(data-n); }
.hm-cards { display: flex; flex-direction: column; gap: .6em; }
.hm-card { display: grid; grid-template-columns: 1.05em minmax(0, 1fr) auto; align-items: center; gap: .45em .6em; padding: .75em .8em; border: 1px solid var(--hm-line); border-radius: .6em; background: #fff; transition: opacity .3s ease; }
.hm-box { width: 1.05em; height: 1.05em; border-radius: .25em; background: var(--hm-blue); display: grid; place-items: center; transition: background-color .25s ease, box-shadow .25s ease; }
.hm-box::after { content: ''; width: .5em; height: .28em; border: solid #fff; border-width: 0 0 .13em .13em; transform: translateY(-.05em) rotate(-45deg); }
.hm-card[data-checked="0"] { opacity: .55; }
.hm-card[data-checked="0"] .hm-box { background: #fff; box-shadow: inset 0 0 0 1.5px #b9c2cf; }
.hm-card[data-checked="0"] .hm-box::after { display: none; }
.hm-card-name { grid-column: 2 / -1; font-size: .76em; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-chip { grid-column: 2; justify-self: start; font-size: .6em; font-weight: 550; padding: .25em .5em; border-radius: .3em; }
.hm-chip[data-cat="person"] { background: var(--hm-person); color: #9a2c4f; }
.hm-chip[data-cat="place"] { background: var(--hm-place); color: #2c6b3a; }
.hm-chip[data-cat="manual"] { background: var(--hm-manual); color: var(--hm-blue-ink); }
.hm-occ { grid-column: 3; font-size: .6em; color: var(--hm-muted); }

/* Fenêtre d'IA neutre, sans marque */
.hm-ai { position: absolute; top: 8.6em; bottom: 1.6em; left: 21em; right: 3em; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #d9dfe8; border-radius: .9em; box-shadow: 0 1.6em 3.5em -1.4em #13233f4d; opacity: 0; visibility: hidden; }
.hm-ai-bar { flex: 0 0 2.7em; display: flex; align-items: center; gap: 1em; padding: 0 1.1em; border-bottom: 1px solid var(--hm-line); background: #fafbfc; }
.hm-dots { display: flex; gap: .35em; }
.hm-dots i { width: .62em; height: .62em; border-radius: 50%; background: #d7dce4; }
.hm-ai-title { font-size: .78em; font-weight: 600; color: #4b5563; }
.hm-ai-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.2em; padding: 1.4em 1.8em; }
.hm-ai-user { align-self: flex-end; max-width: 80%; padding: .85em 1.05em; border-radius: 1em 1em .3em 1em; background: #eef2f7; font-size: .84em; line-height: 1.6; }
.hm-ai-paste { display: block; margin-top: .6em; padding-left: .75em; border-left: .2em solid #c8d2e0; color: var(--hm-muted); font-size: .92em; }
.hm-ai-reply { display: grid; grid-template-columns: 1.9em 1fr; gap: .8em; max-width: 92%; }
.hm-ai-avatar { width: 1.9em; height: 1.9em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #eef1f5, #c9d0da); }
.hm-ai-text { font-size: .9em; line-height: 1.75; }
.hm-ai-par { margin-bottom: .55em; }
.hm-ai-copy { align-self: flex-start; margin-left: 2.7em; display: grid; font-size: .72em; font-weight: 600; color: #374151; }
.hm-ai-copy > span { grid-area: 1 / 1; padding: .55em .9em; border: 1px solid #cfd6e0; border-radius: .5em; background: #fff; }
.hm-copy-done { opacity: 0; color: var(--hm-blue-ink); border-color: #9cc1f5 !important; background: var(--hm-blue-pale) !important; }
.hm-ai-copy[data-done="1"] .hm-copy-idle { opacity: 0; }
.hm-ai-copy[data-done="1"] .hm-copy-done { opacity: 1; }

.hm-toast { position: absolute; left: 0; right: 0; bottom: 1.9em; width: max-content; margin: auto; padding: .7em 1.1em; border-radius: .65em; background: var(--hm-ink); color: #fff; font-size: .8em; font-weight: 550; box-shadow: 0 .6em 1.6em -.6em #1d263380; opacity: 0; visibility: hidden; }

/* Sous-titres */
.hm-captions { position: absolute; left: 0; right: 0; bottom: 0; height: 7em; background: #fff; border-top: 1px solid var(--hm-line); }
.hm-cap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 2.3em; text-align: center; font-size: 1.85em; font-weight: 650; line-height: 1.2; letter-spacing: -.035em; text-wrap: balance; opacity: 0; visibility: hidden; }
.hm-cap-in, .hm-cap-a, .hm-cap-b { display: block; }
.hm-cap .hm-blue, .hm-cap .hm-pink { white-space: nowrap; }
.hm-nb { white-space: nowrap; }

/* Carton final */
.hm-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.9em; padding: 0 4em; background: #fff; text-align: center; opacity: 0; visibility: hidden; }
.hm-end-brand { display: flex; align-items: center; gap: .3em; }
.hm-end-brand img { width: 5.6em; height: 5.6em; }
.hm-end-brand .hm-word { font-size: 3.8em; }
.hm-end-tag { max-width: 30em; font-size: 2.3em; font-weight: 670; line-height: 1.14; letter-spacing: -.045em; text-wrap: balance; }

.hm-end-line { display: block; }
.hm-end-action { display: flex; flex-direction: column; align-items: center; gap: 1.15em; margin-top: .4em; }
.hm-end-cta { display: inline-flex; align-items: center; gap: .75em; padding: .78em 1.45em; border-radius: .5em; background: var(--hm-blue); color: #fff; font-size: 1.45em; font-weight: 600; letter-spacing: -.01em; box-shadow: inset 0 1px 0 #ffffff30, 0 .3em .7em #0864ed26; pointer-events: auto; cursor: pointer; text-decoration: none; min-height: 44px; }
.hm-end-cta:hover { background: #0054d1; }
.hm-end-cta:focus-visible { outline: 3px solid var(--hm-pink); outline-offset: 5px; }
.hm-end-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: .9em; }
.hm-store { display: flex; align-items: center; gap: .7em; padding: .55em 1.2em .55em .85em; font-size: 1.25em; border: 1px solid #cfd6e0; border-radius: .65em; background: #fff; text-align: left; line-height: 1.15; }
.hm-store svg { flex: 0 0 auto; width: 2em; height: 2em; fill: none; stroke: var(--hm-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hm-store small { display: block; font-size: .7em; font-weight: 500; color: var(--hm-muted); }
.hm-store b { display: block; font-size: 1.1em; font-weight: 650; letter-spacing: -.015em; }

/* Objets en mouvement : placés en coordonnées du cadre par le script */
.hm-eraser, .hm-cursor, .hm-action, .hm-ripple, .hm-crumbs, .hm-crumbs i { position: absolute; left: 0; top: 0; }
.hm-eraser, .hm-cursor, .hm-action, .hm-ripple, .hm-crumbs i { opacity: 0; visibility: hidden; }
.hm-eraser { width: 4.2em; height: 4.2em; filter: drop-shadow(0 .35em .4em #1d263333); }
.hm-cursor { width: 1.35em; height: 1.6em; fill: #202b3b; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 .12em .14em #0003); }
.hm-action { padding: .45em .85em; border-radius: .5em; background: var(--hm-blue-ink); color: #fff; font-size: .72em; font-weight: 600; white-space: nowrap; box-shadow: 0 .3em .8em #075bc933; }
.hm-ripple { width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em; border-radius: 50%; border: 2px solid #075bc9; }
.hm-crumbs i { width: .3em; height: .3em; border-radius: 50%; background: #f27aa0; }
.hm-crumbs i:nth-child(even) { width: .22em; height: .22em; background: #c3cad5; }

/* Bouton pause, hors du décor */
.hm-toggle { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 36px; height: 36px; display: none; align-items: center; justify-content: center; padding: 0; border: 1px solid #d8dde5; border-radius: 50%; background: #fff; color: #1d2633; cursor: pointer; }
.hm-toggle:hover { border-color: #aab4c3; }
.hm-toggle:focus-visible { outline: 3px solid #d73564; outline-offset: 3px; }
.hm-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.hm-toggle .hm-icon-play { display: none; }
.hm-toggle[aria-pressed="true"] .hm-icon-play { display: block; }
.hm-toggle[aria-pressed="true"] .hm-icon-pause { display: none; }
.hm-toggle .hm-icon-replay, .hm-toggle .hm-toggle-label { display: none; }
.hm-toggle[data-mode="replay"] { width: auto; gap: 7px; padding: 0 15px 0 12px; border-radius: 18px; font: 600 13px/1 Inter, system-ui, sans-serif; letter-spacing: -.01em; box-shadow: 0 2px 8px #1d26331a; }
.hm-toggle[data-mode="replay"] .hm-icon-pause, .hm-toggle[data-mode="replay"] .hm-icon-play { display: none; }
.hm-toggle[data-mode="replay"] .hm-icon-replay { display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hm-toggle[data-mode="replay"] .hm-toggle-label { display: inline; }
.hero-motion.hm-live .hm-toggle { display: flex; }

/* État fixe (sans script, ou mouvement réduit) : texte masqué, sous-titre complet */
.hero-motion:not(.hm-live) .hm-b { display: none; }
.hero-motion:not(.hm-live) .hm-a { position: static; display: inline-flex; opacity: 1; visibility: visible; }
.hero-motion:not(.hm-live) .hm-sw[data-static="b"] .hm-b { display: inline-block; }
.hero-motion:not(.hm-live) .hm-sw[data-static="b"] .hm-a { display: none; }
.hero-motion:not(.hm-live) .hm-cap[data-c="23"] { opacity: 1; visibility: visible; }

/* État de départ de l'animation */
.hero-motion.hm-live .hm-cap-b { display: none; }

/* Cadre intermédiaire (tablette) : sans la colonne du dossier */
@container (min-width: 561px) and (max-width: 860px) {
  .hm-stage { aspect-ratio: 62 / 50; font-size: calc(100cqw / 62); }
  .hm-folder, .hm-bar-links > span:not(.hm-save) { display: none; }
  .hm-steps { padding: 0 1.2em; }
  .hm-steps li { padding: .5em .8em; font-size: .78em; }
  .hm-ai { left: 5em; right: 2.2em; }
  .hm-end-tag { max-width: none; font-size: 1.85em; }
}

/* Cadre étroit (mobile) : seule la page du document reste visible */
@container (max-width: 560px) {
  .hm-stage { aspect-ratio: 560 / 880; font-size: calc(100cqw / 35); }
  .hm-app { bottom: 8em; }
  .hm-captions { height: 8em; }
  .hm-cap { font-size: 1.45em; padding: 0 3.2em; }
  .hm-bar { padding: 0 1.2em; }
  .hm-bar-links, .hm-folder, .hm-data { display: none; }
  .hm-steps { flex-basis: 3.8em; padding: 0 .8em; justify-content: space-between; }
  .hm-steps li { padding: .45em .6em; font-size: .85em; }
  .hm-steps li:not([data-state="on"]) .hm-step-label { display: none; }
  .hm-work { padding: .8em .9em 1em; }
  .hm-doc-head { flex-wrap: wrap; align-items: flex-start; padding: 1em 1.2em .9em; gap: .7em; }
  .hm-head-actions { justify-items: start; }
  .hm-titles strong { font-size: .95em; }
  .hm-page { padding: 1.3em 1.35em; }
  .hm-text { font-size: 1.16em; }
  .hm-ai { top: 8.3em; bottom: 1.1em; min-height: 0; left: .9em; right: .9em; }
  .hm-ai-body { padding: 1.2em 1.2em; }
  .hm-ai-user { max-width: 90%; }
  .hm-end { gap: 1.6em; padding: 0 1.6em; }
  .hm-end-brand img { width: 4.6em; height: 4.6em; }
  .hm-end-brand .hm-word { font-size: 3em; }
  .hm-end-tag { font-size: 1.9em; max-width: 15em; }
  .hm-end-cta { font-size: 1.3em; }
  .hm-store { font-size: 1.1em; }
  .hm-cap { padding: 0 1.6em; }
  .hm-toggle { top: calc(5cqw - 14px); bottom: auto; right: 10px; width: 28px; height: 28px; }
  .hm-toggle svg { width: 11px; height: 11px; }
  .hm-toggle[data-mode="replay"] { padding: 0 11px 0 9px; gap: 5px; font-size: 12px; }
}