/**
 * com_radisnoiragent - CSS du rendu front "Références" pour un override d'article
 * (`site/layouts/reference/`), jamais partagée avec `team.css`/`publications.css` ni avec le CSS du
 * module (`mod_radisnoir_pro`, classes `ragent-referencemod-*`) - les deux peuvent cohabiter sur la
 * même page sans jamais s'influencer mutuellement.
 *
 * 7 thèmes au total (technique-howto.md sections 122 et 127), un bloc CSS par thème ci-dessous,
 * chacun avec son PROPRE préfixe de classe, jamais mélangés entre eux (même règle d'isolation que
 * pour Équipe(s)) : `.ragent-reference-*` (Logos seuls), `.ragent-referencenom-*` (Logos + nom),
 * `.ragent-referencecomplet-*` (Logos + nom + contacts), `.ragent-referencetable-*` (Tableau),
 * `.ragent-referencedesc-*` (Logos + nom + description + contacts), `.ragent-referencecloud-*`
 * (Nuage de mots), `.ragent-referenceslider-*` (Slider défilant).
 *
 * Nombre de colonnes de la grille réglé PAR CATÉGORIE via des variables CSS personnalisées
 * (--ragent-cols-sm/md/lg), posées en style inline sur `.ragent-reference-grid` par
 * logosseuls.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-reference {
    margin: 1.5rem 0;
}
.ragent-reference-general-title {
    margin: 0 0 1.5rem;
    font-size: 2.5rem;
    color: inherit;
    text-align: center;
}
.ragent-reference-category {
    margin: 0 0 2.5rem;
}
.ragent-reference-category:last-child {
    margin-bottom: 0;
}
.ragent-reference-category-title {
    margin: 0 0 2rem;
    font-size: 2rem;
    color: inherit;
    text-align: center;
}

/* === Thème "Logos seuls" (layouts/reference/logosseuls.php) - classes ragent-reference-*, jamais
   mélangées avec les thèmes à venir. Grille compacte de tuiles logo, avec deux variantes selon la
   sous-option "Cadre des logos" : --framed (carte blanche + ombre légère, comme la capture d'écran
   de référence fournie) et --plain (logo seul, aucun fond/bordure). === */
.ragent-reference-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(var(--ragent-cols-sm, 2), 1fr);
}
@media (min-width: 768px) {
    .ragent-reference-grid {
        grid-template-columns: repeat(var(--ragent-cols-md, 3), 1fr);
    }
}
@media (min-width: 992px) {
    .ragent-reference-grid {
        grid-template-columns: repeat(var(--ragent-cols-lg, 5), 1fr);
    }
}
.ragent-reference-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2 / 1.1;
    padding: 1.5rem;
    transition: transform 0.2s ease;
}
.ragent-reference-logo:hover {
    transform: translateY(-4px);
}
.ragent-reference-grid--framed .ragent-reference-logo {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
/* Variante "Avec bordure" (section 130) - contour seul, sans fond ni ombre. */
.ragent-reference-grid--bordered .ragent-reference-logo {
    border: 1px solid #ddd;
}
.ragent-reference-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* === Thème "Logos + nom d'entreprise" (layouts/reference/logosnom.php) - classes
   ragent-referencenom-*. STYLE REPRIS de ragent-referencecomplet-* (carte blanche, coins arrondis,
   ombre, léger mouvement au survol) - demande explicite après retour visuel (technique-howto.md
   section 129), seul le contenu diffère (logo + nom uniquement). === */
.ragent-referencenom {
    margin: 1.5rem 0;
}
.ragent-referencenom-general-title {
    margin: 0 0 1.5rem;
    font-size: 2.5rem;
    color: inherit;
    text-align: center;
}
.ragent-referencenom-category {
    margin: 0 0 2.5rem;
}
.ragent-referencenom-category:last-child {
    margin-bottom: 0;
}
.ragent-referencenom-category-title {
    margin: 0 0 2rem;
    font-size: 2rem;
    color: inherit;
    text-align: center;
}
.ragent-referencenom-grid {
    display: grid;
    row-gap: 2rem;
    column-gap: 1.5rem;
    grid-template-columns: repeat(var(--ragent-cols-sm, 1), 1fr);
}
@media (min-width: 768px) {
    .ragent-referencenom-grid {
        grid-template-columns: repeat(var(--ragent-cols-md, 2), 1fr);
    }
}
@media (min-width: 992px) {
    .ragent-referencenom-grid {
        grid-template-columns: repeat(var(--ragent-cols-lg, 3), 1fr);
    }
}
.ragent-referencenom-client {
    text-align: center;
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ragent-referencenom-client:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}
.ragent-referencenom-logo {
    aspect-ratio: 2 / 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.ragent-referencenom-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ragent-referencenom-logo-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 auto;
}
.ragent-referencenom-name {
    margin: 0;
    font-size: 0.95rem;
    color: inherit;
}

/* === Thème "Logos + nom + URL + LinkedIn + Facebook + icône" (layouts/reference/complet.php) -
   classes ragent-referencecomplet-*. Carte blanche par client, même langage visuel que les thèmes
   "Cartes" d'Équipe(s) (coins arrondis, ombre légère, léger mouvement au survol). === */
.ragent-referencecomplet {
    margin: 1.5rem 0;
}
.ragent-referencecomplet-general-title {
    margin: 0 0 1.5rem;
    font-size: 2.5rem;
    color: inherit;
    text-align: center;
}
.ragent-referencecomplet-category {
    margin: 0 0 2.5rem;
}
.ragent-referencecomplet-category:last-child {
    margin-bottom: 0;
}
.ragent-referencecomplet-category-title {
    margin: 0 0 2rem;
    font-size: 2rem;
    color: inherit;
    text-align: center;
}
.ragent-referencecomplet-grid {
    display: grid;
    row-gap: 2rem;
    column-gap: 1.5rem;
    grid-template-columns: repeat(var(--ragent-cols-sm, 1), 1fr);
}
@media (min-width: 768px) {
    .ragent-referencecomplet-grid {
        grid-template-columns: repeat(var(--ragent-cols-md, 2), 1fr);
    }
}
@media (min-width: 992px) {
    .ragent-referencecomplet-grid {
        grid-template-columns: repeat(var(--ragent-cols-lg, 3), 1fr);
    }
}
.ragent-referencecomplet-client {
    text-align: center;
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Débordement horizontal signalé en test réel (technique-howto.md section 130) - même cause déjà
       diagnostiquée pour Équipe(s)/Liste (section 118) : un item de grille CSS refuse par défaut de
       rétrécir sous la largeur "min-content" de son contenu. */
    min-width: 0;
}
.ragent-referencecomplet-client:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}
.ragent-referencecomplet-logo {
    aspect-ratio: 2 / 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.ragent-referencecomplet-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ragent-referencecomplet-logo-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    margin: 0 auto;
}
.ragent-referencecomplet-name {
    margin: 0;
    font-size: 1.05rem;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.ragent-referencecomplet-icon {
    width: 1.1em;
    height: 1.1em;
    object-fit: contain;
}
.ragent-referencecomplet-links {
    margin: 0.75rem 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}
.ragent-referencecomplet-link {
    font-size: 0.82rem;
    text-decoration: none;
    color: inherit;
}
.ragent-referencecomplet-link:hover {
    color: #666;
}
.ragent-referencecomplet-link i {
    margin-right: 0.3em;
}

/* === Thème "Tableau (logo/nom)" (layouts/reference/tableau.php) - classes ragent-referencetable-*.
   REFONDU (technique-howto.md section 129) : grille de cellules bordées façon tableur (capture
   d'écran de référence de l'utilisateur), logo + nom CÔTE À CÔTE dans une même cellule - responsive
   via --ragent-cols-lg/md/sm comme les autres thèmes. Bordures partagées : haut/gauche sur la grille,
   droite/bas sur chaque cellule - jamais de double trait entre deux cellules voisines. === */
.ragent-referencetable {
    margin: 1.5rem 0;
}
.ragent-referencetable-general-title {
    margin: 0 0 1.5rem;
    font-size: 2.5rem;
    color: inherit;
    text-align: center;
}
.ragent-referencetable-category {
    margin: 0 0 2.5rem;
}
.ragent-referencetable-category:last-child {
    margin-bottom: 0;
}
.ragent-referencetable-category-title {
    margin: 0 0 1.5rem;
    font-size: 2rem;
    color: inherit;
    text-align: center;
}
.ragent-referencetable-grid {
    display: grid;
    grid-template-columns: repeat(var(--ragent-cols-sm, 2), 1fr);
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}
@media (min-width: 768px) {
    .ragent-referencetable-grid {
        grid-template-columns: repeat(var(--ragent-cols-md, 3), 1fr);
    }
}
@media (min-width: 992px) {
    .ragent-referencetable-grid {
        grid-template-columns: repeat(var(--ragent-cols-lg, 4), 1fr);
    }
}
.ragent-referencetable-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 120px;
    padding: 1.25rem;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.2s ease;
}
.ragent-referencetable-cell:hover {
    background-color: #fafafa;
}
.ragent-referencetable-cell img {
    /* Repli par défaut (catégorie sans --ragent-cols-lg reconnu) - agrandi après retour "logos trop
       petits / quasi invisibles" (section 131) ; voir plus bas pour les tailles par nombre de
       colonnes, agrandies dans les mêmes proportions. */
    max-width: 140px;
    max-height: 56px;
    object-fit: contain;
}
.ragent-referencetable-cell-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: inherit;
    text-align: center;
}

/* Variante "Avec couleur" (sous-option referencetablebackground, section 130) - fond couleur
   primaire du site sur chaque cellule (bordures éclaircies pour rester visibles dessus), texte
   basculé en blanc - les logos gardent leurs propres couleurs, jamais inversés. */
.ragent-referencetable-grid--colored {
    border-color: rgba(255, 255, 255, 0.35);
}
.ragent-referencetable-grid--colored .ragent-referencetable-cell {
    background-color: var(--color-primary, #0d6efd);
    border-color: rgba(255, 255, 255, 0.25);
}
.ragent-referencetable-grid--colored .ragent-referencetable-cell:hover {
    background-color: var(--color-primary, #0d6efd);
    filter: brightness(1.08);
}
.ragent-referencetable-grid--colored .ragent-referencetable-cell-name {
    color: #fff;
}

/* Taille des logos réactive au nombre de colonnes (section 130, demande explicite) - même technique
   que technique-howto.md section 115 (sélecteur d'attribut sur le style inline --ragent-cols-lg,
   seul moyen CSS pur de conditionner sur une valeur de custom property). Plus de colonnes = logos
   plus petits, moins de colonnes = logos plus grands. */
.ragent-referencetable-grid[style*="--ragent-cols-lg:1;"] .ragent-referencetable-cell img,
.ragent-referencetable-grid[style*="--ragent-cols-lg:2;"] .ragent-referencetable-cell img {
    max-width: 190px;
    max-height: 80px;
}
.ragent-referencetable-grid[style*="--ragent-cols-lg:3;"] .ragent-referencetable-cell img,
.ragent-referencetable-grid[style*="--ragent-cols-lg:4;"] .ragent-referencetable-cell img {
    max-width: 150px;
    max-height: 64px;
}
.ragent-referencetable-grid[style*="--ragent-cols-lg:5;"] .ragent-referencetable-cell img,
.ragent-referencetable-grid[style*="--ragent-cols-lg:6;"] .ragent-referencetable-cell img {
    max-width: 110px;
    max-height: 46px;
}

/* === Thème "Logos + nom + description + URL + LinkedIn + Facebook + icône"
   (layouts/reference/completdescription.php) - classes ragent-referencedesc-*, structure identique à
   ragent-referencecomplet-* + un paragraphe description. === */
.ragent-referencedesc {
    margin: 1.5rem 0;
}
.ragent-referencedesc-general-title {
    margin: 0 0 1.5rem;
    font-size: 2.5rem;
    color: inherit;
    text-align: center;
}
.ragent-referencedesc-category {
    margin: 0 0 2.5rem;
}
.ragent-referencedesc-category:last-child {
    margin-bottom: 0;
}
.ragent-referencedesc-category-title {
    margin: 0 0 2rem;
    font-size: 2rem;
    color: inherit;
    text-align: center;
}
.ragent-referencedesc-grid {
    display: grid;
    row-gap: 2rem;
    column-gap: 1.5rem;
    grid-template-columns: repeat(var(--ragent-cols-sm, 1), 1fr);
}
@media (min-width: 768px) {
    .ragent-referencedesc-grid {
        grid-template-columns: repeat(var(--ragent-cols-md, 2), 1fr);
    }
}
@media (min-width: 992px) {
    .ragent-referencedesc-grid {
        grid-template-columns: repeat(var(--ragent-cols-lg, 3), 1fr);
    }
}
.ragent-referencedesc-client {
    text-align: center;
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 0;
}
.ragent-referencedesc-client:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}
.ragent-referencedesc-logo {
    aspect-ratio: 2 / 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.ragent-referencedesc-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ragent-referencedesc-logo-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    margin: 0 auto;
}
.ragent-referencedesc-name {
    margin: 0;
    font-size: 1.05rem;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.ragent-referencedesc-icon {
    width: 1.1em;
    height: 1.1em;
    object-fit: contain;
}
.ragent-referencedesc-description {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #555;
    text-align: left;
}
.ragent-referencedesc-links {
    margin: 0.75rem 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
}
/* Icônes SEULES, jamais de libellé (section 130) - taille remontée en conséquence (un simple pictogramme
   a besoin d'être plus grand qu'une icône accolée à du texte pour rester lisible/cliquable). */
.ragent-referencedesc-link {
    font-size: 1.15rem;
    /* !important nécessaire ici - conflit de spécificité déjà rencontré sur ce projet avec les styles
       globaux de liens du gabarit du site (Équipe(s), technique-howto.md), pas une négligence. */
    text-decoration: none !important;
    color: inherit;
}
.ragent-referencedesc-link:hover {
    color: #666;
}

/* === Thème "Nuage de mots (noms uniquement)" (layouts/reference/nuagemots.php) - classes
   ragent-referencecloud-*. Tailles DÉTERMINISTES (crc32 du nom, PHP), jamais aléatoires - stables
   d'un chargement de page à l'autre. === */
.ragent-referencecloud {
    margin: 1.5rem 0;
}
.ragent-referencecloud-general-title {
    margin: 0 0 1.5rem;
    font-size: 2.5rem;
    color: inherit;
    text-align: center;
}
.ragent-referencecloud-category {
    margin: 0 0 2.5rem;
}
.ragent-referencecloud-category:last-child {
    margin-bottom: 0;
}
.ragent-referencecloud-category-title {
    margin: 0 0 1.5rem;
    font-size: 2rem;
    color: inherit;
    text-align: center;
}
.ragent-referencecloud-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    /* Écart agrandi (section 131, demande explicite "met un peu plus d'espace entre les noms"). */
    gap: 1.1rem 2.2rem;
    text-align: center;
}
.ragent-referencecloud-word {
    display: inline-block;
    color: inherit;
    line-height: 1.3;
    transition: transform 0.2s ease;
}
.ragent-referencecloud-word:hover {
    transform: translateY(-3px) scale(1.06);
}
/* Écart de taille ENCORE élargi, 8 paliers au lieu de 5 (retour "ce n'est pas encore ça" après un
   premier élargissement, technique-howto.md section 130) - ratio du plus petit au plus grand porté
   à ~6,9x (contre ~4,3x en section 129, ~2,4x à l'origine) pour un effet "nuage" nettement plus
   marqué et moins répétitif (8 paliers répartissent mieux un grand nombre de noms que 5). */
.ragent-referencecloud-size-1 {
    font-size: 0.65rem;
    opacity: 0.55;
}
.ragent-referencecloud-size-2 {
    font-size: 0.95rem;
    opacity: 0.62;
}
.ragent-referencecloud-size-3 {
    font-size: 1.35rem;
    opacity: 0.72;
}
.ragent-referencecloud-size-4 {
    font-size: 1.85rem;
    opacity: 0.82;
    font-weight: 600;
}
.ragent-referencecloud-size-5 {
    font-size: 2.4rem;
    opacity: 0.9;
    font-weight: 600;
}
.ragent-referencecloud-size-6 {
    font-size: 3.1rem;
    opacity: 0.95;
    font-weight: 700;
}
.ragent-referencecloud-size-7 {
    font-size: 3.9rem;
    opacity: 1;
    font-weight: 700;
    color: var(--color-primary);
}
.ragent-referencecloud-size-8 {
    font-size: 4.5rem;
    opacity: 1;
    font-weight: 700;
    color: var(--color-primary);
}

/* === Thème "Slider défilant" (layouts/reference/slider.php) - classes ragent-referenceslider-*.
   Bandeau défilant en CSS PUR (aucune bibliothèque JS) - piste dupliquée une fois pour une boucle
   sans coupure visible, pause au survol, désactivé si l'utilisateur a demandé moins d'animations.
   Réglages ajoutés (technique-howto.md section 129) : nombre de logos visibles (--ragent-slider-visible,
   posé en style inline par slider.php), vitesse (animation-duration, également en style inline -
   la valeur 30s ci-dessous n'est qu'un repli si jamais l'inline manquait), et variante "avec fond". === */
.ragent-referenceslider {
    margin: 1.5rem 0;
}
.ragent-referenceslider-general-title {
    margin: 0 0 1.5rem;
    font-size: 2.5rem;
    color: inherit;
    text-align: center;
}
.ragent-referenceslider-category {
    margin: 0 0 2.5rem;
}
.ragent-referenceslider-category:last-child {
    margin-bottom: 0;
}
.ragent-referenceslider-category-title {
    margin: 0 0 1.5rem;
    font-size: 2rem;
    color: inherit;
    text-align: center;
}
.ragent-referenceslider-viewport {
    overflow: hidden;
}
.ragent-referenceslider-track {
    display: flex;
    align-items: center;
    gap: 3rem;
    width: max-content;
    animation-name: ragent-referenceslider-scroll;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.ragent-referenceslider-viewport:hover .ragent-referenceslider-track {
    animation-play-state: paused;
}
@keyframes ragent-referenceslider-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
.ragent-referenceslider-item {
    /* Nom TOUJOURS sous le logo (jamais à côté), corrigé en section 130. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Largeur approximative pour que --ragent-slider-visible éléments tiennent dans la fenêtre -
       basée sur 90vw plutôt que 100% du conteneur (impossible en CSS pur : la piste a une largeur
       "max-content", intrinsèquement dépendante du contenu des éléments - une taille en % d'un
       parent lui-même auto-dimensionné serait circulaire). Approximation raisonnable pour un bandeau
       pleine largeur, à ajuster ici si le gabarit du site a une colonne de contenu nettement plus
       étroite que le viewport. */
    flex: 0 0 calc(90vw / var(--ragent-slider-visible, 5));
}
/* Vignette de logo - sensible à la sous-option "Cadre des logos" (étendue du thème "Logos seuls" au
   Slider, section 130), mêmes 3 variantes/mêmes noms de suffixe que ragent-reference-grid--*
   (framed/bordered/plain). La couleur "avec fond" est posée ICI, sur la vignette SEULE - jamais sur
   tout le bandeau (corrigé après retour explicite "il faut le background uniquement sur les logos").
   Le nom est rendu DANS cette même vignette (pas à côté) quand un logo est affiché - section 131,
   retour explicite "le nom se positionne en dessous à l'intérieur de la box avec le background" -
   d'où `flex-direction: column` ici plutôt que sur `.ragent-referenceslider-item`. */
.ragent-referenceslider-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.25rem;
}
.ragent-referenceslider-logo--framed {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
.ragent-referenceslider-logo--bordered {
    border: 1px solid #ddd;
    border-radius: 8px;
}
.ragent-referenceslider-logo--colored {
    background: var(--color-primary, #0d6efd);
    border-radius: 8px;
    box-shadow: none;
    border: none;
}
.ragent-referenceslider-logo--colored .ragent-referenceslider-name {
    color: #fff;
}
.ragent-referenceslider-logo img {
    max-height: 40px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}
.ragent-referenceslider-name {
    font-size: 1rem;
    color: inherit;
    white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    .ragent-referenceslider-track {
        animation: none;
    }
}