/* trconnect style */



.trconnect-logo div.g-particle { padding: 0px; }

section#g-showcase { margin-top: 0px; }



@media screen and (min-width: 1180px) {

	

/* section#g-showcase { margin-top: -165px; } */



}



/* Conteneur principal avec une grille de 4 colonnes */

.categories-three-columns {

    display: grid;

    grid-template-columns: repeat(4, 1fr); /* Quatre colonnes de taille égale */

    gap: 20px; /* Espacement entre les colonnes */

    margin: 20px 0; /* Marges au-dessus et en-dessous */

}



/* Styles pour chaque élément de catégorie */

.com-content-categories__item {

    padding: 15px;

    border: 1px solid #ddd; /* Bordure légère */

    border-radius: 8px; /* Coins arrondis */

    background-color: #f9f9f9; /* Couleur de fond */

    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation pour hover */

}



/* Effet au survol */

.com-content-categories__item:hover {

    transform: translateY(-5px); /* Léger déplacement vers le haut */

    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Ombre */

}



.com-content-categories__item-title-wrapper {

	display:inline;

	text-align:center; 

}





/* Titre de chaque catégorie */

.com-content-categories__item-title {

    font-size: 1em;

    font-weight: bold;

    margin-bottom: 10px;

	

}



/* Badge d'informations sur le nombre d'articles */

.com-content-categories__item .badge {

    margin-left: 5px;

    font-size: 0.9em;

}



/* Bouton pour afficher les sous-catégories */

.com-content-categories__item .btn {

    margin-top: 10px;

    font-size: 0.8em;

}



/* Description de la catégorie */

.com-content-categories__description {

    margin-top: 15px;

    font-size: 0.95em;

    color: #555; /* Couleur de texte adoucie */

    line-height: 1.5;

}



/* Image de la catégorie */

.com-content-categories__item img {

    max-width: 100%; /* L'image prend toute la largeur disponible */

    height: auto;

    border-radius: 8px; /* Coins arrondis pour les images */

    margin-top: 10px;

}



/* Sous-catégories */

.com-content-categories__children {

    margin-top: 15px;

    padding-top: 10px;

    border-top: 1px solid #eee; /* Ligne séparatrice */

}



/* Boutons d'expansion */

.com-content-categories__item button {

    background-color: #007bff;

    color: #fff;

    border: none;

    padding: 5px 10px;

    border-radius: 5px;

    cursor: pointer;

    transition: background-color 0.3s ease;

}



.com-content-categories__item button:hover {

    background-color: #0056b3;

}



/* Responsive : 3 colonnes sur tablettes */

@media (max-width: 992px) {

    .categories-three-columns {

        grid-template-columns: repeat(3, 1fr); /* Passe à 3 colonnes */

    }

}



/* Responsive : 2 colonnes sur petits appareils */

@media (max-width: 768px) {

    .categories-three-columns {

        grid-template-columns: repeat(2, 1fr); /* Passe à 2 colonnes */

    }

}



/* Responsive : 1 colonne sur mobiles */

@media (max-width: 480px) {

    .categories-three-columns {

        grid-template-columns: 1fr; /* Passe à 1 colonne */

    }

}









@media (max-width: 768px) {

  .golfettes-video {

    display: none; /* Masquer la vidéo sur les petits écrans */

  }

}





.golfettes-video {

  position: relative;

  width: 100vw; /* Pleine largeur */

  height: 720px; /* La hauteur s'ajustera automatiquement */

  overflow: hidden; /* Empêche les débordements */

}



.golfettes-video video {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  min-width: 100%; /* Assure que la largeur couvre tout l'écran */

  min-height: 100%; /* Assure que la hauteur couvre tout l'écran */

  width: auto; /* Permet une adaptation en largeur */

  height: auto; /* Permet une adaptation en hauteur */

  z-index: 5; /* Place la vidéo en arrière-plan */

}



.golfettes-video .overlay {

  position: absolute;

  bottom: 0; /* Place l'overlay en bas de la vidéo */

  left: 0;

  width: 100%; /* Pleine largeur */

  height: 720px; /* Hauteur fixe ou ajustée */

  /* background-image: url('images/golfettes_overlay.png'); /* Image d'overlay */ 

  background: rgba(0,0,0,0.25);

  background-repeat: repeat; /* Répète l'image */

  background-size: auto; /* Ajustez si besoin */

  background-position: center; /* Centre l'image horizontalement */

  z-index: 10; /* Place l'overlay au-dessus de la vidéo */

  pointer-events: none; /* Rend l'overlay non cliquable */

}







/* blog categories éléctrique */

/* Grille de 4 colonnes */

.blog-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr); /* 4 colonnes */

    gap: 20px; /* Espacement entre les articles */

    margin: 20px 0;

}



/* Style des cartes d’articles */

.article-card {

    display: flex;

    flex-direction: column;

    border: 1px solid #ddd;

    border-radius: 10px;

    background-color: #fff;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    transition: transform 0.3s ease;

    overflow: hidden;

}



.article-card:hover {

    transform: translateY(-5px);

    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);

}



/* Image des articles */

.article-card img {

    width: 100%;

    height: 180px; /* Taille fixe pour uniformiser */

    object-fit: cover;

}



/* Contenu */

.article-card__content {

    padding: 15px;

}



/* Titre */

.article-card__title {

    font-size: 1.2em;

    font-weight: bold;

    margin-bottom: 10px;

    text-align: center;

}



.article-card__title a {

    text-decoration: none;

    color: #333;

    transition: color 0.3s ease;

}



.article-card__title a:hover {

    color: #007bff;

}



/* Métadonnées (date, auteur...) */

.article-card__meta {

    font-size: 0.85em;

    color: #777;

    text-align: center;

    margin-bottom: 10px;

}



/* Texte d’introduction */

.article-card__intro {

    font-size: 0.95em;

    color: #555;

    line-height: 1.5;

    text-align: justify;

    margin-bottom: 10px;

}



/* Bouton Lire la suite */

.article-card__readmore {

    display: inline-block;

    padding: 8px 15px;

    background-color: #007bff;

    color: #fff;

    text-decoration: none;

    text-align: center;

    border-radius: 5px;

    font-size: 0.9em;

    transition: background-color 0.3s ease;

    margin-top: auto;

    align-self: center;

}



.article-card__readmore:hover {

    background-color: #0056b3;

}



div.article-card a:hover, div.article-card a:focus { cursor:pointer; }



/* Responsive : 3 colonnes sur tablettes */

@media (max-width: 992px) {

    .blog-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



/* Responsive : 2 colonnes sur petits appareils */

@media (max-width: 768px) {

    .blog-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



/* Responsive : 1 colonne sur mobiles */

@media (max-width: 480px) {

    .blog-grid {

        grid-template-columns: 1fr;

    }

}





/*blog cat desc + image */

/* Conteneur principal de l'intro */

.category-intro {

    text-align: center;

    margin-bottom: 30px;

}



/* Image de la catégorie en fond */

.category-intro__image {

    position: relative;

    width: 100%;

    height: 300px; /* Ajuste la hauteur selon ton besoin */

    background-size: cover;

    background-position: center;

    border-radius: 10px;

    overflow: hidden;

}



/* Overlay foncé pour rendre le texte plus lisible */

.category-intro__overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5); /* Fond sombre semi-transparent */

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Titre de la catégorie sur l'image */

.category-intro__title {

    font-size: 2em;

    font-weight: bold;

    color: #fff;

    text-transform: uppercase;

    letter-spacing: 1px;

}



/* Alternative si pas d'image */

.category-intro__title-noimage {

    font-size: 2em;

    font-weight: bold;

    color: #333;

    text-transform: uppercase;

    margin-top: 20px;

}



/* Description de la catégorie */

.category-intro__description {

    max-width: 800px;

    margin: 20px auto;

    font-size: 1.1em;

    color: #444;

    line-height: 1.6;

    text-align: justify;

}



/* Responsive : Ajustement de l’image sur petits écrans */

@media (max-width: 768px) {

    .category-intro__image {

        height: 200px;

    }



    .category-intro__title {

        font-size: 1.5em;

    }



    .category-intro__description {

        font-size: 1em;

    }

}



.trtopleft { float: left; margin-left: 20px; font-size:13px; }

   

.trcoordinate {  display: inline-block; font-size: 13px; }



/* .golfette { padding:0px!important; } */

.golfette #g-footer div.g-content { padding:0px!important; }



.trtopleft { float: left; margin-left: 20px; font-size:13px; }

   

.trcoordinate {  display: inline-block; font-size: 13px; }



#g-footer .g-container { max-width: 1780px; margin: 0 auto;  padding: 3rem 0; }



.golfette #g-footer .g-content { margin:10px!important; padding: 15px!important;}

.golfette #g-footer .g-content h3 { font-size: 1rem; margin: 0.75rem 0 1.5rem 0; font-wright: 700; color: #333333; }



.golfette .r-bottommenu {

	ul {

		margin: 0;

		padding: 0;

		li {

			list-style: none;

			margin: 0;

			padding: 5px 0;

			@include breakpoint(mobile-only) {

				display: inline-block;

    			padding: 0 12px 0 0;

    			margin-right: 0;

			}

			&:first-child {

				padding-top: 0;

			}

			&:last-child {

				padding-bottom: 0;

			}

			a {

				

					color: #737272;

				}

            a:hover { color:#f39c12; }    

        }

    }

}



.golfette .r-get-support ul.r-get-support-address li i {

    margin-right: 7px;

    color: #f39c12;

    min-width: 20px;

}



.golfette .r-get-support .r-get-support-social a {

    text-align: center;

    display: inline-block;

    font-size: 32px;

    margin-right: 10px;

    color: #737272;

}



#g-showcase a {

    color: #ffffff;

}





@media (max-width: 960px) {

    #g-top .g-content.g-particle {

        margin-left: 40px;

    }

    .trtopleft { width:100%; margin:0 auto; }

    

}



  .r-top {
    text-transform: uppercase;
    font-size: 11px;
    line-height: 1;
    padding: 13px 30px;
    display: flex;
    align-items: center;
  }
  .r-top .r-contact-block {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    margin-right: auto;
  }
  .r-top .r-contact-block .r-contact-item {
    display: flex;
    align-items: center;
  }
  .r-top .r-contact-block .r-contact-link {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
  }
  .r-top .r-contact-block .r-contact-link:hover {
    color: #006699;
  }
  .r-top .r-contact-block .r-contact-link i {
    font-size: 14px;
  }
  @media only all and (max-width: 767px) {
    .r-top .r-contact-block {
      gap: 0;
    }
    .r-top .r-contact-block .r-contact-address, .r-top .r-contact-block .r-contact-email {
      display: none;
    }
    .r-top .r-contact-block .r-contact-phone .r-contact-link {
      gap: 8px;
    }
    .r-top .r-contact-block .r-contact-phone .r-contact-link i {
      font-size: 16px;
    }
  }
  .r-top .r-usermenu-block {
    margin-left: auto;
  }
  .r-top .r-usermenu-block .r-sd-text:hover {
    color: #006699;
  }
  .r-top .r-hz-menu .r-sd-text:hover {
    color: #006699;
  }
  @media only all and (min-width: 768px) {
    .r-usermenu.r-sd .r-sd-text i:not(.fa-angle-down) {
      display: none;
    }
  }
  @media only all and (max-width: 767px) {
    .r-usermenu.r-sd .r-sd-text span {
      display: none;
    }
  }
  .r-topleftmenu.r-sd .r-sd-text:hover {
    color: #006699;
  }
  @media only all and (min-width: 768px) {
    .r-topleftmenu.r-sd .r-sd-text {
      display: none !important;
    }
    .r-topleftmenu.r-sd .r-sd-block {
      display: block !important;
      visibility: visible !important;
      position: relative !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      box-shadow: none !important;
      z-index: 1 !important;
      background: transparent !important;
    }
    .r-topleftmenu.r-sd .r-sd-block:before {
      display: none !important;
    }
    .r-topleftmenu.r-sd .r-sd-block .r-sd-item {
      display: inline-block;
      margin: 0 16px 0 0;
      padding: 0 16px 0 0;
      border-right: 1px solid rgba(255, 255, 255, 0.3);
      background: transparent !important;
      color: #ffffff;
      text-transform: uppercase;
      font-size: 11px;
    }
    .r-topleftmenu.r-sd .r-sd-block .r-sd-item:last-child {
      margin-right: 0;
      padding-right: 0;
      border-right: 0;
    }
    .r-topleftmenu.r-sd .r-sd-block .r-sd-item:hover {
      color: #006699;
    }
  }
  .r-sd {
    position: relative;
    cursor: pointer;
  }
  .r-sd .r-sd-text {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ffffff;
  }
  .r-sd .r-sd-block {
    display: none;
    position: absolute;
    top: 100%;
    min-width: 180px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 10px 0;
  }
  .r-sd .r-sd-block.r-sd-left {
    left: 0;
  }
  .r-sd .r-sd-block.r-sd-right {
    right: 0;
  }
  .r-sd .r-sd-block .r-sd-item {
    display: block;
    padding: 8px 20px;
    color: #333333;
    text-decoration: none;
    transition: background 0.2s ease;
  }
  .r-sd .r-sd-block .r-sd-item:hover {
    background: #f5f5f5;
    color: #006699;
  }
  .r-sd .r-sd-block .r-sd-divider {
    height: 1px;
    background: #eeeeee;
    margin: 8px 0;
  }
  .r-sd:hover .r-sd-block {
    display: block;
  }
  .r-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
  }
  .r-modal.active {
    display: flex;
  }
  .r-modal .content {
    background: #ffffff;
    padding: 40px;
    max-width: 800px;
    width: 90%;
    position: relative;
  }
  .r-modal .r-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
  .r-modal .r-close:before, .r-modal .r-close:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #333333;
  }
  .r-modal .r-close:before {
    transform: rotate(45deg);
  }
  .r-modal .r-close:after {
    transform: rotate(-45deg);
  }
  .center-vertical {
    display: flex;
    align-items: center;
  }