/* Cinq pièces de la plateforme : reprend les cartes .u7-carte du mix */
.p5-grille { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 1.6vw, 24px); max-width: 1320px; margin: clamp(32px, 4vw, 56px) auto 0; }
.p5-carte { grid-column: span 2; min-height: 420px; }
.p5-c-compose, .p5-c-agents { grid-column: span 3; }
.p5-piece { margin: 0 0 10px; font: 500 var(--t-xs)/1 var(--police-donnees); letter-spacing: 0.04em; text-transform: uppercase; color: var(--texte-doux); }
.p5-carte h3 { font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); }
.p5-visuel { margin: auto 0 18px; padding-top: 22px; }
.p5-lien { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; min-height: 44px; border-radius: 12px; background: var(--fond); border: 1px solid var(--bordure); color: var(--texte); text-decoration: none; font-weight: 500; }
.p5-lien .u7-ico { width: 16px; height: 16px; }
.p5-lien:hover .u7-plus__f, .p5-lien:focus-visible .u7-plus__f { transform: translateX(3px); background: var(--accent); color: #101211; }
.u7-carte--sombre .p5-lien { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.18); }
.u7-carte--sombre .p5-lien .u7-plus__f { background: rgb(255 255 255 / 0.1); }
.p5-fil { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--bordure); display: grid; gap: 14px; font-size: var(--t-s); color: var(--texte-doux); }
.p5-fil li { position: relative; } .p5-fil li::before { content: ""; position: absolute; left: -25px; top: 0.35em; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--bordure); }
.p5-fil b { color: var(--texte); font-weight: 600; } .p5-fil--actif::before { background: var(--accent) !important; border-color: var(--texte) !important; }
.p5-ecran { padding: 16px; border-radius: 14px; background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.14); }
.p5-ecran__t { display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px; font-weight: 500; }
.p5-ecran ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--t-s); color: var(--texte-doux); }
.p5-ecran li { display: flex; gap: 10px; align-items: center; }
.p5-pills { justify-content: flex-start; } .p5-c-connect .u7-hub { margin-left: 0; }
.p5-graphe { margin: 0; padding: 14px; border-radius: 14px; background: var(--fond); border: 1px solid var(--bordure); max-width: 420px; }
.p5-graphe figcaption { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-xs); font-weight: 500; margin-bottom: 8px; }
.p5-graphe svg { display: block; width: 100%; }
ul.p5-agents { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
ul.p5-agents li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.16); font-size: var(--t-s); }
.p5-rond { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); } .p5-rond--equipe { background: #ECEEED; } .p5-rond--travail { background: #6F7673; }
.p5-resp { margin: 14px 0 0; font-size: var(--t-xs); color: var(--texte-doux); }
@media (max-width: 1000px) { .p5-grille { grid-template-columns: 1fr; } .p5-carte, .p5-c-compose, .p5-c-agents { grid-column: auto; min-height: 0; } }