/* ==========================================================================
   Du Bois, LOT 1 : forfait, presence, hebergement, ton-hebergeur.
   Chargé après dubois.css. Classes l1-* propres au lot ; rien de global touché.
   ========================================================================== */

/* ---------- Hero : relevé des coûts + panneau d'ancres empilés ---------- */
.l1-hero-col { display: grid; gap: .9rem; min-width: 0; }
.l1-hero-col .cq-panneau { padding-block: .4rem; }
.cq-hero .cq-btnrow { flex-wrap: wrap; }
.cq-hero .cq-plaque-btn span:first-child { white-space: nowrap; }

/* presence : le strong du chapeau est au milieu d'une phrase, il reste en ligne. */
.p-presence .cq-lede strong {
  display: inline; font-family: inherit; font-weight: 700; font-size: inherit;
  line-height: inherit; text-transform: none; color: var(--db-encre); margin: 0;
}

/* ---------- La plaque : la colonne de graphique remplace les bandes ---------- */
.l1-plate .cq-plate__grid { align-items: start; }
.l1-fig {
  grid-area: img; align-self: stretch; margin: 0;
  display: flex; flex-direction: column; justify-content: center; gap: .55rem;
  padding: 1.6rem 1.3rem; background: var(--db-carton);
  border-left: 2px solid var(--db-or-filet);
}
.cq-plate--miroir .l1-fig { border-left: 0; border-right: 2px solid var(--db-or-filet); }
.l1-fig .db-legende { margin: .4rem 0 0; font-size: .68rem; }
.l1-fig--forme { justify-content: center; }

/* La pile : des blocs encrés étiquetés (séparés = plusieurs, soudés = un). */
.l1-pile { display: grid; gap: 0; }
.l1-pile--trois { gap: .35rem; }
.l1-pile i {
  display: flex; align-items: center; min-height: 2.6rem; padding: .3rem .7rem;
  font-family: var(--db-affiche); font-style: normal; font-size: 1.25rem;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1;
}
.l1-pile:not(.l1-pile--trois) i { min-height: calc(3 * 2.6rem + .7rem); }
.l1-r { background: var(--db-rouge); color: var(--db-or-clair); }
.l1-o { background: var(--db-or); color: var(--db-encre); }
.l1-v { background: var(--db-vert); color: var(--db-creme); }
.l1-k { background: var(--db-encre); color: var(--db-or); }
.l1-vide { background: transparent; color: var(--db-encre-2); border: 2px dashed var(--db-encre-2); }
.l1-pile:not(.l1-pile--trois) .l1-vide { min-height: 2.6rem; }

.l1-anneaux { width: 100%; height: auto; display: block; }

/* Plaque à relevé complet : colonne plus large pour les barres et les prix. */
.l1-plate--large.cq-plate--miroir .cq-plate__grid { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
.l1-plate--large.cq-plate--image:not(.cq-plate--miroir) .cq-plate__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
.l1-fig .db-releve h2 { font-size: 2rem; }
.l1-fig .db-releve .db-legende { margin: .4rem 0 .9rem; }
.l1-fig .db-paliers { margin-top: .2rem; }
.l1-fig .db-barre { font-size: .8rem; }
.l1-fig .db-barre b { font-size: 1.3rem; }

/* ---------- Les temps : disque qui se remplit, un quart par étape ---------- */
.cq-card__id svg.l1-temps { width: 3.4rem; }

/* ---------- Les mesures : deux portraits ---------- */
.l1-mesures .db-mesures__rangee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.l1-mesures .db-mesure__spirale .db-spirale { max-width: 11rem; }

/* ---------- ton-hebergeur ---------- */
/* Six fournisseurs vérifiés : un carré chacun, crimson = annonce non tenue. */
.l1-six {
  margin: 0; padding: 1.1rem 1.2rem; background: var(--db-carton);
  border: 2px solid var(--db-or-filet);
}
.l1-six h2 { margin: 0; font-size: 1.9rem; line-height: 1; }
.l1-six__cases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; margin: .8rem 0 .5rem; }
.l1-six__cases i { display: block; aspect-ratio: 1; }
.l1-six .db-legende { margin: 0; font-size: .68rem; }
/* Les heures : une case par heure de panne, deux rangées qui ne disent pas la même chose. */
.l1-heures { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; max-width: 16rem; }
.l1-heures i { display: block; aspect-ratio: 1; }
/* Annoncé contre mesuré : deux colonnes, une rangée par prétention. */
.l1-duel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .3rem .35rem; }
.l1-duel .db-legende { margin: 0 0 .1rem; }
.l1-duel i {
  display: flex; align-items: center; min-height: 2.4rem; padding: .3rem .55rem;
  font-family: var(--db-affiche); font-style: normal; font-size: 1.05rem;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1;
}
/* La méthode : les commandes restent du code lisible, pas des titres. */
.p-ton-hebergeur #methode .cq-lede strong {
  display: inline; font-family: var(--db-machine); font-weight: 700;
  font-size: 1rem; line-height: inherit; text-transform: none; color: var(--db-or-clair);
  margin: 0; overflow-wrap: anywhere;
}
/* La bande de nuit (titre, accents, filet de chapeau : le socle) : filet plus fin, mono fumée. */
.p-ton-hebergeur #methode .cq-filet { background: var(--db-or); height: 4px; }
.p-ton-hebergeur #methode .cq-mono { color: var(--db-fumee-clair); }
/* Les deux notes qui closent le champ des prétentions : un bloc de texte pleine largeur. */
.p-ton-hebergeur .cq-paliers > .cq-sechead { display: block; border-bottom: 0; max-width: 46rem; padding-top: .6rem; }
.p-ton-hebergeur .cq-paliers > .cq-sechead p + p { margin-top: .9rem; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 980px) {
  .l1-mesures .db-mesures__rangee { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .l1-plate.cq-plate--image .cq-plate__grid,
  .l1-plate.cq-plate--miroir .cq-plate__grid {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "img";
  }
  .l1-fig, .cq-plate--miroir .l1-fig { border: 0; border-top: 2px solid var(--db-or-filet); }
  .l1-pile:not(.l1-pile--trois) i { min-height: 2.6rem; }
  .l1-fig--forme { padding-block: 1rem; }
  .l1-anneaux { max-width: 12rem; }
  .db-mesure { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
}

/* ===================================================================
   LOT 6 : solutions, veille, agences, 404 (classes db6-*, scopées par page)
   =================================================================== */
:is(.p-solutions, .p-veille, .p-agences, .p-404) .db6-mesures .db-mesures__rangee {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem;
}
:is(.p-solutions, .p-veille, .p-agences, .p-404) .db6-mesures { border-top: 10px solid var(--db-encre); }

/* Pictogrammes des fiches : formes géométriques pleines, plus de cube */
:is(.p-solutions, .p-veille, .p-agences, .p-404) .cq-card__id .db6-forme { width: 3.6rem; height: auto; display: block; }

/* Sommaire du hero : une case par fiche du rang (compte réel de la page) */
:is(.p-solutions, .p-veille, .p-agences) .cq-panneau__lignes a:has(.db6-compte) {
  grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
}
:is(.p-solutions, .p-veille, .p-agences) .db6-compte { display: inline-flex; gap: 3px; }
:is(.p-solutions, .p-veille, .p-agences) .db6-compte i { display: block; width: .62rem; height: .62rem; background: var(--db-or); }
:is(.p-solutions, .p-veille, .p-agences) .cq-panneau__lignes a:nth-child(2) .db6-compte i { background: var(--db-vert); outline: 1px solid var(--db-fumee); }
:is(.p-solutions, .p-veille, .p-agences) .cq-panneau__lignes a:nth-child(3) .db6-compte i { background: var(--db-creme); }
:is(.p-solutions, .p-veille, .p-agences) .cq-panneau__lignes a:nth-child(4) .db6-compte i { background: var(--db-or-clair); }

/* Colonne de la plaque : une forme posée en tête, plus de bloc de bandes */
:is(.p-solutions, .p-veille, .p-agences, .p-404) .cq-plate__img.db6-plaque {
  background-image: none !important; background: var(--db-papier) !important;
  padding: 1.6rem 1.2rem; min-height: 0;
}
:is(.p-solutions, .p-veille, .p-agences, .p-404) .db6-plaque svg { display: block; width: 100%; max-width: 12rem; height: auto; margin: 0 auto; }
/* Veille : la bande d'ardoise (titre, accents, boutons et leur survol or : le socle) ; mono fumée. */
.p-veille #pas .cq-sechead .cq-mono { color: var(--db-fumee-clair); }
.p-veille #place .prose a { color: var(--db-rouge); text-decoration-color: var(--db-rouge); }
.p-veille #place .sechead .cq-mono { margin-top: 1rem; }
.p-veille #place .rhythms { margin-top: 1.8rem; }

/* Solutions : liens du corps des cartes du fond, bleus par défaut, passés au crimson */
.p-solutions #fond .card__body a { color: var(--db-rouge); text-decoration-color: var(--db-rouge); }

/* 404 : la case qui manque (forme sobre, aucune donnée), sous le relevé d'encre */
.p-404 .db6-case { margin: 1.4rem 0 0; }
.p-404 .db6-case svg { display: block; width: 100%; max-width: 16rem; height: auto; }
.p-404 .db6-c-or { fill: var(--db-or); }
.p-404 .db6-c-vert { fill: var(--db-vert); stroke: var(--db-fumee); stroke-width: 1; }
.p-404 .db6-c-creme { fill: var(--db-creme); }
.p-404 .db6-c-vide { fill: none; stroke: var(--db-or-clair); stroke-width: 2; stroke-dasharray: 5 4; }
.p-404 .db6-case .db-legende { color: var(--db-fumee-clair); margin-top: .7rem; }

@media (max-width: 760px) {
  :is(.p-solutions, .p-veille, .p-agences, .p-404) .db6-mesures .db-mesures__rangee { grid-template-columns: minmax(0, 1fr); }
  :is(.p-solutions, .p-veille, .p-agences, .p-404) .db6-plaque svg { max-width: 8rem; }
}