/**
 * com_radisnoiragent - CSS du rendu front "Équipe(s)" pour un override d'article
 * (`site/layouts/team/`), jamais partagée avec `publications.css` ni avec le CSS du module
 * (`mod_radisnoir_pro`, classes `ragent-teammod-*`/`ragent-teammodlist-*`) - les deux peuvent
 * cohabiter sur la même page sans jamais s'influencer mutuellement.
 *
 * Quatre thèmes, quatre préfixes de classes strictement séparés : `.ragent-team-*` (thème "carte",
 * photo ronde sans fond, layouts/team/carte.php), `.ragent-teamcarre-*` (thème "carte_couleur", fond
 * couleur primaire, layouts/team/cartecouleur.php), `.ragent-teamblanc-*` (thème "carte_blanc", fond
 * blanc classique, layouts/team/carteblanc.php) et `.ragent-teamlist-*` (thème "liste",
 * layouts/team/liste.php). Surchargeable indépendamment en copiant les fichiers concernés vers
 * templates/<template>/html/layouts/com_radisnoiragent/team/.
 *
 * Nombre de colonnes de la grille (thème "Cartes") réglé PAR ÉQUIPE via des variables CSS
 * personnalisées (--ragent-cols-sm/md/lg), posées en style inline sur `.ragent-team-grid` par
 * carte.php - seuils responsives alignés sur les points de rupture Bootstrap standard (768px/992px),
 * ajustables ici si le gabarit du site utilise d'autres seuils.
 */

.ragent-team {
    margin: 1.5rem 0;
}
.ragent-team-general-title {
    margin: 0 0 1.5rem;
    font-size: 2.5rem;
    /* font-weight: 700; */
    color: inherit;
    text-align: center;
}
.ragent-team-team {
    margin: 0 0 2.5rem;
}
section.ragent-team-team {
    margin-top: 120px;
}
.ragent-team-team:last-child {
    margin-bottom: 0;
}
.ragent-team-team-title {
    margin: 0 0 4rem 0rem;
    font-size: 2rem;
    /* font-weight: 700; */
    color: inherit;
    text-align: center;
}
.ragent-team-grid {
    display: grid;
    row-gap: 3rem;
    column-gap: 2.5rem;
    grid-template-columns: repeat(var(--ragent-cols-sm, 1), 1fr);
}
@media (min-width: 768px) {
    .ragent-team-grid {
        grid-template-columns: repeat(var(--ragent-cols-md, 2), 1fr);
    }
}
@media (min-width: 992px) {
    .ragent-team-grid {
        grid-template-columns: repeat(var(--ragent-cols-lg, 3), 1fr);
    }
}
.ragent-team-member {
    text-align: center;
    transition: transform 0.2s ease;
}
.ragent-team-member:hover {
    transform: translateY(-4px);
}
.ragent-team-member-photo {
    width: 90%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 0.85rem;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ragent-team-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ragent-team-member-photo-placeholder {
    font-size: 1.5rem;
    /* font-weight: 700; */
    color: white;
}
.ragent-team-member-name {
    margin: 0;
    font-size: 1rem;
    /* font-weight: 700; */
    color: inherit;
}
.ragent-team-member-role {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: #555;
}
.ragent-team-member-role2 {
    margin: 0.1rem 0 0;
    font-size: 0.82rem;
    color: #777;
}
.ragent-team-member-description {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #555;
    text-align: left;
}
.ragent-team-member-links {
    margin: 0.6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}
.ragent-team-member-link i {
    margin-right: 0.35em;
}
.ragent-team-member-link {
    font-size: 1.25rem;
    /* font-weight: 600; */
    text-decoration: none;
    /* color: #333; */
}
.ragent-team-member-link:hover {
    color: #666;
}

/* === Thème "Cartes - photo carrée, avec fond couleur" (layouts/team/cartecouleur.php) - classes
   ragent-teamcarre-* (nom conservé depuis la 1re version, avant scission en deux thèmes), jamais
   mélangées avec ragent-team-* (photo ronde, sans fond), ragent-teamblanc-* (fond blanc, ci-dessous)
   ni ragent-teamlist-*. Même grille responsive que le thème "Cartes" ci-dessus, mais chaque membre est
   une vraie carte (fond couleur primaire, coins arrondis à 20px, photo carrée, typo inversée en
   blanc) avec un léger mouvement au survol. === */
.ragent-teamcarre-general-title {
    margin: 0 0 1.5rem;
    font-size: 2.5rem;
    /* font-weight: 700; */
    color: inherit;
    text-align: center;
}
.ragent-teamcarre-team {
    margin: 0 0 2.5rem;
}
section.ragent-teamcarre-team {
    margin-top: 120px;
}
.ragent-teamcarre-team:last-child {
    margin-bottom: 0;
}
.ragent-teamcarre-team-title {
    margin: 0 0 4rem 0rem;
    font-size: 2rem;
    /* font-weight: 700; */
    color: inherit;
    text-align: center;
}
.ragent-teamcarre-grid {
    display: grid;
    row-gap: 3rem;
    column-gap: 2.5rem;
    grid-template-columns: repeat(var(--ragent-cols-sm, 1), 1fr);
}
@media (min-width: 768px) {
    .ragent-teamcarre-grid {
        grid-template-columns: repeat(var(--ragent-cols-md, 2), 1fr);
    }
}
@media (min-width: 992px) {
    .ragent-teamcarre-grid {
        grid-template-columns: repeat(var(--ragent-cols-lg, 3), 1fr);
    }
}
.ragent-teamcarre-member {
    text-align: center;
    /* Couleur primaire du site plutôt qu'un blanc fixe (demande explicite) - `--color-primary` est
       la variable CSS du template du site (confirmée par l'utilisateur - `--primary-color` puis
       `--bs-primary` étaient tous deux erronés) ; #0d6efd sert de repli seulement si cette variable
       n'est pas définie. Toute la typo de la carte est inversée en blanc ci-dessous pour rester
       lisible sur ce fond coloré. */
    background: var(--color-primary, #0d6efd);
    border-radius: 20px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ragent-teamcarre-member:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.ragent-teamcarre-member-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 0.85rem;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ragent-teamcarre-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ragent-teamcarre-member-photo-placeholder {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}
.ragent-teamcarre-member-name {
    margin: 0;
    font-size: 1rem;
    /* font-weight: 700; */
    color: #fff;
}
.ragent-teamcarre-member-role {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.9);
}
.ragent-teamcarre-member-role2 {
    margin: 0.1rem 0 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
}
.ragent-teamcarre-member-description {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}
.ragent-teamcarre-member-links {
    margin: 0.6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}
.ragent-teamcarre-member-link i {
    margin-right: 0.35em;
}
.ragent-teamcarre-member-link {
    font-size: 1rem;
    /* font-weight: 600; */
    text-decoration: none;
    color: #ffffffc7 !important;
}
.ragent-teamcarre-member-link:hover {
    color: rgba(255, 255, 255, 0.75);
}

/* === Thème "Cartes - photo carrée, avec fond blanc" (layouts/team/carteblanc.php) - classes
   ragent-teamblanc-*, jamais mélangées avec ragent-team-*/ragent-teamcarre-*/ragent-teamlist-*.
   Même mise en page que "carte_couleur" ci-dessus (carte carrée, coins arrondis 20px, ombre au
   survol), mais fond blanc classique et typographie foncée non inversée - variante ajoutée EN PLUS
   de "carte_couleur", ne la remplace pas (demande explicite). === */
.ragent-teamblanc-general-title {
    margin: 0 0 1.5rem;
    font-size: 2.5rem;
    /* font-weight: 700; */
    color: inherit;
    text-align: center;
}
.ragent-teamblanc-team {
    margin: 0 0 2.5rem;
}
section.ragent-teamblanc-team {
    margin-top: 120px;
}
.ragent-teamblanc-team:last-child {
    margin-bottom: 0;
}
.ragent-teamblanc-team-title {
    margin: 0 0 4rem 0rem;
    font-size: 2rem;
    /* font-weight: 700; */
    color: inherit;
    text-align: center;
}
.ragent-teamblanc-grid {
    display: grid;
    row-gap: 3rem;
    column-gap: 2.5rem;
    grid-template-columns: repeat(var(--ragent-cols-sm, 1), 1fr);
}
@media (min-width: 768px) {
    .ragent-teamblanc-grid {
        grid-template-columns: repeat(var(--ragent-cols-md, 2), 1fr);
    }
}
@media (min-width: 992px) {
    .ragent-teamblanc-grid {
        grid-template-columns: repeat(var(--ragent-cols-lg, 3), 1fr);
    }
}
.ragent-teamblanc-member {
    text-align: center;
    background: #ffffff;
    border-radius: 20px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ragent-teamblanc-member:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.ragent-teamblanc-member-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 0.85rem;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ragent-teamblanc-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ragent-teamblanc-member-photo-placeholder {
    font-size: 1.4rem;
    /* font-weight: 700; */
    color: #fff;
}
.ragent-teamblanc-member-name {
    margin: 0;
    font-size: 1rem;
    /* font-weight: 700; */
    color: inherit;
}
.ragent-teamblanc-member-role {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: #555;
}
.ragent-teamblanc-member-role2 {
    margin: 0.1rem 0 0;
    font-size: 0.82rem;
    color: #777;
}
.ragent-teamblanc-member-description {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #555;
    text-align: left;
}
.ragent-teamblanc-member-links {
    margin: 0.6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}
.ragent-teamblanc-member-link i {
    margin-right: 0.35em;
}
.ragent-teamblanc-member-link {
    font-size: 1rem;
    /* font-weight: 600; */
    text-decoration: none;
    /* color: #333; */
}
.ragent-teamblanc-member-link:hover {
    color: #666;
}

/* === Polices réduites en grille dense (5 ou 6 colonnes sur grand écran) - demande explicite,
   UNIQUEMENT les trois thèmes "Cartes" (rond, avec fond couleur, avec fond blanc), jamais "Liste".
   Ciblé via sélecteur d'attribut sur le style inline `--ragent-cols-lg` (seul moyen CSS pur de
   conditionner sur une valeur de custom property) - le gabarit PHP génère toujours exactement ce
   format, sans espace, donc `[style*="--ragent-cols-lg:5;"]` matche de façon fiable. === */
.ragent-team-grid[style*="--ragent-cols-lg:5;"] .ragent-team-member-name,
.ragent-team-grid[style*="--ragent-cols-lg:6;"] .ragent-team-member-name,
.ragent-teamcarre-grid[style*="--ragent-cols-lg:5;"] .ragent-teamcarre-member-name,
.ragent-teamcarre-grid[style*="--ragent-cols-lg:6;"] .ragent-teamcarre-member-name,
.ragent-teamblanc-grid[style*="--ragent-cols-lg:5;"] .ragent-teamblanc-member-name,
.ragent-teamblanc-grid[style*="--ragent-cols-lg:6;"] .ragent-teamblanc-member-name {
    font-size: 0.8rem;
}
.ragent-team-grid[style*="--ragent-cols-lg:5;"] .ragent-team-member-role,
.ragent-team-grid[style*="--ragent-cols-lg:6;"] .ragent-team-member-role,
.ragent-teamcarre-grid[style*="--ragent-cols-lg:5;"] .ragent-teamcarre-member-role,
.ragent-teamcarre-grid[style*="--ragent-cols-lg:6;"] .ragent-teamcarre-member-role,
.ragent-teamblanc-grid[style*="--ragent-cols-lg:5;"] .ragent-teamblanc-member-role,
.ragent-teamblanc-grid[style*="--ragent-cols-lg:6;"] .ragent-teamblanc-member-role {
    font-size: 0.7rem;
}
.ragent-team-grid[style*="--ragent-cols-lg:5;"] .ragent-team-member-role2,
.ragent-team-grid[style*="--ragent-cols-lg:6;"] .ragent-team-member-role2,
.ragent-teamcarre-grid[style*="--ragent-cols-lg:5;"] .ragent-teamcarre-member-role2,
.ragent-teamcarre-grid[style*="--ragent-cols-lg:6;"] .ragent-teamcarre-member-role2,
.ragent-teamblanc-grid[style*="--ragent-cols-lg:5;"] .ragent-teamblanc-member-role2,
.ragent-teamblanc-grid[style*="--ragent-cols-lg:6;"] .ragent-teamblanc-member-role2 {
    font-size: 0.7rem;
}

/* === Thème "Liste" (layouts/team/liste.php) - classes ragent-teamlist-*, jamais mélangées avec
   les ragent-team-* ci-dessus (thème "Cartes"). Pas de grille : une ligne par membre. === */
.ragent-teamlist {
    display: grid;
    row-gap: 2rem;
    column-gap: 2rem;
    grid-template-columns: repeat(var(--ragent-cols-sm, 1), 1fr);
}
@media (min-width: 768px) {
    .ragent-teamlist {
        grid-template-columns: repeat(var(--ragent-cols-md, 2), 1fr);
    }
}
@media (min-width: 992px) {
    .ragent-teamlist {
        grid-template-columns: repeat(var(--ragent-cols-lg, 3), 1fr);
    }
}
.ragent-teamlist-member {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
}
.ragent-teamlist-member-photo {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    background: #eef1f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ragent-teamlist-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ragent-teamlist-member-photo-placeholder {
    font-size: 1.1rem;
    font-weight: 700;
    color: #8a8a8a;
}
.ragent-teamlist-member-body {
    flex: 1 1 auto;
    min-width: 0;
}
.ragent-teamlist-member-name {
    margin: 0;
    font-size: 0.9rem;
    font-family: 'Mattone-Bold';
    color: inherit;
}
.ragent-teamlist-member-role {
    margin: 0.2rem 0 0;
    font-size: 0.7rem;
    color: #666;
}
.ragent-teamlist-member-description {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #555;
}
.ragent-teamlist-member-contact {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}
.ragent-teamlist-member-links {
    margin: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.ragent-teamlist-member-link {
    font-size: 0.78rem;
    /* font-weight: 600; */
    text-decoration: none;
    /* color: #333; */
    overflow-wrap: anywhere;
}
.ragent-teamlist-member-link:hover {
    color: #666;
}