/* === CYB89 (Nos réalisations) ===
   Styles scoped: uniquement pour la page .tetria-page-nos-realisations (classe ajoutée via body_class si dispo)
   ou fallback sur .tetria-realisations-wrap (conteneur injecté).
*/
.tetria-realisations-wrap{
  margin: 24px 0 30px;
  background: var(--tetria-white, var(--tetria-white, #fff));
}

/* Spacer neutre (30px) avant les filtres — demandé pour décoller du header */
.tetria-realisations-wrap .tetria-nr-spacer{
  height: 30px;
  background: #fff !important;
}

/* Carrousel: contraint à 1050px (canevas global reste piloté par Options générales) */
.tetria-realisations-wrap .tetria-container{
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
}

.tetria-realisations{
  width: 100%;
}

.tetria-realisations .tetria-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin: 30px 0 29px;
}

.tetria-realisations .tetria-filter-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: var(--tetria-btn-w, 220px);
  height: var(--tetria-btn-h, 42px);
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  line-height: 1;
  border-radius: var(--tetria-btn-radius, 10px);
  /* Hardcode demandé: Open Sans pour la barre de filtres */
  font-family: var(--tetria-btn-ff, inherit), sans-serif !important;
  font-weight: 400;
  text-decoration: none;
  font-size: 13px;
  border: 1px solid var(--tetria-grey, rgba(0,0,0,.18));
  background: #fff !important;
  color: #000 !important;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}

.tetria-realisations .tetria-filter-btn.is-active{
  /* IMPORTANT: le background de base est en !important (blanc), donc on force aussi l'état actif */
  background: #FE2601 !important;
  color: #fff !important;
  border-color: #FE2601 !important;
}

/* "Tous" (filtre all) : plus compact pour éviter l'effet "perdu" au milieu */
.tetria-realisations .tetria-filter-btn[data-filter="all"]{
  width: 60px;
  height: var(--tetria-btn-h, 42px);
  padding: 0;
}

/* Hover demandé: fond blanc + bordure rouge/orange + texte rouge/orange, sans changement de géométrie */
.tetria-realisations .tetria-filter-btn:not(.is-active):hover,
.tetria-realisations .tetria-filter-btn:not(.is-active):focus{
  background: #fff !important;
  color: #FE2601 !important;
  border-color: #FE2601 !important;
  transform: none;
  filter: none;
}

.tetria-realisations .tetria-sep{
  height:1px;
  background: var(--tetria-sep, rgba(0,0,0,.18));
  width:100%;
  margin: 0 0 33px;
}

.tetria-realisations .tetria-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--tetria-gap, 36px);
}

@media (max-width: 820px){
  .tetria-realisations .tetria-grid{
    grid-template-columns: 1fr;
  }
}

.tetria-realisations .tetria-item{
  position:relative;
  overflow:hidden;
  border-radius: var(--tetria-btn-radius, 12px);
  background: var(--tetria-light, rgba(0,0,0,.06));
}

.tetria-realisations .tetria-item .tetria-item-media{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  overflow:hidden;
}

.tetria-realisations .tetria-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover; /* masque: rend le visuel régulier même si format atypique */
}

.tetria-realisations .tetria-badge{
  position:absolute;
  top:8px;
  left:8px;
  padding:5px 8px;
  background: var(--tetria-blue, #040885);
  color: var(--tetria-white, #fff);
  font-weight:800;
  font-size: 11px;
  border-radius: var(--tetria-btn-radius-xs, 8px);
  z-index: 2;
}

.tetria-realisations .tetria-place{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:8px 10px;
  background: var(--tetria-muted, rgba(0,0,0,.58));
  color: var(--tetria-white, #fff);
  font-weight:700;
  font-size: 11px;
  z-index: 2;
}

.tetria-realisations .tetria-more{
  margin: 18px 0 10px;
  display:flex;
  justify-content:center;
}

.tetria-realisations .tetria-more-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: var(--tetria-btn-w, 220px);
  height: var(--tetria-btn-h, 42px);
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  line-height: 1;
  border-radius: var(--tetria-btn-radius, 10px);
  font-family: var(--tetria-btn-ff, var(--tetria-content-ff, inherit)), sans-serif !important;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
  border: 1px solid var(--tetria-btn-bg, var(--tetria-accent, #ff3b30));
  background: var(--tetria-btn-bg, var(--tetria-accent, #ff3b30));
  color: var(--tetria-btn-text, #fff);
  cursor:pointer;
  transition: transform .12s ease, filter .12s ease;
}
.tetria-realisations .tetria-more-btn:hover,
.tetria-realisations .tetria-more-btn:focus-visible{
  transform: translateY(-1px);
  filter: brightness(1.03);
  background: var(--tetria-btn-hover-bg, var(--tetria-blue, #040885));
  border-color: var(--tetria-btn-hover-bg, var(--tetria-blue, #040885));
  color: var(--tetria-btn-hover-text, #fff);
}

/* éviter un "hover" persistant après clic (focus souris) */
.tetria-realisations .tetria-more-btn:focus{
  outline: none;
}

.tetria-realisations .tetria-extra{
  margin-top: 18px;
}

.tetria-realisations .tetria-empty{
  margin: 18px 0 0;
  font-weight: 600;
  opacity: .9;
  text-align: center;
  color: #000 !important;
  background: transparent;
  display: block;
}



.tetria-realisations .tetria-item.is-hidden{display:none;}

/* Bloc WYSIWYG "Vous avez un projet ?" (canevas global) */
.tetria-realisations-cta-wrap{
  margin: 26px 0 10px;
}
.tetria-realisations-cta{
  background: var(--tetria-grey, #f2f2f2);
  border-radius: var(--tetria-btn-radius, 12px);
  padding: 22px 24px;
}

/* FINALISATION 05 — Fix: empêcher .tetria-page-scope--nos-realisations de forcer un fond blanc dans la CTA */
.tetria-realisations-cta .tetria-page-scope--nos-realisations{
  background: transparent !important;
}
.tetria-realisations-cta h2{
  margin: 0 0 10px;
  /* Raccord Options générales (prioritaire vs règles page-scope) */
  color: var(--tetria-title-color, var(--tetria-blue, #040885)) !important;
  font-family: var(--tetria-title-ff, var(--tetria-title-ff, inherit)), sans-serif !important;
  font-size: 24px !important;
  text-align: center;
}
.tetria-realisations-cta,
.tetria-realisations-cta p{
  color: #000 !important;
  font-family: var(--tetria-content-ff, var(--tetria-content-ff, inherit)), sans-serif;
}


/* Page scope */
.tetria-page-scope--nos-realisations, body.page-nos-realisations,
.tetria-page-scope--nos-realisations, body.page-nos-realisations #page,
.tetria-page-scope--nos-realisations, body.page-nos-realisations #content,
.tetria-page-scope--nos-realisations, body.page-nos-realisations .site-content,
.tetria-page-scope--nos-realisations, body.page-nos-realisations .content-area,
.tetria-page-scope--nos-realisations, body.page-nos-realisations .site-main{
  background:#fff !important;
}

.tetria-page-scope--nos-realisations, body.page-nos-realisations .tetria-realisations .tetria-filter-btn{
  background:#fff !important;
  color: #000 !important;
}

.tetria-page-scope--nos-realisations, body.page-nos-realisations .tetria-realisations .tetria-filter-btn.is-active{
  background: var(--tetria-btn-bg, var(--tetria-accent, #ff3b1f));
  color: var(--tetria-btn-text, #fff);
  border-color: var(--tetria-btn-bg, var(--tetria-accent, #ff3b1f));
}

.tetria-page-scope--nos-realisations, body.page-nos-realisations .tetria-realisations .tetria-filter-btn:not(.is-active):hover,
.tetria-page-scope--nos-realisations, body.page-nos-realisations .tetria-realisations .tetria-filter-btn:not(.is-active):focus{
  background: #fff !important;
  color: #FE2601 !important;
  border-color: #FE2601 !important;
}

.tetria-page-scope--nos-realisations, body.page-nos-realisations .tetria-realisations .tetria-sep{
  background: var(--tetria-sep, rgba(0,0,0,.18));
}

/* [PATCH NOS_REALISATIONS_UI] Zone "Page" (entre header-extension et footer) : fond blanc */
.tetria-page-scope--nos-realisations, body.page-nos-realisations #content,
.tetria-page-scope--nos-realisations, body.page-nos-realisations .site-content,
.tetria-page-scope--nos-realisations, body.page-nos-realisations #primary,
.tetria-page-scope--nos-realisations, body.page-nos-realisations .content-area{
  background: var(--tetria-white, #fff) !important;
}

/* [PATCH NOS_REALISATIONS_UI] Contrainte 1050px : renforcer (évite override par container global) */
.tetria-page-scope--nos-realisations, body.page-nos-realisations .tetria-realisations-wrap .tetria-container{
  max-width: 1050px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* --- PATCH_NOS_REALISATIONS_FO_02C_FIX_CANEVAS_1050 (2026-02-15 14:33:59) ---
   Objectif: contraindre la grille/carrousel des réalisations à 1050px (sans toucher au canevas global 1200px).
   Scope: uniquement la page nos-realisations (page-id-343 dans env actuel, mais on scope aussi via .tetria-realisations-wrap).
*/
body.page-id-343 .tetria-realisations-wrap .tetria-container,
body.page-id-343 .tetria-realisations-wrap .tetria-realisations,
body.page-id-343 .tetria-realisations-wrap .tetria-grid,
body.page-id-343 .tetria-realisations-wrap .tetria-filters,
body.page-id-343 .tetria-realisations-wrap .tetria-sep{
  max-width:1050px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* Fallback si l’ID change: scope par wrapper page */
.tetria-realisations-wrap .tetria-grid,
.tetria-realisations-wrap .tetria-filters,
.tetria-realisations-wrap .tetria-sep{
  max-width:1050px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
/* PATCH NOS_REALISATIONS_FO_BG_WHITE_01: fond blanc zone page (arrière-plan derrière la carte CTA) */
body.page-id-343 #content.site-content{
  background: #ffffff !important;
}

/* nos-realisations: espace bas CTA avant footer */
body.page-id-343 .tetria-realisations-cta{margin-bottom:100px;}

/* === FINALISATION 04F : Force button font from Options générales (Moonbeam etc.) === */
.tetria-page-scope--nos-realisations, body.page-nos-realisations :is(a.btn, button.btn, input[type="submit"], .tetria-btn, .tetria-realisations-btn, .tetria-realisations-filter button, .tetria-realisations-filter .tetria-btn){
  font-family: var(--tetria-btn-ff, inherit), sans-serif !important;
}