/* Accueil centré sur le coffre : démonstration animée, problème, mode d'emploi, garanties et limites.
   Réutilise les jetons du site (--tm-semantic-*) avec des valeurs de repli. Classes préfixées hv-. */

/* --- Héros : texte + démonstration côte à côte --- */
.hv-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(24px,4vw,56px);align-items:center}
.hv-hero__copy{display:flex;flex-direction:column;gap:var(--tm-semantic-spacing-inline-lg);min-width:0}
.hv-hero__copy h1{margin:0;font-size:clamp(2.35rem,5.2vw,3.85rem);line-height:1.04;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.hv-hero__copy>p{max-width:46ch;color:var(--tm-semantic-text-secondary);margin:0}
.hv-hero__note{color:var(--tm-semantic-text-secondary);font-size:.85rem}
@media (max-width:900px){.hv-hero{grid-template-columns:minmax(0,1fr)}}

/* --- Démonstration --- */
.hv-demo{margin:0;border:1px solid var(--tm-semantic-border-default);border-radius:var(--tm-semantic-radius-panel);background:var(--tm-semantic-surface-panel);overflow:hidden;box-shadow:var(--tm-semantic-shadow-raised);min-width:0}
.hv-demo__bar{display:flex;align-items:center;gap:var(--tm-semantic-spacing-inline-sm);padding:var(--tm-semantic-spacing-inline-sm) var(--tm-semantic-spacing-inline-md);border-bottom:1px solid var(--tm-semantic-border-default);font-size:.78rem;color:var(--tm-semantic-text-secondary)}
.hv-dots{display:flex;gap:var(--tm-semantic-spacing-inline-xs)}.hv-dots i{width:9px;height:9px;border-radius:var(--tm-semantic-radius-circular);background:var(--tm-semantic-border-default)}
.hv-demo__bar em{margin-left:auto;font-style:normal;font-size:.72rem;padding:var(--tm-semantic-spacing-inline-xxs) var(--tm-semantic-spacing-inline-sm);border:1px solid var(--tm-semantic-border-default);border-radius:var(--tm-semantic-radius-status)}
.hv-demo__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);min-height:292px}
.hv-pane{display:flex;flex-direction:column;gap:var(--tm-semantic-spacing-inline-sm);padding:var(--tm-semantic-spacing-inline-md);min-width:0}
.hv-pane+.hv-pane{border-left:1px solid var(--tm-semantic-border-default);background:var(--tm-semantic-surface-raised)}
.hv-pane__label{display:flex;align-items:center;gap:var(--tm-semantic-spacing-inline-sm);font:600 .68rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--tm-semantic-text-secondary)}
.hv-pane__label b{width:7px;height:7px;border-radius:var(--tm-semantic-radius-circular);background:var(--tm-semantic-text-secondary)}
.hv-pane--agent .hv-pane__label b{background:var(--tm-semantic-feedback-warning)} .hv-pane--human .hv-pane__label b{background:var(--tm-semantic-feedback-success)}
.hv-term{margin:0;font:400 .76rem/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--tm-semantic-text-primary);white-space:pre-wrap;word-break:break-word;min-height:7.2em}
.hv-term .c{color:var(--tm-semantic-text-secondary)} .hv-term .r{color:var(--tm-semantic-action-primary-bg)} .hv-term .m{color:var(--tm-semantic-feedback-success)}
.hv-line{opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}.hv-line.on{opacity:1;transform:none}
.hv-vault{border:1px solid var(--tm-semantic-border-default);border-radius:var(--tm-semantic-radius-control);padding:var(--tm-semantic-spacing-inline-sm) var(--tm-semantic-spacing-inline-md);background:var(--tm-semantic-surface-panel);font:400 .74rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.hv-vault b{display:block;font:600 .8rem system-ui,sans-serif;color:var(--tm-semantic-text-primary)}.hv-vault span{color:var(--tm-semantic-text-secondary)}
.hv-approve{border:1px solid var(--tm-semantic-border-default);border-radius:var(--tm-semantic-radius-control);background:var(--tm-semantic-surface-panel);padding:var(--tm-semantic-spacing-inline-md);display:flex;flex-direction:column;gap:var(--tm-semantic-spacing-inline-sm);opacity:.28;transition:opacity .3s,border-color .3s}
.hv-approve.on{opacity:1;border-color:var(--tm-semantic-action-primary-bg)}
.hv-approve h4{margin:0;font-size:.82rem;display:flex;gap:var(--tm-semantic-spacing-inline-sm);align-items:center}
.hv-approve dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--tm-semantic-spacing-inline-xs) var(--tm-semantic-spacing-inline-sm);font-size:.74rem}
.hv-approve dt{color:var(--tm-semantic-text-secondary)}.hv-approve dd{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-word;min-width:0}
.hv-approve__row{display:flex;gap:var(--tm-semantic-spacing-inline-sm);flex-wrap:wrap}
.hv-btn{font:600 .74rem system-ui,sans-serif;padding:var(--tm-semantic-spacing-inline-xs) var(--tm-semantic-spacing-inline-md);border-radius:var(--tm-semantic-radius-control);border:1px solid var(--tm-semantic-border-default);background:transparent;color:var(--tm-semantic-text-secondary)}
.hv-btn--go{background:var(--tm-semantic-action-primary-bg);border-color:var(--tm-semantic-action-primary-bg);color:var(--tm-semantic-text-on-accent);transition:transform .2s}
.hv-approve.done .hv-btn--go{transform:scale(.96)}
.hv-seen{display:flex;flex-direction:column;gap:var(--tm-semantic-spacing-inline-xs);font-size:.74rem}
.hv-seen div{display:flex;justify-content:space-between;gap:var(--tm-semantic-spacing-inline-sm);padding:var(--tm-semantic-spacing-inline-xs) var(--tm-semantic-spacing-inline-sm);border-radius:var(--tm-semantic-radius-control);background:var(--tm-semantic-surface-panel);border:1px solid var(--tm-semantic-border-default)}
.hv-seen span{color:var(--tm-semantic-text-secondary)}.hv-seen code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--tm-semantic-text-primary)}
@media (max-width:560px){.hv-demo__body{grid-template-columns:minmax(0,1fr)}.hv-pane+.hv-pane{border-left:0;border-top:1px solid var(--tm-semantic-border-default)}}
.hv-demo__foot{display:flex;align-items:center;gap:var(--tm-semantic-spacing-inline-md);padding:var(--tm-semantic-spacing-inline-sm) var(--tm-semantic-spacing-inline-md);border-top:1px solid var(--tm-semantic-border-default)}
.hv-steps{display:flex;gap:var(--tm-semantic-spacing-inline-sm);flex-wrap:wrap;margin:0;padding:0;list-style:none;font-size:.72rem;color:var(--tm-semantic-text-secondary)}
.hv-steps li{display:flex;align-items:center;gap:var(--tm-semantic-spacing-inline-xs);padding:var(--tm-semantic-spacing-inline-xxs) var(--tm-semantic-spacing-inline-sm);border-radius:var(--tm-semantic-radius-status);border:1px solid var(--tm-semantic-border-default)}
.hv-steps li.on{border-color:var(--tm-semantic-action-primary-bg);color:var(--tm-semantic-text-primary)}
.hv-toggle{margin-left:auto;font:500 .72rem system-ui,sans-serif;padding:var(--tm-semantic-spacing-inline-xs) var(--tm-semantic-spacing-inline-sm);border-radius:var(--tm-semantic-radius-control);border:1px solid var(--tm-semantic-border-default);background:transparent;color:var(--tm-semantic-text-secondary);cursor:pointer}
.hv-toggle:focus-visible{outline:2px solid var(--tm-semantic-action-primary-bg);outline-offset:2px}
.hv-demo figcaption{display:none}

/* --- Bandeau de garanties --- */
.hv-strip{display:flex;flex-wrap:wrap;gap:var(--tm-semantic-spacing-inline-sm) var(--tm-semantic-spacing-inline-xl);justify-content:center;padding:var(--tm-semantic-spacing-inline-lg) 0;border-block:1px solid var(--tm-semantic-border-default);color:var(--tm-semantic-text-secondary);font-size:.9rem}
.hv-strip span{display:inline-flex;align-items:center;gap:var(--tm-semantic-spacing-inline-sm)}.hv-strip i{color:var(--tm-semantic-action-primary-bg);font-size:1.15rem}

/* --- Sections --- */
.hv-section{display:flex;flex-direction:column;gap:var(--tm-semantic-spacing-inline-xl);padding-block:clamp(40px,7vw,84px)}
.hv-head{display:flex;flex-direction:column;gap:var(--tm-semantic-spacing-inline-md);max-width:62ch}
.hv-head p.hv-eyebrow{margin:0;font:600 .74rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--tm-semantic-action-primary-bg)}
.hv-head h2{margin:0;text-wrap:balance;font-size:clamp(1.65rem,3.4vw,2.45rem);line-height:1.12;letter-spacing:-.02em}.hv-head>p:not(.hv-eyebrow){margin:0;color:var(--tm-semantic-text-secondary)}
.hv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--tm-semantic-spacing-inline-md)}
.hv-card{border:1px solid var(--tm-semantic-border-default);border-radius:var(--tm-semantic-radius-panel);padding:var(--tm-semantic-spacing-inline-lg);background:var(--tm-semantic-surface-panel);display:flex;flex-direction:column;gap:var(--tm-semantic-spacing-inline-sm);min-width:0}
.hv-card h3{margin:0;font-size:1.02rem}.hv-card p{margin:0;color:var(--tm-semantic-text-secondary);font-size:.94rem}
.hv-card a{color:var(--tm-semantic-action-primary-bg);font-size:.9rem}
.hv-code{margin:0;border:1px solid var(--tm-semantic-border-default);border-radius:var(--tm-semantic-radius-panel);background:var(--tm-semantic-surface-canvas);padding:var(--tm-semantic-spacing-inline-lg);font:400 .85rem/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-x:auto;color:var(--tm-semantic-text-primary)}
.hv-code .c{color:var(--tm-semantic-text-secondary)} .hv-code .r{color:var(--tm-semantic-action-primary-bg)}
.hv-steps-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--tm-semantic-spacing-inline-md);margin:0;padding:0;list-style:none;counter-reset:hv}
.hv-steps-list li{counter-increment:hv;border:1px solid var(--tm-semantic-border-default);border-radius:var(--tm-semantic-radius-panel);padding:var(--tm-semantic-spacing-inline-lg);background:var(--tm-semantic-surface-panel);display:flex;flex-direction:column;gap:var(--tm-semantic-spacing-inline-sm);min-width:0}
.hv-steps-list li::before{content:counter(hv);width:28px;height:28px;border-radius:var(--tm-semantic-radius-circular);display:grid;place-items:center;background:var(--tm-semantic-action-primary-bg);color:var(--tm-semantic-text-on-accent);font:700 .85rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.hv-steps-list h3{margin:0;font-size:1.02rem}.hv-steps-list p{margin:0;color:var(--tm-semantic-text-secondary);font-size:.94rem}
.hv-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--tm-semantic-spacing-inline-md)}
.hv-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--tm-semantic-spacing-inline-sm)}
.hv-list li{display:flex;gap:var(--tm-semantic-spacing-inline-sm);align-items:flex-start;font-size:.94rem;color:var(--tm-semantic-text-secondary)}
.hv-list li::before{flex:none;width:1.25rem;height:1.25rem;border-radius:var(--tm-semantic-radius-circular);display:grid;place-items:center;font:700 .72rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin-top:var(--tm-semantic-spacing-inline-xxs)}
.hv-list--yes li::before{content:"✓";background:var(--tm-semantic-feedback-success-surface);color:var(--tm-semantic-feedback-success)}
.hv-list--no li::before{content:"–";background:var(--tm-semantic-feedback-warning-surface);color:var(--tm-semantic-feedback-warning)}
.hv-card h3 em{font-style:normal;color:var(--tm-semantic-text-secondary);font-weight:500;font-size:.85em}
.hv-more{display:flex;flex-wrap:wrap;gap:var(--tm-semantic-spacing-inline-md) var(--tm-semantic-spacing-inline-xl);align-items:center}

/* --- Capture de l'écran réel --- */
.hv-shot{margin:0;border:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-default);border-radius:var(--tm-semantic-radius-panel);overflow:hidden;background:var(--tm-semantic-surface-panel);box-shadow:var(--tm-semantic-shadow-raised)}
.hv-shot img{display:block;width:100%;height:auto}
.hv-shot .hv-shot__still{display:none}
.hv-shot figcaption{padding:var(--tm-semantic-spacing-inline-md) var(--tm-semantic-spacing-inline-lg);color:var(--tm-semantic-text-secondary);font-size:.9rem;border-block-start:var(--tm-semantic-border-width-default) solid var(--tm-semantic-border-default)}
@media (prefers-reduced-motion:reduce){.hv-line,.hv-approve{transition:none}.hv-shot .hv-shot__anim{display:none}.hv-shot .hv-shot__still{display:block}}