/* Delta — compléments de style de l'espace privé (Mon espace et gestion). La feuille du site (site.css) fournit
   l'identité validée ; ces règles ne couvrent que les éléments propres aux écrans réels de gestion. */
.badge-nav { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #c62828; color: #fff; font-size: .78rem; font-weight: 800; line-height: 1; }
.lien-nav { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }
.espace-nav-in .lien-nav { font-weight: 700; color: var(--bleu); min-height: 44px; }
.lien-bouton.danger, .btn.danger { color: #8a1c12; }
.btn.danger { border-color: #8a1c12; }
.a-confirmer { background: #fff4d6 !important; color: #5c4300 !important; }
.confirmation-saisie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; padding: 10px; border: 1.5px dashed #8a1c12; border-radius: 10px; background: #fff; }
.confirmation-saisie input { min-height: 40px; border: 1.5px solid #8a96ab; border-radius: 8px; padding: 0 10px; margin-left: 6px; }
.recherche-ligne { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: center; }
.recherche-ligne input, .recherche-ligne select { min-height: 44px; border: 1.5px solid #8a96ab; border-radius: 10px; padding: 0 12px; font: inherit; background: #fff; }
.recherche-ligne input { flex: 1 1 240px; }
a.filtre { text-decoration: none; display: inline-flex; align-items: center; }
.case-confirmation { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; padding: 10px 12px; background: var(--bleu-pale); border-radius: 10px; font-weight: 600; }
.case-confirmation input { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.form-ligne-compacte { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; width: 100%; }
.form-ligne-compacte input[type=text], .form-ligne-compacte input:not([type]) { flex: 1 1 180px; min-height: 40px; border: 1.5px solid #8a96ab; border-radius: 8px; padding: 0 10px; font: inherit; }
.form-ligne-compacte .retour, .form-ligne-compacte .resume-erreurs { flex-basis: 100%; }
.case-inline { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.case-inline input { width: 18px; height: 18px; }
.liste-ressources { list-style: none; padding: 0; display: grid; gap: 14px; }
.ressource-gestion h4 { margin: 0; font-size: 1.05rem; color: var(--nuit); }
.ressource-gestion .depot { margin-top: 8px; }
.lien-copie { width: 100%; margin-top: 6px; min-height: 40px; border: 1.5px solid #8a96ab; border-radius: 8px; padding: 0 10px; font: inherit; }
.notes { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 8px; }
.notes li { background: var(--creme); border: 1px solid var(--trait); border-radius: 10px; padding: 8px 12px; }
.message-libre { white-space: normal; background: var(--creme); border-radius: 10px; padding: 10px 12px; }
.chat-dispo { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.chat-dispo p { margin: 0; }
.liste-conversations { list-style: none; padding: 0; margin-top: 10px; display: grid; gap: 8px; }
.conv-ligne { display: grid; gap: 2px; text-decoration: none; color: var(--encre); background: #fff; border: 1px solid var(--trait); border-left: 5px solid #8a96ab; border-radius: 12px; padding: 10px 12px; }
.conv-ligne.non-lue { border-left-color: #c62828; }
.conv-ligne[aria-current="true"] { border-left-color: var(--bleu); box-shadow: 0 1px 2px rgba(11,32,64,.05), 0 6px 16px rgba(11,32,64,.07); }
.apercu-msg { color: var(--gris); font-size: .9rem; overflow-wrap: anywhere; }
.fil-messages { display: flex; flex-direction: column; gap: 10px; background: #b0bfef; border-radius: 14px; padding: 14px; margin: 12px 0; max-height: 55vh; overflow-y: auto; }
.msg { max-width: 82%; border-radius: 16px; padding: 10px 14px; background: #fff; color: #162b6f; overflow-wrap: anywhere; }
.msg p { margin: 0; }
.msg small { display: block; margin-top: 4px; font-size: .74rem; color: #4d5470; }
.msg-visiteur { align-self: flex-start; }
.msg-bot { align-self: flex-start; background: #eef1fb; font-style: italic; }
.msg-direction { align-self: flex-end; background: #5570b5; color: #fff; }
.msg-direction small { color: #fff; }
.chat-grille { align-items: start; }
.gestion-tuiles h2 { font-size: 1.25rem; }
@media (max-width: 640px) { .msg { max-width: 92%; } }
/* Bulles du fil : la règle « .boite p » (texte gris) ne s'applique pas aux messages */
.fil-messages .msg p { color: inherit; }
.conv-ligne .badge-nav { justify-self: start; margin-left: 0; }
/* Mission 11 : lien secondaire de connexion (bas du bloc de connexion), éditeur des articles du blog */
.espace-carte:has(> .lien-secondaire) { display: flex; flex-direction: column; }
.lien-secondaire { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--trait); text-align: left; font-size: .92rem; }
.espace-carte:has(> .lien-secondaire) > form { margin-bottom: 22px; }
.lien-secondaire a { display: inline-flex; align-items: center; min-height: 44px; color: var(--encre); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lien-secondaire a:hover { color: var(--bleu); }
@media (min-width: 1024px) { .editeur-blog { grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); } .editeur-blog > div:last-child { position: sticky; top: 16px; } }
.adresse-ligne { display: flex; align-items: stretch; border: 1.5px solid #8a96ab; border-radius: 10px; background: #fff; overflow: hidden; }
.adresse-ligne:focus-within { outline: 3px solid var(--ciel); outline-offset: 1px; }
.prefixe-adresse { display: flex; align-items: center; padding: 0 4px 0 12px; background: var(--creme); color: var(--gris); font-size: .9rem; white-space: nowrap; }
.adresse-ligne input { flex: 1 1 auto; min-width: 0; border: 0 !important; outline: none; box-shadow: none; border-radius: 0; }
.adresse-ligne input[readonly] { background: var(--creme); color: var(--gris); }
@media (max-width: 640px) { .adresse-ligne { flex-direction: column; } .prefixe-adresse { padding: 6px 12px 0; } }
.barre-outils { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.editeur-article textarea[name="contenu"] { font-family: ui-monospace, Consolas, monospace; font-size: .95rem; line-height: 1.55; min-height: 320px; }
.aide-contenu { margin-top: 8px; font-size: .92rem; color: var(--gris); }
.aide-contenu summary { cursor: pointer; font-weight: 700; color: var(--bleu); min-height: 32px; display: flex; align-items: center; }
.aide-contenu ul { margin: 6px 0 0 1.2em; } .aide-contenu code { background: var(--creme); border-radius: 4px; padding: 0 4px; color: var(--encre); }
.groupe-image, .groupe-seo { border: 1px solid var(--trait); border-radius: 14px; padding: 14px 16px; margin-top: 16px; }
.groupe-image legend, .groupe-seo legend { font-weight: 800; color: var(--nuit); padding: 0 6px; }
.image-article img { display: block; max-width: 100%; width: 360px; height: auto; border-radius: 10px; border: 1px solid var(--trait); }
.apercu-google { display: grid; gap: 2px; margin: 10px 0 6px; padding: 12px 14px; border: 1px dashed #8a96ab; border-radius: 10px; background: #fff; font-family: Arial, sans-serif; }
.apercu-google .g-url { font-size: .85rem; color: #202124; overflow-wrap: anywhere; }
.apercu-google .g-titre { font-size: 1.15rem; color: #1a0dab; overflow-wrap: anywhere; }
.apercu-google .g-desc { font-size: .9rem; color: #4d5156; overflow-wrap: anywhere; }
.boutons-article { flex-wrap: wrap; gap: 10px; }
.statut-article h2 { font-size: 1.2rem; }
.statut-article .recap-liste { margin-top: 10px; }
.etapes-publication { margin: 8px 0 10px 1.2em; display: grid; gap: 6px; }
.apercu-prive { position: sticky; top: 0; z-index: 60; background: #fff4d6; color: #5c4300; border-bottom: 2px solid #c79a1c; padding: 10px 0; font-size: .95rem; }
.apercu-prive a { color: #5c4300; font-weight: 700; }
.editeur-blog .boite > h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
/* Mission 12 : jauges de consommation des avis Google */
.jauge { display: inline-block; width: 120px; height: 8px; margin-left: 8px; vertical-align: middle; background: var(--trait); border-radius: 999px; overflow: hidden; }
.jauge > span { display: block; height: 100%; background: var(--bleu); }

/* --- Delta Web (mission 17) : tableau de bord, visiteurs, notifications, barre d'onglets au pouce --- */
.tdb-grille { margin-bottom: 18px; }
.tdb-carte { position: relative; }
.tdb-carte .tdb-nombre { display: block; font-size: 2rem; font-weight: 800; color: var(--bleu, #0b2040); line-height: 1.1; }
.tdb-carte.a-traiter .tdb-nombre { color: #c2185b; }
.tdb-carte h2 { font-size: 1rem; margin: 4px 0; }
.titre-tuiles { font-size: 1.1rem; margin: 18px 0 10px; }
.liste-visites { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.visite-ligne a { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid #dbe3ec; border-radius: 12px; text-decoration: none; color: inherit; background: #fff; }
.visite-ligne a:hover, .visite-ligne a:focus-visible { border-color: #0b2040; }
.visite-ligne.etat-parti a, .visite-ligne.etat-perime a { opacity: .72; }
.visite-ligne.controle a { border-style: dashed; }
.visite-tete { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.visite-page { font-weight: 600; overflow-wrap: anywhere; }
.visite-infos, .visite-conv { font-size: .9rem; color: #4a5a6a; }
.visite-details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 12px 0; }
.visite-details dt { font-weight: 700; }
.visite-details dd { margin: 0; overflow-wrap: anywhere; }
.notif-cat { border: 1px solid #dbe3ec; border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; }
.notif-cat legend { font-weight: 700; padding: 0 6px; }
label.case { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 10px; }
label.case input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.liste-appareils { padding-left: 18px; }
.onglets-pouce { display: none; }
@media (max-width: 760px) {
  body[data-role="direction"] { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .onglets-pouce { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #0b2040; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -2px 10px rgba(0,0,0,.15); }
  .onglets-pouce a { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; text-decoration: none; font-size: .78rem; border-radius: 10px; position: relative; }
  .onglets-pouce a .ic { font-size: 1.25rem; line-height: 1; }
  .onglets-pouce a[aria-current="page"] { background: rgba(255,255,255,.16); font-weight: 700; }
  .onglets-pouce .badge-nav { position: absolute; top: 4px; right: calc(50% - 22px); }
  .tdb-grille { grid-template-columns: 1fr 1fr; }
  /* Navigation complète ramenée à une ligne défilante (la barre du bas porte les rubriques principales) */
  body[data-role="direction"] .espace-nav-in { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; gap: 4px 14px; padding-bottom: 6px; }
  body[data-role="direction"] .espace-nav-in > * { flex: none; white-space: nowrap; }
}
@media (display-mode: standalone) { body[data-role="direction"] .entete { display: none; } }

/* ==== Mission 19 : Delta Web, visiteurs en direct et conversations (références : application Wix de Mohamed) ==== */
/* Texte défilant : boucle continue (app.js) ; texte fixe coupé proprement s'il tient, ou si les animations sont réduites */
.defil { display: block; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.defil-piste { display: inline-flex; white-space: nowrap; will-change: transform; }
.defil-texte { display: inline-block; flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.defil.anime { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 20px), transparent); }
.defil.anime .defil-texte { max-width: none; overflow: visible; }
.defil-copie::before { content: "•"; display: inline-block; width: 2.4em; text-align: center; opacity: .55; }

/* Pastilles d'état : vert (en ligne) / gris (arrière-plan, signal interrompu, départ détecté) */
.vd-etat { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.vd-puce { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #9aa5b8; }
.vd-etat.vert { color: #11744a; } .vd-etat.vert .vd-puce { background: #1fa463; box-shadow: 0 0 0 3px rgba(31,164,99,.18); }
.vd-etat.gris { color: #5d6a80; }
.vd-avatar { position: relative; flex: none; width: 50px; height: 50px; border-radius: 50%; color: var(--teinte, #3d6fd6); background: #e8eef9; background: color-mix(in srgb, var(--teinte, #3d6fd6) 15%, #fff); display: grid; place-items: center; }
.vd-avatar svg { width: 64%; height: 64%; fill: currentColor; margin-top: 4px; }
.vd-avatar.grand { width: 44px; height: 44px; }
.vd-point { position: absolute; right: -1px; bottom: -1px; width: 15px; height: 15px; border-radius: 50%; background: #a3adbf; border: 3px solid #fff; transition: background .3s; }
.vd-point.vert { background: #1fa463; }
.vd-controle { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #fff4d6; color: #7a5600; font-size: .7rem; font-weight: 700; vertical-align: middle; }

/* Liste des visiteurs (référence 3) */
.vd-panneau, .cv-panneau { max-width: 780px; background: #fff; border: 1px solid var(--trait); border-radius: 20px; box-shadow: var(--ombre); overflow: hidden; }
.vd-entete { padding: 20px 20px 10px; }
.vd-entete h2 { font-size: 1.4rem; color: var(--nuit); }
.vd-entete .mention { margin: 2px 0 0; }
.vd-dispo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: var(--creme); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.vd-dispo b { display: block; color: var(--nuit); font-size: 1.02rem; }
.vd-dispo .mention { display: block; margin: 2px 0 0; font-size: .86rem; line-height: 1.4; }
.vd-switch { position: relative; flex: none; width: 56px; height: 34px; border: 0; border-radius: 999px; background: #b6c0d1; cursor: pointer; transition: background .2s; }
.vd-switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.vd-switch[aria-checked="true"] { background: var(--vert-logo); }
.vd-switch[aria-checked="true"]::after { transform: translateX(22px); }
.vd-switch:focus-visible { outline: 3px solid var(--ciel); outline-offset: 3px; }
.vd-switch:disabled { opacity: .6; }
.vd-liste { list-style: none; margin: 0; padding: 0; }
.vd-ligne a { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px 14px 14px 20px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--trait); transition: background .15s; }
.vd-ligne:last-child a { border-bottom: 0; }
.vd-ligne a:hover { background: var(--creme); }
.vd-ligne a:focus-visible { outline: 3px solid var(--ciel); outline-offset: -3px; }
.vd-corps { flex: 1; min-width: 0; display: grid; gap: 2px; }
.vd-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vd-nom { font-size: 1.06rem; color: var(--nuit); white-space: nowrap; }
.vd-ligne.gris .vd-nom { color: #3d4a63; }
.vd-duree { flex: none; color: var(--gris); font-size: .86rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vd-l2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; color: var(--gris); font-size: .88rem; }
.vd-sep { opacity: .6; }
/* Demande de Mohamed (14/10) : « Sur la page : » sur sa ligne, le titre défile en dessous sur toute la largeur */
.vd-page { display: grid; gap: 0; min-width: 0; font-size: .93rem; color: var(--encre); }
.vd-page-lib { color: var(--gris); font-size: .82rem; line-height: 1.3; }
.vd-page .defil { font-weight: 600; }
.vd-conv { font-size: .84rem; font-weight: 600; color: var(--bleu); }
.vd-conv .badge-nav { margin-left: 4px; }
.vd-fleche { flex: none; color: #a3adbf; font-size: 1.7rem; line-height: 1; }
.vd-ligne.controle a { background: repeating-linear-gradient(135deg, #fff, #fff 12px, #fbfcfe 12px, #fbfcfe 24px); }
.vd-vide { padding: 40px 24px 36px; text-align: center; }
.vd-vide p { margin: 4px auto; max-width: 42ch; }
.vd-vide-icone svg { width: 54px; height: 54px; fill: none; stroke: #9fb0cc; stroke-width: 1.6; }
.vd-legende { padding: 4px 20px 16px; border-top: 1px solid var(--trait); font-size: .9rem; color: var(--gris); }
.vd-legende summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--bleu); }
.vd-legende p { margin: 6px 0; }

/* Bandeau permanent (référence 4) : compteur fixe, texte défilant, pause hors de la zone animée */
.bandeau-direct { position: fixed; left: 0; right: 0; bottom: 0; z-index: 49; display: flex; align-items: center; background: linear-gradient(100deg, #0b7a45, #14965a); color: #fff; box-shadow: 0 -4px 18px rgba(11,32,64,.18); }
.bandeau-direct[hidden] { display: none; }
.bd-lien { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 6px 8px 14px; color: #fff; text-decoration: none; }
.bd-lien:focus-visible { outline: 3px solid #fff; outline-offset: -4px; border-radius: 12px; }
.bd-nombre { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #0b7a45; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.bandeau-direct .defil { font-weight: 600; font-size: 1rem; letter-spacing: .005em; }
.bd-pause { flex: none; width: 44px; height: 44px; margin-right: 8px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; cursor: pointer; }
.bd-pause svg { width: 18px; height: 18px; fill: currentColor; }
.bd-pause:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
body.avec-bandeau-direct { padding-bottom: 66px; }
@media (min-width: 761px) {
  .bandeau-direct { left: auto; right: 24px; bottom: 24px; width: min(460px, calc(100vw - 48px)); border-radius: 999px; }
  .bd-lien { padding-left: 10px; }
  body.avec-bandeau-direct { padding-bottom: 96px; }
}
@media (max-width: 760px) {
  .bandeau-direct { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body.avec-bandeau-direct { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
}

/* Fiche d'une visite et conversation (références 1, 2 et 5 à 7) */
.vd-fiche { display: flex; flex-direction: column; max-width: 820px; height: calc(100dvh - 200px); min-height: 540px; margin: 18px auto 24px; background: #fff; border: 1px solid var(--trait); border-radius: 20px; box-shadow: var(--ombre); overflow: hidden; }
.vd-fiche-tete { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 6px; border-bottom: 1px solid var(--trait); background: #fff; }
.vd-retour { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--nuit); }
.vd-retour:hover { background: var(--creme); }
.vd-retour svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vd-fiche-nom { flex: 1; min-width: 0; display: grid; }
.vd-fiche-nom h1 { margin: 0; font-size: 1.14rem; color: var(--nuit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-fiche-nom .vd-etat { font-size: .84rem; }
.vd-fiche-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.vd-signal { color: var(--gris); font-size: .8rem; font-variant-numeric: tabular-nums; }
.vd-duree.gris { font-size: .8rem; }
.vd-fiche-conv svg { width: 16px; height: 16px; fill: currentColor; }
.vd-fiche-conv { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--bleu-pale); color: var(--bleu); font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.vd-barre { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 6px 8px 6px 16px; border: 0; border-bottom: 1px solid var(--trait); background: var(--creme); color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.vd-barre:focus-visible { outline: 3px solid var(--ciel); outline-offset: -3px; }
.vd-barre .vd-page { flex: 1; font-size: .97rem; }
.vd-chevron { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(11,32,64,.14); color: var(--nuit); }
.vd-chevron svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.vd-barre.ouvert .vd-chevron svg { transform: rotate(180deg); }
.vd-details { margin: 0; padding: 2px 16px 10px; background: var(--creme); border-bottom: 1px solid var(--trait); }
.vd-details > div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--trait); }
.vd-details > div:first-child { border-top: 0; }
.vd-details dt { color: var(--gris); font-size: .86rem; }
.vd-details dd { margin: 0; font-weight: 600; color: var(--encre); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.vd-details dd small { display: block; font-weight: 400; }
.vd-fil { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: linear-gradient(180deg, #f5f8fd, #eef3fb); }
.vd-fil-vide { margin: auto; max-width: 36ch; text-align: center; color: var(--gris); font-size: .93rem; }
.vd-msg { align-self: flex-start; max-width: min(80%, 520px); padding: 8px 13px 6px; border-radius: 18px 18px 18px 6px; background: #fff; box-shadow: 0 1px 2px rgba(11,32,64,.09); }
.vd-msg p { margin: 2px 0 4px; color: inherit; overflow-wrap: anywhere; line-height: 1.45; }
.vd-msg-qui { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
.vd-msg-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; font-size: .74rem; color: var(--gris); }
.vd-msg.bot { background: #fbfaff; border: 1px dashed #c4b8ec; box-shadow: none; }
.vd-msg.bot .vd-msg-qui { color: #5b45b0; }
.vd-msg.direction { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--bleu); color: #fff; }
.vd-msg.direction .vd-msg-qui, .vd-msg.direction .vd-msg-pied { color: rgba(255,255,255,.8); }
.vd-msg.envoi { opacity: .78; }
.vd-msg.ko { background: #fff2f2; color: #8a1c1c; border: 1px solid #efb4b4; }
.vd-msg.ko .vd-msg-qui, .vd-msg.ko .vd-msg-pied { color: #8a1c1c; }
.vd-reessayer { margin-left: 6px; min-height: 34px; padding: 2px 12px; border: 1.5px solid currentColor; border-radius: 999px; background: #fff; color: #8a1c1c; font: inherit; font-weight: 700; cursor: pointer; }
.vd-saisie { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--trait); background: #fff; }
.vd-saisie textarea { flex: 1; min-height: 46px; max-height: 132px; resize: none; padding: 11px 16px; border: 1.5px solid #c9d3e3; border-radius: 23px; background: var(--creme); color: var(--encre); font: inherit; font-size: 16px; line-height: 1.4; }
.vd-saisie textarea:focus { outline: none; border-color: var(--ciel); box-shadow: 0 0 0 3px rgba(0,136,206,.18); background: #fff; }
.vd-saisie textarea:disabled { opacity: .7; }
.vd-envoyer { flex: none; min-height: 46px; padding: 0 20px; border: 0; border-radius: 23px; background: var(--bleu); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.vd-envoyer:disabled { background: #c9d1de; cursor: not-allowed; }
.vd-envoyer:focus-visible { outline: 3px solid var(--ciel); outline-offset: 2px; }
.vd-fiche.terminee .vd-barre { background: #f3f4f7; }
/* Téléphone : la fiche occupe tout l'écran (comme une conversation), sans barre du bas ni bandeau ; elle suit la hauteur
   visible quand le clavier est ouvert */
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
  .vd-fiche { position: fixed; left: 0; right: 0; top: var(--vd-decal, 0px); z-index: 70; height: var(--vd-hauteur, 100dvh); min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .vd-fiche-tete { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  .vd-saisie { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  html.vd-plein-ecran .onglets-pouce, body:has(.vd-fiche) .onglets-pouce, html.vd-plein-ecran .bandeau-direct { display: none; }
  html.vd-plein-ecran, html.vd-plein-ecran body { overflow: hidden; }
  .vd-msg { max-width: 86%; }
}

/* Liste des conversations (référence 4) */
.cv-dispo { margin-bottom: 0; }
.cv-dispo .vd-dispo { border-top: 0; }
.cv-relance { margin: 0; padding: 10px 20px 12px; font-size: .86rem; }
.cv-recherche { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--trait); }
.cv-recherche svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--gris); stroke-width: 2; stroke-linecap: round; }
.cv-recherche input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--encre); }
.cv-recherche input:focus { outline: none; }
.cv-recherche:focus-within { box-shadow: inset 0 -2px 0 var(--ciel); }
.cv-filtres { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--trait); overflow-x: auto; }
.cv-filtre { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--trait); border-radius: 999px; color: var(--encre); font-size: .9rem; font-weight: 600; text-decoration: none; }
.cv-filtre[aria-pressed="true"] { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.cv-liste { list-style: none; margin: 0; padding: 0; }
@media (min-width: 1024px) { .cv-liste { max-height: 68vh; overflow-y: auto; } }
.cv-ligne { display: flex; align-items: center; gap: 14px; min-height: 80px; padding: 12px 16px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--trait); transition: background .15s; }
.cv-liste li:last-child .cv-ligne { border-bottom: 0; }
.cv-ligne:hover { background: var(--creme); }
.cv-ligne:focus-visible { outline: 3px solid var(--ciel); outline-offset: -3px; }
.cv-ligne[aria-current="true"] { background: var(--bleu-pale); box-shadow: inset 4px 0 0 var(--bleu); }
.cv-ligne.fermee { opacity: .75; }
.cv-corps { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cv-l1, .cv-l2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.cv-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02rem; color: var(--nuit); font-weight: 700; }
.cv-ligne.non-lue .cv-nom { font-weight: 800; }
.cv-date { flex: none; font-size: .82rem; color: var(--gris); }
.cv-ligne.non-lue .cv-date { color: var(--bleu); font-weight: 700; }
.cv-apercu { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gris); font-size: .94rem; }
.cv-ligne.non-lue .cv-apercu { color: var(--encre); font-weight: 600; }
.cv-nonlus { flex: none; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--bleu); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 800; }
.cv-l3 { font-size: .76rem; color: #7b879c; }
.cv-vide { padding: 30px 16px; text-align: center; color: var(--gris); }

@media (prefers-reduced-motion: reduce) {
  .vd-switch, .vd-switch::after, .vd-chevron svg, .vd-point { transition: none; }
}