/* KOUNHANY interface — « Nova ». Deep navy with light bleeding through, frosted-glass panels, coral kept for action.
   Scale: 14px text, buttons about 30px tall, titles barely larger than text. */
:root {
  color-scheme: dark;
  --navy: #14213D; --navy-deep: #0D1730; --cream: #F4EDE0; --coral: #FF6B5B; --coral-deep: #E4523F; --sky: #DDE6F6;
  --fg: #F4EDE0; --fg-2: #F4EDE0BF; --fg-3: #F4EDE0A6;            /* secondary text stays above 4.5:1 on the glass */
  --glass: #FFFFFF12; --glass-2: #FFFFFF1F; --glass-line: #FFFFFF26; --glass-line-2: #FFFFFF14; --well: #0D173073;
  --ok: #7CE0A6; --alert: #FFB4A8;
  --f: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --r: 16px; --r-s: 12px;
  --focus: 0 0 0 2px #0D1730, 0 0 0 4px #FF8A7D;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--navy-deep); color: var(--fg); font: 14px/1.55 var(--f); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
button, input, textarea, select, a, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }   /* a tap is a click at once on iPad: no double-tap zoom delay */
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus); }
::selection { background: var(--coral); color: var(--navy); }

/* The atmosphere: plain gradients, no live blur, so cheap machines are fine. */
.atmosphere { position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0); background:
  radial-gradient(48% 60% at 10% 12%, #DDE6F680 0%, #DDE6F600 70%),
  radial-gradient(40% 55% at 68% 50%, #FF6B5B8C 0%, #FF6B5B00 70%),
  radial-gradient(34% 44% at 90% 18%, #F4EDE042 0%, #F4EDE000 70%),
  radial-gradient(60% 50% at 50% 100%, #0D1730 0%, #0D173000 70%),
  linear-gradient(160deg, #1E2E52 0%, #14213D 48%, #0D1730 100%); }
.atmosphere::after { content: ""; position: absolute; inset: 0; opacity: .35;
  background: repeating-linear-gradient(90deg, #FFFFFF08 0 1px, transparent 1px 7px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #0008 55%, #0000 100%); mask-image: linear-gradient(180deg, #000 0%, #0008 55%, #0000 100%); }

/* Glass: every panel that floats on the atmosphere. One border level, never nested glass.
   No live blur: the atmosphere is already soft, so a translucent fill gives the same look for no rendering cost. */
.verre { background: #FFFFFF14; border: 1px solid var(--glass-line); border-radius: var(--r); box-shadow: inset 0 1px 0 #FFFFFF12, 0 24px 60px -40px #000; }
@media (prefers-reduced-transparency: reduce) {
  .verre { background: #1A2748; }
  .atmosphere::after { display: none; }
}

.label { font: 600 10.5px/1.3 var(--f); letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3); }
.btn { border: 1px solid var(--glass-line); background: var(--glass-2); color: var(--fg); padding: 6px 12px; border-radius: 999px; font: 600 12.5px/1.2 var(--f); transition: transform .08s ease, filter .15s ease; }
.btn:hover:not(:disabled) { filter: brightness(1.12); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.btn.principal { background: var(--coral); border-color: #FF8A7D; color: var(--navy); box-shadow: 0 8px 22px -10px #FF6B5B, inset 0 1px 0 #FFFFFF40; }  /* navy on coral: readable */
.btn.plein { width: 100%; padding: 9px 12px; font-size: 13px; }
.lien { border: 0; background: none; padding: 0; color: var(--fg-3); text-align: left; text-decoration: underline; text-underline-offset: 3px; font-size: 12.5px; border-radius: 4px; }
.lien:hover { color: var(--fg); }
.lien.centre { align-self: center; }
.alerte { margin: 0; color: var(--alert); font-size: 13px; }
.avatar { width: 30px; height: auto; flex: none; border: 0; }        /* Nova in her ring: the image carries its own circle */
.avatar.moyen { width: 44px; }
.avatar.travaille { filter: brightness(1.15) saturate(1.2); }

/* Login and password screens */
.porte { min-height: 100%; display: grid; place-items: center; padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.porte-cadre { width: min(360px, 100%); display: flex; flex-direction: column; gap: 12px; align-items: stretch; padding: 0 26px 22px; text-align: center; }
.presence { align-self: center; width: 200px; height: auto; margin: 26px 0 2px; border: 0; filter: drop-shadow(0 0 28px #FF6B5B40); }
.salut { margin: 6px 0 0; font: 600 19px/1.25 var(--f); color: #fff; text-wrap: balance; }
.salut.petit { font-size: 16px; }
.porte-sous { margin: 0 0 6px; color: var(--fg-2); font-size: 13.5px; }
.porte-note { margin: 4px 0 0; color: var(--fg-3); font-size: 12px; }
.champ { display: flex; flex-direction: column; gap: 5px; text-align: left; }
.champ > span:first-child { font: 600 10.5px/1.3 var(--f); letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3); }
.champ input { width: 100%; background: var(--well); border: 1px solid var(--glass-line); border-radius: 11px; padding: 9px 12px; }
.champ input:focus { border-color: #FF8A7D; outline: none; box-shadow: none; }
.champ-mdp { position: relative; display: block; }
.champ-mdp input { padding-right: 76px; }
.oeil { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--fg-3); font-size: 12px; padding: 4px 6px; border-radius: 6px; }
.oeil:hover { color: var(--fg); }

/* App frame */
.app { height: 100%; display: grid; grid-template-columns: 232px minmax(0, 1fr) 300px; gap: 12px; padding: 12px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
.rail { display: flex; flex-direction: column; gap: 12px; padding: 16px 12px; min-width: 0; min-height: 0; }
.marque { display: flex; align-items: center; gap: 10px; padding: 2px 6px 4px; }
.marque b { font: 600 14px/1 var(--f); letter-spacing: .08em; }
.marque span { font: 500 10px/1.3 var(--f); color: var(--fg-3); letter-spacing: .08em; text-transform: uppercase; display: block; margin-top: 3px; }
.nouvelle { display: flex; align-items: center; gap: 9px; border: 1px solid var(--glass-line); border-radius: 999px; padding: 8px 13px; background: var(--glass-2); color: var(--fg); font: 600 13px/1 var(--f); }
.nouvelle:hover { filter: brightness(1.12); }
.nouvelle i { width: 7px; height: 7px; border-radius: 2px; background: var(--coral); transform: rotate(45deg); box-shadow: 0 0 10px #FF6B5B99; }
.conversations { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.jour { color: var(--fg-3); font: 600 10px/1 var(--f); letter-spacing: .1em; text-transform: uppercase; margin: 8px 6px 4px; }
.conv { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--fg-2); text-align: left; font-size: 13px; }
.conv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv i { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-3); flex: none; }
.conv:hover { background: var(--glass); color: var(--fg); }
.conv.actif { background: var(--glass-2); color: var(--fg); border-color: var(--glass-line-2); }
.conv.actif i { background: var(--coral); box-shadow: 0 0 8px #FF6B5B; }
.moi { position: relative; margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 4px 0; border-top: 1px solid var(--glass-line-2); }
.initiales { width: 28px; height: 28px; border-radius: 50%; background: var(--well); border: 1px solid var(--glass-line); display: grid; place-items: center; flex: none; }
.initiales img { width: 16px; height: auto; display: block; }
.moi-texte { min-width: 0; flex: 1; }
.moi-texte b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moi-texte span { font-size: 11.5px; color: var(--fg-3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-bouton { border: 0; background: none; color: var(--fg-3); font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 6px; }
.menu-bouton:hover { color: var(--fg); background: var(--glass); }
.menu { position: absolute; right: 0; bottom: calc(100% + 6px); display: flex; flex-direction: column; min-width: 210px; padding: 6px; background: #1A2748; border: 1px solid var(--glass-line); border-radius: 12px; box-shadow: 0 20px 40px -20px #000; }
.menu-item { border: 0; background: none; color: var(--fg); text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.menu-item:hover { background: var(--glass-2); }

/* Conversation */
.chat { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.chat-tete { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--glass-line-2); }
.qui { display: flex; flex-direction: column; min-width: 0; }
.qui b { font: 600 15px/1.2 var(--f); }
.qui span { color: var(--fg-2); font-size: 12.5px; }
.vivant { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); margin-right: 6px; vertical-align: 1px; }
.vivant.travaille { background: var(--coral); box-shadow: 0 0 8px var(--coral); animation: respire 1.6s ease-in-out infinite; }
@keyframes respire { 50% { opacity: .35; } }
.puce { margin-left: auto; font: 500 11.5px/1 var(--f); padding: 6px 10px; border: 1px solid var(--glass-line); border-radius: 999px; color: var(--fg-2); white-space: nowrap; }
.bandeau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 20px; background: #F4EDE014; border-bottom: 1px solid var(--glass-line-2); font-size: 12.5px; color: var(--fg-2); }
.fil { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 20px 10px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; overscroll-behavior: contain; }
.accueil { margin: auto; max-width: 46ch; text-align: center; color: var(--fg-2); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.accueil img { width: 130px; height: auto; border: 0; filter: drop-shadow(0 0 24px #FF6B5B40); }
.accueil b { font: 600 17px/1.25 var(--f); color: #fff; }
.coupure { align-self: center; font: 600 10.5px/1.4 var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); padding: 2px 10px; border: 1px solid var(--glass-line-2); border-radius: 999px; }
.msg { display: flex; gap: 10px; align-items: flex-start; max-width: 78%; min-width: 0; animation: arrive .22s ease-out; }
@keyframes arrive { from { opacity: 0; transform: translateY(4px); } }
.msg.stable { animation: none; }
.msg .corps { min-width: 0; }
.msg .texte { overflow-wrap: anywhere; }
.msg time { display: block; font-size: 11px; color: var(--fg-3); margin-top: 4px; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; max-width: min(64ch, 80%); }
.msg.user .texte { padding: 10px 14px; border-radius: var(--r); border-top-right-radius: 6px; white-space: pre-wrap; color: var(--fg);
  background: var(--glass); border: 1px solid var(--glass-line-2); }   /* the glass style the agent's messages had: frosted fill, thin outline */
.msg.user time { text-align: right; }
.msg.assistant { width: 100%; max-width: 100%; }
.msg.assistant .corps { max-width: min(78ch, 100%); padding-top: 3px; }
.msg.assistant .texte { padding: 0; background: none; border: 0; }   /* Nova speaks on the page itself; only cards and quotes get a surface */
.msg.assistant.suite { margin-top: -2px; }
.msg.assistant.suite .avatar { visibility: hidden; }      /* consecutive answers share one face */
.msg.systeme { align-self: center; max-width: 100%; color: var(--alert); font-size: 13px; }
.msg.action { align-self: center; max-width: 100%; align-items: center; gap: 8px; color: var(--fg-2); font-size: 12.5px; }
.coche { width: 7px; height: 7px; background: var(--coral); transform: rotate(45deg); border-radius: 1px; box-shadow: 0 0 8px #FF6B5B; }
.msg.attente { align-items: center; gap: 10px; color: var(--fg-2); font-size: 12.5px; }
.msg.attente .avatar { width: 30px; }
.attente .points { display: inline-flex; gap: 5px; padding: 10px 2px; }
.attente .points i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 8px #FF6B5B; animation: respire 1.4s ease-in-out infinite; }
.attente .points i:nth-child(2) { animation-delay: .25s; } .attente .points i:nth-child(3) { animation-delay: .5s; }
.fil-zone { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.vers-le-bas { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); border: 1px solid var(--glass-line); background: #1A2748; color: var(--fg); padding: 6px 12px; border-radius: 999px; font: 600 12px/1.2 var(--f); box-shadow: 0 12px 30px -14px #000; }

/* What the agent writes (rendered Markdown) */
.texte > :first-child { margin-top: 0; }
.texte > :last-child { margin-bottom: 0; }
.texte p { margin: 0 0 8px; }
.texte strong { color: #fff; font-weight: 600; }
.texte h3, .texte h4 { font: 600 14px/1.3 var(--f); margin: 14px 0 6px; color: #fff; }
.texte ul, .texte ol { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.texte li::marker { color: var(--coral); }
.texte li > ul, .texte li > ol { margin: 4px 0 0; }
.texte code { font-size: 12.5px; background: var(--well); padding: 1px 5px; border-radius: 4px; }
.texte pre { background: var(--well); border: 1px solid var(--glass-line-2); border-radius: 10px; padding: 10px 12px; overflow-x: auto; margin: 0 0 8px; font-size: 12.5px; }
.texte pre code { background: none; padding: 0; }
.texte blockquote { margin: 0 0 8px; padding: 10px 14px; background: var(--well); border: 1px solid var(--glass-line-2); border-radius: 10px; }
.texte blockquote p:last-child { margin-bottom: 0; }
.texte hr { border: 0; border-top: 1px solid var(--glass-line-2); margin: 12px 0; }
.texte .tableau { overflow-x: auto; margin: 0 0 8px; border: 1px solid var(--glass-line-2); border-radius: 10px; background: var(--well); }
.texte .tableau table { border-collapse: collapse; width: 100%; font-size: 13px; }
.texte .tableau th { text-align: left; font: 600 10.5px/1.3 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); padding: 9px 11px; }
.texte .tableau td { padding: 8px 11px; border-top: 1px solid var(--glass-line-2); vertical-align: top; }
.copier { margin: -2px 0 8px; }

/* Composer: a pill, shortcuts as chips under it */
.saisie { display: flex; flex-direction: column; gap: 9px; padding: 10px 20px 16px; border-top: 1px solid var(--glass-line-2); }
.boite { display: flex; align-items: flex-end; gap: 8px; padding: 5px 5px 5px 16px; border-radius: 22px; background: var(--well); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 #FFFFFF14; }
.boite:focus-within { border-color: #FF8A7D; box-shadow: inset 0 1px 0 #FFFFFF14, 0 0 0 3px #FF6B5B29; }
.boite textarea { flex: 1; min-width: 0; resize: none; max-height: 200px; background: transparent; border: 0; padding: 7px 0; line-height: 1.5; }
.boite textarea:focus { outline: none; box-shadow: none; }
.boite textarea::placeholder { color: var(--fg-3); }
.envoi { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 0; background: var(--coral); color: var(--navy); display: grid; place-items: center; box-shadow: 0 8px 22px -10px #FF6B5B; transition: transform .08s ease; }
.envoi:active:not(:disabled) { transform: scale(.95); }
.envoi:disabled { opacity: .45; box-shadow: none; cursor: default; }
.raccourcis { display: flex; flex-wrap: wrap; gap: 6px; }
.raccourci { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--glass-line-2); background: var(--glass); font: 500 12.5px/1.2 var(--f); color: var(--fg-2); }
.raccourci::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--coral); transform: rotate(45deg); }
.raccourci:hover { color: var(--fg); border-color: var(--glass-line); }

/* Side panel: generic blocks sent by the agents' tools. Each block is its own glass panel; nothing nested in glass. */
.cote { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; overflow-y: auto; }
.bloc { display: flex; flex-direction: column; gap: 9px; padding: 12px 13px; flex: none; }
.bloc-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.compteur { min-width: 20px; padding: 3px 7px; border-radius: 999px; background: var(--cream); color: var(--navy); font: 600 11px/1 var(--f); text-align: center; font-variant-numeric: tabular-nums; }
.compteur.zero { background: transparent; color: var(--fg-3); border: 1px solid var(--glass-line-2); }
.vide { margin: 0; color: var(--fg-3); font-size: 13px; }
.elements { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.element { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-top: 1px solid var(--glass-line-2); }
.element:first-child { border-top: 0; padding-top: 0; }
.element b { font-weight: 600; font-size: 13.5px; }
.element p { margin: 0; color: var(--fg-2); font-size: 12.5px; }
.etiquette { font: 600 10.5px/1.3 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.alerte-ton .etiquette { color: var(--alert); }
.action { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--fg); font-weight: 600; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; border-radius: 4px; }
.action:hover { color: #fff; }
.barres { display: flex; flex-direction: column; gap: 7px; }
.barre-ligne { display: grid; grid-template-columns: 104px minmax(0, 1fr) 26px; align-items: center; gap: 10px; font-size: 12.5px; }
.barre-ligne span:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.barre { height: 5px; background: var(--glass-line-2); border-radius: 3px; overflow: hidden; }
.barre i { display: block; height: 100%; background: var(--cream); }
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.chiffre { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 10px; background: var(--well); }
.chiffre b { font: 600 17px/1.1 var(--f); color: #fff; font-variant-numeric: tabular-nums; }
.chiffre span { color: var(--fg-3); font-size: 11px; line-height: 1.3; }

/* Cards: a decision or a next step with its buttons. Same drawing in the panel and inside the conversation. */
.cartes { display: flex; flex-direction: column; gap: 8px; }
.msg.assistant .cartes { margin-top: 10px; max-width: 520px; }
.carte { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: var(--r-s); background: var(--well); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 #FFFFFF14; }
.carte-tete { display: flex; flex-direction: column; gap: 2px; }
.carte-tete .etiquette { color: var(--coral); }
.carte-tete b { font: 600 14px/1.3 var(--f); color: #fff; }
.carte p { margin: 0; color: var(--fg-2); font-size: 13px; }
.carte details { font-size: 13px; }
.carte summary { cursor: pointer; color: var(--fg); font-weight: 500; }
.carte .detail { margin: 8px 0 0; white-space: pre-wrap; font: 400 12.5px/1.5 var(--f); color: var(--fg-2); max-height: 260px; overflow: auto; }
.boutons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; }
.bouton { border: 1px solid var(--glass-line); background: var(--glass-2); color: var(--fg); padding: 6px 12px; border-radius: 999px; font: 600 12.5px/1.2 var(--f); transition: transform .08s ease, filter .15s ease; }
.bouton.principal { background: var(--coral); border-color: #FF8A7D; color: var(--navy); box-shadow: 0 8px 22px -10px #FF6B5B, inset 0 1px 0 #FFFFFF40; }
.bouton:hover:not(:disabled) { filter: brightness(1.12); }
.bouton:active:not(:disabled) { transform: scale(.98); }
.bouton:disabled { opacity: .4; cursor: default; box-shadow: none; }
.confirmation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--glass-line-2); font-size: 13px; }
.confirmation input { flex: 1 1 160px; min-width: 0; background: var(--navy-deep); border: 1px solid var(--glass-line); border-radius: 9px; padding: 7px 10px; }
.confirmation input:focus { border-color: #FF8A7D; outline: none; box-shadow: none; }
.confirmation textarea { flex: 1 1 100%; min-width: 0; min-height: 84px; resize: vertical; background: var(--navy-deep); border: 1px solid var(--glass-line); border-radius: 9px; padding: 8px 10px; line-height: 1.45; }
.confirmation textarea:focus { border-color: #FF8A7D; outline: none; box-shadow: none; }
.confirmation select { flex: 1 1 160px; min-width: 0; background: var(--navy-deep); border: 1px solid var(--glass-line); border-radius: 9px; padding: 7px 10px; color: var(--fg); }
.carte.passee { opacity: .55; }
.carte.passee .carte-tete { padding-right: 64px; }
.carte.passee > .label { position: absolute; top: 12px; right: 12px; }

@media (max-width: 1180px) {
  .app { grid-template-columns: 200px minmax(0, 1fr) 270px; }
}
@media (max-width: 960px) {
  html, body { height: auto; }
  .app { grid-template-columns: minmax(0, 1fr); height: auto; }
  .rail { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .rail .conversations { display: none; }
  .rail .moi { margin: 0 0 0 auto; border: 0; padding: 0; }
  .menu { bottom: auto; top: calc(100% + 6px); }
  .chat { height: 82vh; height: 82dvh; }
  .page-crm { grid-column: 1; height: 82vh; height: 82dvh; }
  .msg { max-width: 92%; }
  .btn, .bouton, .raccourci, .nouvelle { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .vivant.travaille, .attente .points i { animation: none; }
  .msg { animation: none; }
  .fil { scroll-behavior: auto; }
}

/* CRM page (Direction): the page draws the tables and sheets the tool sends. It replaces the conversation and the panel while open. */
.pages { display: flex; flex-direction: column; gap: 6px; }
.pages:empty { display: none; }
.page-bouton { display: flex; align-items: center; gap: 9px; border: 1px solid var(--glass-line); border-radius: 999px; padding: 8px 13px; background: transparent; color: var(--fg); font: 600 13px/1 var(--f); }
.page-bouton:hover, .page-bouton.actif { background: var(--glass-2); }
.page-bouton i { width: 7px; height: 7px; border-radius: 2px; background: var(--sky); transform: rotate(45deg); }
.app.crm-ouvert > .chat, .app.crm-ouvert > .cote { display: none; }
.page-crm { grid-column: 2 / 4; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.crm-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 20px; border-bottom: 1px solid var(--glass-line-2); }
.crm-titre { font: 600 15px/1 var(--f); color: #fff; }
.crm-onglets { display: flex; flex-wrap: wrap; gap: 6px; }
.onglet { border: 1px solid transparent; background: transparent; color: var(--fg-2); padding: 6px 12px; border-radius: 999px; font: 600 12.5px/1.2 var(--f); }
.onglet:hover { color: var(--fg); background: var(--glass); }
.onglet.actif { color: var(--fg); background: var(--glass-2); border-color: var(--glass-line); }
.crm-recherche { flex: 1 1 220px; max-width: 320px; background: var(--navy-deep); border: 1px solid var(--glass-line); border-radius: 999px; padding: 7px 14px; }
.crm-recherche:focus { border-color: #FF8A7D; outline: none; box-shadow: none; }
.crm-droite { margin-left: auto; display: flex; gap: 8px; align-items: center; }
a.btn { text-decoration: none; display: inline-block; }
.crm-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.crm-corps .bloc { max-width: 1100px; width: 100%; }
.defile { overflow-x: auto; }
.donnees { width: 100%; border-collapse: collapse; font-size: 13px; }
.donnees th { text-align: left; font: 600 10.5px/1.3 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); padding: 6px 10px 8px; white-space: nowrap; }
.donnees td { padding: 9px 10px; border-top: 1px solid var(--glass-line-2); vertical-align: top; color: var(--fg-2); overflow-wrap: anywhere; }
.donnees td:first-child { color: var(--fg); font-weight: 600; }
.donnees tr.cliquable { cursor: pointer; }
.donnees tr.cliquable:hover td, .donnees tr.cliquable:focus-visible td { background: var(--glass); }
.donnees tr.alerte-ton td:first-child { color: var(--alert); }
.fiche-tete { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.fiche-tete .etiquette { color: var(--coral); }
.fiche-tete b { font: 600 18px/1.25 var(--f); color: #fff; }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 18px; margin: 0 0 12px; }
.champs dt { font: 600 10.5px/1.3 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.champs dd { margin: 2px 0 0; color: var(--fg); }
.fiche-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fiche-actions .confirmation { flex: 1 1 100%; }

/* Assistant selector (only for people who may talk to several), team page, pictures */
.assistants { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--glass-line-2); border-radius: 999px; background: var(--well); }
.assistant-choix { flex: 1; border: 0; background: transparent; color: var(--fg-2); padding: 6px 8px; border-radius: 999px; font: 600 12.5px/1.2 var(--f); }
.assistant-choix:hover { color: var(--fg); }
.assistant-choix.actif { background: var(--glass-2); color: var(--fg); box-shadow: inset 0 0 0 1px var(--glass-line); }
.app.equipe-ouverte > .chat, .app.equipe-ouverte > .cote { display: none; }
.formulaire { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; align-items: end; }
.formulaire .champ select, .actions-compte select { background: var(--well); border: 1px solid var(--glass-line); border-radius: 11px; padding: 9px 12px; color: var(--fg); }
.formulaire .bouton { justify-self: start; padding: 9px 16px; }
.discret { color: var(--fg-3); font-size: 12px; }
.donnees tr.inactif td { opacity: .55; }
.actions-compte { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.actions-compte select { padding: 5px 8px; font-size: 12.5px; border-radius: 999px; }
.resultat { border-color: #FF8A7D; gap: 8px; }
.secret { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.secret code { font-size: 14px; padding: 4px 8px; background: var(--well); border-radius: 6px; user-select: all; }
.visuel { margin: 4px 0 10px; max-width: 320px; display: flex; flex-direction: column; gap: 6px; }
.visuel img, .vignette img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; border: 1px solid var(--glass-line); background: var(--well); }
.visuel figcaption, .vignette figcaption { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--fg-3); }
.visuel figcaption a, .vignette figcaption a { color: var(--fg); text-underline-offset: 3px; white-space: nowrap; }
.vignettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vignette { margin: 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vignette figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Search in conversations, brief card, stepper, quick answers */
.recherche-conv { background: var(--well); border: 1px solid var(--glass-line-2); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; min-width: 0; }
.recherche-conv:focus { border-color: #FF8A7D; outline: none; box-shadow: none; }
.recherche-conv::placeholder { color: var(--fg-3); }
.conversations .vide { margin: 4px 6px; font-size: 12px; }
.formulaire-brief { display: flex; flex-direction: column; gap: 10px; }
.formulaire-brief .champ input { padding: 7px 10px; font-size: 13px; }
.choix { display: flex; flex-wrap: wrap; gap: 5px; }
.choix-option { border: 1px solid var(--glass-line-2); background: var(--glass); color: var(--fg-2); padding: 4px 10px; border-radius: 999px; font: 500 12px/1.3 var(--f); }
.choix-option:hover { color: var(--fg); border-color: var(--glass-line); }
.choix-option.actif { background: var(--coral); border-color: #FF8A7D; color: var(--navy); font-weight: 600; }
.post-titre { font: 600 13.5px/1.3 var(--f); color: #fff; }
.etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.etape { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--fg-3); }
.etape i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--glass-line); flex: none; }
.etape.fait { color: var(--fg-2); }
.etape.fait i { background: var(--ok); border-color: var(--ok); }
.etape.encours { color: #fff; font-weight: 600; }
.etape.encours i { background: var(--coral); border-color: var(--coral); box-shadow: 0 0 8px #FF6B5B; }
.choix-rapides { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
a.bouton { text-decoration: none; display: inline-block; }

.bouton.danger { border-color: #FFB4A844; color: var(--alert); }
.bouton.danger.principal { background: #FFB4A8; border-color: #FFB4A8; color: var(--navy); box-shadow: none; }
.avertissement { flex: 1 1 100%; border-top: 0; margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: #FFB4A814; border: 1px solid #FFB4A844; }
.avertissement p { margin: 0 0 6px; flex: 1 1 100%; font-size: 12.5px; color: var(--fg-2); }

.probleme { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 12px; background: #3A1F26; border: 1px solid #FFB4A866; color: #FFD9D2; font-size: 12.5px; }
.probleme button { flex: none; border: 1px solid #FFB4A866; background: transparent; border-radius: 999px; padding: 4px 12px; }