/* Charte SPARRING.ai : les couleurs, polices et rayons viennent de marque/jetons.css (copie de brand-kit/global.css).
   Les noms ci-dessous sont ceux de l'application ; chacun pointe vers un jeton de la marque.
   Le cyan (accent) ne sert jamais de texte sur fond clair : contraste insuffisant. Les couleurs d'état gardent leur teinte
   mais en version foncée sur fond clair, pour rester lisibles (4,5:1). */
:root {
  /* Séries du diagramme radar (palette catégorielle validée, 3 séries maximum) */
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a;
  --fond: var(--color-bg-light);
  --carte: var(--color-bg-surface);
  --menu: var(--color-bg-surface);
  --texte: var(--color-primary-main);
  --doux: #4a5468; /* Deep Navy éclairci : texte secondaire lisible sur blanc */
  --bord: #e2e6ee;
  --accent: var(--color-primary-main);
  --accent-doux: #e3f5f6; /* Sparring Teal très clair : sélection, état actif */
  --sur-accent: var(--color-bg-surface);
  --marque: var(--color-secondary-dark); /* Sparring Teal assez foncé pour un lien ou un repère sur fond clair */
  --vert: #047857;
  --orange: #b45309;
  --rouge: #b91c1c;
  --bulle-moi: var(--color-primary-main);
  --bulle-lui: #eef1f5;
  --ombre: 0 1px 2px rgba(11, 19, 41, .05), 0 6px 20px rgba(11, 19, 41, .06);
  --police-texte: var(--font-family-body);
  --police-chiffre: var(--font-family-code);
}
@media (prefers-color-scheme: dark) {
  :root {
    --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70;
    --fond: var(--color-primary-dark);
    --carte: var(--color-primary-main);
    --menu: var(--color-primary-main);
    --texte: var(--color-bg-light);
    --doux: #a7b0c2;
    --bord: var(--color-primary-light);
    --accent: var(--color-accent-main); /* AI Cyan sur Deep Navy : l'accent prévu par la charte */
    --accent-doux: var(--color-primary-light);
    --sur-accent: var(--color-primary-main);
    --marque: var(--color-secondary-light);
    --vert: var(--color-status-success);
    --orange: var(--color-status-warning);
    --rouge: var(--color-status-error);
    --bulle-moi: var(--color-secondary-main);
    --bulle-lui: var(--color-primary-light);
    --ombre: none;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* un élément masqué le reste, quel que soit son style */
body {
  margin: 0;
  font: var(--font-size-body)/var(--line-height-body) var(--police-texte);
  background: var(--fond);
  color: var(--texte);
}
/* Cadre de la maquette : menu latéral à gauche, contenu à droite ; sur téléphone, le menu passe au-dessus */
.cadre { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 100dvh; }
.menu { flex: 1 1 220px; max-width: 250px; background: var(--menu); border-right: 1px solid var(--bord); padding: 22px 14px;
  display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100dvh; box-sizing: border-box; }
.menu .marque { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 19px; padding: 0 10px 18px; }
.menu-lien { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--texte); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.menu-lien svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--doux); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-lien:hover { background: var(--fond); }
.menu-lien.actif { background: var(--accent-doux); font-weight: 650; }
.menu-lien.actif svg { stroke: var(--accent); }
#lien-reglages { margin-top: auto; flex: 0 0 auto; }
.menu-pied { margin-top: 8px; padding: 14px 10px 0; border-top: 1px solid var(--bord); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
/* Pied du menu : e-mail, entreprise et déconnexion empilés dans la largeur du menu (sans retour en colonnes voisines) */
.menu-pied .session { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; align-self: stretch; gap: 2px; min-width: 0; }
.menu-pied .session-org { flex-basis: auto; overflow-wrap: anywhere; }
/* La personne connectée, en bas du menu : nom et offre (ouvre les paramètres), icône de déconnexion */
.utilisateur { display: flex; align-items: center; gap: 4px; align-self: stretch; min-width: 0; }
.utilisateur[hidden] { display: none; }
.utilisateur-ouvrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px; border: 0; border-radius: 10px; background: transparent; color: var(--texte); font: inherit; text-align: left; cursor: pointer; }
.utilisateur-ouvrir:hover, .utilisateur-ouvrir:focus-visible { background: var(--fond); }
.utilisateur-texte { display: grid; min-width: 0; }
.utilisateur-texte b, .utilisateur-texte small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utilisateur-texte small { color: var(--doux); font-size: 12px; }
.avatar-utilisateur { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--fond); font-size: 13px; font-weight: 700; }
.avatar-utilisateur.grand { width: 56px; height: 56px; font-size: 19px; }
.utilisateur-sortie { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--doux); cursor: pointer; }
.utilisateur-sortie:hover, .utilisateur-sortie:focus-visible { background: var(--fond); color: var(--texte); }
.utilisateur-sortie svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Visite guidée : bulle à côté de l'élément montré, le reste de la page assombri */
.voile-visite { position: fixed; inset: 0; background: rgb(0 0 0 / 35%); z-index: 59; }
.visite-ciblee .menu { z-index: 60; } /* l'élément montré passe au-dessus du voile ; sinon le menu reste dessous */
.visite-cible { position: relative; z-index: 61; background: var(--carte); border-radius: 8px; box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgb(0 0 0 / 35%); }
.visite { position: fixed; z-index: 70; width: min(360px, calc(100vw - 24px)); box-sizing: border-box; background: var(--carte); color: var(--texte);
  border: 1px solid var(--bord); border-radius: 14px; padding: 18px 18px 14px; box-shadow: 0 12px 32px rgb(0 0 0 / 22%); display: grid; gap: 8px; }
.visite.centree { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.visite h2 { margin: 0; padding-right: 24px; font-size: 17px; }
.visite p { margin: 0; color: var(--doux); font-size: 14px; line-height: 1.5; }
.visite-fermer { position: absolute; top: 8px; right: 10px; border: 0; background: none; color: var(--doux); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px; }
.visite-pied { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.visite-pied .aide { margin-right: auto; }
.visite-pied .bouton { width: auto; margin: 0; padding: 8px 14px; }
/* Paramètres */
.onglets-parametres { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 14px 0 18px; border: 1px solid var(--bord); border-radius: 12px; background: var(--fond); width: fit-content; max-width: 100%; }
.onglets-parametres button { border: 0; border-radius: 9px; background: transparent; color: var(--doux); font: inherit; font-size: 14px; padding: 8px 14px; cursor: pointer; }
.onglets-parametres button[aria-selected="true"] { background: var(--carte); color: var(--texte); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
.parametres-identite { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ligne-parametre { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.choix-langue.grand button { font-size: 14px; padding: 8px 16px; }
.choix-langue { display: inline-flex; border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; }
.choix-langue button { border: 0; background: transparent; color: var(--doux); font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; cursor: pointer; }
.choix-langue button[aria-pressed="true"] { background: var(--accent-doux); color: var(--accent); }
#session-email { overflow-wrap: anywhere; }
.cadre > main { flex: 999 1 560px; min-width: 0; }
main { max-width: 760px; margin: 0 auto; padding: 24px 28px 40px; box-sizing: border-box; }
@media (max-width: 820px) {
  .menu { max-width: none; flex-basis: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center;
    border-right: 0; border-bottom: 1px solid var(--bord); padding: 10px 12px; gap: 2px; }
  .menu .marque { padding: 0 10px 0 4px; }
  .menu-lien { width: auto; min-height: 40px; padding: 0 10px; font-size: 14px; }
  #lien-reglages { margin-top: 0; }
  .menu-pied { margin: 0 0 0 auto; padding: 0; border: 0; flex-direction: row; align-items: center; }
  .menu-pied .session { flex-direction: row; }
  main { padding: 16px; }
}
/* Téléphone : le menu tient sur une ligne qui défile au doigt, le contenu commence tout de suite */
@media (max-width: 600px) {
  .menu { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .menu::-webkit-scrollbar { display: none; }
  .menu > * { flex: 0 0 auto; }
  .menu-lien { white-space: nowrap; }
  .menu-pied .session { display: none; }
}
h1, h2 { margin: 0; line-height: 1.2; }
h1 { font-size: 28px; }
h2 { font-size: 17px; margin: 18px 0 8px; }
h2:first-child { margin-top: 0; }

.session { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--doux); }
.lien-bouton { border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
@media (max-width: 820px) { #session-email { display: none; } }
.connexion { max-width: 420px; margin: 60px auto; text-align: center; display: grid; gap: 14px; justify-items: center; }
.logo-connexion { font-size: 40px; color: var(--accent); line-height: 1; }
.bouton-google {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--bord); background: var(--carte); color: var(--texte); font: inherit; font-weight: 600; font-size: 16px;
}
.connexion-ou { margin: 0; color: var(--doux); font-size: 14px; }
.connexion-form { width: 100%; display: grid; gap: 4px; text-align: left; }
.connexion-form .bouton { width: 100%; justify-content: center; }
.connexion-form input { width: 100%; box-sizing: border-box; }
.connexion-liens { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 0; font-size: 14px; }
.bouton-google svg { width: 20px; height: 20px; }
.bouton-google:hover { border-color: var(--accent); }
.pastille {
  font-size: 13px; padding: 3px 10px; border-radius: 99px;
  background: var(--accent-doux); color: var(--accent);
}
.pastille.erreur { background: color-mix(in srgb, var(--rouge) 15%, transparent); color: var(--rouge); }
.pastille.en-ligne { background: color-mix(in srgb, var(--vert) 15%, transparent); color: var(--vert); }

.ecran { display: none; }
.ecran.actif { display: block; }

.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 14px;
  padding: 20px; margin-bottom: 14px; box-shadow: var(--ombre);
}
.persona { display: flex; gap: 16px; align-items: center; }
.avatar {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 22px;
  background: var(--accent); color: var(--sur-accent);
}
.avatar.petit { width: 40px; height: 40px; font-size: 15px; }
.sur-titre { margin: 0; font-size: 13px; color: var(--doux); text-transform: uppercase; letter-spacing: .04em; }
.role { margin: 2px 0 0; color: var(--doux); }
.onglets { display: flex; gap: 6px; padding: 4px; margin: 4px 0 16px; border-radius: 12px; background: var(--bord); }
.onglet {
  flex: 1; border: 0; border-radius: 9px; padding: 10px 8px; font: inherit; font-weight: 600; font-size: 15px;
  background: transparent; color: var(--doux); cursor: pointer;
}
.onglet[aria-selected="true"] { background: var(--carte); color: var(--texte); box-shadow: var(--ombre); }
.beta { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--accent); margin-left: 4px; }
.intro { color: var(--doux); margin: -6px 0 14px; }
.champ { display: block; border: 0; padding: 0; margin: 0 0 14px; }
.champ:last-child { margin-bottom: 0; }
.champ > span, .champ legend { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.champ em { font-style: normal; font-weight: 500; color: var(--doux); font-size: 12px; margin-left: 4px; }
.champ em.requis { color: var(--accent); }
.champ input[type="text"], .champ input[type="number"], .champ input[type="url"], .champ input[type="email"], .champ input[type="password"], .champ select, .champ textarea {
  width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--bord);
  background: var(--carte); color: var(--texte); font: inherit; font-size: 15px;
}
.champ textarea { resize: vertical; min-height: 60px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.champ.en-erreur input, .champ.en-erreur select, .champ.en-erreur textarea { border-color: var(--rouge); }
.aide { display: block; color: var(--doux); font-size: 13px; margin-top: 4px; }
.erreur-champ { display: block; color: var(--rouge); font-size: 13px; font-weight: 500; margin-top: 4px; }
.erreur-champ:empty { display: none; }
.choix-difficulte { display: flex; gap: 16px; flex-wrap: wrap; }
.choix-difficulte label { display: flex; gap: 6px; align-items: center; font-size: 15px; cursor: pointer; }
.actions-fiche { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.actions-fiche .bouton { margin-top: 0; }
/* Seul bouton (scénario du catalogue) : toute la largeur, avec l'icône du téléphone */
.actions-fiche > .bouton:only-child { grid-column: 1 / -1; }
.bouton-icone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.bouton-icone svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bouton-appeler svg { width: 18px; height: 18px; fill: currentColor; vertical-align: -3px; margin-right: 10px; }
@media (max-width: 560px) { .actions-fiche { grid-template-columns: 1fr; } }
.case-aide { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 14px; color: var(--doux); cursor: pointer; }
.case-aide input { margin-top: 3px; flex: none; }
.sc2-aide { margin: 4px 0 0; font-size: 14px; color: var(--doux); }
.secondaire { background: var(--accent-doux); color: var(--accent); margin-top: 10px; }
.etapes { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.etapes li { display: flex; gap: 10px; align-items: center; color: var(--doux); }
.etapes li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bord);
}
.etapes li.en-cours { color: var(--texte); font-weight: 600; }
.etapes li.en-cours::before { border-color: var(--bord); border-top-color: var(--accent); animation: tourne 1s linear infinite; }
.etapes li.fait { color: var(--texte); }
.etapes li.fait::before { content: "✓"; display: grid; place-items: center; font-size: 12px; color: #fff; background: var(--vert); border-color: var(--vert); }
.fiche-tete { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
/* Comité d'achat : les membres côte à côte, l'un sous l'autre sur téléphone */
.fiche-membres { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.fiche-membres > .carte { margin-bottom: 0; min-width: 0; }
.fiche-membres .visage.grand { width: 80px; height: 80px; }
.fiche-membres-intro { grid-column: 1 / -1; }
.fiche h3 { font-size: 15px; margin: 14px 0 6px; }
.fiche ul { margin: 0; padding-left: 20px; }
.fiche li { margin: 4px 0; }
.fiche .avertissement { background: color-mix(in srgb, var(--orange) 12%, transparent); border-radius: 8px; padding: 8px 12px; }
.hypotheses { border-left: 3px solid var(--orange); }
details.cache { border: 1px dashed var(--bord); }
details.cache summary { cursor: pointer; font-weight: 600; }
details.cache summary small { font-weight: 400; color: var(--doux); }
details.repliable summary { cursor: pointer; font-weight: 600; }
details.repliable summary small { font-weight: 400; color: var(--doux); }
.sources-web { margin: 0; padding-left: 20px; }
.sources-web li { margin: 4px 0; overflow-wrap: anywhere; }
.sources-web small { color: var(--doux); font-size: 12px; }
.sources { color: var(--doux); font-size: 13px; overflow-wrap: anywhere; }
.badge-ok { color: var(--vert); background: color-mix(in srgb, var(--vert) 14%, transparent); }
.titre-accueil { font-size: 22px; margin: 4px 0 14px; }
.liste-personas { display: grid; gap: 10px; margin-bottom: 14px; }
.catalogue { display: grid; gap: 12px; margin-bottom: 32px; }
.catalogue-filtres { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--doux); }
.catalogue-filtres select { margin-left: 6px; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.pastille-choix { border: 1px solid var(--bord); background: var(--carte); color: var(--texte); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.pastille-choix:hover:not(:disabled), .pastille-choix:focus-visible { border-color: var(--accent); }
.pastille-choix[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--fond); }
.pastille-choix:disabled { cursor: default; }
.filtre-recherche { flex: 1 1 260px; display: flex; align-items: center; }
.filtre-recherche input { flex: 1; min-width: 0; margin-left: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); font: inherit; }
.catalogue-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.carte-persona.carte-scenario { flex-direction: column; align-items: stretch; text-align: left; gap: 6px; }
.carte-scenario .situation, .as-afaire .situation { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.chargement { color: var(--doux); }
.carte-persona {
  display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; cursor: pointer;
  background: var(--carte); color: var(--texte); border: 2px solid var(--bord); border-radius: 14px;
  padding: 14px 16px; font: inherit; box-shadow: var(--ombre);
}
.carte-persona:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--bord)); }
.carte-persona[aria-checked="true"] { border-color: var(--accent); background: var(--accent-doux); }
.carte-persona .infos { flex: 1; min-width: 0; }
.carte-persona .ligne-nom { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.carte-persona .nom { font-weight: 650; font-size: 17px; }
.carte-persona .role, .carte-persona .objection { margin: 2px 0 0; font-size: 14px; color: var(--doux); }
.niveau { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.niveau.facile { color: var(--vert); background: color-mix(in srgb, var(--vert) 14%, transparent); }
.niveau.intermediaire { color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); }
.niveau.difficile { color: var(--rouge); background: color-mix(in srgb, var(--rouge) 14%, transparent); }
.note-coach { color: var(--doux); font-size: 14px; margin-bottom: 0; }
.contexte { margin: 0; padding-left: 20px; }
.contexte li { margin: 4px 0; }
.champ-code { display: block; margin: 18px 0 0; }
.champ-code span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.champ-code input {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--bord);
  background: var(--carte); color: var(--texte); font: inherit; letter-spacing: .06em; text-transform: uppercase;
}
.champ-code input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.conseil-casque { text-align: center; color: var(--doux); font-size: 14px; margin: 18px 0 10px; }
#mode-sur-mesure.verrouille > :not(.verrou) { display: none; }
.verrou { display: grid; gap: 10px; }
.sc2-commentaire { display: block; margin-top: 6px; padding: 6px 10px; border-radius: 6px; background: var(--accent-doux); font-size: 14px; }
.sc2-commenter { display: grid; gap: 6px; width: 100%; }
.sc2-commenter textarea { width: 100%; }
#impression { display: none; }
@media print {
  body:has(#impression) > *:not(#impression) { display: none !important; }
  #impression { display: block; color: #000; font-size: 12pt; padding: 0; }
}
.avis-ia { text-align: center; color: var(--doux); font-size: 13px; max-width: 60ch; margin: 0 auto 12px; }
.contestation { border-left: 3px solid var(--orange); padding: 6px 0 6px 12px; display: grid; gap: 4px; }
.contestation.traite { border-left-color: var(--vert); }
.contestation textarea { width: 100%; }

.bouton {
  display: block; width: 100%; border: 0; border-radius: 12px; padding: 15px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.bouton:disabled { opacity: .5; cursor: wait; }
.principal { background: var(--accent); color: var(--sur-accent); }
.danger { background: var(--rouge); color: #fff; width: auto; padding: 12px 22px; }
.erreur { color: var(--rouge); text-align: center; }

/* Appel */
#ecran-appel.actif { display: flex; flex-direction: column; height: calc(100dvh - 64px); }
@media (max-width: 820px) { #ecran-appel.actif { height: calc(100dvh - 120px); } }
.barre-appel {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 4px 14px; border-bottom: 1px solid var(--bord);
}
.interlocuteur { display: flex; gap: 12px; align-items: center; }
.nom { font-weight: 650; }
.etat { font-size: 14px; color: var(--doux); }
.etat.parle { color: var(--accent); }
.chrono.bientot { color: var(--orange); font-weight: 700; }
.chrono { font-variant-numeric: tabular-nums; color: var(--doux); }
.fil { flex: 1; overflow-y: auto; padding: 16px 2px; display: flex; flex-direction: column; gap: 10px; }
.bulle { max-width: 80%; padding: 10px 14px; border-radius: 16px; overflow-wrap: anywhere; }
.bulle.moi { align-self: flex-end; background: var(--bulle-moi); color: var(--sur-accent); border-bottom-right-radius: 4px; }
.bulle.lui { align-self: flex-start; background: var(--bulle-lui); border-bottom-left-radius: 4px; }
.bulle.partiel { opacity: .65; }
.bulle.systeme { align-self: center; background: none; color: var(--doux); font-size: 14px; }
.pied-appel {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid var(--bord);
}
.micro { display: flex; align-items: center; gap: 10px; flex: 1; }
.vumetre { flex: 1; max-width: 220px; height: 8px; border-radius: 4px; background: var(--bord); overflow: hidden; }
#niveau { height: 100%; width: 0; background: var(--vert); transition: width .08s; }

/* Analyse */
.analyse { text-align: center; padding: 80px 0; }
.analyse p { color: var(--doux); }
.spinner {
  width: 44px; height: 44px; margin: 0 auto 20px; border-radius: 50%;
  border: 4px solid var(--bord); border-top-color: var(--accent); animation: tourne 1s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* Scorecard */
.badge {
  display: inline-block; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 99px; margin-bottom: 8px;
}
.critere { padding: 14px 0; border-top: 1px solid var(--bord); }
.critere:first-of-type { border-top: 0; padding-top: 4px; }
.critere-tete { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.barre { height: 8px; border-radius: 4px; background: var(--bord); margin: 8px 0 10px; overflow: hidden; }
.barre div { height: 100%; border-radius: 4px; }
.critere p { margin: 6px 0; }
.citation { color: var(--doux); font-style: italic; border-left: 3px solid var(--bord); padding-left: 10px; }
.conseil {
  background: color-mix(in srgb, var(--vert) 10%, transparent);
  border-radius: 8px; padding: 8px 12px;
}
.facultatif { font-style: normal; font-weight: 500; color: var(--doux); font-size: 12px; margin-left: 4px; }
.zone-documents { border: 1px dashed var(--bord); border-radius: 10px; padding: 12px; margin: 10px 0; }
.titre-zone { display: block; font-weight: 600; font-size: 14px; }
.bouton-fichier {
  display: inline-block; margin-top: 8px; padding: 7px 12px; border-radius: 8px; cursor: pointer;
  background: var(--accent-doux); color: var(--accent); font-weight: 600; font-size: 14px;
}
.liste-documents { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.liste-documents li { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 14px; }
.liste-documents .etat { font-size: 13px; color: var(--doux); white-space: nowrap; }
.liste-documents .etat.ok { color: var(--vert); }
.liste-documents .etat.ko { color: var(--rouge); }
.liste-documents button { border: 0; background: none; color: var(--doux); cursor: pointer; font-size: 16px; }
.tete-progression { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: end; justify-content: space-between; margin-bottom: 14px; }
.tete-progression .titre-accueil { margin: 0; }
.choix-simulation { margin: 0; min-width: min(100%, 320px); }
.resume-progression { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; }
.resume-progression b { font-size: 26px; font-variant-numeric: tabular-nums; }
.radar-zone { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; align-items: center; }
@media (max-width: 700px) { .radar-zone { grid-template-columns: 1fr; } }
.radar { width: 100%; height: auto; max-width: 560px; justify-self: center; overflow: visible; }
.radar .anneau { fill: none; stroke: var(--bord); stroke-width: 1; }
.radar .axe { stroke: var(--bord); stroke-width: 1; }
.radar .graduation { fill: var(--doux); font-size: 11px; font-variant-numeric: tabular-nums; }
.radar .libelle-axe { fill: var(--texte); font-size: 14px; }
.radar .libelle-axe.actif { font-weight: 700; }
.radar .zone-survol { fill: transparent; cursor: pointer; }
.radar polygon { stroke-width: 2; stroke-linejoin: round; }
.radar .point { stroke: var(--carte); stroke-width: 2; }
.legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.legende li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; }
.legende svg { width: 28px; height: 10px; }
.legende b { font-variant-numeric: tabular-nums; }
.infobulle { position: fixed; z-index: 30; pointer-events: none; background: var(--carte); color: var(--texte); border: 1px solid var(--bord);
  border-radius: 10px; box-shadow: var(--ombre); padding: 10px 12px; font-size: 13px; display: grid; gap: 4px; min-width: 180px; }
.infobulle .ligne { display: flex; justify-content: space-between; gap: 12px; }
.infobulle i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.infobulle .detail-famille { display: grid; gap: 2px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--bord); color: var(--doux); }
.infobulle .plus-faible, .infobulle .plus-faible b { color: var(--rouge); }
.resume-fiche { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; }
.ligne-scenario {
  display: flex; justify-content: space-between; gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); color: var(--texte);
  font: inherit; cursor: pointer;
}
.ligne-scenario:hover { border-color: var(--accent); }
.ligne-scenario small { color: var(--doux); }
.progression { font-size: 15px; margin: 4px 0 12px; }
.progression b { font-size: 18px; }
.table-tentatives { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-tentatives th, .table-tentatives td { padding: 6px 4px; border-top: 1px solid var(--bord); text-align: center; }
.table-tentatives th:first-child, .table-tentatives td:first-child { text-align: left; }
.table-tentatives thead th { border-top: 0; color: var(--doux); font-weight: 600; vertical-align: bottom; }
.table-tentatives .ligne-score td { font-weight: 700; }
.table-tentatives button { border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; padding: 0; }
.defile { overflow-x: auto; }
.fait-exploite { padding: 10px 0; border-top: 1px solid var(--bord); }
.fait-exploite:first-of-type { border-top: 0; }
.fait-exploite p { margin: 4px 0; }
.fait-titre { font-weight: 600; }
.fait-exploite.non .fait-titre { color: var(--doux); }
.listes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.listes ul, .listes ol { margin: 0; padding-left: 20px; }
.listes li { margin: 6px 0; }
.meta { color: var(--doux); font-size: 13px; text-align: center; margin: 4px 0 16px; }

@media (max-width: 560px) {
  .listes { grid-template-columns: 1fr; }
  .bulle { max-width: 90%; }
}

/* ---------- Scorecard (écran élargi, deux colonnes) ---------- */
main:has(#ecran-scorecard.actif) { max-width: 1120px; }
.sc2-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin: 4px 0 14px; }
.sc2-titre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc2-titre h2 { margin: 0; font-size: 26px; }
.sc2-type { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--bord); }
.sc2-meta { margin: 0; color: var(--doux); font-size: 14px; }
.sc2-colonnes { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.sc2-resultat { flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 0; }
.sc2-analyse { flex: 999 1 420px; min-width: 0; margin-bottom: 0; display: flex; flex-direction: column; gap: 16px; }
.sc2-score { font-size: 56px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc2-score small { font-size: 18px; color: var(--doux); font-weight: 400; margin-left: 4px; }
.sc2-issue { font-size: 20px; margin: 0; }
.sc2-verdict { margin: 0; line-height: 1.5; }
.sc2-etiquette { align-self: flex-start; border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent);
  background: color-mix(in srgb, var(--orange) 12%, transparent); color: var(--texte); font: inherit; font-size: 14px;
  font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; text-align: left; }
.sc2-sur-titre { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--doux); font-weight: 600; }
.sc2-sur-titre.seul { display: block; }
.sc2-points { border-top: 1px solid var(--bord); padding-top: 12px; display: flex; flex-direction: column; }
.sc2-points .sc2-sur-titre { padding-bottom: 6px; }
.sc2-point { display: flex; align-items: center; gap: 10px; min-height: 34px; border-bottom: 1px solid var(--bord); font-size: 14px; }
.sc2-point:last-child { border-bottom: 0; }
.sc2-puce { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.sc2-point-nom { flex: 1 1 auto; min-width: 0; }
.sc2-point-val { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--doux); }
.sc2-point-val strong { color: var(--texte); }
.sc2-point-val.doux { font-size: 13px; }
.sc2-onglets { display: flex; flex-wrap: wrap; gap: 4px; background: var(--fond); border-radius: 10px; padding: 4px; align-self: flex-start; }
.sc2-onglets button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: var(--doux);
  font: inherit; font-size: 15px; cursor: pointer; }
.sc2-onglets button[aria-selected="true"] { background: var(--carte); color: var(--texte); font-weight: 650; box-shadow: var(--ombre); }
.sc2-vue { display: flex; flex-direction: column; gap: 14px; }
.sc2-grille-tete h2 { margin: 2px 0; font-size: 22px; }
.sc2-grille-tete p { margin: 0; color: var(--doux); }
.sc2-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.sc2-puce-critere { min-width: 46px; height: 46px; padding: 0 12px; border-radius: 12px; font: inherit; font-size: 19px; font-weight: 600;
  cursor: pointer; background: var(--carte); color: var(--texte); border: 1.5px solid var(--bord); }
.sc2-puce-critere.large { font-size: 14px; }
.sc2-puce-critere.couvert { background: var(--texte); color: var(--carte); border-color: var(--texte); }
.sc2-puce-critere.a-travailler { border-color: var(--rouge); color: var(--rouge); background: color-mix(in srgb, var(--rouge) 8%, transparent); }
.sc2-puce-critere.partiel { border-color: var(--orange); color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, transparent); }
.sc2-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--doux); }
.sc2-legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.sc2-legende i.couvert { background: var(--vert); } .sc2-legende i.partiel { background: var(--orange); } .sc2-legende i.a-travailler { background: var(--rouge); }
.sc2-puce-critere.sans-objet { border-style: dashed; color: var(--doux); }
.sc2-puce-critere[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--accent); }
.sc2-regle { background: var(--fond); border-radius: 12px; padding: 12px 14px; }
.sc2-regle p { margin: 4px 0 0; }
.sc2-detail-critere { border: 1px solid var(--bord); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sc2-detail-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc2-detail-tete h3 { margin: 0; font-size: 18px; flex: 1 1 auto; }
.sc2-etat { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.sc2-etat.couvert { background: color-mix(in srgb, var(--vert) 15%, transparent); color: var(--vert); }
.sc2-etat.a-travailler { background: color-mix(in srgb, var(--rouge) 14%, transparent); color: var(--rouge); }
.sc2-etat.partiel { background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange); }
.sc2-etat.sans-objet { background: var(--fond); color: var(--doux); }
.sc2-note { font-variant-numeric: tabular-nums; color: var(--doux); font-size: 14px; }
.sc2-grille-detail { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px 14px; line-height: 1.5; }
.sc2-libelle-ligne { color: var(--doux); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; }
.sc2-vue .listes h3 { margin: 0 0 6px; font-size: 16px; }
.sc2-replique { display: grid; grid-template-columns: 34px 90px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid transparent; line-height: 1.5; scroll-margin: 80px; }
.sc2-replique.citee { background: var(--accent-doux); }
.sc2-replique.visee { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); }
.sc2-num { color: var(--doux); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 3px; }
.sc2-qui { font-weight: 650; font-size: 14px; }
.sc2-cite-par { display: block; color: var(--accent); font-size: 13px; font-weight: 600; margin-top: 2px; }
.sc2-pied { margin: 14px 0 6px; display: flex; flex-direction: column; gap: 8px; }
.sc2-avertissement { margin: 0; color: var(--doux); font-size: 14px; }
.sc2-signalement { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.sc2-signalement:empty { display: none; }
.sc2-signalement label { font-size: 14px; font-weight: 600; }
.sc2-signalement select, .sc2-signalement textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 8px;
  background: var(--carte); color: var(--texte); }
@media (max-width: 560px) {
  .sc2-resultat { max-width: none; }
  .sc2-replique { grid-template-columns: 28px minmax(0, 1fr); }
  .sc2-replique .sc2-texte { grid-column: 1 / -1; }
  .sc2-grille-detail { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Parcours de l'affaire (tableau par étape de vente) ---------- */
main:has(#ecran-parcours.actif) { max-width: 1240px; }
.bandeau-info { background: var(--accent-doux); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; scroll-margin: 16px; }
.parcours-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 4px 0 16px; }
.parcours-entete h1 { margin: 0 0 4px; }
.parcours-entete p { margin: 0; }
.parcours-vide { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.parcours-prochain { background: var(--texte); color: var(--carte); border-radius: 16px; padding: 20px 24px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 18px; margin-bottom: 14px; }
.parcours-prochain-texte { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.parcours-prochain-sur { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; opacity: .75; }
.parcours-prochain-qui { font-size: 21px; font-weight: 700; }
.parcours-prochain-qui small { font-size: 15px; font-weight: 400; opacity: .8; }
.parcours-prochain .bouton.principal { background: var(--carte); color: var(--texte); }
.parcours-prochain .bouton.secondaire { background: transparent; color: var(--carte); border-color: color-mix(in srgb, var(--carte) 40%, transparent); }
.parcours-initiale { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--sur-accent); display: grid; place-items: center;
  font-weight: 700; flex: 0 0 auto; }
.parcours-initiale.grande { width: 52px; height: 52px; font-size: 20px; }
.parcours-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.parcours-chiffre { margin: 0; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.parcours-valeur { font-size: 26px; font-weight: 650; font-variant-numeric: tabular-nums; }
.parcours-defilement { overflow-x: auto; padding-bottom: 8px; }
.parcours-colonnes { display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap: 12px; min-width: 1140px; }
.parcours-colonne { display: flex; flex-direction: column; gap: 10px; }
.parcours-tete { display: flex; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--bord); }
.parcours-tete.occupee { border-color: var(--accent); }
.parcours-num { font-size: 12px; color: var(--doux); font-variant-numeric: tabular-nums; }
.parcours-nom { font-weight: 700; font-size: 15px; }
.parcours-vide-colonne { margin: 0; border: 1.5px dashed var(--bord); border-radius: 12px; padding: 14px 12px; color: var(--doux); font-size: 14px; text-align: center; }
.parcours-carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--ombre); }
.parcours-carte.a-rejouer, .parcours-carte.reussie { border-color: var(--accent); }
.parcours-carte-tete { display: flex; align-items: center; gap: 10px; min-width: 0; }
.parcours-qui { display: flex; flex-direction: column; min-width: 0; }
.parcours-qui small { color: var(--doux); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parcours-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.parcours-score { font-size: 12px; font-weight: 650; padding: 2px 7px; border-radius: 6px; background: var(--fond); font-variant-numeric: tabular-nums; }
.parcours-etat { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--fond); color: var(--doux); }
.parcours-etat.a-rejouer { background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange); }
.parcours-etat.reussie, .parcours-etat.signee { background: color-mix(in srgb, var(--vert) 15%, transparent); color: var(--vert); }
.parcours-etat.a-reparer { background: color-mix(in srgb, var(--rouge) 15%, transparent); color: var(--rouge); }
.parcours-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.parcours-carte .lien-bouton { font-size: 14px; min-height: 32px; }
@media (max-width: 720px) { .parcours-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.parcours-entete .bouton, .parcours-actions .bouton, .parcours-vide .bouton, .sc2-pied .bouton { width: auto; display: inline-block; padding: 11px 18px; }
.sc2-pied > .bouton { align-self: flex-start; }
.parcours-actions .bouton { margin-top: 0; }
.parcours-prochain .bouton.secondaire { border: 1px solid color-mix(in srgb, var(--carte) 40%, transparent); }

/* ---------- Analyse vocale ---------- */
.voix { display: flex; flex-direction: column; gap: 18px; }
.voix-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.voix-entete h2 { margin: 0; }
.voix-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.voix-carte { border: 1px solid var(--bord); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--carte); }
.voix-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.voix-nom { font-weight: 650; }
.voix-etat { font-size: 13px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.voix-etat.dans { background: color-mix(in srgb, var(--vert) 15%, transparent); color: var(--vert); }
.voix-etat.proche { background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange); }
.voix-etat.loin { background: color-mix(in srgb, var(--rouge) 14%, transparent); color: var(--rouge); }
.voix-valeur { font-size: 34px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.voix-valeur small { font-size: 14px; font-weight: 400; color: var(--doux); }
.voix-jauge { position: relative; height: 20px; }
.voix-piste { position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 2px; background: var(--bord); }
.voix-cible { position: absolute; top: 6px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--serie-1) 35%, transparent); }
.voix-repere { position: absolute; top: 1px; width: 4px; height: 18px; border-radius: 2px; background: var(--texte); }
.voix-repere.proche { background: var(--orange); }
.voix-repere.loin { background: var(--rouge); }
.voix-cible-texte { font-size: 13px; color: var(--doux); }
.voix-conseil { margin: 0; font-size: 14px; line-height: 1.45; }
.voix-minutes-tete { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.voix-minutes h3, .voix-parasites h3 { margin: 0; font-size: 16px; }
.voix-legende { display: flex; gap: 14px; font-size: 13px; color: var(--doux); }
.voix-legende span { display: inline-flex; align-items: center; gap: 6px; }
.voix-legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.voix-legende i.serie-1, .voix-barre span.serie-1 { background: var(--serie-1); }
.voix-legende i.serie-2, .voix-barre span.serie-2 { background: var(--serie-2); }
.voix-barres { display: flex; gap: 4px; align-items: stretch; height: 150px; padding-bottom: 18px; }
.voix-barre { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; position: relative; }
.voix-barre span { display: block; min-height: 0; }
.voix-barre span.serie-2 { border-radius: 4px 4px 0 0; }
.voix-barre span.serie-1 { border-radius: 0 0 2px 2px; }
.voix-barre small { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--doux); font-variant-numeric: tabular-nums; }
.voix-barre:hover span { filter: brightness(1.1); }
.voix-parasites { display: flex; flex-direction: column; gap: 8px; }
.voix-parasite { display: flex; align-items: center; gap: 12px; }
.voix-mot { flex: 0 0 96px; font-weight: 600; font-size: 14px; }
.voix-trait { flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--fond); overflow: hidden; }
.voix-trait span { display: block; height: 100%; background: var(--serie-1); border-radius: 4px; }
.voix-compte { flex: 0 0 36px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .voix-grille { grid-template-columns: 1fr; } }

/* ---------- Scorecard : déroulé de l'appel ---------- */
.deroule-frise { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; }
.deroule-segment.reussie, .deroule-pastille.reussie { background: var(--vert); }
.deroule-segment.mitigee, .deroule-pastille.mitigee { background: var(--orange); }
.deroule-segment.ratee, .deroule-pastille.ratee { background: var(--rouge); }
.deroule-phase { display: grid; grid-template-columns: 12px 132px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; text-align: left;
  width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--bord); background: transparent; color: var(--texte); font: inherit;
  cursor: pointer; border-radius: 8px; }
.deroule-phase:hover { background: var(--fond); }
.deroule-pastille { width: 10px; height: 10px; border-radius: 3px; }
.deroule-quand { font-variant-numeric: tabular-nums; color: var(--doux); font-size: 14px; }
.deroule-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.45; }
.sc2-etat.rate { background: color-mix(in srgb, var(--rouge) 14%, transparent); color: var(--rouge); }
@media (max-width: 560px) { .deroule-phase { grid-template-columns: 12px minmax(0, 1fr); } .deroule-quand { grid-column: 2; } .deroule-texte { grid-column: 1 / -1; } .deroule-phase .sc2-etat { grid-column: 1 / -1; justify-self: start; } }

/* ---------- Exercices d'objection ---------- */
.parcours-exercices { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.parcours-exercices-tete h2 { margin: 0 0 4px; font-size: 20px; }
.parcours-exercices-tete p { margin: 0; }
.exercices-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.exercice-carte { border: 1px solid var(--bord); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.exercice-sur { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); font-weight: 600; }
.exercice-objection { margin: 0; font-size: 16px; line-height: 1.45; flex: 1 1 auto; }
.exercice-carte .bouton { margin-top: 4px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); padding: 10px 14px; }
.exercice-carte .bouton:hover { border-color: var(--accent); }
.sc2-objection { margin: 4px 0 0; width: 100%; font-weight: 600; }
.sc2-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sc2-pied .sc2-actions .bouton { margin-top: 0; width: auto; display: inline-block; padding: 11px 18px; }
.voix-exercice { background: var(--texte); color: var(--carte); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.voix-exercice-sur { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; opacity: .75; }
.voix-exercice strong { font-size: 18px; }
.voix-exercice .bouton { width: auto; background: var(--carte); color: var(--texte); padding: 10px 16px; margin-top: 4px; }
@media (max-width: 720px) { .exercices-grille { grid-template-columns: 1fr; } }

/* Chiffres : JetBrains Mono (charte) */
.sc2-score, .parcours-valeur, .voix-valeur, .parcours-score, .chrono, .sc2-point-val, .sc2-num, .deroule-quand, .voix-compte,
.parcours-num, .sc2-note, .sc2-puce-critere:not(.large) { font-family: var(--police-chiffre); }
.sc2-score { font-weight: 500; }
.voix-valeur { font-weight: 500; }

/* Scorecard v2.0 : risque de l'affaire, les trois pourquoi, axes de progrès avec la phrase à dire */
.sc2-risque { border-radius: 10px; padding: 10px 12px; border: 1px solid var(--bord); }
.sc2-risque.eleve { background: color-mix(in srgb, var(--rouge) 10%, transparent); border-color: color-mix(in srgb, var(--rouge) 35%, transparent); }
.sc2-risque.moyen { background: color-mix(in srgb, var(--orange) 10%, transparent); border-color: color-mix(in srgb, var(--orange) 35%, transparent); }
.sc2-risque.faible { background: color-mix(in srgb, var(--vert) 10%, transparent); border-color: color-mix(in srgb, var(--vert) 35%, transparent); }
.sc2-risque-titre { margin: 0 0 4px; display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--doux); }
.sc2-risque.eleve strong { color: var(--rouge); } .sc2-risque.moyen strong { color: var(--orange); } .sc2-risque.faible strong { color: var(--vert); }
.sc2-risque ul { margin: 0; padding-left: 18px; font-size: 14px; }
.sc2-pourquoi { display: grid; gap: 6px; margin-bottom: 8px; }
.sc2-axes li { margin: 10px 0; }
.sc2-axes strong { display: block; }
.sc2-axe-moment { display: block; font-size: 13px; color: var(--doux); margin-top: 2px; }
.sc2-axe-question { display: block; margin-top: 4px; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--accent-doux); border-radius: 0 8px 8px 0; font-size: 14px; }
.sc2-axe-question span { font-weight: 600; }

/* Analyse vocale : liste des questions de l'appel */
.voix-questions { display: grid; gap: 6px; }
.voix-question { display: grid; grid-template-columns: 76px 1fr auto; gap: 10px; align-items: baseline; font-size: 14px; }
.voix-question-type { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; justify-self: start; }
.voix-question.ouverte .voix-question-type { background: color-mix(in srgb, var(--vert) 14%, transparent); color: var(--vert); }
.voix-question.fermee .voix-question-type { background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); }
.voix-question-n { font-size: 12px; color: var(--doux); white-space: nowrap; }
@media (max-width: 520px) { .voix-question { grid-template-columns: 1fr; gap: 2px; } }

/* « Rejouer d'ici » : bouton discret sur chaque réplique du commercial ; répliques reprises grisées dans le fil */
@media not all and (max-width: 560px) { .sc2-replique { grid-template-columns: 34px 90px minmax(0, 1fr) auto; } }
.sc2-rejouer { justify-self: end; align-self: start; font: inherit; font-size: 12px; color: var(--accent); background: none;
  border: 1px solid var(--bord); border-radius: 999px; padding: 1px 10px; cursor: pointer; white-space: nowrap; }
.sc2-rejouer:hover, .sc2-rejouer:focus-visible { background: var(--accent-doux); }
.bulle.passe { opacity: .55; }

/* Écouter un moment de l'appel : lecteur en tête de l'analyse, boutons sur critères, phases et répliques */
.sc2-lecteur { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--bord); }
.sc2-audio { flex: 1 1 260px; min-width: 0; height: 36px; }
.sc2-audio:not([src]) { display: none; }
.sc2-lecteur-etat { font-variant-numeric: tabular-nums; }
.sc2-ecouter { font: inherit; font-size: 12px; color: var(--accent); background: none; border: 1px solid var(--bord);
  border-radius: 999px; padding: 1px 10px; cursor: pointer; white-space: nowrap; }
.sc2-ecouter:hover, .sc2-ecouter:focus-visible { background: var(--accent-doux); }
.sc2-actions-replique { display: flex; gap: 6px; justify-self: end; align-self: start; flex-wrap: wrap; justify-content: flex-end; }
.deroule-ligne { display: flex; align-items: center; gap: 8px; }
.deroule-ligne > .deroule-phase { flex: 1; min-width: 0; }

/* Comptes : entreprise et rôle dans le menu, page « Équipe » */
.session { flex-wrap: wrap; }
.session-org { flex-basis: 100%; font-size: 12px; color: var(--doux); }
.equipe-ajout { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; align-items: end; }
.equipe-ajout label { display: grid; gap: 4px; font-size: 13px; color: var(--doux); }
.equipe-ajout .bouton { align-self: end; }
/* Import HubSpot (formulaire sur mesure) et connexion de l'admin : un champ et son bouton sur une ligne */
.import-crm-ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.import-crm-ligne input { flex: 1 1 16rem; min-width: 0; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--bord);
  background: var(--carte); color: var(--texte); font: inherit; font-size: 15px; }
.import-crm-ligne input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.import-crm-ligne .bouton { width: auto; padding: 11px 18px; }
.maison { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px 14px; align-items: end; }
.maison label { display: grid; gap: 4px; font-size: 13px; color: var(--doux); }
.maison .bouton { justify-self: start; }
@media (max-width: 640px) { .maison { grid-template-columns: 1fr; } }
.table-equipe td, .table-equipe th { text-align: left; }
.table-equipe tr.retire td { color: var(--doux); }
.bouton.petit { padding: 4px 10px; font-size: 13px; }
.bouton.danger { background: var(--orange); border-color: var(--orange); }

/* Tableau de bord des managers */
.tb-periodes { display: flex; gap: 4px; }
.tb-periode { font: inherit; font-size: 13px; padding: 4px 12px; border: 1px solid var(--bord); border-radius: 999px; background: var(--carte); color: var(--texte); cursor: pointer; }
.tb-periode[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.sc2-avis-note[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.tb-deux { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .tb-deux { grid-template-columns: 1fr; } }
.tb-criteres { display: grid; gap: 8px; }
.tb-critere { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(80px, 1fr) 34px 70px; gap: 10px; align-items: center; font-size: 14px; }
.tb-critere-nom small { color: var(--doux); }
.tb-barre { height: 8px; background: var(--fond); border-radius: 0 4px 4px 0; overflow: hidden; }
.tb-barre span { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.tb-critere-val { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.tb-evol { font-size: 12px; font-weight: 600; color: var(--doux); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-evol.hausse { color: var(--vert); } .tb-evol.baisse { color: var(--rouge); }
.tb-courbe { width: 100%; height: auto; max-width: 100%; }
.tb-grille { stroke: var(--bord); stroke-width: 1; }
.tb-axe { fill: var(--doux); font-size: 11px; }
.tb-ligne { stroke: var(--serie-1); stroke-width: 2; }
.tb-point { fill: var(--serie-1); stroke: var(--carte); stroke-width: 2; }
.tb-alerte { display: inline-block; margin: 0 4px 4px 0; white-space: nowrap; }
.tb-etapes { display: grid; grid-template-columns: repeat(6, minmax(140px, 1fr)); gap: 10px; overflow-x: auto; }
.tb-etape { display: grid; gap: 8px; align-content: start; background: var(--fond); border-radius: 10px; padding: 10px; min-width: 0; }
.tb-etape h3 { margin: 0; font-size: 14px; } .tb-etape h3 small { color: var(--doux); font-weight: 400; }
.tb-affaire { display: grid; gap: 4px; background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 8px; font-size: 13px; }
.tb-affaire .parcours-etat { justify-self: start; }
@media (max-width: 720px) { .tb-critere { grid-template-columns: minmax(0, 1fr) 60px 30px; } .tb-critere .tb-evol { display: none; } }

/* Assignations */
.menu-compte:not(:empty) { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--sur-accent); font-size: 12px; text-align: center; }
.as-entete { display: flex; justify-content: space-between; align-items: start; gap: 12px; flex-wrap: wrap; }
.as-bloc { border-top: 1px solid var(--bord); padding-top: 12px; margin-top: 12px; display: grid; gap: 8px; }
.as-tete { display: flex; gap: 12px; align-items: start; justify-content: space-between; flex-wrap: wrap; }
.as-tete > div { flex: 1 1 260px; min-width: 0; }
.as-total { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-commerciaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.as-commercial { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.as-formulaire { margin-top: 12px; padding: 12px; background: var(--fond); border-radius: 10px; }
.as-formulaire .as-large { grid-column: 1 / -1; }
.as-cases { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; border: 0; padding: 0; margin: 0; font-size: 14px; }
.as-cases legend { font-size: 13px; color: var(--doux); padding: 0; margin-bottom: 4px; }
.as-actions { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; }
.as-afaire { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.as-afaire > div { flex: 1 1 300px; min-width: 0; display: grid; gap: 4px; }
/* Champs des formulaires « Équipe » et « Assignations » : même style que le reste de l'application */
.equipe-ajout input:not([type="checkbox"]), .equipe-ajout select {
  width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--bord);
  background: var(--carte); color: var(--texte); font: inherit; font-size: 15px;
}
.equipe-ajout input:focus, .equipe-ajout select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.equipe-ajout .bouton { width: auto; }
.as-cases label { display: inline-flex; align-items: center; gap: 6px; color: var(--texte); font-size: 14px; }
.as-cases input { width: 16px; height: 16px; accent-color: var(--accent); }

/* Vrais appels */
.bloc-capture { border-top: 1px solid var(--bord); margin-top: 16px; padding-top: 12px; }
.bloc-capture .champ { max-width: 260px; }
.bloc-aircall { margin-top: 14px; }
.bloc-aircall .champ { max-width: 420px; }
.tendances-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tendances-tete h2 { margin: 0; }
.tendances h3 { margin: 18px 0 8px; }
.message-flottant { position: fixed; right: 16px; bottom: 16px; z-index: 1000; max-width: min(380px, calc(100vw - 32px)); display: flex; gap: 4px;
  align-items: start; background: var(--carte); color: var(--texte); border: 1px solid var(--accent); border-radius: 12px;
  box-shadow: var(--ombre); padding: 12px 8px 12px 14px; animation: message-arrivee .25s ease-out; }
.message-flottant-texte { background: none; border: 0; padding: 0; text-align: left; font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.message-flottant-texte:hover { color: var(--accent); }
.message-flottant-fermer { background: none; border: 0; font-size: 20px; line-height: 1; color: var(--doux); cursor: pointer; padding: 0 4px; }
@keyframes message-arrivee { from { transform: translateY(12px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .message-flottant { animation: none; } }
.qui-personne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 6px 12px; margin-bottom: 14px; }
.qui-personne .qui-nom { grid-column: 1 / -1; margin: 0; }
.qui-personne .champ[hidden] { display: none; }
@media (max-width: 600px) { .qui-personne { grid-template-columns: 1fr; } }
.reel-depot { display: flex !important; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer;
  border: 2px dashed var(--bord); border-radius: 12px; padding: 22px 16px; color: var(--texte) !important; }
.reel-depot:hover, .reel-depot:focus-within { border-color: var(--accent); }
.reel-depot .bouton-fichier { margin-top: 0; }
.reel-depot-choisi { font-weight: 600; color: var(--accent); }
.reel-consentement { display: flex !important; gap: 8px; align-items: start; color: var(--texte) !important; font-size: 14px !important; }
.reel-consentement input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.equipe-ajout input[type="file"] { padding: 8px; background: var(--fond); }

/* Bibliothèque d'objections */
.ob-filtres { flex-wrap: wrap; margin-bottom: 14px; }
.ob-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ob-carte { display: grid; gap: 6px; align-content: start; border: 1px solid var(--bord); border-radius: 10px; padding: 12px; background: var(--carte); }
.ob-tete { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ob-tete .lien-bouton { margin-left: auto; }
.ob-texte { margin: 0; font-size: 15px; }
.ob-ok { color: var(--vert); } .ob-ko { color: var(--orange); }
.ob-compte { color: var(--doux); font-weight: 400; font-size: 15px; }

/* Préparer une simulation : choix du point de départ, dictée, enrichissement */
.champ.pre-rempli input, .champ.pre-rempli select, .champ.pre-rempli textarea { border-color: var(--accent); background: var(--accent-doux); }
.avec-micro { position: relative; }
.micro-seul { display: block; }
.micro-seul .bouton-micro { top: 8px; }
.avec-micro textarea { padding-right: 44px; }
.bouton-micro { position: absolute; right: 8px; top: calc(1.5em + 14px); width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--bord); border-radius: 8px; background: var(--carte); color: var(--doux); cursor: pointer; }
.bouton-micro svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.bouton-micro:hover, .bouton-micro:focus-visible { color: var(--texte); border-color: var(--accent); }
.bouton-micro[aria-pressed="true"] { color: #fff; background: var(--rouge); border-color: var(--rouge); animation: micro-actif 1.4s ease-in-out infinite; }
@keyframes micro-actif { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--rouge) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .bouton-micro[aria-pressed="true"] { animation: none; } }
.option-enrichissement { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 12px 14px; margin-bottom: 14px; border: 1px dashed var(--bord); border-radius: 10px; }
.option-enrichissement small { display: block; margin-top: 4px; }
.option-enrichissement[hidden] { display: none; }
.interrupteur { position: relative; flex: 0 0 auto; width: 40px; height: 22px; }
.interrupteur input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.interrupteur input:disabled { cursor: not-allowed; }
.interrupteur span { position: absolute; inset: 0; border-radius: 11px; background: var(--bord); transition: background .2s; pointer-events: none; }
.interrupteur span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.interrupteur input:checked + span { background: var(--accent); }
.interrupteur input:checked + span::after { transform: translateX(18px); }
.interrupteur input:disabled + span { opacity: .55; }
.interrupteur input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Direction Pitchbase : titres larges, boutons noirs compacts, cartes à filet fin ---------- */
h1 { font-size: 36px; font-weight: 600; letter-spacing: -.03em; }
h2 { letter-spacing: -.01em; }
.carte { box-shadow: none; }
.bouton { border-radius: var(--border-radius-md); }
.menu-lien { color: var(--doux); }
@media (prefers-color-scheme: dark) { .menu-lien { color: var(--texte); } }
.menu-lien svg { stroke: currentColor; }
.menu-lien.actif { background: var(--accent-doux); color: var(--texte); }
.menu-lien.actif svg { stroke: currentColor; }
.lien-bouton { text-decoration: underline; text-underline-offset: 3px; }
.parcours-tete.occupee { border-color: var(--texte); }
.parcours-carte.a-rejouer, .parcours-carte.reussie { border-color: var(--bord); }
.parcours-prochain { background: var(--carte); color: var(--texte); border: 1px solid var(--bord); }
.parcours-prochain .bouton.principal { background: var(--accent); color: var(--sur-accent); }
.parcours-prochain .bouton.secondaire { background: transparent; color: var(--texte); border: 1px solid var(--bord); }
.parcours-prochain-sur { opacity: 1; color: var(--doux); }
.parcours-prochain-qui small { opacity: 1; color: var(--doux); }
.sc2-resultat { background: var(--menu); }
.sc2-puce-critere.couvert { background: color-mix(in srgb, var(--vert) 12%, transparent); color: var(--vert); border-color: var(--vert); }
.sc2-puce-critere[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--carte), 0 0 0 5px var(--accent); }
.sc2-replique.citee { background: var(--accent-doux); }
.sc2-cite-par { color: var(--texte); }

/* ---------- Parcours par profil : menu par intention, quota, accueils, fonction réservée ---------- */
.menu-intertitre { margin: 14px 12px 4px; font-family: var(--police-chiffre); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.menu-verrou { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.menu-verrou svg { width: 13px; height: 13px; }
.menu-offre { font-family: var(--police-chiffre); font-size: 11px; color: var(--doux); border: 1px solid var(--bord); border-radius: 4px; padding: 0 5px; }
.menu-lien:has(.menu-verrou:not([hidden])) { color: var(--doux); }
.quota { width: 100%; box-sizing: border-box; background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.quota[hidden] { display: none; }
.quota-tete { display: flex; justify-content: space-between; gap: 8px; }
.quota-tete span { color: var(--doux); }
.quota-barre { height: 6px; border-radius: 3px; background: var(--accent-doux); overflow: hidden; }
.quota-barre span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.quota[data-niveau="vert"] .quota-barre span { background: var(--vert); }
.quota[data-niveau="orange"] .quota-barre span { background: var(--orange); }
.quota[data-niveau="orange"] .quota-tete span { color: var(--orange); font-weight: 600; }
.quota[data-niveau="rouge"] { border-color: var(--rouge); }
.quota[data-niveau="rouge"] .quota-barre span { background: var(--rouge); }
.quota[data-niveau="rouge"] .quota-tete span { color: var(--rouge); font-weight: 700; }
.quota[data-niveau="rouge"] .lien-bouton { color: var(--rouge); }
.quota .lien-bouton { align-self: flex-start; font-size: 13px; text-decoration: underline; }
@media (max-width: 860px) { .quota { width: auto; flex-direction: row; align-items: center; padding: 6px 10px; } .quota-barre { width: 60px; } .menu-intertitre { display: none; } }

.tete-catalogue { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.maison-conseil, .maison-quota { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.maison-conseil > div { flex: 1 1 320px; }
.maison-conseil h2, .maison-quota h2 { margin: 6px 0 4px; }
.maison-quota { flex-direction: column; align-items: flex-start; gap: 8px; }
.maison-quota .sc2-sur-titre { color: var(--orange); }
.maison-section { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.maison-section h2 { margin: 0; font-size: 17px; }
.maison-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.maison-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.maison-offre { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border: 1px dashed var(--bord); border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; }
.maison-offre p { margin: 0; flex: 1 1 280px; color: var(--doux); }

.verrou-page { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; padding-top: 12px; }
.verrou-texte { flex: 1 1 420px; display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.verrou-texte h1 { margin: 0; font-size: 32px; line-height: 1.15; }
.verrou-texte p, .verrou-texte ul { margin: 0; line-height: 1.55; }
.verrou-prix { display: flex; flex-direction: column; gap: 2px; }
.verrou-prix span { color: var(--doux); }
.verrou-exemple { flex: 0 1 300px; display: flex; flex-direction: column; gap: 10px; }
.verrou-etape { display: flex; justify-content: space-between; font-size: 14px; }
.verrou-etape span:last-child { color: var(--doux); }
.verrou-etape.fort { font-weight: 650; }
.verrou-etape.fort span:last-child { color: var(--texte); }
.verrou-lettres { display: flex; gap: 4px; font-family: var(--police-chiffre); font-size: 12px; }
.verrou-lettres span { padding: 3px 7px; border-radius: 4px; background: var(--accent-doux); }
.verrou-lettres span.couverte { background: var(--accent); color: var(--sur-accent); }

.sc2-retours { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); padding: 14px; margin: 4px 0 12px; text-align: left; }
.sc2-retour p { margin: 0 0 4px; line-height: 1.5; }
.tb-nom { text-align: left; }
.commercial-colonnes { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 960px) { .commercial-colonnes { grid-template-columns: minmax(0, 1fr); } }

/* Exemple de Scorecard sans compte (…/?exemple) : seulement la lecture */
/* SPARRING ouvert dans la carte HubSpot : l'encart central seulement */
.mode-hubspot .menu, .mode-hubspot #session, .mode-hubspot #quota { display: none !important; }
.mode-exemple .menu, .mode-exemple #bouton-rejouer, .mode-exemple .sc2-rejouer, .mode-exemple .sc2-contester, .mode-exemple #session { display: none !important; }
.bandeau-exemple { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.bandeau-exemple p { margin: 0; max-width: 60ch; }

/* Tableau de bord : moments à coacher */
.moments { display: grid; gap: 10px; }
.moment { border-left: 3px solid var(--accent, #c4561f); padding: 6px 12px; display: grid; gap: 2px; }
.moment p { margin: 0; }
.moment.traite { opacity: .6; border-left-color: currentColor; }
.moment-note { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Vue manager : liens d'en-tête, « À traiter », filtre d'équipe */
.tb-liens { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; }
.tb-traiter-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-titre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.tb-filtre { font-size: 14px; }
#tableau > .sc2-onglets { margin: 8px 0 14px; }

/* Playlists : formulaire d'ajout dans la Scorecard */
.sc2-playlist { display: grid; gap: 8px; }
.sc2-playlist-panneau { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); min-width: min(100%, 420px); }
.sc2-playlist-panneau h3 { margin: 0 0 8px; font-size: 15px; }
.sc2-playlist-passage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc2-playlist-passage input { width: 80px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); font: inherit; }
.sc2-playlist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.sc2-playlist-actions .bouton { width: auto; margin: 0; }
.sc2-playlist-ok { padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--vert) 12%, transparent); color: var(--vert); font-size: 14px; }

/* Fiche affaire */
.affaire-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.affaire-colonnes h3 { font-size: 14px; margin: 8px 0 4px; }
.affaire-colonnes ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* Mes affaires : une ligne par affaire, la ligne entière ouvre la fiche */
.table-affaires td { vertical-align: top; }
.table-affaires .ligne-affaire { cursor: pointer; }
.table-affaires .ligne-affaire:hover td { background: var(--fond); }
.table-affaires td:first-child button { font-size: 15px; font-weight: 650; text-align: left; }
/* Fiche affaire : le cycle de vente de cette affaire seule */
.cycle-affaire { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.cycle-etape { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 10px; }
.cycle-etape .cycle-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--fond); color: var(--doux); }
.cycle-etape .cycle-nom { font-weight: 650; }
.cycle-etape.faite .cycle-num { background: color-mix(in srgb, var(--vert) 15%, transparent); color: var(--vert); }
.cycle-etape.courante { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cycle-etape.courante .cycle-num { background: var(--accent); color: var(--sur-accent); }
/* Fonctions Entreprise : verrouillées (Pro) ou à venir (Entreprise) */
.a-venir ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.a-venir li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
.a-venir li .aide { grid-column: 2; }
.a-venir-badge { grid-row: span 2; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-doux); color: var(--doux); white-space: nowrap; }
.table-affaires .parcours-etat { white-space: nowrap; }
.votre-catalogue h2 { margin: 18px 0 6px; }
.votre-catalogue #liste-votre-catalogue { margin-bottom: 8px; }

/* S'entraîner : liste des interlocuteurs à gauche, fiche du scénario choisi à droite (sans changer de page) */
main:has(#ecran-accueil.actif #mode-entrainement:not([hidden])) { max-width: 1240px; }
.pratique { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.compte-scenarios { margin: 14px 0 8px; font-size: 13px; color: var(--doux); }
.liste-scenarios { display: flex; flex-direction: column; gap: 8px; }
.ligne-scenario { display: flex; gap: 14px; align-items: center; width: 100%; padding: 14px 16px; box-sizing: border-box; text-align: left;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; color: var(--texte); font: inherit; cursor: pointer; }
.ligne-scenario:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--bord)); }
.ligne-scenario[aria-pressed="true"] { border-color: var(--accent); box-shadow: var(--ombre); }
.ligne-scenario:focus-visible, .panneau-fermer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visage { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; background: var(--accent-doux); }
.visage.grand { width: 112px; height: 112px; }
.ligne-scenario { justify-content: flex-start; }
.ligne-texte { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ligne-texte .role { max-width: 100%; }
.pratique .filtre-recherche { flex-basis: 100%; }
.ligne-scenario .nom { font-size: 15px; font-weight: 600; }
.ligne-scenario .role { font-size: 13px; color: var(--doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.etiquette { padding: 3px 8px; border: 1px solid var(--bord); border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--texte); background: var(--carte); }
.etiquette.pleine { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }

.panneau-scenario { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; box-sizing: border-box; padding: 24px;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; }
.panneau-scenario.ouvert > * { animation: panneau-entree .22s ease-out; }
@keyframes panneau-entree { from { opacity: 0; transform: translateX(10px); } }
.panneau-vide { margin: 96px 0; text-align: center; color: var(--doux); }
.panneau-fermer { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--doux); font-size: 22px; line-height: 1; cursor: pointer; }
.panneau-fermer:hover { background: var(--accent-doux); color: var(--texte); }
.panneau-consignes { padding: 14px 16px; border: 1px solid var(--bord); border-radius: 10px; }
.panneau-consignes h2 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.panneau-consignes p { margin: 0; font-size: 14px; line-height: 1.5; }
.panneau-identite { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 24px 0 20px; text-align: center; }
.panneau-identite h3 { margin: 12px 0 0; font-size: 20px; font-weight: 500; }
.panneau-identite .role { margin: 0; font-size: 14px; color: var(--doux); }
.panneau-identite .etiquettes { justify-content: center; }
.panneau-scenario .bouton-appeler { width: 100%; }
.panneau-scenario .aide.centre { margin: 8px 0 16px; font-size: 12px; text-align: center; }
.panneau-section { border-top: 1px solid var(--bord); padding: 12px 0; font-size: 14px; }
.panneau-section summary { cursor: pointer; font-weight: 500; }
.panneau-section h3 { margin: 12px 0 4px; font-size: 13px; }
.panneau-section ul { margin: 4px 0; padding-left: 18px; }
.panneau-scenario .sources { font-size: 12px; color: var(--doux); }
@media (max-width: 900px) {
  .pratique { grid-template-columns: minmax(0, 1fr); }
  /* Petit écran : la fiche glisse depuis la droite, par-dessus la liste */
  .panneau-scenario { position: fixed; inset: 0 0 0 auto; z-index: 50; width: min(460px, 100%); max-height: none; border-radius: 0;
    transform: translateX(100%); visibility: hidden; transition: transform .25s ease-out, visibility .25s; }
  .panneau-scenario.ouvert { transform: none; visibility: visible; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
}
@media (prefers-reduced-motion: reduce) {
  .panneau-scenario, .panneau-scenario.ouvert > * { transition: none; animation: none; }
}

/* Progression : le dernier appel en tête, la Scorecard complète à un clic */
.dernier-appel { display: flex; gap: 20px; align-items: flex-start; }
.dernier-appel .dernier-score { margin: 0; font-size: 44px; font-weight: 600; line-height: 1; }
.dernier-appel .dernier-score small { font-size: 16px; color: var(--doux); }
.dernier-appel h2 { margin: 0 0 6px; }
.dernier-appel .bouton, #analyse-prete .bouton { width: auto; display: inline-block; padding: 11px 18px; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Progression : le ressenti noté en fin d'appel, à côté de la note de la Scorecard */
.ressenti { margin: 0 0 8px; color: var(--doux); font-size: 14px; }

/* Appel d'un scénario prêt à jouer, dans la fiche sous la photo : bloc blanc, le cercle grossit et s'éclaire quand le prospect parle */
.appel-panneau {
  --s-texte: var(--texte); --s-doux: var(--doux); --s-filet: var(--bord); --s-rouge: var(--rouge);
  display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 18px 20px 22px; margin-bottom: 16px;
  background: var(--carte); color: var(--s-texte); border: 1px solid var(--bord); border-radius: 16px; text-align: center;
}
.appel-panneau[hidden] { display: none; }
.appel-panneau-tete { align-self: stretch; display: flex; justify-content: space-between; align-items: center; }
.salle-enregistre { font-size: 12px; color: var(--s-doux); }
.salle-enregistre::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--s-rouge); vertical-align: 1px; }
.chrono-panneau { font-size: 18px; font-variant-numeric: tabular-nums; }
.orbe {
  --niveau: 0; position: relative; width: min(200px, 55vw); aspect-ratio: 1; margin: 18px 0 6px; border-radius: 50%; overflow: hidden;
  /* Le dégradé du symbole SPARRING.ai : Deep Navy vers Sparring Teal, halo AI Cyan quand le prospect parle */
  background: radial-gradient(circle at 50% 40%, var(--color-secondary-light) 0%, var(--color-secondary-dark) 45%, var(--color-primary-main) 100%);
  box-shadow: 0 0 calc(40px + var(--niveau) * 70px) calc(6px + var(--niveau) * 24px) rgba(0, 229, 255, calc(.12 + var(--niveau) * .3));
  transform: scale(calc(1 + var(--niveau) * .08)); transition: transform .12s ease-out, box-shadow .12s ease-out, width .3s;
}
/* Nuages : bruit fractal blanc qui tourne lentement */
.orbe::before {
  content: ""; position: absolute; inset: -25%; opacity: calc(.45 + var(--niveau) * .5);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -0.62'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") center / cover;
  filter: blur(2px); animation: orbe-nuages 40s linear infinite;
}
.orbe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 40px 10px rgba(0, 0, 0, .55); }
@keyframes orbe-nuages { to { transform: rotate(360deg); } }
.salle-etat { margin: 0; font-size: 14px; color: var(--s-doux); }
.salle-etat::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.salle-etat.parle { color: var(--s-texte); }
.salle-message { margin: 0; padding: 8px 14px; border: 1px solid var(--s-filet); border-radius: 10px; font-size: 13px; }
.appel-panneau-boutons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.bouton-salle { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--s-filet); background: var(--carte); color: var(--s-texte); }
.bouton-salle[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); }
.bouton-salle.rouge { border-color: color-mix(in srgb, var(--rouge) 45%, transparent); background: color-mix(in srgb, var(--rouge) 7%, var(--carte)); color: var(--s-rouge); }
.bouton-salle.rouge:hover { background: color-mix(in srgb, var(--rouge) 14%, var(--carte)); }
.appel-panneau button:focus-visible { outline: 2px solid var(--s-texte); outline-offset: 3px; }
.icone-salle { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Après le raccroché : petit cercle, étoiles du ressenti pendant l'analyse */
.analyse-en-cours .orbe { --niveau: 0 !important; width: 96px; margin-top: 8px; opacity: .6; }
.analyse-en-cours .orbe::before { animation-duration: 8s; }
.analyse-en-cours .salle-etat, .analyse-en-cours .appel-panneau-boutons, .analyse-en-cours .salle-enregistre { display: none; }
.salle-analyse { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.salle-analyse[hidden] { display: none; }
.salle-titre { margin: 0; font-size: 17px; font-weight: 500; }
.salle-analyse p:not(.salle-titre) { margin: 0; font-size: 14px; color: var(--s-doux); }
.etoiles { display: flex; gap: 4px; margin: 4px 0; }
.etoiles button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--bord); font-size: 30px; line-height: 1; cursor: pointer; }
.etoiles button.allumee { color: #e0a43a; }
.etoiles button:hover { background: var(--accent-doux); }
.appel-panneau .lien-bouton { color: var(--s-doux); }
.appel-panneau .bouton.principal { width: auto; padding: 11px 20px; }
@media (prefers-reduced-motion: reduce) { .orbe::before { animation: none; } .orbe { transition: none; } }

/* Fiche du panneau : « Personnaliser le prospect » à gauche, fermer à droite */
.panneau-barre { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-bottom: 12px; }
  background: var(--carte); color: var(--texte); font: inherit; font-size: 14px; cursor: pointer; }
/* « Objections de vos vrais appels » : un bouton à côté du titre, pas une bande pleine largeur */
.tete-catalogue .bouton { width: auto; padding: 10px 16px; }
/* Avis après l'appel (salle) et ajustements du prochain appel */
.salle-avis { width: 100%; text-align: left; }
.salle-avis-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.salle-avis-actions .bouton { width: auto; margin: 0; }
.ajustements, .salle-ajustements { text-align: left; border: 1px solid var(--bord); border-radius: 10px; padding: 10px 14px; background: var(--accent-doux); font-size: 14px; display: grid; gap: 6px; }
.ajustements ul, .salle-ajustements ul { margin: 0; padding-left: 18px; }
.ajustements .lien-bouton, .salle-ajustements .lien-bouton { justify-self: start; font-size: 13px; }
/* Quiz d'attente pendant la préparation */
.quiz { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bord); display: grid; gap: 10px; }
.quiz-question { font-weight: 600; margin: 0; }
.quiz-choix-liste { display: grid; gap: 8px; }
.quiz-choix { text-align: left; padding: 10px 14px; border: 1px solid var(--bord); border-radius: 10px; background: none; color: var(--texte); font: inherit; cursor: pointer; }
.quiz-choix:hover:not(:disabled) { border-color: var(--accent); }
.quiz-choix:disabled { cursor: default; }
.quiz-choix.juste { border-color: var(--vert); background: color-mix(in srgb, var(--vert) 12%, transparent); }
.quiz-choix.faux { border-color: var(--rouge, #c0392b); background: color-mix(in srgb, var(--rouge, #c0392b) 10%, transparent); }
.quiz-score { font-weight: 600; margin: 0; }
/* Demande d'avis au manager */
.sc2-revue { margin-top: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--bord); display: grid; gap: 6px; }
.sc2-revue.valide { border-color: var(--vert); }
.sc2-revue.a_retravailler { border-color: var(--orange, #b45309); }
.sc2-revue p { margin: 0; }
.sc2-case { display: flex; gap: 8px; align-items: center; }
.parcours-etat.revue-valide { color: var(--vert); }
/* Glisser-déposer des fichiers */
.depot-actif { border-color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 6%, transparent); }
/* Fiche : la carte « Appeler » reste en haut de l'écran pendant le défilement (sauf pendant l'appel, qui s'ouvre dedans) */
.carte-actions { position: sticky; top: 8px; z-index: 5; box-shadow: 0 6px 16px rgb(0 0 0 / 6%); }
.carte-actions:has(.appel-panneau:not([hidden])) { position: static; }
#brief-rdv { scroll-margin-top: 150px; } /* visible sous la carte « Appeler » collante */
/* Équipe : Performance et Suivi et actions */
.tb-entete-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tb-entete-actions .bouton { width: auto; padding: 8px 14px; }
.onglets-parametres .tb-badge { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--rouge); color: #fff; font-size: 12px; font-weight: 600; }
.tb-synthese { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.tb-synthese-bloc { padding: 12px 14px; border-radius: 10px; background: var(--fond); }
.tb-synthese-bloc h3 { margin: 0 0 6px; font-size: 14px; }
.tb-synthese-bloc ul, .tb-synthese-bloc ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.tb-synthese-bloc.forces { background: color-mix(in srgb, var(--vert) 9%, transparent); }
.tb-synthese-bloc.faiblesses { background: color-mix(in srgb, var(--orange) 10%, transparent); }
.tb-regularite { display: inline-flex; gap: 3px; vertical-align: middle; }
.tb-regularite i { width: 8px; height: 16px; border-radius: 2px; background: var(--bord); }
.tb-regularite i.actif { background: var(--texte); }
.tb-chaleur { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 620px; font-size: 14px; }
.tb-chaleur th { font-size: 12px; font-weight: 600; color: var(--doux); padding: 6px 8px; text-align: center; }
.tb-chaleur tbody th { text-align: left; color: var(--texte); font-size: 14px; }
.tb-chaleur td { text-align: center; padding: 10px 8px; border-radius: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tb-chaleur td.couvert { background: color-mix(in srgb, var(--vert) 18%, transparent); }
.tb-chaleur td.partiel { background: color-mix(in srgb, var(--orange) 20%, transparent); }
.tb-chaleur td.a-travailler { background: color-mix(in srgb, var(--rouge) 20%, transparent); }
.tb-chaleur td.hm-vide { color: var(--doux); font-weight: 400; }
.tb-chaleur .hm-equipe th { border-top: 1px solid var(--bord); font-weight: 700; }
.tb-retenir { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--fond); font-size: 14px; }
.tb-tuile-action { text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--bord); }
.tb-tuile-action:hover { border-color: var(--texte); }
.tb-ligne-action { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bord); }
.tb-ligne-action > div { flex: 1 1 320px; min-width: 0; }
.tb-ligne-action p { margin: 0 0 4px; }
.tb-ligne-action .bouton { width: auto; padding: 9px 14px; }
.tb-coaching { display: grid; gap: 12px; margin-bottom: 18px; }
.tb-coaching h2 { margin: 0 0 4px; }
.tb-coaching-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.tb-coach { margin: 0; display: grid; gap: 12px; align-content: start; }
.tb-coach h3 { margin: 0; }
.tb-coach-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tb-coach-colonnes ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.tb-coach .forces { color: var(--vert); } .tb-coach .faiblesses { color: var(--orange); }
.tb-moment { padding: 10px 12px; border-radius: 10px; background: var(--fond); }
.tb-moment p { margin: 4px 0 0; font-size: 14px; }
@media (max-width: 700px) { .tb-coach-colonnes { grid-template-columns: 1fr; } }
.tb-chaleur, .carte > div > .sc2-legende { margin-top: 4px; } .carte .sc2-legende span { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; }
/* Accueil : le mot du jour, l'appel qui attend, la semaine et les nouveautés */
.maison-entete { align-items: flex-start; }
.maison-entete .bouton { width: auto; padding: 10px 16px; }
.maison-mot { font-size: 17px; line-height: 1.5; max-width: 62ch; color: var(--texte); margin-top: 6px !important; }
.maison-intertitre { margin: 24px 0 10px; font-size: 18px; }
.parcours-portrait { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.maison-heros { padding: 24px 28px; margin-bottom: 18px; }
.maison-heros .parcours-portrait { width: 84px; height: 84px; box-shadow: 0 0 0 4px var(--carte), 0 0 0 6px var(--vert); }
.maison-heros .parcours-prochain-qui { font-size: 26px; }
/* Un seul mouvement sur la page : l'appel qui attend « sonne » tant qu'il attend */
@media (prefers-reduced-motion: no-preference) {
  .maison-heros .parcours-portrait { animation: sonnerie 1.6s ease-out 0.3s infinite; }
  @keyframes sonnerie { 0% { box-shadow: 0 0 0 4px var(--carte), 0 0 0 6px var(--vert); } 60% { box-shadow: 0 0 0 4px var(--carte), 0 0 0 16px color-mix(in srgb, var(--vert) 0%, transparent); } 100% { box-shadow: 0 0 0 4px var(--carte), 0 0 0 6px var(--vert); } }
}
.maison-appels { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-bottom: 18px; }
.maison-appels .maison-heros { margin: 0; padding: 20px 22px; align-content: start; }
.maison-appels .maison-heros .parcours-portrait { width: 64px; height: 64px; }
.maison-appels .maison-heros .parcours-prochain-qui { font-size: 21px; }
.maison-appels .parcours-prochain-texte { flex-basis: 220px; }
.semaine-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 0; border-top: 1px solid var(--bord); align-items: baseline; }
.semaine-ligne:first-of-type { border-top: 0; }
.semaine-ligne > b { font-family: var(--police-chiffre); font-weight: 500; font-size: 18px; }
.semaine-ligne > small { grid-column: 1 / -1; }
.maison-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; align-items: start; }
.maison-deux > .carte { margin: 0; }
.maison-semaine h2, .maison-nouveautes h2, .maison-attente h2 { margin: 0 0 10px; font-size: 17px; }
.maison-semaine p { margin: 6px 0 0; }
.maison-objectif { display: flex; gap: 6px; }
.maison-objectif i { flex: 1; max-width: 56px; height: 10px; border-radius: 5px; background: var(--bord); }
.maison-objectif i.fait { background: var(--vert); }
.maison-nouveautes ul, .maison-attente ul, .maison-affaires { list-style: none; margin: 0; padding: 0; display: grid; }
.maison-nouveautes li, .maison-attente li, .maison-affaires li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--bord); }
.maison-nouveautes li:first-child, .maison-attente li:first-child, .maison-affaires li:first-child { border-top: 0; }
.maison-nouveautes li > span:nth-child(2), .maison-attente li > span:first-child, .maison-affaires li > div { flex: 1; min-width: 0; }
.maison-score { font-weight: 600; font-variant-numeric: tabular-nums; }
.maison-attente { margin-bottom: 8px; }
.maison-titre .bouton { width: auto; padding: 8px 14px; }

/* Charte SPARRING.ai : logo, repères de marque, données en JetBrains Mono */
.menu .marque .logo, .logo-connexion img { display: block; }
.menu .marque .logo { width: 26px; height: 26px; }
.logo-connexion img { width: 48px; height: 48px; margin: 0 auto; }
.menu-lien.actif { box-shadow: inset 3px 0 0 var(--marque); }
.lien-bouton, .table-tentatives button { color: var(--marque); }
.parcours-valeur, .sc2-score, .tb-chaleur td, .maison-score, .tb-critere-val, .chiffre { font-family: var(--police-chiffre); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; }

/* Menu en groupes : Accueil | Scénarios, Mes simulations | À écouter, Progression | Équipe ; icônes à bouts carrés (charte) */
.menu-separateur { border: 0; border-top: 1px solid var(--bord); margin: 8px 12px; }
.menu-lien svg { stroke-linecap: square; stroke-linejoin: miter; }

/* Mes simulations : trois façons de créer une simulation ; le vrai appel en avant (Deep Navy, AI Cyan) */
.sim-creer-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0 0 18px; }
.sim-creer { display: flex; flex-direction: column; gap: 10px; min-height: 190px; padding: 22px; border-radius: var(--border-radius-lg);
  border: 1px solid var(--bord); background: var(--carte); color: var(--texte); font: inherit; text-align: left; }
button.sim-creer { cursor: pointer; }
button.sim-creer:hover { border-color: var(--marque); }
.sim-creer-icone svg { width: 26px; height: 26px; fill: none; stroke: var(--marque); stroke-width: 2; stroke-linecap: square; }
.sim-creer-titre { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; }
.sim-creer-texte { font-size: 14px; line-height: 1.5; color: var(--doux); }
.sim-creer-action { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--marque); }
.sim-etiquette { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-doux); color: var(--doux); }
.sim-creer.vedette { background: var(--color-primary-main); border-color: var(--color-primary-main); color: var(--color-bg-light); }
.sim-creer.vedette .sim-creer-texte { color: #c9d2e3; }
.sim-creer.vedette .sim-creer-icone svg { stroke: var(--color-accent-main); }
.sim-creer.vedette .sim-creer-action { color: var(--color-accent-main); }
.sim-creer.vedette .sim-etiquette { background: var(--color-primary-light); color: #c9d2e3; }
button.sim-creer.vedette:hover { border-color: var(--color-accent-main); }
.sim-creer.bientot { border-style: dashed; background: transparent; }

/* Vrai appel : les 4 étapes (enregistrement, vérification, contexte, Scorecard) */
.sim-etapes { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sim-etapes li { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: var(--border-radius-md); font-size: 14px;
  border: 1px solid var(--bord); color: var(--doux); }
.sim-etapes li.fait { background: var(--accent-doux); border-color: transparent; color: var(--texte); }
.sim-etapes li.actif { background: var(--color-primary-main); border-color: var(--color-primary-main); color: var(--color-bg-light); font-weight: 600; }
.sim-etape-num { font-family: var(--police-chiffre); font-size: 13px; }
.sim-verif-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 12px 0; }
.sim-a-verifier { padding: 10px 14px; border-radius: var(--border-radius-md); background: color-mix(in srgb, var(--orange) 12%, transparent); font-size: 14px; }
.bouton.petit { width: auto; padding: 8px 14px; font-size: 14px; }
/* Comité d'achat : portraits dans la salle d'appel (celui qui parle s'éclaire) et sur la fiche */
.salle-comite { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.salle-comite li { display: grid; justify-items: center; gap: 2px; width: 110px; text-align: center; opacity: .55; transition: opacity .2s; }
.salle-comite li.parle { opacity: 1; }
.salle-comite img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--carte), 0 0 0 4px transparent; }
.salle-comite li.parle img { box-shadow: 0 0 0 2px var(--carte), 0 0 0 4px var(--marque); }
.salle-comite small { font-size: 12px; color: var(--doux); line-height: 1.3; }
.fiche-comite { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.fiche-comite li { display: flex; gap: 12px; align-items: flex-start; }
.fiche-comite img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.fiche-comite p { margin: 2px 0 0; }
@media (prefers-reduced-motion: reduce) { .salle-comite li { transition: none; } }
/* Démonstration avec partage d'écran : aperçu de ce qui est partagé et ce que voit l'interlocuteur */
.salle-ecran { display: flex; gap: 14px; align-items: flex-start; width: 100%; max-width: 560px; padding: 10px 14px; border: 1px solid var(--s-filet); border-radius: 10px; font-size: 14px; text-align: left; }
.salle-ecran p { margin: 0 0 4px; }
.ecran-apercu:empty { display: none; }
.ecran-apercu video { width: 160px; height: auto; border-radius: 6px; display: block; background: var(--bord); }
.salle-ecran details { margin: 4px 0; color: var(--doux); }
.salle-ecran summary { cursor: pointer; }
.analyse-en-cours .salle-ecran { display: none; }
@media (max-width: 560px) { .salle-ecran { flex-direction: column; } .ecran-apercu video { width: 100%; } }
/* Comité d'achat dans le formulaire : un bloc par autre membre (nom, poste, profil LinkedIn) */
.membre-comite { border: 1px solid var(--bord); border-radius: var(--border-radius-md, 8px); padding: 12px 16px 14px; margin: 0 0 12px; display: grid; gap: 10px; min-width: 0; }
.membre-comite legend { font-weight: 650; padding: 0 6px; }
.membre-comite legend em { font-weight: 400; font-style: normal; font-size: 13px; color: var(--doux); }
/* Paramètres : confidentialité (engagements) et lignes de réglages séparées */
.engagements { padding: 14px 16px; border-radius: var(--border-radius-md, 8px); background: var(--accent-doux); display: grid; gap: 6px; margin-bottom: 8px; }
.engagements ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.carte > .ligne-parametre + .ligne-parametre { border-top: 1px solid var(--bord); padding-top: 12px; margin-top: 12px; }
.intro-base { margin: 0 0 12px; max-width: 72ch; }
/* Palmarès, vue d'ensemble : chiffres clés, courbe hebdomadaire, prêt par étape, compétences, voix */
.palmares-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 14px; }
.palmares-tuile { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--border-radius-lg, 12px); padding: 14px 16px; display: grid; gap: 2px; }
.palmares-tuile b { font-family: var(--police-chiffre); font-size: 22px; font-weight: 500; white-space: nowrap; }
.palmares-tuile > span:last-child { font-size: 13px; }
.palmares-deux { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.palmares-deux > div { display: grid; gap: 14px; }
.palmares-deux .carte { margin: 0 0 14px; }
.palmares-ligne { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(0, 2fr) auto auto; gap: 10px; align-items: center; font-size: 14px; padding: 4px 0; }
.palmares-barre { position: relative; height: 10px; border-radius: 5px; background: var(--fond); border: 1px solid var(--bord); }
.palmares-barre span { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--color-secondary-main, #00A8B5); }
.palmares-barre i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--texte); }
.palmares-ligne > b { font-family: var(--police-chiffre); font-weight: 500; text-align: right; }
.palmares-bilan { font-size: 18px; line-height: 1.5; margin: 0 0 16px; max-width: 60em; }
.palmares-famille > summary { cursor: pointer; list-style: none; }
.palmares-famille > summary::-webkit-details-marker { display: none; }
.palmares-famille > summary > span:first-child::before { content: "▸ "; color: var(--doux); }
.palmares-famille[open] > summary > span:first-child::before { content: "▾ "; }
.palmares-detail { padding-left: 18px; font-size: 13px; color: var(--doux); }
.palmares-etat { font-family: inherit !important; font-weight: 600 !important; font-size: 13px; color: var(--doux); }
.palmares-etat.pret { color: var(--marque); }
.palmares-courbe { width: 100%; height: auto; }
.palmares-courbe .grille { stroke: var(--bord); stroke-width: 1; }
.palmares-courbe .seuil { stroke: var(--doux); stroke-width: 1; stroke-dasharray: 4 4; }
.palmares-courbe .graduation { fill: var(--doux); font-size: 13px; }
.palmares-courbe .trace { fill: none; stroke: var(--color-secondary-main, #00A8B5); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.palmares-courbe .point { fill: var(--color-secondary-main, #00A8B5); stroke: var(--carte); stroke-width: 2; }
.palmares-courbe .valeur { fill: var(--texte); font-size: 15px; font-weight: 700; }
.palmares-voix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: 13px; }
.palmares-voix b { font-family: var(--police-chiffre); font-size: 20px; font-weight: 500; }
.palmares-voix small { display: block; }
@media (max-width: 760px) { .palmares-deux { grid-template-columns: 1fr; } .palmares-ligne { grid-template-columns: 1fr 1fr auto; } .palmares-ligne > .aide { display: none; } }
.ligne-parametre > div:first-child { flex: 1 1 260px; min-width: 0; }
.ligne-parametre > .bouton { width: auto; flex: none; }

/* Sparring : une carte par entreprise, une ligne par simulation */
.sim-compte-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.sim-compte-tete h2 { margin: 0; font-size: 18px; }
.sim-compte-tete h2 button { font: inherit; color: inherit; text-decoration: none; }
.sim-compte-tete h2 button:hover { text-decoration: underline; }
.sim-suivi { margin-left: auto; font-size: 14px; }
.sim-lignes { list-style: none; margin: 0; padding: 0; }
.sim-ligne { display: grid; grid-template-columns: 96px minmax(0, 1fr) 64px 64px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--bord); }
.sim-etape { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sim-type { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--fond); color: var(--doux); white-space: nowrap; }
.sim-qui { overflow-wrap: anywhere; }
.sim-objectif { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sim-score { justify-self: end; font-weight: 650; text-decoration: none; }
.sim-action { justify-self: end; }
.parcours-prochain-qui small { display: block; }
.parcours-portraits { display: flex; flex: none; }
.parcours-portraits .parcours-portrait + .parcours-portrait { margin-left: -16px; box-shadow: 0 0 0 2px var(--carte); }
.maison-heros .parcours-portraits .parcours-portrait + .parcours-portrait { margin-left: 14px; box-shadow: 0 0 0 4px var(--carte), 0 0 0 6px var(--vert); }
.retour-avancement { position: sticky; top: 0; z-index: 5; padding: 8px 0; background: var(--fond); }
.retour-avancement progress { display: block; width: 100%; height: 8px; accent-color: var(--accent); }
.sc2-retour { margin: 0 0 8px; }
.sim-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.sim-supprimer { font-size: 12px; color: var(--doux); }
.sim-confirmer { color: var(--rouge); font-weight: 600; }
.sim-avis { grid-column: 1 / -1; text-align: right; }
@media (max-width: 600px) {
  .sim-ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .sim-etape { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; }
  .sim-detail { grid-column: 1 / -1; }
  .sim-score { justify-self: start; }
}
.sim-qui .aide { display: inline; margin: 0; }
.sim-objectif.aide { margin: 2px 0 0; }
.sim-compte-tete .aide { margin: 0; }
.sim-etape .aide { margin: 0; }

/* Vue d'appel d'une simulation sur mesure : l'appel à gauche, la préparation à droite, sans le menu */
.appel-plein .menu { display: none; }
main:has(#ecran-salle.actif) { max-width: 1160px; }
.vue-appel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.appel-panneau.appel-vue { margin-bottom: 0; }
#vue-appel-gauche { display: grid; gap: 16px; min-width: 0; }
.aide-direct { margin: 0; display: grid; gap: 10px; }
/* Aide activée : sous l'appel, là où le regard se pose ; la préparation reste à droite */
.vue-appel:has(> #aide-direct:not([hidden])) > #vue-appel-gauche { grid-column: 1; grid-row: 1; }
.vue-appel:has(> #aide-direct:not([hidden])) > .aide-direct { grid-column: 1; grid-row: 2; align-content: start; }
.vue-appel:has(> #aide-direct:not([hidden])) > #ma-preparation { grid-column: 2; grid-row: 1 / span 2; }
.aide-direct-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.aide-direct-tete h3 { margin: 0; font-size: 16px; }
.aide-direct-tete small { color: var(--doux); }
.aide-direct #souffle-attente { margin: 0; font-size: 14px; }
.souffle { display: grid; gap: 8px; }
.souffle-pistes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.souffle-pistes li { padding-left: 10px; border-left: 3px solid var(--marque); font-size: 15px; line-height: 1.35; }
.souffle-pistes small { display: block; font-size: 12px; font-weight: 400; color: var(--doux); }
.souffle-pistes li.question { border-left-color: var(--color-secondary-main, #00A8B5); }
.sc2-plafond { margin: 6px 0; font-size: 14px; color: var(--texte); }
.souffle-tete { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.souffle-tag { padding: 3px 10px; border-radius: 999px; background: var(--accent-doux); font-size: 13px; font-weight: 600; }
.souffle-principal { margin: 0; font-size: 19px; line-height: 1.35; }
.souffle-principal b { color: var(--accent); }
.souffle-principal small, .souffle-pistes small { display: block; font-size: 12px; color: var(--doux); }
.souffle-verbe { font-weight: 700; }
.souffle-autres > summary { cursor: pointer; font-size: 13px; color: var(--accent); font-weight: 600; }
.souffle-autres .souffle-pistes { margin-top: 6px; }
.souffle.passe { opacity: .45; transition: opacity .3s; }
.souffle-avant { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--bord); font-size: 13px; color: var(--doux); }
.souffle-avant ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.souffle.nouveau { animation: souffle-arrive .35s ease-out; }
@keyframes souffle-arrive { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .souffle.nouveau { animation: none; } }
.analyse-en-cours .salle-qui { display: none; }
.salle-qui { display: flex; align-items: center; gap: 10px; text-align: left; }
.salle-qui[hidden] { display: none; }
.salle-qui img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.salle-qui b, .salle-qui small { display: block; }
.salle-qui small { color: var(--doux); font-size: 13px; }
.ma-preparation { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; margin: 0; font-size: 14px; }
.ma-preparation summary { cursor: pointer; font-size: 17px; font-weight: 600; }
.ma-preparation h3 { margin: 14px 0 4px; font-size: 14px; }
.ma-preparation p, .ma-preparation ul { margin: 0; }
.ma-preparation ul { padding-left: 18px; }
.ma-preparation li + li { margin-top: 4px; }
@media (max-width: 820px) {
  .vue-appel, .vue-appel:has(> #aide-direct:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .vue-appel:has(> #aide-direct:not([hidden])) > #vue-appel-gauche { grid-column: 1; grid-row: 1; }
  .vue-appel:has(> #aide-direct:not([hidden])) > #aide-direct { grid-column: 1; grid-row: 2; }
  .vue-appel:has(> #aide-direct:not([hidden])) > #ma-preparation { grid-column: 1; grid-row: 3; }
  .ma-preparation { position: static; max-height: none; }
}
/* Information avant le premier appel (web/app.js, demanderInfoAppel) */
.info-appel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 460px); max-height: 90vh; overflow: auto; background: var(--carte); color: var(--texte); border-radius: 12px; padding: 22px; box-shadow: var(--ombre); z-index: 61; }
.info-appel h2 { font-size: 1.15rem; margin: 0 0 12px; }
.info-appel p { margin: 0 0 10px; line-height: 1.5; }
.info-appel-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.info-appel-actions button { width: auto; margin: 0; padding: 10px 16px; }

/* Sparring : tableau des comptes, une ligne dépliable par compte */
.sim-tableau { padding: 18px 20px; }
.sim-tableau-tete, .sim-compte-ligne > summary { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, .8fr); gap: 12px; align-items: center; }
.sim-tableau-tete { font-size: 12px; font-weight: 600; color: var(--doux); padding: 8px 6px; border-bottom: 1px solid var(--bord); }
.sim-compte-ligne { border-bottom: 1px solid var(--bord); }
.sim-compte-ligne > summary { list-style: none; cursor: pointer; padding: 12px 6px; font-size: 14px; }
.sim-compte-ligne > summary::-webkit-details-marker { display: none; }
.sim-compte-ligne > summary:hover { background: var(--fond); }
.sim-c-compte b::before { content: "▸ "; color: var(--doux); font-weight: 400; }
.sim-compte-ligne[open] .sim-c-compte b::before { content: "▾ "; }
.sim-c-note { font-family: var(--police-chiffre); }
.sim-c-note .hausse { color: var(--vert); } .sim-c-note .baisse { color: var(--rouge); }
.sim-c-etat { font-size: 13px; }
.sim-c-etat.etat-reussie, .sim-c-etat.etat-signee { color: var(--vert); }
.sim-c-etat.etat-a-rejouer, .sim-c-etat.etat-a-reparer { color: var(--rouge); }
.sim-compte-detail { padding: 4px 6px 16px 22px; display: grid; gap: 10px; justify-items: start; }
@media (max-width: 760px) {
  .sim-tableau-tete { display: none; }
  .sim-compte-ligne > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .sim-compte-ligne > summary > span:nth-child(2), .sim-compte-ligne > summary > span:nth-child(6) { display: none; }
}

/* Réglages › Base de connaissances : sommaire à gauche, une rubrique à la fois */
.base-mise-en-page { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.base-sommaire { display: grid; gap: 4px; position: sticky; top: 16px; }
.base-sommaire button { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--texte); font: inherit; font-size: 14px; cursor: pointer; }
.base-sommaire button:hover { background: var(--fond); }
.base-sommaire button[aria-current="true"] { background: var(--fond); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.base-etat { font-size: 12px; font-weight: 500; }
.base-etat.ok { color: var(--vert); } .base-etat.attention { color: var(--rouge); }
.base-panneaux > * { margin-top: 0; }
@media (max-width: 760px) { .base-mise-en-page { grid-template-columns: 1fr; } .base-sommaire { position: static; grid-auto-flow: column; overflow-x: auto; } }