/* Du Bois, lot 2 : serveur, courriel, boutique, vitrine (chargé après dubois.css).
   Classes lot2-* ; elles n'existent que dans ces quatre pages. */

/* Le rang : n cases (les fiches de la section), la case de la fiche pleine.
   Remplace le cube générique des cq-card__id. */
.lot2-rang {
  display: grid; grid-template-columns: repeat(min(var(--n), 3), minmax(0, 1fr));
  gap: 4px; width: 3.6rem;
}
.lot2-rang[style*="--n:4"], .lot2-rang[style*="--n:2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 2.6rem; }
.lot2-rang i { display: block; aspect-ratio: 1; border: 2px solid currentColor; opacity: .55; }
.lot2-rang i.on { background: currentColor; opacity: 1; }

/* La plaque : la colonne de bandes devient une forme dessinée, posée en haut,
   sur le papier ; plus de grand bloc de couleur le long d'un texte long. */
.cq-plate__img.lot2-forme {
  margin: 0; min-height: 0; background: none !important; background-image: none !important;
  display: flex; flex-direction: column; gap: .9rem; padding: 2.2rem 1.6rem;
}
.lot2-forme svg { display: block; width: 100%; height: auto; }
.lot2-forme .db-legende { margin: 0; }

/* Courriel : les trois réglages, puis la frise des règles qui se durcissent. */
.lot2-reglages { display: grid; gap: .35rem; }
.lot2-reglages i {
  display: block; padding: .35rem .6rem .2rem; font-style: normal;
  font-family: var(--db-affiche); font-size: 1.6rem; letter-spacing: .06em; line-height: 1;
}
.lot2-reglages i:nth-child(1) { background: var(--db-rouge); color: var(--db-or-clair); }
.lot2-reglages i:nth-child(2) { background: var(--db-or); color: var(--db-encre); }
.lot2-reglages i:nth-child(3) { background: var(--db-vert); color: var(--db-creme); }
.lot2-jalons { list-style: none; margin: .8rem 0 0; padding: 0 0 0 1rem; border-left: 6px solid var(--db-encre); display: grid; gap: 1rem; }
.lot2-jalons li { font-size: .78rem; line-height: 1.4; color: var(--db-encre-2); }
.lot2-jalons b {
  display: block; font-family: var(--db-affiche); font-weight: 400; font-size: 1.5rem;
  letter-spacing: .03em; text-transform: uppercase; color: var(--db-encre); line-height: 1.05;
}
.lot2-jalons__suite b { color: var(--db-rouge); }

/* Boutique : la chaîne d'une commande, un maillon lâché. */
.lot2-chaine { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lot2-chaine li {
  font-family: var(--db-affiche); font-size: 1.5rem; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1; padding: .55rem .7rem .4rem; background: var(--db-vert); color: var(--db-creme);
  border-bottom: 10px solid var(--db-papier); position: relative;
}
.lot2-chaine li::after {
  content: ""; position: absolute; left: 50%; bottom: -10px; width: 6px; height: 10px;
  margin-left: -3px; background: var(--db-encre);
}
.lot2-chaine li:last-child { border-bottom: 0; }
.lot2-chaine li:last-child::after, .lot2-chaine__casse::after,
.lot2-chaine li:has(+ .lot2-chaine__casse)::after { content: none; }
.lot2-chaine li.lot2-chaine__casse { background: var(--db-rouge); color: var(--db-or-clair); transform: translateX(.8rem) rotate(-3deg); }

/* Les paliers dans le panneau encre du hero : texte crème, prix or clair. */
.cq-panneau > .db-legende { color: var(--db-fumee-clair); margin: .2rem 0 .9rem; }
.lot2-paliers-nuit { margin-bottom: .4rem; }
.lot2-paliers-nuit .db-barre {
  grid-template-columns: minmax(0, 4.6rem) minmax(0, 1fr) minmax(0, 3.6rem) minmax(0, 2.6rem);
  gap: .6rem; color: var(--db-creme);
}
.lot2-paliers-nuit .db-barre b { color: var(--db-or-clair); font-size: 1.4rem; }
.lot2-paliers-nuit .db-barre em { color: var(--db-or); }
.lot2-paliers-nuit .db-barre--3 i { background: var(--db-creme); }

/* Le délai, à la même échelle que le prix : sous la bande de prix. */
.lot2-delais {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--db-gouttiere) 3.5rem;
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1.4rem 3rem; align-items: center;
}
.lot2-delais h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin: 0 0 .5rem; }
.lot2-delais .db-legende { margin: 0; }
.lot2-delais .db-paliers { border-left: 6px solid var(--db-rouge); padding-left: 1.4rem; }

/* Vitrine : le relevé des services sous la plaque. */
.lot2-releve { max-width: 40rem; margin-top: 2rem; }
/* Dans une section claire, le correctif global met les h2 en encre (encre sur encre) : on rend l'or du relevé. */
section.section .db-releve.lot2-releve h2 { color: var(--db-or); font-size: 2.3rem; }

@media (max-width: 760px) {
  .cq-plate__img.lot2-forme { flex-direction: row; align-items: center; padding: 1.2rem; }
  .lot2-forme svg { width: 6.5rem; flex: none; }
  .cq-plate__img.lot2-forme:has(.lot2-jalons) { flex-wrap: wrap; }
  .lot2-forme .lot2-jalons { flex: 1 1 100%; }
  .lot2-delais { grid-template-columns: minmax(0, 1fr); }
  .lot2-delais .db-paliers { padding-left: .9rem; }
  .lot2-paliers-nuit .db-barre { grid-template-columns: minmax(0, 1fr) minmax(0, 3.4rem) minmax(0, 2.6rem); }
  .lot2-paliers-nuit .db-barre span { grid-column: 1 / -1; }
}

/* ==========================================================================
   LOT 7 : loi-25, gouvernance, fiche-fournisseur (selection-fournisseur : page périmée, non construite).
   Tout est scopé par la classe de page (pageclass() de build.py).
   ========================================================================== */
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .cq-card__id svg.db7-compte {
  width: 3.4rem; height: auto; margin: .5rem 0;
}

/* Colonne de plaque : le graphique se pose en haut, plus de grand bloc de bandes */
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .cq-plate__img:is(.db7-aire, .db7-sceau, .db7-graph) {
  background-image: none !important; background-color: var(--db-creme) !important;
  min-height: 0; margin: 0;
}
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-aire,
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-graph {
  padding: 2.2rem 1.4rem; display: flex; flex-direction: column; gap: 1rem;
}
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-aire svg,
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-graph svg {
  display: block; width: 100%; height: auto;
}
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-aire figcaption,
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-graph figcaption {
  display: grid; gap: .7rem; font-size: .8rem; line-height: 1.35;
}
/* Clés de légende : une case de couleur, un libellé */
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-cle {
  display: grid; grid-template-columns: .9rem minmax(0, 1fr); gap: .6rem; align-items: start;
}
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-cle::before {
  content: ""; width: .9rem; height: .9rem; margin-top: .15rem;
}
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-cle--rouge::before { background: var(--db-rouge); }
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-cle--or::before { background: var(--db-or); outline: 1.5px solid var(--db-encre); outline-offset: -1.5px; }
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-cle--vert::before { background: var(--db-vert); }
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-cle--encre::before { background: var(--db-encre); }

/* Obligations : une éteinte (émeraude), les autres restent (rouge) */
.p-fiche-fournisseur .db7-oblig { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.p-fiche-fournisseur .db7-oblig li {
  padding: .65rem .8rem; font-size: .8rem; line-height: 1.25; font-weight: 700;
  background: var(--db-rouge); color: var(--db-or-clair);
}
.p-fiche-fournisseur .db7-oblig li.db7-oblig--eteinte {
  background: var(--db-vert); color: var(--db-creme); text-decoration: line-through; text-decoration-thickness: 2px;
}

/* Sceau sobre (plaque sans chiffre) : anneau d'encre, disque rouge, cœur or */
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .cq-plate__img.db7-sceau {
  background-image: radial-gradient(circle at 50% 7.5rem,
    var(--db-or) 0 1.6rem, var(--db-rouge) 1.6rem 3.6rem, var(--db-creme) 3.6rem 4rem,
    var(--db-encre) 4rem 5.2rem, transparent 5.2rem) !important;
  background-repeat: no-repeat !important;
  min-height: 15rem;
}

/* Le chiffre de la plaque, en affiche */
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-un__chiffre {
  font-family: var(--db-affiche); font-weight: 400; font-size: 3.6rem; line-height: .9; color: var(--db-rouge);
}
:is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-graph .db-jours { max-width: none; }

/* Les gestes en ordre : une frise verticale de champs de couleur */
:is(.p-gouvernance, .p-fiche-fournisseur) .db7-etapes {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: db7e;
}
:is(.p-gouvernance, .p-fiche-fournisseur) .db7-etapes li {
  counter-increment: db7e; padding: .7rem .8rem; font-size: .82rem; line-height: 1.25; font-weight: 700;
  background: var(--db-rouge); color: var(--db-or-clair);
}
:is(.p-gouvernance, .p-fiche-fournisseur) .db7-etapes li::before {
  content: counter(db7e, decimal-leading-zero); display: block;
  font-family: var(--db-affiche); font-weight: 400; font-size: 1.7rem; line-height: 1;
}
:is(.p-gouvernance, .p-fiche-fournisseur) .db7-etapes li:nth-child(4n+2) { background: var(--db-or); color: var(--db-encre); }
:is(.p-gouvernance, .p-fiche-fournisseur) .db7-etapes li:nth-child(4n+3) { background: var(--db-vert); color: var(--db-creme); }
:is(.p-gouvernance, .p-fiche-fournisseur) .db7-etapes li:nth-child(4n+4) { background: var(--db-encre); color: var(--db-or); }

@media (max-width: 760px) {
  :is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-aire,
  :is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .db7-graph {
    padding: 1.4rem 1.2rem; display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); align-items: start;
  }
  :is(.p-loi-25, .p-gouvernance, .p-fiche-fournisseur) .cq-plate__img.db7-sceau {
    min-height: 11rem; background-position: 0 -2rem !important;
  }
}