.elementor-2366 .elementor-element.elementor-element-fd631a1{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-2366 .elementor-element.elementor-element-3732376{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:4em;--padding-bottom:4em;--padding-left:4em;--padding-right:4em;}.elementor-2366 .elementor-element.elementor-element-3732376:not(.elementor-motion-effects-element-type-background), .elementor-2366 .elementor-element.elementor-element-3732376 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F6FB;}.elementor-2366 .elementor-element.elementor-element-480a470 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:1.5em;font-weight:300;text-transform:uppercase;color:var( --e-global-color-primary );}.elementor-2366 .elementor-element.elementor-element-81a967f .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:2.4em;font-weight:900;text-transform:uppercase;line-height:56px;color:var( --e-global-color-primary );}.elementor-2366 .elementor-element.elementor-element-2ba93c1{--display:flex;--min-height:420px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2366 .elementor-element.elementor-element-2ba93c1:not(.elementor-motion-effects-element-type-background), .elementor-2366 .elementor-element.elementor-element-2ba93c1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.hofer-ag.ch/wp-content/uploads/2024/12/wp-4-scaled.jpg");background-position:center left;background-repeat:no-repeat;background-size:cover;}.elementor-2366 .elementor-element.elementor-element-8e1289e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(max-width:1024px){.elementor-2366 .elementor-element.elementor-element-fd631a1{--flex-direction:column-reverse;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2366 .elementor-element.elementor-element-3732376{--padding-top:2em;--padding-bottom:2em;--padding-left:2em;--padding-right:2em;}.elementor-2366 .elementor-element.elementor-element-2ba93c1{--min-height:492px;}}@media(max-width:767px){.elementor-2366 .elementor-element.elementor-element-fd631a1{--flex-direction:column-reverse;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-2366 .elementor-element.elementor-element-3732376{--padding-top:2em;--padding-bottom:2em;--padding-left:1em;--padding-right:1em;}.elementor-2366 .elementor-element.elementor-element-480a470 .elementor-heading-title{font-size:1.2em;}.elementor-2366 .elementor-element.elementor-element-81a967f .elementor-heading-title{font-size:2.2em;}.elementor-2366 .elementor-element.elementor-element-2ba93c1{--min-height:40vh;}}@media(min-width:768px){.elementor-2366 .elementor-element.elementor-element-3732376{--width:50%;}.elementor-2366 .elementor-element.elementor-element-2ba93c1{--width:50%;}}@media(max-width:1024px) and (min-width:768px){.elementor-2366 .elementor-element.elementor-element-3732376{--width:100%;}.elementor-2366 .elementor-element.elementor-element-2ba93c1{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-d7e99fc *//* ================================
   Références Façade - Styles scoped
   Polices et couleurs héritent du thème Elementor
   ================================ */

#references-facade {
  /* Mise en page en grille des cartes + header pleine largeur */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  margin: clamp(8px, 2vw, 24px) auto;
  color: inherit;
  font-family: inherit;
  font-variant-numeric: tabular-nums; /* chiffres bien alignés */
}

/* Le header occupe toute la largeur */
#references-facade > header {
  grid-column: 1 / -1;
  display: grid;
  row-gap: 8px;
  color: inherit;
  font-family: inherit;
}

#references-facade > header h2,
#references-facade > header p {
  margin: 0;
  color: inherit;
  font-family: inherit;
}

/* Cartes - disposition responsive
   Mobile: 1 colonne
   ≥ 700px: 2 colonnes
   ≥ 1100px: 3 colonnes
*/
#references-facade > article.reference-item {
  grid-column: 1 / -1;
}

@media (min-width: 700px) {
  #references-facade > article.reference-item {
    grid-column: span 6;
  }
}

@media (min-width: 1100px) {
  #references-facade > article.reference-item {
    grid-column: span 4;
  }
}

/* Carte - bloc et surface */
#references-facade .reference-item {
  position: relative;
  display: block;
  padding: clamp(14px, 1.6vw, 20px);
  border-radius: 10px;
  background: transparent;              /* hérite de l’arrière-plan */
  color: inherit;                        /* hérite de la couleur du thème */
  font-family: inherit;
  /* Bordure discrète basée sur la couleur du texte si variable Elementor non dispo */
  --rf-border-color: color-mix(in srgb, currentColor 22%, transparent);
  --rf-divider-color: color-mix(in srgb, currentColor 18%, transparent);
  border: 1px solid var(--e-global-color-text, var(--rf-border-color, currentColor));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
 
}

/* Survol et focus accessibles */
#references-facade .reference-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}

#references-facade .reference-item:focus-within {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Titres des cartes */
#references-facade .reference-item h3 {
  margin: 0 0 10px 0;
  line-height: 1.25;
  color: inherit;
  font-family: inherit;
  font-weight: 600;
  text-wrap: balance;
}

/* Définition des métadonnées en grille 2 colonnes
   => rendu "tableau" propre et centré verticalement ligne par ligne */
#references-facade .reference-item dl {
  display: grid;
  grid-template-columns: minmax(160px, 0.9fr) 1fr; /* colonne libellés un peu plus large */
  align-items: stretch; 
  /* on laisse la ligne occuper la hauteur */
  grid-auto-rows: minmax(44px, auto);             /* hauteur de ligne mini uniforme */
  column-gap: 16px;

  row-gap: 0;
  margin: 0;
  color: inherit;
  font-family: inherit;

  /* lignes horizontales continues façon tableau */
  border-top: 1px solid var(--e-global-color-text, var(--rf-divider-color, currentColor));
}

/* Chaque cellule de la "table" est un flex pour centrer le contenu verticalement */
#references-facade .reference-item dt,
#references-facade .reference-item dd {
  display: flex;
  
  align-items: center;          /* centrage vertical réel du texte */
  padding-block: 10px;          /* respirations identiques sur toutes les lignes */
  margin: 0;
  min-height: 44px;
  border-bottom: 1px solid var(--e-global-color-text, var(--rf-divider-color, currentColor));
}

/* Etiquettes des champs */
#references-facade .reference-item dt {
  color: inherit;
  font-family: inherit;
  font-weight: 600;
  opacity: 0.9;
  
 
  
}

/* Valeurs des champs */
#references-facade .reference-item dd {
  color: inherit;
  font-family: inherit;
  overflow-wrap: anywhere;
   
}

/* Alignements colonne: libellés à droite en desktop, valeurs à gauche */
@media (min-width: 700px) {
  #references-facade .reference-item dt {
    text-align: right;
    justify-content: flex-end;
  }
  #references-facade .reference-item dd {
    text-align: left;
    justify-content: flex-start;
  }
}

/* Petits écrans - bascule en une colonne dans le DL si étroit
   tout reste aligné et les séparateurs sont conservés */
@media (max-width: 420px) {
  #references-facade .reference-item dl {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(40px, auto);
  }
  #references-facade .reference-item dt {
    text-align: left;
    justify-content: flex-start;
    padding-bottom: 6px;
  }
  #references-facade .reference-item dd {
    padding-top: 0;
  }
}

/* Ancienne séparation optique remplacée par les bordures de ligne régulières
   (on neutralise la règle dd + dt de la base si elle existe ailleurs) */
#references-facade .reference-item dd + dt {
  padding-top: 0;
  border-top: none;
  margin-top: 0;
}

/* Espace entre les cartes selon la ligne de base du grid */
#references-facade .reference-item:not(:last-child) {
  /* espacement géré par gap du parent */
}

/* Liens éventuels à l’intérieur des cartes - héritent du thème */
#references-facade .reference-item a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Réduction du mouvement si l’utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  #references-facade .reference-item {
    transition: none;
  }
  #references-facade .reference-item:hover {
    transform: none;
  }
}

/* Impression - une colonne, pas d’ombres, pas de bordures fortes */
@media print {
  #references-facade {
    display: block;
  }
  #references-facade > header {
    margin-bottom: 12px;
  }
  #references-facade .reference-item {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000;
    margin: 0 0 12px 0;
    background: none;
  }
}/* End custom CSS */