/* ==========================================================================
   Brakes And Spacers : menu principal (sans hamburger) + accueil — 2026-11-10
   Chargé par _partials/head.tpl après le bundle du thème (?v= pour vider le cache navigateur).
   ========================================================================== */
:root {
  --bs-rouge: #b42823;
  --bs-rouge-vif: #e2392f;
  --bs-noir: #111;
  --bs-gris-fonce: #3d3d3d;
  --bs-gris: #5f5f5f;
  --bs-fond: #f4f4f4;
  --bs-bord: #e3e3e3;
  --bs-titre: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
}
.bs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bs-ico { width: 1em; height: 1em; flex: none; vertical-align: middle; }

/* ---------- Menu principal ---------- */
.bs-nav__list { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
#header .bs-nav__link,
#header .bs-nav__link:visited {
  display: flex; align-items: center; gap: 10px; height: 100%;
  padding: 0 22px; color: #fff; text-decoration: none;
  font-family: var(--bs-titre); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  transition: background-color .2s, border-color .2s, color .2s;
}
#header .bs-nav__link:hover,
#header .bs-nav__link:focus-visible,
#header .bs-nav__link.is-active { color: #fff; background: #1d1d1d; border-bottom-color: var(--bs-rouge-vif); text-decoration: none; }
#header .bs-nav__link .bs-ico { font-size: 22px; color: var(--bs-rouge-vif); }

/* ordinateur : barre noire sous le logo */
.bs-nav--desktop .bs-nav__list { min-height: 50px; }
.bs-nav--desktop .bs-nav__item + .bs-nav__item { border-left: 1px solid #2a2a2a; }
.bs-nav--desktop .bs-nav__item--fin { margin-left: auto; border-left: 0 !important; transition: margin .3s; }
#header .bs-nav--desktop .bs-nav__item--fin .bs-nav__link { font-weight: 400; color: #d6d6d6; }
#header .is-sticky .bs-nav--desktop .bs-nav__item--fin { margin-right: 64px; }
@media (max-width: 1219.98px) {
  #header .bs-nav--desktop .bs-nav__link { padding: 0 15px; font-size: 14px; gap: 8px; }
}
@media (max-width: 991.98px) {
  .bs-nav--desktop .bs-nav__list { overflow-x: auto; scrollbar-width: none; }
  #header .bs-nav--desktop .bs-nav__link { white-space: nowrap; }
}

/* mobile : 4 onglets icône + libellé, toujours visibles */
.bs-nav--mobile .bs-nav__list { display: grid; grid-template-columns: repeat(4, 1fr); }
.bs-nav--mobile .bs-nav__item + .bs-nav__item { border-left: 1px solid #262626; }
#header .bs-nav--mobile .bs-nav__link {
  flex-direction: column; justify-content: center; gap: 4px;
  padding: 9px 2px 6px; font-size: 12px; letter-spacing: .03em; line-height: 1.1; text-align: center;
}
#header .bs-nav--mobile .bs-nav__link .bs-ico { font-size: 22px; }

/* ---------- Accueil : présentation + univers ---------- */
.bs-intro { background: #fff; padding: 46px 0 50px; border-bottom: 1px solid #ececec; }
.bs-intro__tete { max-width: 880px; margin: 0 auto 34px; text-align: center; }
.bs-intro__titre {
  margin: 0 0 18px; color: var(--bs-noir);
  font-family: var(--bs-titre); font-weight: 700; font-size: 2rem; line-height: 1.2; letter-spacing: .01em;
}
.bs-intro__titre::after { content: ""; display: block; width: 56px; height: 3px; margin: 16px auto 0; border-radius: 2px; background: var(--bs-rouge); }
.bs-intro__chapo { margin: 0 0 10px; color: #222; font-size: 1.0625rem; line-height: 1.6; }
.bs-intro__texte { margin: 0; color: var(--bs-gris); font-size: .9375rem; line-height: 1.7; }
.bs-intro strong { font-weight: 600; color: var(--bs-noir); }

.bs-univers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bs-carte,
.bs-carte:visited {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--bs-bord); border-radius: 8px;
  color: inherit; text-decoration: none;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.bs-carte:hover,
.bs-carte:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .10); border-color: #d2d2d2; color: inherit; text-decoration: none; }
.bs-carte__visuel { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; border-bottom: 1px solid #f0f0f0; }
.bs-carte__visuel img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .4s; }
.bs-carte:hover .bs-carte__visuel img { transform: scale(1.04); }
.bs-carte__corps { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.bs-carte__titre {
  display: flex; align-items: center; gap: 10px; color: var(--bs-noir);
  font-family: var(--bs-titre); font-weight: 700; font-size: 1.25rem; letter-spacing: .03em; text-transform: uppercase;
}
.bs-carte__titre .bs-ico { font-size: 26px; color: var(--bs-rouge); }
.bs-carte__texte { color: var(--bs-gris); font-size: .875rem; line-height: 1.6; }
.bs-carte__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; color: var(--bs-rouge);
  font-family: var(--bs-titre); font-weight: 700; font-size: .9375rem; letter-spacing: .04em; text-transform: uppercase;
}
.bs-carte__cta .bs-ico { font-size: 18px; transition: transform .25s; }
.bs-carte:hover .bs-carte__cta .bs-ico { transform: translateX(4px); }

/* ---------- Accueil : savoir-faire (bas de page) ---------- */
.bs-savoir { background: #fff; padding: 52px 0 58px; border-top: 1px solid #ececec; }
.bs-savoir__surtitre {
  margin: 0 0 30px; text-align: center; color: var(--bs-gris-fonce);
  font-family: var(--bs-titre); font-weight: 700; font-size: 1.5rem; letter-spacing: .02em; text-transform: uppercase;
}
.bs-savoir__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.bs-bloc { display: flex; flex-direction: column; padding: 28px 26px; background: var(--bs-fond); border-top: 3px solid var(--bs-rouge); border-radius: 8px; }
.bs-bloc__icone {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%;
  background: #fff; color: var(--bs-rouge); box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.bs-bloc__icone .bs-ico { font-size: 28px; }
.bs-bloc__titre { margin: 0 0 12px; color: var(--bs-noir); font-family: var(--bs-titre); font-weight: 700; font-size: 1.25rem; line-height: 1.3; }
.bs-bloc p { margin: 0 0 12px; color: #555; font-size: .875rem; line-height: 1.7; }
.bs-bloc strong { font-weight: 600; color: #222; }
.bs-bloc p a { color: var(--bs-rouge); }
.bs-bloc p a:hover { color: var(--bs-noir); }
.bs-puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 20px; padding: 0; list-style: none; }
.bs-puces li { padding: 3px 10px; background: #fff; border: 1px solid #dcdcdc; border-radius: 999px; color: var(--bs-gris-fonce); font-size: .75rem; font-weight: 600; letter-spacing: .03em; }
.bs-bouton,
.bs-bouton:visited {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; margin-top: auto;
  padding: 11px 18px; background: #000; color: #fff !important; border-radius: 4px; text-decoration: none;
  font-family: var(--bs-titre); font-weight: 700; font-size: .875rem; letter-spacing: .05em; text-transform: uppercase;
  transition: background-color .2s;
}
.bs-bouton:hover,
.bs-bouton:focus-visible { background: var(--bs-rouge); text-decoration: none; }
.bs-bouton .bs-ico { font-size: 16px; }
.bs-bloc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: auto; }
.bs-bloc__actions .bs-bouton { margin-top: 0; }
.bs-lien { color: var(--bs-gris-fonce); font-size: .8125rem; }

/* ---------- Tablette / mobile ---------- */
@media (max-width: 991.98px) {
  .bs-univers { gap: 16px; }
  .bs-carte__corps { padding: 14px 16px 16px; }
  .bs-savoir__grille { grid-template-columns: 1fr; gap: 16px; }
  .bs-bloc { padding: 22px 20px; }
}
@media (max-width: 767.98px) {
  .bs-intro { padding: 26px 0 28px; }
  .bs-intro__tete { margin-bottom: 20px; text-align: left; }
  .bs-intro__titre { font-size: 1.5rem; }
  .bs-intro__titre::after { margin-left: 0; }
  .bs-intro__chapo { font-size: 1rem; }
  .bs-intro__texte { font-size: .875rem; }
  .bs-univers { grid-template-columns: 1fr; gap: 12px; }
  .bs-carte { flex-direction: row; align-items: stretch; }
  .bs-carte:hover { transform: none; }
  .bs-carte__visuel { flex: 0 0 36%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid #f0f0f0; }
  .bs-carte__titre { font-size: 1.0625rem; }
  .bs-carte__titre .bs-ico { display: none; }
  .bs-carte__texte { font-size: .8125rem; line-height: 1.5; }
  .bs-carte__cta { font-size: .8125rem; }
  .bs-savoir { padding: 34px 0 38px; }
  .bs-savoir__surtitre { margin-bottom: 18px; font-size: 1.25rem; }
  .bs-bloc__titre { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-carte, .bs-carte__visuel img, .bs-carte__cta .bs-ico, .bs-nav__link { transition: none; }
}