:root{
  --fond:#F5F5F7;--carte:#FFFFFF;--texte:#000;--texte2:#3A3A3C;--texte3:#636366;--trait:#E5E5EA;--piste:#E5E5EA;
  --barre:rgba(236,236,240,.85);--survol:rgba(0,0,0,.05);--actif:rgba(0,0,0,.09);--seg:#E9E9EE;--segon:#FFFFFF;
  --bleu:#0066CC;--bleuP:#0088FF;--indigo:#5B4FE9;--indigoP:#6155F5;--vert:#1A7F37;--vertP:#34C759;
  --rouge:#D70015;--rougeP:#FF383C;--orange:#B25000;--orangeP:#FF8D28;--rose:#C9184A;--jaune:#946200;
  --tVert:#E6F6EA;--tRouge:#FFE9EA;--tOrange:#FFF1E5;--tBleu:#E5F1FF;--tIndigo:#ECEBFD;--tGris:#F2F2F7;
}
@media (prefers-color-scheme:dark){:root{
  --fond:#1C1C1E;--carte:#2C2C2E;--texte:#FFF;--texte2:#D1D1D6;--texte3:#AEAEB2;--trait:#3A3A3C;--piste:#3A3A3C;
  --barre:rgba(40,40,44,.9);--survol:rgba(255,255,255,.06);--actif:rgba(255,255,255,.12);--seg:#3A3A3C;--segon:#636366;
  --bleu:#4DA3FF;--indigo:#9A90FF;--vert:#4CD964;--rouge:#FF6961;--orange:#FFB340;--rose:#FF6F91;--jaune:#FFD60A;
  --tVert:rgba(52,199,89,.18);--tRouge:rgba(255,56,60,.18);--tOrange:rgba(255,141,40,.18);--tBleu:rgba(0,136,255,.2);--tIndigo:rgba(97,85,245,.22);--tGris:#3A3A3C;
}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--fond);color:var(--texte);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;font-size:13px;line-height:18px;-webkit-font-smoothing:antialiased}
a{color:var(--bleu)}
p{margin:0}
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fenetre{display:flex;height:100vh}
.barre{width:230px;flex:none;background:var(--barre);backdrop-filter:blur(30px);border-right:.5px solid var(--trait);display:flex;flex-direction:column;padding:14px 10px 12px;overflow-y:auto}
.recherche{display:flex;align-items:center;gap:6px;height:30px;padding:0 8px;border-radius:7px;background:var(--survol);color:var(--texte3);font:inherit;font-weight:600;margin-bottom:8px;border:none;width:100%;cursor:pointer}
.recherche:hover{background:var(--actif)}
.sb{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border-radius:6px;color:var(--texte);text-decoration:none}
.sb:hover{background:var(--survol)}
.sb.on{background:var(--actif)}
.sb.on .ic{color:var(--bleu)}
.sb .nb{margin-left:auto;color:var(--texte3);font-size:12px}
.sb.off{color:var(--texte3);cursor:default}
.sb.off:hover{background:none}
.sbh{font-size:11px;line-height:14px;font-weight:600;color:var(--texte3);margin:14px 8px 4px}
.profil{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;background:var(--survol)}
.avatar{width:32px;height:32px;border-radius:16px;background:var(--indigoP);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex:none}
main{flex:1;min-width:0;display:flex;flex-direction:column}
.outils{height:52px;flex:none;display:flex;align-items:center;gap:10px;padding:0 16px 0 24px;background:var(--carte);border-bottom:.5px solid var(--trait)}
.outils h1{margin:0;font-size:15px;line-height:20px;font-weight:700}
.outils-page{display:flex;align-items:center;gap:8px}
.contenu{flex:1;overflow-y:auto;padding:24px 28px 40px}
.tb{height:28px;min-width:28px;padding:0 8px;border-radius:6px;border:none;background:none;color:var(--texte2);display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;cursor:pointer}
.tb:hover{background:var(--survol)}
.tb.tourne .ic{animation:tour 1s linear infinite}
@keyframes tour{to{transform:rotate(360deg)}}
.segs{display:flex;padding:2px;border-radius:7px;background:var(--seg)}
.seg{height:24px;padding:0 12px;border:none;border-radius:5px;background:none;font:inherit;font-size:12px;font-weight:500;color:var(--texte);cursor:pointer}
.seg.on{background:var(--segon);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.12)}
.carte{background:var(--carte);border-radius:12px;padding:16px 20px;box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);min-width:0}
.grille{display:grid;gap:16px}
.ligne{display:flex;gap:16px;margin-top:16px;align-items:stretch}
.cap{font-size:12px;line-height:16px;color:var(--texte3)}
.b13{font-size:13px;line-height:16px;font-weight:600}
.big{font-size:26px;line-height:32px;font-weight:700;letter-spacing:.2px}
.h2{font-size:15px;line-height:20px;font-weight:600}
.h1p{font-size:26px;line-height:32px;font-weight:700;margin:0}
.entete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.kpi{display:flex;flex-direction:column;gap:6px}
.kpi .tete{display:flex;align-items:center;gap:6px;font-weight:600}
.piste{height:6px;border-radius:3px;background:var(--piste);overflow:hidden}
.piste>div{height:100%;border-radius:3px}
.liste{padding:8px 4px}
.liste .titre-sec{margin:4px 12px 4px;font-size:12px;font-weight:600;color:var(--texte3);text-transform:uppercase;letter-spacing:.2px}
.el{display:flex;align-items:center;gap:10px;min-height:44px;padding:5px 12px}
.el+.el{border-top:1px solid var(--trait)}
.el .txt{flex:1;min-width:0}
.el .txt p:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rond{width:18px;height:18px;border-radius:9px;border:1.5px solid #8E8E93;flex:none;position:relative}
/* zone cliquable de 44 px autour du rond (règles HIG) */
button.rond::before{content:"";position:absolute;inset:-13px}
.rond.fait{background:var(--vertP);border-color:var(--vertP);display:flex;align-items:center;justify-content:center}
.barre-txt{text-decoration:line-through;color:var(--texte3)}
.tag{font-size:11px;line-height:14px;font-weight:600;padding:2px 7px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;flex:none}
.pts{font-size:13px;font-weight:600;min-width:52px;text-align:right;flex:none}
.histo{display:flex;align-items:flex-end;gap:4px;border-bottom:1px solid var(--trait)}
.histo>div{flex:1;border-radius:3px 3px 0 0;position:relative}
.histo>div:hover::after{content:attr(data-v);position:absolute;bottom:100%;left:50%;transform:translate(-50%,-4px);background:var(--texte);color:var(--carte);font-size:11px;line-height:14px;padding:2px 6px;border-radius:5px;white-space:nowrap;z-index:2}
.axe{display:flex;justify-content:space-between;margin-top:6px}
.tableau{width:100%;border-collapse:collapse}
.tableau th{font-size:11px;font-weight:600;color:var(--texte3);text-align:left;padding:6px 10px;border-bottom:1px solid var(--trait);text-transform:uppercase;letter-spacing:.2px}
.tableau td{padding:9px 10px;border-bottom:1px solid var(--trait)}
.tableau tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums}
.erreur{background:var(--tRouge);color:var(--rouge);border-radius:12px;padding:16px 20px}
.vide{color:var(--texte3);padding:12px}
@media (max-width:1100px){.ligne{flex-direction:column}.ligne>.carte{width:auto!important}}
.btn{height:28px;padding:0 12px;border-radius:6px;border:none;background:var(--bleuP);color:#fff;font:inherit;font-weight:500;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.5;cursor:default}
.btn2{height:28px;padding:0 12px;border-radius:6px;border:none;background:var(--seg);color:var(--texte);font:inherit;font-weight:500;cursor:pointer}
.voile{position:fixed;inset:0;background:rgba(0,0,0,.25);display:flex;justify-content:center;align-items:flex-start;padding-top:52px;z-index:10}
.feuille{width:480px;max-width:calc(100vw - 32px);background:var(--carte);border-radius:0 0 12px 12px;box-shadow:0 20px 50px rgba(0,0,0,.3),0 0 0 .5px rgba(0,0,0,.2);padding:20px 22px 18px;animation:descend .18s ease-out}
@keyframes descend{from{transform:translateY(-16px);opacity:0}}
.champ{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.champ>label{font-size:12px;font-weight:600;color:var(--texte2)}
.saisie{height:30px;border-radius:6px;border:1px solid var(--trait);background:var(--fond);color:var(--texte);font:inherit;padding:0 10px;width:100%}
.saisie:focus{outline:3px solid rgba(0,136,255,.35);border-color:var(--bleuP)}
select.saisie{appearance:auto}
.feuille .segs{align-self:flex-start;flex-wrap:wrap}
.toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:20;pointer-events:none}
.toast{display:flex;align-items:center;gap:14px;background:var(--texte);color:var(--carte);padding:10px 16px;border-radius:10px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.25);pointer-events:auto;animation:monte .18s ease-out}
@keyframes monte{from{transform:translateY(10px);opacity:0}}
.toast-action{border:none;background:none;color:var(--bleuP);font:inherit;font-weight:700;cursor:pointer;padding:2px 4px;border-radius:5px}
.toast-action:hover{background:rgba(127,127,127,.2)}
.msg-err{color:var(--rouge);font-size:12px;margin-top:10px}
button.rond{background:none;padding:0;cursor:pointer}
button.rond:hover{border-color:var(--vertP);box-shadow:0 0 0 3px var(--tVert)}
button.rond.fait{background:var(--vertP)}
/* Compte : connexion et formules */
.fenetre[hidden]{display:none}
.ecran{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 16px;background:radial-gradient(1200px 600px at 50% -10%,var(--tIndigo),transparent 70%),var(--fond)}
.carte-auth{width:380px;max-width:100%;background:var(--carte);border-radius:16px;padding:28px 28px 22px;box-shadow:0 20px 50px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.08);display:flex;flex-direction:column}
.carte-auth .segs{display:flex}
.logo{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--bleuP),var(--indigoP));display:flex;align-items:center;justify-content:center;align-self:center;box-shadow:0 6px 16px rgba(97,85,245,.35)}
.btn.grand,.btn2.grand{height:34px;justify-content:center;width:100%;margin-top:18px;font-size:14px}
.formules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.formule{display:flex;flex-direction:column;padding:20px}
.formule ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:8px;flex:1}
.formule li{display:flex;gap:8px;align-items:flex-start}
.formule li .ic{margin-top:1px}
.formule.vedette{box-shadow:0 0 0 2px var(--bleuP),0 12px 30px rgba(0,136,255,.15)}
.formule.actuelle .grand{opacity:.6}
@media (max-width:760px){.formules{grid-template-columns:1fr}}
.menu{position:fixed;left:12px;bottom:66px;width:206px;background:var(--carte);border-radius:10px;padding:5px;box-shadow:0 12px 32px rgba(0,0,0,.22),0 0 0 .5px rgba(0,0,0,.15);z-index:15;animation:descend .12s ease-out}
.menu button{display:flex;align-items:center;gap:8px;width:100%;height:28px;padding:0 10px;border:none;background:none;border-radius:6px;font:inherit;color:var(--texte);cursor:pointer;text-align:left}
.menu button:hover{background:var(--bleuP);color:#fff}
.menu .sep{height:1px;background:var(--trait);margin:4px 6px}
/* Générateur de pages */
.generateur{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start}
.reglages{position:sticky;top:0}
.apercu{border:1.5px dashed var(--trait);border-radius:14px;padding:14px 16px;min-width:0}
.apercu .grille{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.choix{display:flex;flex-wrap:wrap;gap:6px}
.pastille{width:32px;height:32px;border-radius:8px;border:none;background:var(--seg);color:var(--texte2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pastille.on{background:var(--bleuP);color:#fff}
.couleur{width:24px;height:24px;border-radius:12px;border:none;cursor:pointer}
.couleur.on{box-shadow:0 0 0 2px var(--carte),0 0 0 4px currentColor;outline:2px solid var(--texte3);outline-offset:2px}
.case{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:6px;background:var(--seg);font-weight:500;cursor:pointer}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:1000px){.generateur{grid-template-columns:1fr}.reglages{position:static}}
/* Base de données : historique */
.bandeau{display:flex;align-items:center;gap:10px;background:var(--tIndigo);color:var(--indigo);border-radius:12px;padding:10px 14px;margin-bottom:16px;font-weight:500}
.bandeau b{font-weight:700}
.resultat{padding:10px 0;border-top:1px solid var(--trait)}
.champs{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px}
mark{background:rgba(255,204,0,.45);color:inherit;border-radius:3px;padding:0 1px}
button[hidden]{display:none!important}
.pastille-c{display:inline-block;width:8px;height:8px;border-radius:4px;margin-right:6px;vertical-align:1px}
.saisie.num{text-align:right;font-variant-numeric:tabular-nums}
/* Cartes de l'Accueil qui mènent au détail */
a.cliquable{color:inherit;text-decoration:none;display:block;cursor:pointer;transition:box-shadow .15s,transform .15s}
a.kpi.cliquable{display:flex}
a.cliquable:hover{box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 6px 18px rgba(0,0,0,.1);transform:translateY(-1px)}
a.cliquable:focus-visible{outline:3px solid rgba(0,136,255,.45);outline-offset:2px}
.chevron{margin-left:auto;padding-left:6px;color:var(--texte3);font-size:18px;font-weight:500;line-height:1;opacity:0;transition:opacity .15s}
.h2 .chevron{margin-left:6px}
a.cliquable:hover .chevron{opacity:1}
/* Classement */
.saisie.code{text-transform:uppercase;letter-spacing:4px;font-weight:600;font-size:16px;text-align:center}
.entete-groupe{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.code-groupe{display:inline-flex;flex-direction:column;align-items:center;border:1.5px dashed var(--bleuP);background:var(--tBleu);color:var(--bleu);border-radius:8px;padding:3px 12px;font:inherit;font-weight:700;letter-spacing:3px;font-size:15px;cursor:pointer;line-height:18px}
.code-groupe .cap{letter-spacing:0;font-weight:500;font-size:10px;line-height:12px;color:var(--bleu)}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;padding-top:8px}
.marche{flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;text-align:center}
.marche .avatar{box-shadow:0 0 0 3px var(--carte),0 4px 10px rgba(0,0,0,.15)}
.socle{width:100%;margin-top:8px;border-radius:10px 10px 0 0;background:linear-gradient(var(--tIndigo),transparent);display:flex;align-items:flex-start;justify-content:center;padding-top:8px;font-size:22px}
.m1 .socle{height:84px;background:linear-gradient(rgba(255,204,0,.35),transparent)}
.m2 .socle{height:58px;background:linear-gradient(rgba(174,174,178,.4),transparent)}
.m3 .socle{height:40px;background:linear-gradient(rgba(255,141,40,.3),transparent)}
.podium.petit .socle{font-size:16px;padding-top:4px}
.podium.petit .m1 .socle{height:44px}.podium.petit .m2 .socle{height:30px}.podium.petit .m3 .socle{height:20px}
.marche.vide{visibility:hidden}
.rang{width:20px;text-align:center;font-weight:700;color:var(--texte3);flex:none}
.el.moi{background:var(--tBleu);border-radius:8px}
.mini{display:flex;align-items:flex-end;gap:2px;height:22px;flex:none}
.mini i{width:4px;border-radius:2px;background:var(--indigoP);opacity:.55}
.defi{padding:10px 0;border-top:1px solid var(--trait)}
.defi:first-of-type{margin-top:8px}
.evt{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--trait)}
.evt .avatar{flex:none}
.reactions{display:flex;gap:4px;flex:none}
.reac{height:26px;min-width:34px;padding:0 7px;border-radius:13px;border:1px solid var(--trait);background:var(--carte);font:inherit;font-size:12px;cursor:pointer;color:var(--texte2)}
.reac:hover{background:var(--survol)}
.reac.on{background:var(--tBleu);border-color:var(--bleuP);color:var(--bleu);font-weight:600}
.interrupteur{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;cursor:pointer}
.interrupteur input{appearance:none;width:38px;height:22px;border-radius:11px;background:var(--piste);position:relative;cursor:pointer;flex:none;transition:background .15s}
.interrupteur input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:9px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.interrupteur input:checked{background:var(--vertP)}
.interrupteur input:checked::after{left:18px}
.champ[hidden]{display:none}
/* Accueil : liste du jour compacte et widget Classement */
.compacte .el{min-height:38px;padding:3px 12px}
.compacte .el .txt p:last-child{font-size:11px;line-height:14px}
.w-rang{display:flex;align-items:center;gap:8px;min-height:34px;border-top:1px solid var(--trait);padding:0 4px}
.w-rang .rang{width:22px;font-size:14px}
.w-rang.moi{background:var(--tBleu);border-radius:6px;border-top-color:transparent}
.w-rang .avatar{flex:none}
.etapes{margin:16px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13px}
/* Engrenage des objectifs : visible au survol de la ligne */
.el.obj{position:relative}
.engrenage{width:26px;height:26px;margin-right:-6px;border:none;border-radius:6px;background:none;color:var(--texte3);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;flex:none;transition:opacity .12s}
.el.obj:hover .engrenage,.engrenage:focus-visible{opacity:1}
.engrenage:hover{background:var(--survol);color:var(--texte)}
@media (hover:none){.engrenage{opacity:.6}}
.btn2.danger{color:var(--rouge);display:inline-flex;align-items:center;gap:6px}
.btn2.danger.confirmer{background:var(--rougeP);color:#fff}
.compacte .el .txt p:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Mes catégories (v15) */
.onglets-cat{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px;padding:3px;background:var(--tGris);border-radius:8px;width:fit-content;max-width:100%}
.onglets-cat .seg{height:28px}
.puces{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.puce{display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:0 6px 0 12px;border-radius:15px;background:var(--tGris);font-size:13px}
.puce .x{border:none;background:none;color:var(--texte2);font:inherit;font-size:15px;line-height:1;width:22px;height:22px;border-radius:11px;cursor:pointer;opacity:0;transition:opacity .15s}
.puce:hover .x,.puce .x:focus-visible,.puce .x.confirmer{opacity:1}
.puce .x:hover{background:rgba(0,0,0,.08)}
.puce .x.confirmer{width:auto;padding:0 10px;font-size:12px;font-weight:600;color:#fff;background:var(--rouge)}
@media (hover:none){.puce .x{opacity:1}}
/* Projets (v16) */
.tableau.projets tr .engrenage{margin:0}
.tableau.projets tr:hover .engrenage{opacity:1}
select.tag.statut{appearance:none;-webkit-appearance:none;border:none;font:inherit;font-size:11px;font-weight:600;padding:2px 22px 2px 8px;border-radius:6px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%238E8E93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center}
select.tag.statut:focus-visible{outline:2px solid var(--bleu);outline-offset:1px}
select.tag.statut option{background:var(--carte,#fff);color:var(--texte)}
.note-pj{font-weight:400;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* ---------- Ergonomie (v17) ---------- */
:focus-visible{outline:3px solid rgba(0,136,255,.5);outline-offset:2px}
.saisie:focus-visible{outline-offset:0}
kbd{font:inherit;font-size:11px;line-height:14px;font-weight:600;color:var(--texte3);background:var(--carte);border:1px solid var(--trait);border-bottom-width:2px;border-radius:5px;padding:0 5px;white-space:nowrap}
.recherche kbd{background:none}
/* voyant de synchro */
.sync{width:8px;height:8px;border-radius:4px;background:var(--vertP);flex:none;margin-right:-4px}
.sync.en-cours{background:var(--orangeP);animation:pouls 1s ease-in-out infinite}
.sync.echec{background:var(--rougeP)}
@keyframes pouls{50%{opacity:.35}}
/* barre latérale : section repliable */
.sbh.repli{display:flex;align-items:center;gap:4px;width:calc(100% - 16px);border:none;background:none;font-family:inherit;cursor:pointer;padding:0;text-align:left}
.sbh.repli:hover{color:var(--texte2)}
.sbh .fleche{font-size:13px;line-height:1}
/* lignes d'objectif */
.el .txt[data-ouvrir]{cursor:pointer}
.el .txt[data-ouvrir]:hover p:first-child{color:var(--bleu)}
.el.obj.sel{background:var(--tBleu);border-radius:8px;box-shadow:inset 3px 0 0 var(--bleuP)}
.el.obj.sel+.el,.el.obj.sel{border-top-color:transparent}
.retard{color:var(--rouge)}
.lien-pj{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.lien-pj:hover{color:var(--bleu)}
.lien-pj.fort{border-bottom:none}
.lien-pj.fort:hover{text-decoration:underline}
button.tag-report{border:none;font-family:inherit;cursor:pointer;background:var(--tOrange);color:var(--orange)}
button.tag-report:hover{filter:brightness(.95);box-shadow:0 0 0 1px var(--orangeP)}
.el.obj:hover .engrenage[data-report]{opacity:1}
.btn2.petit{height:24px;padding:0 9px;font-size:12px;flex:none}
/* Accueil : en retard, état vide */
.bloc-retard{margin:0 4px 4px;border-radius:8px;background:var(--tRouge)}
.bloc-retard summary{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 10px;cursor:pointer;list-style:none}
.bloc-retard summary::-webkit-details-marker{display:none}
.bloc-retard summary::before{content:"›";font-size:15px;color:var(--rouge);transition:transform .15s}
.bloc-retard[open] summary::before{transform:rotate(90deg)}
.bloc-retard summary .cap{margin-left:auto}
.bloc-retard .el{background:var(--carte)}
.bloc-retard .el:last-of-type{border-radius:0 0 8px 8px}
.plus-lien{display:block;padding:8px 12px 2px;font-size:12px;text-decoration:none}
.vide-action{padding:14px 12px;color:var(--texte3)}
a.btn2{display:inline-flex;align-items:center;text-decoration:none}
/* ajout rapide */
.rapide{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 8px 6px;padding:0 10px;border-radius:8px;background:var(--fond);border:1px solid transparent}
.rapide:focus-within{border-color:var(--bleuP);box-shadow:0 0 0 3px rgba(0,136,255,.2);background:var(--carte)}
.rapide input{flex:1;min-width:0;height:34px;border:none;background:none;font:inherit;color:var(--texte);outline:none}
.rapide input::placeholder{color:var(--texte3)}
.rapide-ap{display:none;width:100%;padding:0 0 8px 24px}
.rapide:focus-within .rapide-ap{display:block}
/* filtres de la page Objectifs */
.filtres{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filtres select.saisie{width:auto;max-width:200px;height:28px;background:var(--carte)}
/* menus flottants (reporter) */
.menu.menu-flottant{left:auto;bottom:auto;width:auto;min-width:240px}
.menu button:hover .cap,.menu button:focus-visible .cap{color:inherit}
.menu button:focus-visible{background:var(--bleuP);color:#fff;outline:none}
.ligne-date{display:flex;align-items:center;gap:8px;padding:4px 10px;font-size:13px}
.ligne-date .saisie{height:26px;width:auto;flex:1}
/* XP qui s'envole, fête du niveau */
.envol{position:fixed;transform:translate(-50%,0);font-weight:700;font-size:14px;color:var(--vert);pointer-events:none;z-index:30;animation:envol .95s ease-out forwards}
@keyframes envol{to{transform:translate(-50%,-46px);opacity:0}}
.feuille.fete{display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:16px;margin-top:12vh;animation:pop .3s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.85);opacity:0}}
/* graphique cliquable */
.histo.cliquable>div{cursor:pointer;transition:opacity .1s}
.histo.cliquable>div:hover{opacity:1!important}
/* palette Ctrl+K */
.palette-voile{padding-top:12vh;align-items:flex-start}
.palette{width:620px;max-width:calc(100vw - 32px);background:var(--carte);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.2);overflow:hidden;animation:descend .15s ease-out}
.palette-tete{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--trait);color:var(--texte3)}
.palette-tete .ic{width:18px;height:18px}
.palette-tete input{flex:1;height:50px;border:none;background:none;font:inherit;font-size:16px;color:var(--texte);outline:none}
.palette-res{max-height:56vh;overflow-y:auto;padding:6px}
.palette-g{font-size:11px;font-weight:600;color:var(--texte3);text-transform:uppercase;letter-spacing:.3px;padding:8px 10px 4px}
.palette-el{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;border-radius:8px;cursor:pointer}
.palette-el .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-el.on{background:var(--bleuP);color:#fff}
.palette-el.on .cap,.palette-el.on kbd{color:inherit;border-color:rgba(255,255,255,.5);background:none}
.palette-pied{padding:8px 14px;border-top:1px solid var(--trait)}
/* page Réglages */
.page-reglages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.page-reglages .rg-large{grid-column:1/-1}
@media (max-width:1000px){.page-reglages{grid-template-columns:1fr}}

/* ---------- Téléphone (v20) : écran étroit, 1080×1920 ≈ 360 à 430 px de large ---------- */
.seul-tel,.onglets-tel,.voile-barre{display:none}
@media (max-width:760px){
  body{font-size:15px;line-height:20px;-webkit-text-size-adjust:100%}
  .fenetre{height:100dvh}
  /* barre latérale en tiroir */
  .barre{position:fixed;top:0;bottom:0;left:0;z-index:12;width:min(300px,84vw);padding:calc(14px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));background:var(--carte);transform:translateX(-102%);transition:transform .25s ease;box-shadow:none}
  .barre-ouverte .barre{transform:none;box-shadow:0 0 40px rgba(0,0,0,.25)}
  .voile-barre{display:block;position:fixed;inset:0;z-index:11;background:rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .25s}
  .barre-ouverte .voile-barre{opacity:1;pointer-events:auto}
  .sb{height:44px;font-size:16px;gap:12px}
  .sb .ic{width:20px;height:20px}
  .recherche{height:36px;font-size:15px}
  .recherche kbd{display:none}
  .menu{z-index:16;left:12px;bottom:calc(76px + env(safe-area-inset-bottom))}
  .menu button{height:44px;font-size:15px}
  /* barre du haut : titre + boutons, les outils de la page passent dessous et défilent */
  .seul-tel{display:inline-flex}
  .outils{height:auto;min-height:52px;flex-wrap:wrap;gap:6px 8px;padding:calc(6px + env(safe-area-inset-top)) 10px 6px 6px}
  .outils h1{font-size:17px;line-height:22px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .outils>span[style*="flex:1"]{display:none}
  .outils .tb{height:44px;min-width:44px}
  .outils .tb .ic{width:20px;height:20px}
  #etat{display:none}
  #fin-journee{height:36px;width:36px;padding:0;justify-content:center;border-radius:18px}
  #fin-journee .lib{display:none}
  .outils-page{order:10;width:calc(100% + 16px);margin:0 -10px 0 -6px;padding:2px 10px 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .outils-page:empty{display:none}
  .outils-page::-webkit-scrollbar{display:none}
  .outils-page>*{flex:none}
  .outils-page>.segs{flex:1 0 auto}
  .outils-page>.segs .seg{flex:1}
  .outils-page .segs~.btn-nouvel{width:36px;padding:0;justify-content:center;border-radius:18px}
  .outils-page .segs~.btn-nouvel .lib{display:none}
  .el.obj .engrenage[data-reglage],.el.obj .tag-report{display:none}
  .seg{height:32px;padding:0 14px;font-size:14px}
  .btn,.btn2{height:36px;padding:0 14px;font-size:15px}
  .btn2.petit{height:30px;font-size:13px}
  .tb{min-height:36px}
  /* contenu : une colonne, marges de 16 px, place pour la barre d'onglets */
  .contenu{padding:16px 16px calc(96px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
  .ligne,.colonnes{flex-direction:column!important;align-items:stretch!important;gap:12px}
  .ligne{margin-top:12px}
  .ligne>*,.colonnes>*{width:auto!important;min-width:0!important;flex:none!important}
  .grille{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .grille[style*="grid-template-columns:1fr;"],.formules,.page-reglages,.generateur,.deux{grid-template-columns:1fr!important}
  .carte{padding:14px 16px;border-radius:14px}
  .big{font-size:24px;line-height:30px}
  .h1p{font-size:22px;line-height:28px}
  .h2{font-size:17px;line-height:22px}
  .cap{font-size:13px;line-height:17px}
  .kpi .tete{font-size:14px}
  .entete{flex-wrap:wrap;gap:4px 12px}
  .el{min-height:50px;padding:6px 10px;gap:12px}
  .compacte .el{min-height:48px}
  .rond{width:22px;height:22px;border-radius:11px}
  .engrenage{width:36px;height:36px;opacity:.6}
  .pts{min-width:44px}
  .astuce-clavier,kbd{display:none}
  .filtres{gap:8px}
  .filtres select.saisie{flex:1 1 140px;max-width:none;height:36px}
  .filtres>span[style*="flex:1"]{display:none}
  /* champs : 16 px pour que l'iPhone ne zoome pas */
  .saisie,.rapide input,.palette-tete input{font-size:16px}
  .saisie{height:40px}
  .rapide input{height:44px}
  /* tableaux trop larges : ils défilent dans leur carte */
  .tableau{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .note-pj{max-width:200px}
  /* fenêtres : feuilles qui montent du bas (style iOS) */
  .voile{align-items:flex-end;padding-top:0}
  .feuille{width:100%;max-width:100%;max-height:92dvh;overflow-y:auto;border-radius:16px 16px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));animation:monteFeuille .22s ease-out}
  .feuille.fete{align-self:center;width:calc(100% - 32px);border-radius:16px;margin:0 auto 30vh}
  @keyframes monteFeuille{from{transform:translateY(40px);opacity:0}}
  .palette-voile{align-items:flex-start;padding-top:calc(10px + env(safe-area-inset-top))}
  .palette-el{min-height:44px}
  .menu.menu-flottant{max-width:calc(100vw - 24px)}
  .toasts{bottom:calc(84px + env(safe-area-inset-bottom));width:calc(100% - 32px)}
  .toast{max-width:100%}
  .ecran{padding:24px 16px}
  .carte-auth{width:100%!important;padding:24px 20px 20px}
  /* barre d'onglets en bas (comme les apps iPhone) */
  .onglets-tel{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9;padding:4px 4px env(safe-area-inset-bottom);background:var(--barre);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-top:.5px solid var(--trait)}
  .ot{flex:1;min-width:0;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:none;font:inherit;font-size:11px;line-height:13px;font-weight:500;color:var(--texte3);text-decoration:none;cursor:pointer;position:relative}
  .ot .ic{width:24px;height:24px}
  .ot.on{color:var(--bleuP)}
  .ot span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pastille-nb{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--rougeP);color:#fff;font-style:normal;font-size:11px;line-height:18px;font-weight:600;text-align:center}
}

/* v22 : pages perso avec leurs propres données (éditeur de champs, formulaire de saisie, liste des saisies) */
.ligne-champ{display:grid;grid-template-columns:minmax(0,1fr) 120px 28px;gap:6px;align-items:center}
.ligne-champ .options{grid-column:1/-1}
.ligne-champ .tb:disabled{opacity:.3;cursor:default}
.champs-saisie{display:flex;flex-wrap:wrap;gap:0 12px;align-items:flex-end}
.champs-saisie .champ{flex:1 1 140px;min-width:0}
.champs-saisie .champ.large{flex:2 1 240px}
.champs-saisie .champ.bouton{flex:0 0 auto}
.champs-saisie .lib-case{font-size:12px;font-weight:600;color:var(--texte2)}
.champs-saisie .case{height:30px}
.tableau.saisies td.actions{width:64px;white-space:nowrap;text-align:right;padding:4px 6px}
.tableau.saisies td.actions .tb{opacity:.5}
.tableau.saisies tr:hover td.actions .tb,.tableau.saisies tr.sel td.actions .tb{opacity:1}
.tableau.saisies tr.sel td{background:var(--survol)}
.apercu [inert]{pointer-events:none}
@media (max-width:760px){
  .champs-saisie .champ,.champs-saisie .champ.large{flex:1 1 100%}
  .champs-saisie .champ.bouton .btn{width:100%;justify-content:center}
  .ligne-champ{grid-template-columns:minmax(0,1fr) 110px 44px}
  .tableau.saisies td.actions .tb{opacity:1}
  .outils-page .seg{white-space:nowrap}
  .outils-page .tb{min-width:36px;padding:0 4px}
}