/* Du Bois, lot 5 : ia, ia-securite, integrite-ia, automatisation.
   Chargé après dubois.css. Classes préfixées l5-, toutes portées par ces quatre pages. */

/* Le disque d'étape : n secteurs, k pleins (remplace le cube générique des cartes). */
.cq-card__id svg.l5-disque { width: 4.2rem; height: auto; }

/* La plaque : la colonne de bandes devient un vrai graphique sur carton (pas de crimson sur encre). */
.cq-plate .cq-plate__img.l5-fig {
  background: var(--db-carton) !important; background-image: none !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.1rem; padding: 1.8rem 1.2rem; min-height: 0; color: var(--db-encre);
}
.l5-fig svg { display: block; width: 100%; max-width: 10rem; height: auto; }
.l5-fig .db-legende { color: var(--db-encre-2); text-align: center; margin: 0; }
.l5-t-r, .l5-t-o, .l5-t-v { fill: none; stroke-width: 9; }
.l5-t-r { stroke: var(--db-rouge); }
.l5-t-o { stroke: var(--db-or); }
.l5-t-v { stroke: var(--db-vert); }
.l5-anneaux { mix-blend-mode: normal; }
.l5-cles { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.l5-cles li {
  display: flex; align-items: center; gap: .6rem; font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--db-encre);
}
.l5-cles i { display: block; width: 1.1rem; height: .7rem; }
.l5-k-r { background: var(--db-rouge); }
.l5-k-o { background: var(--db-or); }
.l5-k-v { background: var(--db-vert); }
.l5-k-c { background: var(--db-creme); }
.l5-k-f { background: var(--db-fumee); }
.l5-k-e { background: var(--db-encre); }

/* Plages d'heures gagnées : une barre de a à b sur une échelle de 0 à 5 h. */
.l5-plages { width: 100%; max-width: 11rem; display: grid; gap: .55rem; }
.l5-plage { margin: 0; display: grid; gap: .2rem; }
.l5-plage span { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--db-encre); }
.l5-plage i {
  display: block; height: .9rem; border-bottom: 2px solid var(--db-encre);
  background: linear-gradient(90deg, transparent calc(var(--a) * 20%), var(--c, var(--db-rouge)) calc(var(--a) * 20%),
    var(--c, var(--db-rouge)) calc(var(--b) * 20%), transparent calc(var(--b) * 20%));
}
.l5-plage:nth-child(2) i { --c: var(--db-or); }
.l5-plage:nth-child(3) i { --c: var(--db-vert); }
.l5-plage:nth-child(4) i { --c: var(--db-encre); }
.l5-plage__echelle { margin: 0; display: flex; justify-content: space-between; font-size: .7rem; letter-spacing: .14em; color: var(--db-encre-2); }

/* Calendrier de reprise : une case par jour perdu, rangées de 7. */
.l5-cal { width: 100%; max-width: 10rem; display: grid; gap: .45rem; }
.l5-cal .db-legende { text-align: left; }
.l5-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.l5-jours i { display: block; aspect-ratio: 1; background: var(--db-rouge); }
.l5-jours--v i { background: var(--db-vert); }
.l5-cal__n { margin: 0; font-family: var(--db-affiche); font-size: 1.7rem; line-height: 1; color: var(--db-encre); letter-spacing: .02em; text-transform: uppercase; }

/* Le modèle et ses couches ; du simple au sextuple. */
.l5-f-c { fill: var(--db-papier); }
.l5-x { width: 100%; max-width: 10rem; display: grid; gap: .4rem; }
.l5-x__ligne { margin: 0; display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: .5rem; }
.l5-x__ligne b { font-family: var(--db-affiche); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--db-encre); }
.l5-x__ligne i { display: block; height: 1.1rem; width: var(--w); background: var(--db-rouge); }
.l5-x__ligne:first-child i { background: var(--db-fumee-clair); }
.l5-x .db-legende { text-align: left; margin-top: .3rem; }
.l5-x__ligne.l5-x__ligne--seul i { background: var(--db-rouge); }

/* Le relevé du mardi : une case par corvée, rangée par sorte. */
.l5-tally { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 10rem; display: grid; gap: .45rem; }
.l5-tally li {
  display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; gap: .6rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--db-encre);
}
.l5-tally__cases { display: flex; gap: 4px; }
.l5-tally__cases i { display: block; width: 1.3rem; height: 1.3rem; }

@media (max-width: 760px) {
  .cq-plate .cq-plate__img.l5-fig { flex-direction: row; flex-wrap: wrap; gap: 1rem 1.4rem; padding: 1.2rem; }
  .l5-fig svg { max-width: 6.5rem; }
  .cq-card__id svg.l5-disque { width: 2.6rem; }
}