/*
 * Horizon Projets — système de design (lot 3), d'après les planches 1 et 2
 * validées par Kad le 29/09 (« tout est vraiment parfait »).
 * Chaque élément n'est dessiné et codé qu'une fois. Préfixe : hpm-ds-.
 *
 * Couleurs : le violet, le bleu et le dégradé se règlent (Réglages ›
 * Organisation › Couleurs de la marque) ; les couleurs de sens restent fixes.
 * Jamais une couleur seule : toujours un mot ou une icône avec.
 * Liens d'action « → » en bleu, titres en violet : l'équilibre des deux couleurs (Kad, 1/10).
 * Angles droits partout, sauf les bulles (6 px), les avatars et les boutons ronds.
 * Espacements en multiples de 4. Police : celle du thème du site.
 *
 * @since 2.0.0-alpha.21
 */

:root{
  --hpm-ds-violet:var(--hpm-t-8224e3,#8224E3);
  --hpm-ds-bleu:var(--hpm-t-0068e8,#0068E8);
  --hpm-ds-degrade:linear-gradient(90deg,var(--hpm-ds-bleu),var(--hpm-ds-violet));
  --hpm-ds-violet-pale:var(--hpm-t-f4ecfd,#f4ecfd);
  --hpm-ds-bleu-pale:var(--hpm-t-f0f7ff,#f0f7ff);
  --hpm-ds-bulle:var(--hpm-t-f0f7ff,#f0f7ff);
  --hpm-ds-bulle-reponse:var(--hpm-t-fcfaff,#FCFAFF);
  --hpm-ds-vert:#0C8560;   --hpm-ds-vert-t:#0c8560;
  --hpm-ds-orange:#ff8a00; --hpm-ds-orange-t:#b85600;   /* alpha.64 : c'était #c95f00 (4,1 sur blanc) ; 4,8 */
  --hpm-ds-rouge:#ef2b2b;  --hpm-ds-rouge-t:#d93025;
  --hpm-ds-texte:#1f2330;
  --hpm-ds-doux:#5b6072;
  --hpm-ds-pale:#686d82;   /* 2.0.0-alpha.64 : c'était #8a8fa3 (contraste 3,2 sur blanc) ; 5,1 maintenant — Kad, 2/10 : « que ce soit lisible » */
  --hpm-ds-trait:#e3e5ec;
  --hpm-ds-fond:#f5f6fa;
  --hpm-ds-blanc:#fff;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
/* 2.0.0-alpha.59 : la racine fixe elle-même sa police (Arial — Kad, 2/10) et remet à zéro ce qu'un texte environnant
   pourrait lui léguer (italique, gras, capitales, espacement, blancs conservés) : l'espace ne dépend plus de la balise
   ou du style dans lequel son code court a été posé. Dans l'administration, on garde la police de WordPress. */
.hpm-ds{font-family:var(--hpm-ds-police,Arial,Helvetica,sans-serif);font-size:calc(15px * var(--hpm-fs,1));line-height:1.6;color:var(--hpm-ds-texte);font-style:normal;font-weight:400;font-variant:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;text-decoration:none;text-indent:0;text-align:start;white-space:normal;word-break:normal}
body.wp-admin .hpm-ds{font-family:inherit}
.hpm-ds *,.hpm-ds *::before,.hpm-ds *::after{box-sizing:border-box}
/* 2.0.0-alpha.64 — le bouclier, côté mise en forme. `[Kad]` 2/10 : dans un bandeau, les listes et la recherche étaient 4 px
   plus haut que les boutons. La feuille « reboot » de Bootstrap, que beaucoup de thèmes embarquent (le « code » rose des
   captures du matin en venait), donne une marge de 8 px sous chaque <label> : or une liste, une recherche, une case à
   cocher de l'outil sont des <label>. Reproduit sur le banc avec cette feuille (banc_theme_kad = 3), puis relevé de tout
   ce qu'elle change d'autre dans l'outil. Ces règles sont EN TÊTE de la feuille : à poids égal, les règles de l'outil
   écrites plus bas l'emportent.
   · la racine compte sa bordure dans sa largeur, thème ou pas (elle changeait de 2 px selon le thème) ;
   · un élément marqué « hidden » est caché : sans cela, toute règle « display » le remontrait — la barre « 0 tâche
     sélectionnée » de la Liste restait affichée en permanence ;
   · pas de marge sous un <label> ; les intitulés d'une liste de propriétés (<dt>) ne passent pas en gras : dit ici avec
     un poids nul (« :where ») pour ne gêner aucune règle de l'outil, et redit avec du poids, élément par élément, là où le
     relevé a montré la fuite (hpm-ep2.css, hpm-accueil2.css). */
.hpm-ds{box-sizing:border-box}
.hpm-ds [hidden]{display:none!important}
:where(.hpm-ds) label{margin-bottom:0}
:where(.hpm-ds) dt{font-weight:400}
.hpm-ds :focus-visible{outline:2px solid var(--hpm-ds-violet);outline-offset:2px}
.hpm-ds-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 2. Typographie ───────────────────────────────────────────────────── */
.hpm-ds-t-page{font-size:calc(25px * var(--hpm-fs,1));line-height:1.3;font-weight:700;color:var(--hpm-ds-violet);margin:0}
.hpm-ds-t-section{font-size:calc(19px * var(--hpm-fs,1));line-height:1.35;font-weight:700;color:var(--hpm-ds-violet);margin:0}
.hpm-ds-t-bloc{font-size:calc(16px * var(--hpm-fs,1));line-height:1.4;font-weight:700;color:var(--hpm-ds-violet);margin:0}
.hpm-ds-doux{font-size:calc(13.5px * var(--hpm-fs,1));color:var(--hpm-ds-doux)}
.hpm-ds-etiquette{font-size:calc(13px * var(--hpm-fs,1));font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.hpm-ds-chiffre{font-size:calc(34px * var(--hpm-fs,1));line-height:1.1;font-weight:700;color:var(--hpm-ds-violet)}

/* ── 3. Boutons : principal, secondaire, neutre, lien ; danger ; petit ── */
.hpm-ds-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hpm-ds-trait);background:var(--hpm-ds-blanc);color:var(--hpm-ds-texte);
  padding:8px 16px;font:inherit;font-size:calc(15px * var(--hpm-fs,1));line-height:1.4;font-weight:500;border-radius:0;cursor:pointer;text-decoration:none;white-space:nowrap}
.hpm-ds-btn:hover{border-color:#c9cedb}
.hpm-ds-btn--principal{background:var(--hpm-ds-bleu);border-color:var(--hpm-ds-bleu);color:#fff;font-weight:700}
.hpm-ds-btn--principal:hover{filter:brightness(.94);border-color:var(--hpm-ds-bleu)}
.hpm-ds-btn--secondaire{border-color:var(--hpm-ds-violet);color:var(--hpm-ds-violet);font-weight:700}
.hpm-ds-btn--lien{border-color:transparent;background:none;color:var(--hpm-ds-bleu);font-weight:700;padding-left:4px;padding-right:4px}
.hpm-ds-btn--lien:hover{text-decoration:underline;border-color:transparent}
.hpm-ds-btn--danger{border-color:var(--hpm-ds-rouge);color:var(--hpm-ds-rouge-t)}
.hpm-ds-btn--petit{padding:5px 12px;font-size:calc(14px * var(--hpm-fs,1))}
.hpm-ds-btn[disabled],.hpm-ds-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.hpm-ds-btn--principal[disabled]{background:var(--hpm-ds-bleu);opacity:.45}
.hpm-ds-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
/* Bascule de vue (Liste · Kanban · Gantt) : des boutons, l'actif en violet pâle */
.hpm-ds-bascule{display:inline-flex;flex-wrap:wrap}
.hpm-ds-bascule>*{border:1px solid var(--hpm-ds-trait);background:#fff;padding:5px 12px;font:inherit;font-size:calc(14px * var(--hpm-fs,1));cursor:pointer;margin:0;color:var(--hpm-ds-texte)}
.hpm-ds-bascule>*+*{margin-left:-1px}
.hpm-ds-bascule>[aria-pressed="true"],.hpm-ds-bascule>.on{border-color:var(--hpm-ds-violet);background:var(--hpm-ds-violet-pale);color:var(--hpm-ds-violet);font-weight:700;position:relative;z-index:1}

/* ── 4. Champs de saisie ──────────────────────────────────────────────── */
.hpm-ds-champ{display:block;margin:0 0 16px}
.hpm-ds-champ>label,.hpm-ds-champ>.hpm-ds-libelle{display:block;font-weight:700;font-size:calc(15px * var(--hpm-fs,1));margin-bottom:6px;color:var(--hpm-ds-bleu)}
.hpm-ds-champ input[type=text],.hpm-ds-champ input[type=email],.hpm-ds-champ input[type=number],.hpm-ds-champ input[type=date],
.hpm-ds-champ input[type=url],.hpm-ds-champ input[type=search],.hpm-ds-champ select,.hpm-ds-champ textarea,.hpm-ds-saisie{
  width:100%;border:1px solid var(--hpm-ds-trait);background:#fff;color:var(--hpm-ds-texte);font:inherit;font-size:calc(15px * var(--hpm-fs,1));line-height:1.5;padding:9px 12px;border-radius:0;box-shadow:none;max-width:none;min-height:0}
.hpm-ds-champ input:focus,.hpm-ds-champ select:focus,.hpm-ds-champ textarea:focus,.hpm-ds-saisie:focus{outline:none;border-color:var(--hpm-ds-violet);box-shadow:0 0 0 2px var(--hpm-ds-violet-pale)}
.hpm-ds-champ ::placeholder{color:var(--hpm-ds-pale)}
.hpm-ds-aide{display:block;font-size:calc(13.5px * var(--hpm-fs,1));color:var(--hpm-ds-doux);margin-top:5px;line-height:1.5}
.hpm-ds-champ.erreur input,.hpm-ds-champ.erreur select,.hpm-ds-champ.erreur textarea,.hpm-ds-saisie[aria-invalid="true"]{border-color:var(--hpm-ds-rouge)}
.hpm-ds-erreur{display:block;font-size:calc(13.5px * var(--hpm-fs,1));color:var(--hpm-ds-rouge-t);margin-top:5px}
.hpm-ds-cases{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.hpm-ds-case{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:calc(15px * var(--hpm-fs,1))}
.hpm-ds-case input[type=checkbox],.hpm-ds-case input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--hpm-ds-violet)}
/* Interrupteur */
.hpm-ds-interrupteur{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.hpm-ds-interrupteur input{position:absolute;opacity:0;width:1px;height:1px}
.hpm-ds-interrupteur .piste{width:44px;height:24px;border-radius:12px;background:#c9cedb;position:relative;transition:background .15s}
.hpm-ds-interrupteur .piste::after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.hpm-ds-interrupteur input:checked+.piste{background:var(--hpm-ds-violet)}
.hpm-ds-interrupteur input:checked+.piste::after{left:23px}
.hpm-ds-interrupteur input:focus-visible+.piste{outline:2px solid var(--hpm-ds-violet);outline-offset:2px}

/* ── 5. Pastilles : statut, priorité, santé — toujours un mot ─────────── */
.hpm-ds-pastille{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hpm-ds-trait);color:var(--hpm-ds-doux);background:#fff;
  font-size:calc(13.5px * var(--hpm-fs,1));line-height:1.5;padding:2px 10px;white-space:nowrap}
.hpm-ds-pastille--bleu{border-color:var(--hpm-ds-bleu);color:var(--hpm-ds-bleu)}
.hpm-ds-pastille--violet{border-color:var(--hpm-ds-violet);color:var(--hpm-ds-violet)}
.hpm-ds-pastille--vert{border-color:var(--hpm-ds-vert);color:var(--hpm-ds-vert-t)}
.hpm-ds-pastille--orange{border-color:var(--hpm-ds-orange);color:var(--hpm-ds-orange-t)}
.hpm-ds-pastille--rouge{border-color:var(--hpm-ds-rouge);color:var(--hpm-ds-rouge-t)}
.hpm-ds-pastille--plein{background:var(--hpm-ds-vert);border-color:var(--hpm-ds-vert);color:#fff}
.hpm-ds-pastille--point::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.hpm-ds-pastille--vert.hpm-ds-pastille--point::before{background:var(--hpm-ds-vert)}
.hpm-ds-pastille--orange.hpm-ds-pastille--point::before{background:var(--hpm-ds-orange)}
.hpm-ds-pastille--rouge.hpm-ds-pastille--point::before{background:var(--hpm-ds-rouge)}
.hpm-ds-pastille .hpm-ds-ico{width:13px;height:13px}

/* ── 6. Personnes ─────────────────────────────────────────────────────── */
.hpm-ds-avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--c,var(--hpm-t-3b2f7a,#3b2f7a));color:#fff;
  font-size:calc(13px * var(--hpm-fs,1));font-weight:700;letter-spacing:.2px;flex:none;overflow:hidden;border:2px solid #fff}
.hpm-ds-avatar img{width:100%;height:100%;object-fit:cover}
.hpm-ds-avatar--petit{width:26px;height:26px;font-size:max(calc(11px * var(--hpm-fs,1)),var(--hpm-fs-min,0px))}
.hpm-ds-avatars{display:inline-flex}
.hpm-ds-avatars .hpm-ds-avatar+.hpm-ds-avatar{margin-left:-10px}
.hpm-ds-avatar--plus{background:#8a8fa3}
.hpm-ds-personne{display:flex;align-items:center;gap:12px}
.hpm-ds-personne b{display:block;font-size:calc(15px * var(--hpm-fs,1))}
.hpm-ds-personne small{display:block;font-size:calc(13.5px * var(--hpm-fs,1));color:var(--hpm-ds-doux)}

/* ── 7. Icônes ────────────────────────────────────────────────────────── */
.hpm-ds-ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter;vertical-align:-4px}
.hpm-ds-tuile-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--hpm-ds-bleu-pale);color:var(--hpm-ds-bleu)}

/* ── 8. Blocs et panneaux ─────────────────────────────────────────────── */
.hpm-ds-bloc{background:#fff;border:1px solid var(--hpm-ds-trait)}
.hpm-ds-bloc__tete{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--hpm-ds-trait)}
.hpm-ds-bloc__tete .hpm-ds-t-bloc{flex:1}
.hpm-ds-bloc__tete a,.hpm-ds-bloc__tete .hpm-ds-lien{font-size:calc(14px * var(--hpm-fs,1));font-weight:700;color:var(--hpm-ds-bleu);text-decoration:none}
.hpm-ds-bloc__corps{padding:14px 18px}
.hpm-ds-bloc--sens{border-top:4px solid var(--sens,var(--hpm-ds-violet))}
.hpm-ds-panneau{position:relative;overflow:hidden;background:#fff;border:1px solid var(--hpm-ds-trait);border-top:4px solid var(--sens,var(--hpm-ds-violet));padding:14px 18px;min-height:120px}
.hpm-ds-panneau .n{font-size:calc(34px * var(--hpm-fs,1));line-height:1.1;font-weight:700;color:var(--sens-t,var(--hpm-ds-violet))}
.hpm-ds-panneau .l{display:block;margin:2px 0 6px;font-size:calc(15px * var(--hpm-fs,1))}
.hpm-ds-panneau a{font-size:calc(14px * var(--hpm-fs,1));font-weight:700;color:var(--hpm-ds-bleu);text-decoration:none;position:relative;z-index:1}
.hpm-ds-panneau .filigrane{position:absolute;right:-6px;bottom:-10px;width:92px;height:92px;color:var(--sens,var(--hpm-ds-violet));opacity:.16;stroke-width:1.6}
.hpm-ds-panneau--rouge{--sens:var(--hpm-ds-rouge);--sens-t:var(--hpm-ds-rouge-t)}
.hpm-ds-panneau--orange{--sens:var(--hpm-ds-orange);--sens-t:var(--hpm-ds-orange-t)}
.hpm-ds-panneau--vert{--sens:var(--hpm-ds-vert);--sens-t:var(--hpm-ds-vert-t)}
.hpm-ds-panneau--bleu{--sens:var(--hpm-ds-bleu);--sens-t:var(--hpm-ds-bleu)}
/* Panneaux côte à côte : toujours de même hauteur (Kad, 30/09) */
.hpm-ds-grille{display:grid;gap:16px;align-items:stretch}
.hpm-ds-grille--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hpm-ds-grille--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hpm-ds-grille--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hpm-ds-grille--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.hpm-ds-grille>*{min-width:0}

/* ── 9. Accordéons : le premier ouvert, les autres fermés avec leur résumé ─ */
.hpm-ds-acc{background:#fff;border:1px solid var(--hpm-ds-trait)}
.hpm-ds-acc+.hpm-ds-acc{border-top:0}
.hpm-ds-acc__t{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:12px 18px;cursor:pointer;font-weight:700;font-size:calc(16px * var(--hpm-fs,1));color:var(--hpm-ds-texte)}
.hpm-ds-acc__t::before{content:'';width:0;height:0;border-left:6px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;flex:none;transition:transform .15s}
.hpm-ds-acc__t:focus-visible{outline:2px solid var(--hpm-ds-violet);outline-offset:-2px}
.hpm-ds-acc__t .nb{background:var(--hpm-ds-violet-pale);color:var(--hpm-ds-violet);font-size:max(calc(12.5px * var(--hpm-fs,1)),var(--hpm-fs-min,0px));padding:0 8px;line-height:20px}
.hpm-ds-acc__t .res{margin-left:auto;font-weight:400;font-size:calc(13.5px * var(--hpm-fs,1));color:var(--hpm-ds-doux);text-align:right}
.hpm-ds-acc__corps{padding:14px 18px;border-top:1px solid var(--hpm-ds-trait)}
.hpm-ds-acc:not(.ouvert)>.hpm-ds-acc__corps{display:none}
.hpm-ds-acc.ouvert>.hpm-ds-acc__t{color:var(--hpm-ds-violet)}
.hpm-ds-acc.ouvert>.hpm-ds-acc__t::before{transform:rotate(90deg)}
.hpm-ds-acc.ouvert>.hpm-ds-acc__t .res{display:none}

/* ── 10. Bandeaux et confirmations ────────────────────────────────────── */
.hpm-ds-bandeau{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--hpm-ds-trait);border-left:4px solid var(--sens,var(--hpm-ds-bleu));padding:11px 16px;font-size:calc(15px * var(--hpm-fs,1));line-height:1.55;margin:0 0 12px}
.hpm-ds-bandeau b{color:var(--sens-t,var(--hpm-ds-bleu))}
.hpm-ds-bandeau .x{all:unset;margin-left:auto;cursor:pointer;color:var(--hpm-ds-doux);font-size:calc(16px * var(--hpm-fs,1));line-height:1;padding:2px 4px}
.hpm-ds-bandeau--ok{--sens:var(--hpm-ds-vert);--sens-t:var(--hpm-ds-vert-t)}
.hpm-ds-bandeau--attention{--sens:var(--hpm-ds-orange);--sens-t:var(--hpm-ds-orange-t)}
.hpm-ds-bandeau--erreur{--sens:var(--hpm-ds-rouge);--sens-t:var(--hpm-ds-rouge-t)}
.hpm-ds-bandeau--info{--sens:var(--hpm-ds-bleu);--sens-t:var(--hpm-ds-bleu)}
/* 2.0.0-alpha.115 (Kad, 7/10 : « je n'ai pas vu de message apparaître ») — le conteneur des messages avait le même rang que
   le voile de la fenêtre d'une tâche (100001) : une fois créé par un premier message, il restait SOUS toute fenêtre ouverte
   ensuite — confirmation grisée, parfois cachée, « Annuler » incliquable. Un message passe désormais au-dessus de toutes
   les fenêtres de l'extension (tâche, documents joints, visionneuse). */
/* 2.0.0-alpha.119 — maquette 174, réponse de Kad du 7/10 (13 h 41) : « B ». Le message de confirmation était petit, dans le
   coin en bas à gauche, quatre secondes : on le manquait en regardant le milieu de l'écran. Il est au centre en bas, plus
   grand, six secondes (hpm-ds.js). Mêmes couleurs : fond blanc, filet vert (rouge pour une erreur). */
.hpm-ds-toasts{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:2147483640;display:flex;flex-direction:column;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 48px)}
.hpm-ds-toast{display:flex;align-items:center;gap:12px;box-sizing:border-box;max-width:100%;background:#fff;border:1px solid var(--hpm-ds-trait);border-left:6px solid var(--hpm-ds-vert);box-shadow:0 14px 40px rgba(20,20,60,.30);padding:15px 24px;font-size:calc(17px * var(--hpm-fs,1));font-weight:700;line-height:1.35}
.hpm-ds-toast .ok{color:var(--hpm-ds-vert-t);font-weight:700}
.hpm-ds-toast.est-erreur{border-left-color:var(--hpm-ds-rouge)}.hpm-ds-toast.est-erreur .ok{color:var(--hpm-ds-rouge-t)}   /* alpha.113 : un message d'erreur (hpm-noyau.js) */
.hpm-ds-toast.est-erreur .ko{color:var(--hpm-ds-rouge-t);font-weight:700}   /* alpha.137 : HPM_DS.toast(texte, { erreur: true }) */
.hpm-ds-toast button{all:unset;cursor:pointer;text-decoration:underline;color:var(--hpm-ds-texte)}
.hpm-ds-toast button:focus-visible{outline:2px solid var(--hpm-ds-violet)}

/* ── 11. Tableau et liste paginée ─────────────────────────────────────── */
.hpm-ds-tableau{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--hpm-ds-trait);font-size:calc(15px * var(--hpm-fs,1))}
.hpm-ds-tableau th{font-size:calc(13px * var(--hpm-fs,1));font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--hpm-ds-doux);text-align:left;padding:10px 14px;border-bottom:1px solid var(--hpm-ds-trait);white-space:nowrap}
.hpm-ds-tableau th[aria-sort]{color:var(--hpm-ds-violet);cursor:pointer}
.hpm-ds-tableau th button{all:unset;cursor:pointer}
.hpm-ds-tableau td{padding:12px 14px;border-bottom:1px solid #f0f1f5;vertical-align:middle}
.hpm-ds-tableau tr.choisi td{background:var(--hpm-t-fafbff,#fafbff)}
.hpm-ds-tableau td.act{text-align:right;white-space:nowrap}
.hpm-ds-tableau td.act>*+*{margin-left:6px}
/* En-tête « bandeau » : un seul dégradé sur toute la largeur (Kad, 30/09) */
.hpm-ds-tableau--bandeau thead tr{background:var(--hpm-ds-degrade)}
.hpm-ds-tableau--bandeau th{color:#fff;border-bottom:0;background:transparent}
.hpm-ds-selection{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--hpm-ds-violet-pale);padding:10px 14px;border:1px solid var(--hpm-ds-trait);border-bottom:0}
.hpm-ds-selection b{margin-right:4px}
.hpm-ds-selection .fin{margin-left:auto;color:var(--hpm-ds-doux);font-size:calc(14px * var(--hpm-fs,1))}
.hpm-ds-pages{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--hpm-ds-trait);border-top:0;background:#fff;font-size:calc(14px * var(--hpm-fs,1));color:var(--hpm-ds-doux)}
.hpm-ds-pages .compte{margin-right:auto}
.hpm-ds-pages button{all:unset;box-sizing:border-box;min-width:34px;height:34px;padding:0 8px;border:1px solid var(--hpm-ds-trait);text-align:center;cursor:pointer;color:var(--hpm-ds-texte);background:#fff;line-height:32px}
.hpm-ds-pages button[aria-current="page"]{background:var(--hpm-ds-violet);border-color:var(--hpm-ds-violet);color:#fff;font-weight:700}
.hpm-ds-pages button[disabled]{opacity:.4;cursor:default}
.hpm-ds-pages button:focus-visible{outline:2px solid var(--hpm-ds-violet);outline-offset:1px}
.hpm-ds-pages select{border:1px solid var(--hpm-ds-trait);font:inherit;font-size:calc(14px * var(--hpm-fs,1));padding:5px 8px;border-radius:0;background:#fff;margin-left:8px}
.hpm-ds-liste{list-style:none;margin:0;padding:0}
.hpm-ds-liste>li{padding:10px 0;border-bottom:1px solid #f0f1f5}
.hpm-ds-liste>li:last-child{border-bottom:0}

/* ── 12. Cadre défilant : mois et noms fixes, on défile dans le cadre ─── */
.hpm-ds-defile{position:relative;overflow:auto;max-height:var(--hauteur,260px);border:1px solid var(--hpm-ds-trait);background:#fff;overscroll-behavior:contain}
.hpm-ds-defile table{border-collapse:separate;border-spacing:0;min-width:100%}
.hpm-ds-defile th,.hpm-ds-defile td{padding:8px 12px;border-bottom:1px solid #f0f1f5;white-space:nowrap;background:#fff}
.hpm-ds-defile thead th{position:sticky;top:0;z-index:2;background:#fafbfd;font-size:calc(13px * var(--hpm-fs,1));font-weight:700;color:var(--hpm-ds-doux);border-bottom:1px solid var(--hpm-ds-trait)}
.hpm-ds-defile tbody th,.hpm-ds-defile thead th:first-child{position:sticky;left:0;z-index:1;text-align:left;font-weight:500;border-right:1px solid var(--hpm-ds-trait)}
.hpm-ds-defile thead th:first-child{z-index:3}
.hpm-ds-defile.defile-x tbody th,.hpm-ds-defile.defile-x thead th:first-child{box-shadow:6px 0 8px -6px rgba(20,20,60,.22)}

/* ── 13. Discussion ───────────────────────────────────────────────────── */
.hpm-ds-msg{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px}
.hpm-ds-msg--reponse{margin-left:46px}
.hpm-ds-bulle{background:var(--hpm-ds-bulle);border-radius:6px;padding:9px 14px;max-width:560px;font-size:calc(15px * var(--hpm-fs,1));line-height:1.55}
.hpm-ds-msg--reponse .hpm-ds-bulle{background:var(--hpm-ds-bulle-reponse);border:1px solid var(--hpm-ds-trait)}
.hpm-ds-bulle .qui{font-size:calc(13px * var(--hpm-fs,1));color:var(--hpm-ds-pale)}
.hpm-ds-bulle .qui b{color:var(--hpm-ds-texte);font-weight:700}
.hpm-ds-bulle .mention{color:var(--hpm-ds-violet);font-weight:700}
.hpm-ds-msg-act{display:flex;gap:16px;font-size:calc(13.5px * var(--hpm-fs,1));color:var(--hpm-ds-doux);margin:4px 0 0 2px}
.hpm-ds-msg-act button{all:unset;cursor:pointer}
.hpm-ds-msg-act button:focus-visible{outline:2px solid var(--hpm-ds-violet)}

/* ── 14. États vides et chargement ────────────────────────────────────── */
.hpm-ds-vide{text-align:center;padding:28px 20px;border:1px solid var(--hpm-ds-trait);background:#fff}
.hpm-ds-vide .hpm-ds-ico{width:56px;height:56px;color:var(--hpm-ds-violet);opacity:.5;stroke-width:1.5}
.hpm-ds-vide b{display:block;font-size:calc(16px * var(--hpm-fs,1));margin:10px 0 4px}
.hpm-ds-vide p{color:var(--hpm-ds-doux);font-size:calc(14.5px * var(--hpm-fs,1));margin:0 auto 14px;max-width:420px}
.hpm-ds-squelette{display:block;height:12px;background:#eceef4;margin:10px 0;position:relative;overflow:hidden}
.hpm-ds-squelette::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-100%);animation:hpm-ds-reflet 1.4s infinite}
@keyframes hpm-ds-reflet{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.hpm-ds-squelette::after{animation:none}}

/* ── 15. Fenêtre ──────────────────────────────────────────────────────── */
.hpm-ds-voile{position:fixed;inset:0;background:rgba(25,20,50,.42);z-index:100000;display:flex;align-items:flex-start;justify-content:center;padding:70px 16px 16px;overflow:auto}
.hpm-ds-fenetre{background:#fff;width:100%;max-width:var(--largeur,600px);box-shadow:0 20px 60px rgba(10,10,40,.35);display:flex;flex-direction:column}
.hpm-ds-fenetre__tete{background:var(--hpm-ds-degrade);color:#fff;padding:13px 20px;display:flex;align-items:center;gap:12px;font-size:calc(17px * var(--hpm-fs,1));font-weight:700}
.hpm-ds-fenetre__tete small{font-weight:400;opacity:.85;font-size:calc(13px * var(--hpm-fs,1))}
.hpm-ds-fenetre__tete .x{all:unset;margin-left:auto;cursor:pointer;font-size:calc(18px * var(--hpm-fs,1));line-height:1;padding:2px 6px}
.hpm-ds-fenetre__tete .x:focus-visible{outline:2px solid #fff}
.hpm-ds-fenetre__corps{padding:16px 20px}
.hpm-ds-fenetre__pied{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 20px;border-top:1px solid var(--hpm-ds-trait);background:#fafbfd;font-size:calc(13.5px * var(--hpm-fs,1));color:var(--hpm-ds-doux);flex-wrap:wrap}
.hpm-ds-fenetre__pied .etat{margin-right:auto}

/* Bandeau de page (dégradé d'un seul tenant) */
.hpm-ds-tete-page{background:var(--hpm-ds-degrade);color:#fff;padding:16px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hpm-ds-tete-page h1,.hpm-ds-tete-page h2{color:#fff;margin:0;font-size:calc(22px * var(--hpm-fs,1));line-height:1.25}
.hpm-ds-tete-page small{display:block;font-size:calc(13px * var(--hpm-fs,1));font-weight:400;opacity:.88}
.hpm-ds-tete-page .d{margin-left:auto;display:flex;gap:8px}

/* Téléphone */
@media (max-width:960px){.hpm-ds-grille--4,.hpm-ds-grille--5{grid-template-columns:repeat(2,minmax(0,1fr))}.hpm-ds-grille--3{grid-template-columns:1fr}}
@media (max-width:640px){.hpm-ds-grille--2,.hpm-ds-grille--4,.hpm-ds-grille--5{grid-template-columns:1fr}
  .hpm-ds-tableau thead{display:none}.hpm-ds-tableau,.hpm-ds-tableau tbody,.hpm-ds-tableau tr,.hpm-ds-tableau td{display:block;width:100%}
  .hpm-ds-tableau tr{border-bottom:1px solid var(--hpm-ds-trait);padding:6px 0}.hpm-ds-tableau td{border:0;padding:4px 14px}.hpm-ds-tableau td.act{text-align:left}
  .hpm-ds-msg--reponse{margin-left:24px}.hpm-ds-voile{padding:0}.hpm-ds-fenetre{max-width:none;min-height:100%}
  .hpm-ds-toasts{left:12px;right:12px;bottom:12px;transform:none;width:auto;max-width:none;align-items:stretch}.hpm-ds-toast{padding:12px 16px;font-size:calc(15.5px * var(--hpm-fs,1))}}

/* ── 2.0.0-alpha.62 — la surimpression : le libellé entier d'un champ trop court pour le montrer (Kad, 2/10).
   Posée dans la page (hors de la racine .hpm-ds) : elle fixe donc elle-même sa police. Angles droits, liseré violet. */
.hpm-ds-infobulle{position:fixed;z-index:100002;box-sizing:border-box;max-width:min(460px,calc(100vw - 16px));padding:7px 12px;background:#fff;color:var(--hpm-t-1d2430,#1d2430);border:1px solid #d9dbe3;border-left:3px solid var(--hpm-t-8224e3,#8224E3);border-radius:0;box-shadow:0 8px 22px rgba(20,24,40,.22);font:600 calc(14px * var(--hpm-fs,1))/1.4 Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none;white-space:normal;pointer-events:none}
.hpm-ds-infobulle[hidden]{display:none}

/* ── 2.0.0-alpha.63 — le bouclier (suite) : un bouton écrit comme un lien garde la couleur de son genre, même si le thème
   colore les liens. « :where » laisse à ces règles le poids d'origine du bouton plus une classe : les bandeaux et les
   en-têtes, qui recolorent leurs boutons avec deux classes, continuent de l'emporter. */
a.hpm-ds-btn:where(:not(.hpm-ds-btn--principal,.hpm-ds-btn--secondaire,.hpm-ds-btn--lien,.hpm-ds-btn--danger)):is(:link,:visited,:hover){color:var(--hpm-ds-texte)}
a.hpm-ds-btn--principal:is(:link,:visited,:hover){color:#fff}
a.hpm-ds-btn--secondaire:is(:link,:visited,:hover){color:var(--hpm-ds-violet)}
a.hpm-ds-btn--lien:is(:link,:visited,:hover){color:var(--hpm-ds-bleu)}
a.hpm-ds-btn--danger:is(:link,:visited,:hover){color:var(--hpm-ds-rouge-t)}

/* ── 2.0.0-alpha.64 — les listes déroulantes : un chevron dessiné, avec de la marge (Kad, 2/10 : « mettre un peu de marge
   entre le chevron et les bords, partout »). Le chevron du navigateur colle au bord droit et ne se règle pas : il est
   remplacé par un chevron de l'outil, à 11 px du bord, le même dans tous les navigateurs. « !important » : une feuille
   écrite plus bas avec « background:#fff » effacerait le dessin. Les listes d'un bandeau ont le leur (hpm-ep2.css). */
.hpm-ds select:not([multiple]):not([size]){-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.4l3.8 3.8 3.8-3.8' fill='none' stroke='%235b6072' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 11px center!important;background-size:12px 12px!important;padding-right:32px!important;text-overflow:ellipsis}
.hpm-ds select::-ms-expand{display:none}

/* ── 2.0.0-alpha.85 — l'info-bulle d'aide (Kad, 4/10 : « mettre en info-bulle l'explication d'utilisation »). ──
   Un bouton « i » ; son texte s'affiche au survol, quand le bouton a le foyer (clavier), et au toucher. */
.hpm-ds-info{position:relative;display:inline-flex;align-self:center}
.hpm-ds-info__b{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1.5px solid var(--hpm-ds-violet);border-radius:0;color:var(--hpm-ds-violet);font-size:calc(14px * var(--hpm-fs,1));font-weight:700;font-style:normal;font-family:inherit;line-height:1;cursor:help}
.hpm-ds-info__b:hover,.hpm-ds-info__b:focus-visible{background:var(--hpm-ds-violet);color:#fff}
.hpm-ds-info__b:focus-visible{outline:2px solid var(--hpm-ds-violet);outline-offset:2px}
.hpm-ds-info__t{position:absolute;left:0;top:calc(100% + 8px);z-index:60;width:max-content;max-width:min(360px,80vw);padding:9px 13px;background:#fff;color:var(--hpm-ds-texte);border:1px solid var(--hpm-ds-trait);border-left:4px solid var(--hpm-ds-violet);box-shadow:0 10px 26px rgba(10,10,40,.18);font-size:calc(14px * var(--hpm-fs,1));font-weight:400;line-height:1.5;text-align:left;visibility:hidden;opacity:0;transition:opacity .12s}
.hpm-ds-info:hover .hpm-ds-info__t,.hpm-ds-info:focus-within .hpm-ds-info__t{visibility:visible;opacity:1}
@media (prefers-reduced-motion:reduce){.hpm-ds-info__t{transition:none}}
/* … sur un téléphone, l'info-bulle prend la largeur de sa ligne de titre : ancrée au « i », elle sortirait de l'écran. */
@media (max-width:640px){.hpm-ds-info{position:static}.hpm-ac2-section{position:relative}.hpm-ds-info__t{left:0;right:0;width:auto;max-width:none}}

/* 2.0.0-alpha.107 — une adresse web dans un message : un lien, qui se coupe proprement dans une bulle étroite. */
a.hpm-ds-lien-web.hpm-ds-lien-web,a.hpm-ds-lien-web.hpm-ds-lien-web:visited{color:var(--hpm-ds-bleu,#0068E8);text-decoration:underline;overflow-wrap:anywhere;word-break:break-word}   /* classe doublée : passe devant « a{text-decoration:none} » de l'espace et des thèmes */
a.hpm-ds-lien-web:hover{text-decoration-thickness:2px}
a.hpm-ds-lien-web:focus-visible{outline:2px solid var(--hpm-ds-violet,#8224E3);outline-offset:2px}

/* 2.0.0-alpha.123 — l'info-bulle au contenu plus riche (Gantt : les dépendances non respectées) : le même « i », un texte plus large, des lignes à puce. */
.hpm-ds-info__t.riche{max-width:min(520px,86vw);font-size:calc(14.5px * var(--hpm-fs,1));line-height:1.55;white-space:normal}
.hpm-ds-info__t.riche .li{display:block;position:relative;padding-left:15px;margin:6px 0}
.hpm-ds-info__t.riche .li::before{content:"•";position:absolute;left:2px;top:0}
.hpm-ds-info__t.riche .p{display:block;margin-top:8px}
/* alpha.191 : l'info-bulle commune, un peu plus discrète que celle des listes */
.hpm-ds-infobulle.est-legere{font:400 calc(13px * var(--hpm-fs,1))/1.4 Arial,Helvetica,sans-serif;max-width:min(320px,calc(100vw - 16px));padding:6px 10px;z-index:2147483646}/* alpha.207 : au-dessus de la visionneuse */
@media (hover:none){.hpm-ds-infobulle.est-legere:not(.est-appui){display:none}}/* alpha.211 (Kad, 13/10, § 6.5) : au toucher, la bulle légère ne s'affiche que par un appui long (hpm-ds.js) */
/* alpha.193 : le formulaire « Ma disponibilité », commun (Ma carte, accueil) — centré, grille haute, tout aligné */
.hpm-dispo-f{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.hpm-dispo-f .seg{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.hpm-dispo-f .seg label{display:inline-flex;align-items:center;gap:6px;height:38px;box-sizing:border-box;padding:0 14px;border:1px solid var(--hpm-ds-trait,#e3e6ee);border-radius:999px;font-size:calc(13.5px * var(--hpm-fs,1));cursor:pointer;white-space:nowrap;margin:0;line-height:1;font-weight:400;color:var(--hpm-ds-texte,#1d2430)}
.hpm-dispo-f .seg input{margin:0;accent-color:var(--hpm-ds-violet,#8224E3)}
.hpm-dispo-f .seg label:has(input:checked){background:#e8f6ef;border-color:#0C8560;color:#0a6b4e;font-weight:700}
.hpm-dispo-f .seg label.e-peu:has(input:checked){background:#fff4e8;border-color:#B4501D;color:#9a4a12}
.hpm-dispo-f .seg label.e-non:has(input:checked){background:#fdecec;border-color:#C62828;color:#9b1c1c}
.hpm-dispo-f .grille{border-collapse:separate;border-spacing:4px;font-size:max(calc(12px * var(--hpm-fs,1)),var(--hpm-fs-min,0px));width:100%;max-width:600px;margin:0 auto}
.hpm-dispo-f .grille th{font-weight:700;color:var(--hpm-ds-doux,#5b6072);text-align:center;padding:0 2px}
.hpm-dispo-f .grille tbody th{text-align:left;font-weight:400;white-space:nowrap}
.hpm-dispo-f .grille td{padding:0}.hpm-dispo-f .grille label{display:block;position:relative;cursor:pointer;margin:0}
.hpm-dispo-f .grille input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.hpm-dispo-f .grille span{display:block;height:34px;background:#f1f3f8;border-radius:3px}
.hpm-dispo-f .grille label:hover span{background:#e6e9f2}
.hpm-dispo-f .grille input:checked+span{background:color-mix(in srgb,#0C8560 55%,#fff)}
.hpm-dispo-f .grille input:focus-visible+span{outline:2px solid var(--hpm-ds-violet,#8224E3);outline-offset:1px}
.hpm-dispo-f .lig{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center;margin:0;width:100%;font-size:calc(13px * var(--hpm-fs,1))}
.hpm-dispo-f .lig label{display:inline-flex;gap:6px;align-items:center;height:36px;margin:0;font-weight:400;color:var(--hpm-ds-texte,#1d2430)}
.hpm-dispo-f .lig input,.hpm-dispo-f .lig select{height:36px;box-sizing:border-box;margin:0;border:1px solid #cfd3dc;border-radius:0;padding:0 8px;font:inherit;font-size:calc(13px * var(--hpm-fs,1));background:#fff}
.hpm-dispo-f .lig input[type=number]{width:64px}
.hpm-dispo-f .lig input[type=text]{width:100%}
.hpm-dispo-f .lig.org{flex-direction:column;gap:2px;padding:10px 12px;background:var(--hpm-ds-violet-pale,#f4ecfd);border-radius:6px;box-sizing:border-box}.hpm-dispo-f .lig.org label{height:auto}.hpm-dispo-f .lig.org input{height:auto;width:auto;padding:0;accent-color:var(--hpm-ds-violet,#8224E3)}.hpm-dispo-f .lig.org small{color:var(--hpm-ds-doux,#5b6072);font-size:max(calc(12.5px * var(--hpm-fs,1)),var(--hpm-fs-min,0px))} /* alpha.208 */
.hpm-dispo-f .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* alpha.221 (ÉCRAN 502 H, Kad 18/10) : « Modifier » a pour icône l'engrenage, au trait, dans la couleur du texte */
.hpm-ico-mod{display:inline-block;width:1.05em;height:1.05em;flex:none;vertical-align:-.17em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9L7 7M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9L7 7M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E") center/contain no-repeat}