/* ==========================================================================
   ELIUM UI — système de composants du dashboard (2026-09-11)
   ==========================================================================

   Chargé par header.php sur TOUTES les pages, après styles.css.
   Préfixe unique : `eui-`. Première page migrée : Trendz → Contrats
   (lists/trend_contrats.php + lists/inc/trend_contracts_table.inc.php), à lire
   comme exemple de référence. Documentation d'usage : README §10.

   TROIS RÈGLES À CONNAÎTRE AVANT DE TOUCHER À CE FICHIER
   -----------------------------------------------------
   1. styles.css est ancien et écrit avec des sélecteurs qui gagnent facilement
      sur du CSS de page : `div{margin:10px 0}`, `select{height:33px}`,
      `textarea{min-height:200px}`, `input[type=...]{width:calc(100% - 20px)}`,
      `label{display:inline-block;margin-bottom:5px}`, `.tuile.dark{background:#333}`.
      La section « NEUTRALISATION » ci-dessous les annule DANS les conteneurs eui-
      seulement. Ne la supprimez pas : sans elle, toute mise en page eui- se décale.
   2. N'empruntez JAMAIS les classes `.bouton.*` pour colorer une pastille ou un
      avatar : elles portent padding, marge ET un `:hover` qui repeint en bleu.
      Les couleurs se posent en style inline (voir elium_ui_pill() dans inc/elium_ui.php).
   3. Pas de variables CSS : le dashboard tourne sur des navigateurs anciens côté
      clients et le reste du fichier n'en utilise pas. Les couleurs sont écrites en
      clair — palette maison ci-dessous.

   PALETTE (identique à styles.css)
   --------------------------------
   fond page #333 · carte #444 · panneau #2a2a2a · en-tête tableau #666
   bleu dodgerblue · vert darkseagreen · orange darkorange · rouge indianred
   gris #555 · texte #fff · texte secondaire #ccc · texte estompé rgba(255,255,255,.55)
   ========================================================================== */


/* ==========================================================================
   NEUTRALISATION des règles globales (cf. règle 1 ci-dessus)
   ==========================================================================

   LE PIÈGE DE SPÉCIFICITÉ, à ne pas « simplifier » (bug constaté le 2026-09-11, en-tête de
   Trendz → Contrats entièrement tassé) : une neutralisation écrite `.eui-scope div{margin:0}`
   pèse (0,1,1), donc PLUS lourd que `.eui-topbar{margin:0 0 22px}` qui ne pèse que (0,1,0) —
   elle écrase les marges des composants eux-mêmes.

   D'où les deux règles ci-dessous :
     1. un reset à poids ÉGAL à celui des composants (0,1,0) : il bat `div{margin:10px 0}` (0,0,1)
        et, à égalité, ce sont les composants — déclarés plus bas dans ce fichier — qui gagnent ;
     2. les <div> « nus » (enveloppes de cellule sans classe) neutralisés à part.
   Toute nouvelle règle de marge se déclare donc APRÈS ce bloc, avec une seule classe. */
[class*="eui-"]{margin:0;}
.eui-scope div:not([class*="eui-"]),
.eui-modal-card div:not([class*="eui-"]){margin:0;}
.eui-scope *,
.eui-modal-card *{box-sizing:border-box;}
/* Pas de `display` ici : .eui-checkline et .eui-dropzone sont des <label> en flex. */
.eui-scope label,
.eui-modal-card label{margin:0;vertical-align:baseline;}
.eui-field select,
.eui-field input,
.eui-field textarea{height:auto;width:100%;margin:0;}
/* `hidden` doit TOUJOURS cacher : un composant déclaré en display:flex/inline-flex (.eui-block,
   .eui-btn, .eui-callout…) battait l'attribut — la lightbox Contrat montrait « Résiliation en
   cours » et « Passer à Premium » sur tous les contrats (constaté le 2026-09-15). Les règles
   `.eui-xxx[hidden]` éparses restent, celle-ci couvre le reste. */
.eui-scope [hidden],
.eui-modal-card [hidden]{display:none !important;}


/* ==========================================================================
   EN-TÊTE DE PAGE — titre + sous-titre à gauche, action principale à droite
   ========================================================================== */
.eui-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 22px;}
.eui-topbar h2{font-size:26px;margin:0 0 4px;font-weight:700;}
.eui-sub{margin:0;color:rgba(255,255,255,.55);font-size:13px;}
/* PIÈGE (README §10.9) : le 3ᵉ argument de elium_ui_topbar() est un slot flex UNIQUE. Deux
   boutons concaténés sans enveloppe deviennent deux items flex séparés dans .eui-topbar, et
   `justify-content:space-between` les écarte au lieu de les coller — un seul bouton n'a jamais ce
   problème, c'est pour ça qu'il passe inaperçu en test rapide. Toujours envelopper plusieurs
   actions dans .eui-topbar-actions. */
.eui-topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}


/* ==========================================================================
   BOUTONS — pilule pleine. Modificateurs de couleur : -blue -green -red -amber -ghost
   ========================================================================== */
.eui-btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;border-radius:25px;padding:10px 20px;margin:0;font-size:13px;font-weight:600;color:#fff;font-family:inherit;text-decoration:none;}
.eui-btn svg{width:16px;height:16px;flex:none;}
.eui-btn-blue{background:dodgerblue;}
.eui-btn-green{background:darkseagreen;}
.eui-btn-red{background:indianred;}
.eui-btn-amber{background:darkorange;}
.eui-btn-ghost{background:rgba(255,255,255,.08);}
.eui-btn:hover{filter:brightness(1.08);}
.eui-btn:disabled,.eui-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;filter:none;}
/* Variante compacte : bouton posé DANS une cellule de tableau (date de shooting, action de ligne). */
.eui-btn.is-sm{padding:7px 13px;font-size:12.5px;gap:6px;}
.eui-btn.is-sm svg{width:13px;height:13px;}
/* Action destructrice secondaire (« Supprimer » à gauche d'un « Enregistrer » bleu) : fond rouge pâle, texte rose. */
.eui-btn.is-danger-ghost{background:rgba(205,92,92,.14);color:#f2a7a7;}

/* Bouton rond icône seule (actions de ligne, fermeture, aperçu).
   `flex:none` + `min-width` : un bouton rond posé dans une rangée flex (.eui-row-actions) rétrécit
   dès que la cellule manque de place et devient un OVALE (29×32 constaté sur Shootings & livraisons,
   colonnes fixes, 2026-09-16 — Safari le montrait, Chrome aussi à 1440 px). Un rond ne se comprime
   jamais : c'est la colonne qui doit être dimensionnée pour lui. */
.eui-icon-btn{width:32px;height:32px;min-width:32px;flex:none;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,.08);color:#fff;text-decoration:none;padding:0;margin:0;-webkit-appearance:none;appearance:none;}
.eui-icon-btn:hover{background:rgba(255,255,255,.16);}
.eui-icon-btn svg{width:15px;height:15px;flex:none;}
.eui-icon-btn.is-sm{width:28px;height:28px;min-width:28px;}
.eui-icon-btn.is-sm svg{width:14px;height:14px;}
.eui-icon-btn.is-alert{background:rgba(255,140,0,.18);color:darkorange;}
.eui-icon-btn.is-danger{background:rgba(205,92,92,.18);color:indianred;}


/* ==========================================================================
   BARRE D'OUTILS — filtres segmentés (pastille glissante), select pilule, recherche
   Comportement JS : EliumUI.segmented() / EliumUI.search() — voir js/elium-ui.js
   ========================================================================== */
.eui-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px;flex-wrap:wrap;}
.eui-toolbar-right{display:flex;align-items:center;gap:10px;}

.eui-segmented{position:relative;display:flex;gap:2px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:25px;padding:3px;}
/* Pastille active : UN seul élément qui glisse (translateX + width animés). C'est ce qui impose
   de recharger la liste en AJAX plutôt que la page — un rechargement couperait l'animation. */
.eui-seg-thumb{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:20px;background:dodgerblue;pointer-events:none;opacity:0;transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);}
.eui-seg-thumb.is-ready{opacity:1;}
.eui-seg-item{position:relative;z-index:1;border:none;background:transparent;color:rgba(255,255,255,.55);font-family:inherit;font-size:13px;font-weight:600;padding:8px 16px;border-radius:20px;cursor:pointer;text-decoration:none;display:inline-block;transition:color .2s;}
.eui-seg-item:hover{color:#fff;}
.eui-seg-item.is-active{color:#fff;}

.eui-select-pill{height:auto;width:auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:9px 32px 9px 14px;margin:0;font-size:13px;color:#ccc;font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 12px center;}

.eui-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:9px 14px;width:240px;}
.eui-search svg{width:15px;height:15px;opacity:.5;flex:none;}
.eui-search input{border:none;background:transparent;color:#fff;font-family:inherit;font-size:13px;outline:none;width:100%;text-transform:none;padding:0;margin:0;height:auto;}
.eui-search input::placeholder{color:rgba(255,255,255,.4);}


/* ==========================================================================
   LÉGENDE de couleurs (sous la barre d'outils)
   ========================================================================== */
.eui-legend{display:flex;align-items:center;gap:18px;margin:-6px 0 16px;flex-wrap:wrap;}
.eui-legend span{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,.55);}
.eui-legend i{width:10px;height:10px;border-radius:50%;flex:none;display:block;}


/* ==========================================================================
   TABLEAU — carte arrondie, en-tête majuscules, lignes alternées
   ========================================================================== */
.eui-table-card{background:#444;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);}
.eui-table-card.is-loading{opacity:.45;transition:opacity .15s;}
table.eui-table{width:100%;border-collapse:collapse;border-spacing:0;}
table.eui-table thead tr{background:#666;}
table.eui-table thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:#fff;padding:14px 18px;}
table.eui-table tbody tr{border-top:1px solid rgba(255,255,255,.06);background:transparent;}
table.eui-table tbody tr:nth-child(2n-1){background:#3a3a3a;}
table.eui-table tbody tr:hover{background:#4a4a4a;}
table.eui-table tbody td{padding:14px 18px;vertical-align:middle;color:#fff;}
table.eui-table tbody tr.is-dim{opacity:.45;}
.eui-row-hidden{display:none !important;}
.eui-empty{padding:40px 18px;text-align:center;color:rgba(255,255,255,.55);}
.eui-row-actions{display:flex;gap:6px;justify-content:flex-end;}


/* ==========================================================================
   CELLULES — identité (avatar + 2 lignes), pastille, statut icône, texte secondaire
   ========================================================================== */
.eui-identity{display:flex;align-items:center;gap:12px;}
.eui-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex:none;padding:0;margin:0;}
.eui-avatar.is-lg{width:52px;height:52px;font-size:17px;}
.eui-avatar.is-sm{width:26px;height:26px;font-size:11px;}
.eui-identity-name{font-weight:600;font-size:14px;color:#fff;text-decoration:none;}
.eui-identity-name:hover{text-decoration:underline;}

/* Deuxième ligne d'une cellule : toujours ce style, pour que toutes les colonnes s'alignent. */
.eui-sub-line{font-size:11.5px;color:rgba(255,255,255,.55);margin-top:2px;}
.eui-cell-2l{font-size:13px;color:#ccc;line-height:1.5;}
.eui-cell-2l strong{color:#fff;}

.eui-pill{display:inline-flex;align-items:center;gap:6px;border-radius:25px;padding:5px 12px;margin:0;font-size:12px;font-weight:700;color:#fff;white-space:nowrap;}
.eui-pill .eui-pill-dot{width:7px;height:7px;border-radius:50%;flex:none;background:#fff;}
/* Pastille cliquable (elium_ui_pill() avec des attributs → <button>) : même dessin, elle ouvre ce
   que l'action de ligne ouvrirait (ex. la lightbox Shooting sur l'étape en cours). */
.eui-pill.is-btn{border:none;font-family:inherit;line-height:normal;cursor:pointer;-webkit-appearance:none;appearance:none;}
.eui-pill.is-btn:hover{filter:brightness(1.12);box-shadow:0 0 0 2px rgba(255,255,255,.18);}
.eui-badge{border-radius:25px;padding:4px 11px;margin:0;font-size:11px;font-weight:700;color:#fff;display:inline-block;}

/* Statut « icône + libellé » (colonne Communication de Trendz, réutilisable partout). */
.eui-status{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;}
.eui-status svg{width:15px;height:15px;flex:none;}
.eui-stack{display:flex;flex-direction:column;gap:3px;}
.eui-c-ok{color:darkseagreen;}
.eui-c-warn{color:darkorange;}
.eui-c-bad{color:indianred;}
.eui-c-off{color:#aaa;}
.eui-muted{font-size:13px;color:#ccc;}
.eui-muted.is-empty{color:rgba(255,255,255,.55);font-style:italic;}


/* ==========================================================================
   LIGHTBOX — carte à deux colonnes : sidebar (identité + onglets) / contenu
   Structure attendue (voir elium_ui_modal_open() dans inc/elium_ui.php) :
     .compta-presta-form-modal > .eui-modal-card
         .eui-modal-shell
             .eui-modal-side   → .eui-idcard + .eui-navtabs
             .eui-modal-main   → [form] → .eui-panel* + .eui-foot
   Comportement JS : EliumUI.modalTabs()
   ========================================================================== */
/* `.tuile.dark` (deux classes) gagne sur `.compta-presta-form-modal-card` et repeindrait la carte
   en #333 — la couleur de la sidebar, donc zéro contraste. Le contenu doit rester plus SOMBRE
   (#2a2a2a) que la sidebar (#333). */
.eui-modal-card{padding:0 !important;width:min(980px,100%) !important;max-width:980px;display:flex;overflow:hidden !important;max-height:min(800px,90vh);background:#2a2a2a !important;}
.eui-modal-shell{display:flex;width:100%;min-height:0;}
.eui-modal-side{width:250px;flex:none;background:#333;border-right:1px solid rgba(255,255,255,.08);padding:26px 20px;display:flex;flex-direction:column;gap:22px;box-sizing:border-box;overflow-y:auto;}
.eui-modal-main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;}
/* Le <form> porte la colonne : en-tête fixe, corps qui défile, pied d'actions fixe. */
.eui-modal-main form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin:0;}
/* Volet MÉDIA à droite (clé 'aside' de elium_ui_modal_open(), ex. la vidéo d'un trend dans
   Trendz → Catalogue) : une vidéo 9:16 sur toute la hauteur, comme la fiche d'un trend sur
   app.my-trendz.ch (vidéo d'un côté, contenu de l'autre). La carte prend alors TOUTE la hauteur
   disponible et s'élargit de la largeur exacte d'une vidéo 9:16 à cette hauteur : c'est la hauteur
   qui dicte la largeur du volet, jamais l'inverse (sinon bandes noires ou vidéo tronquée). Le
   contenu (sidebar + onglets) garde 900 px. Le `!important` répond à celui de .eui-modal-card. */
.eui-modal-card.has-aside{--eui-modal-h:min(800px,90vh);--eui-aside-w:calc(var(--eui-modal-h) * 9 / 16);height:var(--eui-modal-h);width:min(calc(900px + var(--eui-aside-w)),100%) !important;max-width:none;}
.eui-modal-aside{flex:none;width:var(--eui-aside-w);position:relative;background:#000;border-left:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0;}
.eui-modal-aside video{width:100%;height:100%;object-fit:contain;display:block;background:#000;}
/* La croix de fermeture (absolute, en haut à droite de la carte) tombe SUR le volet : l'ordre du DOM
   la mettrait dessous (le volet est positionné et rendu après elle). */
.eui-modal-card.has-aside .compta-presta-form-modal-close{z-index:5;background:rgba(20,20,20,.72);}
/* Sans média : le volet accueille ce qui permet d'en fournir un (message d'état + dropzone). */
.eui-modal-aside-empty{display:flex;flex-direction:column;gap:16px;width:100%;padding:24px;color:rgba(255,255,255,.55);font-size:13px;line-height:1.5;text-align:center;}
.eui-modal-aside-empty .eui-dropzone{text-align:left;}
/* Bandeau d'état en bas du volet (fichier choisi, génération de la cover) — même dégradé que
   .eui-thumb-caption ; laisse la place aux boutons ronds .eui-thumb-btn des deux côtés. */
.eui-modal-aside-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px 52px 14px;font-size:12px;line-height:1.4;color:#fff;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.85));pointer-events:none;}
.eui-modal-aside-caption span{display:block;}
.eui-modal-aside-caption span:empty{display:none;}

.eui-idcard{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.eui-idcard-name{font-size:16px;font-weight:700;line-height:1.25;word-break:break-word;}
.eui-idcard-badges{display:flex;gap:6px;flex-wrap:wrap;}
/* Navigation entre plusieurs enregistrements ouverts dans LA MÊME lightbox (ex. les clips d'un
   groupe de trends, cf. lists/trend_catalogue.php) : toujours ICI, jamais dans un .eui-head — un
   en-tête de panneau n'a que deux enfants (h3 titre + p sous-titre), voir le piège juste plus bas. */
.eui-idcard-nav{display:flex;align-items:center;gap:8px;}
.eui-idcard-nav[hidden]{display:none;}
.eui-idcard-nav span{font-size:11.5px;color:rgba(255,255,255,.55);white-space:nowrap;}

.eui-navtabs{display:flex;flex-direction:column;gap:4px;}
.eui-navtab{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:none;background:transparent;color:#ccc;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left;width:100%;}
.eui-navtab svg{width:16px;height:16px;flex:none;}
.eui-navtab:hover{background:rgba(255,255,255,.05);color:#fff;}
.eui-navtab.is-active{background:rgba(255,255,255,.08);color:#fff;}

.eui-panel{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
.eui-panel[hidden]{display:none !important;}
/* PIÈGE (constaté sur la maquette Trendz → Catalogue, README §10.4) : ne JAMAIS mettre
   `display:flex` + `justify-content:space-between` sur .eui-head pour caser un contrôle à droite
   du titre (ex. une navigation entre enregistrements). En bloc normal, h3 et p s'empilent tout
   seuls ; en flex, ils deviennent deux items posés côte à côte et le sous-titre atterrit à côté du
   titre au lieu d'en dessous — silencieux, aucune erreur, juste un sous-titre mal placé. Tout
   contrôle contextuel au panneau (pagination interne, navigation de groupe) se pose dans la
   sidebar (.eui-idcard-nav ci-dessus), jamais ici. */
.eui-head{padding:24px 30px 16px;border-bottom:1px solid rgba(255,255,255,.08);flex:none;}
.eui-head h3{margin:0 0 3px;font-size:19px;font-weight:700;}
.eui-head p{margin:0;font-size:12.5px;color:rgba(255,255,255,.55);}
.eui-body{padding:22px 30px;overflow-y:auto;flex:1 1 auto;display:flex;flex-direction:column;gap:22px;}
/* PIÈGE (Concours → Soirée → Participants, 2026-11-09 : « le scroll ne fonctionne pas ») : dans cette colonne
   flex, un enfant en `overflow:hidden` (la carte de tableau, pour ses coins arrondis) n'a plus de hauteur
   minimale : il se laisse écraser à la place restante et coupe ses dernières lignes, et le corps n'a alors
   plus rien à faire défiler. Une carte de tableau garde toujours la hauteur de son tableau. */
.eui-body > .eui-table-card{flex:none;}
.eui-foot{padding:16px 30px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:flex-end;gap:10px;align-items:center;flex:none;}
.eui-foot-msg{margin-right:auto;font-size:11.5px;color:rgba(255,255,255,.55);}


/* ==========================================================================
   FORMULAIRES — titre de section, grille 2 colonnes, champ
   ========================================================================== */
.eui-sec-title{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px;margin:0 0 12px;}
.eui-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.eui-span2{grid-column:1 / -1;}
.eui-field{display:flex;flex-direction:column;gap:6px;}
.eui-field label{font-size:12px;font-weight:600;color:#ccc;display:block;margin:0;}
.eui-field select,.eui-field input,.eui-field textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:10px 12px;color:#fff;font-family:inherit;font-size:13px;box-sizing:border-box;text-transform:none;}
.eui-field textarea{min-height:72px;resize:vertical;}
.eui-field select:focus,.eui-field input:focus,.eui-field textarea:focus{outline:none;border-color:darkseagreen;background:rgba(255,255,255,.09);}
.eui-field input::placeholder,.eui-field textarea::placeholder{color:rgba(255,255,255,.4);}
.eui-field input:disabled,.eui-field select:disabled{opacity:.55;cursor:not-allowed;}
.eui-hint{font-weight:400;color:rgba(255,255,255,.55);font-size:11px;text-transform:none;letter-spacing:0;}
.eui-checkline{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#ccc;cursor:pointer;}

.eui-dropzone{border:2px dashed rgba(255,255,255,.25);border-radius:12px;padding:18px;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.55);font-size:12.5px;cursor:pointer;transition:border-color .15s,background .15s;}
.eui-dropzone:hover,.eui-dropzone.is-drag{border-color:darkseagreen;background:rgba(143,188,143,.1);}
.eui-dropzone svg{width:22px;height:22px;flex:none;}
.eui-filelist{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.eui-file-btn{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#fff;text-decoration:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 12px;}
.eui-file-btn:hover{background:rgba(255,255,255,.1);}
.eui-file-btn small{margin-left:auto;opacity:.55;}


/* ==========================================================================
   ENCARTS — information, action mise en avant, avertissement, danger
   ========================================================================== */
.eui-callout{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.04);}
.eui-callout .eui-callout-txt{flex:1;min-width:0;}
.eui-callout .eui-callout-txt strong{display:block;font-size:13px;margin-bottom:3px;}
.eui-callout .eui-callout-txt span{font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.4;display:block;}
.eui-callout .eui-callout-actions{display:flex;gap:8px;flex:none;}

/* Bloc vertical coloré : amber = action réversible mais conséquente, red = irréversible,
   blue = état en cours, green = information positive. */
.eui-block{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.04);}
.eui-block h4{margin:0;font-size:13.5px;display:flex;align-items:center;gap:8px;}
.eui-block h4 svg{width:16px;height:16px;flex:none;}
.eui-block p{margin:0;font-size:12px;color:rgba(255,255,255,.65);line-height:1.5;}
.eui-block p.is-strong{font-size:12.5px;color:#fff;font-weight:600;}
.eui-block-amber{border-color:rgba(255,140,0,.4);background:rgba(255,140,0,.06);}
.eui-block-amber h4{color:darkorange;}
.eui-block-red{border-color:rgba(205,92,92,.4);background:rgba(205,92,92,.06);}
.eui-block-red h4{color:indianred;}
.eui-block-blue{border-color:rgba(30,144,255,.4);background:rgba(30,144,255,.06);}
.eui-block-blue h4{color:dodgerblue;}
.eui-block-green{border-color:rgba(143,188,143,.4);background:rgba(143,188,143,.1);}
.eui-block-green h4{color:darkseagreen;}

/* Note discrète avec icône (explication en bas de section). */
.eui-subnote{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.5;padding:10px 12px;background:rgba(255,255,255,.04);border-radius:8px;}
.eui-subnote svg{width:14px;height:14px;flex:none;margin-top:1px;}
.eui-subnote[hidden]{display:none;}
.eui-note{font-size:11.5px;line-height:1.5;margin:0;padding:10px 12px;border-radius:8px;background:rgba(143,188,143,.12);border:1px solid rgba(143,188,143,.35);}
.eui-note[hidden]{display:none;}


/* ==========================================================================
   TUILES DE SYNTHÈSE + LISTES DENSES (historique, prévisions)
   ========================================================================== */
.eui-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.eui-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 16px;}
.eui-stat .eui-stat-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.55);margin-bottom:6px;}
.eui-stat .eui-stat-v{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px;}
.eui-stat .eui-stat-v svg{width:15px;height:15px;flex:none;}
.eui-stat .eui-stat-sub{font-size:11.5px;color:rgba(255,255,255,.55);margin-top:3px;}

.eui-list{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;}
.eui-list-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid rgba(255,255,255,.06);}
.eui-list-row:first-child{border-top:none;}
.eui-list-row:nth-child(2n){background:rgba(255,255,255,.03);}
.eui-list-main{flex:1;min-width:0;}
.eui-list-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eui-list-sub{font-size:11.5px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eui-list-side{flex:none;width:160px;font-size:12px;color:#ccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eui-list-side.is-auto{width:auto;}
.eui-list-side.is-strong{font-weight:700;}
/* Sous-titre sur plusieurs lignes (texte libre d'un client, retours à la ligne gardés). */
.eui-list-sub.is-wrap{white-space:pre-line;overflow:visible;text-overflow:clip;color:#ddd;line-height:1.45;margin-top:2px;}
.eui-list-date{flex:none;width:110px;font-size:12px;color:rgba(255,255,255,.55);}
/* Cartouche rond coloré en tête de ligne (statut d'un envoi, type d'échéance…). */
/* Pastille d'alerte (2026-10-09, demande de Geoffrey : « une pastille rouge sur l'icône Robot quand il y a
   une déconnexion, pareil sur CM → Comptes ») — un point rouge vif posé sur une icône, une tuile, un onglet :
   « quelque chose demande un regard ici ». elium_ui_alert_dot() ; le conteneur porte .eui-has-alert. Le
   rouge vif #ff3b30 est réservé à cette pastille (indianred reste la couleur des états en échec). */
.eui-has-alert{position:relative;}
.eui-alert-dot{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:14px;height:14px;padding:0 4px;margin:0;border-radius:7px;background:#ff3b30;box-shadow:0 0 0 2px rgba(0,0,0,.35);color:#fff;font-size:10px;font-weight:800;line-height:1;font-style:normal;}
.eui-has-alert > .eui-alert-dot{position:absolute;top:-4px;right:-10px;}
.eui-badge-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:rgba(255,255,255,.06);color:#aaa;}
.eui-badge-icon svg{width:14px;height:14px;}
.eui-badge-icon.is-ok{background:rgba(143,188,143,.18);color:darkseagreen;}
.eui-badge-icon.is-warn{background:rgba(255,140,0,.18);color:darkorange;}
.eui-badge-icon.is-bad{background:rgba(205,92,92,.18);color:indianred;}
.eui-badge-icon.is-info{background:rgba(30,144,255,.16);color:dodgerblue;}

/* Variante « carte » d'une liste : lignes séparées au lieu d'un bloc continu. */
.eui-cards{display:flex;flex-direction:column;gap:8px;}
.eui-cards .eui-list-row{border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 14px;}
.eui-cards .eui-list-row:nth-child(2n){background:transparent;}

.eui-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:dodgerblue;text-decoration:none;align-self:flex-start;}
.eui-link svg{width:13px;height:13px;}
.eui-empty-text{font-size:12px;color:rgba(255,255,255,.5);margin:0;}


/* ==========================================================================
   SUR-COUCHE dans une lightbox (aperçu, confirmation) — occupe toute la carte
   ========================================================================== */
.eui-overlay{position:absolute;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;padding:30px;z-index:5;}
.eui-overlay[hidden]{display:none;}
.eui-overlay-card{background:#2a2a2a;border:1px solid rgba(255,255,255,.12);border-radius:12px;width:100%;max-width:640px;max-height:100%;display:flex;flex-direction:column;overflow:hidden;}
.eui-overlay-head{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:flex-start;gap:12px;}
.eui-overlay-head strong{font-size:13px;display:block;}
.eui-overlay-head span{font-size:11.5px;color:rgba(255,255,255,.55);}
.eui-overlay-close{margin-left:auto;width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:16px;line-height:1;flex:none;}
.eui-overlay iframe{border:0;width:100%;flex:1 1 auto;min-height:320px;background:#fff;}


/* ==========================================================================
   PAGINATION — voir elium_ui_pagination() dans inc/elium_ui.php (README §10)
   ==========================================================================
   Même langage que .eui-segmented (pilules, actif en dodgerblue). Le `margin-top` est
   volontairement plus généreux qu'un simple espacement de fin de section : sous une grille de
   cartes (ex. Trendz → Catalogue), un espacement serré fait « marcher » la pagination sur la
   dernière rangée de cartes au moindre reflow. Ne pas réduire sous 28px sans revérifier sous une
   grille dense.
   ========================================================================== */
.eui-pagination{display:flex;align-items:center;gap:6px;justify-content:center;flex-wrap:wrap;margin:32px 0 6px;}
.eui-page-btn{min-width:34px;height:34px;padding:0 6px;border-radius:20px;border:none;background:rgba(255,255,255,.06);color:rgba(255,255,255,.65);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
.eui-page-btn:hover{background:rgba(255,255,255,.14);color:#fff;}
.eui-page-btn.is-active{background:dodgerblue;color:#fff;cursor:default;}
.eui-page-btn[aria-disabled="true"]{opacity:.3;cursor:not-allowed;}
.eui-page-nav svg{width:14px;height:14px;}
.eui-page-ellipsis{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);font-size:13px;font-weight:700;}


/* ==========================================================================
   ACCORDÉON — repli d'un bloc secondaire (ex. file d'attente robot du catalogue)
   ==========================================================================
   `<details class="eui-accordion">` natif : pas de JS requis pour ouvrir/fermer. Fermé par
   défaut (pas d'attribut `open`) dès que le contenu n'est pas ce qu'on vient consulter en premier
   sur la page — une file d'attente technique, un journal, une liste secondaire.
   ========================================================================== */
.eui-accordion{background:#3a3a3a;border:1px solid rgba(255,255,255,.12);border-radius:14px;margin:0 0 20px;overflow:hidden;}
.eui-accordion>summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;gap:10px;user-select:none;}
.eui-accordion>summary::-webkit-details-marker{display:none;}
.eui-accordion>summary strong{font-size:13.5px;font-weight:700;}
/* Chevron EN TÊTE de résumé (avant le titre), pas poussé à droite : un `margin-left:auto` ici
   absorbe tout l'espace libre et renvoie titre + pastilles au bord droit — le résumé entier se
   retrouve aligné à droite alors que le balisage semble correct (constaté sur le catalogue). */
.eui-accordion-chevron{display:flex;flex:none;color:rgba(255,255,255,.55);transition:transform .18s ease;}
.eui-accordion-chevron svg{width:15px;height:15px;}
.eui-accordion[open] .eui-accordion-chevron{transform:rotate(180deg);}
.eui-accordion-body{padding:0 16px 16px;}
.eui-accordion-body>p{margin:0 0 10px;font-size:12px;color:rgba(255,255,255,.55);}


/* ==========================================================================
   JAUGE DE SCORE — anneau 0-100. Voir EliumUI.scoreGauge() dans js/elium-ui.js.
   ==========================================================================
   Même principe que la jauge du portail client (tz-score, trendz/portal/js/app.js) mais en
   dégradé darkseagreen → dodgerblue pour rester dans la palette du dashboard.
   ========================================================================== */
.eui-score-gauge{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.eui-score-gauge__num{position:absolute;font-weight:700;color:#fff;}
.eui-score-gauge__unit{font-weight:400;color:rgba(255,255,255,.5);}


/* ==========================================================================
   COURBE HEBDOMADAIRE — voir EliumUI.areaChart() dans js/elium-ui.js.
   ==========================================================================
   Aire + ligne + point final marqué, mêmes proportions que le graphique du portail
   (.tz-modal-performance__svg) — première utilisation côté dashboard : Statistiques du catalogue.
   ========================================================================== */
.eui-chart-labels{display:flex;margin-top:6px;}
.eui-chart-labels span{flex:1 1 0;text-align:center;font-size:10px;color:rgba(255,255,255,.45);}
.eui-chart-cap{font-size:11.5px;font-weight:700;margin:0 0 8px;text-align:right;}


/* ==========================================================================
   COMMUNITY MANAGEMENT (2026-09-14) — composants ajoutés pour l'onglet racine
   « Community Management » (README §10.7, §12). Réutilisables partout.
   ==========================================================================
   .eui-card       carte de page (#444, mêmes rayons que .eui-table-card) avec un h4 titre + note
   .eui-two        grille 7/5 pour deux cartes côte à côte (retombe en une colonne < 1100px)
   .eui-stat-row   variantes 4 et 5 colonnes ; .eui-stat.is-big = gros chiffre (tableau de bord)
   .eui-toggle     interrupteur (kill switch) — <button class="eui-toggle is-on" aria-pressed>
   .eui-chips      puces de cibles (concurrents, hashtags…) avec croix, + puce d'ajout pointillée
   .eui-kv         ligne « libellé … valeur » pour un bloc de réglages
   .eui-range      curseur de seuil (input[type=range]) aux couleurs du système
   ========================================================================== */
.eui-card{background:#444;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:14px;}
.eui-card h4{margin:0;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.eui-card h4 span{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.55);}
.eui-two{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:14px;}
.eui-stack-14{display:flex;flex-direction:column;gap:14px;}
@media (max-width:1100px){.eui-two{grid-template-columns:minmax(0,1fr);}}
.eui-stat-row.is-4{grid-template-columns:repeat(4,1fr);}
.eui-stat-row.is-5{grid-template-columns:repeat(5,1fr);}
@media (max-width:1100px){.eui-stat-row.is-4,.eui-stat-row.is-5{grid-template-columns:repeat(2,1fr);}}
/* 6 tuiles (2026-10-09, tableau de bord CM « Tous les comptes ») : 2 rangées de 3 sous 1100 px. */
.eui-stat-row.is-6{grid-template-columns:repeat(6,minmax(0,1fr));}
.eui-stat-row.is-7{grid-template-columns:repeat(7,minmax(0,1fr));}
@media (max-width:1100px){.eui-stat-row.is-6{grid-template-columns:repeat(3,minmax(0,1fr));}}
/* Mosaïque de vignettes carrées (carte Activité du tableau de bord CM, 2026-10-09) : agrandies au clic par
   la même visionneuse que le journal (EliumUI, délégué au document). */
.eui-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;}
.eui-thumbs img{display:block;width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover;object-position:left center;border-radius:8px;cursor:zoom-in;background:rgba(255,255,255,.06);}
/* « + 5 autres » : elium_ui_more() — <details> natif, la suite se déplie sur place, sans JS. */
.eui-more > summary{list-style:none;display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;color:dodgerblue;cursor:pointer;}
.eui-more > summary::-webkit-details-marker{display:none;}
.eui-more[open] > summary{margin-bottom:8px;}
.eui-more[open] > summary .eui-more-closed,.eui-more:not([open]) > summary .eui-more-open{display:none;}
.eui-stat.is-big .eui-stat-v{font-size:22px;align-items:baseline;line-height:1.1;}
.eui-stat.is-big .eui-stat-v small{font-size:13px;font-weight:600;color:rgba(255,255,255,.55);}
.eui-stat.is-gauge{display:flex;align-items:center;gap:14px;}

/* Interrupteur : un <button type="button" class="eui-toggle" aria-pressed="true|false">. Pas de
   :hover bleu (ce n'est pas un .bouton), la couleur dit l'état : vert = ON, gris = OFF. */
.eui-toggle{width:40px;height:22px;border-radius:11px;background:rgba(255,255,255,.18);position:relative;flex:none;border:none;padding:0;margin:0;cursor:pointer;display:inline-block;vertical-align:middle;transition:background .18s;}
.eui-toggle::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .18s;}
.eui-toggle.is-on{background:darkseagreen;}
.eui-toggle.is-on::after{left:21px;}
.eui-toggle.is-busy{opacity:.5;pointer-events:none;}

.eui-chips{display:flex;flex-wrap:wrap;gap:8px;}
.eui-chip{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:6px 10px 6px 12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:12.5px;color:#fff;}
.eui-chip button{border:none;background:transparent;color:rgba(255,255,255,.55);padding:0;margin:0;display:flex;cursor:pointer;}
.eui-chip button svg{width:12px;height:12px;}
.eui-chip button:hover{color:#fff;}
.eui-chip-add{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:5px 10px;background:transparent;border:1px dashed rgba(255,255,255,.3);font-size:12.5px;color:rgba(255,255,255,.6);}
.eui-chip.is-pick{cursor:pointer;border:none;font-family:inherit;}
.eui-chip.is-pick:hover{background:rgba(255,255,255,.14);}
.eui-chip.is-pick.is-on{background:dodgerblue;}
.eui-chip-add input{background:transparent;border:none;color:#fff;font-family:inherit;font-size:12.5px;outline:none;width:150px;padding:0;margin:0;height:auto;text-transform:none;}
/* Ligne de passages (Statistiques du catalogue, « Passages du robot ») : libellé court + icône
   info porteuse de l'infobulle à gauche, une pastille par passage à droite — jamais de bloc
   explicatif. Pastille : date en gras, valeur relevée en clair ; .is-miss = passage sans relevé. */
.eui-passline{display:flex;align-items:flex-start;gap:14px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);}
.eui-passline-k{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.55);padding-top:7px;white-space:nowrap;}
.eui-passline-k svg{width:13px;height:13px;flex:none;cursor:help;}
.eui-passline .eui-chips{gap:6px;}
.eui-chip.is-pass{padding:5px 10px;font-size:11.5px;gap:5px;font-variant-numeric:tabular-nums;cursor:default;}
.eui-chip.is-pass b{font-weight:700;color:#fff;}
.eui-chip.is-pass span{color:rgba(255,255,255,.6);}
.eui-chip.is-pass.is-miss{border-color:rgba(255,140,0,.55);color:darkorange;}
.eui-chip.is-pass.is-miss b,.eui-chip.is-pass.is-miss span{color:darkorange;}
/* Pastille = gain depuis le passage précédent du même clip (« +13 k ») ; la première d'un clip est
   le point de départ (total lu ce jour-là), en grisé (2026-09-23). */
.eui-chip.is-pass.is-gain span{color:rgba(255,255,255,.85);}
.eui-chip.is-pass.is-start span{color:rgba(255,255,255,.4);}
/* Une rangée par clip d'un groupe (2026-09-23) : « Clip N » à gauche (bouton = afficher ce clip,
   blanc gras = le clip ouvert), ses pastilles à droite. Sans ces rangées, trois clips relevés le
   même jour passaient pour trois passages du robot sur le même reel. */
.eui-passline-rows{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.eui-passline-row{display:flex;align-items:flex-start;gap:10px;}
.eui-passline-row .eui-chips{flex:1;min-width:0;gap:6px;}
.eui-passline-clip{flex:none;min-width:48px;padding:6px 0 0;border:0;background:none;font:inherit;font-size:11.5px;color:rgba(255,255,255,.55);text-align:left;white-space:nowrap;cursor:pointer;}
.eui-passline-clip:hover{color:#fff;}
.eui-passline-clip.is-current{color:#fff;font-weight:700;}
span.eui-passline-clip{cursor:default;}
.eui-passline-none{padding-top:6px;font-size:11.5px;color:rgba(255,255,255,.4);}

.eui-kv{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:8px 0;border-top:1px solid rgba(255,255,255,.06);align-items:center;}
.eui-kv:first-child{border-top:none;}
.eui-kv > span{color:rgba(255,255,255,.6);}
.eui-kv > b{color:#fff;font-weight:600;text-align:right;}
.eui-kv small{display:block;font-size:11px;color:rgba(255,255,255,.45);font-weight:400;}

.eui-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.14);outline:none;margin:10px 0 4px;padding:0;}
.eui-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;border:none;}
.eui-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;border:none;}
.eui-inline-note{font-size:11.5px;color:rgba(255,255,255,.55);}
/* Libellé + infobulle (elium_ui_hint) : l'aide est dans le title, l'écran reste lisible. */
.eui-hint{display:inline-flex;vertical-align:middle;margin-left:6px;color:rgba(255,255,255,.4);cursor:help;}
.eui-hint svg{width:13px;height:13px;}
.eui-hint:hover,.eui-hint:focus{color:#fff;outline:none;}
/* Titre de section avec une action à droite (ex. « Rédiger avec l'IA »). */
.eui-sec-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px;}
.eui-sec-row .eui-sec-title{flex:1;margin:0;}
.eui-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
@media (max-width:1100px){.eui-grid3{grid-template-columns:repeat(2,minmax(0,1fr));}}
.eui-range-row{display:flex;align-items:center;gap:18px;}
.eui-range-row .eui-range{flex:1;margin:0;}
.eui-range-row b{font-size:18px;white-space:nowrap;}
.eui-range-row .eui-c-off{font-size:12px;font-weight:600;}
/* Icône posée directement dans un .eui-callout (Community Management) : sans cette règle le SVG
   prend toute la largeur du conteneur flex (constaté sur Comptes, 2026-09-14). */
.eui-callout > svg{width:22px;height:22px;flex:none;}
/* Un bouton de pied de lightbox ne se replie jamais sur deux lignes, même à côté d'un long message. */
.eui-foot .eui-btn{flex:none;white-space:nowrap;}
/* Mise en page « lightbox simple » (formulaire d'ajout dans Réglages) : mêmes champs, sans sidebar. */
.eui-scope .eui-field input[type=time],.eui-scope .eui-field input[type=date]{color-scheme:dark;}

/* Interrupteur à trois positions (Community Management, 2026-09-14) : Pause · Observation · Actif.
   Un .eui-segmented miniature pour une cellule de tableau ; la couleur du segment actif dit le mode. */
.eui-tri{display:inline-flex;gap:2px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:2px;vertical-align:middle;}
.eui-tri-item{border:none;background:transparent;color:rgba(255,255,255,.5);font-family:inherit;font-size:11px;font-weight:700;text-transform:none;letter-spacing:0;padding:4px 10px;margin:0;border-radius:16px;cursor:pointer;white-space:nowrap;line-height:1.3;transition:background .18s,color .18s;}
.eui-tri-item:hover{color:#fff;background:rgba(255,255,255,.08);}
.eui-tri-item.is-on{color:#fff;background:rgba(255,255,255,.2);}
.eui-tri-item.is-on[data-mode="observe"]{background:cadetblue;}
.eui-tri-item.is-on[data-mode="active"]{background:darkseagreen;}
.eui-tri.is-busy{opacity:.5;pointer-events:none;}
/* Une note vide ne prend pas de place (les notes sont posées par le JS selon le contexte). */
.eui-inline-note:empty{display:none;}
/* Ligne d'état compacte : icône ronde + texte court (session Instagram, consentement…). */
.eui-state{display:flex;align-items:center;gap:10px;font-size:13px;min-height:32px;}
.eui-state .eui-badge-icon{width:22px;height:22px;}
.eui-state .eui-badge-icon svg{width:12px;height:12px;}
.eui-state small{color:rgba(255,255,255,.55);font-size:12px;}
/* Sur-couche de confirmation posée sur la page (pas dans une lightbox) : au-dessus de tout, modale comprise. */
.eui-overlay.is-fixed{position:fixed;z-index:10100;}
.eui-overlay-card.is-confirm{max-width:440px;}
.eui-overlay-card.is-confirm .eui-body{padding:18px 30px;gap:0;font-size:13px;line-height:1.55;}
.eui-overlay-card.is-confirm .eui-body p{margin:0;}
/* Courbes par jour empilées — EliumUI.dayCharts() (tableau de bord CM, maquette du 2026-09-15) : un axe
   des lundis, un trait de survol sur toutes les courbes, une infobulle. Deux dates pour la période personnalisée. */
.eui-daycharts{position:relative;display:flex;flex-direction:column;gap:14px;}
.eui-daychart svg{display:block;width:100%;}
.eui-dayaxis{position:relative;height:18px;margin-top:2px;}
.eui-dayaxis span{position:absolute;top:0;transform:translateX(-50%);font-size:10.5px;color:rgba(255,255,255,.55);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.eui-dayaxis span.is-first{transform:none;}
.eui-dayaxis span.is-last{transform:translateX(-100%);}
.eui-daytip{position:absolute;z-index:3;pointer-events:none;background:#2a2a2a;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 11px;font-size:12px;line-height:1.45;box-shadow:0 8px 24px rgba(0,0,0,.35);white-space:nowrap;transform:translate(14px,-50%);}
.eui-daytip.is-left{transform:translate(calc(-100% - 14px),-50%);}
.eui-daytip[hidden]{display:none;}
.eui-daytip strong{display:block;font-size:12.5px;margin-bottom:3px;}
.eui-daytip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;}
.eui-daytip b{font-variant-numeric:tabular-nums;}
.eui-daterange{display:flex;align-items:center;gap:8px;}
.eui-daterange[hidden]{display:none;}
.eui-daterange span{color:rgba(255,255,255,.45);font-size:13px;}
.eui-daterange input[type="date"]{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:8px 12px;color:#fff;font-family:inherit;font-size:13px;height:auto;width:auto;margin:0;color-scheme:dark;text-transform:none;}
.eui-daterange input[type="date"]:focus{outline:none;border-color:darkseagreen;}

/* ==========================================================================
   TRENDZ → ROBOT (2026-09-15) — journal du robot du Mac Mini (README §3.7)
   ========================================================================== */
/* Journal brut d'un passage : monospace, une ligne = heure · source (IG/TT/DB…) · message.
   La couleur porte le niveau (avertissement orange, erreur rouge, détail atténué) ; l'indentation
   du message est conservée (pre-wrap) — les lignes de détail du robot commencent par deux espaces. */
.eui-log{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(0,0,0,.22);max-height:60vh;overflow:auto;}
.eui-log-line{display:flex;gap:10px;padding:3px 12px;border-top:1px solid rgba(255,255,255,.04);color:#ddd;}
.eui-log-line:first-child{border-top:none;}
.eui-log-time{flex:none;color:rgba(255,255,255,.4);}
.eui-log-src{flex:none;width:22px;font-size:10px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.45);text-align:center;line-height:18px;}
.eui-log-msg{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word;}
.eui-log-line.is-debug{color:rgba(255,255,255,.45);}
.eui-log-line.is-warn{color:darkorange;}
.eui-log-line.is-error{color:indianred;background:rgba(205,92,92,.08);}
/* Tuile d'état d'un agent : fenêtre horaire en minuscules à droite du libellé, état sur une ligne. */
.trb-agent .eui-stat-k{display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.trb-agent .trb-window{text-transform:none;letter-spacing:0;font-weight:400;color:rgba(255,255,255,.4);white-space:nowrap;}
.trb-agent .eui-stat-v{font-size:13.5px;gap:9px;}
.trb-agent .eui-badge-icon{width:22px;height:22px;}
.trb-agent .eui-badge-icon svg{width:12px;height:12px;}
.trb-agent .eui-stat-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* Passages : la ligne entière ouvre la lightbox (curseur + survol), résultat tronqué sur une ligne. */
table.eui-table tbody tr.trb-run-row{cursor:pointer;}
.trb-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px;}
/* Journal (tableau) : lignes de détail en retrait, avertissements et erreurs colorés. */
.trb-msg{max-width:640px;}
.trb-msg.is-detail{padding-left:28px !important;color:rgba(255,255,255,.65);}
table.eui-table tbody tr.trb-row-warn td.trb-msg{color:darkorange;}
table.eui-table tbody tr.trb-row-error td.trb-msg{color:indianred;}
/* Compteurs d'un passage (lightbox) : liste clé → valeur sur deux colonnes. */
.trb-kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;}
/* Une barre d'outils posée DANS une carte : c'est le gap de la carte qui espace, pas sa marge (§10.9). */
.eui-card > .eui-toolbar{margin:0;}
/* Deux colonnes de hauteurs très différentes : ne pas étirer la plus courte. */
.eui-two.is-top{align-items:start;}
/* Une alerte rattachée à un passage est cliquable. */
.eui-list-row.trb-open-run{cursor:pointer;}
.eui-list-row.trb-open-run:hover{background:rgba(255,255,255,.06);}


/* ==========================================================================
   TRENDZ → SHOOTINGS & LIVRAISONS (2026-09-15) — README §7.6, §9, maquette
   docs/maquettes/trendz-shootings-livraisons-validation/. Réutilisables partout :
   .eui-month-head    en-tête au-dessus d'un tableau de mois (un tableau PAR mois) : mois, résumé, actions de masse
   .eui-steps         étapes d'un cycle : points reliés (is-done vert · is-now orange · is-wait violet · is-bad rouge)
   .eui-thumb         vignette vidéo 9/16 (lecture auto muette) + pastille, badge de version, boutons ronds
   ========================================================================== */
/* Un tableau par mois : l'en-tête vit ENTRE les cartes, la coupure se voit d'un coup d'œil. */
.eui-month-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 4px 10px;}
.eui-month-head:first-child{margin-top:4px;}
.eui-month-head b{font-size:15px;text-transform:capitalize;}
.eui-month-head .eui-muted{font-size:12.5px;}
.eui-month-head-actions{margin-left:auto;display:flex;align-items:center;gap:8px;}
.tsh-months.is-loading{opacity:.45;transition:opacity .15s;}
.eui-icon-btn.is-off{opacity:.35;}
.eui-icon-btn.is-ghost{visibility:hidden;pointer-events:none;}
.eui-callout.is-bad{border-color:rgba(205,92,92,.4);background:rgba(205,92,92,.06);}
.eui-callout.is-bad > svg{color:indianred;}

.eui-steps{display:flex;align-items:center;width:150px;}
.eui-step{position:relative;width:18px;height:18px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);color:#fff;cursor:help;}
.eui-step svg{width:10px;height:10px;}
.eui-step.is-done{background:darkseagreen;}
.eui-step.is-now{background:darkorange;}
.eui-step.is-bad{background:indianred;}
.eui-step.is-wait{background:#c3a7ff;color:#222;}
.eui-steps i{flex:1;height:2px;background:rgba(255,255,255,.12);}
.eui-steps i.is-done{background:darkseagreen;}
.eui-steps-sub{font-size:11.5px;color:rgba(255,255,255,.55);margin-top:5px;max-width:190px;line-height:1.35;}
.eui-steps-sub strong{color:#fff;font-weight:600;}
/* Le tableau tient sur une ligne par cellule à la largeur du dashboard (1500 px) — README §10.9.
   Colonnes FIXES : un tableau par mois, les colonnes doivent tomber au même endroit d'un mois à
   l'autre (en mise en page automatique chaque table calculait les siennes).
   Budget mesuré (2026-09-16, table de 1352 px = MacBook 1440) : Statut doit loger la pastille la
   plus longue (« En attente des trends », 160 px) et la colonne d'actions ses trois boutons ronds
   (3 × 32 + 2 × 6 = 108 px) — avec 11 % / 10 % les pastilles étaient tronquées et les boutons
   écrasés en ovales. Le padding latéral passe à 14 px sur cette table dense (18 px ailleurs). */
.tsh-table table{table-layout:fixed;width:100%;}
.tsh-table th:nth-child(1){width:21%;}
.tsh-table th:nth-child(2){width:16%;}
.tsh-table th:nth-child(3){width:15%;}
.tsh-table th:nth-child(4){width:20%;}
.tsh-table th:nth-child(5){width:16%;}
.tsh-table th:nth-child(6){width:12%;}
.tsh-table th,.tsh-table td{padding-left:14px;padding-right:14px;}
.tsh-table td,.tsh-table .eui-sub-line{white-space:nowrap;}
.tsh-table td{overflow:hidden;text-overflow:ellipsis;}
/* Les textes secondaires se coupent en « … » plutôt que net au bord de la cellule (ils vivent dans
   des blocs imbriqués, l'ellipse de la cellule ne les atteint pas). */
.tsh-table .eui-identity>div{min-width:0;}
.tsh-table .eui-identity-name{display:inline-block;max-width:100%;vertical-align:top;}
.tsh-table .eui-identity-name,.tsh-table .eui-sub-line,.tsh-table .eui-steps-sub{overflow:hidden;text-overflow:ellipsis;}
.tsh-table .eui-steps-sub{max-width:none;}

/* Vignette 9/16 : la vidéo identifie le trend mieux qu'un titre (nom en infobulle, README §7.4). */
.eui-thumb{position:relative;aspect-ratio:9/16;border-radius:12px;background:#1a1a1a;overflow:hidden;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);}
.eui-thumb-video,.eui-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;background:#000;}
.eui-thumb-name{position:relative;z-index:1;padding:10px;font-size:11.5px;line-height:1.35;text-align:center;color:rgba(255,255,255,.75);text-decoration:none;}
.eui-thumb-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 9px 8px;font-size:11px;line-height:1.3;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.85));}
.eui-thumb-pill{position:absolute;top:10px;left:10px;z-index:3;padding:5px 9px;border-radius:20px;color:#fff;font-size:10.5px;font-weight:700;line-height:1;white-space:nowrap;}
.eui-thumb-pill svg{width:11px;height:11px;vertical-align:-2px;margin-right:4px;}
/* Éléments liés (data-eui-link, js/elium-ui.js) : survoler l'un allume les autres — vignette d'un trend ↔ sa note du client. */
.eui-thumb.is-linked{outline:3px solid dodgerblue;outline-offset:2px;}
.eui-list-row.is-linked{background:rgba(30,144,255,.14);}
.eui-thumb-ver{position:absolute;top:10px;right:10px;z-index:3;padding:5px 9px;border-radius:20px;background:rgba(20,20,20,.72);color:#fff;font-size:10.5px;font-weight:600;line-height:1;}
/* Boutons ronds sur la vignette (32px, fond sombre) — cotes de l'ancien bouton source des cartes du catalogue. */
.eui-thumb-btn{position:absolute;bottom:10px;z-index:3;width:32px;height:32px;border-radius:50%;background:rgba(20,20,20,.72);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;text-decoration:none;}
.eui-thumb-btn:hover{background:rgba(0,0,0,.88);color:#fff;}
.eui-thumb-btn svg{width:15px;height:15px;display:block;}
.eui-thumb-btn.is-left{left:10px;}
.eui-thumb-btn.is-left svg{width:17px;height:17px;}
.eui-thumb-btn.is-right{right:10px;}
.eui-thumb[data-video]{cursor:zoom-in;}
/* Sélecteur de trends (choisir à la place du client) : cases cochées en vert, déjà tournés atténués. */
.eui-thumb.is-pick{cursor:pointer;transition:opacity .15s,box-shadow .15s;}
.eui-thumb.is-pick.is-used{opacity:.5;}
.eui-thumb.is-pick.is-on{opacity:1;box-shadow:inset 0 0 0 3px darkseagreen;}
.eui-thumb-tick{position:absolute;top:8px;right:8px;z-index:3;width:22px;height:22px;border-radius:50%;background:darkseagreen;color:#fff;display:none;align-items:center;justify-content:center;}
.eui-thumb-tick svg{width:12px;height:12px;}
.eui-thumb.is-on .eui-thumb-tick{display:flex;}
.eui-thumb[hidden]{display:none;}

/* Lightbox Shooting — onglet Dates : calendrier (cotes de l'ancienne lightbox) + panneau du jour. */
.tsh-dates{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;}
.tsh-cal-col{flex:0 0 250px;width:250px;max-width:100%;}
.tsh-day-panel{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:12px;}
#trend-shooting-modal .tz-calendar{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;width:100%;box-sizing:border-box;user-select:none;}
#trend-shooting-modal .tz-calendar__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:12px;gap:6px;}
#trend-shooting-modal .tz-calendar__title{flex:1;text-align:center;font-weight:600;text-transform:capitalize;}
#trend-shooting-modal .tz-calendar__nav{width:24px;height:24px;border:0;border-radius:4px;background:rgba(255,255,255,.08);color:inherit;font-size:15px;line-height:1;cursor:pointer;flex-shrink:0;padding:0;margin:0;}
#trend-shooting-modal .tz-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;font-size:11px;}
#trend-shooting-modal .tz-calendar__dow{opacity:.45;font-size:9px;padding-bottom:2px;line-height:1.2;}
#trend-shooting-modal .tz-calendar__day{width:30px;height:30px;margin:0 auto;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;line-height:1;box-sizing:border-box;}
#trend-shooting-modal .tz-calendar__day.st-free{box-shadow:inset 0 0 0 1.5px #9a9a9a;}
#trend-shooting-modal .tz-calendar__day.st-semi{box-shadow:inset 0 0 0 1.5px darkorange;}
#trend-shooting-modal .tz-calendar__day.st-full{opacity:.32;}
#trend-shooting-modal .tz-calendar__day.st-mine{background:darkseagreen;color:#fff;font-weight:600;}
#trend-shooting-modal .tz-calendar__day.is-selected{background:dodgerblue;color:#fff;font-weight:600;}
#trend-shooting-modal .tz-calendar__day.st-full.is-selected{opacity:1;}
#trend-shooting-modal .tz-calendar__day.st-mine.is-selected{box-shadow:inset 0 0 0 2px #2f6b2f;}
#trend-shooting-modal .tz-calendar__day.is-muted{opacity:.22;pointer-events:none;cursor:default;}
.tsh-cal-loading{font-size:10px;opacity:.6;text-align:center;margin-top:6px;}
.tsh-cal-legend{font-size:10.5px;opacity:.8;margin-top:8px;line-height:1.95;}
.tsh-cal-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-2px;margin-right:7px;box-sizing:border-box;}
.tsh-cal-legend .lg-mine{background:darkseagreen;}
.tsh-cal-legend .lg-free{box-shadow:inset 0 0 0 1.5px #9a9a9a;}
.tsh-cal-legend .lg-semi{box-shadow:inset 0 0 0 1.5px darkorange;}
.tsh-cal-legend .lg-full{background:rgba(255,255,255,.18);}
.tsh-day-title{margin:0;font-size:13px;font-weight:600;text-transform:capitalize;}
.tsh-day-title small{font-weight:400;color:rgba(255,255,255,.55);margin-left:8px;text-transform:none;}
.tsh-radios{display:flex;flex-direction:column;gap:6px;}
.tsh-checks{display:flex;gap:16px;flex-wrap:wrap;}
.tsh-radios input,.tsh-checks input{width:auto;margin:0;height:auto;}
.tsh-custom{padding:9px 10px;background:rgba(0,0,0,.28);border-radius:6px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:11px;}
.tsh-custom[hidden]{display:none;}
.tsh-custom input[type=time]{width:96px;padding:3px 5px;box-sizing:border-box;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.15);border-radius:4px;color:inherit;height:auto;margin:0;}
.tsh-custom select{width:78px;padding:3px 5px;box-sizing:border-box;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.15);border-radius:4px;color:inherit;height:auto;margin:0;}
.tsh-custom-out{font-weight:600;font-size:11.5px;}
#trend-shooting-modal .ts-book-loc,#trend-shooting-modal .ts-shoot-loc{width:100%;box-sizing:border-box;padding:9px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#fff;font-family:inherit;font-size:13px;height:auto;margin:0;text-transform:none;}
.tsh-loc-row{display:flex;gap:8px;align-items:center;}
.tsh-loc-row input{flex:1;min-width:0;}
.tsh-day-actions{display:flex;gap:8px;flex-wrap:wrap;}
.tsh-or{display:flex;align-items:center;gap:10px;opacity:.55;font-size:11px;}
.tsh-or::before,.tsh-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14);}
.tsh-freelist{display:flex;flex-direction:column;gap:4px;}
.tsh-freeslot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;background:rgba(143,188,143,.12);border:1px solid rgba(143,188,143,.4);border-radius:6px;padding:4px 4px 4px 9px;}

/* Onglet Trends : le bloc du shooting en 4 colonnes, les autres blocs en retrait. */
.tsh-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.tsh-thumbs.is-small{grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;}
.tsh-other{opacity:.45;}
.tsh-panel-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tsh-panel-actions .eui-inline-note{margin-left:auto;}
.tsh-pick-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;}
.tsh-pick-search{width:200px;padding:7px 12px;}

/* Onglet Montages : cartes au gabarit .tsc-card du Chasseur, zone de dépôt SUR la référence au
   premier dépôt (la cible du glisser-déposer devient la vignette), SOUS le montage refusé sinon. */
.tsh-vgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.tsh-vcard{padding:0;overflow:hidden;border-radius:16px;display:flex;flex-direction:column;background:#3a3a3a;cursor:pointer;transition:opacity .22s ease;}
.tsh-vcard.is-busy{opacity:.6;}
.tsh-vcard .eui-thumb{border-radius:0;}
.tsh-vbody{display:flex;flex-direction:column;gap:8px;padding:12px;}
.tsh-vbody .eui-state{min-height:0;font-size:12.5px;flex-wrap:wrap;row-gap:2px;}
.tsh-vbody .eui-state small{flex-basis:100%;padding-left:32px;font-size:11.5px;}
.tsh-vactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
/* État d'optimisation d'un montage (HD 1080p + version légère) : une ligne courte, détail en infobulle. */
.tsh-opt{display:inline-flex;align-items:center;gap:6px;cursor:help;}
.tsh-opt i{width:6px;height:6px;border-radius:50%;background:#c3a7ff;animation:tshOptPulse 1.2s ease-in-out infinite;}
.tsh-opt svg{width:12px;height:12px;color:#ffb347;}
.tsh-opt.is-failed{color:#ffb347;}
.eui-list-sub .tsh-opt{margin-left:6px;}
@keyframes tshOptPulse{0%,100%{opacity:.35;transform:scale(.8);}50%{opacity:1;transform:scale(1.15);}}
.tsh-vprogress{display:flex;flex-direction:column;gap:4px;}
.tsh-vprogress[hidden]{display:none;}
.tsh-quote{font-size:11.5px;line-height:1.45;color:#ddd;font-style:italic;padding:6px 9px;border-left:2px solid rgba(255,255,255,.18);}
.tsh-upload{display:flex;flex-direction:column;gap:8px;}
.tsh-upload input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);}
.tsh-dz{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;cursor:pointer;color:rgba(255,255,255,.85);font-size:12px;line-height:1.35;transition:border-color .15s,background .15s;}
.tsh-dz svg{width:24px;height:24px;color:#fff;flex:none;}
.tsh-dz small{font-size:10.5px;color:rgba(255,255,255,.55);}
.tsh-dz .tsh-dz-short{display:none;}
.tsh-dz.eui-dropzone{padding:12px;}
.tsh-dz.eui-dropzone.is-drag{border-color:darkseagreen;background:rgba(143,188,143,.1);}
/* Zone de dépôt posée SUR la vignette de référence : un bandeau en bas tant qu'on ne dépose rien
   (la vidéo reste lisible et cliquable → détail du montage) ; toute la carte quand un fichier
   passe au-dessus (.is-drag, posé par le JS sur la carte survolée). */
.tsh-upload.is-overlay{position:absolute;left:0;right:0;bottom:0;z-index:4;}
.tsh-upload.is-overlay .tsh-dz{flex-direction:row;gap:8px;padding:28px 10px 11px;background:linear-gradient(transparent,rgba(0,0,0,.88));border:0;font-weight:600;}
.tsh-upload.is-overlay .tsh-dz svg{width:18px;height:18px;}
.tsh-upload.is-overlay .tsh-dz .tsh-dz-short{display:inline;}
.tsh-upload.is-overlay .tsh-dz .tsh-dz-long,.tsh-upload.is-overlay .tsh-dz small{display:none;}
.tsh-upload.is-overlay .tsh-dz:hover{color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.95));}
.tsh-upload.is-overlay.is-drag{top:0;}
.tsh-upload.is-overlay.is-drag .tsh-dz{position:absolute;inset:0;flex-direction:column;padding:14px;background:rgba(0,0,0,.6);border:2px dashed darkseagreen;font-weight:400;}
.tsh-upload.is-overlay.is-drag .tsh-dz svg{width:24px;height:24px;}
.tsh-upload.is-overlay.is-drag .tsh-dz .tsh-dz-short{display:none;}
.tsh-upload.is-overlay.is-drag .tsh-dz .tsh-dz-long,.tsh-upload.is-overlay.is-drag .tsh-dz small{display:block;}
/* Un montage en détail : lecteur avec le son + versions / dépôt / échéances. */
.tsh-back{display:flex;}
.tsh-detail{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start;}
.tsh-detail-side{display:flex;flex-direction:column;gap:22px;}
.tsh-player{aspect-ratio:9/16;max-height:520px;border-radius:12px;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.tsh-player video{width:100%;height:100%;object-fit:contain;display:block;background:#000;}
.tsh-zoom-inner{position:relative;max-width:min(420px,92vw);width:100%;}
.tsh-zoom-inner video{width:100%;max-height:82vh;border-radius:12px;background:#000;display:block;}
.tsh-zoom-close{position:absolute;top:-14px;right:-14px;z-index:2;}
@media (max-width:1100px){.tsh-thumbs{grid-template-columns:repeat(3,minmax(0,1fr));}.tsh-vgrid{grid-template-columns:repeat(2,minmax(0,1fr));}.tsh-pick-grid{grid-template-columns:repeat(4,minmax(0,1fr));}.tsh-detail{grid-template-columns:minmax(0,1fr);}}


/* ==========================================================================
   TRENDZ → EN ATTENTE DE VALIDATION (2026-09-15) — cartes de paire (deux clips · signaux · verdict)
   et cartes de groupe, maquette docs/maquettes/trendz-shootings-livraisons-validation/.
   ========================================================================== */
.tpv-list-card.is-loading{opacity:.45;transition:opacity .15s;}
.tpv-pairs{display:flex;flex-direction:column;gap:18px;}
.tpv-pair{background:#444;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:18px 20px;transition:opacity .22s;}
.tpv-pair.is-busy{opacity:.6;pointer-events:none;}
.tpv-pair.is-oui{border-color:rgba(143,188,143,.45);}
.tpv-pair.is-non{border-color:rgba(205,92,92,.45);}
.tpv-pair.is-revoir{border-color:rgba(255,140,0,.45);}
.tpv-form{display:grid;grid-template-columns:auto minmax(0,1fr) 250px;gap:22px;align-items:start;margin:0;}
.tpv-clips{display:grid;grid-template-columns:repeat(2,170px);gap:14px;}
.tpv-clip-col{display:flex;flex-direction:column;gap:8px;}
.tpv-clip .eui-thumb-btn.is-on{background:darkseagreen;}
.tpv-cap{font-size:12px;line-height:1.35;}
.tpv-cap b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tpv-cap span{color:rgba(255,255,255,.55);}
.tpv-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.tpv-head b{font-size:15px;}
.tpv-head .eui-muted{margin-left:auto;font-size:12px;}
.tpv-sig{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:5px 11px;font-size:11.5px;font-weight:700;color:#fff;white-space:nowrap;}
.tpv-sig svg{width:12px;height:12px;}
.tpv-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.12);width:120px;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:6px;}
.tpv-bar i{display:block;height:100%;background:darkseagreen;}
.tpv-why{font-size:12.5px;line-height:1.5;color:#ddd;font-style:italic;padding:10px 12px;border-left:2px solid rgba(255,255,255,.18);margin:12px 0 0;}
.tpv-why.is-note{font-style:normal;color:rgba(255,255,255,.7);}
.tpv-fiche{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06);}
.tpv-fiche > div > b{display:block;font-size:12.5px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tpv-meta{display:flex;flex-direction:column;gap:6px;}
.tpv-meta .eui-inline-note{padding:7px 0;}
.tpv-actions{display:flex;flex-direction:column;gap:8px;}
.tpv-actions .eui-btn{justify-content:center;}
/* Sous « Même trend » : ce qu'un OUI produit quand un groupe existe déjà (« #212 rejoint le groupe 12 · 4 clips »). */
.tpv-join{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.62);text-align:center;margin:-2px 0 2px;}
.tpv-join svg{width:12px;height:12px;flex:none;color:darkseagreen;}
.tpv-note{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:9px 12px;color:#fff;font-family:inherit;font-size:12px;width:100%;box-sizing:border-box;height:auto;margin:0;text-transform:none;}
.tpv-note::placeholder{color:rgba(255,255,255,.4);}
/* Sélecteur de domaines : un <details> dont le résumé a l'allure du select pilule. */
.tpv-dd{position:relative;}
.tpv-dd-summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:7px 28px 7px 12px;font-size:12px;}
.tpv-dd-summary::-webkit-details-marker{display:none;}
.tpv-dd-panel{position:absolute;z-index:60;top:calc(100% + 4px);left:0;min-width:240px;max-height:220px;overflow:auto;background:#2a2a2a;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 8px 24px rgba(0,0,0,.35);}
.tpv-dd-item input{width:auto;height:auto;margin:0;}
.tpv-dd-item.is-susp{color:rgba(255,255,255,.5);}
.tpv-pub input{width:auto;height:auto;margin:0;}
/* Groupes */
.tpv-grp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
.tpv-grp{background:#444;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:14px;transition:opacity .22s;}
.tpv-grp.is-busy{opacity:.6;pointer-events:none;}
.tpv-grp .tpv-form{display:flex;flex-direction:column;gap:14px;}
.tpv-grp-clips{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.tpv-grp-clips .eui-thumb{border-radius:10px;cursor:default;}
.tpv-grp-more{background:rgba(255,255,255,.05);color:rgba(255,255,255,.55);font-size:13px;font-weight:700;}
.tpv-tags{display:flex;gap:10px;flex-wrap:wrap;}
.tpv-tag{display:inline-flex;align-items:center;gap:4px;flex:1 1 150px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:0 12px;}
.tpv-tag input{flex:1;min-width:0;background:transparent;border:none;color:#fff;font-family:inherit;font-size:13px;padding:9px 0;height:auto;margin:0;outline:none;text-transform:none;width:auto;}
.tpv-grp-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
.tpv-verify{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0;}
.tpv-count{width:180px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:8px 12px;color:#fff;font-family:inherit;font-size:13px;height:auto;margin:0;text-transform:none;}
.tpv-verify .eui-btn:nth-last-child(2){margin-left:auto;}
@media (max-width:1100px){.tpv-form{grid-template-columns:minmax(0,1fr);}.tpv-actions{flex-direction:row;flex-wrap:wrap;}.tpv-actions .tpv-join{flex:1 1 100%;margin:0;}.tpv-grp-grid{grid-template-columns:minmax(0,1fr);}}

/* ==========================================================================
   ENVOI D'E-MAIL → MODÈLES & ROUTINES (2026-09-17)
   Fusion Templates + Routine (maquette validée, docs/maquettes/email-routine/README.md) : page
   par famille (lists/email_modeles.php), lightbox Contenu · Réglages · Historique
   (lists/inc/email_routine_modal.inc.php), bibliothèque des balises (EliumUI.tagPicker),
   éditeur visuel (js/elium-email-builder.js). Préfixe emm-. README §10.
   ========================================================================== */
/* Tableau des routines : 8 colonnes dans les 1500 px de la page → largeurs fixes (table-layout:fixed
   sur table.emm-rt, l'objet prend le reste), marges intérieures 14 px (18 aux bords de la carte).
   Sans cela la famille Trendz débordait de la carte de 77 px (constaté en ligne le 2026-09-18).
   Première ligne d'une cellule jamais repliée (tronquée « … » avec le texte complet en infobulle) ;
   seule la seconde ligne (précision du déclencheur, adresses) peut se replier. */
.emm-table table.emm-rt{table-layout:fixed;}
.emm-table .eui-table thead th,.emm-table .eui-table tbody td{padding-left:14px;padding-right:14px;}
.emm-table .eui-table thead th:first-child,.emm-table .eui-table tbody td:first-child{padding-left:18px;}
.emm-table .eui-table thead th:last-child,.emm-table .eui-table tbody td:last-child{padding-right:18px;}
.emm-table thead th{white-space:nowrap;}
.emm-table th.c-rt{width:278px;} .emm-table th.c-when{width:250px;} .emm-table th.c-to{width:130px;} .emm-table th.c-pers{width:206px;}
.emm-table th.c-send{width:116px;} .emm-table th.c-last{width:126px;} .emm-table th.c-act{width:140px;}
.emm-table .eui-identity > div{min-width:0;}
.emm-table .eui-identity-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.emm-table .eui-identity-sub code{font-size:10.5px;color:rgba(255,255,255,.55);background:rgba(255,255,255,.06);padding:1px 6px;border-radius:6px;white-space:nowrap;}
.emm-table .eui-identity .eui-badge-icon{width:36px;height:36px;} .emm-table .eui-identity .eui-badge-icon svg{width:16px;height:16px;}
.emm-table td.emm-when strong,.emm-table td.emm-obj strong,.emm-table td.emm-obj > span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.emm-table td.emm-when > span{display:block;}
.emm-table .emm-sub{margin-top:5px;overflow-wrap:anywhere;}
.emm-send{display:flex;align-items:center;gap:10px;white-space:nowrap;} .emm-send b{font-size:12.5px;color:#fff;font-weight:600;}
.emm-persona{display:flex;align-items:center;gap:9px;font-size:13px;min-width:0;} .emm-persona .eui-avatar{width:26px;height:26px;font-size:10px;}
.emm-persona-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.emm-persona.is-fallback .eui-avatar{background:transparent;border:1px dashed rgba(255,255,255,.4);color:rgba(255,255,255,.6);width:26px;height:26px;font-size:10px;display:flex;align-items:center;justify-content:center;border-radius:50%;}
.emm-last{font-size:13px;white-space:nowrap;} .emm-last b{font-weight:600;color:#fff;} .emm-last .eui-pill{padding:3px 9px;font-size:11px;margin-top:4px;}
/* Lightbox : icône ronde à la place de l'avatar, clé sous le nom, mode large pour l'éditeur visuel. */
.emm-modal .eui-idcard .eui-avatar.is-lg svg{width:22px;height:22px;}
.emm-key{font-size:11px;color:rgba(255,255,255,.55);background:rgba(255,255,255,.06);padding:2px 7px;border-radius:6px;display:inline-block;margin-top:2px;}
.eui-modal-card.is-wide{width:min(1400px,96vw) !important;max-width:1400px;}
.emm-kvs{display:flex;flex-direction:column;} .emm-kvs .eui-kv > b{max-width:62%;}
.emm-switch{display:flex;align-items:center;gap:14px;}
.emm-switch > div{display:flex;flex-direction:column;gap:2px;} .emm-switch b{font-size:13px;} .emm-switch small{font-size:11.5px;color:rgba(255,255,255,.55);}
/* Contenu : Format en tête, enveloppe (De · À · Objet), barre du canvas */
.emm-fmt{display:flex;align-items:center;gap:14px;}
.emm-fmt .eui-sec-title{margin:0;border:none;padding:0;flex:none;}
.emm-env{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:4px 16px;display:flex;flex-direction:column;}
.emm-env-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.06);font-size:13px;min-height:42px;}
.emm-env-row:first-child{border-top:none;}
.emm-env-row > label{width:52px;flex:none;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.5);font-weight:600;margin:0;}
.emm-env-row .emm-persona .eui-avatar{width:22px;height:22px;font-size:9px;}
.emm-env-row .eui-inline-note{margin-left:auto;white-space:nowrap;}
.emm-env-row input.eui-input{flex:1;min-height:34px;padding:6px 10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#fff;font-family:inherit;font-size:13px;height:auto;margin:0;width:auto;}
.emm-env-row .emm-ro{flex:1;color:#fff;}
.emm-cbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.emm-cbar > .eui-state{flex:1;min-height:0;}
.emm-mode{display:inline-flex;gap:2px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:2px;flex:none;}
.emm-mode button{border:none;background:transparent;color:rgba(255,255,255,.5);font-family:inherit;font-size:11px;font-weight:700;padding:4px 10px;margin:0;border-radius:16px;cursor:pointer;height:auto;}
.emm-mode button.is-on{color:#fff;background:dodgerblue;} .emm-mode.is-plain button.is-on{background:rgba(255,255,255,.2);}
.emm-body{width:100%;min-height:190px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:10px 12px;color:#eee;font-family:inherit;font-size:13px;line-height:1.55;resize:vertical;box-sizing:border-box;height:auto;margin:0;}
.emm-body:focus{outline:none;border-color:rgba(30,144,255,.6);}
.emm-preview{width:100%;height:520px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#1f1f1f;}
.emm-preview iframe{width:100%;height:100%;border:none;border-radius:12px;background:#fff;}
.emm-preview.is-phone iframe{width:390px;display:block;margin:0 auto;}
/* Balises de cet e-mail (puces cliquables) et bibliothèque complète */
.eui-chip.is-ins{cursor:pointer;border:none;font-family:inherit;} .eui-chip.is-ins:hover{background:rgba(255,255,255,.16);}
.eui-chip.is-warn{border:1px solid rgba(255,140,0,.6);color:darkorange;}
.emm-tagpanel{display:flex;flex-direction:column;gap:10px;min-height:0;}
.emm-tagsearch{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:6px 12px;}
.emm-tagsearch svg{width:14px;height:14px;color:rgba(255,255,255,.55);flex:none;}
.emm-tagsearch input{flex:1;background:transparent;border:none;color:#fff;font-family:inherit;font-size:12.5px;outline:none;padding:2px 0;margin:0;height:auto;width:auto;min-width:0;}
.emm-taglist{display:flex;flex-direction:column;gap:2px;overflow:auto;max-height:320px;min-height:0;}
.emm-taggrp{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.45);padding:10px 4px 4px;display:flex;align-items:center;justify-content:space-between;}
.emm-taggrp:first-child{padding-top:0;}
.emm-tagrow{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:12px;cursor:pointer;border:none;background:transparent;color:#fff;font-family:inherit;text-align:left;width:100%;margin:0;height:auto;}
.emm-tagrow:hover,.emm-tagrow.is-cur{background:rgba(255,255,255,.08);}
.emm-tagrow code{font-size:11.5px;color:#fff;background:rgba(255,255,255,.08);padding:2px 7px;border-radius:6px;white-space:nowrap;flex:none;}
.emm-tagrow span{flex:1;min-width:0;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.emm-tagrow svg{width:13px;height:13px;color:rgba(255,255,255,.45);flex:none;}
.emm-tagrow.is-off{opacity:.45;} .emm-tagrow.is-off code{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.4);}
.emm-tagrow.is-warn code{color:darkorange;background:rgba(255,140,0,.14);}
.emm-tagrow.is-hit code{box-shadow:0 0 0 2px dodgerblue;}
.emm-tagpop{position:absolute;z-index:80;width:360px;max-height:260px;overflow:auto;background:#333;border:1px solid rgba(255,255,255,.18);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.45);padding:6px;display:flex;flex-direction:column;gap:2px;}
.emm-tagpop .emm-tagrow.is-cur{background:dodgerblue;} .emm-tagpop .emm-tagrow.is-cur span,.emm-tagpop .emm-tagrow.is-cur svg{color:#fff;} .emm-tagpop .emm-tagrow.is-cur code{background:rgba(255,255,255,.2);}
.emm-tagpop-foot{font-size:11px;color:rgba(255,255,255,.5);padding:6px 8px 2px;border-top:1px solid rgba(255,255,255,.1);margin-top:4px;display:flex;justify-content:space-between;}
.emm-tagpop-foot kbd{font-family:inherit;background:rgba(255,255,255,.1);border-radius:4px;padding:1px 5px;color:#fff;}
/* Historique : tuiles + listes (composants existants) ; Utilisation : liste de campagnes. */
.emm-msg{font-size:12.5px;} .emm-msg.is-ok{color:darkseagreen;} .emm-msg.is-bad{color:indianred;}
/* Éditeur visuel : la lightbox s'élargit, le canvas est l'e-mail (600 px, fond blanc). */
.emm-builder{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;min-height:0;}
.emm-bld-left{display:flex;flex-direction:column;gap:12px;min-width:0;}
.emm-bld-add{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;}
.emm-bld-add button{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;margin:0;height:auto;text-transform:none;letter-spacing:0;}
.emm-bld-add button svg{width:12px;height:12px;color:rgba(255,255,255,.65);}
.emm-bld-add .eui-badge-icon{width:24px;height:24px;} .emm-bld-add .eui-badge-icon svg{width:13px;height:13px;}
.emm-stage{background:#1f1f1f;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:22px;display:flex;justify-content:center;align-items:flex-start;overflow:auto;max-height:560px;}
.emm-canvas{width:600px;background:#fff;color:#1a1a1a;font-family:Arial,Helvetica,sans-serif;border-radius:6px;padding:8px 0 4px;display:flex;flex-direction:column;flex:none;}
.emm-canvas.is-phone{width:390px;}
.emm-blk{position:relative;padding:12px 32px;border:2px solid transparent;border-radius:6px;cursor:pointer;}
.emm-blk:hover{border-color:rgba(30,144,255,.35);}
.emm-blk.is-selected{border-color:dodgerblue;background:rgba(30,144,255,.04);cursor:default;}
.emm-blk [contenteditable]{outline:none;}
.emm-blk [contenteditable]:focus{box-shadow:inset 0 0 0 1px rgba(30,144,255,.35);border-radius:3px;}
.emm-blk-tools{position:absolute;top:-16px;right:12px;display:flex;gap:2px;background:#333;border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:3px;box-shadow:0 4px 14px rgba(0,0,0,.35);z-index:3;}
.emm-blk-tools button{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:transparent;border:none;padding:0;margin:0;cursor:pointer;}
.emm-blk-tools button svg{width:13px;height:13px;} .emm-blk-tools button.is-danger{color:indianred;} .emm-blk-tools button:hover{background:rgba(255,255,255,.12);}
.emm-blk-tag{position:absolute;top:-9px;left:14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:dodgerblue;padding:2px 7px;border-radius:8px;z-index:3;}
.emm-insert{height:0;position:relative;margin:0 32px;}
.emm-insert button{position:absolute;left:50%;top:-11px;transform:translateX(-50%);background:dodgerblue;color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:12px;white-space:nowrap;border:none;cursor:pointer;opacity:0;transition:opacity .12s;margin:0;height:auto;font-family:inherit;z-index:2;}
.emm-blk:hover + .emm-insert button,.emm-insert:hover button{opacity:1;}
.emm-canvas .emm-tagchip{display:inline-block;padding:0 6px;border-radius:6px;background:rgba(50,0,175,.1);color:#3200af;font-weight:600;font-size:.94em;border:1px solid rgba(50,0,175,.25);line-height:1.35;white-space:nowrap;cursor:pointer;user-select:none;}
.emm-canvas .emm-tagchip.is-warn{background:rgba(255,140,0,.14);color:#b45309;border-color:rgba(255,140,0,.45);}
.emm-canvas .emm-tagchip.is-bad{background:rgba(205,92,92,.14);color:#b3261e;border-color:rgba(205,92,92,.5);text-decoration:line-through;}
.emm-canvas.is-preview .emm-blk{border-color:transparent;background:transparent;cursor:default;}
.emm-blk-sig{padding:12px 32px 8px;border-top:1px solid #ececec;font-size:12.5px;color:#777;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.emm-blk-sig span{font-size:11px;color:#999;}
/* Bibliothèque de groupes de blocs (2026-10-01) : un groupe posé dans l'e-mail est lié — cadre
   pointillé violet, étiquette toujours visible, contenu non modifiable sur place. */
.emm-bld-lib{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.emm-bld-lib-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.5);font-weight:600;margin-right:2px;}
.emm-bld-lib button{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:16px;background:rgba(50,0,175,.25);border:1px solid rgba(140,110,255,.45);color:#fff;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;margin:0;height:auto;text-transform:none;letter-spacing:0;}
.emm-bld-lib button svg{width:12px;height:12px;color:rgba(255,255,255,.75);}
.emm-blk.is-group{border:2px dashed rgba(50,0,175,.35);}
.emm-blk.is-group:hover{border-color:rgba(50,0,175,.65);}
.emm-blk.is-group.is-selected{border-style:solid;border-color:#3200af;background:rgba(50,0,175,.04);}
.emm-grp-tag{position:absolute;top:-9px;left:14px;display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:#3200af;padding:2px 7px;border-radius:8px;z-index:3;}
.emm-grp-tag svg{width:10px;height:10px;}
/* Les blocs d'un groupe gardent EXACTEMENT la place qu'ils avaient avant d'être groupés (12 px de
   chaque côté + 2 px de bordure par bloc, soit 28 px entre deux contenus) : grouper ne déplace rien.
   PIÈGE : en padding, jamais en margin — `.eui-modal-card div:not([class*="eui-"]){margin:0}`
   (0,2,1) battait l'ancien `.emm-grp-blk + .emm-grp-blk{margin-top:16px}` (0,2,0) : dans la
   lightbox, les blocs d'un groupe se collaient (constaté le 2026-10-09). */
.emm-blk.is-group{padding:0 32px;}
.emm-grp-blk{padding:12px 0;}
.emm-grp-blk + .emm-grp-blk{padding-top:16px;}
.emm-grp-missing{font-size:12px;color:#b3261e;text-align:center;padding:6px 0;}
.emm-sig-slot{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;color:#777;border:1px dashed #d0d0d0;border-radius:6px;padding:10px;}
.emm-sig-slot svg{width:13px;height:13px;}
.emm-grp-save{display:flex;gap:8px;align-items:center;}
.emm-grp-save input.eui-input{flex:1;min-width:0;}
.emm-grp-modal{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:24px;}
.emm-grp-modal-card{background:#2b2b2b;border:1px solid rgba(255,255,255,.12);border-radius:14px;width:min(1240px,100%);max-height:calc(100vh - 48px);overflow:auto;display:flex;flex-direction:column;gap:14px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.emm-grp-modal-head{display:flex;align-items:center;gap:12px;}
.emm-grp-modal-head input.eui-input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 10px;color:#fff;font-family:inherit;font-size:14px;font-weight:600;height:auto;margin:0;}
.emm-grp-uses{font-size:12px;color:rgba(255,255,255,.55);white-space:nowrap;}
.emm-grp-modal-foot{display:flex;align-items:center;gap:10px;justify-content:flex-end;}
.emm-grp-modal-foot [data-grp-msg]{margin-right:auto;font-size:12px;color:#ccc;}
.emm-mailframe{width:680px;background:#fff;border-radius:8px;overflow:hidden;font-family:Arial,Helvetica,sans-serif;color:#1a1a1a;box-shadow:0 10px 30px rgba(0,0,0,.35);flex:none;}
.emm-mailframe.is-phone{width:420px;}
.emm-mailhead{padding:18px 24px 14px;background:#f6f6f6;border-bottom:1px solid #e3e3e3;display:flex;flex-direction:column;gap:12px;}
.emm-mailhead-subj{font-size:17px;font-weight:700;color:#1a1a1a;line-height:1.3;}
.emm-mailhead-from{display:flex;align-items:center;gap:12px;font-size:13px;color:#333;}
.emm-mailhead-from .eui-avatar{width:36px;height:36px;font-size:13px;}
.emm-mailhead-from b{font-weight:700;color:#1a1a1a;} .emm-mailhead-from span{color:#666;}
.emm-mailhead-from small{display:block;font-size:12px;color:#666;margin-top:2px;}
.emm-mailhead-date{margin-left:auto;font-size:12px;color:#888;white-space:nowrap;align-self:flex-start;}
.emm-mailframe iframe{width:100%;border:none;display:block;background:#fff;}
/* Panneau droit de l'éditeur : Bloc | Balises */
.emm-bld-right{display:flex;flex-direction:column;gap:12px;min-height:0;}
.emm-ptabs{display:flex;gap:2px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:3px;}
.emm-ptabs button{flex:1;text-align:center;font-size:12.5px;font-weight:600;padding:7px 10px;border-radius:16px;color:rgba(255,255,255,.55);background:transparent;border:none;font-family:inherit;cursor:pointer;margin:0;height:auto;}
.emm-ptabs button.is-on{background:dodgerblue;color:#fff;}
.emm-panel{background:#333;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:14px;min-height:0;max-height:560px;overflow:auto;}
.emm-prow{display:flex;flex-direction:column;gap:7px;} .emm-prow > label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.5);font-weight:600;margin:0;}
.emm-prow input.eui-input,.emm-prow textarea.eui-input{width:100%;box-sizing:border-box;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 10px;color:#fff;font-family:inherit;font-size:12.5px;height:auto;margin:0;min-height:0;}
.emm-swatches{display:flex;gap:8px;} .emm-swatches button{width:24px;height:24px;border-radius:50%;border:2px solid transparent;padding:0;margin:0;cursor:pointer;} .emm-swatches button.is-on{border-color:#fff;box-shadow:0 0 0 2px dodgerblue;}
.emm-seg{display:inline-flex;gap:2px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:2px;align-self:flex-start;}
.emm-seg button{border:none;background:transparent;color:rgba(255,255,255,.55);font-family:inherit;font-size:11px;font-weight:700;padding:4px 10px;margin:0;border-radius:14px;cursor:pointer;height:auto;display:inline-flex;align-items:center;gap:4px;}
.emm-seg button svg{width:14px;height:14px;} .emm-seg button.is-on{color:#fff;background:rgba(255,255,255,.2);}
.emm-prow .eui-checkline input{width:auto;height:auto;margin:0;}
@media (max-width:1200px){.emm-builder{grid-template-columns:minmax(0,1fr);} .emm-stage{max-height:none;}}


/* ==========================================================================
   OFFRES & PROJETS — blocs client, mandats, tâches, versions, lignes de facture (2026-10-07)
   Maquette validée : docs/maquettes/offres-mandats-facturation/ · README §10.10.
   Une page = une pile de blocs client (.eui-cblocks) : en-tête sur une ligne, corps déplié au clic
   (JS de la page : délégué sur document, état mémorisé par client). Utilisé par lists/list_offer.php
   et lists/projects.php ; les lightbox Mandat / Dépôt / Facture vivent dans lists/inc/mandat_modals.inc.php.
   ========================================================================== */
.eui-cblocks-scroll{overflow-x:auto;}
.eui-cblocks{display:flex;flex-direction:column;gap:10px;min-width:1180px;}
.eui-cblocks.is-loading{opacity:.45;transition:opacity .15s;}
.eui-cblock{background:#3a3a3a;border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;}
.eui-cblock.is-open{background:#444;}
.eui-cblock-head{display:grid;grid-template-columns:minmax(0,1fr) 120px 66px 96px 92px 150px 92px 28px;gap:16px;align-items:center;padding:14px 18px;cursor:pointer;transition:background .15s;}
.eui-cblock-head:hover{background:rgba(255,255,255,.04);}
.eui-cblock-head.is-offers{grid-template-columns:260px minmax(0,1fr) 150px 150px 28px;}
/* Projets et Offres : l'en-tête du client ouvert (un seul à la fois) est bleu — le bleu des boutons
   (dodgerblue), liseré du bloc assorti ; le corps garde son fond pour que les mandats restent lisibles.
   Textes secondaires de l'en-tête éclaircis.
   Offres : retour du 2026-10-07 « valable aussi pour les offres ». */
:is(.prj-board,.ofr-board) .eui-cblock.is-open{border-color:dodgerblue;}
:is(.prj-board,.ofr-board) .eui-cblock.is-open > .eui-cblock-head{background:dodgerblue;}
:is(.prj-board,.ofr-board) .eui-cblock.is-open > .eui-cblock-head:hover{background:#2b97ff;}
:is(.prj-board,.ofr-board) .eui-cblock.is-open > .eui-cblock-head .eui-sub-line,:is(.prj-board,.ofr-board) .eui-cblock.is-open > .eui-cblock-head .eui-2l small,
:is(.prj-board,.ofr-board) .eui-cblock.is-open > .eui-cblock-head .eui-cprog,:is(.prj-board,.ofr-board) .eui-cblock.is-open > .eui-cblock-head .eui-cidx{color:rgba(255,255,255,.88);}
:is(.prj-board,.ofr-board) .eui-cblock.is-open > .eui-cblock-head .eui-c-bad{color:#fff;font-weight:700;}
:is(.prj-board,.ofr-board) .eui-cblock.is-open > .eui-cblock-head .eui-progress{background:rgba(255,255,255,.3);}
:is(.prj-board,.ofr-board) .eui-cblock.is-open > .eui-cblock-head .eui-progress i{background:#fff;}
:is(.prj-board,.ofr-board) .eui-cblock.is-open > .eui-cblock-head .eui-users .eui-avatar{border-color:dodgerblue;}
:is(.prj-board,.ofr-board) .eui-cblock.is-open > .eui-cblock-head .eui-cblock-toggle,:is(.prj-board,.ofr-board) .eui-cblock.is-open > .eui-cblock-head .eui-cblock-tools .eui-icon-btn{background:rgba(255,255,255,.2);}
:is(.prj-board,.ofr-board) .eui-cblock.is-open .eui-cblock-pad{border-top-color:transparent;}
:is(.prj-board,.ofr-board) .eui-cblock.is-open > .eui-cblock-head .eui-mchip{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);}
:is(.prj-board,.ofr-board) .eui-cblock.is-open > .eui-cblock-head .eui-mchip span{color:rgba(255,255,255,.85);}
/* Numéro du bloc (01, 02…) : combien de clients en tout, comme l'ancienne liste. */
.eui-cidx{width:20px;flex:none;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums;}
.eui-cblock-tools{display:flex;gap:4px;justify-content:flex-end;}
.eui-cblock-head .eui-identity{min-width:0;gap:10px;}
.eui-cblock-head .eui-identity > div{min-width:0;}
.eui-cblock-head .eui-identity-name,.eui-cblock-head .eui-sub-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eui-cblock-toggle{width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.eui-cblock-toggle svg{width:15px;height:15px;transition:transform .18s ease;}
.eui-cblock.is-open .eui-cblock-toggle svg{transform:rotate(180deg);}
/* Ouverture animée : la rangée de grille passe de 0fr à 1fr (hauteur réelle, sans la mesurer en JS) ;
   .eui-cblock-in coupe le débordement, .eui-cblock-pad porte les marges (sinon elles resteraient
   visibles une fois replié). Les enfants : eui-cblock-body > eui-cblock-in > eui-cblock-pad. */
.eui-cblock-body{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .26s ease,visibility 0s linear .26s;}
.eui-cblock.is-open .eui-cblock-body{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .26s ease,visibility 0s;}
.eui-cblock-in{min-height:0;overflow:hidden;}
.eui-cblock-pad{border-top:1px solid rgba(255,255,255,.08);padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;opacity:0;transition:opacity .2s ease;}
.eui-cblock.is-open .eui-cblock-pad{opacity:1;}
.eui-cblock-pad > .eui-empty-text{padding:4px 2px;}
@media (prefers-reduced-motion: reduce){.eui-cblock-body,.eui-cblock-pad{transition:none;}}
/* Avatars : collaborateur = couleur de ses initiales (.color_XXX, styles.css) ; client = gris. */
.eui-avatar.is-xs{width:26px;height:26px;font-size:9.5px;letter-spacing:-.02em;}
.eui-avatar.is-client{background:#666;}
.eui-users{display:flex;align-items:center;}
.eui-users .eui-avatar{width:26px;height:26px;font-size:9.5px;margin-left:-6px;border:2px solid #3a3a3a;}
.eui-users .eui-avatar:first-child{margin-left:0;}
.eui-cblock.is-open .eui-users .eui-avatar{border-color:#444;}
.eui-mchips{display:flex;gap:6px;flex-wrap:wrap;min-width:0;}
.eui-mchip{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:5px 10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:12px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#fff;}
button.eui-mchip{font-family:inherit;margin:0;height:auto;line-height:1.2;width:auto;cursor:pointer;}
button.eui-mchip:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.12);}
.eui-mchip i{width:8px;height:8px;border-radius:50%;flex:none;display:block;}
.eui-mchip span{color:rgba(255,255,255,.55);}
.eui-cprog{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:rgba(255,255,255,.6);}
.eui-progress{height:6px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;}
.eui-progress i{display:block;height:100%;background:darkseagreen;}
/* Bouton « + Ajouter… » en <button> : neutraliser les règles globales des boutons (styles.css). */
button.eui-chip-add{font-family:inherit;cursor:pointer;height:auto;line-height:1.2;width:auto;}
button.eui-chip-add:hover{color:#fff;border-color:rgba(255,255,255,.55);}
.eui-chip-add svg{width:12px;height:12px;flex:none;}
.eui-2l{font-size:12.5px;white-space:nowrap;line-height:1.35;color:#fff;}
.eui-2l small{display:block;font-size:11px;color:rgba(255,255,255,.55);}
/* Mandat (ou groupe d'offres) dans un bloc client : un cran plus foncé que le bloc (#444) pour
   qu'on distingue le tableau dans le tableau (retour du 2026-10-07). */
.eui-mandat{border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;background:#2f2f2f;transition:outline-color .1s;}
.eui-mandat-head{display:flex;align-items:center;gap:14px;padding:10px 14px;background:#363636;}
.eui-mandat-head.is-slim{padding:7px 14px;gap:10px;}
.eui-mandat-head.is-slim .eui-badge-icon{width:24px;height:24px;}
.eui-mandat-head.is-slim .eui-list-title{font-size:12.5px;color:rgba(255,255,255,.75);}
.eui-mandat-head .eui-list-main{flex:1;}
.eui-mandat-head .eui-list-title{font-size:13.5px;}
.eui-mandat-head .eui-2l{width:120px;}
.eui-mandat-actions{display:flex;gap:4px;}
/* Tout ce qui s'affiche dans l'en-tête d'un mandat ouvre quelque chose (PDF, lightbox, onglet). */
button.eui-cell-btn,button.eui-mandat-title,button.eui-sub-link,button.eui-badge-icon.is-link{font-family:inherit;font-size:inherit;margin:0;padding:0;border:0;background:none;color:inherit;text-align:left;height:auto;width:auto;line-height:inherit;cursor:pointer;text-transform:none;letter-spacing:normal;}
.eui-cell-btn{border-radius:8px;padding:4px 6px !important;margin:-4px -6px !important;transition:background .12s;}
.eui-cell-btn:hover{background:rgba(255,255,255,.07) !important;}
button.eui-mandat-title{font-weight:700;color:#fff;font-size:13.5px;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
button.eui-mandat-title:hover{text-decoration:underline;}
.eui-sub-link{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;}
.eui-sub-link:hover{color:#fff;text-decoration-style:solid;}
.eui-badge-icon.is-link{cursor:pointer;transition:filter .12s;}
.eui-badge-icon.is-link:hover{filter:brightness(1.35);}
/* Glisser-déposer d'une tâche vers un autre mandat du client : les mandats cachés (sans tâche
   affichée) n'apparaissent que pendant le glisser, en pointillés. */
.eui-mandat.is-ghost{display:none;border-style:dashed;background:transparent;}
.eui-mandat.is-ghost .eui-mandat-head{background:transparent;}
.eui-cblock.is-drop-src .eui-mandat.is-ghost{display:block;}
.eui-mandat.is-drop-over{outline:2px dashed dodgerblue;outline-offset:-2px;}
.eui-drop-hint{font-size:11.5px;color:rgba(255,255,255,.45);}
/* Lightbox Tâche (lists/inc/mandat_modals.inc.php) : contact dans la colonne, compteur d'onglet,
   checklist, chat (bulles : les siennes à droite en bleu, non lues cerclées). */
.eui-tk-contact{margin-top:2px;}
/* Carte de contact (colonne des lightbox Mandat / Tâche, réglages du mandat) : de quoi joindre la
   personne — téléphone et e-mail cliquables + copier ; « entreprise » = repli sur le contact de la société. */
.eui-contact{display:flex;flex-direction:column;gap:7px;margin-top:10px;padding:11px 12px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:12.5px;line-height:1.3;}
.eui-contact-name{font-weight:700;color:#fff;font-size:13px;}
.eui-contact-name small{display:block;font-weight:400;color:rgba(255,255,255,.55);font-size:11.5px;margin-top:2px;}
.eui-contact-line{display:flex;align-items:center;gap:7px;min-width:0;}
.eui-contact-ic{display:flex;flex:none;color:dodgerblue;}
.eui-contact-ic svg{width:13px;height:13px;}
.eui-contact-line a{flex:1;min-width:0;color:#fff;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.eui-contact-line a:hover{text-decoration:underline;}
.eui-contact-line small{flex:none;font-size:10.5px;color:rgba(255,255,255,.45);}
button.eui-contact-copy{width:24px;height:24px;min-width:24px;border-radius:50%;border:0;background:transparent;color:rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;padding:0;margin:0;cursor:pointer;flex:none;}
button.eui-contact-copy:hover{background:rgba(255,255,255,.1);color:#fff;}
button.eui-contact-copy.is-copied{color:darkseagreen;}
.eui-contact-copy svg{width:13px;height:13px;}
.eui-contact-none{font-size:12px;color:darkorange;}
.eui-contact-none a{color:inherit;}
.eui-contact-addr{font-size:11.5px;color:rgba(255,255,255,.55);}
.eui-navtab-count{margin-left:auto;font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(255,255,255,.12);color:#ccc;}
.eui-navtab-count.is-unread{background:dodgerblue;color:#fff;}
button.eui-check-btn{width:22px;height:22px;min-width:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:transparent;display:flex;align-items:center;justify-content:center;padding:0;margin:0;cursor:pointer;flex:none;}
.eui-check-btn svg{width:12px;height:12px;}
.eui-check-btn:hover{border-color:darkseagreen;color:rgba(143,188,143,.7);}
.eui-checks .is-done .eui-check-btn{background:darkseagreen;border-color:darkseagreen;color:#fff;}
.eui-checks .is-done .eui-list-title{text-decoration:line-through;color:rgba(255,255,255,.45);}
.eui-chat{display:flex;flex-direction:column;gap:12px;}
.eui-chat-msg{display:flex;align-items:flex-end;gap:8px;max-width:82%;}
.eui-chat-msg.is-me{align-self:flex-end;flex-direction:row-reverse;}
.eui-chat-col{min-width:0;display:flex;flex-direction:column;}
.eui-chat-msg.is-me .eui-chat-col{align-items:flex-end;}
.eui-chat-date{font-size:10.5px;color:rgba(255,255,255,.45);margin:0 4px 3px;}
.eui-chat-bubble{background:#555;color:#fff;border-radius:14px 14px 14px 4px;padding:9px 12px;font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word;}
.eui-chat-msg.is-me .eui-chat-bubble{background:dodgerblue;border-radius:14px 14px 4px 14px;}
.eui-chat-msg.is-unread .eui-chat-bubble{box-shadow:0 0 0 2px rgba(30,144,255,.75);}
.eui-chat-bubble a{color:#fff;text-decoration:underline;}
.eui-chat-compose{display:flex;gap:8px;align-items:flex-end;position:sticky;bottom:-22px;background:#2a2a2a;padding:10px 0 2px;}
.eui-chat-compose textarea{flex:1;min-height:44px;max-height:160px;resize:vertical;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 12px;color:#fff;font-family:inherit;font-size:13px;margin:0;}
.eui-tasks tr.is-dragging td{opacity:.35;}
/* Projets — hiérarchie mandat → tâches (retour du 2026-10-07 : « trop similaires ») : le mandat est le
   TITRE de sa série, posé sur le bloc client (ni fond ni cadre), libellé plus grand, pastille pleine à la
   couleur du type ; ses tâches forment une carte foncée décalée dessous, alignée sur le libellé ; un
   trait fin sépare deux mandats. La page Offres garde son .eui-mandat encadré (règles limitées à .prj-board). */
.prj-board .eui-mandat{background:transparent;border:0;border-radius:0;overflow:visible;}
.prj-board .eui-mandat + .eui-mandat:not(.is-ghost){border-top:1px solid rgba(255,255,255,.1);padding-top:14px;margin-top:6px;}
.prj-board .eui-mandat-head{background:transparent;padding:0 2px 10px;gap:14px;}
.prj-board .eui-mandat-head > .eui-badge-icon{width:32px;height:32px;color:#fff;background:#666;}
.prj-board .eui-mandat-head > .eui-badge-icon svg{width:16px;height:16px;}
.prj-board .eui-mandat.k-offre > .eui-mandat-head > .eui-badge-icon,.prj-board .eui-mandat.k-ancien > .eui-mandat-head > .eui-badge-icon{background:dodgerblue;}
.prj-board .eui-mandat.k-bulletin > .eui-mandat-head > .eui-badge-icon{background:#c3a7ff;color:#222;}
.prj-board .eui-mandat.k-regie > .eui-mandat-head > .eui-badge-icon{background:#888;}
.prj-board .eui-mandat.k-link > .eui-mandat-head > .eui-badge-icon{background:darkorange;}
.prj-board button.eui-mandat-title{font-size:16px;font-weight:800;letter-spacing:-.01em;}
.prj-board .eui-mandat-head .eui-list-sub{font-size:12px;color:rgba(255,255,255,.6);margin-top:2px;}
.prj-board .eui-mandat-head .eui-2l{font-size:12px;color:rgba(255,255,255,.85);}
.prj-board .eui-mandat-tasks{margin-left:46px;background:#2f2f2f;border:1px solid rgba(255,255,255,.07);border-radius:10px;overflow:hidden;}
.prj-board .eui-mandat-tasks .eui-tasks tbody tr:first-child td{border-top:0;}
/* « Sans mandat » : même rang qu'un mandat, en plus discret ; sans titre (client sans mandat), pas de décalage. */
.prj-board .eui-mandat-head.is-slim{padding:0 2px 8px;}
.prj-board .eui-mandat.is-loose > .eui-mandat-head.is-slim .eui-badge-icon{width:32px;height:32px;background:rgba(255,255,255,.1);color:#ccc;}
.prj-board .eui-mandat.is-loose > .eui-mandat-head.is-slim .eui-list-title{font-size:14px;font-weight:700;color:rgba(255,255,255,.75);}
.prj-board .eui-mandat.is-loose > .eui-mandat-tasks:first-child{margin-left:0;}
/* Cibles du glisser-déposer : gardent leur cadre pointillé. */
.prj-board .eui-mandat.is-ghost{border:1px dashed rgba(255,255,255,.35);border-radius:10px;padding:6px 10px 0;margin-left:46px;}
.prj-board .eui-mandat.is-ghost > .eui-mandat-head .eui-badge-icon{width:24px;height:24px;}
.prj-board .eui-mandat.is-drop-over{outline:2px dashed dodgerblue;outline-offset:4px;border-radius:10px;}
.eui-sched{display:flex;align-items:center;}
.eui-sched .eui-sched-dot{width:16px;height:16px;border-radius:50%;flex:none;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff;}
.eui-sched .eui-sched-dot svg{width:9px;height:9px;}
.eui-sched .eui-sched-dot.is-paid{background:darkseagreen;} .eui-sched .eui-sched-dot.is-sent{background:dodgerblue;} .eui-sched .eui-sched-dot.is-due{background:darkorange;}
.eui-sched i{width:14px;height:2px;background:rgba(255,255,255,.14);display:block;} .eui-sched i.is-done{background:darkseagreen;}
.eui-sched-cap{font-size:11px;color:rgba(255,255,255,.55);margin-top:5px;white-space:nowrap;}
/* Lignes de tâche (valeurs de lists/projects.php + styles.css) : responsable en tête, statut en un
   clic, délai + pastille (rouge dépassé, orange ≤ 3 j., gris sinon) et ligne teintée, chrono. */
.eui-tasks{width:100%;border-collapse:collapse;table-layout:fixed;}
/* Colonnes fixes : les tableaux de tâches d'un même client (un par mandat) restent alignés. */
.eui-tasks td:nth-child(1){width:44px;} .eui-tasks td:nth-child(3){width:380px;} .eui-tasks td:nth-child(4){width:120px;}
.eui-tasks td:nth-child(5){width:64px;} .eui-tasks td:nth-child(6){width:180px;}
.eui-tasks td{padding:8px 10px;border-top:1px solid rgba(255,255,255,.06);font-size:12.5px;color:#ddd;white-space:nowrap;vertical-align:middle;}
.eui-tasks td.eui-task-name{white-space:normal;color:#fff;width:auto;}
.eui-task-line{display:flex;align-items:center;gap:8px;}
.eui-tasks td.eui-task-name .eui-task-line > a:first-child{flex:1;min-width:0;color:#fff;text-decoration:none;padding:3px 0;}
.eui-tasks td.eui-task-name .eui-task-line > a:first-child:hover{text-decoration:underline;}
.eui-tasks td.eui-task-av{width:40px;padding-left:2px;padding-right:0;}
.eui-tasks td.eui-task-av a{text-decoration:none;display:inline-block;vertical-align:middle;}
.eui-grip{display:inline-flex;align-items:center;justify-content:center;width:12px;height:26px;margin-right:2px;vertical-align:middle;color:rgba(255,255,255,.55);cursor:grab;opacity:0;transition:opacity .12s;}
.eui-grip svg{width:12px;height:14px;fill:currentColor;stroke:none;}
.eui-tasks tr:hover .eui-grip{opacity:1;}
.eui-grip:active{cursor:grabbing;}
/* Chat de la tâche (fiche project-details.php#messages) : nombre de messages, non lus en bleu. */
.eui-msg{display:inline-flex;align-items:center;gap:4px;flex:none;padding:3px 7px;border-radius:12px;font-size:11px;font-weight:700;color:rgba(255,255,255,.45);text-decoration:none;opacity:0;transition:opacity .12s,background .12s;}
.eui-msg svg{width:13px;height:13px;}
.eui-msg.has-msg,.eui-msg.is-unread,.eui-tasks tr:hover .eui-msg{opacity:1;}
.eui-msg:hover{background:rgba(255,255,255,.1);color:#fff;}
.eui-msg.is-unread{background:dodgerblue;color:#fff;}
.eui-tasks tr.is-done td.eui-task-name a{color:rgba(255,255,255,.45);text-decoration:line-through;}
/* styles.css teinte une ligne sur deux de TOUS les tableaux (tr:nth-child(2n-1), #444 = le fond du
   bloc) : neutralisé ici, remplacé par une alternance discrète dans le ton foncé du mandat. */
.eui-tasks tbody tr,.eui-otable tbody tr{background:transparent;}
.eui-tasks tbody tr td{transition:background .12s;}
.eui-tasks tbody tr:nth-child(2n) td,.eui-otable tbody tr:nth-child(2n) td{background:#333;}
.eui-tasks tbody tr:hover td,.eui-otable tbody tr:hover td{background:#3d3d3d;}
.eui-tasks tbody tr.is-late td{background:#4a3434;} .eui-tasks tbody tr.is-soon td{background:#4b3a28;}
.eui-tasks tbody tr.is-late:hover td{background:#583d3d;} .eui-tasks tbody tr.is-soon:hover td{background:#59452f;}
.eui-tasks tr.is-prio td.eui-task-name a::before{content:"⚠ ";color:darkorange;}
.eui-taskst{display:inline-flex;gap:4px;}
.eui-taskst button{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:12px;padding:5px 10px;margin:0;border-radius:20px;border:none;background:#333;color:#fff;white-space:nowrap;cursor:pointer;height:auto;line-height:1.2;}
.eui-taskst button svg{width:12px;height:12px;}
.eui-taskst button:hover{background:#555;}
.eui-taskst button.s-1.is-on{background:#555;} .eui-taskst button.s-2.is-on,.eui-taskst button.s-2:hover{background:darkorange;}
.eui-taskst button.s-6.is-on,.eui-taskst button.s-6:hover{background:darkseagreen;} .eui-taskst button.s-5.is-on,.eui-taskst button.s-5:hover{background:indianred;}
.eui-taskst button.is-on{cursor:default;}
.eui-dl{display:inline-flex;align-items:center;gap:6px;}
.eui-mini{font-size:11px;padding:3px 7px;border-radius:12px;background:#555;color:#fff;}
.eui-mini.is-orange{background:darkorange;} .eui-mini.is-red{background:indianred;}
.eui-chrono{display:inline-flex;align-items:center;gap:6px;}
.eui-chrono select{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:5px 8px;color:#ccc;font-family:inherit;font-size:12px;margin:0;height:auto;width:auto;max-width:130px;}
.eui-play{width:28px;height:28px;border-radius:50%;background:dodgerblue;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none;border:none;cursor:pointer;padding:0;margin:0;}
.eui-play svg{width:11px;height:11px;margin-left:2px;fill:currentColor;}
.eui-rec{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:20px;background:rgba(205,92,92,.2);border:1px solid indianred;color:#fff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;margin:0;height:auto;}
.eui-rec i{width:9px;height:9px;border-radius:50%;background:indianred;box-shadow:0 0 0 3px rgba(205,92,92,.35);display:block;animation:euiRec 1.2s ease-in-out infinite;}
@keyframes euiRec{50%{opacity:.35;}}
/* Offres d'un client */
.eui-otable{width:100%;border-collapse:collapse;}
.eui-otable thead td{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:rgba(255,255,255,.55);padding:8px 14px;background:#363636;}
.eui-otable tbody td{padding:9px 14px;border-top:1px solid rgba(255,255,255,.06);font-size:12.5px;white-space:nowrap;vertical-align:middle;color:#ddd;transition:background .12s;}

.eui-otable td.eui-otitle{white-space:normal;color:#fff;font-weight:600;}
.eui-num{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12px;font-weight:600;padding:5px 10px;margin:0;border-radius:20px;background:#555;color:#fff;border:none;cursor:pointer;height:auto;text-decoration:none;}
.eui-num svg{width:12px;height:12px;opacity:.7;}
.eui-num:hover{background:dodgerblue;color:#fff;}
.eui-age{font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:6px;background:rgba(255,255,255,.1);color:#ccc;}
.eui-age.is-mid{background:rgba(255,140,0,.2);color:darkorange;} .eui-age.is-old{background:rgba(205,92,92,.2);color:#f2a7a7;}
.eui-vpills{display:flex;gap:4px;}
.eui-vpills span,.eui-vpills a{font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:12px;background:rgba(255,255,255,.1);color:#ccc;text-decoration:none;}
.eui-vpills a:hover{outline:1px solid rgba(255,255,255,.6);color:#fff;}
.eui-vpills .is-last{background:dodgerblue;color:#fff;} .eui-vpills .is-won{background:darkseagreen;color:#fff;}
.eui-otable .eui-icon-btn.is-won{color:darkseagreen;} .eui-otable .eui-icon-btn.is-won:hover{background:darkseagreen;color:#fff;}
.eui-otable .eui-icon-btn.is-lost:hover{background:indianred;}
.eui-fix{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:rgba(255,140,0,.08);border:1px solid rgba(255,140,0,.35);font-size:12.5px;}
.eui-fix > svg{width:16px;height:16px;color:darkorange;flex:none;}
.eui-fix > span{flex:1;}
/* Versions d'une offre (lightbox) */
.eui-vers{display:flex;flex-direction:column;gap:10px;}
.eui-ver{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.03);}
.eui-ver.is-last{border-color:rgba(30,144,255,.5);background:rgba(30,144,255,.07);}
.eui-ver.is-won{border-color:rgba(143,188,143,.6);background:rgba(143,188,143,.08);}
.eui-vtag{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:rgba(255,255,255,.1);flex:none;}
.eui-ver.is-last .eui-vtag{background:dodgerblue;} .eui-ver.is-won .eui-vtag{background:darkseagreen;}
.eui-vdiff{font-size:11.5px;color:darkseagreen;margin-top:4px;white-space:normal;}
.eui-ver .eui-list-sub{white-space:normal;}
.eui-ver .eui-list-side{width:auto;}
/* Choix en cartes (type de document au dépôt) et modèles d'échéancier */
.eui-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.eui-choice{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;font-size:12.5px;color:#ccc;cursor:pointer;}
.eui-choice input{width:auto;height:auto;margin:0;accent-color:dodgerblue;}
.eui-choice small{display:block;font-size:11px;color:rgba(255,255,255,.5);margin-top:2px;}
.eui-choice.is-on{border-color:dodgerblue;background:rgba(30,144,255,.08);color:#fff;}
.eui-presets{display:flex;gap:6px;flex-wrap:wrap;}
.eui-preset{font-family:inherit;font-size:12px;font-weight:600;padding:7px 12px;margin:0;border-radius:20px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#ccc;white-space:nowrap;cursor:pointer;height:auto;}
.eui-preset.is-on{background:dodgerblue;border-color:dodgerblue;color:#fff;}
/* Aperçu du document déposé (sidebar de la lightbox Dépôt) */
.eui-scan{background:#f2f2ef;border-radius:6px;display:flex;align-items:center;justify-content:center;min-height:220px;overflow:hidden;position:relative;}
.eui-scan canvas{max-width:100%;height:auto;display:block;}
.eui-scan-empty{color:#888;font-size:12px;text-align:center;padding:20px;}
/* Case à cocher d'une ligne .eui-checkline : neutraliser la largeur des champs (styles.css). */
.eui-checkline input[type=checkbox]{width:auto;height:auto;margin:0;flex:none;accent-color:dodgerblue;}
.eui-field > .eui-checkline{min-height:38px;}
/* Lignes de facture éditables (lightbox Facture) */
.eui-lines{border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;}
.eui-line{display:grid;grid-template-columns:minmax(0,1fr) 96px 58px 58px 100px 28px;gap:10px;align-items:start;padding:10px 12px;border-top:1px solid rgba(255,255,255,.06);font-size:12.5px;}
.eui-line:first-child{border-top:none;}
.eui-line.is-head{background:#555;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:9px 12px;align-items:center;}
.eui-line .r{text-align:right;white-space:nowrap;}
.eui-line.is-locked{background:rgba(255,255,255,.03);color:rgba(255,255,255,.75);}
.eui-line input,.eui-line textarea{width:100%;box-sizing:border-box;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:6px 8px;color:#fff;font-family:inherit;font-size:12.5px;margin:0;height:auto;}
.eui-line input.r{text-align:right;}
.eui-line textarea{min-height:44px;resize:vertical;margin-top:5px;color:#ccc;font-size:12px;}
.eui-line .eui-line-total{padding-top:7px;text-align:right;font-weight:600;}
.eui-totals{margin-left:auto;width:340px;}
.eui-totals .eui-kv.is-total{font-size:14px;} .eui-totals .eui-kv.is-total > b{font-size:15px;}


/* ==========================================================================
   FORMULAIRES — compléments (2026-10-09, venus de la création d'offre) — README §10.10
   Composants génériques : à réutiliser tels quels dans tout formulaire ELIUM UI. Les contrôles
   restent de VRAIS champs (radios, cases à cocher) : seule leur apparence change.
   ========================================================================== */
/* Libellé d'un groupe (pastilles, client choisi) : même dessin qu'un <label> de .eui-field. */
.eui-field .eui-label{font-size:12px;font-weight:600;color:#ccc;display:block;margin:0;}
/* Grille 4 colonnes ; .eui-half = sur deux colonnes (.eui-span2 = toute la ligne). */
.eui-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.eui-grid4 > .eui-half{grid-column:span 2;}
/* Titre de carte numéroté (sections d'un long formulaire) :
   <h4 class="is-num"><span class="eui-cidx">01</span>Titre<span>à droite</span></h4> — spans vides masqués. */
.eui-card h4.is-num{justify-content:flex-start;}
.eui-card h4.is-num > .eui-cidx{width:auto;font-size:11px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.06em;}
.eui-card h4.is-num > span:not(.eui-cidx){margin-left:auto;}
.eui-card h4.is-num > span:not(.eui-cidx) ~ span:not(.eui-cidx){margin-left:0;}
.eui-card h4.is-num > span:empty{display:none;}
/* Nombre + unité dans le champ (« 30 sec », « 50 km ») : <div class="eui-unit"><input type="number"><span>sec</span></div>.
   .is-empty (posé par le script de la page) grise la valeur par défaut. */
.eui-unit{display:flex;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;min-width:0;}
.eui-unit:focus-within{border-color:darkseagreen;background:rgba(255,255,255,.09);}
.eui-field .eui-unit input,.eui-line .eui-unit input{flex:1 1 auto;min-width:0;width:100%;background:transparent;border:0;border-radius:0;padding:10px 0 10px 12px;margin:0;height:auto;box-shadow:none;color:#fff;font-family:inherit;font-size:13px;font-variant-numeric:tabular-nums;}
.eui-field .eui-unit input:focus,.eui-line .eui-unit input:focus{background:transparent;outline:none;}
.eui-unit span{padding:0 12px 0 6px;font-size:12px;color:rgba(255,255,255,.5);white-space:nowrap;}
.eui-unit.is-empty input{color:rgba(255,255,255,.55);}
/* Pastilles = vrais boutons radio : <div class="eui-presets"><label class="eui-preset"><input type="radio" …>Libellé</label>…
   (même dessin que les pastilles-boutons ; la pastille cochée est bleue). */
.eui-presets > label.eui-preset{display:inline-flex;align-items:center;gap:7px;position:relative;font-size:12px;font-weight:600;color:#ccc;margin:0;}
.eui-preset > input[type=radio],.eui-preset > input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;border:0;pointer-events:none;}
.eui-presets > label.eui-preset:hover{border-color:rgba(255,255,255,.35);color:#fff;}
.eui-presets > label.eui-preset.is-on,.eui-presets > label.eui-preset:has(> input:checked){background:dodgerblue;border-color:dodgerblue;color:#fff;}
.eui-presets > label.eui-preset:has(> input:focus-visible){box-shadow:0 0 0 2px rgba(30,144,255,.6);}
/* Interrupteur sur une vraie case à cocher (valeur postée) : <input type="checkbox" class="eui-toggle-input"><i class="eui-toggle"></i>. */
input.eui-toggle-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;border:0;pointer-events:none;}
input.eui-toggle-input:checked + .eui-toggle{background:darkseagreen;}
input.eui-toggle-input:checked + .eui-toggle::after{left:21px;}
input.eui-toggle-input:focus-visible + .eui-toggle{box-shadow:0 0 0 2px rgba(30,144,255,.6);}
/* Option à interrupteur dans une grille .eui-choices (.is-1 = une colonne) : libellé à gauche, interrupteur à droite ;
   activée = liseré vert comme l'interrupteur. <label class="eui-choice has-toggle"><span>Libellé</span><input class="eui-toggle-input"…><i class="eui-toggle"></i></label> */
.eui-choices.is-1{grid-template-columns:minmax(0,1fr);}
.eui-choice.has-toggle{justify-content:space-between;gap:12px;padding:10px 12px;font-size:13px;min-height:44px;margin:0;}
.eui-choice.has-toggle > span:first-child{display:flex;align-items:center;min-width:0;flex-wrap:wrap;}
.eui-choice.has-toggle small{display:inline;margin:0 0 0 6px;font-size:11.5px;}
.eui-choice.has-toggle.is-on{color:#fff;border-color:rgba(143,188,143,.5);background:rgba(143,188,143,.08);}
.eui-choice.is-disabled{opacity:.4;cursor:not-allowed;}
/* Ligne d'état mise en avant, avec ses boutons (brouillon trouvé, action impossible) :
   <div class="eui-state is-warn"><span class="eui-badge-icon is-warn">…</span><span class="eui-state-txt"><b>…</b> · …</span><button…></div> */
.eui-state.is-warn,.eui-state.is-bad{padding:10px 12px 10px 14px;border-radius:12px;flex-wrap:wrap;gap:12px;}
.eui-state.is-warn{background:rgba(255,140,0,.08);border:1px solid rgba(255,140,0,.35);}
.eui-state.is-bad{background:rgba(205,92,92,.1);border:1px solid rgba(205,92,92,.45);}
.eui-state-txt{flex:1;min-width:200px;color:#ddd;}
.eui-state-txt b{color:#fff;font-weight:600;}
/* Valeur choisie dans un champ (client, contact…) : identité + bouton pour en changer ; .is-locked = figée (cadenas). */
.eui-picked{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:6px 6px 6px 8px;min-height:44px;}
.eui-picked .eui-avatar{width:30px;height:30px;font-size:11px;}
.eui-picked-main{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eui-picked-name{font-size:13.5px;font-weight:600;}
.eui-picked-sub{font-size:12px;color:rgba(255,255,255,.55);margin-left:2px;}
.eui-picked.is-locked{background:rgba(255,255,255,.03);}
.eui-picked-lock{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);}
.eui-picked-lock svg{width:14px;height:14px;}
/* Parcours des versions d'un document (V1 → V2 → Vn en cours) : chaque version enregistrée est un lien. */
.eui-vpath{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.eui-vstep{display:inline-flex;align-items:baseline;gap:6px;padding:8px 14px;border-radius:20px;background:rgba(255,255,255,.08);font-size:13px;font-weight:700;color:#ddd;white-space:nowrap;text-decoration:none;}
a.eui-vstep:hover{background:rgba(255,255,255,.14);color:#fff;}
.eui-vstep small{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.5);}
.eui-vstep.is-new{background:dodgerblue;color:#fff;} .eui-vstep.is-new small{color:rgba(255,255,255,.85);}
.eui-vpath > svg{width:14px;height:14px;color:rgba(255,255,255,.4);}
/* Lignes éditables réordonnables (.eui-lines) : poignée visible au survol, ligne déplacée estompée, point de dépôt en bleu. */
.eui-line:hover .eui-grip{opacity:1;}
.eui-line.is-dragging{opacity:.45;}
.eui-line.drop-before{box-shadow:inset 0 2px 0 dodgerblue;} .eui-line.drop-after{box-shadow:inset 0 -2px 0 dodgerblue;}
.eui-line .eui-unit{border-radius:6px;}
.eui-line .eui-unit input{padding:6px 0 6px 8px;font-size:12.5px;}
.eui-line .eui-unit span{padding:0 8px 0 4px;font-size:11.5px;}
.eui-icon-btn:disabled{opacity:.35;cursor:default;}

/* ==========================================================================
   OFFRES — CRÉATION (oc-) — pages/offer_create_1…4.php, inc/offer_form_ui.php (2026-10-09)
   Maquette validée : docs/maquettes/offre-creation/ · README §10.10. Seule la MISE EN PAGE propre à
   cet écran vit ici ; tous les contrôles viennent des composants ELIUM UI (section ci-dessus et
   précédentes). Deux colonnes : formulaire en sections numérotées · aperçu de l'offre (jusqu'à 800 px).
   ========================================================================== */
.oc-layout{display:grid;grid-template-columns:minmax(520px,1fr) minmax(0,800px);gap:28px;align-items:start;} /* aperçu 800 px dès que le formulaire garde 520 px */
.oc-form{display:flex;flex-direction:column;gap:14px;min-width:0;}
.oc-page > .eui-state{margin:0 0 14px;}
.oc-titledate{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:16px;}
.oc-ar{display:inline-block;border:1.5px solid currentColor;border-radius:2px;flex:none;} /* glyphe de format 16/9, 1/1, 9/16 */
/* Champ client existant (inc/customer_search_field.php) sous la valeur choisie : sans son propre libellé. */
.oc-client-field .customer-search-field > label{display:none;}
.oc-client-field .customer-search-field__row{display:block;margin:0;}
/* Valeur déduite, non modifiable (shooting Trendz). */
.oc-derived{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:8px;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.16);font-size:13px;color:#fff;white-space:nowrap;}
.oc-derived small{color:rgba(255,255,255,.5);font-size:12px;}
/* Déclinaison : champ changé depuis la version d'origine (point bleu + ancienne valeur). */
.oc-dot{width:7px;height:7px;border-radius:50%;background:dodgerblue;flex:none;margin-right:7px;display:inline-block;}
.oc-was{margin-left:auto;font-weight:500;font-size:11.5px;color:rgba(255,255,255,.5);padding-left:10px;white-space:nowrap;}
.oc-field-chg > label,.oc-field-chg > .eui-label{display:flex;align-items:center;}
.eui-choice.has-toggle.oc-chg{border-color:rgba(30,144,255,.55);}
.oc-field-chg .eui-unit,.oc-field-chg .eui-preset.is-on,.oc-field-chg > input,.oc-field-chg textarea,.oc-field-chg select{box-shadow:0 0 0 1px dodgerblue;}
/* Trendz : début du contrat en pastilles (+ « Autre date » = calendrier) ; champ manquant à l'envoi. */
.oc-page .oc-starts input[type=date]{width:auto;flex:0 0 170px;padding:6px 10px;border-radius:20px;margin:0;}
.oc-field-err > .eui-label,.oc-field-err > label{color:#f2a7a7;}
.oc-field-err .eui-presets{box-shadow:0 0 0 1px indianred;border-radius:20px;}
/* Lignes libres (sur mesure) : colonnes poignée · prestation · qté · prix · TVA · retrait. */
.eui-line.oc-line{grid-template-columns:16px minmax(0,1fr) 80px 120px 76px 28px;}
.oc-line .eui-grip{margin-top:2px;}
.oc-line input.is-title{font-weight:600;}
.oc-lines-foot{display:flex;align-items:center;gap:10px;}
/* Colonne d'aperçu : un seul défilement (celui de la page) — l'offre garde sa hauteur, seule la barre
   des actions colle en haut de l'écran ; la colonne s'étire sur toute la hauteur du formulaire pour
   que cette barre reste visible jusqu'en bas. */
.oc-prev{align-self:stretch;min-width:0;}
.oc-prev-top{position:sticky;top:0;z-index:2;background:#444;border:1px solid rgba(255,255,255,.12);border-bottom:0;border-radius:14px 14px 0 0;}
.oc-prev-head{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;flex-wrap:wrap;}
.oc-prev-title{display:flex;align-items:center;gap:10px;margin-right:auto;}
.oc-prev-title b{font-size:14px;}
.oc-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.6);}
.oc-live i{width:7px;height:7px;border-radius:50%;background:darkseagreen;display:block;}
.oc-live.is-wait i{background:#888;}
.oc-prev-head .eui-btn.is-off{opacity:.4;}
.oc-prev-box{background:#555;padding:12px;min-height:420px;border:1px solid rgba(255,255,255,.12);border-top:0;border-radius:0 0 14px 14px;}
.oc-prev-box > .eui-empty{min-height:396px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;}
.oc-ghost{width:260px;height:368px;max-width:80%;border-radius:4px;border:1.5px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3);}
.oc-ghost svg{width:40px;height:40px;}
.offer-live-scale{position:relative;overflow:hidden;margin:0 auto;}
.offer-live-scale iframe{position:absolute;top:0;left:0;border:0;display:block;transform-origin:0 0;background:#ccc;transition:opacity .15s;}
.oc-prev-box.is-busy iframe{opacity:.55;}
@media (max-width:1180px){
  .oc-layout{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:760px){
  .oc-page .eui-grid4,.oc-page .eui-grid3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .oc-page .eui-choices,.oc-page .eui-grid2,.oc-titledate{grid-template-columns:minmax(0,1fr);}
  .eui-line.oc-line{grid-template-columns:16px minmax(0,1fr) 28px;}
  .oc-line > .eui-unit{grid-column:2;}
  .oc-line.is-head{display:none;}
}


/* ==========================================================================
   CONCOURS (ccs-) — mise en page seulement (README §14). Composants : eui-table, eui-toggle,
   eui-presets, eui-choices, eui-kv, eui-stat, eui-tri, eui-thumb, eui-state, eui-btn.
   ========================================================================== */
.ccs-online-cell{display:flex;align-items:center;gap:10px;}
.ccs-online-cell .eui-sub-line{margin:0;}
.ccs-grow{flex:1 1 auto;min-width:0;}
.ccs-center{text-align:center;}
.ccs-mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;font-weight:500;word-break:break-all;}
.ccs-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.ccs-actions.is-center{justify-content:center;}
/* Onglet QR : aperçu blanc (le QR se lit sur fond clair) + liste clé → valeur. */
.ccs-qr-row{display:flex;gap:22px;align-items:center;}
.ccs-qr{flex:none;width:170px;height:170px;padding:10px;border-radius:12px;background:#fff;box-sizing:border-box;}
.ccs-qr svg{display:block;width:100%;height:100%;}
.ccs-qr-info{flex:1 1 auto;min-width:0;}
.ccs-qr-info .eui-kv > span{white-space:nowrap;}
/* Onglet Tirage : la « machine à sous » et la story du gagnant. */
.ccs-slot{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);text-align:center;}
.ccs-slot .ccs-slot-ic{width:44px;height:44px;}
.ccs-slot .ccs-slot-ic svg{width:22px;height:22px;}
.ccs-slot-name{font-size:26px;font-weight:800;line-height:1.1;color:#fff;}
.ccs-slot-name.is-spin{color:rgba(255,255,255,.55);}
.ccs-slot.is-win{border-color:rgba(143,188,143,.45);background:rgba(143,188,143,.08);}
.ccs-slot.is-win .ccs-slot-name{font-size:34px;}
.ccs-story-row{display:flex;gap:22px;align-items:flex-start;}
.ccs-story{flex:none;width:200px;aspect-ratio:9/16;border-radius:12px;background:#1a1a1a;object-fit:cover;display:block;}
/* Lightbox Concours, onglet Choix : une carte par choix (vignette 9:16 + champs). */
.ccs-choix{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.03);}
.ccs-choix.is-off .ccs-choix-thumb{opacity:.6;}
.ccs-choix-thumb{width:120px;}
.ccs-choix-thumb .eui-thumb-name svg{width:20px;height:20px;}
.ccs-choix-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.ccs-choix-sort{width:110px;}
.ccs-file-row{display:flex;gap:6px;align-items:center;}
.ccs-file-row select{flex:1 1 auto;min-width:0;}
/* Lightbox Concours, Réglages : vidéo d'accueil de la page publique (petite vignette + nom + actions). */
.ccs-hero{display:flex;align-items:center;gap:14px;}
.ccs-hero-thumb{width:64px;flex:none;}
.ccs-hero-thumb .eui-thumb-name svg{width:18px;height:18px;}
.ccs-hero .ccs-actions{margin-top:6px;}
/* Lightbox Soirée, Participants : nom + pastille « Découvre My Trendz » sur une ligne. */
.ccs-pname{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
/* Sélecteur « Depuis le catalogue » (sur-couche de la lightbox Concours) : grille de .eui-thumb.is-pick. */
/* Le sélecteur prend TOUTE la carte de la lightbox, passée à pleine hauteur pendant qu'il est ouvert :
   posé avec la marge d'une .eui-overlay ordinaire, il héritait de la hauteur de la lightbox — minuscule
   quand le concours n'a encore aucune trend — et laissait voir la lightbox autour (« double lightbox »). */
.eui-modal-card.ccs-picking{height:min(800px,90vh);}
.ccs-pick{padding:0;background:#2a2a2a;}
.ccs-pick .eui-overlay-card{max-width:none;height:100%;border:0;border-radius:0;}
.ccs-pick-tools{margin:0;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.08);flex:none;}
.ccs-pick-tools .eui-search{flex:1 1 auto;}
.ccs-pick-grid{flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:16px 18px;align-content:start;}
.ccs-pick-grid > .eui-empty-text{grid-column:1/-1;}
.ccs-pick-item:focus-visible{outline:2px solid dodgerblue;outline-offset:2px;}
/* Hauteur 9:16 tirée de la LARGEUR (marge haute en %), pas d'aspect-ratio : dans cette grille qui défile,
   Chrome dimensionnait les rangées sans tenir compte du rapport (146 px pour des vignettes de 224) et
   les vignettes se chevauchaient dès la deuxième rangée (2026-10-13). Contenu entièrement positionné. */
.ccs-pick-item{aspect-ratio:auto;height:0;padding:177.78% 0 0;}
.ccs-pick-item > .eui-thumb-name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.ccs-ptable td{padding:10px 14px;}
.ccs-ptable thead th{padding:12px 14px;}
@media (max-width:900px){
  .ccs-qr-row,.ccs-story-row{flex-direction:column;align-items:stretch;}
  .ccs-choix{grid-template-columns:minmax(0,1fr);}
}

/* ---- File de validation (Community Management → Commentaires, 2026-10-19 — README §10.11) ----
   Une carte = la capture à gauche (publication entière, ou passage de la discussion), la décision à droite.
   .is-hot / .is-ask : alerte (discussion houleuse / quelqu'un demande votre réponse) ; .is-done : traitée,
   refusée, expirée. La capture s'agrandit au clic (EliumUI, même lightbox que les vignettes du journal). */
.eui-vq{display:grid;grid-template-columns:400px minmax(0,1fr);gap:24px;background:#444;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:20px;}
.eui-vq.is-hot{background:rgba(205,92,92,.12);border-color:rgba(205,92,92,.5);}
.eui-vq.is-ask{background:rgba(255,140,0,.10);border-color:rgba(255,140,0,.5);}
.eui-vq.is-done{opacity:.72;}
.eui-vq.is-loading{opacity:.5;pointer-events:none;}
.eui-vq-side{display:flex;flex-direction:column;gap:10px;min-width:0;}
.eui-vq-cap{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.55);display:flex;justify-content:space-between;align-items:center;gap:10px;}
.eui-vq-shot{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;object-position:top center;border-radius:8px;background:#fff;cursor:zoom-in;}
.eui-vq-noshot{height:160px;border-radius:8px;background:rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:12px;color:rgba(255,255,255,.5);}
.eui-vq-noshot svg{width:28px;height:28px;}
.eui-vq-main{display:flex;flex-direction:column;gap:14px;min-width:0;}
.eui-vq-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.eui-vq-title{font-size:16px;font-weight:700;margin-top:10px;}
.eui-vq-alert{font-size:14px;font-weight:700;margin:10px 0 4px;}
.eui-vq-text{font-size:12.5px;color:#ddd;line-height:1.5;}
.eui-vq-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;font-size:12px;color:#ccc;flex:0 1 auto;max-width:55%;}
.eui-vq-meta > *{white-space:nowrap;}
.eui-vq-why{font-size:12.5px;color:#ccc;line-height:1.55;}
.eui-vq-why b{color:#fff;font-weight:600;}
.eui-vq-quote{font-size:14px;line-height:1.55;color:#fff;}
.eui-vq-quote q,.eui-quote q{quotes:"« " " »";}
.eui-vq-editor{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.55;color:#fff;min-height:74px;width:100%;font-family:inherit;resize:vertical;box-sizing:border-box;}
.eui-vq-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.eui-vq-expire{margin-left:auto;font-size:12px;color:rgba(255,255,255,.55);display:inline-flex;align-items:center;gap:6px;}
.eui-vq-expire svg{width:13px;height:13px;}
.eui-quote{font-size:13px;line-height:1.5;color:#fff;}
.eui-quote.is-dim{color:#ccc;}
@media (max-width:1100px){.eui-vq{grid-template-columns:1fr;}}

/* ÉDITION EN LIGNE d'un texte court — EliumUI.inlineEdit() (2026-10-23, libellé des frais de la liste des
   factures). <span class="eui-inline-edit" tabindex="0">texte</span> ; vide = « + » grisé. Marche aussi
   hors .eui-scope (pages historiques) : tout est déclaré ici, en une classe. */
.eui-inline-edit{cursor:text;display:inline-block;min-width:22px;min-height:1.2em;padding:2px 6px;margin:-2px -6px;border-radius:5px;}
.eui-inline-edit:hover,.eui-inline-edit:focus{background:rgba(255,255,255,.08);outline:none;}
.eui-inline-edit:empty::before{content:"+";color:rgba(255,255,255,.35);}
.eui-inline-edit.is-editing{padding:0;margin:0;display:block;}
.eui-inline-edit.is-busy{opacity:.5;}
.eui-inline-edit.is-error{box-shadow:inset 0 0 0 1px indianred;}
.eui-inline-edit-input{font:inherit;color:inherit;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);border-radius:5px;padding:2px 6px;width:100%;min-width:140px;height:auto;margin:0;box-sizing:border-box;}

/* PRÉVISIONS (lists/previsions.php, 2026-10-23, maquette docs/maquettes/previsions/) — préfixe pv- = mise en
   page de l'onglet ; contrôles : eui-stat, eui-segmented, eui-select-pill, eui-btn, eui-icon-btn, eui-grip,
   eui-inline-edit. Palette des graphiques validée (dataviz) : bleu #1e90ff plein / hachuré / pointillé,
   minimum #d27a1f, année N−1 gris. */
.pv-num{font-variant-numeric:tabular-nums;}
.pv-neg{color:#f2a7a7;}
.pv-pos{color:#a8dba8;}
.pv-dim{color:rgba(255,255,255,.55);}
.pv-stack{display:flex;flex-direction:column;gap:22px;}
.pv-panel{background:#3a3a3a;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:20px 22px;min-width:0;}
.pv-panel h3{margin:0;font-size:16px;font-weight:700;}
.pv-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;}
.pv-panel-head p{margin:0;font-size:12px;color:rgba(255,255,255,.55);}
.pv-panel-head p a{color:#cfe6ff;text-decoration:underline;}
.pv-two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;}
@media (max-width:1100px){.pv-two{grid-template-columns:minmax(0,1fr);}}
.pv-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:#ccc;margin:0 0 10px;}
.pv-legend span{display:inline-flex;align-items:center;gap:7px;}
.pv-key{width:14px;height:10px;border-radius:2px;display:inline-block;}
.pv-key.is-billed{background:#1e90ff;}
.pv-key.is-planned{background:repeating-linear-gradient(45deg,#1e90ff 0 2px,transparent 2px 5px);border:1px solid #1e90ff;}
.pv-key.is-min{height:0;border-top:2px solid #d27a1f;border-radius:0;}
.pv-key.is-prev{height:0;border-top:2px solid #9a9a9a;border-radius:0;}
.pv-chart{width:100%;height:auto;display:block;font-family:inherit;}
.pv-scroll{overflow-x:auto;border:1px solid rgba(255,255,255,.12);border-radius:12px;}
.pv-table,.pv-grid{border-collapse:collapse;width:100%;font-size:12.5px;min-width:1100px;position:static;}
.pv-grid{min-width:1240px;}
.pv-table th,.pv-table td,.pv-grid th,.pv-grid td{padding:9px 10px;text-align:right;white-space:nowrap;border-top:1px solid rgba(255,255,255,.06);}
.pv-table thead th,.pv-grid thead th{background:#555;color:#fff;font-weight:600;font-size:12px;border-top:none;}
.pv-table th:first-child,.pv-table td:first-child,.pv-grid th:first-child,.pv-grid td:first-child{text-align:left;position:sticky;left:0;background:#3a3a3a;font-weight:600;z-index:1;}
.pv-table thead th:first-child,.pv-grid thead th:first-child{background:#555;}
.pv-table tr.is-sum td{font-weight:700;background:rgba(255,255,255,.05);}
.pv-table tr.is-sum td:first-child{background:#444;}
.pv-table td.is-now,.pv-table th.is-now{box-shadow:inset 0 0 0 1px rgba(30,144,255,.55);}
.pv-table td.is-future{color:rgba(255,255,255,.62);}
.pv-table tr.is-sub td{font-size:11.5px;color:rgba(255,255,255,.62);}
.pv-table tr.is-sub td:first-child{font-weight:400;padding-left:22px;}
/* À facturer : un groupe par mois, lignes déplaçables */
.pv-month{border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#3a3a3a;}
.pv-month-head{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08);border-radius:12px 12px 0 0;}
.pv-month-head h4{margin:0;font-size:15px;font-weight:700;}
.pv-month-head .pv-split{font-size:12px;color:rgba(255,255,255,.62);}
.pv-month-head .pv-tot{margin-left:auto;font-weight:700;font-size:15px;}
.pv-month.is-late .pv-month-head{background:rgba(255,140,0,.12);}
.pv-month.is-empty .pv-month-head{border-bottom:none;opacity:.75;}
.pv-month.is-drop-over{box-shadow:0 0 0 2px rgba(30,144,255,.75);}
.pv-drop-hint{display:none;margin:8px 16px 12px;border:1.5px dashed rgba(30,144,255,.6);border-radius:10px;padding:8px;text-align:center;font-size:12px;color:#cfe6ff;}
.pv-dragging .pv-drop-hint{display:block;}
.pv-row{display:grid;grid-template-columns:18px minmax(0,1fr) minmax(0,1.8fr) 96px 96px 200px;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid rgba(255,255,255,.06);font-size:13px;}
.pv-month-head + .pv-row{border-top:none;}
.pv-row.is-dragging{opacity:.35;}
.pv-row button.eui-grip{border:none;background:transparent;padding:0;width:16px;opacity:.55;}
.pv-row:hover button.eui-grip,.pv-row button.eui-grip:focus{opacity:1;}
.pv-row .pv-client{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.pv-row .pv-lib{color:#ddd;min-width:0;}
.pv-row .pv-lib small{display:block;color:rgba(255,255,255,.55);font-size:11.5px;margin-top:2px;}
.pv-row .pv-lib .pv-note:empty::before{content:"+ remarque";opacity:.45;}
.pv-row .pv-lib .pv-note:empty{opacity:0;}
.pv-row:hover .pv-lib .pv-note:empty,.pv-row .pv-lib .pv-note:empty:focus{opacity:1;}
.pv-type-sel{background:rgba(255,255,255,.08);color:#eee;border:none;border-radius:20px;padding:5px 8px;font-size:12px;font-family:inherit;cursor:pointer;}
.pv-remind .pv-month-head{background:rgba(255,140,0,.08);}
.pv-recent{opacity:.8;}
.pv-row .pv-type{font-size:12px;color:#ccc;}
.pv-row .pv-amt{text-align:right;font-weight:700;}
.pv-row .pv-act{display:flex;justify-content:flex-end;align-items:center;gap:6px;flex-wrap:wrap;}
.pv-lock{font-size:11.5px;color:rgba(255,255,255,.55);}
.pv-src{display:inline-flex;align-items:center;justify-content:center;border-radius:25px;padding:4px 10px;font-size:11px;font-weight:700;white-space:nowrap;}
.pv-src.is-auto{background:#555;color:#fff;}
.pv-src.is-trendz{background:linear-gradient(165deg,#e164e1,#3200af);color:#fff;}
.pv-month-pick{padding:6px 10px;font-size:12px;}
.pv-add{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) minmax(0,1fr) 110px 130px 170px auto;gap:10px;align-items:end;}
.pv-add .customer-search-field input[type=text]{width:100%;box-sizing:border-box;}
@media (max-width:900px){.pv-add{grid-template-columns:minmax(0,1fr);}}
/* Dépenses prévues : grille lignes × mois */
.pv-grid tr.is-group td{background:#444;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.62);font-weight:600;}
.pv-grid tr.is-total td{font-weight:700;background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.25);}
.pv-grid tr.is-total td:first-child,.pv-grid tr.is-group td:first-child{background:#444;}
.pv-grid tr.is-real td{color:#cfe6ff;}
.pv-grid td.is-proj .pv-cell{color:rgba(255,255,255,.62);font-style:italic;}
.pv-grid .pv-cell{min-width:48px;text-align:right;}
.pv-grid .pv-cell.is-same{color:rgba(255,255,255,.7);}
.pv-grid td:first-child .eui-icon-btn{display:inline-flex;vertical-align:middle;margin-left:4px;opacity:0;}
.pv-grid tr:hover td:first-child .eui-icon-btn,.pv-grid td:first-child .eui-icon-btn:focus{opacity:1;}
.pv-every{display:inline-flex;align-items:center;margin-left:8px;font-size:10.5px;border-radius:20px;padding:2px 8px;border:1px dashed rgba(255,255,255,.3);background:transparent;color:rgba(255,255,255,.55);font-family:inherit;cursor:pointer;vertical-align:middle;}
.pv-every.is-on{border-style:solid;border-color:rgba(30,144,255,.6);color:#cfe6ff;background:rgba(30,144,255,.12);}
.pv-mstate{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;border-radius:20px;padding:3px 8px;white-space:nowrap;}
.pv-mstate svg{width:11px;height:11px;}
.pv-mstate.is-done{background:rgba(30,144,255,.18);color:#cfe6ff;}
.pv-mstate.is-now{background:rgba(255,140,0,.18);color:#ffd2a1;}
.pv-mstate.is-proj{border:1px dashed rgba(255,255,255,.3);color:rgba(255,255,255,.62);}
.pv-dep-add{display:grid;grid-template-columns:minmax(0,1.6fr) 220px 160px auto;gap:10px;align-items:end;margin-top:16px;}
@media (max-width:900px){.pv-dep-add{grid-template-columns:minmax(0,1fr);}}
.pv-table tr:nth-child(n),.pv-grid tr:nth-child(n){background:transparent;}
.pv-table td,.pv-grid td{color:#eee;}


/* ==========================================================================
   NAVIGATION — barre latérale groupée (2026-10-23, README §10.13)
   ==========================================================================
   Rendue par inc/elium_nav.php (elium_nav_render), comportements dans js/elium-ui.js (EliumUI.nav).
   Maquette validée : docs/maquettes/navigation/.
   - La barre fait la hauteur de l'écran et reste en place quand la page défile. Le haut (logo,
     Créer, Aller à…) et le pied (profil, cloche) sont fixes ; seule la liste des sections défile,
     et passe sous le pied avec un fondu (.eui-nav-foot::before).
   - .is-collapsed : icônes seules ; les sous-pages d'une section s'ouvrent en volet au survol
     (position:fixed — un volet absolu serait coupé par le défilement de la liste ; le JS place le
     haut du volet en face de l'icône).
   - Les couleurs d'avatar viennent des classes historiques .color_XXX (styles.css). */
body.eui-has-nav{max-width:none;margin:0;padding:0;}
.eui-nav-shell{display:flex;align-items:flex-start;min-height:100vh;}
.eui-nav-main{flex:1 1 auto;min-width:0;padding:34px 3vw 60px;box-sizing:border-box;}
.eui-nav-main-in{max-width:1500px;}
.eui-nav-pagehead{margin:0 0 4px;}

.eui-nav{position:-webkit-sticky;position:sticky;top:0;z-index:60;flex:none;width:260px;height:100vh;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;padding:22px 14px 14px;background:#2a2a2a;border-right:1px solid rgba(255,255,255,.07);color:#fff;font-size:14px;}
.eui-nav *{box-sizing:border-box;}
.eui-nav div:not([class*="eui-"]){margin:0;}
.eui-nav a{color:inherit;text-decoration:none;}
.eui-nav a:hover{color:inherit;}
.eui-nav form{display:block;margin:0;padding:0;}
.eui-nav button{font-family:inherit;}
.eui-nav svg{flex:none;}
.eui-nav a:focus-visible,.eui-nav button:focus-visible{outline:2px solid dodgerblue;outline-offset:2px;}

/* haut */
.eui-nav-top{flex:none;display:flex;flex-direction:column;gap:14px;}
.eui-nav-brandrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 4px 8px;}
.eui-nav-brand{display:flex;flex-direction:column;gap:3px;}
.eui-nav-brand img{width:92px;display:block;}
.eui-nav-brand span{font-size:7px;letter-spacing:7.1px;text-transform:uppercase;color:rgba(255,255,255,.75);}
.eui-nav-mark{display:none;}
.eui-nav-toggle{width:30px;height:30px;padding:0;border:none;border-radius:50%;background:transparent;color:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.eui-nav-toggle:hover{background:rgba(255,255,255,.08);color:#fff;}
.eui-nav-toggle svg{width:16px;height:16px;}
.eui-nav-quick{display:flex;flex-direction:column;gap:8px;}
.eui-nav-anchor{position:relative;}
.eui-nav-create{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:40px;padding:10px 14px;border:none;border-radius:25px;background:dodgerblue;color:#fff;font-size:13px;font-weight:700;cursor:pointer;}
.eui-nav-create:hover{background:#1c86ee;}
.eui-nav-create svg{width:15px;height:15px;}
.eui-nav-goto{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:9px 12px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);font-size:13px;text-align:left;cursor:pointer;}
.eui-nav-goto:hover{color:#fff;border-color:rgba(255,255,255,.25);}
.eui-nav-goto svg{width:15px;height:15px;}
.eui-nav-kbd{font-family:inherit;font-size:11px;font-weight:700;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:1px 5px;}

/* sections */
.eui-nav-list{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-bottom:30px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;}
.eui-nav-list::-webkit-scrollbar{width:6px;}
.eui-nav-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px;}
.eui-nav-group{display:flex;flex-direction:column;gap:2px;}
.eui-nav-group-t{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.55);padding:0 10px 5px;}
.eui-nav-item{display:flex;align-items:center;gap:10px;min-height:36px;padding:8px 10px;border-radius:10px;color:#ddd;font-size:13.5px;font-weight:600;}
.eui-nav-item:hover{background:rgba(255,255,255,.05);color:#fff;}
.eui-nav-item > svg{width:17px;height:17px;color:rgba(255,255,255,.7);}
.eui-nav-item.is-here,.eui-nav-item.is-here > svg{color:#fff;}
.eui-nav-item.is-active{background:dodgerblue;color:#fff;}
.eui-nav-item.is-active:hover{background:dodgerblue;}
.eui-nav-item.is-active > svg{color:#fff;}
.eui-nav-l{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eui-nav-trz{width:20px;height:20px;display:block;flex:none;}
.eui-nav-item > .eui-nav-trz{margin:0 -1.5px;}
/* Flèche sur la section ouverte seulement : un clic sur une section fermée ouvre sa première page, et la
   place libérée garde « Community Management » entier à côté de son point. */
.eui-nav-chev{display:none;color:rgba(255,255,255,.45);}
.eui-nav-chev svg{width:14px;height:14px;}
.eui-nav-sec.is-open .eui-nav-chev{display:flex;}
.eui-nav-subs{display:none;flex-direction:column;gap:1px;margin:2px 0 6px 19px;padding-left:10px;border-left:1px solid rgba(255,255,255,.12);}
.eui-nav-sec.is-open > .eui-nav-subs{display:flex;}
.eui-nav-flyt{display:none;}
.eui-nav-sub{display:flex;align-items:center;gap:8px;min-height:32px;padding:7px 10px;border-radius:8px;color:rgba(255,255,255,.72);font-size:13px;}
.eui-nav-sub:hover{background:rgba(255,255,255,.05);color:#fff;}
.eui-nav-sub.is-active,.eui-nav-sub.is-active:hover{background:dodgerblue;color:#fff;font-weight:600;}
.eui-nav-sub.is-active.is-trz{background:linear-gradient(165deg,#e164e1,#3200af);}
.eui-nav-sub-l{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* compteurs : nombre bleu = à traiter ; gris = information ; point rouge = problème ; section repliée = point seul */
.eui-nav-count{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:rgba(30,144,255,.22);color:#9ccbff;font-variant-numeric:tabular-nums;}
.eui-nav-count.is-info{background:rgba(255,255,255,.1);color:#ddd;}
.eui-nav-sub.is-active .eui-nav-count,.eui-nav-item.is-active .eui-nav-count{background:rgba(255,255,255,.25);color:#fff;}
.eui-nav-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#62a8ff;}
.eui-nav-dot.is-bad{background:#f07070;box-shadow:0 0 0 3px rgba(240,112,112,.18);}
.eui-nav-sec.is-open > .eui-nav-item > .eui-nav-dot{display:none;}

/* pied */
.eui-nav-foot{position:relative;flex:none;display:flex;align-items:center;gap:10px;padding:12px 6px 2px;border-top:1px solid rgba(255,255,255,.08);}
.eui-nav-foot::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% + 1px);height:40px;background:linear-gradient(to bottom,rgba(42,42,42,0),#2a2a2a);pointer-events:none;}
.eui-nav-userwrap{flex:1;min-width:0;}
.eui-nav-user{display:flex;align-items:center;gap:10px;width:100%;padding:4px;border:none;border-radius:10px;background:transparent;color:#fff;text-align:left;cursor:pointer;}
.eui-nav-user:hover{background:rgba(255,255,255,.05);}
.eui-nav-user .eui-nav-l{display:flex;flex-direction:column;}
.eui-nav-user-n{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eui-nav-user-r{font-size:11.5px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eui-nav-avatar{width:34px;height:34px;flex:none;padding:0;border:none;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#555;color:#fff;font-size:11px;font-weight:700;line-height:1;}
.eui-nav-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
button.eui-nav-avatar{cursor:pointer;}
.eui-nav-avatar.is-me{box-shadow:0 0 0 2px #3a3a3a,0 0 0 4px dodgerblue;}
.eui-nav-bell{position:relative;width:38px;height:38px;flex:none;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.07);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.eui-nav-bell:hover{background:rgba(255,255,255,.12);}
.eui-nav-bell svg{width:17px;height:17px;}
.eui-nav-bell b{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;border:2px solid #2a2a2a;background:dodgerblue;font-size:10.5px;display:flex;align-items:center;justify-content:center;}

/* menus flottants (Créer, profil, notifications) */
.eui-nav-pop{position:absolute;left:0;top:calc(100% + 8px);z-index:70;width:300px;max-height:70vh;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:1px;background:#3a3a3a;border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.5);}
.eui-nav-pop[hidden]{display:none;}
.eui-nav-pop.is-up{top:auto;bottom:calc(100% + 8px);}
.eui-nav-pop.is-notifs{width:340px;}
.eui-nav-pop-t{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.55);padding:8px 10px 4px;}
.eui-nav-pop-i{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:8px 10px;border:none;border-radius:8px;background:transparent;color:#eee;font-size:13px;line-height:1.35;text-align:left;cursor:pointer;}
.eui-nav-pop-i:hover,.eui-nav-pop-i:focus-visible{background:rgba(255,255,255,.08);color:#fff;outline:none;}
.eui-nav-pop-i svg{width:15px;height:15px;color:rgba(255,255,255,.7);}
.eui-nav-pop-i .eui-nav-trz{width:16px;height:16px;}
.eui-nav-pop-i.is-danger,.eui-nav-pop-i.is-danger svg{color:#f2a7a7;}
.eui-nav-pop-i.is-notif{display:block;}
.eui-nav-pop-sep{height:1px;background:rgba(255,255,255,.1);margin:5px 4px;}
.eui-nav-pop-empty{padding:6px 10px 10px;color:rgba(255,255,255,.55);font-size:13px;}
.eui-nav-ini{display:flex;flex-wrap:wrap;gap:8px;padding:4px 10px 8px;}

/* barre repliée */
.eui-nav.is-collapsed{width:68px;padding:20px 8px 14px;}
.eui-nav.is-collapsed .eui-nav-l,
.eui-nav.is-collapsed .eui-nav-kbd,
.eui-nav.is-collapsed .eui-nav-group-t,
.eui-nav.is-collapsed .eui-nav-chev,
.eui-nav.is-collapsed .eui-nav-brand,
.eui-nav.is-collapsed .eui-nav-item > .eui-nav-count{display:none;}
.eui-nav.is-collapsed .eui-nav-top,.eui-nav.is-collapsed .eui-nav-quick{align-items:center;}
.eui-nav.is-collapsed .eui-nav-brandrow{flex-direction:column;gap:6px;padding:0;}
.eui-nav.is-collapsed .eui-nav-mark{display:flex;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.06);align-items:center;justify-content:center;font-weight:800;font-size:15px;}
.eui-nav.is-collapsed .eui-nav-create{width:44px;height:44px;min-height:0;padding:0;border-radius:50%;}
.eui-nav.is-collapsed .eui-nav-goto{width:44px;height:44px;min-height:0;padding:0;justify-content:center;border-radius:12px;}
.eui-nav.is-collapsed .eui-nav-list{align-items:center;gap:6px;scrollbar-width:none;}
.eui-nav.is-collapsed .eui-nav-list::-webkit-scrollbar{display:none;}
.eui-nav.is-collapsed .eui-nav-group{align-items:center;gap:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.1);}
.eui-nav.is-collapsed .eui-nav-group:first-child{padding-top:0;border-top:none;}
.eui-nav.is-collapsed .eui-nav-item{position:relative;width:44px;height:44px;min-height:0;padding:0;justify-content:center;border-radius:12px;}
.eui-nav.is-collapsed .eui-nav-item > svg{width:19px;height:19px;}
.eui-nav.is-collapsed .eui-nav-item > .eui-nav-trz{width:24px;height:24px;margin:0;}
.eui-nav.is-collapsed .eui-nav-item.is-here{background:rgba(255,255,255,.1);}
.eui-nav.is-collapsed .eui-nav-item > .eui-nav-dot,
.eui-nav.is-collapsed .eui-nav-sec.is-open > .eui-nav-item > .eui-nav-dot{display:block;position:absolute;top:8px;right:8px;}
/* Barre dépliée : une section fermée ouvre ses sous-pages en volet au survol (2026-10-23) — on choisit une
   sous-page sans clic et sans que la liste bouge sous la souris. Le JS pose .is-fly après un court délai
   (traverser la liste n'ouvre rien) et place le volet en face de la section ; :focus-within = clavier. */
.eui-nav:not(.is-collapsed) .eui-nav-sec.has-subs:not(.is-open).is-fly > .eui-nav-subs,
.eui-nav:not(.is-collapsed) .eui-nav-sec.has-subs:not(.is-open):focus-within > .eui-nav-subs{display:flex;position:fixed;left:256px;z-index:80;width:236px;margin:0;padding:8px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#3a3a3a;box-shadow:0 16px 40px rgba(0,0,0,.45);}
.eui-nav:not(.is-collapsed) .eui-nav-sec.has-subs:not(.is-open) > .eui-nav-subs::before{content:"";position:absolute;left:-16px;top:0;bottom:0;width:16px;}
.eui-nav:not(.is-collapsed) .eui-nav-sec.is-fly:not(.is-open) > .eui-nav-item{background:rgba(255,255,255,.05);color:#fff;}
.eui-nav.is-collapsed .eui-nav-subs,
.eui-nav.is-collapsed .eui-nav-sec.is-open > .eui-nav-subs{display:none;position:fixed;left:62px;z-index:80;width:236px;margin:0;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#3a3a3a;box-shadow:0 16px 40px rgba(0,0,0,.45);}
/* pont invisible entre l'icône et le volet : le survol ne se perd pas en traversant l'écart */
.eui-nav.is-collapsed .eui-nav-subs::before{content:"";position:absolute;left:-16px;top:0;bottom:0;width:16px;}
.eui-nav.is-collapsed .eui-nav-sec:hover > .eui-nav-subs,
.eui-nav.is-collapsed .eui-nav-sec:focus-within > .eui-nav-subs{display:flex;}
.eui-nav.is-collapsed .eui-nav-flyt{display:block;padding:4px 10px 8px;font-size:12px;font-weight:700;color:#fff;}
.eui-nav.is-collapsed .eui-nav-foot{flex-direction:column;padding:12px 0 2px;}
.eui-nav.is-collapsed .eui-nav-userwrap{flex:none;}
.eui-nav.is-collapsed .eui-nav-user{width:auto;padding:0;}
.eui-nav.is-collapsed .eui-nav-pop{left:calc(100% + 14px);top:0;}
.eui-nav.is-collapsed .eui-nav-pop.is-up{top:auto;bottom:0;}

/* « Aller à… » (⌘K) */
.eui-nav-veil{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3000;display:flex;justify-content:center;align-items:flex-start;padding:12vh 20px 20px;background:rgba(20,20,20,.62);}
.eui-nav-veil[hidden]{display:none;}
.eui-nav-pal{width:620px;max-width:100%;max-height:72vh;display:flex;flex-direction:column;overflow:hidden;background:#3a3a3a;border:1px solid rgba(255,255,255,.16);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);color:#fff;font-family:sans-serif;font-size:14px;}
.eui-nav-pal *{box-sizing:border-box;}
.eui-nav-pal div:not([class*="eui-"]){margin:0;}
.eui-nav-pal-in{flex:none;display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1);}
.eui-nav-pal-in svg{width:18px;height:18px;flex:none;color:rgba(255,255,255,.6);}
.eui-nav-pal-in input.eui-nav-pal-q{flex:1;min-width:0;width:auto;height:auto;margin:0;padding:4px 0;border:none;border-radius:0;background:transparent;box-shadow:none;outline:none;color:#fff;font-family:inherit;font-size:16px;}
.eui-nav-pal-in input.eui-nav-pal-q::placeholder{color:rgba(255,255,255,.5);}
.eui-nav-pal-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px;}
.eui-nav-pal-g{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.55);padding:10px 12px 4px;}
.eui-nav-pal-i{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:8px;color:#eee;font-size:13.5px;text-decoration:none;}
.eui-nav-pal-i:hover{color:#fff;background:rgba(255,255,255,.06);}
.eui-nav-pal-i.is-sel,.eui-nav-pal-i.is-sel:hover{background:dodgerblue;color:#fff;}
.eui-nav-pal-i svg{width:16px;height:16px;flex:none;color:rgba(255,255,255,.7);}
.eui-nav-pal-i .eui-nav-trz{width:16px;height:16px;}
.eui-nav-pal-i.is-sel svg{color:#fff;}
.eui-nav-pal-i > span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eui-nav-pal-i em{font-style:normal;color:rgba(255,255,255,.55);}
.eui-nav-pal-i small{flex:none;max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:rgba(255,255,255,.55);}
.eui-nav-pal-i.is-sel em,.eui-nav-pal-i.is-sel small{color:rgba(255,255,255,.85);}
.eui-nav-pal-empty{padding:12px;color:rgba(255,255,255,.55);font-size:13px;}
.eui-nav-pal-foot{flex:none;display:flex;flex-wrap:wrap;gap:18px;padding:10px 18px;border-top:1px solid rgba(255,255,255,.1);font-size:11.5px;color:rgba(255,255,255,.55);}
.eui-nav-pal-foot span{display:inline-flex;align-items:center;gap:6px;}
.pv-bank{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;font-size:12px;color:#ccc;}
.pv-bank label.eui-btn{cursor:pointer;}


/* ==========================================================================
   MES HEURES (2026-10-23) — lists/myaccount.php + js/mes-heures.js · préfixe mh-
   Maquette validée : docs/maquettes/mes-heures/ (v3 : spec-v3.json, planches project/…dc.html ;
   Outlook : spec-outlook.json). Repris de docs/maquettes/mes-heures/assets/heures.css, MÊMES
   classes, adapté au dashboard :
   - La page est dans .eui-scope et la lightbox dans .eui-modal-card : le reset
     `div:not([class*="eui-"]){margin:0}` (0,2,1) y bat toute marge posée sur un <div> mh- (0,1,0).
     Les espacements de la maquette sont donc écrits en PADDING (README §10.4) ; les deux seules
     vraie marge (.mh-modal-foot-l) est redite en `div.mh-…` ci-dessous (même poids que le reset,
     déclarée après lui : elle gagne).
   - styles.css : `input[type=text|time|number]{width:calc(100% - 20px);padding:10px;border-style:none}`
     (0,1,1) bat une classe seule → les champs s'écrivent `input.mh-…` ou `.mh-… input`.
   - Les boutons « texte » de la maquette (Oui/Non, Annuler, résultats de recherche) portaient leur
     remise à zéro en style inline : elle est ici, le JS n'écrit aucun style.
   - Bulle du jour refaite le 2026-10-26 (Piste B, « la journée en une liste ») : classes b-… de la planche
     docs/maquettes/mes-heures/project/BulleB.dc.html reprises en mh-… ; l'ancienne bulle (puces Récentes,
     ligne d'aperçu, « Heures précises », crayon, bloc Outlook, .mh-en/.mh-sug/.mh-add/.mh-dd…) est retirée.
   - Retirés car propres à la maquette : .mh-veil (planche de lightbox), .mh-tip (infobulle montrée
     ouverte ; en vrai : attribut title) ; de .mh-pop.is-static (bulle posée à plat) il ne reste que
     l'absence de flèche du volet < 1000 px (le JS pose la position). Retiré par décision
     (23.10) : barrer l'entrée de type 2 — elle est comptée, son type s'affiche en étiquette (.mh-tag)
     comme tout type ≠ Au Travail, SANS barrer.
   - La lightbox Congés est elium_ui_modal_open(['id'=>'mh-leave', …]) (anatomie standard, section
     LIGHTBOX plus haut) : seuls les compléments propres à ses onglets sont ici, sous #mh-leave.
   Couleurs écrites en clair (règle 3 en tête de fichier) : #222 = noir de l'app ; rouge indianred
   réservé à « à saisir » et au chrono ; darkorange = balance négative, maladie, chevauchement Outlook.
   ========================================================================== */
.mh-page{display:flex;flex-direction:column;gap:16px;}
.mh-pos{color:#8fbc8f;} .mh-neg{color:#ff8c00;}

/* ---- barre du haut : titre · [droits ≤ 2] initiales + #mh-who (eui-select-pill) + ✕ · [droits ≤ 1] #mh-bal ---- */
.mh-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:56px;}
.mh-top h2{margin:0;font-size:26px;font-weight:700;}
.mh-top-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:relative;}
/* Couleur de fond : classe historique color_XXX (styles.css, !important) posée à côté ; gris à défaut. */
.mh-ini{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#222;background:#999;flex:none;}
.mh-pill{display:inline-flex;align-items:center;gap:8px;border-radius:20px;padding:8px 12px;font-size:13px;font-weight:600;white-space:nowrap;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#ccc;}
.mh-pill svg{width:13px;height:13px;}
.mh-pill.is-blue{background:#1e90ff;border-color:#1e90ff;color:#fff;}
/* #mh-who = eui-select-pill natif : bleu quand un collègue est affiché (background-color seul : la flèche
   d'eui-select-pill est une background-image, elle reste). */
select.mh-who.is-blue{background-color:#1e90ff;border-color:#1e90ff;color:#fff;}
.mh-pill.is-pos{background:rgba(143,188,143,.16);border-color:transparent;color:#8fbc8f;}
.mh-pill.is-neg{background:rgba(255,140,0,.16);border-color:transparent;color:#ff8c00;}
.mh-pill.is-none{color:#ccc;}
.mh-pill b{color:inherit;font-variant-numeric:tabular-nums;}

/* ---- bande Congés (#mh-band, rendue par le JS depuis LeaveData) ---- */
.mh-band{background:#444;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 20px;display:grid;grid-template-columns:240px minmax(0,1fr) auto;gap:24px;align-items:center;min-height:88px;box-sizing:border-box;}
.mh-band-k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#ccc;}
.mh-band-v{font-size:26px;font-weight:700;line-height:1.15;padding-top:3px;font-variant-numeric:tabular-nums;}
.mh-band-v small{font-size:13px;font-weight:600;color:#ccc;margin-left:6px;}
.mh-band-if{font-size:12px;color:#ccc;padding-top:3px;}
.mh-band-if:empty{display:none;}
.mh-gauge{display:flex;width:280px;max-width:100%;height:8px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.10);}
.mh-gauge i{display:block;height:100%;}
.mh-gauge .is-taken{background:#8fbc8f;}
.mh-gauge .is-pending{background:repeating-linear-gradient(45deg,#8fbc8f 0 3px,rgba(143,188,143,.30) 3px 6px);}
.mh-counts{display:flex;gap:14px;flex-wrap:wrap;padding-top:9px;font-size:12px;color:#ccc;}
.mh-counts:empty{display:none;}
.mh-counts span{display:inline-flex;align-items:center;gap:6px;}
.mh-counts i{width:8px;height:8px;border-radius:50%;display:block;}
.mh-band-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
/* « À valider · N » (droits 0–1) · « + Absence » (droit 0) · « Valider » · « Modifier » */
.mh-btn-warn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:25px;padding:10px 16px;font:inherit;font-size:13px;font-weight:700;background:rgba(255,140,0,.16);color:#ff8c00;cursor:pointer;text-decoration:none;white-space:nowrap;}
.mh-btn-line{display:inline-flex;align-items:center;gap:7px;border:1px solid #ff8c00;border-radius:25px;padding:9px 15px;font:inherit;font-size:13px;font-weight:700;background:transparent;color:#ff8c00;cursor:pointer;text-decoration:none;white-space:nowrap;}
.mh-btn-ok{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:20px;padding:6px 12px;font:inherit;font-size:12px;font-weight:700;background:#8fbc8f;color:#222;cursor:pointer;text-decoration:none;white-space:nowrap;}
.mh-btn-sm{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:5px 11px;font:inherit;font-size:12px;font-weight:600;background:transparent;color:#fff;cursor:pointer;text-decoration:none;white-space:nowrap;}
.mh-btn-warn svg,.mh-btn-line svg,.mh-btn-ok svg,.mh-btn-sm svg{width:13px;height:13px;flex:none;}
.mh-btn-warn:hover,.mh-btn-ok:hover{filter:brightness(1.08);}
.mh-btn-line:hover{background:rgba(255,140,0,.10);}
.mh-btn-sm:hover{background:rgba(255,255,255,.08);}
.mh-btn-ok:disabled,.mh-btn-sm:disabled{opacity:.45;cursor:not-allowed;filter:none;}

/* ---- calendrier : 5 jours ouvrés 1fr · Sa/Di 0,55fr · colonne Semaine 132 px ---- */
.mh-cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;flex-wrap:wrap;}
.mh-cal-nav{display:flex;align-items:center;gap:8px;}
.mh-cal-nav h3{margin:0;font-size:18px;font-weight:700;min-width:150px;text-align:center;}
.mh-cal-sum{font-size:13px;color:#ccc;}
.mh-cal-sum b{color:#fff;font-variant-numeric:tabular-nums;}
.mh-cal-wrap{position:relative;}
.mh-cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) repeat(2,minmax(0,.55fr)) 132px;gap:6px;}
.mh-dow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#ccc;text-align:center;padding:2px 0 4px;}
.mh-dow.is-week{text-align:right;padding-right:12px;}

/* Case du jour = <button class="mh-d …"> (toute la case ouvre la bulle). Enfants en <span> : .mh-d-top
   (.mh-d-n numéro · .mh-d-ol point Outlook · .mh-d-plus), .mh-d-h heures, .mh-d-rec chrono, .mh-d-l
   libellé d'absence, .mh-d-g jauge (<i style="width:NN%">).
   États : is-today · is-sel · is-flash · is-future · is-we · is-off (jour off fixe) · is-hol (férié) ·
   is-before / is-outside (avant l'entrée, après la sortie) · is-vac · is-half · is-pending · is-sick ·
   is-todo (à saisir) · is-todo-soft (à saisir, droits 2–3 : numéro rouge seul) · is-out (hors du mois). */
.mh-d{position:relative;width:100%;min-height:96px;border-radius:10px;background:#3a3a3a;border:none;margin:0;padding:8px 10px 9px;display:flex;flex-direction:column;gap:2px;color:#fff;text-align:left;font:inherit;cursor:pointer;overflow:hidden;box-sizing:border-box;}
.mh-d:hover,.mh-d:focus-visible{box-shadow:inset 0 0 0 1px #1e90ff;outline:none;}
.mh-d-top{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.mh-d-n{font-size:13px;font-weight:700;color:#ccc;line-height:20px;}
.mh-d-plus{width:20px;height:20px;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:15px;font-weight:700;line-height:1;color:rgba(255,255,255,.75);background:rgba(255,255,255,.08);}
.mh-d:hover .mh-d-plus,.mh-d.is-today .mh-d-plus{display:inline-flex;}
.mh-d-h{display:block;font-size:22px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;padding-top:6px;}
.mh-d-l{font-size:11px;line-height:1.3;color:#ccc;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding-top:2px;}
.mh-d-rec{font-size:12px;font-weight:700;color:#cd5c5c;font-variant-numeric:tabular-nums;}
.mh-d-rec i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#cd5c5c;margin-right:5px;vertical-align:1px;animation:mh-pulse 1.4s ease-in-out infinite;}
@keyframes mh-pulse{50%{opacity:.35;}}
.mh-d-g{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08);}
.mh-d-g i{display:block;height:100%;background:rgba(255,255,255,.35);}
.mh-d-g.is-full i{background:#8fbc8f;}
/* Point Outlook (spec-outlook.json « calendarCell ») : 6 px dodgerblue collé au numéro, le « + » reste
   à droite ; le même sur is-sel, is-todo et is-today. Seulement sur un jour incomplet avec un
   rendez-vous encore ouvert ; aucun chiffre ni infobulle (le nombre va dans l'aria-label de la case). */
.mh-d-ol{display:block;width:6px;height:6px;border-radius:50%;background:#1e90ff;flex:none;margin-right:auto;}

.mh-d.is-today{box-shadow:inset 0 0 0 2px #1e90ff;}
.mh-d.is-today .mh-d-n{background:#1e90ff;color:#fff;border-radius:10px;padding:0 7px;}
.mh-d.is-we,.mh-d.is-hol,.mh-d.is-off,.mh-d.is-before,.mh-d.is-outside{background:#303030;}
.mh-d.is-off{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px);}
.mh-d.is-vac{background:rgba(143,188,143,.20);box-shadow:inset 4px 0 0 #8fbc8f;}
.mh-d.is-vac .mh-d-l{color:#d6ead6;}
.mh-d.is-half{background:linear-gradient(to bottom,rgba(143,188,143,.22) 0,rgba(143,188,143,.22) 50%,#3a3a3a 50%);box-shadow:inset 4px 0 0 #8fbc8f;}
.mh-d.is-half .mh-d-l{color:#d6ead6;}
.mh-d.is-pending{background:rgba(143,188,143,.08);box-shadow:inset 0 0 0 1px rgba(143,188,143,.9);border:1px dashed #8fbc8f;}
.mh-d.is-pending .mh-d-l{color:#d6ead6;}
.mh-d.is-sick{background:rgba(255,140,0,.18);box-shadow:inset 4px 0 0 #ff8c00;}
.mh-d.is-sick .mh-d-l{color:#ffd9a8;}
.mh-d.is-todo{background:rgba(205,92,92,.10);}
.mh-d.is-todo .mh-d-n,.mh-d.is-todo-soft .mh-d-n{color:#cd5c5c;}
.mh-d.is-todo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#cd5c5c;}
.mh-d.is-future .mh-d-top,.mh-d.is-future .mh-d-h,.mh-d.is-future .mh-d-l{opacity:.45;}
.mh-d.is-sel{background:#fff;color:#222;box-shadow:none;}
.mh-d.is-sel .mh-d-n{color:#222;}
.mh-d.is-sel .mh-d-l{color:#444;}
.mh-d.is-sel.is-today .mh-d-n{color:#fff;}
.mh-d.is-flash{background:rgba(30,144,255,.25);}
/* case choisie qui vient de recevoir une entrée : reste claire, texte foncé lisible */
.mh-d.is-sel.is-flash{background:#d6e9ff;}
.mh-d.is-out{visibility:hidden;pointer-events:none;}

/* Colonne Semaine : <b> total · <span class="mh-pos|mh-neg"> balance (droits 0–1) ; détail en title. */
.mh-w{position:relative;min-height:96px;border-radius:10px;background:#2f2f2f;box-shadow:inset 1px 0 0 rgba(255,255,255,.10);display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;padding:8px 12px;box-sizing:border-box;}
.mh-w b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;}
.mh-w span{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;}
.mh-w.is-now{background:#383838;box-shadow:inset 2px 0 0 #1e90ff;}
.mh-w.is-flash{background:rgba(30,144,255,.25);}

/* Légende : <span><i style="background:…"></i>Congé</span> ; « Rendez-vous Outlook » = <i class="mh-d-ol"></i>. */
.mh-legend{display:flex;flex-wrap:wrap;gap:16px;padding-top:10px;font-size:11px;color:#ccc;}
.mh-legend span{display:inline-flex;align-items:center;gap:6px;}
.mh-legend i{width:12px;height:12px;border-radius:3px;display:block;box-sizing:border-box;}
.mh-legend i.mh-d-ol{width:6px;height:6px;border-radius:50%;margin:3px;}

/* ---- bulle du jour (.mh-pop, ajoutée dans #mh-cal-wrap) — « la journée en une liste » (Piste B, 2026-10-26 ;
   planche docs/maquettes/mes-heures/project/BulleB.dc.html, classes b-… de la planche → mh-… ici).
   is-right (Lu–Me, flèche à gauche) · is-left (Je–Di, flèche à droite). La bulle reste dans l'écran : le JS
   la remonte au besoin et pose la flèche en face de la case (--mh-pop-ar) ; la liste grandit jusqu'à la hauteur
   de l'écran avant de défiler (--mh-list-max, 2026-10-28). */
.mh-pop{position:absolute;z-index:20;width:412px;max-width:calc(100vw - 32px);background:#444;border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.5);padding:14px;display:flex;flex-direction:column;gap:10px;box-sizing:border-box;color:#fff;text-align:left;}
.mh-pop::before{content:"";position:absolute;top:34px;top:var(--mh-pop-ar,34px);width:12px;height:12px;background:#444;transform:rotate(45deg);}
.mh-pop.is-right::before{left:-7px;border-left:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);}
.mh-pop.is-left::before{right:-7px;border-right:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.14);}
/* is-static : volet posé SOUS le calendrier quand #mh-cal-wrap fait moins de 1000 px (la bulle de 412 px ne
   tient plus à gauche d'un jeudi ; le JS l'y met en position relative) — pas de flèche, elle dépasserait de
   7 px sans montrer de case. */
.mh-pop.is-static::before{display:none;}
/* En-tête : [.mh-ini, page d'un collègue] .mh-pop-day · .mh-pop-tot (is-zero : 0:00 en gris) · ✕ */
.mh-pop-h{display:flex;align-items:center;gap:10px;min-height:28px;}
.mh-pop-day{flex:1;min-width:0;font-size:15px;font-weight:800;line-height:20px;}
.mh-pop-tot{font-size:15px;font-weight:800;line-height:20px;font-variant-numeric:tabular-nums;}
.mh-pop-tot.is-zero{color:#ccc;}
.mh-x{width:28px;height:28px;border-radius:50%;border:none;padding:0;margin:0;background:rgba(255,255,255,.08);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;}
.mh-x:hover{background:rgba(255,255,255,.16);}
.mh-x svg{width:14px;height:14px;}
/* Focus visible de tout ce qui se clique dans la bulle (les lignes : anneau intérieur, voir .mh-row-main). */
.mh-pop button:focus-visible,.mh-pop select:focus-visible{outline:2px solid #1e90ff;outline-offset:2px;}

/* La journée : .mh-list, dans l'ordre des heures ; elle défile une fois aussi haute que l'écran (--mh-list-max,
   posé par le JS ; 440 px sans lui) — plus de « + N autres ».
   Le padding de 2 px garde l'anneau de focus des lignes visible dans la zone qui défile ; la marge de −2 px
   (en `div.` : elle bat le reset des marges de .eui-scope) rend aux lignes la pleine largeur de la bulle,
   alignées sur « + Ajouter des heures », et l'écart de 6 px de la planche avant ce qui suit la liste.
   is-open : une ligne est ouverte dans la liste (modification, rendez-vous, collègue) — même hauteur que
   l'écran (sans le JS : 760 px) ; une longue journée défile encore. */
.mh-list{display:flex;flex-direction:column;gap:6px;max-height:440px;max-height:var(--mh-list-max,min(440px,55vh));overflow-y:auto;overscroll-behavior:contain;padding:2px;}
.mh-pop div.mh-list{margin:-2px;}
.mh-pop div.mh-list + div.mh-more-row,.mh-pop div.mh-list + div.mh-ed{margin-top:-4px;}
.mh-list.is-open{max-height:760px;max-height:var(--mh-list-max,min(760px,calc(100vh - 150px)));}
/* Ligne (.mh-row) = .mh-row-main (heures 44 px | texte) + .mh-row-r à droite (durée, pastille, Arrêter, Annuler).
   Ligne cliquable : .mh-row-main est un <button> étendu sous toute la ligne (::after) ; les boutons de droite
   passent au-dessus (z-index). Variantes : is-en (saisie, pleine) · is-ro (lecture seule) · is-new (ajoutée ou
   modifiée, 5 s) · is-ol (rendez-vous Outlook, pointillé) · is-over (chevauche, orange) · is-hit (survol de « Tout
   ajouter ») · is-rec (chrono, rouge) · is-gone (supprimée / ignorée, 5 s, « Annuler ») · is-abs (absence, verte :
   is-pending · is-sick · is-hol). */
.mh-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;min-height:52px;box-sizing:border-box;padding:3px 3px 3px 10px;border-radius:10px;border:1px solid transparent;background:#3a3a3a;color:#fff;font-size:13px;flex:none;}
.mh-row-main{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:10px;align-items:center;min-width:0;min-height:44px;}
button.mh-row-main{width:100%;background:transparent;border:0;padding:0;margin:0;color:inherit;font:inherit;text-align:left;cursor:pointer;}
button.mh-row-main::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:9px;}
.mh-pop button.mh-row-main:focus-visible{outline:none;}
button.mh-row-main:focus-visible::after{box-shadow:inset 0 0 0 2px #1e90ff;}
/* La colonne de droite laisse passer le clic vers la ligne (durée) ; seuls ses boutons le prennent, et le cadenas
   pour son infobulle « Facturée » (le JS transmet son clic à la ligne). Le texte passe au-dessus de la zone de
   clic (::after) pour que ses infobulles s'affichent (« ? » à vérifier, libellé coupé) : il reste dans le bouton. */
.mh-row-r{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:76px;pointer-events:none;}
.mh-row-r button,.mh-row-r [role="img"]{pointer-events:auto;}
button.mh-row-main > .mh-row-w{position:relative;z-index:1;}
.mh-row.is-en:not(.is-ro):hover{background:#404040;border-color:rgba(255,255,255,.14);}
.mh-row.is-new{background:rgba(30,144,255,.18);}
.mh-row-t{display:flex;flex-direction:column;font-variant-numeric:tabular-nums;}
.mh-row-t b{font-size:12.5px;font-weight:700;line-height:18px;color:#fff;}
.mh-row-t > span{font-size:12px;line-height:16px;color:#ccc;}
.mh-row-w{display:flex;flex-direction:column;min-width:0;}
.mh-row-l1,.mh-row-l2{display:flex;align-items:center;gap:5px;min-width:0;}
.mh-row-l1 b{font-size:13px;font-weight:700;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.mh-row-l2{font-size:12px;line-height:16px;color:#ccc;}
.mh-ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
/* « Client · Tâche » sur une ligne (rendez-vous, résultats) : chaque partie a au moins la moitié de la place
   (grille, place partagée à parts égales), la plus courte cède le reste ; « · » garde son espace (pre). */
.mh-ct{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,max-content);min-width:0;white-space:nowrap;}
.mh-ct-c,.mh-ct-t{overflow:hidden;text-overflow:ellipsis;min-width:0;}
.mh-ct-t{white-space:pre;}
.mh-row-cal{width:12px;height:12px;color:#ccc;flex:none;}
/* « ? » : tâche devinée à vérifier (infobulle) · étiquette de type, seulement si ce n'est pas Au Travail */
.mh-q{display:inline-flex;flex:none;color:#ccc;}
.mh-q svg{width:13px;height:13px;}
.mh-tag{flex:none;font-size:10.5px;font-weight:700;line-height:14px;padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.12);color:#fff;white-space:nowrap;}
.mh-row-d{display:inline-flex;align-items:center;gap:4px;padding-right:9px;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;}
.mh-row-d .mh-lock{margin-left:0;}
.mh-row-choose{color:#1e90ff;font-weight:600;}
/* Rendez-vous Outlook pas encore repris : pointillé ; pastille « + 3:00 » (44 px) bleue si sûre, grise sinon. */
.mh-row.is-ol{background:transparent;border:1px dashed rgba(255,255,255,.34);}
.mh-row.is-ol:hover{border-color:rgba(255,255,255,.55);}
.mh-row.is-over,.mh-row.is-over:hover{border-color:rgba(255,140,0,.85);}
.mh-row.is-over .mh-row-t b,.mh-row.is-over .mh-row-t > span{color:#ff8c00;}
.mh-row-d.is-over{color:#ff8c00;}
.mh-row.is-hit{background:rgba(30,144,255,.12);}
/* « Ajouter » (rendez-vous, trou) = .eui-btn .eui-btn-blue .is-sm, le même que l'« Ajouter » du formulaire (28.10) ;
   une tâche à vérifier garde son « ? » dans la ligne. Bord droit aligné sur les durées des heures notées (9 px). */
.mh-row-add{margin-right:6px;}
/* Chrono : ligne rouge (début, temps écoulé, « Arrêter ») */
/* Trou de la journée (entre deux heures notées, ≥ 15 min, hors rendez-vous Outlook) : même taille qu'une heure, hachuré,
   « Non noté » et « + 3:00 » (ouvre l'ajout sur ce créneau). Validé par Geoffrey le 26.10. */
.mh-row.is-gap{background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 6px,transparent 6px 12px);border:1px dashed rgba(255,255,255,.22);}
.mh-row.is-gap:hover{border-color:rgba(255,255,255,.45);}
.mh-row.is-gap .mh-row-l1 b{color:#ccc;}
/* Recouvrement de deux heures notées : bord orange, heures concernées en orange, bande « 0:30 compté deux fois »,
   et « dont 0:30 en double » sous le total du jour. */
.mh-row.is-dbl{box-shadow:inset 3px 0 0 #ff8c00;}
.mh-row-t .is-dbl{color:#ffb366;}
.mh-dbl{display:flex;align-items:center;gap:10px;min-height:26px;padding:0 12px;border-radius:8px;background:rgba(255,140,0,.12);color:#ffb366;font-size:12.5px;font-weight:700;flex:none;}
.mh-dbl-t{min-width:86px;font-variant-numeric:tabular-nums;}
.mh-pop-tot small{display:block;font-size:11px;font-weight:700;color:#ffb366;text-align:right;line-height:12px;}
.mh-row.is-rec{background:rgba(205,92,92,.14);border-color:rgba(205,92,92,.45);}
.mh-row-t > .mh-row-rec{display:inline-flex;align-items:center;gap:4px;color:#f0a3a3;font-weight:800;}
.mh-row-rec i{width:7px;height:7px;border-radius:50%;background:#cd5c5c;display:block;flex:none;animation:mh-pulse 1.4s ease-in-out infinite;}
/* « Arrêter » : taille de .eui-btn.is-sm comme les autres boutons de la bulle (28.10, l'ancien faisait 44 px). */
.mh-stop{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;padding:7px 13px;margin:0 6px 0 0;border:0;border-radius:25px;background:rgba(205,92,92,.32);color:#fff;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;}
.mh-stop svg{width:12px;height:12px;}
.mh-stop:hover{background:rgba(205,92,92,.45);}
.mh-stop:disabled{opacity:.45;cursor:not-allowed;}
/* « Annuler » (5 s) sur la ligne concernée ; ligne supprimée ou rendez-vous ignoré gardé à sa place (is-gone) */
.mh-row-undo{min-height:44px;border:none;border-radius:8px;background:none;padding:0 8px;margin:0;font:inherit;font-size:12.5px;font-weight:700;color:#1e90ff;cursor:pointer;}
.mh-row-undo:hover{text-decoration:underline;}
.mh-row.is-gone{background:transparent;border:1px dashed rgba(255,255,255,.18);}
.mh-row.is-gone .mh-row-t b,.mh-row.is-gone .mh-row-l1 b{color:#999;}
.mh-row.is-gone .mh-row-l2{color:#999;}
/* Absence du jour : ligne verte en tête (Valider / Modifier pour la direction) */
.mh-row.is-abs{background:rgba(143,188,143,.16);color:#d6ead6;padding-left:12px;}
.mh-row.is-abs .mh-row-main{grid-template-columns:minmax(0,1fr);}
.mh-row.is-abs .mh-row-l2{color:inherit;opacity:.85;}
.mh-row.is-abs .mh-row-r{min-width:0;padding-right:6px;}
.mh-row.is-abs.is-pending{background:rgba(143,188,143,.08);border:1px dashed #8fbc8f;}
.mh-row.is-abs.is-sick{background:rgba(255,140,0,.16);color:#ffd9a8;}
.mh-row.is-abs.is-hol{background:rgba(255,255,255,.08);color:#ddd;}
.mh-none{font-size:12.5px;color:#ccc;padding:4px 8px;}
.mh-none.is-todo{color:#cd5c5c;font-weight:700;}
.mh-lock{width:12px;height:12px;color:#999;vertical-align:-1px;margin-left:4px;}

/* Bas de la liste : « + Ajouter des heures · dès 16:00 » repliée (.mh-more) et « Tout ajouter · N » (.mh-all) */
.mh-more-row{display:flex;align-items:center;gap:8px;}
.mh-more{flex:1;display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;box-sizing:border-box;padding:0 12px 0 8px;margin:0;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#fff;font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer;}
.mh-more:hover{background:rgba(255,255,255,.05);}
.mh-more-i{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);display:inline-flex;align-items:center;justify-content:center;flex:none;}
.mh-more-i svg{width:14px;height:14px;stroke-width:2.4;}
.mh-more-r{margin-left:auto;font-size:12px;font-weight:600;color:#ccc;font-variant-numeric:tabular-nums;}
.mh-more-l,.mh-more-r{white-space:nowrap;}
.mh-more-l{overflow:hidden;text-overflow:ellipsis;min-width:0;}
.mh-more-row.has-all .mh-more-r{display:none;}
.eui-btn.mh-all{flex:none;}

/* Ligne ouverte en place (.mh-ed, cadre bleu) : nouvelle ligne, modification, rendez-vous à corriger, ligne d'un
   collègue. En-tête .mh-ed-h (.mh-ed-k « Ajouter des heures » / « Modifier » / titre du rendez-vous · type · ✕), champ
   tâche .mh-task (ou recherche .mh-srchw), 6 durées .mh-durs (nouvelle ligne), « De / à / soit » .mh-hrs, actions
   .mh-acts (ou .mh-confirm « Déjà facturée — … ? Oui · Non »). */
.mh-ed{display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:12px;border:1.5px solid #1e90ff;background:rgba(30,144,255,.07);box-sizing:border-box;flex:none;}
.mh-ed:focus{outline:none;}
.mh-ed-h{display:flex;align-items:center;gap:8px;min-height:28px;}
.mh-ed-k{flex:1;min-width:0;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;line-height:18px;}
.mh-ed-k svg{width:14px;height:14px;color:#1e90ff;flex:none;}
/* Type d'heures « Au Travail ▾ » : <select> natif en eui-select-pill, plus compact dans l'en-tête ; field-sizing :
   largeur du type affiché, pas de la plus longue option (Chrome/Edge ≥ 123 ; ailleurs la largeur native, sans casse). */
select.eui-select-pill.mh-type{field-sizing:content;max-width:170px;padding:5px 28px 5px 12px;background-position:right 9px center;font-size:12.5px;font-weight:600;color:#fff;color-scheme:dark;}
.mh-task{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;width:100%;min-height:50px;box-sizing:border-box;padding:7px 10px;margin:0;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:#3a3a3a;color:#fff;font:inherit;text-align:left;cursor:pointer;}
button.mh-task:hover{border-color:rgba(255,255,255,.3);}
.mh-task > svg{width:15px;height:15px;color:#ccc;}
.mh-task.is-ro{grid-template-columns:minmax(0,1fr);cursor:default;}
.mh-task-none{font-size:13px;font-weight:700;color:#1e90ff;}
/* Champ tâche en recherche (sans accents) : .mh-pick-g groupe (Récentes, Mes tâches, Tâches de KEL) · .mh-pick-i (is-sel = Entrée) */
.mh-srchw{display:flex;flex-direction:column;gap:4px;}
.mh-srch{position:relative;}
.mh-srch svg{position:absolute;left:11px;top:13px;width:14px;height:14px;color:rgba(255,255,255,.6);pointer-events:none;}
.mh-srch input{width:100%;box-sizing:border-box;height:40px;margin:0;padding:0 10px 0 33px;border-radius:10px;border:1px solid #1e90ff;box-shadow:0 0 0 3px rgba(30,144,255,.2);background:#3a3a3a;color:#fff;font:inherit;font-size:13px;outline:none;}
.mh-srch input::placeholder{color:rgba(255,255,255,.5);}
.mh-pick{display:flex;flex-direction:column;padding:4px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#3a3a3a;max-height:264px;overflow-y:auto;}
.mh-pick-g{font-size:10.5px;font-weight:700;line-height:14px;text-transform:uppercase;letter-spacing:.08em;color:#ccc;padding:6px 8px 2px;}
.mh-pick-i{display:block;flex:none;width:100%;box-sizing:border-box;min-height:32px;padding:7px 8px;margin:0;border:0;border-radius:7px;background:transparent;color:#fff;font:inherit;font-size:13px;line-height:18px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.mh-pick-i:hover{background:rgba(255,255,255,.08);}
.mh-pick-i.is-sel{background:#1e90ff;}
.mh-pick-i mark{background:transparent;color:inherit;font-weight:800;text-decoration:underline;}
.mh-pick-none{font-size:12.5px;color:#ccc;padding:7px 8px;}
/* 6 durées (nouvelle ligne) : un clic = ajouté ; le survol (is-hover) prévisualise « à » et « soit » */
.mh-durs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;}
.mh-dur{height:44px;margin:0;padding:0;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;cursor:pointer;}
.mh-dur.is-hover,.mh-dur:not(:disabled):hover{background:#1e90ff;border-color:#1e90ff;}
.mh-dur:disabled{opacity:.35;cursor:not-allowed;}
/* « De [ ] à [ ] soit [ ] » : .mh-tin (champ texte, ou <span> en consultation) · is-prev aperçu d'une durée ·
   is-chg changé par rapport à l'entrée d'origine ; `input.mh-tin` bat input[type=text] de styles.css. */
.mh-hrs{display:flex;align-items:center;gap:6px;min-height:34px;flex-wrap:wrap;}
.mh-hrs label,.mh-hrs-k{font-size:12.5px;color:#ccc;margin:0;}
.mh-tin,input.mh-tin{width:58px;height:34px;box-sizing:border-box;margin:0;padding:0 6px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:#3a3a3a;color:#fff;font:inherit;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:center;}
span.mh-tin{display:inline-flex;align-items:center;justify-content:center;}
.mh-tin.is-soit{width:52px;}
input.mh-tin::placeholder{color:rgba(255,255,255,.35);font-weight:400;}
input.mh-tin:focus{outline:none;border-color:#1e90ff;box-shadow:0 0 0 3px rgba(30,144,255,.2);}
.mh-tin.is-prev{color:#8cc4ff;border-style:dashed;border-color:rgba(30,144,255,.75);}
.mh-tin.is-chg{border-color:#1e90ff;background:rgba(30,144,255,.16);}
.eui-btn.mh-hrs-go{margin-left:auto;}
.mh-acts{display:flex;align-items:center;gap:8px;}
/* « Ajouter » / « Enregistrer » : petit bouton (is-sm) comme les autres de la bulle (28.10, l'ancien faisait 44 px). */
.eui-btn.mh-go{margin-left:auto;}
/* Confirmation en ligne (entrée facturée dans la ligne ouverte ; « Supprimer ? » dans le pied de la lightbox) */
.mh-confirm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px;border-radius:8px;background:rgba(205,92,92,.12);font-size:12px;color:#f0c0c0;}
.mh-confirm a,.mh-confirm button{border:none;background:none;padding:0;margin:0;font:inherit;font-weight:700;color:#fff;cursor:pointer;text-decoration:none;}
.mh-confirm a:hover,.mh-confirm button:hover{text-decoration:underline;}
.mh-ed .mh-confirm{min-height:44px;padding:0 10px;font-size:12.5px;}
.mh-ed .mh-confirm button{min-height:32px;padding:0 4px;}
/* Lien texte (« Supprimer » du pied de la lightbox Absence) */
.mh-link{color:#1e90ff;font-weight:600;text-decoration:none;font-size:12.5px;}
.mh-link:hover{text-decoration:underline;}
.mh-link.is-danger{color:#cd5c5c;}
.mh-future-btn{align-self:flex-start;}

/* ---- lightbox Congés : elium_ui_modal_open(['id'=>'mh-leave', …]) ----
   Onglets demander · annee (#mh-year-list) · valider (#mh-pending-list) · absence. Champs en .eui-field /
   .eui-grid2 / .eui-grid3, statut en .eui-segmented, compteur d'onglet en .eui-navtab-count(.is-unread). */
.mh-ym{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#ccc;padding:6px 0 4px;}
/* Ligne de l'année : dates | libellé | jours | statut (.mh-st) ; is-past grisée ; is-edit cliquable (droits ≤ 1) */
.mh-yr{display:grid;grid-template-columns:150px minmax(0,1fr) 56px 120px;gap:12px;align-items:center;padding:8px 10px;border-radius:8px;font-size:13px;}
.mh-yr:nth-child(2n){background:rgba(255,255,255,.03);}
.mh-yr.is-past{color:#999;}
.mh-yr.is-edit{cursor:pointer;}
.mh-yr.is-edit:hover{background:rgba(255,255,255,.06);}
.mh-yr-j{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}
/* Statut : ok (validé) · wait (en attente) · gift (offert) · hol (férié) · sick (maladie) · rec (récupération) */
.mh-st{justify-self:end;display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:4px 10px;font-size:11.5px;font-weight:700;white-space:nowrap;}
.mh-st i{width:7px;height:7px;border-radius:50%;display:block;box-sizing:border-box;}
.mh-st.ok{background:rgba(143,188,143,.18);color:#c9e3c9;} .mh-st.ok i{background:#8fbc8f;}
.mh-st.wait{background:rgba(143,188,143,.08);color:#c9e3c9;border:1px dashed #8fbc8f;} .mh-st.wait i{background:transparent;border:1px solid #8fbc8f;}
.mh-st.gift{background:rgba(143,188,143,.18);color:#c9e3c9;} .mh-st.gift i{background:#8fbc8f;}
.mh-st.hol{background:rgba(255,255,255,.08);color:#ddd;} .mh-st.hol i{background:#bbb;}
.mh-st.sick{background:rgba(255,140,0,.18);color:#ffd9a8;} .mh-st.sick i{background:#ff8c00;}
.mh-st.rec{background:rgba(30,144,255,.16);color:#b9dcff;} .mh-st.rec i{background:#1e90ff;}
/* Demande à valider : .mh-ini | « Vacances · 26–30 oct. · 4 j <small>· reste 13 j</small> » | Valider | Modifier */
.mh-reqrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:13px;}
.mh-reqrow > span{flex:1;min-width:0;}
.mh-reqrow small{color:#ccc;}
.mh-left{font-size:12.5px;color:#ccc;}
.mh-left b{color:#fff;}
/* Partie gauche du pied commun (.eui-foot) : « Il t'en restera X j », « Supprimer » + confirmation. */
.mh-modal-foot-l{margin-right:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;}
.eui-modal-card div.mh-modal-foot-l{margin-right:auto;}
/* La maquette espaçait ces listes par le gap du corps (10 px l'année, 8 px les demandes) : l'id peut être
   le .eui-body lui-même (5e argument de elium_ui_panel_open) ou un conteneur à l'intérieur. */
#mh-year-list{display:flex;flex-direction:column;gap:10px;}
#mh-pending-list{display:flex;flex-direction:column;gap:8px;}
/* #mh-req-form / #mh-abs-form posés DANS un .eui-body : `.eui-modal-main form` en fait une colonne flex
   sans écart — on lui rend le pas de 22 px du corps (README §10.9). */
#mh-leave .eui-body > form{flex:none;gap:22px;}
#mh-leave .eui-field > .eui-segmented{align-self:flex-start;}
/* Demi-journées (Journée · Après-midi / Matin) : segmenté compact, il tient dans une colonne .eui-grid3. */
#mh-req-form .eui-seg-item{padding:6px 12px;font-size:12px;}
/* Compteur de l'onglet « À valider » : teinte darkorange de la maquette (bouton « À valider · N » de la bande). */
#mh-tab-valider-n{background:rgba(255,140,0,.16);color:#ff8c00;}
#mh-leave .eui-field select{color-scheme:dark;cursor:pointer;}
#mh-leave .eui-field input[type=date],#mh-leave .eui-field input[type=time]{color-scheme:dark;}

@media (max-width:900px){
	.mh-band{grid-template-columns:minmax(0,1fr);}
	.mh-band-actions{justify-content:flex-start;}
	.mh-cal{grid-template-columns:repeat(7,minmax(0,1fr));}
	.mh-cal .mh-w,.mh-cal .mh-dow.is-week{display:none;}
}
@media (prefers-reduced-motion:reduce){
	.mh-d-rec i,.mh-row-rec i{animation:none;}
}