/* ------------------------------------------------------------------
   DeveloppIA · la version téléphone du tableau de bord (voir telephone.js)

   Deux étages :
   1. L'habillage d'application (en-tête court, barre du bas, menu,
      aide à l'installation) : seulement sous html.tel-app, classe posée
      par telephone.js quand tout est prêt. Sans elle, rien ne bouge.
   2. Les réglages de mise en page des onglets pour un petit écran :
      sous la même condition d'écran que telephone.js.

   Chargée après theme-clair.css. Tout passe par les variables de
   styles.css (--nuit, --carte, --texte…), donc le fond clair et le fond
   foncé suivent tout seuls ; les rares couleurs propres sont doublées
   plus bas pour le fond foncé.
   ------------------------------------------------------------------ */

/* hors téléphone, les pièces de l'application restent cachées */
.tel-tete,.tel-barre,.tel-menu,.tel-bandeau,.tel-soeurs{display:none}

html.tel-app{
  --tel-accent:#5B2BE0;
  --tel-accent-fond:rgba(110,58,247,0.12);
  --tel-voile:rgba(43,33,24,0.42);
  --tel-ombre:0 -18px 50px rgba(80,60,30,0.22);
  --tel-marge:14px;
}
html.tel-app[data-theme="fonce"]{
  --tel-accent:#CDBBFF;
  --tel-accent-fond:rgba(110,58,247,0.30);
  --tel-voile:rgba(6,3,16,0.62);
  --tel-ombre:0 -18px 50px rgba(0,0,0,0.5);
}

/* =========================== 1. l'habillage =========================== */

/* ---- en-tête : logo, nom de l'onglet, heure des chiffres, Actualiser ---- */
html.tel-app #tableau .entete,
html.tel-app[data-theme] #tableau .entete,
html.tel-app #tableau .entete.mini{
  position:sticky;top:0;z-index:30;
  padding:max(8px,env(safe-area-inset-top)) max(var(--tel-marge),env(safe-area-inset-right)) 8px max(var(--tel-marge),env(safe-area-inset-left));
  background:var(--nuit);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid var(--trait);
  transition:none;
}
/* la barre de l'ordinateur (familles + pages) laisse la place à celle du bas */
html.tel-app #tableau .entete-haut,
html.tel-app #tableau .onglets,
html.tel-app #nav-facette{display:none !important}
html.tel-app .tel-tete{display:flex;align-items:center;gap:11px;min-height:44px}
.tel-logo{width:32px;height:32px;border-radius:9px;flex:none;display:block}
.tel-titres{flex:1;min-width:0}
.tel-titre{font-family:var(--display);font-weight:800;font-size:18.5px;line-height:1.15;letter-spacing:-0.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--texte)}
.tel-maj{font-size:12px;line-height:1.3;color:var(--texte-faible);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tel-rond{
  width:42px;height:42px;border-radius:999px;flex:none;display:grid;place-items:center;
  border:1px solid var(--trait);background:var(--carte);color:var(--texte-doux);
  -webkit-tap-highlight-color:transparent;
}
.tel-rond:active{background:var(--tel-accent-fond);color:var(--texte)}
.tel-rond svg{width:20px;height:20px}
.tel-rond.tourne svg{animation:tel-tourne .8s linear infinite}
@keyframes tel-tourne{to{transform:rotate(360deg)}}

/* ---- la page : de l'air sur les côtés, la place de la barre du bas ---- */
html.tel-app .page{
  padding:14px max(var(--tel-marge),env(safe-area-inset-right)) calc(var(--tel-bas,64px) + 28px) max(var(--tel-marge),env(safe-area-inset-left));
}
html.tel-app.tel-avec-bandeau .page{padding-bottom:calc(var(--tel-bas,64px) + 140px)}
/* le pied (compte pub, période lue, déconnexion) : la déconnexion est dans Menu > Réglages */
html.tel-app .pied{display:none}
/* un saut vers une section s'arrête sous l'en-tête du téléphone, plus court que celui de l'ordinateur */
html.tel-app [id^="vue-"] section,html.tel-app [id^="vue-"] .bloc,html.tel-app [id^="vue-"] .grille-kpi{scroll-margin-top:calc(var(--tel-haut,62px) + 12px)}

/* ---- les pages de la famille ouverte, sous l'en-tête ---- */
html.tel-app .tel-soeurs{
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  margin:-2px calc(-1 * max(var(--tel-marge),env(safe-area-inset-left))) 14px;
  padding:2px max(var(--tel-marge),env(safe-area-inset-left));
}
html.tel-app .tel-soeurs[hidden]{display:none}
.tel-soeurs::-webkit-scrollbar{display:none}
.tel-soeurs button{
  flex:none;min-height:38px;padding:0 15px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--trait-fort);background:var(--carte);color:var(--texte-doux);
  font-size:14px;font-weight:650;-webkit-tap-highlight-color:transparent;
}
.tel-soeurs button.actif{background:var(--violet);border-color:var(--violet);color:#fff}
.tel-soeurs button i{
  font-style:normal;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:800;
  background:rgba(244,70,126,0.16);color:var(--rose);
}
.tel-soeurs button.actif i{background:rgba(255,255,255,0.24);color:#fff}

/* ---- la barre du bas ---- */
html.tel-app .tel-barre{
  display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:5px max(4px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));
  background:var(--carte);
  border-top:1px solid var(--trait-fort);
  box-shadow:0 -6px 24px rgba(40,25,10,0.06);
}
@supports (background:color-mix(in srgb,red 50%,transparent)) and ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html.tel-app .tel-barre{
    background:color-mix(in srgb,var(--carte) 86%,transparent);
    -webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);
  }
}
.tel-barre button{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:54px;padding:3px 1px 2px;color:var(--texte-faible);
  font-size:11px;font-weight:650;letter-spacing:-0.005em;line-height:1.2;
  -webkit-tap-highlight-color:transparent;
}
.tel-barre .tel-ic{width:54px;height:30px;border-radius:999px;display:grid;place-items:center;transition:background-color .15s ease}
.tel-barre .tel-ic svg{width:23px;height:23px}
.tel-barre .tel-nom{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.tel-barre button.actif{color:var(--texte)}
.tel-barre button.actif .tel-ic{background:var(--tel-accent-fond);color:var(--tel-accent)}
.tel-barre button.actif .tel-ic svg{stroke-width:2.1}
.tel-barre button:active .tel-ic{background:var(--tel-accent-fond)}
.tel-pastille{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--rose);color:#fff;font-size:11px;font-weight:800;font-family:var(--corps);line-height:1;
}
.tel-barre .tel-pastille{position:absolute;top:2px;left:calc(50% + 7px);box-shadow:0 0 0 2px var(--carte)}
.tel-barre .tel-pastille-point{min-width:10px;width:10px;height:10px;padding:0;top:6px;left:calc(50% + 11px)}

/* ---- les feuilles qui montent du bas : menu et aide ---- */
html.tel-app .tel-menu{display:block;position:fixed;inset:0;z-index:70}
html.tel-app .tel-menu[hidden]{display:none !important}
.tel-voile{position:absolute;inset:0;background:var(--tel-voile)}
.tel-feuille{
  position:absolute;left:0;right:0;bottom:0;
  max-height:calc(100% - max(24px,env(safe-area-inset-top)) - 12px);
  display:flex;flex-direction:column;
  background:var(--nuit);border-radius:22px 22px 0 0;box-shadow:var(--tel-ombre);
  animation:tel-monte .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes tel-monte{from{transform:translateY(28px);opacity:.5}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.tel-feuille{animation:none}}
.tel-feuille-poignee{width:40px;height:5px;border-radius:99px;background:var(--trait-fort);margin:8px auto 0;flex:none}
.tel-feuille-tete{
  display:flex;align-items:center;gap:12px;flex:none;
  padding:8px max(16px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));
}
.tel-feuille-titre{flex:1;font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-0.015em}
.tel-feuille-corps{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:0 max(14px,env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
}
html.tel-feuille-ouverte,html.tel-feuille-ouverte body{overflow:hidden}

.tel-groupe h3{
  font-family:var(--corps);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--texte-faible);margin:18px 6px 8px;
}
.tel-groupe:first-child h3{margin-top:6px}
.tel-liste{list-style:none;background:var(--carte);border:1px solid var(--trait);border-radius:16px;overflow:hidden}
.tel-liste li + li{border-top:1px solid var(--trait)}
.tel-ligne{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  min-height:64px;padding:10px 12px 10px 12px;color:var(--texte);
  -webkit-tap-highlight-color:transparent;
}
.tel-ligne:active{background:var(--tel-accent-fond)}
.tel-ligne.actif{background:var(--tel-accent-fond)}
.tel-ligne .tel-ic{
  width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--g-fond,rgba(60,42,20,0.07));color:var(--g,var(--texte-doux));
}
.tel-ligne .tel-ic svg{width:22px;height:22px}
.tel-ligne-textes{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tel-ligne-textes b{font-size:15.5px;font-weight:700;line-height:1.25}
.tel-ligne-textes small{font-size:13px;line-height:1.35;color:var(--texte-doux)}
.tel-fleche{flex:none;color:var(--texte-faible);display:grid}
.tel-fleche svg{width:18px;height:18px}
.tel-pastille-ligne{flex:none}
.tel-coche{
  flex:none;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;
  border:2px solid var(--trait-fort);font-size:13px;font-weight:800;color:#fff;
}
.tel-coche.pris{background:var(--violet);border-color:var(--violet)}
.tel-consigne{margin:4px 4px 2px;font-size:14px;color:var(--texte-doux);line-height:1.45}
.tel-consigne b{color:var(--texte)}
.tel-consigne.alerte-tel{color:var(--rose);font-weight:600}
.tel-qui{margin:16px 6px 0;font-size:13px;color:var(--texte-faible);text-align:center}
.tel-actions-edition{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.tel-bouton-plein{
  display:block;width:100%;min-height:50px;border-radius:14px;
  background:linear-gradient(135deg,var(--violet),var(--magenta));color:#fff;
  font-weight:700;font-size:16px;box-shadow:0 8px 20px rgba(110,58,247,0.28);
}
.tel-bouton-lien{min-height:44px;font-size:14.5px;font-weight:600;color:var(--texte-doux);text-decoration:underline;text-underline-offset:3px}

/* la couleur de chaque famille (icônes du menu) */
.tel-teinte-violet{--g:#5B2BE0;--g-fond:rgba(110,58,247,0.13)}
.tel-teinte-rose{--g:#B8124B;--g-fond:rgba(244,70,126,0.13)}
.tel-teinte-orange{--g:#B35A00;--g-fond:rgba(255,154,61,0.18)}
.tel-teinte-bleu{--g:#27459E;--g-fond:rgba(79,125,247,0.14)}
.tel-teinte-vert{--g:#0F6B50;--g-fond:rgba(47,211,165,0.18)}
.tel-teinte-magenta{--g:#7A1A94;--g-fond:rgba(180,41,217,0.12)}
.tel-teinte-gris,.tel-teinte-reglages{--g:var(--texte-doux);--g-fond:rgba(60,42,20,0.07)}
html[data-theme="fonce"] .tel-teinte-violet{--g:#CDBBFF;--g-fond:rgba(110,58,247,0.26)}
html[data-theme="fonce"] .tel-teinte-rose{--g:#FFB3C3;--g-fond:rgba(244,70,126,0.18)}
html[data-theme="fonce"] .tel-teinte-orange{--g:#FFC690;--g-fond:rgba(255,154,61,0.16)}
html[data-theme="fonce"] .tel-teinte-bleu{--g:#A8C0FF;--g-fond:rgba(79,125,247,0.2)}
html[data-theme="fonce"] .tel-teinte-vert{--g:#7DF0CD;--g-fond:rgba(47,211,165,0.15)}
html[data-theme="fonce"] .tel-teinte-magenta{--g:#EBB5FF;--g-fond:rgba(180,41,217,0.2)}
html[data-theme="fonce"] .tel-teinte-gris,html[data-theme="fonce"] .tel-teinte-reglages{--g-fond:rgba(255,255,255,0.07)}

/* ---- l'aide à l'installation ---- */
.tel-aide-logo{display:flex;flex-direction:column;align-items:center;gap:8px;margin:6px 0 16px}
.tel-aide-logo img{width:72px;height:72px;border-radius:17px;box-shadow:0 10px 26px rgba(40,20,90,0.3)}
.tel-aide-logo b{font-family:var(--display);font-size:17px}
.tel-etapes{counter-reset:etape;list-style:none;display:flex;flex-direction:column;gap:10px}
.tel-etapes li{
  counter-increment:etape;position:relative;padding:13px 14px 13px 52px;border-radius:14px;
  background:var(--carte);border:1px solid var(--trait);font-size:15px;line-height:1.45;
}
.tel-etapes li::before{
  content:counter(etape);position:absolute;left:13px;top:12px;width:27px;height:27px;border-radius:999px;
  display:grid;place-items:center;background:var(--violet);color:#fff;font-weight:800;font-size:14px;
}
.tel-ic-texte{display:inline-grid;vertical-align:-5px;width:22px;height:22px;color:#0A84FF}
.tel-ic-texte svg{width:20px;height:20px}
.tel-aide-fin{margin:14px 4px 16px;font-size:14px;color:var(--texte-doux);line-height:1.5}

/* ---- le bandeau d'installation, posé au-dessus de la barre ---- */
html.tel-app .tel-bandeau{
  display:flex;align-items:flex-start;gap:12px;
  position:fixed;z-index:39;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));
  bottom:calc(var(--tel-bas,64px) + 10px);
  padding:12px 6px 12px 12px;border-radius:18px;
  background:var(--carte);border:1px solid var(--trait-fort);box-shadow:0 12px 34px rgba(40,25,10,0.2);
}
html.tel-app .tel-bandeau[hidden]{display:none}
.tel-bandeau img{width:42px;height:42px;border-radius:11px;flex:none}
.tel-bandeau-texte{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;font-size:13px;line-height:1.35;color:var(--texte-doux)}
.tel-bandeau-texte b{font-size:15px;color:var(--texte)}
.tel-bandeau-oui{
  margin-top:9px;min-height:38px;padding:0 16px;border-radius:999px;
  background:linear-gradient(135deg,var(--violet),var(--magenta));color:#fff;font-weight:700;font-size:14px;
}
.tel-bandeau-non{flex:none;width:38px;height:38px;margin-top:-4px;display:grid;place-items:center;color:var(--texte-faible)}
.tel-bandeau-non svg{width:18px;height:18px}

/* ---- la porte d'entrée, sur téléphone ---- */
@media (max-width:760px){
  .porte{padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom))}
  .porte-carte{padding:28px 20px 22px}
  .porte-bouton{min-height:50px;font-size:16px}
  .porte-champ{min-height:50px}
}
.porte-marque img{display:block;margin:0 auto;border-radius:14px;box-shadow:0 10px 28px rgba(40,20,90,0.28)}
.marque-logo{flex:none;display:block;border-radius:9px;box-shadow:0 6px 18px rgba(40,20,90,0.25)}

/* =========================== 2. les pages sur petit écran =========================== */

/* un fond « fixe » saccade sur iPhone : il défile avec la page */
html.tel-app body{background-attachment:scroll}

/* les champs en 16 px : en dessous, l'iPhone zoome tout seul dès qu'on touche le champ */
html.tel-app #tableau input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
html.tel-app #tableau select,
html.tel-app #tableau textarea{font-size:16px}
/* les cases à cocher à la taille du doigt */
html.tel-app #tableau input[type=checkbox]{width:20px;height:20px;flex:none}

/* des boutons qu'on touche sans viser */
html.tel-app .raccourcis button,html.tel-app .choix-courbe button,html.tel-app .chip,html.tel-app .chip-campagne,html.tel-app .chip-ensemble,
html.tel-app .quali-bouton,html.tel-app .bouton-deplier,html.tel-app .rel-etape,html.tel-app .sl-closer,html.tel-app .cn-closer,
html.tel-app .sc-bouton-tel,html.tel-app .sc-bouton-wa,html.tel-app .appel-wa,html.tel-app .sl-mini,html.tel-app .cn-nav a{
  min-height:38px;display:inline-flex;align-items:center;justify-content:center;
}
html.tel-app .appel-wa{min-height:42px}
/* les liens dans le texte : la même ligne, mais une zone de toucher plus haute */
html.tel-app .sl-aller,html.tel-app .tr-com-actions button,html.tel-app .tr-lien,html.tel-app .pl-lien,
html.tel-app .sc-lien,html.tel-app .idee-copier{padding-top:7px;padding-bottom:7px}
html.tel-app .lien-tel{display:inline-block;padding:6px 0}

/* les blocs : un peu moins de marge, plus de place pour le contenu */
html.tel-app .bloc{margin-top:16px;padding:16px 14px 18px}
html.tel-app .bloc-tete{margin-bottom:14px}
html.tel-app .bloc-tete h2{font-size:18px;line-height:1.25}
html.tel-app .compteur-quali{margin-left:0}
html.tel-app .bandeau-activite{margin:20px 0 14px}

/* ---- Résultats de la pub ---- */
html.tel-app .barre-campagnes{padding:11px 12px}
html.tel-app .barre-dates{padding:12px}
html.tel-app .champs-dates{gap:8px 10px}
html.tel-app .champs-dates label{display:flex;align-items:center;gap:6px;flex:1 1 150px}
html.tel-app .champs-dates input{margin-left:0;min-width:0;width:100%}
/* l'entonnoir : deux marches par ligne au lieu d'une */
html.tel-app .entonnoir,html.tel-app .entonnoir-long{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html.tel-app .etape{padding:11px 12px 12px}
html.tel-app .etape-nom{font-size:11.5px}
html.tel-app .etape-valeur{font-size:23px}
/* le graphe jour par jour : assez large pour se lire, le dessin seul glisse sous le doigt
   (telephone.js l'emballe dans .tel-graphe-defile et l'ouvre sur les derniers jours) */
html.tel-app .graphe{overflow-x:visible}
html.tel-app .tel-graphe-defile{
  overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  margin:0 -14px;padding:0 14px 6px;
}
html.tel-app .tel-graphe-defile svg{min-width:780px}
html.tel-app .loupe-page{padding:13px 12px 14px}
html.tel-app .loupe-sections{font-size:13px}
html.tel-app .loupe-sections th,html.tel-app .loupe-sections td{padding:7px 6px}

/* ---- les tableaux qui glissent : la première colonne reste en place ---- */
html.tel-app .tableau-cadre{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
html.tel-app .tableau{font-size:13px}
html.tel-app .tableau th,html.tel-app .tableau td{padding:9px 10px}
html.tel-app .tableau th:first-child,html.tel-app .tableau td:first-child{
  min-width:112px;position:sticky;left:0;z-index:1;background:var(--carte);box-shadow:1px 0 0 var(--trait);
}
html.tel-app .tableau thead th:first-child{z-index:3}

/* ---- les tableaux de personnes et de publicités : une fiche par ligne (telephone.js
       pose .tel-fiches et le nom de la colonne sur chaque case, data-tel-col) ---- */
html.tel-app .tel-cadre-fiches{overflow:visible;border-radius:14px}
html.tel-app table.tel-fiches{display:block;width:100%;min-width:0;font-size:14px}
html.tel-app table.tel-fiches thead{display:none}
html.tel-app table.tel-fiches tbody,html.tel-app table.tel-fiches tfoot{display:block}
html.tel-app table.tel-fiches tr{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;
  padding:13px 14px 14px;border-bottom:1px solid var(--trait);
}
html.tel-app table.tel-fiches tbody tr:last-child{border-bottom:0}
html.tel-app table.tel-fiches td{
  display:block;padding:0;border:0;text-align:left;white-space:normal;min-width:0;
  position:static;background:none;box-shadow:none;font-size:14px;
}
html.tel-app table.tel-fiches td:first-child{
  grid-column:1 / -1;font-size:15px;font-weight:650;color:var(--texte);
  position:static;background:none;box-shadow:none;min-width:0;
}
html.tel-app table.tel-fiches td[colspan],html.tel-app table.tel-fiches td.quali-cellule{grid-column:1 / -1}
html.tel-app table.tel-fiches td[data-tel-col]:not(:first-child)::before{
  content:attr(data-tel-col);display:block;margin-bottom:2px;
  font-family:var(--corps);font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--texte-faible);white-space:normal;
}
html.tel-app table.tel-fiches tbody tr:hover td{background:none}
html.tel-app table.tel-fiches tfoot td{background:none;border:0;position:static;font-weight:700}
html.tel-app table.tel-fiches tfoot tr{background:var(--tel-accent-fond);border-radius:0 0 14px 14px}
html.tel-app table.tel-fiches .cout-appel{border-right:0}
html.tel-app table.tel-fiches .part{display:inline;margin:0 0 0 6px}
/* un tableau coupé à 10 lignes : 10 fiches, le reste avec « Tout afficher » (pas de défilement dans le cadre) */
html.tel-app .tel-cadre-fiches.cadre-limite{max-height:none !important;overflow:visible !important}
html.tel-app .tel-cadre-fiches.cadre-limite table.tel-fiches tbody tr:nth-child(n+11){display:none}
html.tel-app .note-defile{justify-content:space-between}

/* ---- Suivi des leads : le tableau des prospects en fiches ---- */
html.tel-app .sl-tableau-cadre.tel-cadre-fiches{border:0;background:none}
html.tel-app table.sl-tableau.tel-fiches tr.sl-groupe{display:block;padding:18px 4px 6px;border-bottom:1px solid var(--trait-fort)}
html.tel-app table.sl-tableau.tel-fiches tr.sl-groupe td{display:block}
html.tel-app table.sl-tableau.tel-fiches tr.sl-groupe span{display:block;margin:2px 0 0}
html.tel-app table.sl-tableau.tel-fiches tr.sl-l{
  margin:10px 0 0;border:1px solid var(--trait);border-left:4px solid var(--texte-faible);border-radius:14px;
  background:var(--carte);padding:12px 12px 13px;
}
html.tel-app table.sl-tableau.tel-fiches tr.sl-l.deplie{border-radius:14px 14px 0 0;background:var(--tel-accent-fond)}
html.tel-app table.sl-tableau.tel-fiches tr.sl-l.sl-etat-signe{border-left-color:var(--vert)}
html.tel-app table.sl-tableau.tel-fiches tr.sl-l.sl-etat-a_venir,
html.tel-app table.sl-tableau.tel-fiches tr.sl-l.sl-etat-a_relancer{border-left-color:var(--bleu)}
html.tel-app table.sl-tableau.tel-fiches tr.sl-l.sl-etat-a_noter{border-left-color:var(--orange)}
html.tel-app table.sl-tableau.tel-fiches tr.sl-l.sl-etat-no_show,
html.tel-app table.sl-tableau.tel-fiches tr.sl-l.sl-etat-perdu{border-left-color:var(--rose)}
html.tel-app table.sl-tableau.tel-fiches tr.sl-l td:first-child{box-shadow:none}
html.tel-app table.sl-tableau.tel-fiches tr.sl-l.deplie td{background:none}
html.tel-app table.sl-tableau.tel-fiches .sl-c-rdv,html.tel-app table.sl-tableau.tel-fiches .sl-c-propal,
html.tel-app table.sl-tableau.tel-fiches .sl-c-objs,
html.tel-app table.sl-tableau.tel-fiches .sl-c-action,html.tel-app table.sl-tableau.tel-fiches .sl-c-alerte{grid-column:1 / -1}
/* « Où il en est » et « Niveau » côte à côte, puis le reste pleine largeur */
html.tel-app table.sl-tableau.tel-fiches tr.sl-l td:nth-child(2){order:1}
html.tel-app table.sl-tableau.tel-fiches .sl-c-niveau{order:2}
html.tel-app table.sl-tableau.tel-fiches .sl-c-rdv{order:3}
html.tel-app table.sl-tableau.tel-fiches .sl-c-propal{order:4}
html.tel-app table.sl-tableau.tel-fiches .sl-c-objs{order:5}
html.tel-app table.sl-tableau.tel-fiches .sl-c-action{order:6}
html.tel-app table.sl-tableau.tel-fiches .sl-c-alerte{order:7}
html.tel-app table.sl-tableau.tel-fiches td:has(> .rien:only-child){display:none}
html.tel-app table.sl-tableau.tel-fiches tr.sl-detail{
  display:block;margin:0 0 4px;padding:4px 10px 12px;border:1px solid var(--trait);border-top:0;
  border-radius:0 0 14px 14px;background:var(--tel-accent-fond);
}
html.tel-app table.sl-tableau.tel-fiches tr.sl-detail td{display:block;padding:0}
html.tel-app .sl-qui-l{min-width:0}
html.tel-app .sl-l-sous{max-width:none}
html.tel-app .sl-c-rdv,html.tel-app .sl-c-propal{min-width:0;max-width:none}
html.tel-app .sl-l-texte,html.tel-app .sl-l-alerte{white-space:normal;max-width:none}
html.tel-app .sl-l-objs{white-space:normal;flex-wrap:wrap}
html.tel-app .sl-l-objs em{max-width:none}
html.tel-app .sl-l-action{min-width:0;flex-wrap:wrap}
html.tel-app .sl-l-action input[type=text]{flex:1 1 170px}
html.tel-app .sl-l-action input[type=date]{width:auto;flex:0 0 auto}

/* ---- Appels à venir : l'heure au-dessus de la fiche, pas dans une colonne étroite ---- */
html.tel-app .appel-grille{grid-template-columns:1fr}
html.tel-app .appel{grid-template-columns:minmax(0,1fr);padding:13px 13px 14px}
html.tel-app .appel-heure{grid-row:auto;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px}
html.tel-app .appel-heure b{font-size:24px}
html.tel-app .appel-heure span{margin-top:0}
html.tel-app .appel-heure .appel-ok{margin-top:0}

/* ---- Fiche de préparation : le sommaire de la fiche reste sous l'en-tête du téléphone ---- */
html.tel-app .cn-nav{top:var(--tel-haut,62px)}
html.tel-app .cn-sec{scroll-margin-top:calc(var(--tel-haut,62px) + 56px)}
html.tel-app .cn-fiche{scroll-margin-top:calc(var(--tel-haut,62px) + 10px)}

/* ---- Trame de vente : le petit message « copié » passe au-dessus de la barre du bas ---- */
html.tel-app .tr-toast{bottom:calc(var(--tel-bas,64px) + 16px)}

/* ---- Instagram : la publication ouverte en grand prend l'écran ---- */
html.tel-app .ig-panneau{inset:0;width:100%;max-height:none;transform:none;border-radius:0;border:0;
  padding-bottom:env(safe-area-inset-bottom)}
html.tel-app .ig-fermer{top:max(10px,env(safe-area-inset-top));width:40px;height:40px}

/* ---- Référencement : les chiffres deux par deux ---- */
html.tel-app #vue-referencement .seo-grille-kpi{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html.tel-app #vue-referencement .seo-kpi{padding:12px 13px}
html.tel-app #vue-referencement .seo-kpi-valeur{font-size:25px}

/* ---- Scaling : ses tableaux glissent aussi, première colonne fixe ---- */
html.tel-app .sc-tableau-cadre{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
html.tel-app .sc-tableau th:first-child,html.tel-app .sc-tableau td:first-child{
  position:sticky;left:0;z-index:1;background:var(--carte);box-shadow:1px 0 0 var(--trait);
}

/* ---- la loupe des pages : ses petits tableaux tiennent dans l'écran ---- */
html.tel-app .loupe-page{overflow-x:auto;-webkit-overflow-scrolling:touch}
html.tel-app .loupe-sections td:not(:first-child){font-size:12px}
html.tel-app .mini-bar{width:40px;margin-left:6px}

/* filet : la page ne glisse jamais de côté (un tableau trop large glisse dans son cadre) */
html.tel-app .page{overflow-x:clip}

/* ---- Tricount : une fiche par ligne (le libellé en titre, puis date et montant…) ---- */
html.tel-app #vue-tricount .tc-tableau-cadre.tel-cadre-fiches{overflow:visible}
html.tel-app #vue-tricount table.tc-tableau.tel-fiches td{padding:0;border:0;background:none;text-align:left;white-space:normal;line-height:1.4}
html.tel-app #vue-tricount table.tc-tableau.tel-fiches tr{padding:12px 4px 13px;gap:8px 14px}
html.tel-app #vue-tricount table.tc-tableau.tel-fiches tr.tc-ligne--remb{background:rgba(47,211,165,0.06)}
html.tel-app #vue-tricount table.tc-tableau.tel-fiches tr.tc-ligne--edition{background:rgba(110,58,247,0.12)}
html.tel-app #vue-tricount table.tc-tableau.tel-fiches tr.tc-mois{display:block;padding:16px 4px 6px;border-bottom:1px solid var(--trait-fort)}
html.tel-app #vue-tricount table.tc-tableau.tel-fiches tr.tc-mois td{font-family:var(--display);font-weight:700;font-size:15px}
html.tel-app #vue-tricount table.tc-tableau.tel-fiches .tc-quoi{order:-1;grid-column:1 / -1;min-width:0;font-size:15px}
html.tel-app #vue-tricount table.tc-tableau.tel-fiches .tc-quoi::before{content:none}
html.tel-app #vue-tricount table.tc-tableau.tel-fiches td.tc-date{grid-column:auto;font-size:14px;font-weight:500;color:var(--texte-doux)}
html.tel-app #vue-tricount table.tc-tableau.tel-fiches td.tc-date::before{
  content:attr(data-tel-col);display:block;margin-bottom:2px;font-family:var(--corps);font-size:11px;
  font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-faible);
}
html.tel-app #vue-tricount table.tc-tableau.tel-fiches td:nth-child(4){display:block}
html.tel-app #vue-tricount table.tc-tableau.tel-fiches .tc-montant{font-size:15px}
html.tel-app #vue-tricount table.tc-tableau.tel-fiches .tc-sens{grid-column:1 / -1}
html.tel-app #vue-tricount table.tc-tableau.tel-fiches .tc-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;margin-left:-6px}
html.tel-app #vue-tricount table.tc-tableau.tel-fiches .tc-bouton-lien{min-height:38px}