.tri-equipe-list {
--tri-equipe-text: #ffffff;
--tri-equipe-radius: 15px;
--tri-equipe-gap: 30px;
--tri-equipe-font: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--tri-equipe-gap);
margin: 0 auto;
}
@media (max-width: 980px) {
.tri-equipe-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.tri-equipe-list { grid-template-columns: 1fr; }
}
.tri-equipe-card {
position: relative;
border-radius: var(--tri-equipe-radius);
overflow: hidden;
aspect-ratio: 275 / 345;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.tri-equipe-card-inner {
position: relative;
width: 100%;
height: 100%;
}
.tri-equipe-front {
position: absolute;
inset: 0;
background-color: #dcdfe6; background-size: cover;
background-position: 50% 50%;
}
.tri-equipe-back {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
background-color: #1F3D8C; color: var(--tri-equipe-text);
font-family: var(--tri-equipe-font);
transform: translateY(100%);
transition: transform 0.45s ease;
}
.tri-equipe-couleur-bleu     { background-color: #1F3D8C; }
.tri-equipe-couleur-sarcelle { background-color: #019C91; }
.tri-equipe-couleur-orange   { background-color: #F98500; }
.tri-equipe-couleur-corail   { background-color: #F86367; }
.tri-equipe-couleur-vert     { background-color: #59962B; }
.tri-equipe-motif {
background-image: url(//cjeshawinigan.org/wp-content/uploads/2025/03/points.svg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
} .tri-equipe-card:hover .tri-equipe-back,
.tri-equipe-card:focus-within .tri-equipe-back {
transform: translateY(0);
}
.tri-equipe-nom {
margin: 0 0 6px;
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: var(--tri-equipe-text);
}
.tri-equipe-poste {
margin: 0;
font-size: 16px;
line-height: 1.2;
color: var(--tri-equipe-text);
}
.tri-equipe-separateur {
width: 60px;
margin: 16px 0;
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.tri-equipe-contact {
margin: 0;
font-size: 16px;
line-height: 1.6;
}
.tri-equipe-contact a {
color: var(--tri-equipe-text);
text-decoration: none;
}
.tri-equipe-contact a:hover {
text-decoration: underline;
}
.tri-equipe-icone {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 6px;
vertical-align: middle;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.tri-equipe-icone-tel {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.6 10.8c1.4 2.7 3.6 4.9 6.3 6.3l2.1-2.1c.3-.3.7-.4 1-.2 1.2.5 2.5.8 3.9.8.6 0 1.1.5 1.1 1.1v3.7c0 .6-.5 1.1-1.1 1.1C10.5 21.5 2.5 13.5 2.5 3.1c0-.6.5-1.1 1.1-1.1H7.3c.6 0 1.1.5 1.1 1.1 0 1.4.3 2.7.8 3.9.1.3.1.7-.2 1L6.6 10.8z'/%3E%3C/svg%3E");
}
.tri-equipe-icone-mail {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M2 5.5C2 4.7 2.7 4 3.5 4h17c.8 0 1.5.7 1.5 1.5v13c0 .8-.7 1.5-1.5 1.5h-17C2.7 20 2 19.3 2 18.5v-13zm2 .6v.2l8 5.6 8-5.6v-.2H4zm16 2.5l-7.4 5.2c-.4.3-.8.3-1.2 0L4 8.6v9.9h16V8.6z'/%3E%3C/svg%3E");
}