/* Radar — mise en page et écrans. */

/* ---------- navigation flottante ---------- */
.barre {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 50; width: min(1320px, calc(100vw - 24px)); height: 56px;
  border-radius: 9999px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 20px;
}
.marque { display: inline-flex; align-items: center; gap: 10px; margin-right: 16px; font: 700 17px/1 var(--police); letter-spacing: 0.01em; color: var(--encre); }
.marque:hover { text-decoration: none; }
.marque svg { color: var(--action); }
.onglets { display: flex; gap: 2px; flex: 1; min-width: 0; }
.onglet { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 9999px; font: 500 15px/1 var(--police); color: var(--encre-2); white-space: nowrap; }
.onglet:hover { color: var(--encre); background: var(--voile); text-decoration: none; }
.onglet[aria-current="page"] { background: var(--encre); color: #fff; }
.compte { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--rouge); color: #fff; font: 700 12px/20px var(--police); text-align: center; }
.profil { display: flex; align-items: center; gap: 10px; }
.profil .nom { font: 500 14px/1 var(--police); color: var(--encre-2); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--encre); color: #fff; font: 700 14px/36px var(--police); text-align: center; flex: none; }
.barre-bas { display: none; }
.page { max-width: 1480px; margin: 0 auto; padding: 88px 20px 40px; }
.entete-page { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 8px 4px 24px; }
.entete-page .chapeau { margin-top: 6px; }

/* ---------- atelier : file à gauche, fiche à droite ---------- */
.atelier { display: grid; grid-template-columns: 372px minmax(0, 1fr); gap: 20px; align-items: start; }
.colonne-file { position: sticky; top: 88px; height: calc(100vh - 108px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--rayon-carte); overflow: hidden; }
.file-entete { padding: 16px 16px 12px; display: grid; gap: 12px; border-bottom: 1px solid var(--trait); }
.file-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.recherche { position: relative; }
.recherche input { width: 100%; height: 40px; padding: 0 14px 0 40px; border-radius: 9999px; background: var(--toile); border: 1px solid transparent; }
.recherche input:focus { outline: none; border-color: var(--action); background: #fff; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2); }
.recherche svg { position: absolute; left: 14px; top: 11px; color: var(--encre-2); pointer-events: none; }
.filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.filtre { height: 30px; padding: 0 12px; border-radius: 9999px; background: var(--voile); font: 500 13px/30px var(--police); color: var(--encre); transition: background 0.15s var(--courbe); }
.filtre:hover { background: var(--voile-2); }
.filtre[aria-pressed="true"] { background: var(--encre); color: #fff; }
select.filtre { appearance: none; -webkit-appearance: none; padding-right: 26px; border: 0; max-width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23101010' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
.file-liste { flex: 1; overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
.ligne-file { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 10px; border-radius: 14px; text-align: left; }
.ligne-file:hover { background: var(--voile); }
.ligne-file[aria-current="true"] { background: var(--action-fond); }
.ligne-file .nom { font: 600 15px/20px var(--police); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-file .sous { font: 400 13px/18px var(--police); color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-file .droite { display: grid; justify-items: end; gap: 4px; font: 500 12px/14px var(--police); color: var(--encre-2); }
.jauge { --v: 0; --couleur: var(--encre); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--couleur) calc(var(--v) * 1%), var(--voile-2) 0); }
.jauge > span { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font: 700 13px/1 var(--police); }
.ligne-file[aria-current="true"] .jauge > span { background: var(--action-fond); }
.jauge.grande { width: 76px; height: 76px; }
.jauge.grande > span { width: 60px; height: 60px; font-size: 22px; background: var(--toile); }
.file-pied { padding: 12px 16px; border-top: 1px solid var(--trait); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vide { padding: 40px 24px; text-align: center; display: grid; gap: 10px; justify-items: center; color: var(--encre-2); }
.vide > svg { color: var(--encre-3); }
.vide .titre-2, .vide .titre-ecran { color: var(--encre); }

/* ---------- fiche ---------- */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; padding-bottom: 24px; animation: apparaitre 0.25s var(--courbe) both; }
.session { position: sticky; top: 80px; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 20px; border-radius: 9999px; min-height: 52px; }
.session .ou { font: 600 14px/1.2 var(--police); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.session .court { display: none; }
.session .progression { flex: 1; max-width: 240px; height: 6px; border-radius: 3px; background: var(--voile-2); overflow: hidden; }
.session .progression i { --v: 0; display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: 3px; background: var(--encre); transition: width 0.4s var(--courbe); }
.session .espace { flex: 1; }
.fiche-entete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; padding: 4px 4px 0; }
.fiche-entete .pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; color: var(--encre-2); font-size: 14px; }
.priorite { display: grid; justify-items: center; gap: 6px; }
.theatre { background: var(--theatre); color: var(--sur-theatre); border-radius: 28px; padding: 22px 26px; }
.theatre .etiquette { color: var(--sur-theatre-2); }
.numero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--trait-theatre); }
.numero:first-of-type { border-top: 0; padding-top: 10px; }
.numero .chiffres { font: 700 30px/34px var(--police); letter-spacing: 0.02em; }
.numero .infos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.numero .actions { display: flex; gap: 8px; }
.numero.faux .chiffres { text-decoration: line-through; opacity: 0.5; }
.courriels { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding-top: 16px; border-top: 1px solid var(--trait-theatre); color: var(--sur-theatre-2); font-size: 14px; }
.courriels a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sans-numero { padding: 14px 0 4px; color: var(--sur-theatre-2); }
.fiche-corps { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: 20px; align-items: start; }
.pile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.carte > .etiquette { display: block; margin-bottom: 14px; }
.adire { counter-reset: d; }
.adire li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--trait); }
.adire li:first-child { border-top: 0; padding-top: 2px; }
.adire li::before { counter-increment: d; content: counter(d); width: 34px; height: 34px; border-radius: 50%; background: var(--encre); color: #fff; font: 700 15px/34px var(--police); text-align: center; }
.adire .phrase { font: 500 17px/25px var(--police); letter-spacing: -0.012em; text-wrap: pretty; }
.adire .preuve { margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--encre-2); }
.liste-simple { display: grid; gap: 8px; font-size: 14px; line-height: 20px; color: var(--encre-2); }
.liste-simple li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; }
.liste-simple li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--encre-3); margin-top: 8px; }
.volet { border-top: 1px solid var(--trait); }
.volet:first-of-type { border-top: 0; }
.volet > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; cursor: pointer; font: 600 16px/22px var(--police); }
.volet > summary::-webkit-details-marker { display: none; }
.volet > summary svg { color: var(--encre-2); transition: transform 0.2s var(--courbe); flex: none; }
.volet[open] > summary svg { transform: rotate(180deg); }
.volet .contenu { display: grid; gap: 12px; padding: 0 0 18px; }
.replique { padding: 14px 18px; border-radius: 16px; background: var(--toile); font: 400 17px/26px var(--police); letter-spacing: -0.012em; text-wrap: pretty; }
.objection b { display: block; font-weight: 600; margin-bottom: 2px; }
.objection p { color: var(--encre-2); }

/* scène : le site actuel du prospect */
.scene { position: relative; border-radius: var(--rayon-scene); background: linear-gradient(165deg, var(--ambre-2), var(--ambre)); overflow: hidden; min-height: 540px; }
.cadre-ecran { position: absolute; left: 26px; top: 26px; width: 78%; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 20px 50px rgba(74, 40, 0, 0.3); }
.cadre-ecran .chrome { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: #ececec; }
.cadre-ecran .chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(16, 16, 16, 0.2); }
.cadre-ecran .chrome span { margin-left: 8px; font: 500 12px/1 var(--police); color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cadre-ecran img { width: 100%; aspect-ratio: 1366 / 860; object-fit: cover; object-position: top; background: #fff; }
.cadre-tel { position: absolute; right: 26px; bottom: 26px; width: 36%; max-width: 232px; aspect-ratio: 390 / 844; padding: 7px; border-radius: 32px; background: #101010; box-shadow: 0 24px 56px rgba(74, 40, 0, 0.42); }
.cadre-tel img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 25px; background: #fff; }
.scene-liens { position: absolute; left: 26px; bottom: 24px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 56%; }
.scene-liens .bouton { background: rgba(16, 16, 16, 0.86); color: #fff; }
.scene-liens .bouton:hover { background: #101010; }
.scene.vide-scene { min-height: 300px; display: grid; place-items: center; text-align: center; padding: 28px; color: var(--ambre-encre); }
.scene.vide-scene .titre-2 { color: #3d2200; }
.faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.fait { padding: 14px 16px; border-radius: 16px; background: var(--toile); }
.fait b { display: block; font: 700 20px/26px var(--police); letter-spacing: 0.01em; }
.fait span { font-size: 13px; line-height: 18px; color: var(--encre-2); }
.formules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.formule { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 18px; background: var(--toile); }
.formule.conseillee { background: var(--action); color: #fff; }
.formule .prix { font: 700 28px/32px var(--police); letter-spacing: 0.01em; }
.formule .prix small { display: block; margin-top: 2px; font: 500 14px/20px var(--police); letter-spacing: 0; white-space: nowrap; }
.formule ul { display: grid; gap: 6px; font-size: 14px; line-height: 20px; }
.formule li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.formule li svg { margin-top: 2px; }
.historique { display: grid; }
.historique li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--trait); }
.historique li:first-child { border-top: 0; padding-top: 2px; }
.historique .puce { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--encre-3); }
.historique .puce.vert { background: var(--vert); }
.historique .puce.rouge { background: var(--rouge); }
.historique .puce.orange { background: #d97a00; }
.historique .quoi { font-weight: 600; }
.historique .note { margin-top: 4px; color: var(--encre-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* barre de résultats d'appel */
.resultats { position: sticky; bottom: 16px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border-radius: 26px; }
.resultats .rangee { display: contents; }
.resultats .bouton { height: 38px; padding: 0 15px; }
.resultats .note { flex: 1 1 200px; min-width: 160px; height: 38px; padding: 0 16px; border-radius: 9999px; background: rgba(255, 255, 255, 0.86); border: 1px solid var(--trait-fort); }
.resultats .note:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2); }
.ancre { position: relative; }
.bulle { position: absolute; bottom: calc(100% + 14px); right: 0; z-index: 40; width: 320px; max-width: 86vw; display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--trait), 0 24px 64px rgba(16, 16, 16, 0.24); animation: monter 0.18s var(--courbe) both; }
.bulle.gauche { right: auto; left: 0; }
.bulle .choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bulle .bouton { justify-content: flex-start; }
.touche { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: rgba(16, 16, 16, 0.1); font: 600 11px/1 var(--police); color: var(--encre-2); }
.bouton.principal .touche, .bouton.succes .touche { background: rgba(255, 255, 255, 0.24); color: #fff; }

/* ---------- liste, rappels, tableau de bord, réglages ---------- */
.tableau { width: 100%; border-collapse: collapse; }
.tableau th { padding: 10px 12px; text-align: left; font: 600 13px/16px var(--police); color: var(--encre-2); border-bottom: 1px solid var(--trait); white-space: nowrap; }
.tableau td { padding: 12px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr.cliquable { cursor: pointer; }
.tableau tbody tr.cliquable:hover { background: var(--toile); }
.tableau .droite { text-align: right; }
.defile { overflow-x: auto; }
.barre-filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.barre-filtres .recherche { flex: 1; min-width: 220px; max-width: 360px; }
.barre-filtres .recherche input { background: #fff; border-color: var(--trait); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; }
.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.indicateur b { display: block; margin-top: 8px; font: 700 40px/44px var(--police); letter-spacing: 0.01em; }
.indicateur .petit { margin-top: 4px; }
.indicateur.sombre { background: var(--theatre); color: #fff; }
.indicateur.sombre .etiquette, .indicateur.sombre .petit { color: var(--sur-theatre-2); }
.grille-2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 20px; margin-top: 20px; align-items: start; }
.graphe { display: flex; align-items: flex-end; gap: 8px; height: 190px; }
.graphe .colonne { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
.graphe .colonne i { --v: 0; display: block; width: 100%; max-width: 40px; height: calc(var(--v) * 1%); min-height: 3px; border-radius: 8px 8px 3px 3px; background: var(--encre); }
.graphe .colonne i.joints { background: var(--action); margin-top: -100%; }
.graphe .colonne span { font: 500 11px/1 var(--police); color: var(--encre-2); }
.etapes { display: grid; gap: 10px; }
.etape { display: grid; grid-template-columns: 130px minmax(0, 1fr) 54px; gap: 12px; align-items: center; font-size: 14px; }
.etape .rail { height: 8px; border-radius: 4px; background: var(--voile-2); overflow: hidden; }
.etape .rail i { --v: 0; display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: 4px; background: var(--encre); }
.etape b { text-align: right; }
.reglages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.reglages .carte { display: grid; gap: 16px; }
.rangee-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.lien-invitation { padding: 12px 14px; border-radius: 12px; background: var(--toile); font: 500 13px/20px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.groupe-rappels { margin-bottom: 24px; }
.groupe-rappels > .etiquette { display: block; margin: 0 4px 10px; }

/* ---------- connexion, installation, invitation ---------- */
.accueil {
  min-height: 100vh; display: grid; place-items: center; padding: 24px; background-color: var(--toile);
  background-image: radial-gradient(80% 54% at 5% 118%, rgba(255, 214, 160, 0.75), rgba(0, 0, 0, 0) 74%), radial-gradient(80% 54% at 95% 118%, rgba(206, 224, 252, 0.7), rgba(0, 0, 0, 0) 74%);
}
.accueil-carte { width: min(440px, 100%); display: grid; gap: 22px; padding: 36px 32px 32px; border-radius: 28px; background: #fff; box-shadow: 0 30px 80px rgba(16, 16, 16, 0.08); }
.accueil-carte .marque { margin: 0; font-size: 20px; }
.accueil-carte form { display: grid; gap: 16px; }

/* ---------- petits écrans ---------- */
@media (max-width: 1180px) {
  .atelier { grid-template-columns: 320px minmax(0, 1fr); }
  .fiche-corps { grid-template-columns: minmax(0, 1fr); }
  .grille-2, .reglages { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .barre { padding: 0 8px 0 16px; }
  .barre .onglets, .profil .nom { display: none; }
  .barre .espace-barre { flex: 1; }
  .barre-bas { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 50; display: flex; gap: 2px; padding: 6px; border-radius: 9999px; }
  .barre-bas .onglet { flex-direction: column; gap: 3px; height: 50px; padding: 0 14px; font-size: 11px; position: relative; }
  .barre-bas .onglet .compte { position: absolute; top: 2px; right: 6px; }
  .page { padding: 80px 12px 96px; }
  .atelier { grid-template-columns: minmax(0, 1fr); }
  .colonne-file { position: static; height: auto; max-height: none; }
  .file-liste { max-height: none; overflow: visible; }
  .atelier.fiche-ouverte .colonne-file { display: none; }
  .atelier:not(.fiche-ouverte) .zone-fiche { display: none; }
  .session { position: static; padding-left: 8px; gap: 8px; }
  body.en-fiche .barre-bas { display: none; }
  body.en-fiche .resultats { bottom: 12px; }
  body.en-fiche .page { padding-bottom: 24px; }
  .session .progression, .session .long { display: none; }
  .session .court { display: inline; }
  .session .ou { flex: 1; font-size: 13px; }
  .session .espace { display: none; }
  .jauge.grande { width: 56px; height: 56px; }
  .jauge.grande > span { width: 44px; height: 44px; font-size: 17px; }
  .titre-ecran { font-size: 25px; line-height: 30px; }
  .fiche-entete { grid-template-columns: minmax(0, 1fr); }
  .priorite { justify-items: start; grid-auto-flow: column; align-items: center; justify-content: start; gap: 12px; }
  .theatre { padding: 18px 18px; border-radius: 24px; }
  .numero { grid-template-columns: minmax(0, 1fr); }
  .numero .chiffres { font-size: 27px; }
  .numero .actions .bouton.grand { flex: 1; }
  .scene { min-height: 440px; }
  .formules { grid-template-columns: minmax(0, 1fr); }
  .resultats { bottom: 78px; border-radius: 22px; display: grid; grid-template-columns: minmax(0, 1fr); }
  .resultats .rangee.boutons { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .resultats .rangee.boutons::-webkit-scrollbar { display: none; }
  .resultats .rangee.boutons .bouton { flex: none; }
  .resultats .ancre { position: static; }
  .bulle, .bulle.gauche { left: 8px; right: 8px; width: auto; max-width: none; }
  .touche { display: none; }
  .zone-toasts { top: 76px; width: calc(100vw - 24px); }
  .toast { border-radius: 18px; }
  .carte { padding: 18px; }
  .etape { grid-template-columns: 104px minmax(0, 1fr) 44px; }
}