/* =====================================================================
   SignaFlow — Vue SITE : portage FIDÈLE du design system ProcessFlow
   (_work_claude/Graphisme/index.html + styles.css). Toutes les classes
   sont préfixées « pf- » → AUCUNE collision avec Bootstrap / design-system
   / style.css. La vue site ne dépend plus d'aucune surcouche : ce fichier
   est sa seule source de style. Tokens repris de charte.css (--accent…).
   ===================================================================== */

/* La page site est plein écran (rail + topbar globaux masqués via
   fullscreen-vt). On neutralise le padding de app-content et on laisse
   pf-app occuper 100vh. Scopé via :has(.pf-site) → n'affecte que cette vue. */
.app-shell.fullscreen-vt:has(.pf-site) .app-content {
  padding: 0 !important;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}
.app-shell.fullscreen-vt:has(.pf-site) .app-content > main {
  height: 100%;
  min-height: 0;
  display: block;
}
/* La charte reserve une gouttiere a droite du contenu (.app-main a un
   padding-right de 14 px) : elle a du sens quand le contenu est une carte
   posee sur le fond gris. Ici la vue occupe tout le cadre, et cette gouttiere
   se voyait comme une bande grise vide le long du bord droit — la barre du
   haut n'atteignait donc jamais le bord de la fenetre. */
.app-shell.fullscreen-vt:has(.pf-site) .app-main { padding-right: 0; }
/* La vue site tient exactement dans la fenêtre. Sans cette règle, le document
   garde une barre de défilement inutile qui réserve une bande vide à droite :
   la barre du haut n'irait alors pas jusqu'au bord. Sous 900 px la page
   redevient volontairement défilante, la règle ne s'y applique donc pas. */
/* v965 : une simple FENETRE .pf-modal.pf-site (posee sur une autre page pour
   heriter des jetons de la charte - la fenetre « Deplacer » de la fiche
   dossier) ne doit PAS geler le defilement de son hote : seule la vraie vue
   site (le shell, jamais une modale) declenche ce verrou. */
@media (min-width: 901px) {
  html:has(.pf-site:not(.pf-modal)), body:has(.pf-site:not(.pf-modal)) { overflow: hidden; }
}

/* v763 : les fenetres posees sur <body> (menu au curseur, fenetre d'import)
   vivent EN DEHORS de .pf-site — sans ces valeurs de repli, leurs fonds
   etaient transparents et le texte de la page passait au travers. */
:root {
  --pf-ease: cubic-bezier(.32,.72,0,1);
  --pf-border: rgba(60,60,67,.12);
  --pf-border-2: rgba(60,60,67,.20);
  --pf-surface: #fff; --pf-surface-2: #f4f5f8; --pf-surface-3: #eef0f5;
  --pf-text: #1d1d1f; --pf-text-2: #5c5c66; --pf-text-3: #9296a1;
  --pf-accent: #0a84ff; --pf-accent-press: #0060df;
  --pf-accent-soft: rgba(10,132,255,.12); --pf-accent-ring: rgba(10,132,255,.30);
}

.pf-site {
  --side: 384px;
  --pf-r-lg: 18px; --pf-r-md: 14px; --pf-r-sm: 11px; --pf-r-pill: 980px;
  --pf-ease: cubic-bezier(.32,.72,0,1);
  --pf-spring: cubic-bezier(.34,1.56,.64,1);
  --pf-sh-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 1px rgba(16,24,40,.04);
  --pf-sh-md: 0 6px 20px rgba(16,24,40,.07), 0 1px 3px rgba(16,24,40,.05);
  --pf-sh-lg: 0 18px 44px rgba(16,24,40,.14), 0 4px 12px rgba(16,24,40,.07);
  --pf-sh-acc: 0 8px 22px var(--accent-a34,rgba(10,132,255,.34));
  --pf-border: rgba(60,60,67,.12);
  --pf-border-2: rgba(60,60,67,.20);
  --pf-surface: #fff; --pf-surface-2: #f4f5f8; --pf-surface-3: #eef0f5; --pf-surface-hover: #e9ebf1;
  --pf-text: #1d1d1f; --pf-text-2: #5c5c66; --pf-text-3: #9296a1;
  --pf-accent: #0a84ff; --pf-accent-2: #3aa0ff; --pf-accent-press: #0060df;
  --pf-accent-soft: rgba(10,132,255,.12); --pf-accent-ring: rgba(10,132,255,.30);
  --pf-purple: #7c5cff; --pf-purple-soft: rgba(124,92,255,.14);
  --pf-green: #34c759; --pf-green-deep: #248a3d; --pf-green-soft: rgba(52,199,89,.16);
  --pf-gray-soft: rgba(120,120,128,.14);
  font-family: var(--font);
  color: var(--pf-text);
  letter-spacing: -0.011em;
}
.pf-site *, .pf-site *::before, .pf-site *::after { box-sizing: border-box; }
/* Reset en :where() (spécificité ZÉRO) : enlève le padding-left ~40px du <ol>
   du feed sans jamais écraser les composants pf- (ex. .pf-feed__item) ni les
   div de la modale Bootstrap. */
.pf-site :where(h1, h2, h3, h4, p, ol, ul, li, figure) { margin: 0; padding: 0; }
/* Resets en :where() → spécificité ZÉRO : ils servent de base mais ne priment
   JAMAIS sur les règles de classe (.pf-btn--primary, .pf-vtopen, .pf-brandmark…). */
:where(.pf-site button) { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
:where(.pf-site input, .pf-site select, .pf-site textarea) { font: inherit; color: inherit; }
:where(.pf-site a) { color: inherit; }
/* text-decoration en spécificité normale pour battre le soulignement Bootstrap des <a> */
.pf-site a { text-decoration: none; }
.pf-site svg { display: block; }

/* ---------- 3. App shell ---------- */
/* La vue site occupe tout le cadre : aucun fond gris au-dessus de la barre du
   haut, ni sur les cotes. Les gouttieres tombent a zero, si bien que la colonne
   de gauche, la barre du haut et le plan de travail forment une seule surface
   continue plutot que trois blocs poses sur un fond. Ce sont les filets de
   0,5 px qui separent, pas des ecarts. */
.pf-app { height: 100%; padding: 0; }
.pf-shell {
  height: 100%;
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  transition: grid-template-columns .5s var(--pf-ease);
}
.pf-app.is-collapsed { --side: 0px; }
.pf-main-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0; background: var(--pf-surface); }

/* scrollbars discrètes */
.pf-detail, .pf-feed { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.18) transparent; }
.pf-detail::-webkit-scrollbar, .pf-feed::-webkit-scrollbar { width: 8px; height: 8px; }
.pf-detail::-webkit-scrollbar-thumb, .pf-feed::-webkit-scrollbar-thumb { background: rgba(0,0,0,.16); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
.pf-detail::-webkit-scrollbar-thumb:hover, .pf-feed::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.28); background-clip: padding-box; }

/* ---------- 4. Topbar ---------- */
.pf-topbar {
  flex: none;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 0 solid var(--pf-border);
  border-bottom-width: 0.5px;
  /* Meme retrait et meme alignement que l'en-tete de la maquette (padding
     10 px, contenu cale en haut). Le groupe de droite etait auparavant centre
     sur une barre de trois lignes : le bouton « Fermer » descendait d'une
     dizaine de pixels et sautait donc de place au passage du site a la
     maquette. Cale en haut, les deux boutons tombent a la meme hauteur. */
  padding: 10px 14px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  /* lot 145 : « backdrop-filter » cree un CONTEXTE D'EMPILEMENT. Tout ce que la
     barre contient est donc enferme dedans, quel que soit son z-index : le menu
     « Actions » passait derriere les tuiles d'etapes, qui viennent apres elle
     dans le document. On donne un rang a la barre elle-meme — c'est le
     contexte, pas le menu, qu'il fallait elever. */
  position: relative;
  z-index: 60;
}
.pf-topbar__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-topbar__titles { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-brandmark {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: #1d1d1f; color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  padding: 3px 9px 3px 6px; border-radius: var(--pf-r-pill); white-space: nowrap; max-width: 220px; overflow: hidden;
}
.pf-brandmark span { overflow: hidden; text-overflow: ellipsis; }
.pf-brandmark__dot { width: 11px; height: 11px; border-radius: 50%; background: linear-gradient(135deg,#ff5f6d,#ffc371); flex: none; }
.pf-topbar__title { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-topbar__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.pf-topbar__addr { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--pf-text-2); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-topbar__addr svg { width: 14px; height: 14px; color: var(--pf-text-3); flex: none; }
.pf-topbar__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf-topbar__right { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: nowrap; justify-content: flex-end; }

/* ── lot 143 : la barre ne grandit plus ─────────────────────────────────────
   Avec cinq references et un nom long, elle passait de 64 a 134 px : les
   puces s'empilaient sur trois lignes et poussaient tout le plan de travail.
   Trois regles suffisent : la barre est CALEE en hauteur, les references se
   resument a une puce + « +N », et les gestes rares sont dans un menu. */
.pf-topbar { align-items: center; }
.pf-topbar__left { flex: 1 1 auto; }
/* v754f (Hamza) : trois lignes — le titre, l'adresse (toujours visible), les references sur UNE ligne.
   Les references se montrent autant que la place le permet, puis « +N » (sf-ui.js, refchips-max="auto"). */
.pf-topbar__titles { flex: 1 1 auto; }
.pf-topbar__meta { flex-direction: column; align-items: flex-start; gap: 4px; flex-wrap: nowrap; overflow: hidden; width: 100%; }
.pf-topbar__refs { display: flex; align-items: center; gap: 6px; flex: none; width: 100%; max-width: 100%; overflow: hidden; white-space: nowrap; min-height: 0; }
.pf-topbar__refs:empty { display: none; }
.pf-topbar__refs .ref-chip { flex: none; margin-right: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-topbar__refs .ref-chip.is-cache { display: none; }
.pf-topbar__refs .pf-chip { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-refs-plus {
  border: 1px solid var(--pf-border); background: var(--pf-surface-2); color: var(--pf-text-2);
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--pf-r-pill);
  cursor: pointer; white-space: nowrap; transition: background .16s, color .16s;
}
.pf-refs-plus:hover { background: var(--pf-accent-soft); color: var(--pf-accent); border-color: transparent; }
/* la liste complete, au clic sur « +N » */
.pf-refs-pop {
  position: fixed; z-index: 4800; background: var(--pf-surface); border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md, 14px); box-shadow: var(--pf-sh-lg, 0 18px 44px rgba(16,24,40,.16));
  padding: 8px; min-width: 232px; max-width: 320px; max-height: 60vh; overflow: auto;
}
.pf-refs-pop__t { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pf-text-3); padding: 4px 8px 6px; }
.pf-refs-l { display: flex; align-items: baseline; gap: 10px; padding: 5px 8px; border-radius: 9px; }
.pf-refs-l:hover { background: var(--pf-surface-2); }
/* v759 : une reference se copie d'un clic (barre du projet et liste) */
.pf-refs-l[data-v] { cursor: pointer; }
.pf-refs-l[data-v]:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: -2px; }
.pf-topbar__refs .ref-chip[data-v] { cursor: pointer; transition: background .15s; }
.pf-topbar__refs .ref-chip[data-v]:hover { background: var(--accent-a20,rgba(10,132,255,.2)); }
.pf-refs-l__k { font-size: 11px; color: var(--pf-text-3); flex: none; min-width: 92px; }
.pf-refs-l__v { font-size: 12.5px; font-weight: 600; color: var(--pf-text); overflow-wrap: anywhere; }
/* l'etape en cours : bornee, elle ne pousse plus ses voisins */
.pg-capzone { display: inline-flex; align-items: center; max-width: 280px; overflow: visible; }   /* v754g : overflow visible, sinon le survol (translateY) coupait la pastille */
/* le menu des actions du projet */
.pf-menu { position: relative; flex: none; }
.pf-menu__liste {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 4800; min-width: 268px;
  background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: var(--pf-r-md, 14px);
  box-shadow: var(--pf-sh-lg, 0 18px 44px rgba(16,24,40,.16)); padding: 6px;
}
.pf-menu__liste[hidden] { display: none; }
.pf-menu__it {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  border: 0; background: none; padding: 9px 11px; border-radius: 10px; cursor: pointer; color: var(--pf-text);
}
.pf-menu__it:hover { background: var(--pf-surface-2); }
.pf-menu__it svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--pf-text-2); }
.pf-menu__it b { display: block; font-size: 13px; font-weight: 600; }
.pf-menu__it i { display: block; font-size: 11.5px; font-style: normal; color: var(--pf-text-3); margin-top: 1px; }
.pf-menu__it--fin svg, .pf-menu__it--fin b { color: var(--pf-accent); }
.pf-menu__filet { height: 1px; background: var(--pf-border); margin: 5px 6px; }
/* l'ecran se resserre : les mots s'effacent, les icones restent */
@media (max-width: 1180px) {
  .pf-menu__mot { display: none; }
  .pg-capzone { max-width: 168px; }
}
@media (max-width: 900px) {
  .pf-btn__mot { display: none; }
  .pf-topbar__refs { display: none; }
  .pf-brandmark { max-width: 120px; }
}

/* ── lot 144 : mentions et fil vu par un client ─────────────────────────── */
/* un compte sans acces au projet reste VISIBLE dans le selecteur : on voit
   pourquoi il ne peut pas etre mentionne au lieu de le chercher. */
.pf-mention__row.est-hors { opacity: .5; cursor: not-allowed; }
.pf-mention__row.est-hors:hover { background: transparent; }
.pf-mention__row.est-hors .pf-mention__role { color: #b42318; }
/* la phrase qui dit au client ce qu'il voit — un encadre, pas une note perdue */
.pf-composer__hint--client {
  background: var(--pf-accent-soft); color: var(--pf-text);
  border-radius: var(--pf-r-sm, 11px); padding: 9px 12px; line-height: 1.5;
}

/* ---------- 5. Boutons / chips ---------- */
.pf-icon-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--pf-text-2); transition: background .2s, color .2s, transform .18s var(--pf-spring); }
.pf-icon-btn svg { width: 19px; height: 19px; }
.pf-icon-btn:hover { background: var(--pf-surface-2); color: var(--pf-text); }
.pf-icon-btn:active { transform: scale(.9); }
.pf-icon-btn--close:hover { background: rgba(255,59,48,.12); color: #ff3b30; }
.pf-topbar__collapse { background: var(--pf-surface-2); }
.pf-app.is-collapsed .pf-topbar__collapse svg { transform: rotate(180deg); }
.pf-topbar__collapse svg { transition: transform .4s var(--pf-ease); }

.pf-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: var(--pf-r-sm); transition: transform .16s var(--pf-spring), background .2s, box-shadow .25s, filter .2s, border-color .2s; white-space: nowrap; }
.pf-btn svg { width: 16px; height: 16px; }
.pf-btn:active { transform: scale(.96); }
.pf-btn--sm { padding: 8px 14px; font-size: 13px; }
.pf-btn--ghost { background: var(--pf-surface); color: var(--pf-text); border: 0.5px solid var(--pf-border-2); box-shadow: var(--pf-sh-sm); }
.pf-btn--ghost:hover { background: var(--pf-surface-2); }
.pf-btn--primary { color: #fff; background: linear-gradient(180deg, var(--pf-accent-2), var(--pf-accent)); box-shadow: var(--pf-sh-acc); position: relative; overflow: hidden; }
.pf-btn--primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 45%); opacity: .9; pointer-events: none; }
.pf-btn--primary:hover { filter: brightness(1.06); box-shadow: 0 10px 26px var(--accent-a42,rgba(10,132,255,.42)); }
.pf-btn--success { color: #fff; background: linear-gradient(180deg, #43d267, var(--pf-green)); box-shadow: 0 8px 20px rgba(52,199,89,.3); position: relative; overflow: hidden; }
.pf-btn--success::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 45%); pointer-events: none; }
.pf-btn--success:hover { filter: brightness(1.05); box-shadow: 0 10px 26px rgba(52,199,89,.4); }
.pf-btn--danger { color: #ff3b30; background: var(--pf-surface); border: 0.5px solid rgba(255,59,48,.35); box-shadow: var(--pf-sh-sm); }
.pf-btn--danger:hover { background: rgba(255,59,48,.12); }

/* Pastille ronde du bouton de creation : le « + » se detache dans un disque
   blanc, comme la charte le fait pour les actions d'ajout. */
.pf-btn__plus { flex: none; width: 19px; height: 19px; border-radius: 50%; background: #fff; color: var(--pf-accent); display: grid; place-items: center; box-shadow: 0 1px 2px rgba(16,24,40,.18); }
.pf-btn__plus svg { width: 11px; height: 11px; }

.pf-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--pf-r-pill); line-height: 1; }
.pf-chip--ref { background: var(--pf-accent-soft); color: var(--pf-accent); }
.pf-chip--client { color: #fff; }

.pf-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--pf-r-pill); line-height: 1; }
.pf-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pf-badge--green { background: var(--pf-green-soft); color: var(--pf-green-deep); }
.pf-badge--blue  { background: var(--pf-accent-soft); color: var(--pf-accent); }
.pf-badge--gray  { background: var(--pf-gray-soft);  color: var(--pf-text-2); }
.pf-badge--gray::before { animation: none; }
.pf-badge--green::before, .pf-badge--blue::before { animation: pf-pulse 2s var(--pf-ease) infinite; }
@keyframes pf-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

/* ---------- 6. Collapse ---------- */
.pf-app.is-collapsed .pf-sidebar { opacity: 0; transform: translateX(-12px) scale(.98); pointer-events: none; }

/* ---------- 7. Sidebar ---------- */
.pf-sidebar {
  background: var(--pf-surface); border: 0 solid var(--pf-border); border-right-width: 0.5px;
  padding: 14px; display: flex; flex-direction: column; gap: 14px;
  min-height: 0; overflow: hidden; transition: opacity .4s var(--pf-ease), transform .4s var(--pf-ease);
}
.pf-preview { position: relative; flex: none; aspect-ratio: 16 / 9; border-radius: var(--pf-r-md); overflow: hidden; border: 0.5px solid var(--pf-border); background: linear-gradient(135deg,#cfd6e4,#aeb8cc); }
.pf-preview__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Placeholder aperçu = carré abstrait translucide (index.html .preview__img::after) */
.pf-preview__ph { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 12px, transparent 12px 24px); }
.pf-preview__ph::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.35); box-shadow: 0 0 0 10px rgba(255,255,255,.14); }
.pf-preview__badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(20,20,22,.72); color: #fff; font-size: 11.5px; font-weight: 500; padding: 4px 10px; border-radius: var(--pf-r-pill); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pf-preview__camera { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: rgba(20,20,22,.72); color: #fff; display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .25s var(--pf-spring), background .2s; margin: 0; }
.pf-preview__camera svg { width: 18px; height: 18px; }
.pf-preview__camera:hover { background: rgba(20,20,22,.9); transform: scale(1.08) rotate(-4deg); }
.pf-preview__camera:active { transform: scale(.92); }
.pf-preview__camera input { display: none; }

/* Nav pills */
.pf-navpills { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; flex: none; background: var(--pf-surface-2); padding: 4px; border-radius: var(--pf-r-pill); }
.pf-navpill { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--pf-text-2); background: transparent; padding: 7px 4px; border-radius: var(--pf-r-pill); border: 0.5px solid transparent; white-space: nowrap; transition: background .2s, color .2s, transform .16s var(--pf-spring), box-shadow .2s; }
.pf-navpill:hover { background: var(--pf-surface-hover); color: var(--pf-text); transform: translateY(-1px); }
.pf-navpill:active { transform: scale(.96); }
.pf-navpill.is-active { background: var(--pf-accent-soft); color: var(--pf-accent); box-shadow: inset 0 0 0 1px var(--pf-accent-ring); }

/* Bloc activités : composer (fixe) + feed (défile seul) — répond à « scroll
   uniquement dans les activités » */
.pf-actwrap { display: flex; flex-direction: column; gap: 11px; flex: 1 1 auto; min-height: 0; }

/* Composer */
.pf-composer { position: relative; flex: none; display: flex; flex-direction: column; gap: 8px; }
.pf-composer__hint { font-size: 11.5px; line-height: 1.45; color: var(--pf-text-3); padding-left: 2px; }
.pf-composer__row { display: flex; align-items: center; gap: 10px; }
.pf-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7c5cff, var(--accent,#0a84ff)); box-shadow: var(--pf-sh-sm); }
.pf-composer__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: var(--pf-surface-2); border: 0.5px solid var(--pf-border); border-radius: var(--pf-r-pill); padding: 4px 6px 4px 12px; transition: border-color .2s, box-shadow .2s, background .2s; }
.pf-composer__field:focus-within { background: var(--pf-surface); border-color: var(--pf-accent); box-shadow: 0 0 0 3.5px var(--pf-accent-ring); }
.pf-composer__at { flex: none; color: var(--pf-accent); font-weight: 700; font-size: 14px; line-height: 1; padding: 4px 5px; border-radius: 8px; transition: background .18s, transform .18s var(--pf-spring); }
.pf-composer__at:hover { background: var(--pf-accent-soft); }
.pf-composer__at:active { transform: scale(.88); }
.pf-composer__at.is-on { background: var(--pf-accent); color: #fff; }
.pf-composer__input { flex: 1; min-width: 0; background: none; font-size: 13.5px; padding: 7px 0; border: none; outline: none; }
.pf-composer__input::placeholder { color: var(--pf-text-3); }
.pf-composer__send { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pf-accent); color: #fff; display: grid; place-items: center; transition: transform .18s var(--pf-spring), background .2s; }
.pf-composer__send svg { width: 15px; height: 15px; }
.pf-composer__send:hover { background: var(--pf-accent-press); }
.pf-composer__send:active { transform: scale(.88); }

/* Feed */
/* ---------- Selecteur de mention ----------
   Reprise fidele de la charte : champ de recherche a icone, liste de fiches
   « avatar + identite + role ». Ancre sous le composer, il recouvre le debut
   du fil sans deplacer quoi que ce soit. */
.pf-mention {
  display: none;
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 7px);
  flex-direction: column; min-height: 0;
  background: var(--pf-surface);
  border: 0.5px solid var(--pf-border);
  border-radius: var(--pf-r-md);
  box-shadow: var(--pf-sh-lg);
  overflow: hidden;
  animation: pf-mention-in .22s var(--pf-spring);
}
.pf-mention.is-open { display: flex; }
@keyframes pf-mention-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.pf-mention__search { position: relative; flex: none; padding: 9px 10px; border-bottom: 0.5px solid var(--pf-border); }
.pf-mention__search svg { position: absolute; left: 21px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--pf-text-3); pointer-events: none; }
.pf-mention__input { width: 100%; font-size: 13px; padding: 7px 10px 7px 33px; border: 0.5px solid var(--pf-border); border-radius: var(--pf-r-sm); background: var(--pf-surface-2); outline: none; transition: background .2s, border-color .2s, box-shadow .2s; }
.pf-mention__input:focus { background: var(--pf-surface); border-color: var(--pf-accent); box-shadow: 0 0 0 3.5px var(--pf-accent-ring); }
.pf-mention__input::placeholder { color: var(--pf-text-3); }
.pf-mention__list { flex: 1 1 auto; min-height: 0; max-height: 264px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.18) transparent; }
.pf-mention__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 11px; cursor: pointer; border-bottom: 0.5px solid var(--pf-border); transition: background .15s; }
.pf-mention__row:last-child { border-bottom: none; }
.pf-mention__row:hover { background: var(--pf-surface-2); }
.pf-mention__row[hidden] { display: none; }
.pf-mention__av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; text-transform: uppercase; background: linear-gradient(135deg, var(--pf-purple), var(--pf-accent)); }
.pf-mention__id { min-width: 0; display: flex; flex-direction: column; }
.pf-mention__name { font-size: 12.5px; font-weight: 600; color: var(--pf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-mention__mail { font-size: 11px; color: var(--pf-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-mention__role { font-size: 10.5px; font-weight: 600; color: var(--pf-text-2); background: var(--pf-gray-soft); padding: 2px 7px; border-radius: var(--pf-r-pill); white-space: nowrap; }
.pf-mention__empty { padding: 18px 12px; text-align: center; font-size: 12.5px; color: var(--pf-text-3); }
.pf-mention__empty[hidden] { display: none; }

.pf-feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-right: 2px; }
/* v1118 : la pastille passe de 20 a 26 px — l'icone du module s'y lit enfin. La
   colonne, le trait du fil et le depart du trait suivent la meme mesure : rien
   ne se decale. */
.pf-feed__item { display: grid; grid-template-columns: 26px 1fr; gap: 9px; padding: 7px 2px; position: relative; animation: pf-fadeUp .5s var(--pf-ease) backwards; }
.pf-feed__item:nth-child(1){animation-delay:.04s}
.pf-feed__item:nth-child(2){animation-delay:.08s}
.pf-feed__item:nth-child(3){animation-delay:.12s}
.pf-feed__item:nth-child(4){animation-delay:.16s}
.pf-feed__item:nth-child(5){animation-delay:.20s}
.pf-feed__item:nth-child(6){animation-delay:.24s}
.pf-feed__item:nth-child(7){animation-delay:.28s}
.pf-feed__item:nth-child(n+8){animation-delay:.30s}
.pf-feed__item:not(:last-child)::after { content: ""; position: absolute; left: 14.25px; top: 35px; bottom: -3px; width: 1.5px; background: var(--pf-border); }
.pf-feed__dot { width: 26px; height: 26px; border-radius: 50%; background: var(--pf-accent-soft); color: var(--pf-accent); display: grid; place-items: center; z-index: 1; flex: none; }
.pf-feed__dot svg { width: 15px; height: 15px; }
.pf-feed__dot.is-comment { background: var(--pf-accent-soft); color: var(--pf-accent); }
.pf-feed__body { min-width: 0; padding-top: 1px; }
/* Qui parle, puis ce qui est dit : la ligne se lit dans l'ordre ou on la
   raconte a l'oral. Le nom et le texte restent sur la meme phrase, la date
   passe en dessous. Les couleurs et la pastille de la charte sont conservees. */
.pf-feed__say { font-size: 12.5px; line-height: 1.55; color: var(--pf-text); overflow-wrap: anywhere; }
.pf-feed__tag { display: inline; font-size: 11.5px; font-weight: 600; color: var(--pf-accent); background: var(--pf-accent-soft); padding: 1.5px 7px; border-radius: var(--pf-r-pill); margin-right: 5px; white-space: nowrap; }
/* Une personne mentionnee porte exactement la meme pastille que l'auteur de la
   ligne : meme taille, meme couleur, meme arrondi. Un nom est un nom, qu'il
   soit celui de qui parle ou de qui est appele. */
.pf-feed__mention { display: inline; font-size: 11.5px; font-weight: 600; color: var(--pf-accent); background: var(--pf-accent-soft); padding: 1.5px 7px; border-radius: var(--pf-r-pill); white-space: nowrap; }
.pf-feed__text { font-weight: 500; color: var(--pf-text); }
/* v1117 : la pastille de la ligne porte le MODULE — meme dessin que son onglet,
   en bleu sur fond bleu. Elle garde sa taille et sa place dans la colonne du
   fil : la ligne du temps ne bouge pas. Sans module (etape, projet, commentaire)
   elle reste la coche verte. La couleur pourra suivre le statut plus tard : tout
   part de cet attribut data-mod. */
/* un CERCLE, franc : la pastille d'un module a exactement la meme forme que la
   coche, seule la couleur change. */
.pf-feed__dot[data-mod]:not([data-mod=""]) { border-radius: 50%; }
.pf-feed__dot[data-mod]:not([data-mod=""]) svg { width: 16px; height: 16px; }
/* v1119 : le code couleur du fil. Bleu par defaut (le travail avance), VERT
   quand c'est acquis (valide, vise, signe, termine, pose), ROUGE quand ca
   coince (a modifier, refuse, supprime, annule, impossible, bloque). Memes
   teintes que le reste de l'application : le vert des etats finis, le rouge
   de « a corriger ». */
.pf-feed__dot[data-ton="ok"] { background: var(--pf-green-soft); color: var(--pf-green-deep); }
.pf-feed__dot[data-ton="ko"] { background: #fde8e8; color: #b42318; }
.pf-feed__dot[data-mod="probleme"] { background: rgba(180,35,24,.10); color: rgb(180,35,24); }   /* v755b : un signalement, toujours en rouge */
.pf-feed__dot[data-ton="pause"], .pf-feed__dot[data-mod="pause"] { background: rgba(109,79,214,.12); color: rgb(109,79,214); }   /* v759 : le stand by, en violet */
/* Les personnes appelees sont posees SOUS le message, en rangee, a la maniere
   de pieces jointes : on voit qui est concerne sans relire la phrase. Personne
   de mentionne, le conteneur reste vide et disparait de lui-meme : pas de
   rangee fantome ni de condition a maintenir dans la page. */
.pf-feed__joints { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pf-feed__joints:empty { display: none; }
/* La date ferme la ligne, seule sur la sienne : elle situe l'evenement une fois
   qu'on sait de quoi il s'agit, et n'encombre plus la lecture de la phrase. */
.pf-feed__time { display: block; margin-top: 3px; font-size: 11px; color: var(--pf-text-3); white-space: nowrap; }
.pf-feed__empty { padding: 24px 8px; text-align: center; color: var(--pf-text-3); font-size: 13px; }

/* ---- Commentaire : bulle de discussion ----------------------------------
   Un enregistrement du journal se lit d'un trait : pastille, date, phrase.
   Un commentaire est une prise de parole, il prend donc la forme d'une bulle.
   La colonne de gauche (pastille et filet de liaison) disparait : le filet
   raconte l'enchainement des etapes, il n'a rien a relier a une remarque.
   C'est aussi pourquoi le filet de la ligne PRECEDENTE est coupe : sinon il
   s'arreterait dans le vide, contre le bord de la bulle. */
.pf-feed__item--comm { display: block; padding: 6px 2px; }
.pf-feed__item--comm::after { display: none; }
.pf-feed__item:has(+ .pf-feed__item--comm)::after { display: none; }
.pf-bulle { background: var(--pf-surface); border: 0.5px solid var(--pf-border); border-radius: var(--pf-r-md); padding: 10px 12px; box-shadow: var(--pf-sh-sm); transition: background .28s var(--pf-ease), border-color .28s var(--pf-ease); }
.pf-bulle__head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
/* Les initiales reprennent la pastille des notes internes de la maquette
   (.mq-note-avatar) : bleu plein, lettres blanches. La pastille porte la
   personne, l'etiquette porte son nom ; deux fonds bleus clairs cote a
   cote se seraient confondus en une seule tache. */
.pf-bulle__av { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--pf-accent); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0; }
.pf-bulle__time { font-size: 11px; color: var(--pf-text-3); white-space: nowrap; }
.pf-bulle__star { margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--pf-text-3); transition: background .2s, color .2s, transform .18s var(--pf-spring); }
.pf-bulle__star svg { width: 15px; height: 15px; }
.pf-bulle__star:hover { background: var(--pf-surface-2); color: var(--pf-text-2); }
.pf-bulle__star:active { transform: scale(.9); }
.pf-bulle__star:disabled { opacity: .5; }
/* Pied de bulle : les personnes appelees a gauche, la corbeille a droite, en
   bas. L'etoile est en haut, la corbeille en bas : le geste qu'on repete et
   celui qui ne se rattrape pas n'ont pas a se toucher. Le pied n'a pas de
   marge propre, ses deux enfants la portent ; quand aucun des deux n'est
   affiche, il ne laisse donc aucun blanc derriere lui. */
.pf-bulle__foot { display: flex; align-items: flex-end; gap: 8px; }
.pf-bulle__foot .pf-feed__joints { flex: 1 1 auto; min-width: 0; }
/* Corbeille : meme bouton que celui d'un document (.pf-doccard__del), gris au
   repos et rouge au survol. Un geste irreversible ne se signale qu'au moment
   ou la main s'en approche, il ne colore pas la bulle en permanence. */
.pf-bulle__del { flex: none; margin-left: auto; margin-top: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--pf-text-3); transition: background .2s, color .2s, transform .18s var(--pf-spring); }
.pf-bulle__del svg { width: 15px; height: 15px; }
.pf-bulle__del:hover { background: rgba(255,59,48,.12); color: #ff3b30; }
.pf-bulle__del:active { transform: scale(.9); }
.pf-bulle__del:disabled { opacity: .5; }
.pf-bulle__text { font-size: 12.5px; line-height: 1.55; color: var(--pf-text); overflow-wrap: anywhere; }
/* Un message qui n'etait qu'une adresse (« @Prenom Nom » seul) n'a plus de
   corps : le paragraphe vide s'efface, la rangee de pieces jointes suffit. */
.pf-bulle__text:empty { display: none; }
.pf-bulle__text:empty + .pf-bulle__foot > * { margin-top: 0; }
/* Epingle : la teinte « attention » que l'application emploie deja
   (.pf-badge--orange, .pf-batbadge--orange, statut « Modifs demandees »).
   La charte n'a pas de jaune et interdit d'en inventer un : cette teinte
   chaude est la seule qui dise « important » dans tout le produit, la
   reprendre ici garde le vocabulaire des couleurs coherent. */
.pf-feed__item--comm.is-pinned .pf-bulle { background: #fff3e6; border-color: rgba(194,106,0,.28); }
.pf-feed__item--comm.is-pinned .pf-bulle__star { color: #c26a00; }
.pf-feed__item--comm.is-pinned .pf-bulle__star svg { fill: currentColor; }
.pf-feed__item--comm.is-pinned .pf-bulle__star:hover { background: rgba(194,106,0,.12); color: #c26a00; }

/* Info / export panels dans la sidebar */
.pf-sideblock { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; }
.pf-infoline { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 8px 2px; border-bottom: 0.5px solid var(--pf-border); }
.pf-infoline__label { color: var(--pf-text-3); font-weight: 600; flex: none; }
.pf-infoline__val { color: var(--pf-text); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pf-sideblock p { font-size: 12.5px; color: var(--pf-text-2); line-height: 1.5; }

/* Pied de sidebar */
.pf-sidebar__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; margin-top: 2px; border-top: 0.5px solid var(--pf-border); }
.pf-loadmore { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--pf-accent); padding: 6px 12px; border-radius: var(--pf-r-pill); transition: background .2s, transform .16s var(--pf-spring); }
.pf-loadmore svg { width: 14px; height: 14px; transition: transform .5s var(--pf-ease); }
.pf-loadmore:hover { background: var(--pf-accent-soft); }
.pf-loadmore:hover svg { transform: rotate(180deg); }
.pf-loadmore:active { transform: scale(.96); }
.pf-sidebar__date { flex: 1; font-size: 11px; color: var(--pf-text-3); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-sidebar__date strong { color: var(--pf-text-2); font-weight: 600; }

/* ---------- 8. Board + modules ---------- */
/* Les cartes de modules se detachent sur le blanc, dans le prolongement de la
   barre du haut : elles se lisent comme le sommaire du site, et non comme un
   contenu pose sur le plan de travail. Le gris ne commence qu'en dessous, avec
   le detail du module choisi — c'est lui qui s'arrondit en haut et qui garde
   une marge de chaque cote. */
.pf-board { flex: 1 1 auto; background: transparent; border: none; border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: 0; min-height: 0; overflow: hidden; container-type: inline-size; }
/* Le rembourrage vertical n'est pas decoratif : il laisse passer le
   soulevement au survol (translateY(-4px)) et son ombre, que le
   « overflow: hidden » du plan de travail couperait sinon. */
.pf-modules, .pf-modskel { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; padding: 14px 14px 10px; margin: 0; }
/* Board étroit : modules compacts (icône + texte en ligne) — évite le débordement
   maladroit sur 2 lignes, option « responsive icon+texte » de la charte §8 */
@container (max-width: 780px) {
  .pf-modules, .pf-modskel { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-module { flex-direction: row; align-items: center; gap: 11px; text-align: left; padding: 12px 14px; }
  .pf-module__icon { width: 40px; height: 40px; }
  .pf-module__label { flex: 1; }
  .pf-module__state { margin-left: auto; }
}
@container (max-width: 440px) { .pf-modules, .pf-modskel { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; } }
/* v1109 : squelette de la ligne d'onglets. Les onglets viennent du serveur, seul
   « Documents » est ecrit en dur : le temps du chargement il restait seul et, la
   rangee etirant ce qu'elle contient, il prenait toute la largeur. On montre donc
   la FORME a venir, comme ailleurs dans l'application. Meme grille que la vraie
   rangee (regles partagees ci-dessus) et meme gabarit de carte : les vraies cartes
   prennent exactement sa place, sans saut. */
.pf-modskel__c { background: var(--pf-surface); border: 0.5px solid var(--pf-border); border-radius: var(--pf-r-md);
  box-shadow: var(--pf-sh-sm); padding: 21px 8px 14px; min-height: 133px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pf-modskel__c .sk--ic { width: 46px; height: 46px; border-radius: 13px; }
@container (max-width: 780px) {
  .pf-modskel__c { flex-direction: row; align-items: center; gap: 11px; padding: 12px 14px; min-height: 0; }
}
.pf-module { position: relative; background: var(--pf-surface); border: 0.5px solid var(--pf-border); border-radius: var(--pf-r-md); padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; box-shadow: var(--pf-sh-sm); cursor: pointer; transition: transform .24s var(--pf-spring), box-shadow .24s, border-color .24s, background .24s; animation: pf-popIn .45s var(--pf-ease) backwards; }
.pf-module:nth-child(1){animation-delay:.02s} .pf-module:nth-child(2){animation-delay:.06s} .pf-module:nth-child(3){animation-delay:.10s} .pf-module:nth-child(4){animation-delay:.14s} .pf-module:nth-child(5){animation-delay:.18s} .pf-module:nth-child(6){animation-delay:.22s}
.pf-module:hover { transform: translateY(-4px); box-shadow: var(--pf-sh-lg); border-color: var(--pf-border-2); }
.pf-module:active { transform: translateY(-1px) scale(.99); }
.pf-module__icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--pf-surface-2); color: var(--pf-text-3); transition: transform .3s var(--pf-spring), background .3s, color .3s; }
.pf-module__icon svg { width: 24px; height: 24px; }
.pf-module:hover .pf-module__icon { transform: scale(1.09) rotate(-3deg); }
.pf-module__label { font-size: 12.5px; font-weight: 600; line-height: 1.2; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* label multi-lignes (ex. « Validation de document ») : s'adapte à la carte au lieu d'être tronqué */
.pf-module__label--wrap { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; text-overflow: ellipsis; font-size: 12px; overflow-wrap: anywhere; }
.pf-module__state { font-size: 11.5px; font-weight: 600; color: var(--pf-text-3); }
/* v758 (maquette « Version définitive ») : plus de mot d'état sur la tuile — la teinte de l'icône ET
   d'une pastille arrondie autour du mot du métier dit l'état : gris en attente, bleu en cours,
   vert fait, rouge à modifier, orange action, violet pause. Les compteurs de Validation et le
   compte de Documents gardent leur forme. */
.pf-module > .pf-module__state { padding: 4px 8px; border-radius: 9px; background: var(--pf-surface-2); }
.pf-module > .pf-module__state.sf-fam-cours { background: var(--pf-accent-soft); }
.pf-module > .pf-module__state.sf-fam-fini { background: var(--pf-green-soft); }
.pf-module > .pf-module__state.sf-fam-corriger { background: #fde8e8; }
.pf-module > .pf-module__state.sf-fam-act { background: #fff3e2; }
.pf-module > .pf-module__state.sf-fam-pause { background: #f1edff; }
.pf-module[data-sf-module="validation"] > .pf-module__state, .pf-module[data-sf-module="documents"] > .pf-module__state { padding: 0; background: transparent; }
.pf-module--done .pf-module__icon { background: var(--pf-green-soft); color: var(--pf-green-deep); }
.pf-module--done .pf-module__state { color: var(--pf-green-deep); }
.pf-module--active .pf-module__icon { background: var(--pf-accent-soft); color: var(--pf-accent); }
.pf-module--active .pf-module__state { color: var(--pf-accent); }
/* v773 : les deux onglets « speciaux » (hors flux de production) portent leur couleur
   d'identite en permanence — jamais gris. Violet pour Validation de document (la teinte
   de son etat « en cours de traitement »), ambre dossier pour Documents. Regles placees
   apres --done/--active pour primer sur le statut, et avant .is-selected pour que la
   selection (icone bleue pleine) garde le dernier mot. */
/* v758 : l'icône suit la même teinte que la pastille (la famille de l'état), pas seulement terminée / en cours */
.pf-module:not([data-sf-module="validation"]):not([data-sf-module="documents"]):has(> .pf-module__state.sf-fam-cours) .pf-module__icon { background: var(--pf-accent-soft); color: var(--pf-accent); }
.pf-module:not([data-sf-module="validation"]):not([data-sf-module="documents"]):has(> .pf-module__state.sf-fam-fini) .pf-module__icon { background: var(--pf-green-soft); color: var(--pf-green-deep); }
.pf-module:not([data-sf-module="validation"]):not([data-sf-module="documents"]):has(> .pf-module__state.sf-fam-corriger) .pf-module__icon { background: #fde8e8; color: #b42318; }
.pf-module:not([data-sf-module="validation"]):not([data-sf-module="documents"]):has(> .pf-module__state.sf-fam-act) .pf-module__icon { background: #fff3e2; color: #c26a00; }
.pf-module:not([data-sf-module="validation"]):not([data-sf-module="documents"]):has(> .pf-module__state.sf-fam-pause) .pf-module__icon { background: #f1edff; color: #6d4fd6; }
.pf-module[data-sf-module="validation"] .pf-module__icon { background: #f1edff; color: #6d4fd6; }
.pf-module[data-sf-module="documents"] .pf-module__icon { background: #fdf3e2; color: #b06f00; }
.pf-module__count { min-width: 22px; padding: 1px 8px; border-radius: var(--pf-r-pill); background: var(--pf-surface-2); color: var(--pf-text-3); font-size: 12px; font-weight: 700; }
.pf-module__count--plein { background: var(--pf-accent-soft); color: var(--pf-accent); }   /* v759 : « n fichiers » en bleu des qu'il y en a (Hamza) */
.pf-module.is-selected { border-color: transparent; box-shadow: 0 0 0 2px var(--pf-accent), var(--pf-sh-md); background: linear-gradient(180deg, var(--accent-a7,rgba(10,132,255,.07)), var(--pf-surface) 70%); transform: translateY(-2px); }
.pf-module.is-selected .pf-module__icon { background: linear-gradient(180deg, var(--pf-accent-2), var(--pf-accent)); color: #fff; }   /* v758 : plus d'ombre bleue sous l'icone (Hamza) */

/* ---------- 9. Detail ---------- */
/* Le detail EST le plan de travail : c'est lui qui porte le gris, l'arrondi du
   haut et la marge laterale, alignee sur celle des cartes de modules. Il
   descend jusqu'au bas de la fenetre, donc aucun arrondi en bas. */
.pf-detail { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--pf-surface-2); border: none; border-radius: var(--pf-r-md) var(--pf-r-md) 0 0; padding: 16px 20px 20px; margin: 4px 14px 0; }
.pf-detail__inner { display: flex; flex-direction: column; gap: 18px; animation: pf-sceneIn .5s var(--pf-ease) backwards; }
.pf-detail__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Le titre du module est un reperage, pas le contenu : il descend d'un cran,
   son icone suit, et le bouton d'action redevient l'element le plus lisible de
   la ligne. */
.pf-detail__title { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; letter-spacing: -0.015em; }

/* v757 — L'EN-TÊTE D'ÉTAPE EN TROIS CASES NOMMÉES (maquette V3, Hamza) : Contenu · Étape · Dans le projet,
   dans un seul bloc ; seule la case Étape se clique ; la troisième n'apparaît que si elle a quelque chose
   à dire. Monté par sf-passage.js autour de la pastille [data-sf-etpill]. */
.pf-etbloc { display: inline-flex; align-items: stretch; margin-left: auto; border: 0.5px solid var(--pf-border-2); border-radius: 12px; background: var(--pf-surface); overflow: hidden; box-shadow: var(--pf-sh-sm); }
.pf-etbloc__c { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 13px; min-width: 0; border-left: 0.5px solid var(--pf-border); }
.pf-etbloc__c:first-child, .pf-etbloc__c[hidden] + .pf-etbloc__c { border-left: 0; }
.pf-etbloc__c[hidden] { display: none; }
.pf-etbloc__c > small { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pf-text-3); line-height: 1; }
/* la case Contenu : les compteurs deviennent des mots avec un point de couleur (plus de pastilles pleines) */
.pf-etbloc .pf-maqetats { margin-left: 0; gap: 10px; }
.pf-etbloc .pf-maqetat { background: transparent !important; padding: 0; font-size: 12.5px; font-weight: 700; gap: 6px; }
.pf-etbloc .pf-maqetat i { display: none; }
.pf-etbloc .pf-maqetat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
/* la case Étape : la pastille existante, sans son cadre (c'est le bloc qui l'encadre) */
.pf-etbloc .pf-etpill { margin: 0; padding: 0; border: 0; background: transparent; font-size: 12.5px; box-shadow: none; }
.pf-etbloc .pf-etpill:hover { box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
/* v758 : toute la case « Étape » se clique (sf-passage relaie le clic a la pastille) */
.pf-etbloc__c--etape { cursor: pointer; transition: background .15s; }
.pf-etbloc__c--etape:hover { background: var(--pf-surface-2); }
.pf-etbloc__c--etape:hover .pf-etpill { text-decoration: underline; text-underline-offset: 3px; }
.pf-etbloc .pf-etpill small { display: none; }
/* la case Dans le projet */
/* v758 : plus de case « Dans le projet » (la barre du haut et les rubans de la frise disent la place de l'étape) */
@media (max-width: 900px) { .pf-etbloc { margin-left: 0; flex-wrap: wrap; } }
.pf-detail__ic { width: 29px; height: 29px; border-radius: 9px; background: var(--pf-accent-soft); color: var(--pf-accent); display: grid; place-items: center; flex: none; }
.pf-detail__ic svg { width: 17px; height: 17px; }

/* ---------- Boutons éditeur ---------- */
.pf-cardgrid { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
/* 210px = même largeur que le bouton d'ouverture de la fiche VT (.pf-vtcard__left)
   → bouton d'ouverture STRICTEMENT identique partout (VT et Maquette) */
.pf-cardgrid .pf-editorcard { flex: 0 1 210px; }
.pf-editorcard { position: relative; overflow: hidden; background: var(--pf-surface); border: 0.5px solid var(--pf-border-2); border-radius: var(--pf-r-md); padding: 22px 18px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; box-shadow: var(--pf-sh-sm); cursor: pointer; min-height: 206px; transition: transform .26s var(--pf-spring), box-shadow .26s var(--pf-ease), border-color .26s; animation: pf-fadeUp .5s var(--pf-ease) backwards; }
.pf-editorcard__ver { position: absolute; top: 13px; left: 13px; font-size: 11px; font-weight: 700; letter-spacing: .01em; padding: 3px 9px; border-radius: var(--pf-r-pill); background: rgba(255,255,255,.22); color: #fff; }
.pf-editorcard__pill { font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 13px; border-radius: var(--pf-r-pill); display: inline-flex; align-items: center; gap: 6px; }
.pf-editorcard__pill svg { width: 14px; height: 14px; }
.pf-editorcard__pill--white { background: #fff; color: var(--pf-accent); box-shadow: var(--pf-sh-sm); }
/* v715 — la grande tuile d'ouverture ne SE DEPLACE plus au survol (retour
   utilisateur : le bond vers le haut gene, il decale ce qu'on vise). Elle
   reagit par l'ombre et la bordure, qui suffisent a dire "cliquable", et
   toute l'animation INTERIEURE est conservee : l'icone grandit et pivote,
   la fleche avance. L'appui garde son enfoncement, sans montee. */
.pf-editorcard:hover { box-shadow: var(--pf-sh-lg); border-color: var(--pf-accent-ring, rgba(10,132,255,.30)); }
.pf-editorcard:active { transform: scale(.985); transition-duration: .1s; }
.pf-editorcard__ic { position: relative; overflow: hidden; width: 66px; height: 66px; border-radius: 18px; display: grid; place-items: center; background: var(--pf-surface-2); color: var(--pf-text-2); box-shadow: var(--pf-sh-sm); transition: transform .32s var(--pf-spring), box-shadow .3s; }
.pf-editorcard__ic svg { width: 31px; height: 31px; }
.pf-editorcard:hover .pf-editorcard__ic { transform: scale(1.08) rotate(-3deg); }
.pf-editorcard__ic--file { background: none; box-shadow: none; }
.pf-editorcard__ic--file svg { width: 48px; height: 48px; }
.pf-editorcard__label { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.pf-editorcard__sub { font-size: 12px; color: var(--pf-text-2); line-height: 1.35; }
.pf-editorcard__go { position: absolute; top: 13px; right: 13px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pf-surface-2); color: var(--pf-text-3); box-shadow: var(--pf-sh-sm); transition: transform .3s var(--pf-spring), background .25s, color .25s; }
.pf-editorcard__go svg { width: 16px; height: 16px; transition: transform .3s var(--pf-spring); }
.pf-editorcard:hover .pf-editorcard__go { transform: scale(1.12); }
.pf-editorcard:hover .pf-editorcard__go svg { transform: translateX(1.5px); }
.pf-editorcard--primary { border-color: transparent; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.20), transparent 42%), linear-gradient(180deg, var(--pf-accent-2), var(--pf-accent)); box-shadow: var(--pf-sh-acc); }
.pf-editorcard--primary:hover { filter: brightness(1.04); box-shadow: 0 14px 32px var(--accent-a45,rgba(10,132,255,.45)); }
.pf-editorcard--primary .pf-editorcard__ic { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
.pf-editorcard--primary .pf-editorcard__label { color: #fff; }
.pf-editorcard--primary .pf-editorcard__sub { color: rgba(255,255,255,.85); }
.pf-editorcard--primary .pf-editorcard__go { background: rgba(255,255,255,.22); color: #fff; box-shadow: none; }
.pf-editorcard--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); pointer-events: none; opacity: 0; }
.pf-editorcard--primary:hover::after { animation: pf-sheen .8s var(--pf-ease); }
@keyframes pf-sheen { 0% { left: -60%; opacity: 0; } 18% { opacity: 1; } 100% { left: 135%; opacity: 0; } }

/* Carte « éditeur » (prestataire) */
.pf-prestataire { align-self: center; margin-left: auto; display: flex; align-items: center; gap: 10px; background: var(--pf-surface); border: 0.5px solid var(--pf-border); border-radius: var(--pf-r-md); box-shadow: var(--pf-sh-sm); padding: 9px 13px; }
.pf-prestataire__av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7c5cff, var(--accent,#0a84ff)); box-shadow: var(--pf-sh-sm); }
.pf-prestataire__tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-prestataire__role { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pf-text-3); }
.pf-prestataire__name { font-size: 13.5px; font-weight: 600; color: var(--pf-text); white-space: nowrap; }

/* Documents / empty / doclist */
.pf-divider { height: 0.5px; background: var(--pf-border); margin: 2px 0; }
.pf-docsblock { display: flex; flex-direction: column; gap: 14px; }
.pf-docsblock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf-docsblock__head h3 { font-size: 14px; font-weight: 700; }
.pf-empty { padding: 30px; text-align: center; color: var(--pf-text-3); font-size: 13px; background: var(--pf-surface); border: 1px dashed var(--pf-border-2); border-radius: var(--pf-r-md); }
.pf-doclist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pf-doccard { background: var(--pf-surface); border: 0.5px solid var(--pf-border-2); border-radius: var(--pf-r-sm); padding: 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--pf-sh-sm); transition: transform .2s var(--pf-spring), box-shadow .2s; animation: pf-fadeUp .45s var(--pf-ease) backwards; cursor: pointer; }
.pf-doccard:hover { transform: translateY(-3px); box-shadow: var(--pf-sh-md); }
.pf-doccard > div { min-width: 0; flex: 1; }
.pf-doccard__ic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--pf-accent-soft); color: var(--pf-accent); display: grid; place-items: center; }
.pf-doccard__ic svg { width: 20px; height: 20px; }
.pf-doccard__name { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pf-text); text-decoration: none; }
.pf-doccard__meta { font-size: 12px; color: var(--pf-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* #285 — un document dont le fichier n'est jamais arrivé doit se voir au premier
   coup d'œil : le suffixe texte était avalé par l'ellipse de .pf-doccard__meta. */
.pf-badge--red { background: rgba(255,59,48,.12); color: #ff3b30; }
.pf-badge--red::before { animation: pf-pulse 2s var(--pf-ease) infinite; }
/* Orange : etat intermediaire « en attente d'action » (a viser, a modifier).
   Meme teinte que .pf-batbadge--orange deja utilise sur la page detail. */
.pf-badge--orange { background: #fff3e6; color: #c26a00; }
.pf-badge--orange::before { animation: pf-pulse 2s var(--pf-ease) infinite; }
.pf-doccard__sub { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 2px; }
.pf-doccard__sub .pf-doccard__meta { flex: 1 1 auto; min-width: 0; }
.pf-doccard__flag { flex: none; font-size: 11.5px; padding: 3px 9px; animation: pf-flagIn .34s var(--pf-spring) backwards; animation-delay: .18s; }
@keyframes pf-flagIn { from { opacity: 0; transform: translateX(-6px) scale(.9); } to { opacity: 1; transform: none; } }
.pf-doccard.is-missing { border-color: rgba(255,59,48,.32); background: linear-gradient(0deg, rgba(255,59,48,.035), rgba(255,59,48,.035)), var(--pf-surface); }
.pf-doccard.is-missing:hover { box-shadow: 0 6px 20px rgba(255,59,48,.14), 0 1px 3px rgba(16,24,40,.05); }
.pf-doccard.is-missing .pf-doccard__ic { background: rgba(255,59,48,.12); color: #ff3b30; }
.pf-doccard.is-missing .pf-doccard__name { color: var(--pf-text-2); }
/* Un document ouvert depuis la recherche : la carte se signale, puis se tait. */
.pf-doccard.is-flash { border-color: var(--pf-accent); box-shadow: 0 0 0 3px var(--pf-accent-ring), var(--pf-sh-md); animation: pf-docFlash 2.4s var(--pf-ease); }
@keyframes pf-docFlash { 0%, 100% { background: var(--pf-surface); } 10%, 55% { background: var(--pf-accent-soft); } }
@media (prefers-reduced-motion: reduce) { .pf-doccard.is-flash { animation: none; background: var(--pf-accent-soft); } }
/* v805 : meme signal pour une ligne de pile de module (PDF genere) et une
   carte de validation (BAT envoye) — on arrive de la maquette, l'element
   fraichement cree se montre, puis se tait. */
.pf-moddoc.is-flash, .pf-valcard.is-flash { border-color: var(--pf-accent); box-shadow: 0 0 0 3px var(--pf-accent-ring), var(--pf-sh-md); animation: pf-docFlash 2.4s var(--pf-ease); border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .pf-moddoc.is-flash, .pf-valcard.is-flash { animation: none; background: var(--pf-accent-soft); } }
/* v806 : la carte EPHEMERE de generation — elle pulse a l'endroit exact ou le
   document va apparaitre, puis laisse place au vrai (mis en avant). */
.pf-genghost { display: flex; align-items: center; gap: 10px; border: 1.5px dashed var(--pf-accent); background: var(--pf-accent-soft);
  border-radius: 12px; padding: 13px 14px; margin: 4px 0; color: var(--pf-text-2); font-size: .82rem; font-weight: 600;
  animation: pfGhostPulse 1.6s ease-in-out infinite; }
.pf-genghost .spinner-border { width: 1rem; height: 1rem; border-width: 2px; color: var(--pf-accent); flex: none; }
@keyframes pfGhostPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.pf-genghost.is-err { animation: none; border-color: rgba(255,59,48,.45); background: rgba(255,59,48,.06); color: #8a3b3b; }
.pf-genghost__x { border: 0; background: transparent; color: #b06060; font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0 2px; margin-left: auto; flex: none; }
@media (prefers-reduced-motion: reduce) { .pf-genghost { animation: none; } }
/* v807 : engrenage des cartes de validation (menu d'options, extensible) */
.pf-valgear { position: relative; display: inline-block; }
.pf-valgear__btn { padding-left: 8px; padding-right: 8px; }
.pf-valgear__menu { display: none; position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 40; min-width: 210px;
  background: var(--pf-surface, #fff); border: 1px solid var(--pf-border, #e6e9ef); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(16,24,40,.18); padding: 5px; }
.pf-valgear__menu.open { display: block; }
.pf-valgear__menu button { display: flex; align-items: center; width: 100%; border: 0; background: transparent;
  border-radius: 8px; padding: 9px 10px; font-size: .8rem; font-weight: 600; cursor: pointer; color: var(--pf-text, #1d1d1f); }
.pf-valgear__menu button:hover { background: rgba(16,24,40,.05); }
.pf-valgear__menu button.is-danger { color: #c02b22; }
.pf-valgear__menu button.is-danger:hover { background: rgba(255,59,48,.09); }
.pf-doccard__del { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--pf-text-3); transition: background .2s, color .2s; }
.pf-doccard__del:hover { background: rgba(255,59,48,.12); color: #ff3b30; }

/* Champs formulaire */
.pf-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
.pf-field { display: flex; flex-direction: column; gap: 7px; position: relative; animation: pf-fadeUp .5s var(--pf-ease) backwards; }
.pf-field:nth-child(1){animation-delay:.05s} .pf-field:nth-child(2){animation-delay:.10s} .pf-field:nth-child(3){animation-delay:.15s} .pf-field:nth-child(4){animation-delay:.20s} .pf-field:nth-child(5){animation-delay:.25s} .pf-field:nth-child(n+6){animation-delay:.30s}
.pf-field--wide { grid-column: 1 / -1; }
.pf-field__label { font-size: 12.5px; font-weight: 600; color: var(--pf-text-2); }
.pf-field__control { background: var(--pf-surface); border: 0.5px solid var(--pf-border-2); border-radius: var(--pf-r-sm); padding: 11px 13px; font-size: 13.5px; font-weight: 500; width: 100%; transition: border-color .2s, box-shadow .2s; }
.pf-field__control:focus { border-color: var(--pf-accent); box-shadow: 0 0 0 3.5px var(--pf-accent-ring); outline: none; }
.pf-commentrow { display: flex; gap: 12px; align-items: center; }
.pf-commentrow input { flex: 1; min-width: 0; background: var(--pf-surface); border: 0.5px solid var(--pf-border-2); border-radius: var(--pf-r-sm); padding: 11px 14px; font-size: 13.5px; transition: border-color .2s, box-shadow .2s; }
.pf-commentrow input::placeholder { color: var(--pf-text-3); }
.pf-commentrow input:focus { border-color: var(--pf-accent); box-shadow: 0 0 0 3.5px var(--pf-accent-ring); outline: none; }
input[type=file].pf-field__control { padding: 7px 11px; min-width: 0; max-width: 100%; }
.pf-field__control::file-selector-button { border: 0; background: var(--pf-accent-soft); color: var(--pf-accent); font-weight: 600; border-radius: 8px; padding: 6px 12px; margin-right: 10px; cursor: pointer; font-size: 13px; transition: background .18s, color .18s; }
.pf-field__control::file-selector-button:hover { background: var(--pf-accent); color: #fff; }
.pf-notice { display: flex; align-items: center; gap: 12px; background: var(--pf-accent-soft); border: 0.5px solid var(--accent-a20,rgba(10,132,255,.2)); border-radius: var(--pf-r-sm); padding: 12px 14px; font-size: 13px; color: var(--accent-press,#0060df); line-height: 1.45; }
.pf-notice svg { width: 21px; height: 21px; flex: none; color: var(--pf-accent); }

/* ---------- Fiche VT ---------- */
.pf-vtcard { background: var(--pf-surface); border: 0.5px solid var(--pf-border); border-radius: var(--pf-r-md); box-shadow: var(--pf-sh-sm); padding: 18px; display: flex; flex-direction: column; gap: 16px; animation: pf-fadeUp .5s var(--pf-ease) backwards; }
.pf-vtcard__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pf-vtcard__title { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; min-width: 0; flex-wrap: wrap; }
.pf-vtcard__ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(180deg, var(--pf-accent-2), var(--pf-accent)); color: #fff; display: grid; place-items: center; box-shadow: var(--pf-sh-acc); }
.pf-vtcard__ic svg { width: 19px; height: 19px; }
.pf-vtcard__actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; margin-left: auto; }
.pf-pillbtn { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; padding: 9px 14px; border-radius: var(--pf-r-sm); transition: transform .16s var(--pf-spring), background .2s, box-shadow .2s; }
.pf-pillbtn svg { width: 17px; height: 17px; }
.pf-pillbtn:active { transform: scale(.96); }
.pf-pillbtn--blue { background: var(--pf-accent-soft); color: var(--pf-accent); }
.pf-pillbtn--blue:hover { background: var(--accent-a18,rgba(10,132,255,.18)); }
.pf-pillbtn--purple { background: var(--pf-purple-soft); color: var(--pf-purple); }
.pf-pillbtn--purple:hover { background: rgba(124,92,255,.22); }
.pf-icon-btn--bordered { background: var(--pf-surface); border: 0.5px solid var(--pf-border-2); box-shadow: var(--pf-sh-sm); width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--pf-text-2); transition: background .2s, color .2s, transform .18s var(--pf-spring); }
.pf-icon-btn--bordered:hover { background: var(--pf-surface-2); color: var(--pf-text); }
.pf-icon-btn--bordered:active { transform: scale(.9); }
.pf-icon-btn--danger { background: var(--pf-surface); border: 0.5px solid rgba(255,59,48,.35); color: #ff3b30; box-shadow: var(--pf-sh-sm); width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, transform .18s var(--pf-spring); }
.pf-icon-btn--danger:hover { background: rgba(255,59,48,.12); }
.pf-icon-btn--danger:active { transform: scale(.9); }
.pf-icon-btn--bordered svg, .pf-icon-btn--danger svg { width: 18px; height: 18px; }
.pf-vtcard__body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
/* Colonne gauche = bouton d'ouverture (editorcard, MÊME composant/taille que la
   maquette) + actions valider/supprimer dessous (charte .vtcard__left) */
.pf-vtcard__left { flex: none; width: 210px; display: flex; flex-direction: column; gap: 10px; }
.pf-vtcard__left .pf-editorcard { width: 100%; min-height: 206px; }
.pf-vtcard__leftrow { display: flex; gap: 8px; align-items: center; }
.pf-vtcard__leftrow .pf-btn { flex: 1; justify-content: center; }
.pf-vtopen { flex: none; width: 172px; position: relative; overflow: hidden; border-radius: var(--pf-r-md); background: linear-gradient(180deg, var(--pf-accent-2), var(--pf-accent)); color: #fff; box-shadow: var(--pf-sh-acc); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 24px 20px; text-decoration: none; transition: transform .24s var(--pf-spring), box-shadow .26s var(--pf-ease), filter .2s; }
.pf-vtopen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 46%); pointer-events: none; }
.pf-vtopen::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 42%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg); pointer-events: none; opacity: 0; }
.pf-vtopen:hover::after { animation: pf-sheen .8s var(--pf-ease); }
/* v715 — meme regle que la grande tuile : le bouton bleu d'ouverture ne
   monte plus au survol, il s'eclaire et son ombre s'accentue. */
.pf-vtopen:hover { filter: brightness(1.05); box-shadow: 0 14px 32px var(--accent-a45,rgba(10,132,255,.45)); color: #fff; }
.pf-vtopen:active { transform: scale(.98); transition-duration: .1s; }
.pf-vtopen__ic { width: 60px; height: 60px; border-radius: 16px; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.pf-vtopen__ic svg { width: 30px; height: 30px; }
.pf-vtopen__label { font-size: 15px; font-weight: 700; line-height: 1.25; text-align: center; }
.pf-vtopen__go { position: absolute; top: 13px; right: 13px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); color: #fff; transition: transform .3s var(--pf-spring); }
.pf-vtopen__go svg { width: 16px; height: 16px; transition: transform .3s var(--pf-spring); }
.pf-vtopen:hover .pf-vtopen__go { transform: scale(1.12); }
.pf-vtopen:hover .pf-vtopen__go svg { transform: translateX(1.5px); }
.pf-vtpanel { flex: 1 1 340px; min-width: 0; background: var(--pf-surface-2); border: 0.5px solid var(--pf-border); border-radius: var(--pf-r-md); padding: 20px 22px; }
/* Bandeau d'etat du panneau gris : la puce se place tout en haut a droite. */
.pf-vtpanel__top { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.pf-vtpanel > .pf-vtpanel__top:empty { display: none; }
.pf-vtfield__val--rich { white-space: normal; }
.pf-vtfield__val--rich b, .pf-vtfield__val--rich strong { font-weight: 700; }
.pf-vtgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px 20px; }
.pf-vtfield { display: flex; gap: 11px; align-items: flex-start; min-width: 0; animation: pf-fadeUp .5s var(--pf-ease) backwards; }
.pf-vtfield:nth-child(1){animation-delay:.06s} .pf-vtfield:nth-child(2){animation-delay:.11s} .pf-vtfield:nth-child(3){animation-delay:.16s} .pf-vtfield:nth-child(4){animation-delay:.21s} .pf-vtfield:nth-child(5){animation-delay:.26s} .pf-vtfield:nth-child(6){animation-delay:.31s} .pf-vtfield:nth-child(n+7){animation-delay:.36s}
.pf-vtfield--wide { grid-column: 1 / -1; }
.pf-vtfield__ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--pf-surface); border: 0.5px solid var(--pf-border); color: var(--pf-text-2); display: grid; place-items: center; box-shadow: var(--pf-sh-sm); }
.pf-vtfield__ic svg { width: 18px; height: 18px; }
.pf-vtfield__ic--danger { color: #ff3b30; border-color: rgba(255,59,48,.3); }
.pf-vtfield__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 1px; }
.pf-vtfield__label { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--pf-text-3); text-transform: uppercase; }
.pf-vtfield__val { font-size: 13.5px; font-weight: 600; color: var(--pf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-vtfield--wide .pf-vtfield__val { white-space: normal; }
.pf-vtfield__val--muted { color: var(--pf-text-3); font-weight: 500; }
.pf-vtcard__foot { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; }

/* ---------- 10. Keyframes ---------- */
@keyframes pf-fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pf-popIn  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes pf-sceneIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pf-site *, .pf-site *::before, .pf-site *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 11. Responsive ---------- */
@media (min-width: 1700px) { .pf-site { --side: 420px; } .pf-modules, .pf-modskel { padding: 16px 18px 10px; } .pf-detail { margin: 4px 18px 0; padding: 18px 26px 22px; } }
@media (max-width: 900px) {
  .app-shell.fullscreen-vt:has(.pf-site) .app-content { height: auto; overflow: visible; }
  .pf-app { height: auto; min-height: 100%; }
  .pf-shell { display: flex; flex-direction: column; }
  .pf-main-col { order: 1; } .pf-sidebar { order: 2; overflow: visible; border-right-width: 0; border-top-width: 0.5px; }
  .pf-app.is-collapsed { --side: 384px; }
  .pf-app.is-collapsed .pf-sidebar { opacity: 1; transform: none; pointer-events: auto; }
  .pf-topbar__collapse { display: none; }
  .pf-feed { overflow: visible; } .pf-board { overflow: visible; } .pf-detail { overflow: visible; }
}
@media (max-width: 560px) {
  .pf-modules, .pf-modskel { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pf-fields, .pf-doclist { grid-template-columns: minmax(0,1fr); }
  .pf-vtcard__body { flex-direction: column; } .pf-vtopen { width: 100%; }
  .pf-vtgrid { grid-template-columns: minmax(0,1fr); }
  .pf-navpills { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 12. Modales & overlays (niveau body, charte) ---------- */
.pf-modal, .pf-overlay { position: fixed; inset: 0; z-index: 3000; display: none; }
.pf-modal.open, .pf-overlay.open { display: flex; align-items: center; justify-content: center; padding: 24px; }
.pf-modal__backdrop { position: absolute; inset: 0; background: transparent; animation: pf-fadeIn .25s var(--pf-ease); }
/* v709/v711 — VOILE des modales. Couleur SEULE, sans flou : le flou d'arriere
   plan se calcule apres la pose de la fenetre, on le voyait donc s'installer
   avec un temps de retard (effet desagreable signale a l'usage). Un voile net
   apparait d'un coup, et suffit a mettre la fenetre au premier plan. */
.pf-modal.open::before, .pf-overlay.open::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: rgba(17, 24, 39, .34);
  animation: pf-fadeIn .18s var(--pf-ease);
}
.pf-modal__dialog { position: relative; z-index: 1; width: min(640px, 100%); max-height: 100%; background: var(--pf-surface); border: 0.5px solid var(--pf-border); border-radius: var(--pf-r-lg); box-shadow: var(--pf-sh-lg); display: flex; flex-direction: column; overflow: hidden; animation: pf-modalIn .42s var(--pf-spring) backwards; }
/* M-E.9 : certains ecrans encadres portent trois colonnes (l'imprime, la
   saisie, la vigilance). A 1080 px ils en perdent une, et c'est toujours la
   meme qui tombe : celle qu'on regarde. Cette variante leur rend la place. */
.pf-overlay--large .pf-overlay__dialog { width: min(1780px, 100%); }
.pf-overlay__dialog { position: relative; z-index: 1; width: min(1080px, 100%); height: 100%; background: var(--pf-surface); border: 0.5px solid var(--pf-border); border-radius: var(--pf-r-lg); box-shadow: var(--pf-sh-lg); display: flex; flex-direction: column; overflow: hidden; animation: pf-modalIn .42s var(--pf-spring) backwards; }
.pf-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px 15px 18px; border-bottom: 0.5px solid var(--pf-border); flex: none; }
.pf-modal__title { display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--pf-text); }
.pf-modal__ic { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--pf-accent-soft); color: var(--pf-accent); display: grid; place-items: center; }
.pf-modal__ic svg { width: 17px; height: 17px; }
.pf-modal__ro { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--pf-text-3); }
.pf-modal__ro svg { width: 13px; height: 13px; }
/* v711 — bouton de fermeture : il portait une classe inexistante
   (.pf-btn--icon), donc ni couleur ni centrage — la croix etait invisible. */
.pf-modal__close { flex: none; width: 34px; height: 34px; padding: 0; gap: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pf-surface-2); color: var(--pf-text-3); cursor: pointer;
  border: .5px solid var(--pf-border); border-radius: 10px; }
.pf-modal__close:hover { background: var(--pf-surface-3, #eef0f4); color: var(--pf-text); }
.pf-modal__close:active { transform: scale(.94); }
.pf-modal__close svg { width: 17px; height: 17px; display: block; }
.pf-modal__body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-height: 0; }
.pf-modal__body textarea.pf-field__control { resize: vertical; min-height: 76px; font-family: inherit; line-height: 1.45; }
.pf-field__label--danger { color: #ff3b30; }
/* v709 — pied de modale : il etait DANS le corps, colle a la derniere carte
   et sans respiration. Il devient une vraie bande, avec filet et fond doux,
   comme l'en-tete : le bouton de sortie se voit, et la fenetre a une fin. */
.pf-modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 13px 18px; border-top: .5px solid var(--pf-border); background: var(--pf-surface-2);
  flex: none; }
.pf-overlay__body { position: relative; flex: 1; min-height: 0; background: var(--pf-surface-2); }
.pf-overlay__frame { width: 100%; height: 100%; border: 0; display: block; background: var(--pf-surface); }
.pf-overlay__spinner { display: none; }
.pf-overlay.loading .pf-overlay__spinner { display: block; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 3px solid var(--pf-accent-soft); border-top-color: var(--pf-accent); border-radius: 50%; animation: pf-spin .8s linear infinite; }
body.pf-modal-open { overflow: hidden; }
@keyframes pf-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pf-modalIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pf-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .pf-modal.open, .pf-overlay.open { padding: 0; align-items: stretch; }
  .pf-modal__dialog { max-height: 100%; width: 100%; border-radius: 0; }
  .pf-overlay__dialog { width: 100%; height: 100%; border-radius: 0; }
}

/* ══ Crayon de renommage inline (VT / maquette) — charte ProcessFlow ══ */
.pf-rename-name { min-width: 0; outline: none; border-radius: 6px; }
.pf-rename-name.pf-rename-editing { background: var(--pf-surface); box-shadow: 0 0 0 2px var(--pf-accent), 0 0 0 5px var(--pf-accent-ring); padding: 1px 7px; cursor: text; }
.pf-rename-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; padding: 0; border: none; background: transparent; color: var(--pf-text-3); border-radius: 8px; cursor: pointer; transition: background .2s, color .2s, transform .15s var(--pf-spring); }
.pf-rename-btn svg { width: 15px; height: 15px; }
.pf-rename-btn:hover { background: var(--pf-accent-soft); color: var(--pf-accent); }
.pf-rename-btn:active { transform: scale(.9); }
.pf-vtcard__title:hover .pf-rename-btn { color: var(--pf-accent); }

/* ══════ #33 — Pile de documents rattachee a UNE instance de module ══════
   Placee sous l'encart gris de chaque VT / chaque maquette. Volontairement
   compacte : une ligne d'entete + des lignes de 40 px, repliables. */
.pf-moddocs{border-top:1px solid var(--pf-border);padding-top:11px;margin-top:-3px}
.pf-moddocs__head{display:flex;align-items:center;gap:10px}
.pf-moddocs__toggle{display:flex;align-items:center;gap:7px;border:0;background:transparent;padding:3px 6px 3px 2px;margin-left:-2px;border-radius:8px;cursor:pointer;color:var(--pf-text-2);font:inherit;font-size:.795rem;font-weight:700;letter-spacing:.01em;transition:color .16s var(--pf-ease),background .16s var(--pf-ease)}
.pf-moddocs__toggle:hover{color:var(--pf-text);background:var(--pf-surface-2)}
.pf-moddocs__chev{width:13px;height:13px;flex:none;color:var(--pf-text-3);transition:transform .2s var(--pf-spring)}
.pf-moddocs__count{min-width:18px;height:18px;padding:0 5px;border-radius:var(--pf-r-pill);background:var(--pf-gray-soft);color:var(--pf-text-3);font-size:.68rem;font-weight:800;display:inline-grid;place-items:center;line-height:1}
/* v770 : la pilule bleue est l'etat de REPOS (c'etait l'etat de survol) —
   le meme dessin sert desormais a tous les boutons « Ajouter » des documents. */
.pf-moddocs__add{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--pf-accent-ring);background:var(--pf-accent-soft);color:var(--pf-accent);border-radius:var(--pf-r-pill);padding:4px 11px 4px 8px;font:inherit;font-size:.77rem;font-weight:700;cursor:pointer;transition:color .16s var(--pf-ease),border-color .16s var(--pf-ease),background .16s var(--pf-ease),transform .16s var(--pf-spring)}
.pf-moddocs__add svg{width:13px;height:13px;flex:none}
.pf-moddocs__add:hover{background:var(--accent-a20,rgba(10,132,255,.2));transform:translateY(-1px)}
.pf-moddocs__add:active{transform:scale(.96)}
.pf-moddocs__body{display:none;flex-direction:column;gap:2px;margin-top:6px}
/* Deplie s'il y a des documents, replie si la pile est vide (#33). Les classes
   is-open / is-closed posees par sfModDocsToggle prennent le pas sur ce defaut. */
.pf-moddocs[data-count]:not([data-count="0"]) .pf-moddocs__body{display:flex}
.pf-moddocs[data-count]:not([data-count="0"]) .pf-moddocs__chev{transform:rotate(90deg)}
.pf-moddocs.is-open .pf-moddocs__body{display:flex}
.pf-moddocs.is-open .pf-moddocs__chev{transform:rotate(90deg)}
.pf-moddocs.is-closed .pf-moddocs__body{display:none}
.pf-moddocs.is-closed .pf-moddocs__chev{transform:none}
.pf-moddocs.is-busy{opacity:.55;pointer-events:none}
.pf-moddocs__empty{padding:7px 2px 3px;font-size:.78rem;color:var(--pf-text-3)}

.pf-moddoc{display:flex;align-items:center;gap:9px;padding:6px 6px 6px 7px;border-radius:var(--pf-r-sm);transition:background .16s var(--pf-ease)}
.pf-moddoc:hover{background:var(--pf-surface-2)}
.pf-moddoc__ic{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--pf-gray-soft);color:var(--pf-text-2)}
.pf-moddoc__ic svg{width:14px;height:14px}
.pf-moddoc__ic--form{background:var(--pf-purple-soft);color:var(--pf-purple)}
.pf-moddoc__main{min-width:0;flex:1}
.pf-moddoc__line{display:flex;align-items:center;gap:6px;min-width:0}
.pf-moddoc__name{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.845rem;font-weight:600;color:var(--pf-text);cursor:pointer;border-radius:5px;transition:color .16s var(--pf-ease)}
.pf-moddoc__name:hover{color:var(--pf-accent)}
.pf-moddoc__name.pf-rename-editing{white-space:normal;overflow:visible;color:var(--pf-text);cursor:text}
.pf-moddoc__pill{flex:none;padding:1px 7px;border-radius:var(--pf-r-pill);background:var(--pf-gray-soft);color:var(--pf-text-3);font-size:.655rem;font-weight:800;letter-spacing:.02em;line-height:1.55;cursor:default}
.pf-moddoc__pin{width:12px;height:12px;flex:none;color:var(--pf-accent)}
.pf-moddoc__meta{margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.735rem;color:var(--pf-text-3)}
.pf-moddoc.is-pinned{background:var(--pf-accent-soft)}
.pf-moddoc.is-missing .pf-moddoc__name{color:#c23636}
.pf-moddoc .pf-dockebab{flex:none;margin-left:auto}
.pf-moddoc .pf-dockebab__btn{width:28px;height:28px;border-radius:8px}
.pf-moddoc .pf-dockebab__btn svg{width:16px;height:16px}

/* ══════ H-821 — l'œil « Prestataire » d'un document, la pile d'une pose ══════
   Meme dessin que la pastille « Visible par le client » des dossiers (.sfd-oeilbtn) :
   vert quand le prestataire voit le document, gris quand il reste au bureau. */
.pf-moddocs__add + .pf-moddocs__add{margin-left:0}
.pf-moddocs__add--ghost{border-color:var(--pf-border);background:transparent;color:var(--pf-text-2)}
.pf-moddocs__add--ghost:hover{background:var(--pf-surface-2);color:var(--pf-text)}
.pf-moddoc__oeil{flex:none;display:inline-flex;align-items:center;gap:5px;border:0;cursor:pointer;font:inherit;font-size:.655rem;font-weight:800;letter-spacing:.01em;padding:3px 9px;border-radius:999px;background:var(--pf-surface-3,#eef0f4);color:var(--pf-text-3);white-space:nowrap;transition:background .18s var(--pf-ease),color .18s var(--pf-ease)}
.pf-moddoc__oeil svg{width:12px;height:12px;flex:none}
.pf-moddoc__oeil.is-on{background:rgba(18,137,78,.12);color:#12894e}
.pf-moddoc__oeil:not(.is-fixe):hover{background:var(--pf-surface-hover,#e9ebf1)}
.pf-moddoc__oeil.is-on:not(.is-fixe):hover{background:rgba(18,137,78,.2)}
.pf-moddoc__oeil.is-fixe{cursor:default}
.pf-moddoc__oeil:disabled{opacity:.6;cursor:progress}
.pf-moddoc__oeil:focus-visible{outline:2px solid var(--pf-accent-ring);outline-offset:1px}
.pf-moddoc__pill--violet{background:var(--pf-purple-soft);color:var(--pf-purple)}
.pf-moddoc__pill--vert{background:rgba(18,137,78,.12);color:#12894e}
@media (max-width:560px){
  .pf-moddoc__oeil{font-size:0;gap:0;padding:5px 7px}
  .pf-moddoc__oeil svg{width:13px;height:13px}
}
/* « Rattacher un document du projet » (la fenetre vit hors de .pf-site : couleurs litterales) */
.pfdp-back{position:fixed;inset:0;z-index:2000;background:rgba(15,23,42,.38);display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .2s ease}
.pfdp-back.in{opacity:1}
.pfdp{width:min(520px,100%);max-height:min(640px,calc(100vh - 32px));display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(15,23,42,.25);font-family:Inter,system-ui,-apple-system,sans-serif;overflow:hidden;transform:translateY(6px);transition:transform .2s ease}
.pfdp-back.in .pfdp{transform:none}
.pfdp__head{display:flex;align-items:center;gap:10px;padding:16px 18px 6px}
.pfdp__head b{font-size:15px;font-weight:700;color:#0f172a}
.pfdp__x{margin-left:auto;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:#64748b;cursor:pointer;font-size:14px}
.pfdp__x:hover{background:#f1f5f9}
.pfdp__aide{margin:0;padding:0 18px 10px;font-size:12.5px;line-height:1.5;color:#64748b}
.pfdp__q{margin:0 18px 8px;padding:8px 11px;border:1px solid #e2e8f0;border-radius:10px;font:inherit;font-size:13px;outline:none}
.pfdp__q:focus{border-color:#0071e3;box-shadow:0 0 0 3px rgba(0,113,227,.15)}
.pfdp__liste{flex:1;min-height:0;overflow:auto;padding:2px 10px 8px;display:flex;flex-direction:column;gap:2px}
.pfdp__l{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;padding:8px;border-radius:10px;cursor:pointer;font:inherit}
.pfdp__l:hover{background:#f4f6fa}
.pfdp__l:disabled{opacity:.5;cursor:progress}
.pfdp__ic{flex:none;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:#eef0f4;color:#475569;font-size:9px;font-weight:900;letter-spacing:.02em}
.pfdp__t{min-width:0;display:flex;flex-direction:column;gap:1px}
.pfdp__t b{font-size:13px;font-weight:650;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfdp__t small{font-size:11.5px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfdp__vide{padding:14px 8px;font-size:13px;line-height:1.5;color:#64748b}
.pfdp__foot{display:flex;justify-content:flex-end;padding:10px 18px 16px;border-top:1px solid #f1f5f9}
.pfdp__btn{border:1px solid #e2e8f0;border-radius:11px;padding:9px 16px;font:600 13px Inter,system-ui,sans-serif;background:#fff;color:#334155;cursor:pointer}
.pfdp__btn:hover{background:#f8fafc}
@media (prefers-reduced-motion: reduce){ .pfdp-back,.pfdp{transition:none} }

/* Mention « (facultatif) » des libelles de formulaire. Rendue plus discrete que
   le libelle. Attention : les modals vivent hors de .pf-site, les tokens --pf-*
   n'y sont donc pas declares — couleur litterale volontaire. */
.pf-optional{font-size:.78em;font-weight:500;color:#9296a1;letter-spacing:0}

@media (prefers-reduced-motion: reduce){
  .pf-moddocs__chev,.pf-moddocs__add,.pf-moddoc,.pf-moddocs__toggle{transition:none}
  .pf-moddocs__add:hover{transform:none}
}

/* ── #36 — Boutons d'action des modules : libellé en toutes lettres + icône ────────
   Placés en haut à droite de la carte, au-dessus de l'encart gris. */
.pf-actbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: var(--pf-r-sm); white-space: nowrap; background: var(--pf-surface); border: 0.5px solid var(--pf-border-2); box-shadow: var(--pf-sh-sm); color: var(--pf-text-2); transition: background .2s, color .2s, border-color .2s, transform .16s var(--pf-spring); }
.pf-actbtn svg { width: 17px; height: 17px; flex: none; }
.pf-actbtn:hover { background: var(--pf-surface-2); color: var(--pf-text); }
.pf-actbtn:active { transform: scale(.96); }
.pf-actbtn:disabled { opacity: .55; cursor: default; transform: none; }
.pf-actbtn--danger { color: #ff3b30; border-color: rgba(255,59,48,.35); }
.pf-actbtn--danger:hover { background: rgba(255,59,48,.12); color: #ff3b30; }

/* Puce d'état du module, sous le grand bouton bleu de la colonne de gauche. */
.pf-vtcard__state { justify-content: center; }
.pf-vtcard__state .pf-badge { width: 100%; justify-content: center; padding: 8px 12px; }

/* Fermeture du site : bouton en toutes lettres dans la barre du haut. */
/* Le bouton Fermer reprend exactement la charte de celui de la maquette et du
   module de validation : meme ecart interne, meme survol rouge sans liseré,
   meme leger soulevement, meme appui. */
/* La croix reprend celle de la maquette : glyphe plein, pas un trait fin. */
.pf-btn--close { gap: 7px; }
.pf-btn--close .fas { font-size: 15px; line-height: 1; }
.pf-btn--close:hover { background: rgba(255,59,48,.12); border-color: transparent; color: #ff3b30; transform: translateY(-2px); }
.pf-btn--close:active { transform: scale(.95); transition-duration: .1s; }

/* Aide contextuelle des panneaux latéraux (hors portée des jetons .pf-site). */
.pf-hint { margin-top: 7px; font-size: 12.5px; line-height: 1.45; color: #9296a1; }

@media (max-width: 700px) {
  .pf-vtcard__actions { justify-content: flex-start; }
  .pf-actbtn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-actbtn { transition: none; }
  .pf-actbtn:active { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v743 — LE BOUTON D'ACTION EN ATTENTE (pastille grisee)
   --------------------------------------------------------------------------
   Meme forme que .pf-pillbtn--blue, mais eteinte : l'action existe et sera
   possible plus tard (ex. « Apercu » d'une maquette dont le PDF n'a pas
   encore ete genere). On la GRISE plutot que de la cacher : un bouton qui
   apparait puis disparait laisse croire a un bug ; un bouton eteint, lui,
   annonce ce qui viendra — et un clic explique quoi faire.
   `disabled` n'est PAS utilise : le bouton reste cliquable pour afficher
   l'explication (c'est la moitie de son interet).
   ══════════════════════════════════════════════════════════════════════════ */
.pf-pillbtn--muted { background: #f1f3f7; color: #97a1b2; border: 1px solid #e6e9f0; }
.pf-pillbtn--muted:hover { background: #eaeef5; color: #6b7688; }
.pf-pillbtn--muted svg { opacity: .75; }

/* ══════════════════════════════════════════════════════════════════════════
   v744 — LES TUILES DU PANNEAU GRIS SONT CLIQUABLES (aller-retour)
   --------------------------------------------------------------------------
   Une information affichee est le meilleur endroit pour la corriger : on la
   voit, on la touche, le panneau de droite s'ouvre sur LE champ. Les tuiles
   modifiables se distinguent au survol (contour bleu de la charte) ; les
   autres (Version, Cree le, Origine...) restent inertes, sans faux espoir.
   Dans l'autre sens, mettre le curseur dans un champ du panneau ALLUME la
   tuile correspondante : on sait toujours ce qu'on est en train de changer.
   ══════════════════════════════════════════════════════════════════════════ */
.pf-vtfield[data-sf-champ] { cursor: pointer; border-radius: 12px; margin: -6px -8px; padding: 6px 8px;
  outline: 1.5px solid transparent; outline-offset: 0;
  transition: background .18s ease, outline-color .18s ease, box-shadow .18s ease; }
.pf-vtfield[data-sf-champ]:hover { background: var(--accent-a6,rgba(10,132,255,.06)); outline-color: var(--accent-a45,rgba(10,132,255,.45)); }
.pf-vtfield[data-sf-champ]:focus-visible { background: var(--accent-a6,rgba(10,132,255,.06));
  outline-color: var(--pf-accent,#0a84ff); outline-width: 2px; }
/* la tuile ALLUMEE depuis le panneau de droite : plus franche, elle doit se
   reperer d'un coup d'oeil derriere le panneau ouvert */
.pf-vtfield[data-sf-champ].is-liee { background: var(--accent-a10,rgba(10,132,255,.10));
  outline-color: var(--pf-accent,#0a84ff); outline-width: 2px;
  box-shadow: 0 0 0 4px var(--accent-a12,rgba(10,132,255,.12)); }
.pf-vtfield[data-sf-champ].is-liee .pf-vtfield__label { color: var(--pf-accent,#0a84ff); }
/* le champ vise dans le panneau : un halo bref, puis il s'efface */
@keyframes pfChampHalo {
  0%   { box-shadow: 0 0 0 0 var(--accent-a42,rgba(10,132,255,.42)); }
  55%  { box-shadow: 0 0 0 6px var(--accent-a16,rgba(10,132,255,.16)); }
  100% { box-shadow: 0 0 0 0 var(--accent-a0,rgba(10,132,255,0)); }
}
.pf-champ-vise { animation: pfChampHalo 1.5s ease-out 2; border-radius: 10px; }

/* ══════════════════════════════════════════════════════════════════════════
   v752 — LE CHOIX DE LA PHOTO DU PROJET
   --------------------------------------------------------------------------
   Une planche des photos deja prises en visite technique : on reconnait la
   facade d'un coup d'oeil et on la designe d'un clic. L'import d'un fichier
   reste possible, en pied de fenetre. Meme grammaire que le reste : coins
   doux, bleu de la charte, ombre portee franche.
   ══════════════════════════════════════════════════════════════════════════ */
.sf-photopick{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center;
  justify-content:center; padding:22px; background:rgba(9,13,20,.5);
  font:400 14px/1.5 Inter,-apple-system,sans-serif; animation:sfPhFade .18s ease both; }
@keyframes sfPhFade{ from{opacity:0} to{opacity:1} }
.sf-photopick__boite{ width:min(760px,96vw); max-height:88vh; display:flex; flex-direction:column;
  background:#fff; border-radius:18px; box-shadow:0 26px 70px rgba(15,23,42,.32);
  overflow:hidden; animation:sfPhRise .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sfPhRise{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.sf-photopick__tete{ display:flex; align-items:flex-start; gap:13px; padding:20px 22px 16px;
  border-bottom:1px solid #eef1f5; }
.sf-photopick__ic{ flex:none; width:40px; height:40px; border-radius:12px; background:#eef4ff;
  color:var(--acc-b,#0071e3); display:grid; place-items:center; }
.sf-photopick__ic svg{ width:21px; height:21px; }
.sf-photopick__tete h3{ margin:0; font-size:16px; font-weight:700; color:#0f172a; }
.sf-photopick__tete p{ margin:2px 0 0; font-size:13px; color:#64748b; }
.sf-photopick__x{ margin-left:auto; flex:none; width:32px; height:32px; border:0; border-radius:50%;
  background:#f1f3f7; color:#475569; cursor:pointer; display:grid; place-items:center; }
.sf-photopick__x:hover{ background:#e6e9f0; color:#0f172a; }
.sf-photopick__x svg{ width:15px; height:15px; }
.sf-photopick__corps{ flex:1; min-height:120px; overflow:auto; padding:18px 22px; background:#fafbfd; }
.sf-photopick__grille{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.sf-photopick__vign{ position:relative; padding:0; border:2px solid transparent; border-radius:13px;
  overflow:hidden; background:#eef1f5; cursor:pointer; aspect-ratio:4/3;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.sf-photopick__vign img{ width:100%; height:100%; object-fit:cover; display:block; }
.sf-photopick__vign:hover{ border-color:var(--acc-b,#0071e3); transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(15,23,42,.16); }
.sf-photopick__vign:focus-visible{ border-color:var(--acc-b,#0071e3); outline:none; }
.sf-photopick__vign.is-encours{ opacity:.55; pointer-events:none; }
.sf-photopick__lgd{ position:absolute; left:0; right:0; bottom:0; padding:14px 8px 6px;
  background:linear-gradient(180deg,transparent,rgba(9,13,20,.72)); color:#fff;
  font-size:11px; font-weight:600; text-align:left; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.sf-photopick__attente,.sf-photopick__vide{ display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; padding:34px 10px; color:#64748b; text-align:center; }
.sf-photopick__vide svg{ width:38px; height:38px; color:#c3cad6; }
.sf-photopick__vide p{ margin:0; font-weight:600; color:#334155; }
.sf-photopick__vide span{ font-size:12.5px; }
.sf-photopick__pied{ display:flex; gap:10px; justify-content:flex-end; padding:14px 22px;
  border-top:1px solid #eef1f5; background:#fff; }
.sf-photopick__importer{ display:inline-flex; align-items:center; gap:8px; border:0; border-radius:11px;
  padding:11px 18px; font:600 13.5px Inter,sans-serif; background:var(--acc-b,#0071e3); color:#fff; cursor:pointer; }
.sf-photopick__importer:hover{ background:var(--acc-bp,#005bb8); }
.sf-photopick__importer svg{ width:17px; height:17px; }
.sf-photopick__fermer{ border:1px solid #e2e8f0; border-radius:11px; padding:11px 18px;
  font:600 13.5px Inter,sans-serif; background:#fff; color:#334155; cursor:pointer; }
.sf-photopick__fermer:hover{ background:#f8faff; }
/* l'apercu se clique : on le dit au survol */
.pf-preview[role="button"]{ cursor:pointer; }
.pf-preview[role="button"]:hover .pf-preview__camera{ background:var(--acc-b,#0071e3); color:#fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   v761 — DOCUMENTS DU PROJET, RANGES PAR CATEGORIE (public/js/sf-docs.js)
   ═══════════════════════════════════════════════════════════════════════════ */
#pfDocsRoot { display: flex; flex-direction: column; gap: 14px; }
#pfDocsRoot.is-occupe { cursor: progress; }
.sfd-attente, .sfd-rien { padding: 26px 4px; text-align: center; color: var(--pf-text-3); font-size: .86rem; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sfd-attente p { margin: 0; }

/* barre du haut : rechercher + nouvelle categorie */
.sfd-barre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sfd-cherche { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.sfd-cherche svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--pf-text-3); pointer-events: none; }
.sfd-cherche input {
  width: 100%; padding: 9px 32px 9px 34px; border-radius: 11px; font: inherit; font-size: .86rem;
  border: .5px solid var(--pf-border-2); background: var(--pf-surface); color: var(--pf-text);
  transition: box-shadow .18s var(--pf-ease), border-color .18s var(--pf-ease);
}
.sfd-cherche input:focus { outline: 0; border-color: var(--pf-accent); box-shadow: 0 0 0 3px var(--pf-accent-ring); }
.sfd-cherche__x { position: absolute; right: 6px; width: 22px; height: 22px; border: 0; background: transparent;
  color: var(--pf-text-3); font-size: 17px; line-height: 1; border-radius: 6px; cursor: pointer; }
.sfd-cherche__x:hover { background: var(--pf-surface-2); color: var(--pf-text); }
.sfd-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; font: inherit;
  font-size: .82rem; font-weight: 700; padding: 9px 13px; border-radius: 11px; transition: background .18s var(--pf-ease), color .18s var(--pf-ease); }
.sfd-btn svg { width: 15px; height: 15px; }
.sfd-btn--fant { background: var(--pf-accent-soft); color: var(--pf-accent); }
.sfd-btn--fant:hover { background: var(--accent-a20,rgba(10,132,255,.2)); }

/* une categorie */
.sfd-cats { display: flex; flex-direction: column; gap: 7px; }
.sfd-cat { border-radius: 13px; background: var(--pf-surface-2); border: .5px solid transparent;
  transition: background .18s var(--pf-ease), border-color .18s var(--pf-ease), box-shadow .18s var(--pf-ease); }
.sfd-cat:hover { background: var(--pf-surface-3); }
.sfd-cat.is-survol { background: var(--pf-accent-soft); border-color: var(--pf-accent); box-shadow: 0 0 0 3px var(--pf-accent-ring); }
.sfd-cat__tete { display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 4px; }
.sfd-cat__ouvrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; border: 0; background: transparent;
  cursor: pointer; font: inherit; text-align: left; padding: 7px 6px; border-radius: 9px; color: var(--pf-text); }
/* v813 : plus de pave blanc au survol du titre de categorie (demande de
   Kilian) — la carte de categorie s'eclaire deja au survol, le titre se
   contente de prendre la couleur d'accent. */
.sfd-cat__ouvrir:hover { background: transparent; color: var(--pf-accent); }
.sfd-cat__chev { width: 16px; height: 16px; flex: none; color: var(--pf-text-3); transition: transform .22s var(--pf-ease); }
.sfd-cat.is-plie .sfd-cat__chev { transform: rotate(-90deg); }
.sfd-cat__dossier { width: 19px; height: 19px; flex: none; color: var(--pf-accent); }
.sfd-cat__nom { font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfd-cat__nb { flex: none; min-width: 21px; padding: 1px 7px; border-radius: 999px; background: var(--pf-surface);
  border: .5px solid var(--pf-border); color: var(--pf-text-2); font-size: .72rem; font-weight: 800; text-align: center; }
.sfd-cat__oeil { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  background: rgba(18,137,78,.12); color: #12894e; font-size: .68rem; font-weight: 800; letter-spacing: .02em; }
.sfd-cat__oeil svg { width: 12px; height: 12px; }
.sfd-cat__propre { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--pf-accent-soft);
  color: var(--pf-accent); font-size: .68rem; font-weight: 800; }
/* v770 : la meme pilule que les encarts de module (retour Kilian) */
.sfd-cat__add { flex: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font: inherit;
  font-size: .77rem; font-weight: 700; padding: 4px 11px 4px 8px; border-radius: var(--pf-r-pill, 980px);
  border: 1px solid var(--pf-accent-ring); background: var(--pf-accent-soft); color: var(--pf-accent);
  transition: background .16s var(--pf-ease), transform .16s var(--pf-spring, ease); }
.sfd-cat__add:hover { background: var(--accent-a20,rgba(10,132,255,.2)); transform: translateY(-1px); }
.sfd-cat__add svg { width: 14px; height: 14px; }
.sfd-cat__add:hover { background: var(--accent-a20,rgba(10,132,255,.2)); }
.sfd-cat__menu { flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent;
  color: var(--pf-text-3); cursor: pointer; display: grid; place-items: center; transition: background .18s var(--pf-ease); }
.sfd-cat__menu svg { width: 17px; height: 17px; }
.sfd-cat__menu:hover { background: var(--pf-surface); color: var(--pf-text); }
.sfd-cat__corps { padding: 0 10px 10px 34px; }
.sfd-cat.is-plie .sfd-cat__corps { display: none; }
.sfd-cat__vide { margin: 0; padding: 4px 2px 6px; color: var(--pf-text-3); font-size: .79rem; font-weight: 600; }

/* le TABLEAU de documents (v762) : une ligne par document, colonnes alignees */
.sfd-tab { display: flex; flex-direction: column; border: .5px solid var(--pf-border); border-radius: 11px;
  background: var(--pf-surface); overflow: hidden; }
.sfd-doc { display: grid; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 8px 10px;
  border: 0; border-bottom: 1px solid var(--pf-border); background: transparent; cursor: pointer; font: inherit; min-width: 0;
  grid-template-columns: 30px 34px minmax(0,1fr) 98px 130px 118px 66px 30px;   /* H-821 : + l'oeil « Prestataire » */
  transition: background .14s var(--pf-ease); }
.sfd-doc:last-child { border-bottom: 0; }
.sfd-doc:hover { background: var(--pf-surface-2); }
.sfd-doc.is-coche { background: var(--pf-accent-soft); }
.sfd-doc.is-pin { box-shadow: inset 3px 0 0 var(--pf-accent); }
.sfd-doc.is-abime { box-shadow: inset 3px 0 0 #c23636; }
/* v765 : viser une case de 16 px etait un exercice d'adresse — et rater le
   coup ouvrait le menu. La zone de clic est maintenant BEAUCOUP plus large que
   la case (toute la hauteur de la ligne, et un large debord a gauche), mais
   reste invisible : on ne voit qu'un leger halo au survol. */
.sfd-doc__ck { position: relative; display: grid; place-items: center; cursor: pointer;
  width: 100%; height: 100%; min-height: 36px; }
.sfd-doc__ck::before { content: ''; position: absolute; top: -7px; bottom: -7px; left: -11px; right: -6px;
  border-radius: 9px; transition: background .14s var(--pf-ease); }
.sfd-doc__ck:hover::before { background: var(--pf-accent-soft); }
.sfd-doc__ck input { position: relative; z-index: 1; }
.sfd-doc__ck input, .sfd-cat__ck input { width: 16px; height: 16px; accent-color: var(--pf-accent); cursor: pointer; }
.sfd-cat__ck { flex: none; display: grid; place-items: center; width: 28px; height: 28px; cursor: pointer; }
.sfd-doc__ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  font-size: .56rem; font-weight: 900; letter-spacing: .02em; background: var(--pf-surface-3); color: var(--pf-text-2); }
.sfd-t-pdf { background: rgba(194,54,54,.12); color: #c23636; }
.sfd-t-xls { background: rgba(18,137,78,.12); color: #12894e; }
.sfd-t-doc { background: var(--accent-a12,rgba(10,132,255,.12)); color: var(--pf-accent); }
.sfd-t-img { background: rgba(139,92,246,.14); color: #7c4ddb; }
.sfd-t-zip, .sfd-t-cad { background: rgba(245,158,11,.16); color: #b45309; }
.sfd-t-mail { background: rgba(13,148,136,.13); color: #0f766e; }   /* v1125 : courriel (.msg / .eml) */
.sfd-doc__nom { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: .85rem; font-weight: 650;
  color: var(--pf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfd-doc__par, .sfd-doc__date, .sfd-doc__poids { font-size: .755rem; color: var(--pf-text-3); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfd-doc__poids { text-align: right; }
.sfd-doc__menu { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--pf-text-3);
  cursor: pointer; display: grid; place-items: center; transition: background .14s var(--pf-ease); }
.sfd-doc__menu svg { width: 16px; height: 16px; }
.sfd-doc__menu:hover { background: var(--pf-surface-3); color: var(--pf-text); }
.sfd-tag { display: inline-block; flex: none; font-style: normal; font-size: .62rem; font-weight: 800; padding: 2px 6px;
  border-radius: 6px; background: var(--pf-surface-3); color: var(--pf-text-2); }
.sfd-tag--rouge { background: rgba(194,54,54,.12); color: #c23636; }
.sfd-doc__pin { flex: none; color: var(--pf-accent); display: inline-flex; }
.sfd-doc__pin svg { width: 13px; height: 13px; }
/* H-821 : le nom se coupe proprement (les etiquettes restent visibles) ; le lien vers l'element ; l'oeil « Prestataire » */
.sfd-doc__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfd-doc__l1 { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.sfd-doc__nom.a-lien { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }   /* H-821b : le lien sous le nom */
.sfd-doc__lien { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; font-weight: 600; color: var(--pf-text-3); }
.sfd-doc__oeil { justify-self: start; min-width: 0; }
.sfd-doc__oeil.sfd-oeilbtn { font-size: .62rem; padding: 3px 8px; }

/* la barre qui apparait quand on a coche des documents */
.sfd-selbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 12px; background: var(--pf-text); color: #fff;
  box-shadow: 0 8px 24px rgba(16,24,40,.22); animation: sfdMonte .2s var(--pf-ease) both; }
@keyframes sfdMonte { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sfd-selbar__n { font-size: .84rem; font-weight: 800; }
.sfd-selbar__lien { border: 0; background: transparent; color: #9fd0ff; font: inherit; font-size: .8rem; font-weight: 700;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 2px 4px; }
.sfd-selbar__esp { flex: 1; }
.sfd-selbar .sfd-btn--fant { background: rgba(255,255,255,.14); color: #fff; }
.sfd-selbar .sfd-btn--fant:hover { background: rgba(255,255,255,.24); }
.sfd-btn--rouge { background: rgba(255,59,48,.9); color: #fff; }
.sfd-btn--rouge:hover { background: #ff3b30; }
.sfd-btn--rouge:disabled { background: rgba(255,255,255,.12); color: rgba(255,255,255,.45); cursor: not-allowed; }
.sfd-btn--bleu { background: var(--pf-accent); color: #fff; }
.sfd-btn--bleu:hover { background: var(--pf-accent-press); }
.sfd-btn--bleu:disabled { background: var(--pf-surface-3); color: var(--pf-text-3); cursor: not-allowed; }
.sfd-selbar__x { width: 26px; height: 26px; border: 0; border-radius: 8px; background: rgba(255,255,255,.14); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer; }
.sfd-selbar__x:hover { background: rgba(255,255,255,.26); }

/* la fenetre d'import */
.sfd-imp-ov { position: fixed; inset: 0; z-index: 5250; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15,23,42,.42); -webkit-backdrop-filter: saturate(.9) blur(1.5px);
  backdrop-filter: saturate(.9) blur(1.5px); opacity: 0; transition: opacity .2s var(--pf-ease); }
.sfd-imp-ov.is-la { opacity: 1; }
.sfd-imp { width: min(660px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--pf-surface);
  border: .5px solid var(--pf-border); border-radius: 18px; box-shadow: 0 24px 60px rgba(16,24,40,.24); overflow: hidden;
  transform: translateY(12px) scale(.97); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.sfd-imp-ov.is-la .sfd-imp { transform: none; }
.sfd-imp__tete { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--pf-border); }
.sfd-imp__tete h3 { flex: 1; margin: 0; font-size: 1rem; font-weight: 700; color: var(--pf-text); }
.sfd-imp__tete b { font-weight: 800; }
.sfd-imp__x { width: 30px; height: 30px; border: 0; border-radius: 9px; background: var(--pf-surface-2); color: var(--pf-text-2);
  font-size: 19px; line-height: 1; cursor: pointer; }
.sfd-imp__x:hover { background: var(--pf-surface-3); color: var(--pf-text); }
.sfd-imp__corps { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.sfd-imp__zone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; border-radius: 14px;
  border: 1.5px dashed var(--pf-accent); background: var(--pf-accent-soft); color: var(--pf-accent); cursor: pointer;
  transition: background .16s var(--pf-ease); }
.sfd-imp__zone.is-survol { background: var(--accent-a22,rgba(10,132,255,.22)); }
.sfd-imp__zone svg { width: 38px; height: 38px; }
.sfd-imp__zone p { margin: 2px 0 0; font-size: .9rem; font-weight: 700; color: var(--pf-text); }
.sfd-imp__parcourir { border: 0; background: transparent; color: var(--pf-accent); font: inherit; font-size: .85rem;
  font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sfd-imp__aide { font-size: .74rem; color: var(--pf-text-3); font-weight: 600; }
.sfd-imp__tout { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 9px 11px; border-radius: 11px;
  background: var(--pf-surface-2); }
.sfd-imp__tout label { font-size: .78rem; font-weight: 700; color: var(--pf-text-2); }
.sfd-imp__tout select, .sfd-imp__fcat { padding: 6px 9px; border-radius: 9px; border: .5px solid var(--pf-border-2);
  background: var(--pf-surface); color: var(--pf-text); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; max-width: 100%; }
.sfd-imp__n { margin-left: auto; font-size: .76rem; font-weight: 700; color: var(--pf-text-3); }
.sfd-imp__liste { display: flex; flex-direction: column; border: .5px solid var(--pf-border); border-radius: 11px; overflow: hidden; }
.sfd-imp__f { display: grid; grid-template-columns: 34px minmax(0,1fr) 62px 190px 28px; align-items: center; gap: 9px;
  padding: 7px 9px; border-bottom: 1px solid var(--pf-border); }
.sfd-imp__f:last-child { border-bottom: 0; }
.sfd-imp__fnom { min-width: 0; font-size: .82rem; font-weight: 650; color: var(--pf-text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.sfd-imp__fpoids { font-size: .73rem; color: var(--pf-text-3); font-weight: 600; text-align: right; }
.sfd-imp__fx { width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--pf-text-3);
  font-size: 17px; line-height: 1; cursor: pointer; }
.sfd-imp__fx:hover { background: rgba(194,54,54,.10); color: #c23636; }
.sfd-imp__vide { margin: 0; text-align: center; color: var(--pf-text-3); font-size: .8rem; font-weight: 600; }
.sfd-imp__f.is-refus { background: rgba(194,54,54,.05); }
.sfd-imp__f.is-refus .sfd-doc__ic, .sfd-imp__f.is-refus .sfd-imp__fpoids { opacity: .55; }
.sfd-imp__f.is-refus .sfd-imp__fnom > span:first-child { text-decoration: line-through; color: var(--pf-text-3); }
.sfd-imp__frefus { display: block; font-size: .69rem; font-weight: 600; color: #c23636; white-space: normal; line-height: 1.3; margin-top: 2px; }
.sfd-imp__ftag { justify-self: end; font-size: .66rem; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: rgba(194,54,54,.12); color: #c23636; }
.sfd-imp__secu { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: .72rem; font-weight: 600;
  color: var(--pf-text-3); line-height: 1.4; }
.sfd-imp__secu svg { width: 15px; height: 15px; flex: none; color: #12894e; margin-top: 1px; }
.sfd-imp__pied { display: flex; justify-content: flex-end; gap: 9px; padding: 13px 18px; border-top: 1px solid var(--pf-border);
  background: var(--pf-surface-2); }

/* les photos */
.sfd-photos { border-top: 1px solid var(--pf-border); padding-top: 14px; border-radius: 13px;
  transition: background .18s var(--pf-ease), box-shadow .18s var(--pf-ease); }
.sfd-photos.is-survol { background: var(--pf-accent-soft); box-shadow: 0 0 0 3px var(--pf-accent-ring); }
.sfd-photos__tete { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; flex-wrap: wrap; }
.sfd-photos__ic { width: 19px; height: 19px; color: var(--pf-accent); flex: none; }
.sfd-photos__tete h4 { margin: 0; font-size: .92rem; font-weight: 800; color: var(--pf-text); }
.sfd-photos__esp { flex: 1; }
/* v764 : la pastille Client dit ses DEUX etats — verte oeil ouvert quand le
   client voit, grise oeil barre quand c'est interne. Texte volontairement
   petit : c'est une etiquette, pas un titre. Elle vit parfois dans un titre
   depliable : flex none pour ne pas s'ecraser, clic isole dans le script. */
.sfd-oeilbtn { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer; font: inherit;
  font-size: .655rem; font-weight: 800; letter-spacing: .01em; padding: 3px 9px; border-radius: 999px;
  background: var(--pf-surface-3); color: var(--pf-text-3); white-space: nowrap;
  transition: background .18s var(--pf-ease), color .18s var(--pf-ease); }
.sfd-oeilbtn svg { width: 12px; height: 12px; }
.sfd-oeilbtn.is-on { background: rgba(18,137,78,.12); color: #12894e; }
.sfd-oeilbtn:not(.is-info):hover { background: var(--pf-surface-hover, #e9ebf1); }
.sfd-oeilbtn.is-on:not(.is-info):hover { background: rgba(18,137,78,.2); }
.sfd-oeilbtn:not(.is-info):focus-visible { outline: 2px solid var(--pf-accent-ring); outline-offset: 1px; }
.sfd-oeilbtn.is-info { cursor: default; }
.sfd-photos__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
.sfd-photo-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 1; border-radius: 12px; border: 1.5px dashed var(--pf-accent); background: var(--pf-accent-soft);
  color: var(--pf-accent); cursor: pointer; font: inherit; font-size: .74rem; font-weight: 700; text-align: center; line-height: 1.3;
  transition: background .18s var(--pf-ease); }
.sfd-photo-add:hover { background: var(--accent-a20,rgba(10,132,255,.2)); }
.sfd-photo-add svg { width: 26px; height: 26px; }
.sfd-photo { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; padding: 0; border: .5px solid var(--pf-border);
  background: var(--pf-surface-3); cursor: pointer; transition: transform .18s var(--pf-ease), box-shadow .18s var(--pf-ease); }
.sfd-photo:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,24,40,.16); }
.sfd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sfd-photo__nom { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-size: .68rem; font-weight: 700;
  color: #fff; text-align: left; background: linear-gradient(180deg, transparent, rgba(0,0,0,.68)); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.sfd-photo__abs { display: grid; place-items: center; width: 100%; height: 100%; font-size: .7rem; font-weight: 700; color: #c23636; }

/* le petit menu sous le curseur */
.sfd-menu { position: fixed; z-index: 5300; min-width: 218px; max-width: 320px; padding: 6px;
  background: var(--pf-surface); border: .5px solid var(--pf-border-2); border-radius: 13px;
  box-shadow: 0 18px 46px rgba(16,24,40,.22), 0 3px 10px rgba(16,24,40,.10);
  opacity: 0; transform: translateY(-5px) scale(.97); transition: opacity .14s var(--pf-ease), transform .18s var(--pf-ease); }
.sfd-menu.is-la { opacity: 1; transform: none; }
.sfd-menu__titre { padding: 6px 10px 8px; font-size: .72rem; font-weight: 800; color: var(--pf-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfd-menu__sep { height: 1px; background: var(--pf-border); margin: 5px 8px; }
.sfd-menu__b { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: .83rem; font-weight: 600; color: var(--pf-text); text-align: left; padding: 8px 10px; border-radius: 9px;
  transition: background .14s var(--pf-ease), color .14s var(--pf-ease); }
.sfd-menu__b svg, .sfd-menu__vide { width: 16px; height: 16px; flex: none; color: var(--pf-text-3); }
.sfd-menu__b:hover { background: var(--pf-surface-2); }
.sfd-menu__b.is-danger { color: #c23636; }
.sfd-menu__b.is-danger svg { color: #c23636; }
.sfd-menu__b.is-danger:hover { background: rgba(194,54,54,.10); }
.sfd-menu__b.is-off { color: var(--pf-text-3); cursor: not-allowed; opacity: .55; }
.sfd-menu__b.is-off:hover { background: transparent; }

@media (max-width: 720px) {
  .sfd-cat__corps { padding-left: 12px; }
  .sfd-doc { grid-template-columns: 24px 30px minmax(0,1fr) 34px 30px; row-gap: 2px; }   /* H-821 */
  .sfd-doc__oeil.sfd-oeilbtn { font-size: 0; gap: 0; padding: 5px 7px; }
  .sfd-doc__par, .sfd-doc__date, .sfd-doc__poids { display: none; }
  .sfd-imp__f { grid-template-columns: 30px minmax(0,1fr) 28px; }
  .sfd-imp__fpoids { display: none; }
  .sfd-imp__fcat { grid-column: 1 / -1; }
}

/* ══ v814 — Menu utilisateur (barre du haut) et fenetre « Mon profil » ══════
   Le chip portait DEUX fleches : la sienne, et celle que Bootstrap ajoute a
   tout .dropdown-toggle. Celle de Bootstrap saute. */
.user-chip.dropdown-toggle::after { display: none !important; }
.sf-usermenu { --sf-um-r: 14px; min-width: 232px; padding: 6px; border-radius: var(--sf-um-r);
  border: 0.5px solid var(--pf-border); background: var(--pf-surface); box-shadow: var(--pf-sh-lg); }
.sf-usermenu .dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent;
  border-radius: 10px; padding: 10px 11px; font-size: 13.5px; font-weight: 600; color: var(--pf-text);
  transition: background .15s var(--pf-ease), color .15s var(--pf-ease); }
.sf-usermenu .dropdown-item .sf-ico { width: 17px; height: 17px; flex: none; color: var(--pf-text-3); transition: color .15s var(--pf-ease); }
.sf-usermenu .dropdown-item:hover, .sf-usermenu .dropdown-item:focus { background: var(--pf-accent-soft); color: var(--pf-accent); }
.sf-usermenu .dropdown-item:hover .sf-ico, .sf-usermenu .dropdown-item:focus .sf-ico { color: var(--pf-accent); }
.sf-usermenu .dropdown-item.is-danger { color: #c02b22; }
.sf-usermenu .dropdown-item.is-danger .sf-ico { color: #c02b22; }
.sf-usermenu .dropdown-item.is-danger:hover { background: rgba(255,59,48,.09); color: #a5201a; }
.sf-usermenu .dropdown-divider { margin: 5px 8px; border-top: 0.5px solid var(--pf-border); opacity: 1; }

.sf-profil__dialog { position: relative; z-index: 1; width: min(520px, 100%); max-height: 100%; overflow-y: auto;
  background: var(--pf-surface); border-radius: 20px; box-shadow: 0 32px 80px rgba(16,24,40,.34), 0 0 0 .5px rgba(16,24,40,.08);
  animation: pf-modalIn .42s var(--pf-spring) backwards; }
.sf-profil__x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.7); color: var(--pf-text-3); cursor: pointer;
  transition: background .15s var(--pf-ease), color .15s var(--pf-ease); }
.sf-profil__x svg { width: 15px; height: 15px; }
.sf-profil__x:hover { background: #fff; color: var(--pf-text); }

/* en-tete : la pastille est le sujet de l'ecran, on la met en scene */
.sf-profil__hero { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 30px 24px 22px;
  background: linear-gradient(180deg, var(--pf-surface-2), var(--pf-surface)); border-radius: 20px 20px 0 0; }
.sf-profil__ava { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 9px;
  background: var(--pf-accent); color: #fff; font-size: 22px; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 8px 20px -6px rgba(16,24,40,.4), 0 0 0 4px var(--pf-surface); transition: background .2s var(--pf-ease); }
.sf-profil__nom { font-size: 18px; font-weight: 750; letter-spacing: -.015em; color: var(--pf-text); text-align: center; }
.sf-profil__role { font-size: 12px; font-weight: 600; color: var(--pf-text-3); text-transform: capitalize; }
.sf-profil__id { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 12px;
  border: 0; border-radius: 999px; background: var(--pf-surface); box-shadow: 0 0 0 .5px var(--pf-border-2), var(--pf-sh-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--pf-text-2); cursor: pointer; transition: color .15s var(--pf-ease), box-shadow .15s var(--pf-ease); }
.sf-profil__id svg { width: 13px; height: 13px; opacity: .55; }
.sf-profil__idlbl { font-family: var(--pf-font, inherit); font-size: 10px; font-weight: 800; letter-spacing: .06em;
  color: var(--pf-text-3); background: var(--pf-surface-2); border-radius: 5px; padding: 2px 5px; }
.sf-profil__id:hover { color: var(--pf-accent); box-shadow: 0 0 0 1px var(--pf-accent), var(--pf-sh-sm); }
.sf-profil__id:hover svg { opacity: 1; }

.sf-profil__corps { padding: 20px 24px 4px; display: flex; flex-direction: column; gap: 9px; }
.sf-profil__sect { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--pf-text-3); margin-top: 6px; }
.sf-profil__sect:first-child { margin-top: 0; }

/* palette : douze pastilles, celle qui est choisie porte un anneau */
.sf-profil__pal { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 4px; }
.sf-profil__pastille { width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  box-shadow: 0 0 0 1.5px rgba(16,24,40,.06); transition: transform .16s var(--pf-spring), box-shadow .16s var(--pf-ease); }
.sf-profil__pastille:hover { transform: scale(1.14); }
.sf-profil__pastille.is-on { box-shadow: 0 0 0 2.5px var(--pf-surface), 0 0 0 5px currentColor; transform: scale(1.08); }

.sf-profil__grille { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 14px; }
.sf-profil__champ { position: relative; display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; }
.sf-profil__champ > span { font-size: 11px; font-weight: 700; color: var(--pf-text-3); }
.sf-profil__champ > span i { font-style: normal; font-size: .88em; font-weight: 500; color: var(--pf-text-3); opacity: .8; }
.sf-profil__champ input { width: 100%; border: 0; border-radius: 11px; padding: 10px 12px; background: var(--pf-surface-2);
  box-shadow: inset 0 0 0 1px transparent; font-size: 13.5px; font-weight: 600; color: var(--pf-text);
  transition: background .15s var(--pf-ease), box-shadow .15s var(--pf-ease); }
.sf-profil__champ input::placeholder { font-weight: 500; color: var(--pf-text-3); }
.sf-profil__champ input:focus { outline: none; background: var(--pf-surface); box-shadow: inset 0 0 0 1.5px var(--pf-accent); }
.sf-profil__champ--lock input { color: var(--pf-text-2); padding-right: 34px; cursor: default; }
.sf-profil__champ--lock input:focus { background: var(--pf-surface-2); box-shadow: inset 0 0 0 1px transparent; }
.sf-profil__cad { position: absolute; right: 12px; bottom: 12px; width: 14px; height: 14px; color: var(--pf-text-3); opacity: .55; pointer-events: none; }
.sf-profil__msg { margin-top: 4px; border-radius: 11px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; }
.sf-profil__msg.is-ok { background: #eaf7ee; color: #1d6b3a; }
.sf-profil__msg.is-err { background: #fdecea; color: #a5271c; }

.sf-profil__pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px 22px; }
.sf-profil__depuis { font-size: 11.5px; font-weight: 500; color: var(--pf-text-3); }
.sf-profil__btns { display: flex; align-items: center; gap: 9px; }
.sf-profil__btn { border: 0; border-radius: 11px; padding: 10px 18px; font-size: 13.5px; font-weight: 650; cursor: pointer;
  background: var(--pf-surface-2); color: var(--pf-text); transition: background .15s var(--pf-ease), transform .12s var(--pf-ease); }
.sf-profil__btn:hover { background: var(--pf-surface-3); }
.sf-profil__btn--prim { background: var(--pf-accent); color: #fff; box-shadow: 0 6px 16px -8px var(--pf-accent); }
.sf-profil__btn--prim:hover { background: var(--pf-accent-press, var(--pf-accent)); filter: brightness(1.05); }
.sf-profil__btn:active { transform: scale(.97); }
.sf-profil__btn[disabled] { opacity: .6; cursor: default; }
@media (max-width: 520px) { .sf-profil__grille { grid-template-columns: 1fr; } }

/* ══ v817 — « Enregistrer » eteint tant que rien n'a change ═══════════════
   Un bouton qui reagit alors qu'il n'y a rien a faire donne l'impression
   d'avoir enregistre : il reste visible mais inerte, sans effet de survol. */
.sf-profil__btn[disabled] { opacity: .45; cursor: default; box-shadow: none; filter: none; }
.sf-profil__btn[disabled]:hover { filter: none; }
.sf-profil__btn--prim[disabled]:hover { background: var(--pf-accent); }
.sf-profil__btn[disabled]:not(.sf-profil__btn--prim):hover { background: var(--pf-surface-2); }
.sf-profil__btn:not([disabled]).sf-profil__btn--prim:hover { filter: brightness(1.05); }

/* ══ v817 — FICHE D'UN COLLABORATEUR ═════════════════════════════════════
   Un nom ou une pastille se cliquent : le repere visuel doit etre discret
   (rien ne doit clignoter dans un fil de discussion) mais present au survol. */
.sf-clicnom { cursor: pointer; }
.pf-feed__tag.sf-clicnom, .pf-bulle__nom.sf-clicnom, .bname.sf-clicnom,
.mq-note-nom.sf-clicnom, .mqn-nom.sf-clicnom, .sf-ava-nom.sf-clicnom {
  transition: filter .15s var(--pf-ease), box-shadow .15s var(--pf-ease); }
.pf-feed__tag.sf-clicnom:hover, .pf-bulle__nom.sf-clicnom:hover, .bname.sf-clicnom:hover,
.mq-note-nom.sf-clicnom:hover, .mqn-nom.sf-clicnom:hover, .sf-ava-nom.sf-clicnom:hover {
  filter: brightness(.92); text-decoration: underline; text-underline-offset: 2px; }
.user-avatar.sf-clicnom, .pf-avatar.sf-clicnom, .pf-bulle__av.sf-clicnom, .mq-note-avatar.sf-clicnom,
.mq-cr-ini.sf-clicnom, .bavatar.sf-clicnom, .pt-avatar.sf-clicnom, .sf-ava-user.sf-clicnom {
  transition: transform .16s var(--pf-spring), box-shadow .16s var(--pf-ease); }
.user-avatar.sf-clicnom:hover, .pf-avatar.sf-clicnom:hover, .pf-bulle__av.sf-clicnom:hover,
.mq-note-avatar.sf-clicnom:hover, .mq-cr-ini.sf-clicnom:hover, .bavatar.sf-clicnom:hover,
.pt-avatar.sf-clicnom:hover, .sf-ava-user.sf-clicnom:hover {
  transform: scale(1.08); box-shadow: 0 0 0 2px var(--pf-surface), 0 0 0 3.5px var(--pf-border-2); }

.sf-fiche__dialog { position: relative; z-index: 1; width: min(430px, 100%); max-height: 100%; overflow-y: auto;
  background: var(--pf-surface); border-radius: 20px; box-shadow: 0 32px 80px rgba(16,24,40,.34), 0 0 0 .5px rgba(16,24,40,.08);
  animation: pf-modalIn .42s var(--pf-spring) backwards; }
.sf-fiche__hero { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 24px 20px;
  background: linear-gradient(180deg, var(--pf-surface-2), var(--pf-surface)); border-radius: 20px 20px 0 0; }
.sf-fiche__ava { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px;
  background: var(--pf-accent); color: #fff; font-size: 20px; font-weight: 800;
  box-shadow: 0 8px 20px -6px rgba(16,24,40,.4), 0 0 0 4px var(--pf-surface); }
.sf-fiche__nom { font-size: 17.5px; font-weight: 750; letter-spacing: -.015em; color: var(--pf-text); text-align: center; }
.sf-fiche__sous { display: flex; align-items: center; gap: 7px; }
.sf-fiche__role { font-size: 12px; font-weight: 600; color: var(--pf-text-3); text-transform: capitalize; }
.sf-fiche__moi { font-size: 10.5px; font-weight: 700; color: var(--pf-accent); background: var(--pf-accent-soft);
  border-radius: 999px; padding: 2px 8px; }

.sf-fiche__corps { padding: 8px 20px 4px; display: flex; flex-direction: column; }
.sf-fiche__l { display: grid; grid-template-columns: 30px 84px minmax(0,1fr); align-items: center; gap: 4px;
  padding: 11px 4px; border-bottom: 0.5px solid var(--pf-border); }
.sf-fiche__l:last-child { border-bottom: 0; }
.sf-fiche__lico { display: grid; place-items: center; color: var(--pf-text-3); }
.sf-fiche__lico svg { width: 16px; height: 16px; }
.sf-fiche__llib { font-size: 11px; font-weight: 700; color: var(--pf-text-3); }
.sf-fiche__lval { font-size: 13.5px; font-weight: 600; color: var(--pf-text); overflow-wrap: anywhere; }
.sf-fiche__lval a { color: var(--pf-text); text-decoration: none; }
.sf-fiche__lval a:hover { color: var(--pf-accent); text-decoration: underline; text-underline-offset: 2px; }
.sf-fiche__vide { padding: 16px 4px 18px; font-size: 12.5px; font-weight: 500; color: var(--pf-text-3); text-align: center; }
.sf-fiche__pied { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 20px 20px; }
/* « Modifier mon profil » n'est pas l'action principale de cette fenetre : il
   reste discret, sur une seule ligne, a cote de Fermer. */
.sf-fiche__mod { padding: 8px 13px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--pf-text-2); }
@media (max-width: 420px) { .sf-fiche__l { grid-template-columns: 26px 74px minmax(0,1fr); } }

/* lot 150 : le commentaire ouvert depuis le mail d'une mention. La marque
   dure quelques secondes puis s'efface — les jetons de la charte, aucune
   couleur nouvelle. */
.pf-feed__item.is-cible{position:relative;border-radius:var(--r-md,14px);box-shadow:0 0 0 2px var(--accent,#0a84ff);animation:pfCible 4s ease forwards}
@keyframes pfCible{0%{box-shadow:0 0 0 2px var(--accent,#0a84ff)}70%{box-shadow:0 0 0 2px var(--accent,#0a84ff)}100%{box-shadow:0 0 0 0 transparent}}

/* lot 151 : le « ? » de l'aide au bout de la barre segmentee des panneaux.
   La barre reste une grille de trois pastilles egales ; le point
   d'interrogation prend sa largeur, pas une colonne. */
.pf-navpills { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; }
.pf-navpills__aide { margin: 0 4px 0 6px; }

/* ── H-772 (journal d’activité) : le fil — la date, et en face « + de détail » qui déplie la carte
      (public/js/sf-feed.js). Le détail se lit comme une phrase : mots clés en gras, statuts en
      pastille (mêmes couleurs que les tuiles de la fiche), ce qui a été saisi en italique, alerte en
      rouge. Avant (v770) : un bouton ⓘ et une bulle. ── */
.pf-feed__pied { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.pf-feed__pied .pf-feed__time { margin-top: 0; }
.tb-act__d:has(> .pf-feed__plus) { display: flex; align-items: center; gap: 8px; }
.pf-feed__plus { margin-left: auto; flex: none; padding: 1px 3px; border: 0; background: none; border-radius: 4px; font: inherit; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--pf-accent, #0a84ff); cursor: pointer; white-space: nowrap; }
.pf-feed__plus:hover { text-decoration: underline; text-underline-offset: 2px; }
.pf-feed__plus:focus-visible { outline: 2px solid var(--pf-accent, #0a84ff); outline-offset: 1px; }
.pf-feed__detail { margin-top: 7px; padding: 9px 11px; border-radius: 10px; background: #f6f7f9; border: 1px solid #e6e9ef; font: 500 12.5px/1.6 Inter, system-ui, sans-serif; color: #3a3f4a; cursor: auto; user-select: text; animation: sfJd .14s ease-out; }
.pf-feed__detail[hidden] { display: none; }
.tb-act__b .pf-feed__detail { font-size: 12px; }
.sf-jd__p { margin: 0; }
.sf-jd__p + .sf-jd__p { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #dde1e8; }
.sf-jd b { font-weight: 650; color: #1d1d1f; }
.sf-jq { font-style: italic; color: #4b5261; }
.sf-jal { color: #b42318; font-weight: 600; }
.sf-jst { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 650; line-height: 18px; white-space: nowrap; vertical-align: 1px; background: #eef0f4; color: #4b5563; }
.sf-jst[data-f="cours"] { background: var(--pf-accent-soft, rgba(10,132,255,.12)); color: var(--pf-accent-press, #0060df); }
.sf-jst[data-f="act"] { background: #fff3e2; color: #c26a00; }
.sf-jst[data-f="corriger"] { background: #fde8e8; color: #b42318; }
.sf-jst[data-f="pause"] { background: #f1edff; color: #6d4fd6; }
.sf-jst[data-f="fini"] { background: #e7f6ec; color: #1f7a3d; }
@keyframes sfJd { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pf-feed__detail { animation: none; } }
/* (bloc place AVANT le bloc v759, qui doit rester le dernier de site.css : tests/lot_v759) */

/* ---------- v759 : le verre et les ombres (maquette E2.4, Hamza) ----------
   Uniquement des fonds, des ombres et des filets, et seulement sur l'ecran du
   projet (#pfSiteApp) : le portail client et l'espace prestataire partagent ces
   classes et ne bougent pas. Aucune place, aucune forme, aucun bouton ne change.
   Copie d'avant : _to_delete/avant-v759/site.css. */
#pfSiteApp {
  --v759-page: #e5e8ee;
  --v759-sh2: 0 1px 3px rgba(16,24,40,.06), 0 8px 22px rgba(16,24,40,.07);
  --v759-sh3: 0 2px 6px rgba(16,24,40,.06), 0 16px 36px rgba(16,24,40,.12);
  /* ombre forte des cartes, un peu resserree (-8px) pour ne pas etre coupee par
     les bords de la zone qui defile */
  --v759-sh4: 0 4px 10px rgba(16,24,40,.06), 0 20px 40px -8px rgba(16,24,40,.16);
  --v759-filet: rgba(60,60,67,.08);
  --v759-px: 20px;   /* marge interieure laterale du panneau (.pf-detail) */
}
@media (min-width: 1700px) { #pfSiteApp { --v759-px: 26px; } }
/* 1. la page passe au gris soutenu ; la barre du projet reste blanche */
#pfSiteApp .pf-main-col { background: var(--v759-page); }
#pfSiteApp .pf-topbar { background: #fff; }
/* 2. la barre « Ce projet est a l'etape... » : un voile blanc tres leger */
#pfSiteApp .pg-barre { background: rgba(255,255,255,.45); border-bottom: 1px solid rgba(255,255,255,.7); }
/* 3. les onglets : un cran d'ombre au repos, deux pour l'onglet ouvert (le survol garde le sien) */
#pfSiteApp .pf-module { box-shadow: var(--v759-sh2); }
#pfSiteApp .pf-module:hover { box-shadow: var(--pf-sh-lg); }
#pfSiteApp .pf-module.is-selected { box-shadow: 0 0 0 2px var(--pf-accent), var(--v759-sh3); }
/* les onglets non ouverts prennent un fond gris PLEIN, en retrait de l'onglet ouvert (blanc) (pas d'opacite : textes,
   icones et pastilles restent a 100 %, retour Hamza) ; au survol ils redeviennent
   blancs. Un onglet « ignore » garde son fond gris et son pointille. */
#pfSiteApp .pf-modules:has(> .pf-module.is-selected) > .pf-module:not(.is-selected):not(:hover):not(:focus-visible) { box-shadow: 0 1px 2px rgba(16,24,40,.04); }
/* retour Hamza : un cran plus clair, pour qu'un onglet actif et un onglet ignore ne se confondent pas */
#pfSiteApp .pf-modules:has(> .pf-module.is-selected) > .pf-module:not(.is-selected):not(.pg-ignoree):not(:hover):not(:focus-visible) { background: #f4f5f8; }
/* la teinte du haut de l'onglet ouvert suit la couleur de SON icone (elle etait
   toujours bleue). Les regles ci-dessous recopient une a une, dans le meme ordre,
   celles qui colorent l'icone (site.css plus haut, site-detail.ejs, sf-passage.js) :
   meme selecteur sans « .pf-module__icon », donc la meme regle gagne et la teinte
   change avec l'etat, comme l'icone. Si une couleur d'icone change, changer ici aussi. */
#pfSiteApp .pf-module { --v759-teinte: rgba(120,120,128,.05); }
#pfSiteApp .pf-module--done { --v759-teinte: rgba(52,199,89,.06); }
#pfSiteApp .pf-module--active { --v759-teinte: var(--accent-a4,rgba(10,132,255,.04)); }
#pfSiteApp .pf-module--corriger { --v759-teinte: rgba(240,68,56,.045); }
#pfSiteApp .pf-module:not([data-sf-module="validation"]):not([data-sf-module="documents"]):has(> .pf-module__state.sf-fam-cours) { --v759-teinte: var(--accent-a4,rgba(10,132,255,.04)); }
#pfSiteApp .pf-module:not([data-sf-module="validation"]):not([data-sf-module="documents"]):has(> .pf-module__state.sf-fam-fini) { --v759-teinte: rgba(52,199,89,.06); }
#pfSiteApp .pf-module:not([data-sf-module="validation"]):not([data-sf-module="documents"]):has(> .pf-module__state.sf-fam-corriger) { --v759-teinte: rgba(240,68,56,.045); }
#pfSiteApp .pf-module:not([data-sf-module="validation"]):not([data-sf-module="documents"]):has(> .pf-module__state.sf-fam-act) { --v759-teinte: rgba(255,149,0,.05); }
#pfSiteApp .pf-module:not([data-sf-module="validation"]):not([data-sf-module="documents"]):has(> .pf-module__state.sf-fam-pause) { --v759-teinte: rgba(109,79,214,.04); }
#pfSiteApp .pf-module[data-sf-module="validation"] { --v759-teinte: rgba(109,79,214,.04); }
#pfSiteApp .pf-module[data-sf-module="documents"] { --v759-teinte: rgba(176,111,0,.04); }
#pfSiteApp .pf-module.is-selected { --v759-teinte: var(--accent-a4,rgba(10,132,255,.04)); }
#pfSiteApp .pf-module.pg-ignoree { --v759-teinte: rgba(120,120,128,.05); }
/* retour Hamza : l'onglet ouvert est d'un blanc pur, sans teinte (les regles --v759-teinte ci-dessus restent
   en place, inutilisees, au cas ou il change d'avis) */
#pfSiteApp .pf-module.is-selected { background: var(--pf-surface); }
/* un onglet « ignore » s'efface encore plus : fond presque celui de la page, pointille pale, icone et mot attenues (retour Hamza).
   Les regles de sf-passage.js (pointille, fond surface-2) sont depassees par l'id #pfSiteApp. */
#pfSiteApp .pf-modules > .pf-module.pg-ignoree:not(:hover):not(:focus-visible) { background: rgba(255,255,255,.18); border-color: rgba(60,60,67,.16); box-shadow: none; }
#pfSiteApp .pf-module.pg-ignoree .pf-module__icon { background: rgba(255,255,255,.55); color: rgba(146,150,161,.8); }
#pfSiteApp .pf-module.pg-ignoree .pf-module__label { color: rgba(146,150,161,.9); }
#pfSiteApp .pf-module.pg-ignoree .pg-ign { background: rgba(255,255,255,.5); color: rgba(146,150,161,.9); }
/* 4. la reliure entre l'onglet ouvert et le panneau (retour Hamza : « mieux integree ») : une
   languette de 16 px, du meme verre que le panneau, part de sous l'anneau bleu et rejoint le panneau ; a sa base, deux
   petits conges (quarts de cercle creux, ::before) l'evasent dans le bord du panneau, comme un
   onglet de navigateur. Plus de trait « pose » : l'onglet et le panneau ne font qu'un.
   16 px = 10 de marge sous les onglets + 4 au-dessus du panneau + 2 de soulevement. */
#pfSiteApp .pf-module.is-selected::after { content: ''; position: absolute; left: 50%; top: calc(100% + 2.5px); width: 16px; height: 14.5px; margin-left: -8px; background: rgba(255,255,255,.72); pointer-events: none; z-index: 2; }
#pfSiteApp .pf-module.is-selected::before { content: ''; position: absolute; left: 50%; top: calc(100% + 2.5px + 14.5px - 7px); width: 30px; height: 7px; margin-left: -15px; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at 0 0, transparent 7px, rgba(255,255,255,.72) 7.5px) left / 7px 100% no-repeat, radial-gradient(circle at 100% 0, transparent 7px, rgba(255,255,255,.72) 7.5px) right / 7px 100% no-repeat; }
@container (max-width: 780px) { #pfSiteApp .pf-module.is-selected::after, #pfSiteApp .pf-module.is-selected::before { display: none; } }
@media (max-width: 900px) { #pfSiteApp .pf-module.is-selected::after, #pfSiteApp .pf-module.is-selected::before { display: none; } }
/* 5. le panneau du module : un verre blanc, bord blanc, ombre forte */
#pfSiteApp .pf-detail { background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), var(--v759-sh3); }
/* son en-tete (titre, Contenu / Etape, bouton) est separe par un filet d'un bord a l'autre */
#pfSiteApp .pf-detail__head { margin: 0 calc(-1 * var(--v759-px)) -4px; padding: 0 var(--v759-px) 12px; border-bottom: 1px solid var(--v759-filet); }
/* 6. les cartes : ombre forte, filet sous leur en-tete, zone de details gris tres clair sans bord */
#pfSiteApp .pf-vtcard { box-shadow: var(--v759-sh4); }
#pfSiteApp .pf-vtcard > .pf-vtcard__head { margin: 0 -18px -4px; padding: 0 18px 12px; border-bottom: 1px solid #eceef2; }
#pfSiteApp .pf-vtpanel { background: #f6f7f9; border-color: transparent; }
/* Validation de document : ses lignes restent des lignes (meme bord, meme survol), elles prennent seulement
   un cran d'ombre pour se detacher du verre. Documents garde ses rangees telles quelles. */
#pfSiteApp [data-sf-detail="validation"] .pf-valcard { box-shadow: var(--v759-sh2); }
#pfSiteApp [data-sf-detail="validation"] .pf-valcard:hover { box-shadow: var(--v759-sh3); }
/* 7. le panneau gris des informations (maquette I1 « les fiches blanches », Hamza) : dans
   TOUS les modules qui l'ont (VT, maquette, mairie, BE, pose). Le fond passe un cran plus
   gris ; chaque information devient une petite fiche blanche ; son icone prend la teinte de
   sa nature : dates en bleu, date imperative en rouge, personne en violet, travail /
   consignes en orange, le reste en gris. Les boutons du haut ne changent pas. Le survol,
   le clic pour modifier et le champ « allume » depuis la fiche restent : ils sont
   seulement redits ici (l'id #pfSiteApp passe devant les regles d'origine), avec le meme
   bleu, pose sur le blanc de la fiche. */
#pfSiteApp .pf-vtpanel { background: #eef0f4; }
#pfSiteApp .pf-vtgrid { gap: 10px; }
#pfSiteApp .pf-vtgrid > .pf-vtfield { margin: 0; padding: 11px 13px; border-radius: 12px; background: #fff; border: 1px solid rgba(60,60,67,.07); box-shadow: 0 1px 2px rgba(16,24,40,.04); outline: 1.5px solid transparent; outline-offset: 0; transition: background .18s ease, outline-color .18s ease, box-shadow .18s ease; }
#pfSiteApp .pf-vtgrid > .pf-vtfield[data-sf-champ]:hover { background: linear-gradient(var(--accent-a6,rgba(10,132,255,.06)), var(--accent-a6,rgba(10,132,255,.06))) #fff; outline-color: var(--accent-a45,rgba(10,132,255,.45)); }
#pfSiteApp .pf-vtgrid > .pf-vtfield[data-sf-champ]:focus-visible { background: linear-gradient(var(--accent-a6,rgba(10,132,255,.06)), var(--accent-a6,rgba(10,132,255,.06))) #fff; outline-color: var(--pf-accent,#0a84ff); outline-width: 2px; }
#pfSiteApp .pf-vtgrid > .pf-vtfield[data-sf-champ].is-liee { background: linear-gradient(var(--accent-a10,rgba(10,132,255,.10)), var(--accent-a10,rgba(10,132,255,.10))) #fff; outline-color: var(--pf-accent,#0a84ff); outline-width: 2px; box-shadow: 0 0 0 4px var(--accent-a12,rgba(10,132,255,.12)); }
/* un long texte replie se fond maintenant dans le blanc de la fiche (plus dans le gris) */
#pfSiteApp .pf-vtgrid .pf-vtfield__val.est-plie::after { background: linear-gradient(180deg, rgba(255,255,255,0), #fff 92%); }
/* les icones : une pastille teintee, sans cadre ni ombre (meme taille) */
#pfSiteApp .pf-vtgrid .pf-vtfield__ic { background: #eef0f4; color: #5c5c66; border-color: transparent; box-shadow: none; }
#pfSiteApp .pf-vtgrid > .pf-vtfield:is([data-sf-champ="date_previsionnelle"], [data-sf-champ="date_programmee"], [data-sf-champ="date_visite"], [data-sf-champ="date_prevue"], [data-sf-champ="date_realisee"], [data-sf-nat="date"]) .pf-vtfield__ic { background: #e8f1fe; color: #0a6fd6; }
#pfSiteApp .pf-vtgrid > .pf-vtfield:is([data-sf-champ="date_imperative"]) .pf-vtfield__ic, #pfSiteApp .pf-vtgrid .pf-vtfield__ic--danger { background: #fdecec; color: #c4320a; }
#pfSiteApp .pf-vtgrid > .pf-vtfield:is([data-sf-champ="technicien_id"], [data-sf-champ="poseur"]) .pf-vtfield__ic { background: #f1edff; color: #6d4fd6; }
#pfSiteApp .pf-vtgrid > .pf-vtfield:is([data-sf-champ="travail"], [data-sf-champ="consignes"]) .pf-vtfield__ic { background: #fff3e2; color: #b96300; }
/* Bureau d'etudes : son panneau porte un formulaire (Statut, Echanges) au lieu des
   informations : memes fiches blanches pour ses deux blocs */
/* la fiche « Statut » prend la largeur de son contenu (liste + Enregistrer) : sinon le bouton depasse de la fiche */
#pfSiteApp .pf-vtpanel .pf-fields > .pf-field:not(.pf-field--wide) { justify-self: start; }
/* 8. la barre du projet : les references A COTE de l'adresse, sur la meme ligne (Hamza, option 1).
   La barre reste a deux lignes (nom / adresse + references) au lieu de trois. L'adresse garde sa
   largeur (60 % au plus, puis des points de suspension) ; les references prennent ce qui reste et,
   comme avant, celles qui ne tiennent pas passent derriere « +N » (sf-ui.js mesure la zone).
   Un filet fin les separe de l'adresse ; les puces ont la hauteur de la ligne d'adresse. */
#pfSiteApp .pf-topbar__meta { flex-direction: row; align-items: center; gap: 10px; flex-wrap: nowrap; }
#pfSiteApp .pf-topbar__addr { flex: 0 1 auto; max-width: 60%; }
#pfSiteApp .pf-topbar__refs { flex: 1 1 0; width: auto; min-width: 0; order: 2; position: relative; }
/* le filet est pose EN DEHORS du flux (dans l'ecart de 10 px avec l'adresse) : sf-ui.js mesure la zone
   pour decider ce qui tient, un filet dans le flux lui volait 5 px et le « +N » etait coupe (Hamza) */
#pfSiteApp .pf-topbar__refs::before { content: ''; position: absolute; left: -6px; top: 2px; width: 1px; height: 14px; background: var(--pf-border-2); }
#pfSiteApp .pf-topbar__refs:empty::before { display: none; }
#pfSiteApp .pf-topbar__refs { height: 18px; }
#pfSiteApp .pf-topbar__refs .ref-chip { padding-top: 1px; padding-bottom: 1px; line-height: 16px; }
#pfSiteApp .pf-topbar__refs .pf-refs-plus { padding: 1px 7px; line-height: 14px; }
#pfSiteApp .pf-vtpanel .pf-fields > .pf-field { padding: 11px 13px; border-radius: 12px; background: #fff; border: 1px solid rgba(60,60,67,.07); box-shadow: 0 1px 2px rgba(16,24,40,.04); }