/* Espace breton : layout allégé, grille de cards façon Lorient */

/* ============================================
   HEADER BR — ligne grise pleine largeur sous le logo
   ============================================ */
.main-header--br {
  border-bottom: 1px solid #d4d4d4;
}

.main-header--br .header-wrap--br {
  justify-content: flex-start;
  align-items: center;
  min-height: 90px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.main-header--br .header-logo {
  display: inline-block;
}

/* ============================================
   FIL D'ARIANE BR
   ============================================ */
.br-breadcrumb,
.br-breadcrumb a,
.br-breadcrumb span {
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
}

.br-breadcrumb {
  margin: 24px 0 20px !important;
  color: #555 !important;
}

.br-breadcrumb a {
  color: #078293 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.br-breadcrumb a:hover,
.br-breadcrumb a:focus {
  text-decoration: underline !important;
}

.br-breadcrumb__separator {
  margin: 0 12px !important;
  color: #888 !important;
}

.br-breadcrumb__current {
  color: #111 !important;
  font-weight: 600 !important;
}

/* ============================================
   TITRE DE PAGE
   - on respire au-dessus (l'air entre le logo/header et le titre)
   - la ligne grise sous le titre s'étend pleine largeur de la page,
     pas seulement sous le container
   ============================================ */
.page-detail--br {
  padding-top: 0;
}

/* Bloc titre */
.page-detail--br .page-title--br {
  margin: 0 0 0;
  padding-top: 32px;
  padding-bottom: 24px;
}

.page-detail--br .page-title--br h1 {
  text-align: left;
  margin: 0;
  padding: 0;
}

/* Trait pleine largeur de la page sous le titre */
hr.br-fullwidth-line {
  display: block !important;
  height: 1px !important;
  background: #d4d4d4 !important;
  background-color: #d4d4d4 !important;
  border: 0 !important;
  border-top: 0 !important;
  margin: 0 0 40px !important;
  padding: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
}

/* Le wrapper de contenu BR : on neutralise tout héritage du thème */
.page-content--br {
  margin-top: 50px;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Intro (textes, titres de section) en pleine largeur, au-dessus de la grille */
.sommaire-br-intro {
  margin-bottom: 40px;
}

/* ============================================
   GRILLE DE CARDS — style Lorient (4 colonnes, gros gap)
   ============================================ */
.sommaire-br-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  background: none !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 0 60px;
  align-items: stretch;
}

@media (max-width: 1200px) {
  .sommaire-br-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

@media (max-width: 900px) {
  .sommaire-br-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .sommaire-br-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ============================================
   CARD — fond gris très clair, bords très arrondis,
   toutes de la même hauteur (calé sur la plus haute)
   ============================================ */
.card-page-traduite {
  display: flex !important;
  flex-direction: column !important;
  background: #e2e2e2 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  height: 100% !important;
  align-self: stretch !important;
  /* Reset des marges/floats/positions hérités du thème */
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  transition: background-color .2s ease;
}

.card-page-traduite:hover {
  background: #d4d4d4;
}

/* Lien : occupe toute la carte, layout en colonne.
   Titre + chapo collés en haut, bouton en bas (mt:auto). */
.card-page-traduite__link,
.card-page-traduite__link:visited {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  padding: 32px 32px 30px !important;
  color: #111 !important;
  text-decoration: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.card-page-traduite__link:hover,
.card-page-traduite__link:focus {
  color: #111 !important;
  text-decoration: none !important;
}

/* Titre : noir, GROS, en haut */
.card-page-traduite__title,
h3.card-page-traduite__title {
  margin: 0 0 24px !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 2rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #111 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  border: 0 !important;
}

/* Chapo : texte lisible, gris foncé, sous le titre.
   On augmente la spécificité avec le wrapper card pour battre
   les styles globaux du thème. */
.card-page-traduite .card-page-traduite__chapo,
.card-page-traduite .card-page-traduite__chapo div,
.card-page-traduite .card-page-traduite__chapo p,
.card-page-traduite .card-page-traduite__chapo span,
.card-page-traduite .card-page-traduite__chapo * {
  margin: 0 !important;
  color: #2c2c2c !important;
  font-size: 1.45rem !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.card-page-traduite .card-page-traduite__chapo {
  margin-bottom: 32px !important;
}

.card-page-traduite__chapo p + p {
  margin-top: 8px !important;
}

/* CTA "Gouzout muioc'h" : bouton pill, bordure vert Vannes.
   margin-top: auto pousse en bas dans le flex container,
   et l'espace minimum 32px est garanti par le margin-bottom du chapo. */
.card-page-traduite__cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding: 16px 30px;
  border: 2px solid #078293;
  border-radius: 999px;
  background: transparent;
  color: #078293;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}

.card-page-traduite__link:hover .card-page-traduite__cta,
.card-page-traduite__link:focus .card-page-traduite__cta {
  background: #078293;
  color: #fff;
  border-color: #078293;
}