/* Entrée × personnage en trame (16/10/2026). Page de test hors charte de production :
   elle reprend la direction « Déclic » de https://meet.thegoodone.ai/friends-family/perso/
   (crème, encre, pervenche, citron pâle ; Manrope 800 pour les titres, IBM Plex Mono pour le courant).
   Chargée APRÈS entree.css, presentation.css et facet-review.css : elle les rhabille sans toucher au moteur.
   Le portrait central est dessiné en points par entree-declic.js (canvas #figure). */

:root {
  --bg: #f9f1e7; --ink: #20242d; --accent: #b8c9ed; --cta: #f1f58c; --outline: #8b8f97;
  --surface: #eee7de; --scan: #ff9a1f;
  --paper: #f9f1e7; --white: #fdf9f3; --cream: #f9f1e7; --muted: #59606c; --line: #d8cfc3;
  --fluo: var(--cta); --lime: var(--cta); --forest: #20242d; --forest-light: #353a45;
  --display: "Manrope", system-ui, sans-serif; --serif: "Manrope", system-ui, sans-serif;
  --sans: "IBM Plex Mono", ui-monospace, monospace; --mono: "IBM Plex Mono", ui-monospace, monospace; --hand: var(--mono);
}
body.declic { background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 13px; }
.declic ::selection { background: var(--accent); color: var(--ink); }
.declic :is(button, a, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ——— En-tête : le logo et sa ligne pervenche, la navigation en mono ——— */
.declic .header { background: var(--bg); border-bottom: 1px solid var(--ink); }
.declic .brand-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.declic .brand-lockup img { width: 100%; height: auto; }
.declic .brand-lockup > span { margin-top: -2px; margin-left: 6%; padding: 1px 5px; background: var(--accent); font: 600 6.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.declic .brand-lockup > span:before { display: none; }
.declic .journey { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.declic .journey i { border-radius: 0; border-color: var(--outline); font: 600 9px var(--mono); }
.declic .journey-current i { background: var(--accent); border-color: var(--accent); }
.declic .journey-line { background: var(--outline); }
.declic .back-link { font: 500 11px var(--mono); }
.declic .tb { font: 600 11px var(--mono); border-radius: 0; border-color: var(--ink); }
.declic .tb.save, .declic .tb.save.pulse { background: var(--cta); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.declic .tb.save.pulse { box-shadow: 0 0 0 3px var(--accent); }
.declic #dock .dockcard > #saveBtn { background: var(--cta); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 0; font: 600 12px var(--mono); }
.declic #dock .dockcard > #saveBtn.pulse { box-shadow: 0 0 0 3px var(--accent); }

/* ——— La colonne de conversation ——— */
.declic .eyebrow { font: 500 10px/1.5 var(--mono); letter-spacing: .15em; color: var(--ink); }
.declic .small-dot { background: var(--accent); box-shadow: 0 0 0 1px var(--ink); border-radius: 50%; }
.declic .intro h1 { font: 800 clamp(30px, 5.6dvh, 58px)/1.06 var(--display); letter-spacing: -.075em; text-transform: none; }
.declic .intro h1 > span { display: inline; font: inherit; font-style: normal; letter-spacing: inherit; padding: 0 .08em; line-height: 1; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.declic .intro-copy { font: 400 13px/1.7 var(--mono); color: var(--muted); }

.declic .aime-heading strong { font: 700 14px var(--display); letter-spacing: -.02em; }
.declic .aime-heading > div > span, .declic .availability { font: 500 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.declic .availability i { background: var(--scan); border-radius: 0; }
/* le pictogramme de l'entretien : une petite trame de quatre points */
.declic .aime-avatar { width: 30px; height: 30px; padding: 6px; border: 1px solid var(--ink); border-radius: 0; background: var(--accent); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; place-items: center; }
.declic .aime-avatar i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.declic .aime-avatar i:nth-child(2), .declic .aime-avatar i:nth-child(3) { width: 4px; height: 4px; }
.declic .is-listening .aime-avatar i { animation: declic-blink 1.2s steps(2) infinite; }
.declic .is-listening .aime-avatar i:nth-child(2n) { animation-delay: .3s; }

/* La question : la grande voix de la page, en Manrope */
.declic .welcome-question, .declic .ask { background: none; border: 0; border-radius: 0; padding: 0; font: 700 clamp(17px, 2.5dvh, 23px)/1.18 var(--display); letter-spacing: -.035em; color: var(--ink); }
.declic .welcome-question em { font-style: normal; }
.declic .welcome-note { display: block; margin-bottom: 10px; font: 400 11px/1.6 var(--mono); letter-spacing: 0; color: var(--muted); }
.declic #asks { position: relative; padding-top: 12px; border-top: 1px solid var(--ink); }
.declic #asks:before { content: "// Question"; position: absolute; right: 0; top: -9px; padding: 2px 6px; background: var(--ink); color: var(--bg); font: 500 9px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.declic .starters > span { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.declic .starters button { border-radius: 0; border-color: var(--outline); font: 500 11px var(--mono); background: transparent; }
.declic .starters button:hover { background: var(--accent); border-color: var(--ink); }

/* Le micro : un bloc d'encre, un point citron */
.declic .voice-panel { background: var(--ink); color: var(--bg); border-radius: 0; }
.declic #mic { background: var(--cta); border-color: var(--cta); color: var(--ink); }
.declic #mic.live { background: var(--accent); border-color: var(--accent); }
.declic .ring { border-color: var(--accent); }
.declic .voice-copy strong { font: 700 14px var(--display); letter-spacing: -.02em; }
.declic .voice-copy > span { font: 500 9.5px var(--mono); color: color-mix(in srgb, var(--bg) 65%, transparent); letter-spacing: .04em; }

.declic .typerow > label, .declic .write-foot { font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.declic .write-box { background: var(--white); border: 1px solid var(--outline); border-radius: 0; }
.declic .write-box:focus-within { border-color: var(--ink); box-shadow: 0 3px 0 var(--accent); }
.declic .write-box textarea { font: 400 13px/1.6 var(--mono); }
.declic .write-box > button { background: var(--cta); border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 0; }
.declic .status { font: 500 11px/1.5 var(--mono); color: var(--muted); }
.declic .status .dot { background: var(--scan); border-radius: 0; }
.declic #demo { font: 500 10px var(--mono); }
.declic #transcript { font: italic 400 12px/1.5 var(--mono); color: var(--muted); }
.declic .caret, .declic .w { border-right-color: var(--scan); }
.declic .conversation-save button { border-radius: 0; background: var(--ink); color: var(--bg); font: 600 11px var(--mono); }
.declic .conversation-save p, .declic .conversation-foot { font: 400 9.5px/1.5 var(--mono); color: var(--muted); }
.declic .mobile-write-toggle { border-radius: 0; border-color: var(--outline); background: var(--white); font: 500 8px var(--mono); }
.declic .mobile-write-toggle[aria-expanded="true"] { background: var(--accent); border-color: var(--ink); }

/* ——— La scène : plus de boîte, la crème seule, le personnage en trame ——— */
.declic #map, .declic .has-profile #map { background: var(--bg); border: 0; border-left: 1px solid var(--ink); border-radius: 0; }
.declic .map-header { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.declic .profile-canvas, .declic .has-profile .profile-canvas, .declic #profileCanvas { background: none !important; }
.figure-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.declic .profile-canvas, .declic .map-footer, .declic .orbit-controls { position: relative; z-index: 2; }
.declic .map-footer { background: transparent; border-top: 1px solid var(--ink); font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.declic .map-footer .small-dot { background: var(--scan); border-radius: 0; }
.declic .map-signature { font: 500 9.5px var(--mono); }

/* le portrait : la bulle devient une zone invisible posée sur le buste, les points font le reste */
.declic .empty-orbits { display: none; }
.declic .bubble, .declic .has-profile .bubble { background: transparent; border: 0; box-shadow: none !important; border-radius: 50%; }
.declic .bubble .ph { visibility: hidden; }
.declic .bubble img { opacity: 0 !important; }
.declic .bubble.gen:after { border: 1px dashed var(--scan); }
.declic .addphoto { border-radius: 0; background: var(--bg); border-color: var(--ink); width: 32px; height: 32px; }
.declic .addphoto:hover { background: var(--accent); transform: none; }
.declic .portrait-note { gap: 4px; }
.declic .hubnote { transform: none; padding: 2px 7px; background: var(--ink); color: var(--bg); font: 500 10px/1.45 var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; }
.declic .photo-note { padding: 1px 6px; background: var(--bg); font: 400 10px var(--mono); color: var(--muted); }

/* l'état vide : trois phrases posées autour du personnage, comme dans la fiche */
.declic .empty-card { border: 0; border-radius: 0; background: none; box-shadow: none; transform: none !important; width: 210px; padding: 0; }
.declic .empty-card > span { display: inline-block; padding: 2px 7px; background: var(--ink); color: var(--bg); font: 500 9px/1.45 var(--mono); letter-spacing: .14em; margin-bottom: 10px; }
.declic .empty-card strong { font: 800 clamp(19px, 2.6dvh, 26px)/1 var(--display); letter-spacing: -.06em; color: var(--ink); }
.declic .empty-card i { display: none; }
.declic .ec-one { top: 9%; left: 5%; }
.declic .ec-two { top: 22%; right: 5%; text-align: right; }
.declic .ec-three { bottom: 13%; left: 5%; }
.declic .empty-caption { transform: none; right: 5%; bottom: 10%; text-align: right; }
.declic .empty-caption > span { display: none; }
.declic .empty-caption p { font: 500 12px/1.55 var(--mono); }
.declic .empty-caption em { color: var(--muted); font-style: normal; }

/* les facettes autour : un titre d'étape en encre, un grand titre, une ligne de mono */
.declic .card, .declic .has-profile #orbit .card { border: 0; border-radius: 0; background: color-mix(in srgb, var(--bg) 96%, #fff); box-shadow: 0 1px 2px rgba(32,36,45,.06), 0 14px 28px -10px rgba(32,36,45,.28); padding: 11px 13px 13px; }
.declic .has-profile #orbit .card:hover { box-shadow: 0 1px 2px rgba(32,36,45,.08), 0 20px 36px -12px rgba(32,36,45,.36); }
.declic .has-profile #orbit .card { width: 218px; }
.declic .card .cat { display: inline-flex; padding: 2px 7px; margin-bottom: 9px; background: var(--ink); color: var(--bg); font: 500 9px/1.45 var(--mono); letter-spacing: .14em; }
.declic .card .cat i { display: none; }
.declic .card h3, .declic .has-profile #orbit .card h3 { font: 800 20px/1.02 var(--display); letter-spacing: -.06em; margin-bottom: 8px; }
.declic .card p, .declic .has-profile #orbit .card p { font: 400 11.5px/1.55 var(--mono); color: var(--muted); }
.declic .card.fresh h3 { background: var(--accent); box-decoration-break: clone; -webkit-box-decoration-break: clone; width: fit-content; padding: 0 .1em; }
.declic .card.fresh .cat { background: var(--scan); color: var(--ink); }
.declic #links { display: none !important; }

/* ——— HUD : la micro-typo du scanner, en deux bandes ; la constellation vit entre elles ——— */
.declic .profile-canvas, .declic .has-profile .profile-canvas { margin: 42px 0 74px; }
.hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; font: 500 9.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hud p { margin: 0; }
.hud b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.hud__top, .hud__bottom { position: absolute; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.hud__top { top: 12px; }
.hud__top > div { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.hud__tag { padding: 1px 6px; background: var(--accent); color: var(--ink); }
.hud__xy { display: flex; gap: 6px; }
.hud__xy span { padding: 1px 6px; background: var(--ink); color: var(--bg); }
.hud__xy b { color: var(--bg); }
.hud__bottom { bottom: 12px; flex-direction: column; align-items: stretch; gap: 7px; }
.hud__facets { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; margin: 0; padding: 0; }
.hud__facets li { display: flex; gap: 6px; padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--outline) 60%, transparent); opacity: .5; transition: opacity .5s, background-color .5s; }
.hud__facets li b { color: inherit; font-weight: 500; }
.hud__facets li.on { opacity: 1; color: var(--ink); border-color: var(--ink); }
.hud__facets li.now { background: var(--accent); }
.hud__line { display: flex; align-items: center; gap: 12px; }
.hud__line > span { white-space: nowrap; }
.hud__bar { flex: 1; height: 2px; background: color-mix(in srgb, var(--outline) 50%, transparent); }
.hud__bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.22,.8,.24,1); }
/* zoom de la constellation : quatre petits boutons, sous la bande du haut */
.declic .orbit-controls { position: absolute; z-index: 4; top: 40px; right: 16px; padding: 0; background: transparent; border: 0; }
.declic .orbit-controls > span { display: none; }
.declic .orbit-controls button { border-radius: 0; border-color: var(--outline); background: var(--bg); font-family: var(--mono); width: 28px; height: 28px; font-size: 16px; }
.declic .orbit-controls #zoomFit { width: auto; font: 500 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.declic .orbit-controls button:hover { background: var(--accent); }
.declic #zoomValue { font: 500 9.5px var(--mono); }
.declic .map-footer { display: none; }
.declic .has-profile .photo-note { display: none; }

.declic footer.site { border-top: 1px solid var(--ink); font: 500 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ——— Fenêtres : fiche de présentation et lecture d'une facette ——— */
.declic .sheet, .declic .bubble-reader { border-radius: 0; background: var(--bg); border-color: var(--ink); }
.declic .sheet h2, .declic .bubble-reader h2 { font: 800 clamp(30px, 4vw, 44px)/.98 var(--display); letter-spacing: -.07em; }
.declic .sheet h2 em { font: inherit; }
.declic .reader-note { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.declic .bubble-reader > p { font: 400 13px/1.75 var(--mono); }
.declic .btn { border-radius: 0; font: 600 11px var(--mono); }
.declic .btn.fluo { background: var(--cta); border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.declic .field input, .declic .presentation-headline { border-radius: 0; font-family: var(--mono); border-color: var(--outline); background: var(--white); }
.declic #veil { background: color-mix(in srgb, var(--ink) 45%, transparent); }

@keyframes declic-blink { 50% { opacity: .25; } }

@media (max-width: 900px) {
  .declic .header { border-bottom: 1px solid var(--ink); }
  .declic .brand-lockup > span { display: none; }
  .declic #map, .declic .has-profile #map { border-left: 0; --fig-top: 40px; --fig-bottom: 8px; } /* le personnage commence sous la bande du haut */
  .hud [data-hud-dots] { display: none; }
  .hud__xy, .hud__facets, .hud__clock { display: none; }
  .hud__top, .hud__bottom { left: 14px; right: 14px; }
  .declic .profile-canvas, .declic .has-profile .profile-canvas { margin: 0; }
  .declic .orbit-controls { top: 34px; right: 10px; }
  .declic #dock { border-radius: 0; border-top: 1px solid var(--ink); box-shadow: 0 -10px 30px color-mix(in srgb, var(--ink) 8%, transparent); background: var(--bg); }
  .declic #asks { border-left: 0; padding-left: 0; padding-top: 10px; }
  .declic #asks:before { display: none; }
  .declic .has-profile .hud__top > div:first-child span:last-child { display: none; }
  .declic .welcome-question, .declic .ask { font-size: 21px; }
  .declic .voice-panel { border-radius: 0; }
  .declic .write-box { border-radius: 0; }
  .declic .write-box > button { border-radius: 0; }
  .declic .empty-card { width: 42%; }
  .declic .empty-card strong { font-size: 17px; }
  .declic .ec-one { top: 16%; } .declic .ec-two { top: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .declic .is-listening .aime-avatar i { animation: none; }
}