/* ==========================================================================
   Itera Radar · écran « Prospection » (radar.js)
   Charte « Pas à pas » : les composants viennent d'assets/design.css (boutons, champs, cases, segments,
   onglets, cartes, lignes it-prospect, messages, barre d'action…). Cette feuille ne garde que la mise en
   page propre à la prospection, avec les jetons --it-* de la charte (docs/DESIGN.md § 5.15, § 10 à 13).
   Elle se charge avant design.css : ses règles sont précisées par .radar-* ou #radar quand elles complètent
   un composant, et ne redéfinissent ni couleur ni taille hors des jetons.
   ========================================================================== */

/* ── Conteneur : masqué hors de l'écran Prospection ── */
#radar { display: none; }
#radar[data-visible="1"] { display: block; }

/* Base minimale, sans spécificité (la page n'a pas toujours body.it-app pendant la migration) */
:where(#radar) { color: var(--it-texte, #1E254F); font-family: var(--it-police, "DM Sans", system-ui, sans-serif); font-size: var(--it-taille-m, 18px); line-height: var(--it-interligne, 1.55); }
:where(#radar) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(#radar) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, fieldset, figure) { margin: 0; }
:where(#radar) :where(ul, ol) { padding: 0; }
:where(#radar) :where(fieldset) { border: 0; padding: 0; min-width: 0; }
:where(#radar) :where(legend) { padding: 0; }
:where(#radar) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(#radar) :where(a) { color: var(--it-marine, #1E254F); }
:where(#radar) :where(:focus-visible) { outline: 3px solid var(--it-marine, #1E254F); outline-offset: 3px; }
:where(#radar) [hidden] { display: none !important; }
#radar .it-titre-page:focus { outline: none; }

/* ── En-tête de l'écran et messages ── */
.radar-tete__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--it-e-2) var(--it-e-4); }
.radar-tete .it-intro { max-width: 62ch; }
.radar-actualiser { flex: none; margin-right: calc(-1 * var(--it-e-3)); }
.radar-messages { display: grid; gap: var(--it-e-3); margin-bottom: var(--it-e-5); }
.radar-messages:not(:has(> :not([hidden]))) { display: none; }
.radar-chargement { display: flex; align-items: center; gap: var(--it-e-3); color: var(--it-texte-2); font-weight: 600; min-height: var(--it-cible); }
#radar .it-message .it-bouton--petit { min-height: var(--it-cible); }
.radar-detail__corps { display: grid; gap: var(--it-e-1); padding: var(--it-e-2) 0 var(--it-e-1); overflow-wrap: anywhere; }

/* ── Onglets ── */
.radar-onglets { margin-bottom: var(--it-e-6); }
.radar-onglets .it-onglet { min-height: var(--it-cible-bouton); }

/* ── Cette semaine : contexte, liste et fiche ── */
.radar-volet { display: grid; gap: var(--it-e-6); align-content: start; }
.radar-contexte { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--it-e-1) var(--it-e-5); }
.radar-contexte p:first-child { max-width: 62ch; }
.radar-intro { max-width: 62ch; }
.radar-liste { list-style: none; display: grid; gap: var(--it-e-3); }
.radar-liste__element { display: grid; gap: var(--it-e-3); min-width: 0; }
.radar-pastilles { display: flex; flex-wrap: wrap; gap: var(--it-e-2); margin-top: var(--it-e-1); }
.radar-liste .it-pastille, .radar-afaire .it-pastille { white-space: normal; }
.it-prospect__nom, .it-prospect__meta { overflow-wrap: anywhere; }
.radar-chevron { color: var(--it-marine); transition: transform var(--it-duree); }
.it-prospect[aria-expanded="true"] .radar-chevron { transform: rotate(180deg); }
.radar-anciens { display: grid; gap: var(--it-e-3); margin-top: var(--it-e-5); }
.radar-maitre__liste { display: grid; gap: var(--it-e-3); align-content: start; min-width: 0; }
.radar-semaines, .radar-retour { margin: 0; }
.radar-semaines .it-lien, .radar-retour .it-lien { display: inline-flex; align-items: center; gap: var(--it-e-2); min-height: var(--it-cible); }

/* Fiche d'un prospect */
.radar-fiche { display: grid; gap: var(--it-e-5); align-content: start; min-width: 0; overflow-wrap: anywhere; }
.radar-fiche__tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--it-e-2) var(--it-e-4); }
.radar-fiche__nom { font-family: var(--it-police-titre); font-weight: 600; font-size: var(--it-taille-xl); line-height: 1.25; color: var(--it-marine); min-width: 0; }
.radar-fiche__qui { display: grid; gap: var(--it-e-1); }
.radar-fiche__dirigeant { font-weight: 700; }
.radar-angle { margin: 0; }
.radar-appel { display: grid; gap: var(--it-e-2); }
.radar-appel .it-bouton { flex-wrap: nowrap; padding-inline: var(--it-e-4); }
.radar-appel .it-bouton > span { display: inline-flex; flex-wrap: wrap; justify-content: center; column-gap: .3em; min-width: 0; }
.radar-bloc { display: grid; gap: var(--it-e-3); }
.radar-bloc__titre { font-size: var(--it-taille-l); font-weight: 700; line-height: 1.3; color: var(--it-marine); }
.radar-depliant > summary > span { flex: 1; min-width: 0; }
.radar-script p + p { margin-top: var(--it-e-3); }
.radar-qualif .it-choix { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.radar-qualif__formulaire { padding: var(--it-e-4); border-radius: var(--it-rayon-bouton); background: var(--it-creme); border: 1px solid var(--it-trait); }
.radar-dernier { margin: 0; }
.radar-dossier { display: grid; gap: var(--it-e-2); justify-items: start; }
#radar .it-champ__erreur:empty { display: none; }
.radar-suivi .it-champ + .it-champ { margin-top: var(--it-e-2); }
.radar-pa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--it-e-3); }
.radar-date { max-width: 240px; }
.radar-raccourcis { --it-groupe: var(--it-e-2); }
.radar-note { min-height: 120px; }
.radar-mail { display: grid; gap: var(--it-e-3); }
.radar-mail__objet { display: grid; gap: 2px; font-weight: 700; }
.radar-mail__texte { white-space: pre-wrap; background: var(--it-creme-2); border-radius: var(--it-rayon-bouton); padding: var(--it-e-4); font-size: var(--it-taille-m); }
.radar-faits dd .it-bouton { vertical-align: middle; }
.radar-faits a.it-lien { display: inline-flex; align-items: center; gap: var(--it-e-2); min-height: var(--it-cible); }
.radar-interet { display: inline-flex; align-items: center; gap: var(--it-e-3); }
.radar-interet .it-progression { width: 120px; }
@media (max-width: 599.98px) {
  #radar .radar-faits { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .radar-faits dd { margin-bottom: var(--it-e-2); }
}

/* ── Semaines précédentes ── */
.it-carte.radar-envoi { padding: 0; }
.radar-envoi__tete {
  display: flex; align-items: center; gap: var(--it-e-3); width: 100%; min-height: 72px; padding: var(--it-e-3) var(--it-e-5);
  border: 0; border-radius: var(--it-rayon-carte); background: none; text-align: left; cursor: pointer;
}
.radar-envoi__tete:hover { background: var(--it-creme); }
.radar-envoi__texte { flex: 1; min-width: 0; display: grid; gap: 2px; }
.radar-envoi__date { font-weight: 700; color: var(--it-marine); }
.radar-envoi__tete[aria-expanded="true"] .radar-chevron { transform: rotate(180deg); }
.radar-envoi__corps { padding: 0 var(--it-e-5) var(--it-e-5); }

/* ── À faire ── */
.radar-afaire .it-liste { margin-top: var(--it-e-1); }
.radar-afaire .it-ligne__titre { overflow-wrap: anywhere; }

/* ── Mes prospects : filtres, liste, pages ── */
.radar-prospects { display: grid; gap: var(--it-e-5); }
/* Recherche sur toute la largeur, puis les quatre listes : 1 colonne (téléphone), 2 (iPad portrait), 4 (paysage) */
.radar-filtres { display: grid; gap: var(--it-e-4); grid-template-columns: minmax(0, 1fr); align-items: end; }
.radar-filtres > :first-child { grid-column: 1 / -1; }
@media (min-width: 600px) { .radar-filtres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .radar-filtres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.radar-effacer { margin-top: calc(-1 * var(--it-e-2)); }
.radar-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--it-e-3); }
.radar-pages__texte { font-weight: 600; color: var(--it-texte-2); }

/* ── Mes critères ── */
.radar-criteres { display: grid; gap: var(--it-e-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.radar-criteres__intro .it-intro { max-width: 62ch; }
.radar-reglage__titre { margin-bottom: var(--it-e-4); }
#radar .radar-cases { --it-grille-min: 280px; gap: var(--it-e-3); }
.radar-exclus { margin: 0; }
.radar-signaux { display: grid; gap: var(--it-e-4); }
.radar-signal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--it-e-2) var(--it-e-5); }
.radar-signal__texte { display: grid; gap: 2px; flex: 1 1 240px; min-width: 0; }
.radar-signal__nom { font-weight: 700; }
.radar-segments { flex: 0 1 auto; }
#radar .radar-ordre .it-case { min-width: 0; }
#radar .radar-ordre .it-case__titre { overflow-wrap: anywhere; }
@media (max-width: 599.98px) {
  #radar .radar-ordre .it-case { padding: 12px; gap: var(--it-e-3); }
  #radar .radar-ordre .it-case.est-coche, #radar .radar-ordre .it-case:has(input:checked) { padding: 11.5px; }
}
.radar-criteres__fin:empty { display: none; }
.radar-recap .it-puces { margin-top: var(--it-e-2); }
.radar-barre { --it-barre-largeur: var(--it-l-large); }
@media (max-width: 599.98px) {
  #radar .radar-segments { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  #radar .radar-segments label { padding: 0 8px; }
}
/* Paysage et ordinateur : « Ce que l'agent a appris » dans une colonne à droite, collante */
@media (min-width: 1100px) {
  .radar-criteres--appris { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "intro appris" "formulaire appris"; }
  .radar-criteres--appris .radar-criteres__intro { grid-area: intro; }
  .radar-criteres--appris .radar-criteres__formulaire { grid-area: formulaire; }
  .radar-criteres--appris .radar-criteres__appris { grid-area: appris; align-self: start; position: sticky; top: calc(var(--it-h-entete) + var(--it-e-5)); }
}

/* ── Fiche à droite de la liste (dès 1100 px) : la fiche défile seule ── */
@media (min-width: 1100px) {
  .radar-maitre__fiche > .radar-fiche { border-radius: var(--it-rayon-carte); }
}

/* ── Ligne ou fiche amenée à l'écran (« Voir la fiche », retour sur une fiche) : jamais sous l'en-tête collant,
   ni sous le bandeau d'enregistrement quand un enregistrement tourne ── */
#radar .it-prospect, #radar [id^="fiche-"] { scroll-margin-top: calc(var(--it-h-entete) + var(--it-e-4)); }
body:has(#bandeauRec:not([hidden])) #radar .it-prospect, body:has(#bandeauRec:not([hidden])) #radar [id^="fiche-"] { scroll-margin-top: calc(var(--it-h-entete) + var(--haut-bandeau, 64px) + var(--it-e-4)); }

/* ── Moins d'animations ── */
@media (prefers-reduced-motion: reduce) {
  .radar-chevron { transition: none; }
}

/* ---------- Épuration : encart de l'assistant, « Ressemble à vos clients », fiche repliée ---------- */
/* « Votre assistant de prospection » : 3 lignes au plus, repliable (« J'ai compris », choix mémorisé) */
.radar-assistant { border-left: 4px solid var(--it-or); background: var(--it-blanc); border-radius: 0 var(--it-rayon-bouton) var(--it-rayon-bouton) 0; max-width: 72ch; }
.radar-assistant > summary { display: flex; align-items: center; gap: var(--it-e-3); min-height: 48px; padding: 0 var(--it-e-4); cursor: pointer; list-style: none;
  font-weight: 700; color: var(--it-marine); font-size: var(--it-taille-m); }
.radar-assistant > summary::-webkit-details-marker { display: none; }
.radar-assistant > summary > .radar-chevron { margin-left: auto; }
.radar-assistant[open] > summary > .radar-chevron { transform: rotate(180deg); }
.radar-assistant > summary:focus-visible { outline: 3px solid var(--it-marine); outline-offset: 2px; }
.radar-assistant__corps { display: grid; gap: var(--it-e-2); padding: 0 var(--it-e-4) var(--it-e-4); }
.radar-assistant__profil { color: var(--it-texte-2); font-style: italic; }
/* Première raison « Ressemble à vos clients… » : en tête de fiche, bien visible */
.radar-ressemble { display: flex; gap: var(--it-e-2); align-items: flex-start; margin: 0; font-weight: 600; color: var(--it-vert); }
.radar-ressemble > .it-icone { flex: none; margin-top: 2px; }