/* ════════════════════════════════════════════════════════════════════
   bc-shell.css — l'habillage commun : barre de service, en-tête,
   navigation des familles, pied de page.
   Belgium Copy · Clickprint — créé le 2026-09-17.

   🔵 POURQUOI DES CLASSES PRÉFIXÉES `bcs-`
   Le 16/09, un lien de navigation portant `class="metier"` a hérité de
   la bordure des cases du bandeau métier : une page qui porte sa propre
   feuille locale n'a pas d'espace de noms (règle 77). Ce composant vit
   sur HUIT pages qui ont chacune 10 à 19 variables et des dizaines de
   classes à elles. Chaque classe est donc préfixée, sans exception.

   🔴 CE FICHIER NE POSE AUCUNE RÈGLE GLOBALE.
   Pas de `*`, pas de `html`, pas de `body`, pas de `a {}` nu. Tout est
   scopé sous l'une des quatre racines. Une page qui le charge ne voit
   changer que son en-tête et son pied — jamais son contenu.

   Les teintes et les polices viennent de `charte.css`, qui doit être
   chargée AVANT ce fichier.
   ════════════════════════════════════════════════════════════════════ */

/* ── la largeur commune ───────────────────────────────────────────── */
.bcs-bloc { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 760px) {
  .bcs-bloc { padding-inline: 40px; }
}

/* ── les remises à zéro, SCOPÉES aux quatre racines ───────────────── */
.bcs-service, .bcs-service *,
.bcs-entete,  .bcs-entete  *,
.bcs-navfam,  .bcs-navfam  *,
.bcs-pied,    .bcs-pied    * { box-sizing: border-box; }

.bcs-service a, .bcs-entete a, .bcs-navfam a, .bcs-pied a {
  color: inherit; text-decoration: none;
}
.bcs-entete button, .bcs-pied button {
  font: inherit; border: 0; background: none; cursor: pointer;
}
.bcs-service img, .bcs-service svg,
.bcs-entete  img, .bcs-entete  svg,
.bcs-navfam  img, .bcs-navfam  svg,
.bcs-pied    img, .bcs-pied    svg { display: block; }

.bcs-service, .bcs-entete, .bcs-navfam, .bcs-pied {
  font-family: var(--c-font-texte, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.55;   /* la même que le body de l'accueil : sans elle,
                          l'en-tête perdait 1 px de haut sur les autres pages */
}

/* ── barre de service ─────────────────────────────────────────────── */
.bcs-service {
  background: var(--c-ink); color: var(--c-on-dark);
  font-size: 13px; padding-block: 8px;
}
.bcs-service .bcs-bloc { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.bcs-service svg  { stroke: currentColor; }
.bcs-service span { display: flex; align-items: center; gap: 7px; }

/* ── en-tête ──────────────────────────────────────────────────────── */
.bcs-entete { background: var(--c-surface); }
.bcs-entete .bcs-bloc {
  display: grid; grid-template-columns: auto 1fr; gap: 14px 24px;
  align-items: center; padding-block: 14px;
}
.bcs-logo img { width: 150px; height: auto; }

.bcs-recherche {
  grid-column: 1 / -1; order: 3;
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--c-border); border-radius: 8px;
  padding: 9px 13px; background: var(--c-bg);
}
.bcs-recherche:focus-within { border-color: var(--c-primary); }
.bcs-recherche svg          { stroke: var(--c-muted); flex-shrink: 0; }
.bcs-recherche input        { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--c-ink); }
.bcs-recherche input:focus  { outline: none; }
.bcs-recherche button       { color: var(--c-primary); font-weight: 600; font-size: 14px; }

.bcs-outils { display: flex; align-items: center; gap: 10px; justify-self: end; }
.bcs-compte {
  display: none; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--c-ink);
}
.bcs-compte svg { stroke: var(--c-ink); }

.bcs-panier {
  display: flex; align-items: center; gap: 8px;
  background: var(--c-primary); color: #fff;
  padding: 10px 14px; border-radius: 8px;
  font-family: var(--c-font-titre); font-weight: 700; font-size: 14px;
  transition: background .15s ease;
}
.bcs-panier:hover { background: var(--c-primary-d); color: #fff; }
.bcs-panier svg   { stroke: #fff; }

@media (min-width: 900px) {
  .bcs-logo img          { width: 168px; }
  .bcs-entete .bcs-bloc  { grid-template-columns: auto 1fr auto; }
  .bcs-recherche         { grid-column: auto; order: 0; }
  .bcs-compte            { display: flex; margin-right: 16px; }
}

/* ── navigation des familles ──────────────────────────────────────── */
.bcs-navfam {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
}
.bcs-navfam .bcs-bloc {
  display: flex; gap: 22px; align-items: center;
  font-size: 15px; font-weight: 600;
  overflow-x: auto; scrollbar-width: none;
  padding-block: 13px; white-space: nowrap;
}
.bcs-navfam .bcs-bloc::-webkit-scrollbar { display: none; }
.bcs-navfam a            { color: var(--c-ink); }
.bcs-navfam a:hover      { color: var(--c-primary); }
.bcs-navfam .bcs-metier  { color: var(--c-primary); }
.bcs-navfam a.bcs-ici    { color: var(--c-primary); }

/* ── pied de page ─────────────────────────────────────────────────── */
.bcs-pied {
  background: var(--c-footer); color: #a59a9b;
  font-size: 14px; padding-block: 36px 24px;
}
.bcs-pied .bcs-colonnes {
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.bcs-pied img          { width: 150px; height: auto; margin-bottom: 14px; }
.bcs-pied .bcs-rubrique { color: #fff; font-family: var(--c-font-titre); font-weight: 700; margin-bottom: 12px; }
.bcs-pied .bcs-liens   { display: flex; flex-direction: column; gap: 8px; }
.bcs-pied a:hover      { color: #fff; }

.bcs-lettre        { display: flex; gap: 8px; margin-top: 12px; }
.bcs-lettre input  {
  flex: 1; min-width: 0; background: #2c2526; border: 1px solid #423839;
  border-radius: 6px; padding: 10px 12px; color: #fff; font: inherit; font-size: 14px;
}
.bcs-lettre input::placeholder { color: #8a7e7f; }
.bcs-lettre button {
  background: var(--c-primary); color: #fff; border-radius: 6px;
  padding: 10px 16px; font-family: var(--c-font-titre); font-weight: 700;
}
.bcs-lettre button:hover { background: var(--c-primary-d); }

.bcs-bas {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid #332b2c;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
}

/* ── utilitaires ──────────────────────────────────────────────────── */
.bcs-af { color: var(--c-primary-on-dark); }
.bcs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── le mode CAISSE ───────────────────────────────────────────────────
   `<script src="/assets/js/bc-shell.js?v=4" data-bcs="caisse">`
   Même barre de service, même logo, mais ni recherche, ni familles, ni
   colonnes de liens : sur la page où le client paie, chaque lien est une
   porte de sortie. Ces règles ne s'appliquent QUE sous `.bcs-caisse`. */
.bcs-entete.bcs-caisse .bcs-bloc {
  grid-template-columns: auto 1fr;   /* le logo, puis le rappel à droite */
  align-items: center;
}
.bcs-sur {
  justify-self: end;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--c-ink);
}
.bcs-sur svg { stroke: var(--c-ink); }

.bcs-pied.bcs-caisse { padding-block: 20px; }
.bcs-pied.bcs-caisse .bcs-bas { margin-top: 0; padding-top: 0; border-top: 0; }