/* ==========================================================================
   Du Bois, lot 3 : urgence, expert-de-garde, fuite-donnees, reservation.
   Chargé après dubois.css. Classes l3-* propres au lot.
   ========================================================================== */

/* La colonne d'image des plaques devient une planche de graphique (l3-fig). */
/* Au-dessus de 760 px seulement : sous ce seuil, le socle empile (img, head, body). */
@media (min-width: 761px) {
  .cq-plate--image .cq-plate__grid:has(> .l3-fig) { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); }
  .cq-plate--miroir .cq-plate__grid:has(> .l3-fig) { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
}
.cq-plate__img.l3-fig {
  margin: 0; min-height: 0; padding: 2rem 1.8rem;
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  background: var(--db-creme) !important; background-image: none !important;
}
.l3-fig h3 { font-size: 1.7rem; margin: 0; }
.l3-fig .db-legende { margin: 0; }
.l3-fig .db-barre { grid-template-columns: minmax(0, 5.4rem) minmax(0, 1fr) minmax(0, 3.2rem) minmax(0, 3.2rem); gap: .6rem; }
.l3-fig .db-barre b { font-size: 1.45rem; }

/* Les portes : n blocs pleins, une couleur chacun (les « portes plus calmes »). */
.l3-portes { display: flex; align-items: flex-end; justify-content: center; gap: 1.1rem; height: 11rem; }
.l3-portes i { display: block; width: 4.4rem; height: 100%; background: var(--db-vert); border-top: .9rem solid var(--db-encre); }
.l3-portes i:nth-child(2) { background: var(--db-or); }
.l3-portes i:nth-child(3) { background: var(--db-rouge); }

.l3-portes i:nth-child(4) { background: var(--db-encre); border-top-color: var(--db-or); }

/* Les blocs : une suite ordonnée en bandes de couleur, numéro à l'affiche. */
.l3-blocs { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.l3-blocs li {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; column-gap: .8rem;
  padding: .55rem .9rem; background: var(--db-rouge); color: var(--db-or-clair);
}
.l3-blocs li:nth-child(4n+2) { background: var(--db-or); color: var(--db-encre); }
.l3-blocs li:nth-child(4n+3) { background: var(--db-vert); color: var(--db-creme); }
.l3-blocs li:nth-child(4n+4) { background: var(--db-encre); color: var(--db-or); }
.l3-blocs b { font-family: var(--db-affiche); font-weight: 400; font-size: 1.9rem; line-height: 1; }
.l3-blocs span { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.l3-blocs small { grid-column: 2; font-size: .78rem; line-height: 1.35; }
/* Variante à valeurs longues (« 18 h 30 », « 20 min ») : colonne de chiffre élargie, sans retour. */
.l3-blocs--large li { grid-template-columns: 4.6rem minmax(0, 1fr); }
.l3-blocs--large b { font-size: 1.55rem; white-space: nowrap; }

/* Les mesures de la bande sombre : un graphique à gauche du chiffre. */
.cq-mesure.l3-mesure { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); column-gap: 1.2rem; align-items: end; }
.l3-mesure > .db-waffle, .l3-mesure > .l3-mesure__spirale { grid-row: span 2; }
.l3-mesure .db-waffle i { border-color: var(--db-fumee-clair); }
.l3-mesure__spirale { color: var(--db-or); }
.l3-mesure__spirale .db-spirale { max-width: 6.5rem; }

/* Les marques des fiches : k-ième case sur n (remplacent les cubes génériques). */
.cq-card__id svg.l3-marque { width: calc(var(--c) * 1.25rem); height: auto; }

@media (max-width: 760px) {
  .cq-plate__img.l3-fig { padding: 1.4rem 1.2rem; border: 0; border-bottom: 2px solid var(--db-or-filet); }
  .l3-portes { height: 7rem; }
  .cq-card__id svg.l3-marque { width: calc(var(--c) * 1rem); }
  /* « P-01 » ne se coupe pas au trait d'union. */
  :is(.p-urgence, .p-fuite-donnees, .p-reservation) .cq-card__id strong { white-space: nowrap; }
}

/* ==========================================================================
   LOT 8 : conditions, confidentialite, protection-renseignements, le-bilan.
   Toutes les règles sont préfixées par la classe de page (pageclass()).
   ========================================================================== */

/* Commun aux pages du lot 8 : la frise d'étapes (k cases pleines sur n) à la
   place des cubes génériques des cartes numérotées. */
.p-le-bilan .db-etapes, .p-conditions .db-etapes,
.p-confidentialite .db-etapes, .p-protection-renseignements .db-etapes { width: 5.2rem; height: auto; }

/* L'éventail : forme Du Bois sans donnée pour les plaques de texte. Quatre
   quarts de cercle concentriques posés en haut de la colonne ; le reste reste
   papier, la colonne ne devient plus un bloc de bandes sur toute la hauteur. */
.p-le-bilan .db-eventail, .p-conditions .db-eventail,
.p-confidentialite .db-eventail, .p-protection-renseignements .db-eventail {
  background-color: var(--db-papier) !important;
  background-image: radial-gradient(circle 12.4rem at 0 100%,
    var(--db-rouge) 0 3.4rem, var(--db-papier) 3.4rem 3.75rem,
    var(--db-or) 3.75rem 6.4rem, var(--db-papier) 6.4rem 6.75rem,
    var(--db-vert) 6.75rem 9.4rem, var(--db-papier) 9.4rem 9.75rem,
    var(--db-encre) 9.75rem 12.4rem, transparent 12.4rem) !important;
  background-size: 12.4rem 12.4rem !important;
  background-position: 50% 1.6rem !important;
  background-repeat: no-repeat !important;
}
.p-le-bilan .cq-plate--miroir .db-eventail, .p-conditions .cq-plate--miroir .db-eventail,
.p-confidentialite .cq-plate--miroir .db-eventail, .p-protection-renseignements .cq-plate--miroir .db-eventail {
  background-image: radial-gradient(circle 12.4rem at 100% 100%,
    var(--db-rouge) 0 3.4rem, var(--db-papier) 3.4rem 3.75rem,
    var(--db-or) 3.75rem 6.4rem, var(--db-papier) 6.4rem 6.75rem,
    var(--db-vert) 6.75rem 9.4rem, var(--db-papier) 9.4rem 9.75rem,
    var(--db-encre) 9.75rem 12.4rem, transparent 12.4rem) !important;
}
@media (max-width: 760px) {
  .p-le-bilan .db-eventail, .p-conditions .db-eventail,
  .p-confidentialite .db-eventail, .p-protection-renseignements .db-eventail { display: none; }
}

/* Conditions : relevé des services dans la plaque 01, paliers dans la 03. */
.p-conditions #ce-que-je-fais .cq-plate__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
.p-conditions .cd-releve { grid-area: img; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.p-conditions .cd-delais { margin: 1.4rem 0 1.6rem; padding: 1.1rem 1.2rem .9rem; border: 2px solid var(--db-or-filet); background: var(--db-creme); }
.p-conditions .cd-delais figcaption { margin-top: .8rem; }
@media (max-width: 760px) {
  .p-conditions #ce-que-je-fais .cq-plate__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "img"; }
}

/* Confidentialité : les durées de conservation (plaque 02), les 30 jours (RP). */
.p-confidentialite #usage .cq-plate__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
.p-confidentialite .cf-garde {
  grid-area: img; margin: 0; padding: 1.6rem 1.4rem; display: grid; align-content: center; gap: 1.1rem;
  background: var(--db-encre); color: var(--db-creme);
}
.p-confidentialite .cf-garde__titre { margin: 0; font-family: var(--db-affiche); font-size: 2.3rem; line-height: 1; color: var(--db-or); text-transform: uppercase; }
.p-confidentialite .cf-garde__ligne { display: grid; gap: .35rem; font-size: .8rem; }
.p-confidentialite .cf-garde__ligne i { display: block; height: 1.1rem; width: max(var(--w), 6px); background: var(--db-or); }
.p-confidentialite .cf-garde__ligne:last-of-type i { background: var(--db-vert); outline: 1px solid var(--db-or); }
.p-confidentialite .cf-garde__ligne b { color: var(--db-or-clair); }
.p-confidentialite .cf-garde .db-legende { color: var(--db-fumee-clair); margin: 0; }
.p-confidentialite .cf-jours { width: 7.2rem; gap: 2px; }
.p-confidentialite .cf-jours i { background: currentColor; }
.p-confidentialite .cf-jours i:nth-child(10n) { background: currentColor; }
@media (max-width: 760px) {
  .p-confidentialite #usage .cq-plate__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "img"; }
}

/* Protection des renseignements : les 30 jours de réponse (plaque 01). */
.p-protection-renseignements #demandes .cq-plate__grid { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
.p-protection-renseignements .pr-jours {
  grid-area: img; margin: 0; padding: 1.6rem 1.4rem; display: grid; align-content: center; justify-items: start; gap: .9rem;
  background: var(--db-encre); color: var(--db-creme);
}
.p-protection-renseignements .pr-jours__chiffre { margin: 0; font-family: var(--db-affiche); font-size: 5.4rem; line-height: .9; color: var(--db-or); }
.p-protection-renseignements .pr-jours .db-jours i { background: var(--db-vert); outline: 1px solid var(--db-or-filet); }
.p-protection-renseignements .pr-jours .db-jours i:nth-child(10n) { background: var(--db-or); }
.p-protection-renseignements .pr-jours .db-legende { color: var(--db-fumee-clair); margin: 0; }
@media (max-width: 760px) {
  .p-protection-renseignements #demandes .cq-plate__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "img"; }
}

/* Le Bilan : le relevé des prix tient la colonne graphique de la plaque 01. */
.p-le-bilan #ce-que-cest .cq-plate__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
.p-le-bilan .lb-releve { grid-area: img; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 760px) {
  .p-le-bilan #ce-que-cest .cq-plate__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "img"; }
}