/* ── PROJETS-CSS : styles espace collaboratif souverain (ESPACE-COLLAB-01) ──── */
/* ASSET-CACHE-01 : servi avec cache-control: no-store depuis handler Rust       */
/* COLLAB-CACHE-AVERT-01 : .projet-avert-caches visible propriétaire uniquement */
/* ⛔ SÉCURITÉ : jamais de noms tables DB, routes internes, mécanismes auth      */

/* ── DESIGN-TOKENS : variables cockpit dark (héritées de membres.css) ─────── */
/* Note : ces variables sont définies dans membres.css et héritées par cascade. */
/* Redéfinies ici comme fallback uniquement si projets.css chargé en isolation. */
:root {
  --projets-quota-ok:   #22d65f;
  --projets-quota-warn: #f5a623;
  --projets-quota-crit: #e74c3c;
  --projets-caches-bg:  rgba(245, 166, 35, 0.12);
  --projets-caches-bdr: rgba(245, 166, 35, 0.45);
}

/* ── SECTION PROJETS-QUOTA-BAR : barre d'utilisation disque ─────────────────── */

.projets-quota-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.projets-quota-bar__track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--surface2, #1a1f2e);
  overflow: hidden;
}

.projets-quota-bar__fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--projets-quota-ok);
  transition: width .3s ease, background-color .3s;
}

.projets-quota-bar__fill--warn  { background: var(--projets-quota-warn); }
.projets-quota-bar__fill--crit  { background: var(--projets-quota-crit); }

.projets-quota-bar__label {
  font-size: .8rem;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}

/* ── SECTION PROJETS-FILTRE-BARRE : barre de recherche + filtres DOM ─────────── */

.projets-filtre-barre {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
  align-items: center;
}

.projets-filtre-barre input[type="text"],
.projets-filtre-barre select {
  background: var(--surface, #0f1320);
  border: 1px solid var(--border, #2a3050);
  border-radius: 6px;
  color: var(--text, #e2e8f0);
  font-size: .875rem;
  padding: .4rem .65rem;
}

.projets-filtre-barre input[type="text"] {
  flex: 1;
  min-width: 160px;
}

.projets-filtre-barre select {
  min-width: 130px;
}

/* ── SECTION PROJETS-LISTE : cards grille projets ───────────────────────────── */

.projets-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

/* ── PROJET-CARD : carte cockpit dark ──────────────────────────────────────── */

.projet-card {
  background: var(--surface, #0f1320);
  border: 1px solid var(--border, #2a3050);
  border-top: 3px solid var(--accent, #3b82f6);
  border-radius: 8px;
  padding: 1.1rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  transition: border-color .18s, box-shadow .18s;
}

.projet-card:hover {
  border-color: var(--cyan, #00c8ff);
  border-top-color: var(--cyan, #00c8ff);
  box-shadow: 0 4px 18px rgba(0,200,255,.07);
}

.projet-card__head {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}

.projet-card__type-icon {
  font-size: 1.1rem;
  line-height: 1.3;
  flex-shrink: 0;
  opacity: .8;
}

.projet-card__titre {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, #e2e8f0);
  margin: 0;
  line-height: 1.3;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.projet-card__badges {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.projet-card__badge {
  display: inline-block;
  border-radius: 4px;
  padding: .1rem .5rem;
  font-size: .73rem;
  font-weight: 500;
  border: 1px solid transparent;
  line-height: 1.5;
}

/* .projet-card__meta : alias utilisé dans page_detail_projet() pour la ligne badges en header */
.projet-card__meta {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.projet-card__badge--cat {
  background: rgba(59,130,246,.12);
  color: var(--label, #90c4e8);
  border-color: rgba(59,130,246,.25);
}

.projet-card__badge--public {
  background: rgba(34,197,94,.1);
  color: #6ee7a0;
  border-color: rgba(34,197,94,.25);
}

.projet-card__badge--membre {
  background: rgba(251,191,36,.1);
  color: #fcd34d;
  border-color: rgba(251,191,36,.25);
}

.projet-card__badge--prive {
  background: rgba(107,114,128,.12);
  color: var(--muted, #6b7280);
  border-color: rgba(107,114,128,.2);
}

.projet-card__badge--fork {
  background: rgba(0,200,255,.08);
  color: var(--cyan, #00c8ff);
  border-color: rgba(0,200,255,.2);
}

.projet-card__desc {
  font-size: .83rem;
  color: var(--muted, #6b7280);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
  min-height: 2.4em;
}

.projet-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: auto;
}

.projet-card__stat {
  font-size: .76rem;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}

.projet-card__actions {
  display: flex;
  gap: .4rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.projet-card__btn {
  font-size: .8rem;
  padding: .3rem .7rem;
  border-radius: 5px;
  border: 1px solid var(--border, #2a3050);
  background: var(--surface2, #1a1f2e);
  color: var(--text, #e2e8f0);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, background .15s;
  white-space: nowrap;
}

.projet-card__btn:hover {
  border-color: var(--cyan, #00c8ff);
  background: rgba(0,200,255,.06);
}

.projet-card__btn--primary {
  background: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
  color: #fff;
  font-weight: 600;
}

.projet-card__btn--primary:hover {
  background: var(--accent-hover, #2563eb);
  border-color: var(--accent-hover, #2563eb);
}

/* ── PROJ-DL-ZIP-01 : bouton télécharger ZIP ─────────────────────────────── */
.projet-card__btn--zip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
  padding: .3rem .7rem;
  border-radius: 5px;
  border: 1px solid var(--accent, #3b82f6);
  background: transparent;
  color: var(--accent, #3b82f6);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.projet-card__btn--zip:hover {
  background: var(--accent, #3b82f6);
  color: #fff;
}

/* ── SECTION GESTION-ETAT-VIDE-01 : états vides ─────────────────────────────── */

.projets-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted, #6b7280);
  background: var(--surface, #0f1320);
  border: 1px dashed var(--border, #2a3050);
  border-radius: 10px;
}

.projets-empty-state__icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: .75rem;
  opacity: .6;
}

.projets-empty-state__titre {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .4rem;
  color: var(--text, #57e969);
}

.projets-empty-state__sub {
  font-size: .875rem;
}

.projets-empty-state a {
  color: var(--cyan, #00c8ff);
  text-decoration: none;
}

.projets-empty-state a:hover {
  text-decoration: underline;
}

/* ── SECTION PROJET-AVERT-CACHES : bandeau fichiers cachés ──────────────────── */
/* COLLAB-CACHE-AVERT-01 : visible UNIQUEMENT au propriétaire (contrôle SSR)     */

.projet-avert-caches {
  background: var(--projets-caches-bg);
  border: 1px solid var(--projets-caches-bdr);
  border-radius: 8px;
  padding: .65rem 1rem;
  margin-bottom: 1rem;
  font-size: .875rem;
  color: var(--projets-quota-warn);
  display: flex;
  align-items: center;
  gap: .6rem;
}

.projet-avert-caches__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ── SECTION FM-LISTING-PROJETS : grille 5 colonnes listing fichiers ─────────── */

.fm-listing--projets {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  margin-bottom: 1.5rem;
}

.fm-listing--projets thead th {
  text-align: left;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--label, #90c4e8);
  padding: .45rem .65rem;
  border-bottom: 1px solid var(--border, #2a3050);
}

/* BUG-COL-ACTIONS-ALIGN-01 : header ACTIONS aligné à droite, comme les boutons
   qu'il coiffe (.fm-row-actions justify-content:flex-end ligne ~415) — sans ce
   correctif le libellé "ACTIONS" reste à gauche alors que les icônes sont à
   l'extrême droite, créant un désalignement visuel visible à toute largeur. */
.fm-listing--projets thead th.col-actions {
  text-align: right;
}

.fm-listing--projets tbody tr {
  border-bottom: 1px solid var(--surface2, #1a1f2e);
  transition: background .15s;
}

.fm-listing--projets tbody tr:hover {
  background: rgba(0, 200, 255, 0.04);
}

.fm-listing--projets td {
  padding: .5rem .65rem;
  vertical-align: middle;
  color: var(--text, #e2e8f0);
}

/* col 1 : icône extension */
.fm-listing--projets .col-icone {
  width: 2rem;
  text-align: center;
  color: var(--muted, #6b7280);
  font-size: 1.1rem;
}

/* col 2 : nom fichier — INVAR-COL-NOM-01 : ellipsis obligatoire (pas de wrapping brutal mobile)
   BUG-COL-NOM-TRONQUE-01 : width:100% est INDISPENSABLE avec max-width:0 dans un tableau en
   table-layout:auto — sans lui, l'algorithme de distribution de largeur ne redonne jamais
   l'espace disponible à cette colonne (elle restait ~40px quelle que soit la largeur d'écran,
   y compris en plein écran desktop). width:100% signale "prends tout l'espace restant" pour
   la passe de distribution, max-width:0 garde le calcul de contenu intrinsèque à 0 pour que
   les colonnes à largeur fixe (icone/taille/blake3) soient satisfaites en premier. */
.fm-listing--projets .col-nom {
  width: 100%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* col 3 : taille */
.fm-listing--projets .col-taille {
  width: 7rem;
  white-space: nowrap;
  color: var(--muted, #6b7280);
  font-size: .8rem;
}

/* col 4 : blake3 abrégé — affiché 8+...+8 chars (COLLAB-BLAKE3-ABBREV-01) */
.fm-listing--projets .col-blake3 {
  width: 12rem;
  font-family: monospace;
  font-size: .75rem;
  color: var(--muted, #6b7280);
  cursor: help;
}

/* col 5 : actions — INVAR-COL-ACTIONS-01 : pas de width fixe devinée.
   .col-nom (max-width:0, ligne 377) cède l'espace nécessaire — .col-actions
   se dimensionne uniquement à son contenu réel via .fm-row-actions (nowrap),
   ce qui évite tout chevauchement à n'importe quelle largeur d'écran.
   BUG-KEBAB-ALIGN-01 : text-align:right ajouté ici (pas seulement sur le <thead
   th.col-actions> de BUG-COL-ACTIONS-ALIGN-01) — sans lui le bouton .fm-actions-kebab,
   seul élément visible dans le <td> quand .fm-row-actions est fermé, hérite du
   text-align par défaut du navigateur (LEFT) et se retrouve visuellement décalé à
   gauche — au-dessus du premier bouton d'action — dès que la cellule s'élargit à
   l'ouverture du panneau. */
.fm-listing--projets .col-actions {
  white-space: nowrap;
  text-align: right;
}

.fm-listing--projets .col-actions .fm-row-actions {
  display: flex;
  flex-wrap: nowrap;
  /* .5rem (pas .25rem comme filemgr.css) : évite les appuis accidentels
     entre boutons adjacents sur mobile — cibles tactiles WCAG 2.5.5 ≥44px. */
  gap: .5rem;
  justify-content: flex-end;
}

.fm-listing--projets .col-actions a,
.fm-listing--projets .col-actions button {
  font-size: .75rem;
  padding: .2rem .5rem;
  border-radius: 4px;
  border: 1px solid var(--border, #2a3050);
  background: transparent;
  color: var(--text, #e2e8f0);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s;
}

.fm-listing--projets .col-actions a:hover,
.fm-listing--projets .col-actions button:hover {
  border-color: var(--cyan, #00c8ff);
}

/* FM-ACTIONS-KEBAB-01 : bouton ⋮ — masqué par défaut (desktop/tablette : 4 boutons visibles
   directement, voir .fm-row-actions ci-dessus). Réservé au responsive ≤480px ci-dessous. */
.fm-listing--projets .fm-actions-kebab {
  display: none;
}

/* responsive ≤768px : 4 colonnes (sans taille) */
@media (max-width: 768px) {
  .fm-listing--projets .col-taille { display: none; }
  .fm-listing--projets .col-blake3 { width: 9rem; font-size: .7rem; }
}

/* responsive ≤480px : 3 colonnes (sans taille ni blake3) */
@media (max-width: 480px) {
  .fm-listing--projets .col-taille { display: none; }
  .fm-listing--projets .col-blake3 { display: none; }
  /* Pas de width fixe ici — .col-actions se dimensionne à son contenu
     (voir INVAR-COL-ACTIONS-01 ligne ~402), .col-nom cède l'espace restant. */
  /* WCAG 2.5.5 : zones de tap ≥44px — augmenter padding vertical boutons actions */
  .fm-listing--projets .col-actions a,
  .fm-listing--projets .col-actions button { padding: .4rem .55rem; font-size: 1.5rem; }

  /* FM-ACTIONS-KEBAB-01 : sur mobile étroit, les 4 boutons sont remplacés par un
     bouton ⋮ unique (disclosure WAI-ARIA — aria-expanded/aria-controls, voir projets.js
     initCspFallback). Un clic affiche .fm-row-actions sur la ligne suivante, toujours
     aligné à droite (justify-content:flex-end hérité) ; un second clic la masque. */
  .fm-listing--projets .col-actions {
    white-space: normal;
  }
  .fm-listing--projets .fm-actions-kebab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 4px;
    border: 1px solid var(--border, #2a3050);
    background: transparent;
    color: var(--text, #e2e8f0);
    cursor: pointer;
  }
  .fm-listing--projets .fm-actions-kebab[aria-expanded="true"] {
    border-color: var(--cyan, #00c8ff);
    color: var(--cyan, #00c8ff);
  }
  .fm-listing--projets .col-actions .fm-row-actions {
    display: none;
  }
  .fm-listing--projets .col-actions .fm-row-actions.fm-row-actions--open {
    display: flex;
    margin-top: .5rem;
  }
}

/* ── SECTION PROJET-FORM : formulaires créer/modifier projet ─────────────────── */

.projet-form {
  max-width: 660px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* UPLOAD-TAILLE-CLIENT-01 : .membre-erreur était utilisée sur cette page (erreur
   dossier, BUG-DOSSIER-SILENCIEUX-01) sans AUCUNE règle CSS nulle part dans le
   projet — texte non stylé depuis sa création. Corrigé ici car les nouveaux
   messages d'erreur taille/quota injectés par projets.js réutilisent cette même
   classe : sans style, ils seraient invisibles/peu visibles. */
.membre-erreur {
  background: rgba(220, 38, 38, .12);
  border: 1px solid rgba(220, 38, 38, .4);
  border-radius: 6px;
  color: #fca5a5;
  font-size: .9rem;
  padding: .6rem .85rem;
  margin: 0 0 .5rem 0;
}

.projet-form .form-groupe {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.projet-form label {
  font-size: .85rem;
  color: var(--label, #90c4e8);
  font-weight: 500;
}

.projet-form input[type="text"],
.projet-form select,
.projet-form textarea {
  background: var(--surface, #0f1320);
  border: 1px solid var(--border, #2a3050);
  border-radius: 6px;
  color: var(--text, #e2e8f0);
  font-size: .9rem;
  padding: .5rem .75rem;
  width: 100%;
  box-sizing: border-box;
}

.projet-form textarea {
  min-height: 90px;
  resize: vertical;
}

.projet-form input[type="text"]:focus,
.projet-form select:focus,
.projet-form textarea:focus {
  outline: none;
  border-color: var(--cyan, #00c8ff);
}

.projet-form .form-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--text, #e2e8f0);
}

.projet-form .btn-submit {
  align-self: flex-start;
  background: var(--cyan, #00c8ff);
  color: #0a0e1a;
  border: none;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 600;
  padding: .55rem 1.4rem;
  cursor: pointer;
  transition: opacity .2s;
}

.projet-form .btn-submit:hover { opacity: .85; }

/* ── SECTION PROJETS-PARTAGES : liste des forks reçus ────────────────────────── */

.projets-partages-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.partage-card {
  background: var(--surface, #0f1320);
  border: 1px solid var(--border, #2a3050);
  border-radius: 10px;
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.partage-card__source {
  font-size: .78rem;
  color: var(--muted, #6b7280);
}

.partage-card__titre {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text, #e2e8f0);
}

.partage-card__date {
  font-size: .75rem;
  color: var(--muted, #6b7280);
}

.partage-card__actions {
  display: flex;
  gap: .5rem;
  margin-top: .4rem;
}

/* ── SECTION PV-VIEWER : viewer inline fichiers projet (COLLAB-VIEWER-EDIT-01) ── */

.pv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  background: var(--surface, #0f1320);
  border: 1px solid var(--border, #2a3050);
  border-radius: 8px 8px 0 0;
  padding: .5rem .75rem;
  margin-bottom: 0;
}

.pv-toolbar__nom {
  font-weight: 600;
  color: var(--text, #e2e8f0);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv-toolbar__empreinte {
  font-size: .75rem;
  color: var(--muted, #6b7280);
  font-family: monospace;
  white-space: nowrap;
}

.pv-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .7rem;
  font-size: .82rem;
  border-radius: 5px;
  border: 1px solid var(--border, #2a3050);
  background: var(--surface2, #1a1f2e);
  color: var(--text, #e2e8f0);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.pv-btn:hover {
  background: var(--surface, #0f1320);
  border-color: var(--accent, #3b82f6);
}

.pv-btn--primary {
  background: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
  color: #fff;
}

.pv-btn--primary:hover {
  background: #2563eb;
}

.pv-btn--cta {
  background: var(--success, #22d65f);
  border-color: var(--success, #22d65f);
  color: #0a0e1a;
  font-weight: 600;
}

.pv-btn--cta:hover {
  background: #16c255;
}

/* BUG-PV-TOOLBAR-CTA-ICON-01 : desktop = libellé complet visible, icône
   dédiée mobile masquée ici (révélée uniquement ≤480px, cf. bloc PV-RESPONSIVE). */
.pv-btn--cta .pv-btn__icone { display: none; }

.pv-btn--edit {
  background: rgba(245, 166, 35, 0.15);
  border-color: rgba(245, 166, 35, 0.4);
  color: #f5a623;
}

.pv-btn--edit:hover {
  background: rgba(245, 166, 35, 0.25);
}

.pv-viewer {
  display: flex;
  background: var(--surface, #0f1320);
  border: 1px solid var(--border, #2a3050);
  border-top: none;
  /* BUG-GUTTER-SCROLL-01 : overflow:hidden — seul .pv-viewer__scroll scrolle H
     INVAR-GUTTER-OUTER-01 : gutter hors zone H-scrollable, ne cache plus le code */
  overflow: hidden;
  min-height: 120px;
  max-height: 80vh;
}

.pv-viewer__gutter {
  padding: .6rem .5rem;
  background: var(--surface2, #1a1f2e);
  color: var(--muted, #6b7280);
  font-family: monospace;
  font-size: .82rem;
  line-height: 1.6;
  text-align: right;
  user-select: none;
  min-width: 2.1rem;
  flex-shrink: 0;
  white-space: pre;
  /* BUG-GUTTER-SCROLL-01 : overflow:hidden + scrollTop syncé par JS (initViewerGutter)
     INVAR-GUTTER-OUTER-01 : position:sticky supprimé — gutter ne cache plus le code */
  overflow: hidden;
}

/* ── PV-SCROLLBAR : scrollbar fine cockpit dark — disparaît au repos ────────── */
/* BUG-GUTTER-SCROLL-01 : scrollbar déplacée sur .pv-viewer__scroll (inner scroll) */
.pv-viewer__scroll {
  flex: 1;
  overflow: auto;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.pv-viewer__scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.pv-viewer__scroll::-webkit-scrollbar-track { background: transparent; }
.pv-viewer__scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background .25s;
}
.pv-viewer__scroll:hover::-webkit-scrollbar-thumb,
.pv-viewer__scroll:active::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }

.pv-viewer__code {
  margin: 0;
  padding: .6rem .75rem;
  font-family: monospace;
  font-size: .82rem;
  line-height: 1.6;
  color: #ffffff;
  white-space: pre;
  overflow: visible;
  flex: 1;
}

/* ── COLLAB-EDITOR-01 — textarea éditeur : texte noir sur fond blanc ───────────── */
/* BUG-EDITOR-HEIGHT-01 : #pv-editor-textarea est enfant de .pv-viewer__scroll,
   qui n'est PAS display:flex — le flex:1 hérité de .pv-viewer__code est donc sans
   effet sur ce textarea (propriété flex ignorée hors contexte flex) et il retombe
   sur sa hauteur intrinsèque (2 lignes UA par défaut) alors que .pv-viewer__scroll
   est étiré à la hauteur du gutter par le parent flex .pv-viewer.
   Fix : height/width:100% (le parent stretché a une hauteur définie — le calcul
   en % fonctionne) + box-sizing:border-box + suppression bordure UA par défaut. */
#pv-editor-textarea.pv-viewer__code {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: none;
  outline: none;
  resize: none;
  color: #000000;
  background: #ffffff;
  caret-color: #000000;
}

/* ── VIEWER-TOGGLE-01 : boutons toggle état inactif / actif ─────────────────── */
.pv-btn--toggle { opacity: .55; font-family: monospace; }
.pv-btn--toggle--actif {
  opacity: 1;
  background: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
  color: #fff;
}
.pv-btn--toggle--actif:hover { background: #2563eb; }

.pv-viewer--image {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1rem;
  background: var(--surface, #0f1320);
  border: 1px solid var(--border, #2a3050);
  border-top: none;
  min-height: 80px;
}

.pv-img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 4px;
}

/* ── COLLAB-VIDEO-PLAYER-01 — lecteur vidéo/audio natif, cockpit dark ───────── */
/* D4 : contrôles natifs du navigateur (attribut controls) — le style ci-dessous
   habille le CONTENEUR (fond, coins arrondis), jamais les contrôles eux-mêmes.
   Pas de largeur fixe sur .pv-viewer (vérifié ci-dessus, ligne 698) — width:100%
   dispose donc bien de tout l'espace du conteneur parent (D3bis point 5). */
.pv-viewer--video,
.pv-viewer--audio {
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: var(--surface, #0f1320);
  border: 1px solid var(--border, #2a3050);
  border-top: none;
}

.pv-video {
  width: 100%;
  max-width: 100%;
  max-height: 75vh;
  border-radius: 8px;
  background: #000;
}

.pv-audio {
  width: 100%;
  max-width: 100%;
}

/* D7 — marque "SOLIVRAM" dans la barre d'outils du lecteur (PAS en superposition
   sur la vidéo — retour utilisateur : jamais gêner le contenu, rester dans
   l'interface de commande). Même ligne que le nom de fichier/BLAKE3/boutons,
   gabarit .pv-toolbar déjà responsive (flex-wrap hérité, D3bis). */
.pv-watermark {
  font-family: monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent, #3b82f6);
  white-space: nowrap;
  user-select: none;
}

/* D3bis point 6 (orientation) : en paysage mobile la hauteur de viewport est très
   réduite — max-height plus contraint pour que la toolbar reste accessible sans
   défilement forcé. */
@media (orientation: landscape) and (max-height: 500px) {
  .pv-video { max-height: 60vh; }
}

/* D3bis point 3 (anti-reflow) : le texte du bouton change 3 fois (repos/succès/
   échec) — min-width calculé sur le libellé le plus long ("🔗 Copier le lien")
   pour que les boutons voisins ne sautent pas de position pendant l'animation
   de confirmation, particulièrement visible sur mobile étroit (320-360px). */
.pv-btn-copier-lien {
  min-width: 9.5rem;
  justify-content: center;
}

/* BLOC F (V2 COLLAB-VIDEO-PLAYER-01) — bouton Mode théâtre. Anti-reflow identique à
   .pv-btn-copier-lien : le texte bascule "🎭 Mode théâtre" ↔ "🎭 Quitter théâtre". */
.pv-btn-theatre {
  min-width: 10.5rem;
  justify-content: center;
}

/* BLOC F — effet mobile du mode théâtre (état PARTAGÉ avec le nav — body.layout--large
   — mais EFFET CSS différent selon la largeur d'écran, car le mécanisme du nav
   (900px→90vw sur .membre-main) est explicitement SANS EFFET sous 900px (membres.css,
   INVAR-LAYOUT-TOGGLE-05 — le nav masque même son bouton à cette largeur). Cette règle
   vit UNIQUEMENT dans projets.css (jamais membres.css) : elle ne doit affecter QUE le
   lecteur vidéo, aucune autre page du site. Sur desktop (>900px), aucun effet ici —
   le comportement reste le mirroir classique de LAYOUT-LARGE-01 via .membre-main. */
@media (max-width: 900px) {
  body.layout--large .pv-video { max-height: 85vh; }
}

.pv-viewer--binaire {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 2rem 1rem;
  background: var(--surface, #0f1320);
  border: 1px solid var(--border, #2a3050);
  border-top: none;
  color: var(--muted, #6b7280);
  min-height: 100px;
}

.pv-statusbar {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding: .3rem .75rem;
  background: var(--surface2, #1a1f2e);
  border: 1px solid var(--border, #2a3050);
  border-top: none;
  border-radius: 0 0 8px 8px;
  font-size: .75rem;
  color: var(--muted, #6b7280);
  font-family: monospace;
}

/* ── PV-NAV-PUBLIC : nav minimale visiteur non connecté ────────────────────── */

.pv-nav-public {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: .5rem 1rem;
  background: var(--surface, #0f1320);
  border-bottom: 1px solid var(--border, #2a3050);
}

.pv-btn-connecter {
  display: inline-flex;
  align-items: center;
  padding: .35rem .9rem;
  font-size: .84rem;
  border-radius: 6px;
  background: var(--accent, #3b82f6);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.pv-btn-connecter:hover {
  background: #2563eb;
}

/* ── PV-RESPONSIVE : adaptation ≤480px ─────────────────────────────────────── */

@media (max-width: 480px) {
  /* INVAR-PV-BTN-MOBILE-01 : toolbar compacte en ligne(s) — display:flex +
     flex-wrap:wrap déjà hérités de .pv-toolbar (ligne 565), pas d'empilement
     pleine largeur (corrigé BUG-PV-TOOLBAR-STACK-01 — les 5 boutons
     prenaient chacun 100% de largeur sur une ligne dédiée, gaspillant
     l'espace vertical avant le contenu). Nom + empreinte fichier restent
     sur leur propre ligne pour rester lisibles ; min-height 44px conservé
     sur tous les boutons (WCAG 2.5.5), min-width 44px ajouté aux toggles
     icône seule (↵ #) pour garantir une cible tactile carrée suffisante.
     INVAR-PV-BTN-MOBILE-02 (BUG-PV-TOOLBAR-CTA-ICON-01) : flex:0 0 auto
     étendu à TOUS les .pv-btn (pas seulement .pv-btn--toggle) — garde-fou
     défensif, aucun bouton toolbar ne doit pouvoir s'étirer en pleine
     largeur. Bouton CTA ("Se connecter pour télécharger", 30 caractères)
     passe en icône-seule ↓ (même convention que le bouton Télécharger
     normal) pour que les 4 boutons (↵ # CTA ←Retour) tiennent sur un seul
     rang au lieu de 3 lignes (repli visuel constaté par l'utilisateur). */
  .pv-toolbar { gap: .5rem; }
  .pv-toolbar__nom,
  .pv-toolbar__empreinte { flex: 1 1 100%; }
  .pv-btn { min-height: 44px; flex: 0 0 auto; }
  .pv-btn--toggle { flex: 0 0 auto; min-width: 44px; justify-content: center; }
  .pv-btn--cta {
    min-width: 44px;
    padding: .28rem .55rem;
    justify-content: center;
  }
  .pv-btn--cta .pv-btn__icone { display: inline; font-size: 1rem; }
  .pv-btn--cta .pv-btn__texte { display: none; }
}

/* ── FORM-INLINE : formulaires POST intégrés dans les cellules d'action ─────── */

.form-inline {
  display: inline;
  margin: 0;
  padding: 0;
}

/* ── MULTI-DOC-SELECTOR-01 : sélecteur type projet Mono/Multi ───────────────── */

.radio-group {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .4rem;
}
.radio-option {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .6rem .9rem;
  border: 2px solid var(--surface2, #2d3748);
  border-radius: 6px;
  cursor: pointer;
  /* MULTI-DOC-SELECTOR-WIDTH-01 : flex-basis:0 + flex-grow:1 — les deux options se
     partagent la largeur du .radio-group à parts égales, indépendamment de la longueur
     de leur texte (avant : chaque bouton se dimensionnait à son propre contenu, donnant
     "Mono doc" plus large que "Multi doc" — signalé sur la page /membre/projets/nouveau). */
  flex: 1 1 0;
  min-width: 150px;
  transition: border-color .15s;
}
.radio-option input[type="radio"] {
  display: none;
}
.radio-option span {
  font-weight: 600;
  color: var(--text, #e2e8f0);
}
.radio-option small {
  font-size: .78rem;
  color: var(--text-muted, #94a3b8);
}
.radio-option--actif,
.radio-option:has(input:checked) {
  border-color: var(--accent, #3b82f6);
  background: rgba(59, 130, 246, .08);
}
.radio-option:hover {
  border-color: var(--accent, #3b82f6);
}

/* ── MULTI-DOC-TREE-01 : arbre fichiers Multi doc ───────────────────────────── */

.pv-breadcrumb {
  display: flex;
  gap: .4rem;
  align-items: center;
  font-size: .85rem;
  margin-top: 1.25rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
  color: var(--text-muted, #94a3b8);
}
.pv-breadcrumb a {
  color: var(--accent, #3b82f6);
  text-decoration: none;
}
.pv-breadcrumb a:hover { text-decoration: underline; }
.pv-breadcrumb-sep { margin: 0 .1rem; }
.multi-doc-dossiers {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
  margin-bottom: 1rem;
}
.multi-doc-dossier {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .6rem;
  background: var(--surface2, #2d3748);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text, #e2e8f0);
  font-size: 1.2rem;
  border: 1px solid transparent;
  transition: background .12s;
}
.multi-doc-dossier:hover {
  background: var(--surface3, #374151);
  border-color: var(--accent, #3b82f6);
}
.multi-doc-dossier--remonter {
  color: var(--text-muted, #94a3b8);
  font-style: italic;
}

@media (max-width: 480px) {
  .radio-group { flex-direction: column; }
  /* MULTI-DOC-SELECTOR-WIDTH-01 : en colonne, flex:1 1 0 partagerait la HAUTEUR du
     conteneur (axe principal devient vertical) — on repasse flex-grow à 0 et on force
     width:100% pour que chaque option occupe toute la largeur, hauteur naturelle. */
  .radio-option { flex: 0 0 auto; min-width: 0; width: 100%; }
}

/* ── FORK-UI-DETAIL-01 : bouton fork dans page détail projet ────────────────── */
.projet-fork-action {
  margin: 1rem 0;
  padding: .75rem 1rem;
  background: var(--surface2, #2d3748);
  border-radius: 6px;
  border-left: 3px solid var(--accent, #3b82f6);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn-fork {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  background: var(--accent, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
}
.btn-fork:hover {
  background: var(--accent-hover, #2563eb);
}
.btn-fork:active {
  background: var(--accent-active, #1d4ed8);
}
.projet-fork-hint {
  margin: 0;
  font-size: .9rem;
  color: var(--text-muted, #94a3b8);
}
@media (max-width: 480px) {
  .projet-fork-action { flex-direction: column; align-items: flex-start; }
}

/* ── PROJ-SUPPR-DOSS-01 : bouton suppression dans la grille des dossiers ──── */
.multi-doc-dossier { position: relative; }
.doss-suppr-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}
.doss-suppr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: .3rem;
  padding: .1rem .25rem;
  font-size: 1.3rem;
  line-height: 1;
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  border-radius: 3px;
  transition: color .12s, background .12s;
  vertical-align: middle;
}
.doss-suppr-btn:hover {
  color: var(--danger, #ef4444);
  background: rgba(239,68,68,.12);
}

/* ── PROJ-RENAME-DOSS-01 : bouton et formulaire inline renommage dossier ──── */
.doss-renommer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: .3rem;
  padding: .1rem .25rem;
  font-size: .8rem;
  line-height: 1;
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  border-radius: 3px;
  transition: color .12s, background .12s;
  vertical-align: middle;
}
.doss-renommer-btn:hover {
  color: var(--accent, #60a5fa);
  background: rgba(96,165,250,.12);
}
.doss-renommer-form {
  display: none; /* affiché via afficherRenommerDossier() JS */
  align-items: center;
  gap: .25rem;
  margin-left: .3rem;
}
.doss-renommer-input {
  background: var(--surface2, #1e2235);
  border: 1px solid var(--accent, #60a5fa);
  border-radius: 4px;
  color: var(--text, #e2e8f0);
  font-size: .99rem;
  padding: .15rem .4rem;
  width: 9rem;
  outline: none;
}
.doss-renommer-input:focus {
  border-color: var(--accent-bright, #93c5fd);
  box-shadow: 0 0 0 2px rgba(96,165,250,.2);
}
.btn-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .15rem .35rem;
  font-size: .82rem;
  border: 1px solid var(--border, #2d3748);
  border-radius: 3px;
  background: var(--surface2, #1e2235);
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
  line-height: 1;
}
.btn-compact:hover {
  background: var(--surface3, #2a3249);
  color: var(--text, #e2e8f0);
}
.btn-compact.btn-confirm {
  border-color: var(--accent, #60a5fa);
  color: var(--accent, #60a5fa);
}
.btn-compact.btn-confirm:hover {
  background: rgba(96,165,250,.15);
  color: var(--accent-bright, #93c5fd);
}

/* ── MULTI-DOC-CREER-DOSSIER-01 : formulaire création sous-dossier ──────────── */
.multi-doc-creer-dossier {
  margin: .5rem 0 1rem 0;
}
.form-creer-dossier {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.creer-dossier-input {
  background: var(--surface2, #1e2235);
  border: 1px solid var(--border, #2d3748);
  border-radius: 4px;
  color: var(--text, #e2e8f0);
  font-size: .85rem;
  padding: .25rem .55rem;
  width: 14rem;
  outline: none;
  transition: border-color .15s;
}
.creer-dossier-input:focus {
  border-color: var(--accent, #60a5fa);
  box-shadow: 0 0 0 2px rgba(96,165,250,.15);
}
.creer-dossier-input::placeholder {
  color: var(--text-muted, #94a3b8);
  font-style: italic;
}

/* ── PROJ-SUPPR-01 : zone de danger suppression projet ───────────────────── */
.projet-zone-danger {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: rgba(239,68,68,.07);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 6px;
  border-left: 4px solid var(--danger, #ef4444);
}
.projet-zone-danger h3 {
  margin: 0 0 .5rem 0;
  font-size: 1rem;
  color: var(--danger, #ef4444);
  font-weight: 600;
}
.projet-zone-danger p {
  margin: 0 0 .75rem 0;
  font-size: .88rem;
  color: var(--text-muted, #94a3b8);
}
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1.1rem;
  font-size: .9rem;
  font-weight: 600;
  color: #000000 !important; /* membres.css override prevention : color: var(--danger) rouge sur rouge */
  background: var(--danger, #ef4444);
  border: 1px solid var(--danger, #ef4444);
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #000000 !important;
}
.btn-danger:active {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* ── PROJET-DETAIL-INFO-01 : bloc description stylé page détail projet ──────── */
.projet-detail-info {
  background: var(--surface, #0f1320);
  border: 1px solid var(--border, #2a3050);
  border-left: 3px solid var(--accent, #3b82f6);
  border-radius: 8px;
  padding: .85rem 1.1rem;
  margin: .85rem 0 1.5rem;
}
.projet-detail-desc {
  margin: 0;
  font-size: .9rem;
  color: var(--text, #e2e8f0);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.projet-detail-desc--vide {
  color: var(--muted, #6b7280);
  font-style: italic;
}

/* ── PROJET-DETAIL-STATS-ROW : compteurs fichiers/dossiers + quota ──────────── */
.projet-detail-stats-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.projet-detail-stat {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}
.projet-detail-stat strong {
  color: var(--text, #e2e8f0);
  font-weight: 600;
}
.projet-detail-stat-sep {
  width: 1px;
  height: 1em;
  background: var(--border, #2a3050);
  flex-shrink: 0;
  align-self: center;
}
/* quota intégré dans la ligne stats — pas de margin-bottom propre */
.projet-detail-stats-row .projets-quota-bar {
  flex: 1;
  min-width: 180px;
  margin-bottom: 0;
}

/* ── PROJ-ZIP-MEMBRES-01 : bouton ZIP membres non-propriétaires (ZIP-MEMBRES-01) ── */
.projet-actions-membres-zip {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .5rem 0;
}

/* ── PROJ-ZIP-MEMBRES-01 : badges licence et forks fermés (LICENCE-01 / GAP-05) ── */
.projet-card__badge--licence {
  background: rgba(251,191,36,.08);
  color: var(--warning, #fbbf24);
  border-color: rgba(251,191,36,.2);
}
.projet-card__badge--ferme {
  background: rgba(239,68,68,.08);
  color: var(--danger, #ef4444);
  border-color: rgba(239,68,68,.2);
}

/* ── FORK-LICENCE-01 : badge licence source dans page partages (FORK-LICENCE-01) ── */
.partage-card__licence {
  display: inline-block;
  font-size: .72rem;
  padding: .1rem .4rem;
  margin-left: .4rem;
  background: rgba(251,191,36,.08);
  color: var(--warning, #fbbf24);
  border: 1px solid rgba(251,191,36,.2);
  border-radius: 4px;
  vertical-align: middle;
}

/* ── PROJETS-AUDIT-FIX-01 : classes manquantes GAP-CSS-01 ───────────────────── */

/* Bouton CTA nouveau projet sur la liste des projets */
.btn-nouveau-projet {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  color: #0a0e1a;
  background: var(--cyan, #00c8ff);
  border: 1px solid var(--cyan, #00c8ff);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
}
.btn-nouveau-projet:hover { opacity: .85; }

/* Conteneur sélecteur type projet Mono/Multi dans le formulaire création */
.form-groupe--type-projet {
  padding: .75rem;
  background: rgba(59,130,246,.04);
  border: 1px solid rgba(59,130,246,.15);
  border-radius: 6px;
}

/* Lien "Voir le projet source" dans une partage-card */
.partage-card__voir {
  display: inline-flex;
  align-items: center;
  font-size: .82rem;
  color: var(--accent, #3b82f6);
  text-decoration: none;
  gap: .25rem;
}
.partage-card__voir:hover { text-decoration: underline; }

/* Texte "Projet source supprimé" quand la source est indisponible */
.partage-card__indisponible {
  font-size: .82rem;
  color: var(--muted, #6b7280);
  font-style: italic;
}

/* Form wrapper du bouton Retirer fork dans une partage-card */
.partage-card__departager {
  display: inline-flex;
  align-items: center;
}

/* Variante compacte du bouton danger (Retirer fork) */
.btn-danger-small {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .6rem;
  font-size: .8rem;
  font-weight: 500;
  color: #ffffff;
  background: var(--danger, #ef4444);
  border: 1px solid var(--danger, #ef4444);
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.btn-danger-small:hover {
  background: #dc2626;
  border-color: #dc2626;
}
.btn-danger-small:active {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* Paragraphe info Multi doc dans le formulaire création */
.projet-multi-info {
  font-size: .82rem;
  color: var(--muted, #6b7280);
  font-style: italic;
  margin: .35rem 0 0 0;
  line-height: 1.4;
}

/* Bouton Annuler (upload, édition) — neutre, sans couleur danger */
.btn-annuler {
  display: inline-flex;
  align-items: center;
  padding: .42rem .9rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted, #94a3b8);
  background: var(--surface2, #1a1f2e);
  border: 1px solid var(--border, #2a3050);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.btn-annuler:hover {
  background: var(--surface3, #2a3249);
  color: var(--text, #e2e8f0);
}

/* ── PROJETS-MODAL-01 : modale de confirmation cockpit dark ──────────────────── */

.proj-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.proj-modal-dialog {
  background: var(--surface, #0f1320);
  border: 1px solid var(--border, #2a3050);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  max-width: 420px;
  width: calc(100% - 2rem);
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.proj-modal-titre {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, #e2e8f0);
}

.proj-modal-msg {
  margin: 0;
  font-size: .9rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.5;
}

.proj-modal-actions {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: .2rem;
}

.proj-modal-btn {
  display: inline-flex;
  align-items: center;
  padding: .4rem .9rem;
  font-size: .875rem;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}

.proj-modal-btn--danger {
  background: var(--danger, #ef4444);
  border: 1px solid var(--danger, #ef4444);
  color: #ffffff;
}
.proj-modal-btn--danger:hover {
  background: #dc2626;
  border-color: #dc2626;
}

.proj-modal-btn--annuler {
  background: var(--surface2, #1a1f2e);
  border: 1px solid var(--border, #2a3050);
  color: var(--text-muted, #94a3b8);
}
.proj-modal-btn--annuler:hover {
  background: var(--surface3, #2a3249);
  color: var(--text, #e2e8f0);
}

/* ── PROJETS-UPLOAD-SPINNER-01 : bandeau envoi en cours (upload fichier) ─────── */

.proj-upload-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.proj-upload-panel {
  background: var(--surface, #0f1320);
  border: 1px solid var(--border, #2a3050);
  border-radius: 10px;
  padding: 2rem 2.25rem;
  max-width: 380px;
  width: calc(100% - 2rem);
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}

@keyframes proj-upload-spin {
  to { transform: rotate(360deg); }
}

.proj-upload-spinner {
  width: 2.75rem;
  height: 2.75rem;
  border: 4px solid var(--border, #2a3050);
  border-top-color: var(--accent, #3b82f6);
  border-radius: 50%;
  animation: proj-upload-spin .8s linear infinite;
}

.proj-upload-titre {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, #e2e8f0);
}

.proj-upload-msg {
  margin: 0;
  font-size: .875rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.5;
}

.btn-annuler-upload {
  margin-top: .5rem;
  background: transparent;
  border: 1px solid var(--border, #2a3050);
  border-radius: 6px;
  color: var(--text, #e2e8f0);
  font-size: .85rem;
  padding: .45rem 1rem;
  cursor: pointer;
}

.btn-annuler-upload:hover {
  border-color: rgba(220, 38, 38, .5);
  color: #fca5a5;
}

@media (prefers-reduced-motion: reduce) {
  .proj-upload-spinner { animation-duration: 2.4s; }
}