/* Du Bois, lot 4 : wordpress, drupal, securite, statut (chargé après dubois.css).
   Classes l4-* : elles n'existent que dans les pages du lot 4. */

/* Boutons de hero et de plaque : une seule ligne par libellé. */
:is(.p-wordpress, .p-drupal, .p-securite, .p-statut) .cq-plaque-btn span { white-space: nowrap; }

/* ---------- Le panneau du hero porte un vrai graphique (.db-paliers) ---------- */
.l4-paliers { gap: 1rem; padding-top: .4rem; }
.l4-paliers .db-barre {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .35rem .9rem; color: var(--db-creme);
}
.l4-paliers .db-barre span { grid-column: 1; }
.l4-paliers .db-barre i { grid-column: 1 / -1; grid-row: 2; height: 1.1rem; }
.l4-paliers .db-barre b { color: var(--db-or-clair); font-size: 1.5rem; line-height: 1; }
.l4-paliers .db-barre em { color: var(--db-or-clair); text-align: right; }
.l4-paliers .db-barre--3 i { background: var(--db-creme); } /* pas de crimson sur l'encre */
.cq-panneau .db-legende { color: var(--db-fumee-clair); margin: 1rem 0 0; }

/* ---------- Les plaques : la colonne de bandes devient une figure ---------- */
.cq-plate .cq-plate__img.l4-fig {
  background: var(--db-papier) !important; background-image: none !important;
  min-height: 0; padding: 2.2rem 1.4rem; display: flex; flex-direction: column;
  gap: 1rem; justify-content: flex-start;
}
.l4-fig .db-legende { margin: 0; }
.l4-fig__titre { font-family: var(--db-affiche); font-size: 1.9rem; line-height: 1; text-transform: uppercase; letter-spacing: .05em; margin: 0; color: var(--db-encre); }

/* Blocs empilés étiquetés (liste, pas une mesure : blocs égaux). */
.l4-blocs { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.l4-blocs li { display: grid; gap: .3rem; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
.l4-blocs li::before { content: ""; display: block; height: 2.6rem; background: var(--db-rouge); }
.l4-blocs li:nth-child(2)::before { background: var(--db-or); }
.l4-blocs li:nth-child(3)::before { background: var(--db-vert); }
.l4-blocs li:nth-child(4)::before { background: var(--db-encre); }
.l4-blocs li.l4-non { color: var(--db-fumee); }
.l4-blocs li.l4-non::before { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--db-fumee-clair) 6px 8px); outline: 2px solid var(--db-fumee); outline-offset: -2px; }

/* Carrés croissants (échelle ordinale, pas une mesure). */
.l4-echelle { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.l4-echelle li { display: grid; gap: .35rem; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
.l4-echelle li::before { content: ""; display: block; aspect-ratio: 1; width: calc(var(--k) * 2.4rem); background: var(--db-rouge); }
.l4-echelle li:nth-child(2)::before { background: var(--db-or); }
.l4-echelle li:nth-child(3)::before { background: var(--db-encre); }

/* Cartes numérotées : la bande d'étapes remplace le cube (k cases pleines sur n). */
.l4-etapes { width: 4.8rem; height: auto; }
.l4-etapes rect { fill: currentColor; stroke: currentColor; stroke-width: 2; }
.l4-etapes rect.v { fill: none; }

/* ---------- securite ---------- */
/* Panneau : quatre carrés, un par volet coté (or, émeraude, crème, or clair : pas de crimson sur l'encre). */
.l4-cles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: 1.2rem; }
.l4-cles i { display: block; aspect-ratio: 1; background: var(--db-or); }
.l4-cles i:nth-child(2) { background: var(--db-vert); }
.l4-cles i:nth-child(3) { background: var(--db-creme); }
.l4-cles i:nth-child(4) { background: var(--db-or-clair); }
/* Cas S-01 / S-02 : un seul carré, plein = déjà entré, vide = pas encore. */
.l4-etapes--un { width: 2.4rem; }
/* Promesses tenues (rendues par build.py depuis verite.py) : chaque carte porte son
   rang en carré crimson ; le compte suit verite.py tout seul, aucun chiffre en dur. */
.p-securite #posture .cards2 { counter-reset: l4-promesse; }
.p-securite #posture .card { counter-increment: l4-promesse; position: relative; padding-left: 4.4rem; }
.p-securite #posture .card::before {
  content: counter(l4-promesse, decimal-leading-zero);
  position: absolute; left: 0; top: 0; bottom: 0; width: 3.2rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--db-rouge); color: var(--db-or-clair);
  font-family: var(--db-affiche); font-size: 1.7rem; letter-spacing: .04em;
}

@media (max-width: 760px) {
  .cq-plate .cq-plate__img.l4-fig { padding: 1.4rem 1.2rem; border-bottom: 2px solid var(--db-or-filet); }
  .l4-blocs { grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); }
  .l4-etapes { width: 3.4rem; }
}

/* ==========================================================================
   LOT 9 : à propos, contact, gabarit des articles. Règles préfixées par la
   classe de page (.p-a-propos, .p-contact) ou par .db-article.
   ========================================================================== */

/* ---- À propos : hero en trois temps (texte, spirale, relevé) ---- */
.p-a-propos .cq-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, .95fr); gap: 2rem 2.4rem; }
.p-a-propos .ap-spirale { margin: 0; text-align: center; color: var(--db-rouge); }
.p-a-propos .ap-spirale .db-spirale { max-width: 17rem; }
.p-a-propos .ap-spirale .db-legende { margin-top: .6rem; }

/* Les mesures : deux graphiques, 11 cases (11 ans) et la gaufre vide (0 commission). */
.p-a-propos .db-mesures__rangee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-a-propos .ap-onze { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; align-self: end; }
.p-a-propos .ap-onze i { display: block; aspect-ratio: 1 / 3; background: var(--db-or); }
.p-a-propos .ap-onze i.on { background: var(--db-rouge); }

/* Les plaques : le graphique remplace les bandes décoratives. */
.p-a-propos .cq-plate__img.ap-forme,
.p-a-propos .cq-plate__img.ap-porte { background-image: none !important; background: var(--db-carton) !important; }
.p-a-propos .ap-forme { display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem; gap: .7rem; }
.p-a-propos .ap-forme svg { display: block; width: 100%; max-width: 11rem; margin: 0 auto; }
.p-a-propos .ap-forme .db-legende { margin: 0; text-align: center; }
.p-a-propos #commencer .cq-plate__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
.p-a-propos .ap-porte { padding: 1.6rem; align-self: stretch; display: flex; align-items: center; }
.p-a-propos .ap-porte .db-releve { width: 100%; }

/* La compétence rare : trois cercles à gauche du texte. */
.p-a-propos .ap-trois { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: .4rem 2rem; align-items: center; }
.p-a-propos .ap-venn { grid-row: 1 / span 2; width: 100%; height: auto; }
.p-a-propos .ap-venn__t { font-family: var(--db-machine); font-weight: 700; font-size: 11px; letter-spacing: .08em; fill: var(--db-creme); }
.p-a-propos .ap-venn__t--k { fill: var(--db-encre); }

@media (max-width: 980px) {
  .p-a-propos .cq-hero { grid-template-columns: minmax(0, 1fr); }
  .p-a-propos .ap-spirale .db-spirale { max-width: 13rem; }
  .p-a-propos .db-mesures__rangee { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .p-a-propos #commencer .cq-plate__grid { grid-template-columns: minmax(0, 1fr); }
  .p-a-propos .ap-forme { flex-direction: row; align-items: center; justify-content: center; padding: 1rem; }
  .p-a-propos .ap-forme svg { max-width: 5rem; margin: 0; }
  .p-a-propos .ap-trois { grid-template-columns: minmax(0, 1fr); }
  .p-a-propos .ap-venn { grid-row: auto; max-width: 13rem; }
}

/* ---- Contact : les délais de dépannage, la semaine de réponse ---- */
.p-contact .cq-plate__img.ct-delais,
.p-contact .cq-plate__img.ct-semaine { background-image: none !important; background: var(--db-carton) !important; }
.p-contact #ecrire .cq-plate__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); }
.p-contact .ct-delais { padding: 2rem 1.6rem; display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; }
.p-contact .ct-delais h3 { font-size: 2.3rem; margin: 0 0 .4rem; color: var(--db-rouge); }
.p-contact .ct-delais .db-legende { margin: 0; }
.p-contact .ct-delais .db-barre { grid-template-columns: minmax(0, 5.2rem) minmax(0, 1fr) minmax(0, 3.4rem); gap: .6rem; }
.p-contact .ct-delais .db-barre em { grid-column: 2 / -1; margin-top: -.4rem; font-size: .72rem; }
.p-contact .ct-semaine { margin: 0; padding: 1.6rem 1.2rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .9rem; }
.p-contact .ct-semaine__jours { display: grid; gap: 4px; }
.p-contact .ct-semaine__jours i { display: flex; align-items: center; justify-content: center; height: 3.4rem; border: 2px solid var(--db-fumee); }
.p-contact .ct-semaine__jours i.on { background: var(--db-vert); border-color: var(--db-vert); }
.p-contact .ct-semaine__jours b { font-family: var(--db-affiche); font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--db-encre-2); }
.p-contact .ct-semaine__jours i.on b { color: var(--db-creme); }
.p-contact .ct-semaine .db-legende { margin: 0; text-align: center; }

@media (max-width: 760px) {
  .p-contact #ecrire .cq-plate__grid { grid-template-columns: minmax(0, 1fr); }
  .p-contact .ct-delais { padding: 1.4rem 1.2rem; }
  .p-contact .ct-delais .db-barre span { grid-column: auto; }
  .p-contact .ct-semaine__jours { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .p-contact .ct-semaine__jours i { height: 2.6rem; }
}