/* Huit modules en grille bento (12 colonnes >= 1024px), chaque tuile avec son mini-visuel HTML/CSS. */
.bento { display: grid; gap: 16px; margin-top: 48px; }
.tuile { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: var(--surface); border: 1px solid var(--trait); border-radius: 20px; overflow: hidden; transition: translate 250ms, box-shadow 250ms, border-color 250ms; }
.tuile:hover { translate: 0 -4px; box-shadow: var(--ombre); border-color: color-mix(in srgb, var(--marque) 45%, var(--trait)); }
.tuile h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.tuile > p { max-width: 42ch; color: var(--texte-attenue); font-size: 0.9375rem; }
.mv { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 120px; margin-top: 16px; font-size: 0.75rem; }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .t-projets { grid-column: span 7; } .t-planif { grid-column: span 5; }
  .t-equipe, .t-budget, .t-suivi { grid-column: span 4; }
  .t-comm { grid-column: span 3; } .t-risques { grid-column: span 5; } .t-docs { grid-column: span 4; }
}

.mv-cartes { position: relative; gap: 8px; }
.mv-cartes .carte-mq { display: flex; align-items: center; gap: 8px; font-weight: 500; transition: translate 300ms; }
.mv-cartes .carte-mq b { color: var(--texte-attenue); font-weight: 600; }
.mv-cartes .carte-mq .pastille { margin-left: auto; }
.mv-cartes .carte-mq:nth-child(2) { margin-left: 18px; } .mv-cartes .carte-mq:nth-child(3) { margin-left: 36px; }
.tuile:hover .mv-cartes .carte-mq:nth-child(2) { translate: 6px 0; } .tuile:hover .mv-cartes .carte-mq:nth-child(3) { translate: 12px 0; }

.mv-gantt { gap: 10px; }
.mg { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px; }
.mg span { color: var(--texte-attenue); font-weight: 600; }
.mg i { display: block; height: 14px; border-radius: 5px; background: var(--marque); transform-origin: left; scale: 0.75 1; transition: scale 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.mg .douce { background: var(--barre-douce); }
.mg-1 i { width: 56%; } .mg-2 i { width: 60%; margin-left: 16%; } .mg-3 i { width: 40%; margin-left: 46%; }
.tuile:hover .mg i { scale: 1 1; }

.pile { display: flex; } .pile .avatar { width: 34px; height: 34px; margin-left: -8px; border: 2px solid var(--surface); font-size: 0.75rem; transition: margin 250ms; }
.pile .avatar:first-child { margin-left: 0; }
.tuile:hover .pile .avatar { margin-left: -2px; } .tuile:hover .pile .avatar:first-child { margin-left: 0; }
.roles-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.mv-budget .gros { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.mv-budget .gros small { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; color: var(--texte-attenue); }
.mv-budget .jauge-budget { margin: 12px 0 8px; } .mv-budget .jauge-budget span { width: 78%; scale: 0.923 1; transform-origin: left; transition: scale 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.tuile:hover .mv-budget .jauge-budget span { scale: 1 1; }
.mv-budget p { color: var(--texte-attenue); }

.mv-suivi .gros { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.spark { display: block; width: 100%; height: 56px; margin-top: 12px; overflow: visible; }
.spark path { fill: none; stroke: var(--marque); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; transition: stroke-dashoffset 800ms ease-out; }
.spark .ideal { stroke: var(--neutre-point); stroke-width: 1.5; stroke-dasharray: 4 4; }

.bulle { display: flex; gap: 8px; align-items: flex-start; }
.bulle p { padding: 8px 10px; border: 1px solid var(--trait); border-radius: 4px 12px 12px 12px; background: var(--surface-2); font-size: 0.8125rem; line-height: 1.4; }
.bulle .mention { color: var(--marque-texte); font-weight: 700; }
.bulle + .bulle { margin-top: 8px; }

.mini-matrice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-width: 280px; }
.mini-matrice .rc { height: 36px; border-radius: 6px; transition: scale 200ms; }
.tuile:hover .mini-matrice .rc-c { scale: 1.06; }

.fichiers { position: relative; display: grid; gap: 6px; }
.fichier { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 9px; background: var(--surface); font-weight: 500; transition: translate 300ms; }
.fichier .pastille { margin-left: auto; }
.fichier:nth-child(2) { margin-left: 14px; } .fichier:nth-child(3) { margin-left: 28px; }
.tuile:hover .fichier:nth-child(2) { translate: 5px 0; } .tuile:hover .fichier:nth-child(3) { translate: 10px 0; }
.mv-budget p.gros { color: var(--texte); }
.mv-cartes .carte-mq { white-space: nowrap; }
@media (max-width: 639px) { .mv-cartes .carte-mq:nth-child(n) { margin-left: 0; } .tuile:hover .mv-cartes .carte-mq { translate: 0 0; } }
.mv.fichiers { justify-content: stretch; align-content: end; }