@charset "UTF-8";

/*
 * « Sept structures, un territoire » — tuiles acteurs de la page d'accueil.
 *
 * Module 119 : `mod_articles` du cœur, sans surcharge. Crochets posés dans les
 * réglages : moduleclass_sfx → .sema-acteurs, header_class → .sema-acteurs__titre.
 * Le reste des classes (.mod-articles-*) vient du layout par défaut de Joomla.
 */

/* Fond kraft pleine largeur. Il reprend celui que portait la section « carte du
   territoire », écartée depuis : sans lui, deux sections crème se suivraient et
   l'alternance de la maquette (olive, crème, kraft, forêt) s'effondrerait. */
.site-grid > .container-top-b {
  grid-column: full-start / full-end;
  max-width: none;
  padding: 0;
}

/* ---------------------------------------------- Page de liste (/acteurs)
 * Grille des tuiles reprise telle quelle : voir plus bas .sema-acteurs--liste.
 * Seul le titre de page a besoin d'un habillage — Cassiopeia l'affiche sans
 * classe de crochet dédiée sur com_content/category.
 */
.com-content-category-blog > .page-header {
  margin-block-end: 0;
}

.com-content-category-blog > .page-header h1 {
  margin: 0;
  color: var(--rem-encre);
  font-family: var(--rem-police-display);
  font-size: clamp(1.75rem, 1.1rem + 2.5vw, 2.5rem);
  font-weight: 800;
  text-transform: uppercase;
}

/* Le fond kraft de la grille touche alors directement le titre au-dessus :
   la section reprend l'espacement de la bande, pas une marge propre au titre. */
.sema-acteurs--liste {
  margin-block-start: clamp(1.5rem, 3vw, 2rem);
}

/* Fond kraft bord à bord de l'écran, contenu dans la colonne de 1320 px :
   sans ça, la bande reste confinée dans `.container-component` et se lit comme
   une boîte dans une boîte. Même recette que la fiche acteur (fiche-acteur.css) :
   Cassiopeia écrit `body:not(.has-sidebar-*) .site-grid .container-component
   { grid-column-start/end: main-* }`, spécificité (0,4,1) qu'un simple
   `grid-column` ne bat pas — il faut reprendre les mêmes sélecteurs. `<main>`
   porte en plus sa propre largeur maximale, à lever aussi. */
body:not(.has-sidebar-left) .site-grid .container-component:has(.sema-acteurs--liste) {
  grid-column-start: full-start;
}

body:not(.has-sidebar-right) .site-grid .container-component:has(.sema-acteurs--liste) {
  grid-column-end: full-end;
}

.container-component:has(.sema-acteurs--liste) {
  max-width: none;
  margin: 0;
  padding: 0;
}

.container-component:has(.sema-acteurs--liste) main {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Tout perd la marge du conteneur en même temps que lui : fil d'Ariane, titre
   de page, pagination… se la redonnent chacun en padding. Seule la bande kraft
   y échappe (`:not`) : `.sema-acteurs` pose déjà son propre `padding-inline`,
   et c'est justement ce qui doit courir bord à bord. La description (ci-dessous)
   est exclue elle aussi : elle prend sa marge autrement, en marge et non en
   padding — voir le commentaire à ce sujet. */
.container-component:has(.sema-acteurs--liste) .mod-breadcrumbs__wrapper {
  padding-inline: var(--rem-marge-page);
}

.com-content-category-blog > :not(.sema-acteurs--liste, .category-desc) {
  padding-inline: var(--rem-marge-page);
}

/*
 * Description de catégorie — même mesure de lecture que le corps d'article.
 *
 * PIÈGE rencontré : `padding-inline` (marge de page) et `max-inline-size` (mesure
 * de lecture) ne peuvent pas se poser sur la même boîte en `border-box`. Le
 * padding se soustrait de la largeur totale avant que `max-inline-size` ne la
 * plafonne : à 1920 px, `--rem-marge-page` calcule ~300px de chaque côté, ce qui
 * ne laisse que 672px − 600px = 72px de contenu réel — un mot par ligne. Le bug
 * ne se voit pas en dessous de ~1600px, où le padding reste plus petit que la
 * marge perdue par le plafonnement, d'où un premier test à 1400px qui semblait
 * concluant. Correction : la marge de page se pose en `margin-inline` (hors de
 * la boîte, jamais soustraite) plutôt qu'en `padding-inline`.
 */
.com-content-category-blog > .category-desc {
  max-inline-size: var(--sema-mesure, 42rem);
  margin-inline: var(--rem-marge-page) auto;
  margin-block: 0 clamp(1.5rem, 3vw, 2rem);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* Grille de section : le titre et le lien « tous les acteurs » partagent la
   première ligne, la liste occupe la seconde. Placer explicitement dispense de
   dépendre de l'ordre du DOM — le lien est imprimé en dernier par le layout. */
.sema-acteurs {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-inline: var(--rem-marge-page);
  background-color: var(--rem-kraft);
}

.sema-acteurs__titre {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  color: var(--rem-encre);
  font-family: var(--rem-police-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Joomla pose déjà .grid-cols-3 ; on en fait une vraie grille et on laisse
   la gouttière au débord de l'ombre portée. */
.sema-acteurs__tout {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--rem-police-mono);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sema-acteurs__tout a {
  color: var(--rem-terre);
  text-decoration: none;
}

.sema-acteurs__tout a:hover,
.sema-acteurs__tout a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: var(--rem-trait-fin);
  text-underline-offset: 0.3em;
}

.sema-acteurs .mod-articles-items {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (width >= 40rem) {
  .sema-acteurs .mod-articles-items.grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 62rem) {
  .sema-acteurs .mod-articles-items.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sema-acteurs .mod-articles-item {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  background-color: var(--rem-creme);
  border: var(--rem-trait) solid var(--rem-encre);
  box-shadow: 0.5rem 0.5rem 0 var(--carte-ombre, var(--rem-encre));
}

/* L'ombre portée change de teinte d'une tuile à l'autre, comme dans la maquette.
   Le rang suffit : rien à saisir sur l'article. */
.sema-acteurs .mod-articles-items > li:nth-child(3n + 1) .mod-articles-item {
  --carte-ombre: var(--rem-foret);
}

.sema-acteurs .mod-articles-items > li:nth-child(3n + 2) .mod-articles-item {
  --carte-ombre: var(--rem-terre);
}

.sema-acteurs .mod-articles-items > li:nth-child(3n + 3) .mod-articles-item {
  --carte-ombre: var(--rem-moutarde);
}

.sema-acteurs .mod-articles-item-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 1.4rem 1.5rem;
}

/* Attention : `.mod-articles-image` est la <figure>, pas l'<img>. La bande se
   pose sur la figure, l'ajustement sur l'image qu'elle contient. */
/* Bandeau crème et non kraft : les logos sont majoritairement clairs, et la
   tuile entière ressort mieux d'un seul tenant sur le fond kraft de la section. */
.sema-acteurs .mod-articles-image {
  margin: 0;
  padding: 1rem;
  background-color: var(--rem-creme);
  border-block-end: var(--rem-trait) solid var(--rem-encre);
}

/* Les visuels fournis sont des logos, pas des photos : `contain` pour qu'aucun
   ne soit recadré ni déformé, quelles que soient ses proportions. */
.sema-acteurs .mod-articles-image img {
  display: block;
  inline-size: 100%;
  block-size: 7rem;
  object-fit: contain;
}

/* Acteur sans logo : la réserve garde l'alignement de la grille. */
.sema-acteurs .sema-acteurs__visuel-vide {
  block-size: calc(7rem + 2rem);
}

/* Commune d'implantation — champ personnalisé, rendu par le layout alternatif. */
.sema-acteurs .sema-acteurs__commune {
  margin: 0 0 0.5rem;
  color: var(--rem-terre);
  font-family: var(--rem-police-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sema-acteurs .mod-articles-title {
  margin: 0 0 0.75rem;
  font-family: var(--rem-police-display);
  /* Mesuré sur la maquette : ~24 px à 1440. */
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Services rendus — champ personnalisé de type liste. */
.sema-acteurs .sema-acteurs__services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  /* Colle les étiquettes au bas de la tuile, quelle que soit la longueur du chapô.
     L'écart passe par le padding : sur la tuile la plus haute, `margin-block-start:
     auto` vaut 0 et une marge serait avalée. */
  margin: 0;
  padding: 1rem 0 0;
  list-style: none;
}

.sema-acteurs .sema-acteurs__services li {
  padding: 0.3rem 0.6rem;
  color: var(--rem-encre);
  background-color: var(--rem-kraft);
  font-family: var(--rem-police-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sema-acteurs .mod-articles-link {
  color: var(--rem-encre);
  text-decoration: none;
}

.sema-acteurs .mod-articles-link:hover,
.sema-acteurs .mod-articles-link:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--rem-terre);
  text-decoration-thickness: var(--rem-trait);
  text-underline-offset: 0.25em;
}

.sema-acteurs .mod-articles-item-content p:not(.sema-acteurs__commune) {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Pousse les étiquettes en pied de tuile : le chapô occupe l'espace restant. */
.sema-acteurs .mod-articles-item-content > :last-child {
  margin-block-start: auto;
}