@charset "UTF-8";

/*
 * Gabarit de page article — cf. webdesign/Site Réemploi en Mellois-generique.png.
 * Sert pour les actualités, les pages du réseau et les pages légales.
 *
 * La grille à deux colonnes n'est pas écrite ici : Cassiopeia la produit déjà dès qu'un
 * module est publié en position `sidebar-right` (aire `side-r`, un quart de la largeur
 * au-dessus de 992 px, empilée sous l'article en dessous).
 */

.com-content-article.item-page {
  /* Mesure de lecture. Sans elle, le texte court sur les ~960 px de la colonne
     principale, bien au-delà de ce qui se lit confortablement. */
  --sema-mesure: 42rem;

  display: flex;
  flex-direction: column;
  /* Respiration avant le pied de page. `.footer` n'a plus de margin-top (voir
     pied.css) : sans cet espace ici, le dernier élément de la page — souvent
     la navigation précédent/suivant — colle directement au fond forêt du pied
     dès que cette page (générique : légale, fédération, nous-rejoindre...) en
     est le dernier bloc. Sans effet sur la fiche acteur, qui n'utilise pas
     cette classe et se termine toujours par une section « Autres acteurs »
     ayant déjà sa propre marge. */
  padding-block-end: clamp(2.5rem, 5vw, 3.5rem);
}

/*
 * Le cœur sort les blocs dans cet ordre : titre, métadonnées, visuel, corps. La maquette
 * veut les métadonnées au-dessus du titre — on réordonne en CSS plutôt qu'en surchargeant
 * `com_content/article/default.php`, qui serait une copie du cœur à re-maintenir.
 * Tout le reste (tags, navigation d'article, liens) tombe en fin de flux.
 */
.com-content-article.item-page > * {
  order: 5;
  max-inline-size: var(--sema-mesure);
}

.com-content-article.item-page > .sema-article__meta {
  order: 1;
}

/* Le titre prend la largeur du visuel, pas celle du texte : à la mesure de lecture il
   se replie en cinq ou six lignes. */
.com-content-article.item-page > .page-header {
  order: 2;
  max-inline-size: min(100%, 48rem);
}

.com-content-article.item-page > .item-image {
  order: 3;
  /* Le visuel déborde un peu la mesure du texte, comme dans la maquette. */
  max-inline-size: min(100%, 48rem);
}

.com-content-article.item-page > .com-content-article__body {
  order: 4;
}

/* ------------------------------------------------------ Ligne de métadonnées */

.sema-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.5rem;
  margin-block: 0 1rem;
  color: var(--rem-encre);
  font-family: var(--rem-police-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

/*
 * Étiquette de catégorie. La maquette la montre en terre cuite ; sur ce fond la crème
 * plafonne à ~3,6:1, insuffisant pour un texte de cette taille. Fond forêt (>10:1) :
 * l'écart de teinte est assumé, la terre cuite reste l'accent des filets et des survols.
 */
.sema-article__categorie {
  padding: 0.3rem 0.65rem;
  color: var(--rem-creme);
  font-weight: 700;
  text-decoration: none;
  background-color: var(--rem-foret);
}

a.sema-article__categorie:hover,
a.sema-article__categorie:focus-visible {
  color: var(--rem-creme);
  text-decoration: underline;
}

/* Pas de puce de séparation entre la date et la durée, contrairement à la maquette :
   dès que la ligne se replie — et elle se replie sur téléphone — la puce se retrouve
   seule en début de ligne. L'écart de gouttière sépare aussi bien, à toutes largeurs. */
.sema-article__date time,
.sema-article__lecture {
  white-space: nowrap;
}

/* --------------------------------------------------------------------- Titre */

.com-content-article.item-page > .page-header {
  margin-block: 0;
  padding-block-end: 0;
  border: 0 none;
}

.com-content-article.item-page > .page-header > h1,
.com-content-article.item-page > .page-header > h2 {
  margin-block: 0 1.5rem;
  font-family: var(--rem-police-display);
  font-size: clamp(2.1rem, 1.1rem + 3.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}

/* --------------------------------------------------------------- Visuel de tête */

/* Tirage posé sur la page : marge blanche, ombre douce et rotation d'un demi-degré.
   Seule ombre floue du site — l'identité repose ailleurs sur des ombres dures — mais
   c'est elle qui décolle la photo du crème, où le liseré crème ne se voit pas.
   Valeurs reprises de Claude Design. */
.com-content-article.item-page > figure.item-image {
  margin-block: 0 2.5rem;
  padding: 0;
  background-color: var(--rem-creme);
  border: 6px solid var(--rem-creme);
  box-shadow: 0 12px 28px oklch(25.47% 0.007 106.9 / 0.24);
  rotate: -0.5deg;
}

.com-content-article.item-page > figure.item-image img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* La légende tient dans la marge du tirage, sans filet : le liseré crème l'encadre déjà. */
.com-content-article.item-page > figure.item-image .caption {
  padding: 0.55rem 0.2rem 0.1rem;
  font-family: var(--rem-police-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ Corps de l'article */

/* 17 px pour tout le corps, y compris le premier paragraphe : pas de chapô distingué
   typographiquement. Le distinguer supposerait que le rédacteur pense à écrire une
   accroche à part — une contrainte de saisie de plus, pour un gain de mise en page. */
.com-content-article__body {
  font-size: 1.0625rem;
  line-height: 1.65;
}

.com-content-article__body h2,
.com-content-article__body h3,
.com-content-article__body h4 {
  font-family: var(--rem-police-display);
  font-weight: 800;
  line-height: 1.12;
  text-wrap: balance;
}

.com-content-article__body h2 {
  margin-block: 2.5rem 1.1rem;
  padding-block-end: 0.45rem;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.6rem);
  text-transform: uppercase;
  border-block-end: var(--rem-trait) solid var(--rem-encre);
  /* Le titre visé par le sommaire ne doit pas se glisser sous l'en-tête collant. */
  scroll-margin-block-start: 7rem;
}

.com-content-article__body h3 {
  margin-block: 2rem 0.75rem;
  font-size: 1.1875rem;
}

.com-content-article__body a {
  color: var(--rem-foret);
  text-underline-offset: 0.2em;
}

.com-content-article__body a:hover,
.com-content-article__body a:focus-visible {
  color: var(--rem-terre);
}

.com-content-article__body ul,
.com-content-article__body ol {
  padding-inline-start: 1.35rem;
}

.com-content-article__body li + li {
  margin-block-start: 0.35rem;
}

/* -------------------------------------------- Navigation d'article précédent/suivant */

/*
 * Absente de la maquette, mais Joomla la rend dès que l'entrée de menu l'active. Laissée
 * telle quelle, elle sort deux boutons Bootstrap gris, hors charte. On la ramène au
 * vocabulaire du site plutôt que de la masquer : c'est un vrai chemin de lecture entre
 * les actualités.
 */
.com-content-article.item-page > .pagenavigation {
  margin-block-start: 3rem;
  padding-block-start: 1.25rem;
  border-block-start: var(--rem-trait) solid var(--rem-encre);
}

.pagenavigation .pagination {
  display: flex;
  gap: 1rem;
  margin: 0;
}

/* Quand seul « Suivant » existe — premier article de la liste — il se range à droite,
   à la place qu'il occuperait si « Précédent » était là. */
.pagenavigation .pagination .next {
  margin-inline-start: auto;
}

/* Bootstrap pilote ses boutons par des variables : les redéfinir suffit, et laisse
   intacts les états que le cœur gère déjà (focus, disabled). */
.pagenavigation .btn {
  --bs-btn-color: var(--rem-encre);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--rem-encre);
  --bs-btn-hover-color: var(--rem-encre);
  --bs-btn-hover-bg: var(--rem-moutarde);
  --bs-btn-hover-border-color: var(--rem-encre);
  --bs-btn-active-color: var(--rem-encre);
  --bs-btn-active-bg: var(--rem-moutarde);
  --bs-btn-active-border-color: var(--rem-encre);
  --bs-btn-border-radius: 0;
  --bs-btn-border-width: var(--rem-trait-fin);
  --bs-btn-font-family: var(--rem-police-mono);
  --bs-btn-font-size: 0.8125rem;
  --bs-btn-font-weight: 700;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.6rem;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------- Colonne latérale */

/*
 * Les modules de la colonne sont rendus par le chrome `cassiopeia-noCard` : l'enveloppe
 * et le titre viennent des réglages du module, pas d'une surcharge.
 */
.sema-aside {
  padding: 1.1rem 1.25rem 1.3rem;
  background-color: var(--rem-creme);
  border: var(--rem-trait) solid var(--rem-encre);
}

.sema-aside__titre {
  margin-block: 0 0.85rem;
  font-family: var(--rem-police-display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ Sommaire */

/*
 * Masqué par défaut : le sommaire est entièrement construit en JavaScript à partir des
 * H2 du corps de l'article. Sans JS, ou sur une page qui n'a pas au moins deux H2, il
 * n'y a rien à montrer — et surtout pas un titre « Sur cette page » suivi du vide.
 */
.sema-sommaire {
  display: none;
}

/*
 * Et il ne réapparaît qu'en deux colonnes. En dessous de 992 px, Cassiopeia empile la
 * colonne latérale SOUS l'article : un sommaire arrivé après le texte qu'il annonce
 * n'aide personne. Le raccourci disparaît, la lecture reste entière.
 */
@media (width >= 992px) {
  .sema-sommaire--pret {
    display: block;
    /* Le sommaire suit la lecture ; le décalage laisse passer l'en-tête collant. */
    position: sticky;
    inset-block-start: 7rem;
  }
}

.sema-sommaire__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--rem-police-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sema-sommaire__liste li + li {
  margin-block-start: 0.15rem;
  border-block-start: var(--rem-trait-fin) dotted var(--rem-kraft);
}

.sema-sommaire__liste a {
  display: block;
  padding: 0.5rem 0 0.5rem 0.75rem;
  color: var(--rem-encre);
  line-height: 1.35;
  text-decoration: none;
  /* Le filet d'état est toujours là, transparent tant que la section n'est pas visée :
     l'élément ne bouge donc pas d'un pixel quand il devient courant. */
  border-inline-start: 0.25rem solid transparent;
}

.sema-sommaire__liste a:hover,
.sema-sommaire__liste a:focus-visible {
  text-decoration: underline;
  border-inline-start-color: var(--rem-kraft);
}

.sema-sommaire__liste a[aria-current="location"] {
  font-weight: 700;
  border-inline-start-color: var(--rem-terre);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* -------------------------------------------------- Encadré « Trouver un atelier » */

.sema-encadre-carte {
  padding: 1.25rem;
  color: var(--rem-creme);
  background-color: var(--rem-foret);
  border: var(--rem-trait) solid var(--rem-encre);
}

.sema-encadre-carte .sema-aside__titre {
  color: var(--rem-creme);
  margin-block-end: 1rem;
}

.sema-encadre-carte p {
  margin-block: 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.sema-encadre-carte .sema-bouton {
  display: block;
  padding-inline: 1rem;
}