/* InfoPrime — distribution de leads. Reprend les jetons du systeme visuel
   quand il est charge, avec des valeurs de repli pour l'administration. */

/*
 * PALETTE — remappee sur le systeme visuel 2026.
 *
 * Ces variables pointaient vers l'ancienne charte : --ip-marine,
 * --ip-azur, --ip-trait. Aucune n'existe plus dans le theme 2026, et
 * toutes retombaient donc sur leurs valeurs de repli — un bleu marine
 * et un azur qui n'appartiennent plus au site.
 *
 * Les noms sont conserves pour ne pas reecrire 600 lignes de regles,
 * mais chacun pointe desormais vers le bon jeton :
 *   marine  → encre     (etats selectionnes, titres)
 *   azur    → signal    (liens, actions)
 *   grenat  → alerte
 */
.ipl, .ipl-espace {
  --ipl-marine: var(--ip-encre,    #121417);
  --ipl-azur:   var(--ip-signal,   #0C6B45);
  --ipl-vert:   var(--ip-signal,   #0C6B45);
  --ipl-grenat: var(--ip-alerte,   #A5301F);
  --ipl-trait:  var(--ip-filet,    #DEDAD1);
  --ipl-brume:  var(--ip-papier,   #F2F0EB);
  --ipl-douce:  var(--ip-texte-2,  #5A6068);
}

.ipl-discret { color: var(--ipl-douce); font-size: 12px; }

.ipl-filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.ipl-filtres input, .ipl-filtres select { min-height: 32px; }

.ipl-colonnes { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
@media (min-width: 1100px) { .ipl-colonnes { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); } }

.ipl-panneau { background: #fff; border: 1px solid var(--ipl-trait); border-radius: 8px; padding: 18px 20px; }
.ipl-panneau h2 { margin-top: 0; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--ipl-douce); }
.ipl-panneau h2 + p, .ipl-panneau h2 + table { margin-top: 8px; }
.ipl-panneau h3 { font-size: 14px; margin: 22px 0 8px; }

.ipl-nom { font-size: 22px; font-weight: 700; color: var(--ipl-marine); margin: 4px 0 12px; }

.ipl-fiche {
  width: 100%;
  table-layout: fixed;   /* sans quoi le contenu decide de la largeur, pas les regles CSS */
  border-collapse: collapse;
}
.ipl-fiche th { text-align: left; font-weight: 400; color: var(--ipl-douce); font-size: 13px;
                padding: 7px 12px 7px 0; width: 38%; vertical-align: top; border-bottom: 1px solid #EDF0F3; }
.ipl-fiche td {
  padding: 7px 0;
  font-size: 14px;
  border-bottom: 1px solid #EDF0F3;
  overflow-wrap: break-word;   /* utile a toute largeur, pas seulement sur mobile */
}
.ipl-fiche--tableau th { width: auto; font-weight: 600; }

/* ---- Pastilles de statut : la couleur encode l'avancement ---- */
.ipl-pastille { display: inline-block; padding: 2px 9px; border-radius: 999px;
                font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.ipl-pastille--attente, .ipl-pastille--envoye { background: #FFF3E0; color: #8A5A00; }
.ipl-pastille--vu        { background: #EDF2F7; color: var(--ipl-marine); }
.ipl-pastille--contacte,
.ipl-pastille--rdv       { background: #E6F0F9; color: var(--ipl-azur); }
.ipl-pastille--ok,
.ipl-pastille--gagne     { background: #E7F4EF; color: var(--ipl-vert); }
.ipl-pastille--refus,
.ipl-pastille--perdu,
.ipl-pastille--injoignable { background: #FBEDEF; color: var(--ipl-grenat); }

.ipl-choix { border: 1px solid var(--ipl-trait); border-radius: 6px; max-height: 260px; overflow-y: auto; }
.ipl-choix__ligne { display: flex; gap: 10px; align-items: flex-start;
                    padding: 9px 12px; border-bottom: 1px solid #EDF0F3; cursor: pointer; }
.ipl-choix__ligne:last-child { border-bottom: 0; }
.ipl-choix__ligne:hover { background: var(--ipl-brume); }

.ipl-pagination { margin-top: 14px; display: flex; gap: 8px; }

/* =========================================================================
   ESPACE AGENCE (façade)
   ========================================================================= */

.ipl-espace { max-width: 1080px; margin-inline: auto; padding: 2rem 1rem 4rem; }
.ipl-espace--vide { max-width: 32rem; }

.ipl-espace__tete { display: flex; flex-wrap: wrap; gap: 1rem;
                    justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.ipl-espace__tete h2 { margin: 0; }

.ipl-onglets { display: flex; flex-wrap: wrap; gap: 4px;
               border-bottom: 1px solid var(--ipl-trait); margin-bottom: 1.5rem; }
.ipl-onglet { padding: 10px 16px; font-size: 14px; font-weight: 600;
              color: var(--ipl-douce); text-decoration: none; border-bottom: 2px solid transparent; }
.ipl-onglet:hover { color: var(--ipl-marine); }
.ipl-onglet--actif { color: var(--ipl-marine); border-bottom-color: var(--ipl-marine); }

.ipl-espace__grille { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ipl-espace__grille { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); align-items: start; } }

/* Le numero de mobile est l'element le plus important de la page */
.ipl-contact-fort { margin: 0 0 1rem; }
.ipl-contact-fort a { font-size: 1.75rem; font-weight: 700; color: var(--ipl-azur);
                      text-decoration: none; font-variant-numeric: tabular-nums; }
.ipl-contact-fort a:hover { text-decoration: underline; }

.ipl-comptes { border: 1px solid var(--ipl-trait); border-radius: 6px; padding: 12px 14px; margin: 14px 0; }
.ipl-comptes legend { font-size: 12px; font-weight: 600; text-transform: uppercase;
                      letter-spacing: .05em; color: var(--ipl-douce); padding: 0 6px; }
.ipl-comptes ul { margin: 0 0 10px; padding-left: 18px; }
.ipl-comptes li { font-size: 13px; margin-bottom: 4px; }

/* =========================================================================
   CONNEXION
   ========================================================================= */

.ipl-espace--connexion { display: flex; justify-content: center; padding-top: 3rem; }
.ipl-connexion { width: 100%; max-width: 24rem; background: #fff; border: 1px solid var(--ipl-trait);
                 border-radius: 10px; padding: 2rem; }
.ipl-connexion h2 { margin-top: 0; }

.ipl-erreur { background: #FBEDEF; color: var(--ipl-grenat); border-radius: 6px;
              padding: 10px 14px; font-size: 13px; margin: 12px 0; }
.ipl-info   { background: #E7F4EF; color: var(--ipl-vert);   border-radius: 6px;
              padding: 10px 14px; font-size: 13px; margin: 12px 0; }

/* =========================================================================
   ONGLETS SECONDAIRES (statuts, dans la liste)
   ========================================================================= */

.ipl-onglets--secondaire { border-bottom: 0; margin-bottom: 1rem; gap: 6px; }
.ipl-onglets--secondaire .ipl-onglet { padding: 6px 12px; font-size: 13px; border: 1px solid var(--ipl-trait);
                                        border-radius: 999px; border-bottom: 1px solid var(--ipl-trait); }
.ipl-onglets--secondaire .ipl-onglet--actif { background: var(--ipl-marine); color: #fff; border-color: var(--ipl-marine); }

/* =========================================================================
   STATISTIQUES — reprend le langage visuel de la jauge d'économie du site
   ========================================================================= */

.ipl-stat-bloc { background: #fff; border: 1px solid var(--ipl-trait); border-radius: 8px;
                 padding: 18px 20px; margin-bottom: 14px; }
.ipl-stat-bloc h4 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase;
                     letter-spacing: .05em; color: var(--ipl-douce); }

.ipl-stat-chiffres { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 12px; }
.ipl-stat-item { display: flex; flex-direction: column; }
.ipl-stat-valeur { font-size: 22px; font-weight: 700; color: var(--ipl-marine); font-variant-numeric: tabular-nums; }
.ipl-stat-label { font-size: 11px; color: var(--ipl-douce); text-transform: uppercase; letter-spacing: .04em; }

.ipl-barre { height: 6px; background: var(--ipl-brume); border-radius: 3px; overflow: hidden; }
.ipl-barre__remplissage { display: block; height: 100%; background: var(--ipl-vert); border-radius: 3px; }

/* =========================================================================
   ÉQUIPE
   ========================================================================= */

.ipl-comptes { border: 1px solid var(--ipl-trait); border-radius: 6px; padding: 12px 14px; margin: 14px 0; }
.ipl-comptes legend { font-size: 12px; font-weight: 600; text-transform: uppercase;
                      letter-spacing: .05em; color: var(--ipl-douce); padding: 0 6px; }

/* =========================================================================
   MOBILE
   ========================================================================= */

/* Tables larges : defilement horizontal plutot qu'un debordement casse.
   Applique en enveloppant chaque <table> avec <div class="ipl-scroll">. */
.ipl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ipl-scroll table { min-width: 560px; }

@media (max-width: 640px) {

  .ipl-espace { padding: 1.25rem 0.9rem 3rem; }

  .ipl-espace--connexion { padding-top: 1.5rem; }
  .ipl-connexion { padding: 1.5rem 1.25rem; }

  .ipl-espace__tete { gap: 0.6rem; }
  .ipl-espace__tete h2 { font-size: 1.2rem; }

  /*
   * Onglets : bande qui defile horizontalement au lieu de s'empiler sur
   * plusieurs lignes. Sept pastilles de statut cote a cote ne tiennent
   * jamais sur 360px de large — les entasser les rend illisibles, alors
   * qu'un simple defilement au doigt reste un geste naturel.
   */
  .ipl-onglets,
  .ipl-onglets--secondaire {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -0.9rem;
    padding-inline: 0.9rem;
    padding-bottom: 4px;
  }
  .ipl-onglets::-webkit-scrollbar,
  .ipl-onglets--secondaire::-webkit-scrollbar { display: none; }
  .ipl-onglet { white-space: nowrap; flex: 0 0 auto; }

  /*
   * Indice visuel qu'il y a d'autres onglets hors ecran : sans lui, une
   * coupure nette en bord d'ecran ressemble a un bug plutot qu'a une
   * invitation a faire glisser le doigt.
   *
   * mask-image plutot que sticky+largeur nulle (technique precedente,
   * peu fiable dans un conteneur flex en defilement) : le degrade est
   * applique directement sur le conteneur, ce qui fonctionne de facon
   * previsible sur tous les navigateurs modernes.
   */
  .ipl-onglets,
  .ipl-onglets--secondaire {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  }

  .ipl-contact-fort a { font-size: 1.4rem; }

  .ipl-fiche th { width: 36%; padding-right: 8px; }

  /* Filtres : une colonne pleine largeur plutot que des champs ecrases */
  .ipl-filtres { flex-direction: column; align-items: stretch; }
  .ipl-filtres input,
  .ipl-filtres select { width: 100%; }
  .ipl-filtres label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
  .ipl-filtres button,
  .ipl-filtres a.button { width: 100%; text-align: center; }

  .ipl-stat-chiffres { gap: 16px; }
  .ipl-stat-valeur { font-size: 19px; }
}

/* =========================================================================
   HIÉRARCHIE — options indentées (chef de vente > ses collaborateurs)
   ========================================================================= */
select option { padding: 4px 0; }

/* =========================================================================
   CATALOGUE
   ========================================================================= */

.ipl-solde {
  background: var(--ipl-marine);
  color: #fff;
  border-radius: 10px;
  padding: 18px 20px;
}
.ipl-solde .ip-etiquette { color: rgba(255,255,255,.72); }
.ipl-solde__montant {
  display: block;
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 8px;
}
.ipl-solde .ip-note { color: rgba(255,255,255,.75); }

.ipl-prix {
  font-size: 15px;
  font-weight: 700;
  color: var(--ipl-marine);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   ESPACEMENT DE SECOURS
   Tout bouton place directement apres un select ou un <p> sans marge
   explicite se retrouve colle au champ au-dessus. Plutot que de traquer
   chaque cas un par un, une regle generale couvre les deux motifs reels
   trouves dans le plugin (select+bouton, paragraphe+bouton) et protege
   contre le meme oubli a l'avenir.
   ========================================================================= */

.ipl-espace form > .ip-btn,
.ipl-espace form select + .ip-btn,
.ipl-espace form p + .ip-btn {
  margin-top: var(--ip-e4, 1rem);
}

/* =========================================================================
   CATALOGUE — tableau triable (remplace les cartes, trop volumineuses
   des qu'il y a plus de quelques leads disponibles)
   ========================================================================= */

.ipl-catalogue-filtres {
  display: flex; align-items: flex-start; gap: var(--ip-e5, 1.5rem);
  margin: 1rem 0; flex-wrap: wrap;
}
.ipl-filtre-groupe { display: flex; flex-direction: column; gap: 6px; }

.ipl-cases-canton { display: flex; flex-wrap: wrap; gap: 4px; max-width: 22rem; }
.ipl-case-canton {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border: 1px solid var(--ipl-trait, #E2E7EC); border-radius: 999px;
  font-size: 0.8rem; cursor: pointer; user-select: none;
  background: #fff; transition: background-color .12s ease, border-color .12s ease;
}
.ipl-case-canton input { margin: 0; }
.ipl-case-canton:has(input:checked) {
  background: var(--ipl-marine, #103A5C); border-color: var(--ipl-marine, #103A5C); color: #fff;
}

.ipl-catalogue-filtres select { min-height: 40px; width: auto; }

.ipl-catalogue-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ipl-catalogue-table th, .ipl-catalogue-table td { padding: 10px 12px; text-align: left; white-space: nowrap; }
.ipl-catalogue-table thead th {
  border-bottom: 2px solid var(--ipl-marine, #103A5C);
  font-weight: 600; cursor: pointer; user-select: none;
  color: var(--ipl-marine, #103A5C);
}
.ipl-catalogue-table thead th:hover { background: var(--ipl-brume, #F6F8FA); }
.ipl-catalogue-table thead th::after { content: '↕'; opacity: .35; margin-left: 4px; font-size: .8em; }
.ipl-catalogue-table thead th.ipl-tri-asc::after  { content: '↑'; opacity: 1; }
.ipl-catalogue-table thead th.ipl-tri-desc::after { content: '↓'; opacity: 1; }
.ipl-catalogue-table tbody tr { border-bottom: 1px solid var(--ipl-trait, #E2E7EC); }
.ipl-catalogue-table tbody tr:hover { background: var(--ipl-brume, #F6F8FA); }
.ipl-catalogue-table tbody tr.ipl-ligne-cachee { display: none; }
.ipl-catalogue-table .ipl-prix { font-weight: 700; color: var(--ipl-marine, #103A5C); }

/* =========================================================================
   RÉCLAMATION (espace agence)
   ========================================================================= */

.ipl-reclamation {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ipl-trait, #E2E7EC);
}
.ipl-reclamation h3 { margin-bottom: 6px; }

/* =========================================================================
   BLOC DE MODIFICATION (wp-admin, détail d'une demande)
   ========================================================================= */

.ipl-modifier {
  margin-top: 16px;
  border: 1px solid var(--ipl-trait);
  border-radius: 6px;
  padding: 10px 14px;
}
.ipl-modifier summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ipl-azur);
  padding: 4px 0;
}
.ipl-modifier[open] summary { margin-bottom: 8px; }

/* =========================================================================
   COLONNE ŒIL — action "voir" toujours visible en tout début de ligne,
   jamais poussée hors champ par un tableau trop large.
   ========================================================================= */

.ipl-colonne-oeil { width: 34px; text-align: center; padding-left: 8px !important; padding-right: 0 !important; }
.ipl-lien-oeil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  color: var(--ipl-douce, #5B6771); text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.ipl-lien-oeil:hover { background: var(--ipl-brume, #F6F8FA); color: var(--ipl-azur, #155E96); }

/* Version condensee du tableau catalogue/liste : cellules plus serrees,
   texte legerement plus petit, pour degager de la place sans rien cacher. */
.ipl-catalogue-table--condensee th,
.ipl-catalogue-table--condensee td { padding: 7px 10px; font-size: 0.85rem; }

/* =========================================================================
   TABLEAU DES DEMANDES (wp-admin) — la classe "fixed" de WordPress impose
   table-layout: fixed, qui repartit l'espace selon les largeurs declarees.
   Sur mobile, les colonnes a largeur fixe (case a cocher, oeil, #, dates...)
   depassent deja la largeur de l'ecran a elles seules : il ne reste rien
   pour les colonnes sans largeur (Contact, Localite, Assureur), qui
   s'ecrasent alors caractere par caractere plutot que de simplement
   depasser et defiler. On revient a table-layout: auto, qui laisse
   chaque colonne prendre sa largeur naturelle — la table devient plus
   large que l'ecran, et .ipl-scroll s'occupe du reste, comme prevu.
   ========================================================================= */

.ipl-table { table-layout: auto !important; }
.ipl-table td, .ipl-table th { white-space: nowrap; }

/* =========================================================================
   DENSITÉ — l'espace agence est un outil professionnel qu'une équipe
   utilise chaque jour, pas une page vitrine qu'on visite une fois. Il
   n'hérite plus l'échelle typographique généreuse du site public
   (titres en serif, corps à 17px, boutons à 48px) : une échelle propre,
   plus resserrée, pensée pour des tableaux et des formulaires denses.
   ========================================================================= */

.ip.ipl-espace {
  font-size: 0.875rem; /* 14px, contre 17px hérité du site public */
}

.ip.ipl-espace h1,
.ip.ipl-espace h2,
.ip.ipl-espace h3 {
  font-family: var(--ip-texte); /* Inter, pas la serif éditoriale */
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ip.ipl-espace .ipl-espace__tete h2 { font-size: 1.25rem; }
.ip.ipl-espace h2 { font-size: 1.125rem; margin: 0 0 0.65rem; }
.ip.ipl-espace h3 { font-size: 0.9375rem; margin: 1.1rem 0 0.5rem; }

.ip.ipl-espace .ip-panneau { padding: 1.1rem 1.25rem; }
.ip.ipl-espace .ip-note { font-size: 0.8125rem; }
.ip.ipl-espace .ip-label { font-size: 0.8125rem; font-weight: 600; margin-bottom: 4px; display: inline-block; }
.ip.ipl-espace p { margin: 0 0 0.85rem; }

.ip.ipl-espace .ipl-fiche th,
.ip.ipl-espace .ipl-fiche td,
.ip.ipl-espace .ipl-catalogue-table th,
.ip.ipl-espace .ipl-catalogue-table td { font-size: 0.8125rem; }

/* Cibles tactiles genereuses conservees sur mobile ; compactees a partir
   du gabarit ou une souris, pas un pouce, pilote l'interface. */
@media (min-width: 641px) {
  .ip.ipl-espace .ip-btn { min-height: 38px; padding: 0 1.1rem; font-size: 0.8125rem; }
  .ip.ipl-espace .ip-champ,
  .ip.ipl-espace input.ip-champ,
  .ip.ipl-espace select.ip-champ,
  .ip.ipl-espace textarea.ip-champ { min-height: 38px; padding: 7px 12px; font-size: 0.8125rem; }
  .ip.ipl-espace textarea.ip-champ { min-height: auto; }
}

.ip.ipl-espace .ipl-solde__montant { font-size: 1.5rem; }
.ip.ipl-espace .ipl-stat-valeur { font-size: 1.125rem; }

/* =========================================================================
   MENUS DÉROULANTS DES FILTRES
   ========================================================================= */

.ipl-menu-filtre { position: relative; }

.ipl-menu-filtre > summary {
  cursor: pointer;
  list-style: none;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--ip-surface, #fff);
  border: 1px solid var(--ip-filet, #DEDAD1);
  border-radius: var(--ip-rayon, 3px);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
}
.ipl-menu-filtre > summary::-webkit-details-marker { display: none; }
.ipl-menu-filtre > summary::after { content: '▾'; flex: none; color: var(--ip-texte-3, #6B7079); }
.ipl-menu-filtre[open] > summary::after { content: '▴'; }

/* Un filtre actif doit se voir : sinon on oublie qu'il masque des leads. */
.ipl-menu-filtre--actif > summary {
  border-color: var(--ip-signal, #0C6B45);
  color: var(--ip-signal, #0C6B45);
  font-weight: 600;
}

.ipl-menu-filtre__liste {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  min-width: 260px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  background: var(--ip-surface, #fff);
  border: 1px solid var(--ip-filet, #DEDAD1);
  border-radius: var(--ip-rayon, 3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.ipl-menu-filtre__liste label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 2px;
}
.ipl-menu-filtre__liste label:hover { background: var(--ip-papier, #F2F0EB); }
.ipl-menu-filtre__liste label span:first-of-type { flex: 1; }

.ipl-menu-filtre__code {
  font-family: var(--ip-mono, monospace);
  font-size: 11px;
  color: var(--ip-texte-4, #9AA0A8);
}

/* Grisé, pas masqué : « aucun lead vaudois aujourd'hui » est une
   information, une entrée absente ressemble à un bug. */
.ipl-menu-filtre__absent { opacity: 0.45; }

.ipl-menu-filtre__vider {
  width: 100%;
  padding: 6px;
  margin-bottom: 6px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ip-filet, #DEDAD1);
  font-family: var(--ip-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ip-texte-3, #6B7079);
  cursor: pointer;
  text-align: left;
}
.ipl-menu-filtre__vider:hover { color: var(--ip-alerte, #A5301F); }

@media (max-width: 700px) {
  .ipl-menu-filtre__liste { min-width: 0; width: 100%; }
}

/* Nombre de leads disponibles, à droite de chaque entrée. */
.ipl-menu-filtre__compte {
  flex: none;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ip-signal-clair, #E4EFE9);
  color: var(--ip-signal, #0C6B45);
  font-family: var(--ip-mono, monospace);
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
}

/* À zéro, la pastille s'efface : le grisement suffit, un « 0 » vert
   attirerait l'œil sur ce qui n'existe pas. */
.ipl-menu-filtre__absent .ipl-menu-filtre__compte {
  background: none;
  color: var(--ip-texte-4, #9AA0A8);
  font-weight: 400;
}

/* Une entrée sans lead n'est pas cochable : cocher « Uri » quand il n'y
   a aucun lead uranais ne ferait que masquer la liste entière. */
.ipl-menu-filtre__absent { cursor: default; }
.ipl-menu-filtre__absent:hover { background: none; }

/* =========================================================================
   PAGE D'UN LEAD — fiche pleine largeur, actions en onglets
   ========================================================================= */

.ipl-lead { display: flex; flex-direction: column; gap: 20px; }

.ipl-lead__entete {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.ipl-lead__entete h2 { margin: 0; }
.ipl-lead__pdf { flex: none; }

/* La fiche se lit pendant l'appel : deux colonnes pour tout voir sans
   défiler, une seule dès que l'écran se resserre. */
@media (min-width: 900px) {
  .ipl-lead__fiche > div:not(.ipl-lead__entete),
  .ipl-lead__fiche > table { max-width: 100%; }
  .ipl-lead__colonnes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 40px;
  }
}

/* --- Onglets --- */

.ipl-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: -4px 0 22px;
  border-bottom: 1px solid var(--ip-filet, #DEDAD1);
}
.ipl-onglet {
  padding: 11px 18px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ip-texte-3, #6B7079);
  cursor: pointer;
}
.ipl-onglet:hover { color: var(--ip-encre, #121417); }
.ipl-onglet--actif {
  color: var(--ip-encre, #121417);
  border-bottom-color: var(--ip-signal, #0C6B45);
  font-weight: 600;
}

.ipl-onglet-contenu > h3:first-child { margin-top: 0; }

.ipl-lead__mention {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--ip-filet-clair, #EAE7E0);
}

@media (max-width: 600px) {
  .ipl-onglet { padding: 10px 12px; font-size: 13.5px; }
  .ipl-lead__pdf { width: 100%; justify-content: center; }
}

/* À l'impression, tous les onglets se déplient : un document imprimé
   partiel n'aurait aucun sens. */
@media print {
  .ipl-onglets { display: none; }
  .ipl-onglet-contenu[hidden] { display: block !important; }
}

/* =========================================================================
   DÉLAI DE PRISE DE CONTACT

   Trois états, trois couleurs. Le dépassement doit sauter aux yeux : il
   conditionne le droit au remboursement, et une agence qui le découvre
   après coup a une raison légitime de contester.
   ========================================================================= */

.ipl-delai {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--ip-mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Dans les temps — discret, il n'appelle aucune action. */
.ipl-delai--ok {
  background: var(--ip-signal-clair, #E4EFE9);
  color: var(--ip-signal, #0C6B45);
}

/* Approche de l'échéance — orange, il reste du temps pour réagir. */
.ipl-delai--alerte {
  background: #FDF0DC;
  color: #9A5B00;
  font-weight: 600;
}

/* Dépassé — rouge plein : le remboursement est perdu. */
.ipl-delai--depasse {
  background: var(--ip-alerte, #A5301F);
  color: #fff;
  font-weight: 600;
}

/* Contact établi — le décompte n'a plus lieu d'être. */
.ipl-delai--traite {
  background: none;
  color: var(--ip-texte-4, #9AA0A8);
  padding-left: 0;
}

/* --- Feedback --- */

.ipl-feedback {
  display: inline-block;
  width: 22px;
  text-align: center;
  font-weight: 700;
}
.ipl-feedback--fait { color: var(--ip-signal, #0C6B45); }
.ipl-feedback--manquant { color: var(--ip-texte-4, #9AA0A8); font-weight: 400; }

/* Une ligne dépassée se repère sans lire les colonnes.
   :has() n'est pas supporté par les navigateurs antérieurs à 2023 : la
   pastille rouge reste visible, seul le fond de ligne manque. */
tr:has(.ipl-delai--depasse) { background: #FDF6F5; }

/* =========================================================================
   ONGLETS DE TRI — état sélectionné

   Mes règles pour les onglets de la page d'un lead, ajoutées plus bas
   dans ce fichier, neutralisaient le fond de l'onglet actif : elles
   déclarent `background: none` sur `.ipl-onglet`, et l'état actif des
   pastilles de tri n'était plus lisible.

   Ces sélecteurs sont plus spécifiques et arrivent en dernier : ils font
   autorité sur les deux jeux d'onglets.
   ========================================================================= */

.ipl-onglets--secondaire .ipl-onglet {
  padding: 6px 14px;
  font-size: 13px;
  border: 1px solid var(--ip-filet, #DEDAD1);
  border-radius: 999px;
  background: var(--ip-surface, #fff);
  color: var(--ip-texte-2, #5A6068);
}
.ipl-onglets--secondaire .ipl-onglet:hover {
  border-color: var(--ip-encre, #121417);
  color: var(--ip-encre, #121417);
}

/* Sélectionné : fond encre et texte crème — la même convention que le
   sélecteur « Cartes / Tableau » du comparateur. Le vert reste réservé
   aux actions, pas aux états. */
.ipl-onglets--secondaire .ipl-onglet--actif,
.ipl-onglets--secondaire .ipl-onglet--actif:hover {
  background: var(--ip-encre, #121417);
  border-color: var(--ip-encre, #121417);
  color: var(--ip-papier, #F2F0EB);
  font-weight: 600;
}

/* =========================================================================
   CONTRATS SIGNÉS — saisie par personne
   ========================================================================= */

.ipl-contrat {
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid var(--ip-filet, #DEDAD1);
  border-radius: var(--ip-rayon, 3px);
  background: var(--ip-surface, #fff);
}
.ipl-contrat legend {
  padding: 0 8px;
  font-size: 15px;
  font-weight: 600;
}
.ipl-contrat legend .ip-note { font-weight: 400; margin-left: 6px; }

/* Une ligne réglée n'est plus modifiable : réécrire une commission
   encaissée fausserait la comptabilité. */
.ipl-contrat[disabled] { opacity: .65; background: var(--ip-papier, #F2F0EB); }
.ipl-contrat__paye {
  margin-left: 8px;
  font-family: var(--ip-mono, monospace);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ip-signal, #0C6B45);
}

.ipl-contrat__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 16px;
  margin-bottom: 14px;
}
/*
 * Ces regles visent les CHAMPS du formulaire, pas tous les libelles.
 *
 * Ecrites `.ipl-contrat label`, elles s'appliquaient aussi aux entrees
 * du menu deroulant des complementaires : la case a cocher se retrouvait
 * au-dessus du texte. Le ciblage est desormais explicite.
 */
.ipl-contrat__grille label,
.ipl-contrat__montant { display: block; }

.ipl-contrat__grille label > span,
.ipl-contrat__montant > span {
  display: block;
  margin-bottom: 4px;
  font-size: 12.5px;
  color: var(--ip-texte-2, #5A6068);
}

.ipl-contrat__grille input[type="text"],
.ipl-contrat__grille select,
.ipl-contrat__montant input[type="text"] { width: 100%; }

/*
 * Complémentaires et montant : grille de 12 colonnes, 9 pour la liste
 * déroulante et 3 pour la prime.
 *
 * La version précédente réservait 180px fixes au montant, ce qui laissait
 * trop peu de place au menu — et celui-ci, positionné en absolu quand il
 * s'ouvre, recouvrait le champ voisin faute d'un contexte
 * d'empilement propre.
 */
.ipl-contrat__lca {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: end;
  padding-top: 14px;
  border-top: 1px solid var(--ip-filet-clair, #EAE7E0);

  /* Ancrage du menu déroulant : sans lui, il se positionne par rapport à
     un ancêtre plus lointain et se décale. */
  position: relative;
}

/*
 * Le selecteur visait :first-child, c'est-a-dire le LIBELLE — pas le
 * menu. Les deux comptaient comme des cellules distinctes, et la largeur
 * s'appliquait au mauvais element : le menu se retrouvait ecrase sur une
 * colonne, sous le libelle au lieu d'etre a cote du montant.
 *
 * Ils sont desormais groupes dans .ipl-contrat__comp, cible directement.
 */
.ipl-contrat__comp { grid-column: span 6; min-width: 0; }
.ipl-contrat__montant { grid-column: span 3; min-width: 0; }

/* Le menu occupe toute la largeur de sa colonne. */
.ipl-contrat__comp .ipl-menu-filtre { display: block; }
.ipl-contrat__comp .ip-note { display: block; margin-bottom: 4px; }

/*
 * La liste porte un min-width de 260px, prevu pour les filtres du
 * catalogue. Dans une colonne de 6/12 elle deborderait : ici elle suit
 * la largeur du conteneur.
 */
.ipl-contrat__comp .ipl-menu-filtre__liste {
  min-width: 0;
  width: 100%;
  left: 0;
  right: 0;
}

/*
 * Un nom de produit tient sur UNE ligne.
 *
 * Les libelles heritaient de flex-wrap implicite et se cassaient des que
 * la colonne se resserrait : « Complementa Extra » passait sur deux
 * lignes, ce qui doublait la hauteur de chaque entree.
 *
 * Un nom trop long est tronque par des points de suspension, et reste
 * consultable au survol via l'attribut title.
 */
/*
 * Les libelles du menu retrouvent leur mise en ligne.
 *
 * `.ipl-contrat label { display: block }` visait les champs du
 * formulaire — caisse, modele, franchise — mais s'appliquait aussi aux
 * libelles a l'interieur du menu deroulant : la case se retrouvait
 * au-dessus du texte, sur deux lignes.
 *
 * Ces selecteurs sont plus specifiques et retablissent le flex.
 */
.ipl-contrat .ipl-menu-filtre__liste label {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
}
.ipl-contrat .ipl-menu-filtre__liste label > span {
  display: inline;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 13.5px;
  color: var(--ip-encre, #121417);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Case a cocher carree et plus lisible.
 *
 * accent-color colore la case avec le vert du site sans avoir a la
 * redessiner entierement — une case reconstruite en CSS perd le
 * comportement natif au clavier et pour les lecteurs d'ecran.
 */
.ipl-contrat .ipl-menu-filtre__liste input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 2px;
  accent-color: var(--ip-signal, #0C6B45);
  cursor: pointer;
}

/* Le resume du menu ne doit pas non plus se casser. */
.ipl-contrat__comp .ipl-menu-filtre > summary { white-space: nowrap; }
.ipl-contrat__comp .ipl-menu-filtre > summary span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le menu ouvert doit passer AU-DESSUS du reste du formulaire, y compris
   des blocs de personnes suivants. */
.ipl-contrat__comp { position: relative; }
.ipl-contrat__lca .ipl-menu-filtre { position: static; }
.ipl-contrat__lca .ipl-menu-filtre[open] { z-index: 50; }
.ipl-contrat__lca .ipl-menu-filtre__liste { z-index: 60; }

/* Un bloc personne ne doit pas rogner le menu de celui du dessus. */
.ipl-contrat { position: relative; }
.ipl-contrat:has(.ipl-menu-filtre[open]) { z-index: 40; }

.ipl-contrat__commission {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--ip-filet-clair, #EAE7E0);
  font-size: 14px;
}

.ipl-contrats__total {
  margin: 18px 0;
  padding: 14px 18px;
  background: var(--ip-signal-clair, #E4EFE9);
  border-left: 3px solid var(--ip-signal, #0C6B45);
  font-size: 15px;
}
.ipl-contrats__total strong { font-size: 19px; color: var(--ip-signal, #0C6B45); }

@media (max-width: 600px) {
  .ipl-contrat__lca { grid-template-columns: minmax(0, 1fr); }
}

/* Mention affichée quand le lead a été cédé au forfait : la saisie des
   contrats reste utile au suivi, mais n'engage aucune commission. */
.ipl-contrats__forfait {
  padding: 10px 14px;
  background: var(--ip-papier, #F2F0EB);
  border-left: 3px solid var(--ip-texte-4, #9AA0A8);
  margin-bottom: 16px;
}

/* Pastille de mode dans la liste des leads. */
.ipl-mode-pastille {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ip-papier, #F2F0EB);
  font-family: var(--ip-mono, monospace);
  font-size: 10.5px;
  white-space: nowrap;
  color: var(--ip-texte-2, #5A6068);
}
.ipl-mode-pastille--commission {
  background: var(--ip-signal-clair, #E4EFE9);
  color: var(--ip-signal, #0C6B45);
  font-weight: 600;
}

@media (max-width: 700px) {
  /* Sur écran étroit, la grille de 12 n'a plus de sens : tout s'empile. */
  .ipl-contrat__lca { grid-template-columns: minmax(0, 1fr); }
  .ipl-contrat__comp,
  .ipl-contrat__montant { grid-column: span 1; }
}

/* Mode de rémunération dans la liste des demandes — visible sans ouvrir
   la fiche. Deux pastilles peuvent coexister : une même offre peut
   partir au forfait chez une agence et en commission chez une autre. */
.ipl-mode-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ipl-mode-tag--forfait {
  background: #EDEBE6;
  color: #5A6068;
}
.ipl-mode-tag--commission {
  background: #E4EFE9;
  color: #0C6B45;
  font-weight: 600;
}

/* Ligne enregistrée mais non encore payée : verrouillée pour l'agence,
   déverrouillable par l'administrateur sur demande. */
.ipl-contrat__paye--verrou { color: var(--ip-texte-3, #6B7079); }

.ipl-contrats__fige {
  padding: 12px 16px;
  background: var(--ip-papier, #F2F0EB);
  border-left: 3px solid var(--ip-texte-4, #9AA0A8);
  margin-top: 8px;
}

/* Aucun retour : gris neutre, ni alarmant ni rassurant — l'absence de
   retour n'est un problème qu'une fois le délai passé, et cette
   information-là est portée par la colonne du délai. */
.ipl-mode-tag--attente { background: #F5F3EF; color: #9AA0A8; }