/* style des boutons des rubriques vous êtes */
/* Centrage du bouton et marges */
.row-btn {
  display: flex;               /* Utiliser Flexbox */
  justify-content: center;     /* Centre horizontalement */
  align-items: center;         /* Centre verticalement si nécessaire */
  margin: 2px 0;              /* Espace au-dessus et en dessous */
  width: 100%;                 /* S'assure que le conteneur prend toute la largeur */
}

/* Style du bouton */
.row-btn .btn {
  display: inline-flex;        /* inline-flex pour respecter Flexbox du parent */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: bold;
  padding: 15px;
  border-radius: 8px;
  color: #ffffff;
  background-color: #264653;
  width: 270px;                /* Largeur fixe */
  text-align: center;
  transition: transform 0.2s ease, background 0.2s ease;
  cursor: pointer;
}

.row-btn .btn:hover {
  background-color: #223F4A;
  color: #ffffff;
  transform: scale(1.05);
}


    .hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    }
    
    .btn-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    }

    .hero-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-decoration: none;
               font-weight: bold;
        padding: 15px;
        border-radius: 8px;
        width: 270px;
        height: 60px;
        text-align: center;
        transition: transform 0.2s ease, background 0.2s ease;
    }

    .hero-btn img {
        max-height: 50px;
        margin: 10px 15px 10px 5px;
    }

    .hero-btn span {
        flex: 1;
        text-align: center;
    }

    /* Couleurs spécifiques */
    .hero-btn.architecte {
        color: white;
        background-color: #264653;
    }

    .hero-btn.bet {
        color: white;
        background-color: #5C5C5C;
    }

    .hero-btn.entreprise {
        color: #525252;
        background-color: #E9E8E8;
    }

    .hero-btn.enseignant {
        color: white;
        background-color: #2A9D8F;
    }

    /* Couleurs au survol */
    .hero-btn.architecte:hover {
        background-color: #223F4A;
    }

    .hero-btn.bet:hover {
        background-color: #525252;
    }

    .hero-btn.entreprise:hover {
        background-color: #D4D2D2;
    }

    .hero-btn.enseignant:hover {
        background-color: #1F7369;
    }


.astroid-header .dropdown-menu {
  min-width: 400px; /* ou plus selon tes besoins */
  white-space: nowrap; /* empêche le retour à la ligne */
}

/* largeur de l'image du logo OpenLAB dans l'accueil */
.img-limitee {
  max-width: 300px; /* ou 100%, selon le comportement souhaité */
  height: auto;
  display: block;
  margin: 0 auto; /* pour centrer */
}

/* largeur du champ de recherche façon google */

/* Étendre le conteneur si nécessaire */
.awesomplete {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
}

/* Forcer le champ à prendre toute la largeur */
input.js-finder-search-query.form-control {
    width: 600px !important;
    max-width: 100% !important;
    padding: 10px !important;
    font-size: 1rem !important;
    box-sizing: border-box !important;
    display: block !important;
  margin: 0 auto !important; /* centre le champ horizontalement */
}

/* on a chopé dans le compiled, le nom de la classe utilisée par l'image pour paramétrer en "cover", on la modifie ici */
.astroid-img-cover img {
    object-fit: contain; /* et non cover */
    width: 100%;
    height: 100%;
  background-color : #ffffff; /* fond blanc */
  padding: 10px;/* pour pas que l'mage touche les bords */
}

/* diminution des marges proposées dans la vue blog des "cards" */
.astroid-content-media-right,
.astroid-content-media-left {
  padding-top: 0px !important;   /* au lieu de 30px */
  padding-bottom: 10px !important;/* au lieu de 30px */
}

/* je rapetice la photo de catégorie en mode blog */
.category-desc img {
  width: 25%;          /* 1/4 de la largeur du conteneur */
    height: auto;        /* garde les proportions */
    display: block;      /* évite les espaces indésirables */
    margin: 0 auto;      /* centre horizontalement dans son conteneur */
    padding: 10px 0;     /* espace haut et bas (ajuste la valeur si besoin) */
}

/* ombre à l'arrière des feuilles d'article css personnalisé nommé comme suit: */
.articleombre {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 16px;
}

/* faire disparaître "partagez le" et "share it" avant l'icone linkedin' */
.ui-social-share-text {
    display: none !important;
}
body .astroid-article-events {
 margin-bottom: 0 !important;
}

/* corrige un bug dans l'affichage share this qui metait pin'in */
.st-pinterest-share-button,
.st-pinterest {
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}


/* modification bouton fond changement langue */
.lang-switch--light .btn.btn-secondary.dropdown-toggle {
  background-color: transparent;      /* pas de fond */
  color: #264653;                         /* texte blanc si navbar sombre */
  border: 1px solid rgba(255,255,255,0.6);
}
.lang-switch--light .btn.btn-secondary.dropdown-toggle:hover {
  background-color: rgba(255,255,255,0.1);
  color: #264653;
  border-color: #fff;
}


/* masquage visuel de l'authentification par clé d'accès (car même en désactivant le plugin ca reste et c'esrt moche.) */
fieldset#webauthn,
fieldset[data-fieldset="webauthn"] {
    display: none !important;
}


/* ===== Aeration de la page contact ===== */


div[class*="com-contact"] h2 {
  margin-top: 72px;
}

div[class*="com-contact"] h1 {
  margin-bottom: 72px;
}

div[class*="com-contact"] .com-contact__form,
div[class*="com-contact"] .contact-form {
   margin-left: 50px;
  }
  
div[class*="com-contact"] .com-contact__articles.contact-articles {
   margin-left: 50px;   /* ajuste la valeur en px selon ton besoin */
}

/* amelioration de la page profil utilisateur en lecture et édition */

.com-users-profile fieldset.com-users-profile__core legend,
.com-users-profile fieldset.users-profile-custom-actionlogs legend,
.com-users-profile fieldset.users-profile-custom-fields-8 legend,
.com-users-profile fieldset.users-profile-custom-webauthn legend {
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 70px;
}

com-users-profile__edit profile-edit

.com-users-profile fieldset.com-users-profile__core legend,
.com-users-profile fieldset.users-profile-custom-actionlogs legend,
.com-users-profile fieldset.users-profile-custom-fields-8 legend,
.com-users-profile fieldset.users-profile-custom-webauthn legend {
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 70px;
}

.com-users-profile fieldset.com-users-profile__core dl.dl-horizontal,
.com-users-profile fieldset.users-profile-custom-actionlogs dl.dl-horizontal,
.com-users-profile fieldset.users-profile-custom-fields-8 dl.dl-horizontal,
.com-users-profile fieldset.users-profile-custom-webauthn dl.dl-horizontal {
    margin-left: 50px;

/* dans le lien menu caché qui ouvre la modification de profil, */
/* j'ai créé la classe profil-edit-custom  */

body.profil-edit-custom fieldset > legend {
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 70px;
    margin-bottom: 20px;
    display: block;
    padding: 0;
       border: 0;
  }

  
body.profil-edit-custom dl.dl-horizontal {
    margin-left: 50px;
}

/* Masquer les champs Images et Liens dans les formulaires Joomla (front) */
/* Onglet Images */
  
#jform_urls_urlb,
#jform_urls_urlb-lbl,
#jform_urls_urlbtext,
#jform_urls_urlbtext-lbl {
  display  display: none !important;
}

/* Tentative de remplacement du coeur par pouce dans remerciement kunena */


.kbutton-thankyou .bi-heart-fill {
    display:none !important;
}
.kbutton-thankyou::before {
    content:"✔ ";
}