@charset "UTF-8";

/*
 * Fiche acteur — habillage du layout d'article `fiche-acteur.php`.
 * Référence : webdesign/Site Réemploi en Mellois-structure.png
 *
 * La feuille n'habille que ce que le gabarit produit : aucune règle ne dépend
 * d'une classe saisie dans l'administration.
 */

/* --------------------------------------------------- Sortie de la colonne de texte */

/* Cassiopeia contraint tout .grid-child à 1320 px. La fiche compose ses propres
   bandes pleine largeur, chacune se redonnant la marge de page. Le crochet est
   la présence du gabarit, pas un suffixe de page : les fiches ne sont pas
   atteintes par une entrée de menu dédiée, il n'y aurait rien où le saisir. */
/* Les fonds vont d'un bord à l'autre de l'écran, le contenu reste dans la
   colonne de 1320 px : chaque bande se redonne la marge de page en padding.
   Trois contraintes à lever, et non une seule — après le conteneur de grille,
   `<main>` porte lui aussi une largeur maximale, qui ramenait la bande à 1320. */
.site-grid > .container-component:has(.sema-fiche) {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Le placement en colonne demande de reprendre les sélecteurs du cœur tels
   quels. Cassiopeia écrit `body:not(.has-sidebar-left) .site-grid
   .container-component { grid-column-start: main-start }` — spécificité (0,4,1),
   qu'un simple `.site-grid > .container-component:has(…)` ne bat pas. Le bandeau
   d'accueil ne rencontrait pas l'obstacle : il est en position `banner`, dont le
   conteneur ne porte aucune de ces deux règles. */
body:not(.has-sidebar-left) .site-grid .container-component:has(.sema-fiche) {
  grid-column-start: full-start;
}

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

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

.sema-fiche {
  --sema-fiche-colonne: 24rem;
  color: var(--rem-encre);
}

/* ------------------------------------------------------------------- Bandeau */

.sema-fiche__bandeau {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem) var(--rem-marge-page) clamp(3.5rem, 6vw, 5rem);
  color: var(--rem-creme);
  /* Olive et non forêt, comme le bandeau d'accroche de l'accueil : le forêt
     alourdit une bande de cette hauteur. Le crème y tient ~4,8:1, donc au-dessus
     du seuil du texte courant — mais sans marge : ne pas y descendre la taille
     du texte, et n'y poser aucune autre couleur de la palette. */
  background-color: var(--rem-olive);
  /* Bord bas : la dentelure se peint dans la couleur de la section suivante. */
  --rem-dechirure-couleur: var(--rem-creme);
}

@media (width >= 62rem) {
  .sema-fiche__bandeau {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  }
}

.sema-fiche__etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.sema-fiche__etiquette {
  padding: 0.35rem 0.75rem;
  font-family: var(--rem-police-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: var(--rem-trait-fin) solid currentColor;
}

/* Le statut est la seule information de rang : elle seule prend l'aplat. */
.sema-fiche__etiquette--statut {
  color: var(--rem-encre);
  background-color: var(--rem-moutarde);
  border-color: var(--rem-moutarde);
}

.sema-fiche__titre {
  margin: 0 0 1rem;
  color: inherit;
  font-family: var(--rem-police-display);
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.sema-fiche__accroche,
.sema-fiche__lieu {
  max-inline-size: 34rem;
  font-family: var(--rem-police-mono);
  font-size: 1rem;
  line-height: 1.6;
}

.sema-fiche__accroche p {
  margin: 0 0 0.75rem;
}

.sema-fiche__lieu {
  margin: 0 0 1.75rem;
}

.sema-fiche__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
}

/* ------------------------------------------------------------------- Visuels */

.sema-fiche__visuels {
  position: relative;
  justify-self: center;
  inline-size: min(100%, 24rem);
}

/* Tirages posés sur la page : liseré crème, ombre dure, léger désaxement.
   Ce sont les seules images de la fiche à porter ce traitement. */
.sema-fiche__photo,
.sema-fiche__logo {
  display: block;
  background-color: var(--rem-creme);
  border: 0.5rem solid var(--rem-creme);
  box-shadow: 0.6rem 0.6rem 0 oklch(from var(--rem-encre) l c h / 55%);
}

/* Hauteur bornée : sans elle, une photo en portrait déposée par un rédacteur
   étirerait le bandeau sur plus d'un écran. `cover` recadre plutôt que déformer —
   c'est le seul visuel du site à être recadré, mais il est décoratif, l'information
   est dans le texte à côté. */
.sema-fiche__photo {
  inline-size: 100%;
  block-size: auto;
  max-block-size: min(24rem, 55svh);
  object-fit: cover;
  rotate: 2deg;
}

/* Le logo se pose en médaillon sur l'angle inférieur gauche de la photo. */
.sema-fiche__logo {
  position: absolute;
  inset-block-end: -2rem;
  inset-inline-start: -1rem;
  inline-size: 17.5rem;
  block-size: auto;
  rotate: -5deg;
}

/* Sans photo d'ambiance (ex. FAKE - Semaphore), `.sema-fiche__visuels` ne
   contient plus que le logo — en position absolue, il ne contribue à aucune
   hauteur : la boîte s'effondre à hauteur nulle, et le médaillon, ancré par
   son bord bas (`inset-block-end` négatif), remonte d'autant au-dessus de
   cette boîte quasi ponctuelle. Sans effet en deux colonnes (la boîte y prend
   la hauteur de la colonne de texte, largement assez haute) ni en dessous de
   48rem (le logo y repasse en position statique, cf. plus bas) : seulement
   entre les deux, où le bandeau est déjà en une colonne mais pas encore traité
   en statique. On pousse alors le médaillon à droite plutôt que de le laisser
   chevaucher le texte, quitte à le réduire. */
@media (width >= 48rem) and (width < 62rem) {
  .sema-fiche__visuels:not(:has(.sema-fiche__photo)) {
    justify-self: end;
  }

  .sema-fiche__visuels:not(:has(.sema-fiche__photo)) .sema-fiche__logo {
    inset-inline-start: auto;
    inset-inline-end: -1rem;
    inline-size: 10rem;
  }
}

/* Sur téléphone, la photo d'ambiance n'apporte rien qu'un bandeau à faire
   défiler : seul le logo reste, qui identifie la structure d'un coup d'œil.
   La photo est masquée mais tout de même téléchargée — elle est en chargement
   immédiat pour le LCP des grands écrans. À revoir en `<picture>` si le poids
   des fiches devient un sujet. */
@media (width < 48rem) {
  .sema-fiche__photo {
    display: none;
  }

  /* Le logo passe en tête, comme sur la maquette mobile, où il coiffe les
     étiquettes plutôt que de suivre les appels à l'action. */
  .sema-fiche__visuels {
    order: -1;
    justify-self: start;
    inline-size: auto;
  }

  .sema-fiche__logo {
    position: static;
    inline-size: 8.5rem;
    rotate: -2deg;
  }
}

/* ------------------------------------------------------- Bande « Répond aux besoins » */

.sema-fiche__besoins {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) var(--rem-marge-page);
  background-color: var(--rem-creme);
}

.sema-fiche__besoins-intro {
  margin: 0;
  color: var(--rem-terre);
  font-family: var(--rem-police-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sema-fiche__besoins-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sema-fiche__besoins-liste li {
  padding: 0.6rem 1rem;
  font-family: var(--rem-police-display);
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  background-color: var(--rem-kraft);
  border: var(--rem-trait-fin) solid var(--rem-encre);
  box-shadow: 0.25rem 0.25rem 0 var(--rem-encre);
}

/* ------------------------------------------------------------------- Grille */

.sema-fiche__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding: clamp(1rem, 2vw, 1.5rem) var(--rem-marge-page) clamp(3rem, 6vw, 4.5rem);
  background-color: var(--rem-creme);
}

@media (width >= 62rem) {
  .sema-fiche__grille {
    grid-template-columns: minmax(0, 1fr) var(--sema-fiche-colonne);
    align-items: start;
  }
}

.sema-fiche__corps > * + * {
  margin-block-start: clamp(2rem, 4vw, 3rem);
}

.sema-fiche__section > h2,
.sema-fiche__encadre > h2,
.sema-fiche__pratique > h2,
.sema-fiche__prochain-rdv > h2 {
  margin: 0 0 1rem;
  font-family: var(--rem-police-display);
  font-weight: 800;
  text-transform: uppercase;
}

.sema-fiche__section > h2 {
  padding-block-end: 0.5rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  border-block-end: var(--rem-trait) solid var(--rem-encre);
}

.sema-fiche__section p {
  max-inline-size: var(--sema-mesure, 42rem);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------- Galerie photos */

/* Référence : webdesign/Site Réemploi en Mellois-galerie-photo.png — repris pour
   le style (tirages inclinés, filet coloré par rang, en-tête à étiquette), pas
   pour les dimensions ni la mise en page en collage de la maquette. */

.sema-fiche__galerie-entete {
  display: grid;
  grid-template-columns: 1fr;
  padding-block-end: 0.5rem;
  margin-block-end: 1.75rem;
}

.sema-fiche__galerie-titre {
  grid-column: 1;
  grid-row: 1;
  padding-block-end: 0.6rem;
  border-block-end: var(--rem-trait) solid var(--rem-encre);
}

.sema-fiche__galerie-titre h2 {
  margin: 0;
  font-family: var(--rem-police-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.sema-fiche__galerie-entete .sema-fiche__galerie-compte {
  grid-column: 1;
  grid-row: 2;
  margin: 0.6rem 0 0;
  font-family: var(--rem-police-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (width >= 40rem) {
  .sema-fiche__galerie-entete {
    grid-template-columns: minmax(0, 1fr) auto;
    /* `end` et non `baseline`, même logique que le bandeau des actualités :
       les deux éléments d'en-tête portent chacun la moitié du filet, leurs
       bords bas doivent coïncider pour n'en faire qu'un seul trait. */
    align-items: end;
  }

  .sema-fiche__galerie-entete .sema-fiche__galerie-compte {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding-block-end: 0.6rem;
    padding-inline-start: 1.5rem;
    border-block-end: var(--rem-trait) solid var(--rem-encre);
    white-space: nowrap;
  }
}

/* Le widget de galerie (plg_system_nrframework, champ ACF Gallery) compose son
   propre balisage et sa propre feuille (gallery.css) : on l'habille en ciblant
   ses classes plutôt qu'en le réécrivant. Le widget injecte en plus un <style>
   en ligne, propre à chaque galerie (`.nrf-widget.gallery0{--columns:3;…}`),
   placé après nos feuilles dans le document : à spécificité égale (deux
   classes), ce <style> l'emporte toujours et ignore nos points de rupture,
   quel que soit l'ordre des <link>. D'où le troisième niveau de sélecteur
   ci-dessous (`.sema-fiche__galerie` en plus de `-corps`), pour passer devant
   sans dépendre de l'ordre — même principe que pour DPCalendar dans
   agenda-liste.css, poussé un cran plus loin ici. */

.sema-fiche__galerie .sema-fiche__galerie-corps .tf-gallery-wrapper {
  --columns: 3;
  --gap: 1.5rem;
  gap: 0;
}

@media (width < 48rem) {
  .sema-fiche__galerie .sema-fiche__galerie-corps .tf-gallery-wrapper {
    --columns: 2;
  }
}

@media (width < 30rem) {
  .sema-fiche__galerie .sema-fiche__galerie-corps .tf-gallery-wrapper {
    --columns: 1;
  }
}

/* Chaque photo devient un tirage : cadre crème d'épaisseur égale sur ses quatre
   côtés, cerné d'un filet à l'encre, ombre dure dans une couleur de la charte.
   La couleur d'ombre est pilotée par le rang de la photo dans le champ, pas
   par une classe saisie — même convention que les tuiles acteurs/actualités.
   L'inclinaison suit un cycle à quatre temps (-4°, 2°, 4°, 2°), indépendant du
   cycle à trois teintes, pour que les deux motifs ne se calent jamais l'un sur
   l'autre. */
.sema-fiche__galerie-corps .tf-gallery-wrapper .gallery-items .item {
  position: relative;
  padding: 0.6rem;
  background-color: var(--rem-creme);
  border: var(--rem-trait) solid var(--rem-encre);
  box-shadow: 0.5rem 0.5rem 0 var(--sema-galerie-accent, var(--rem-olive));
  rotate: -4deg;
  break-inside: avoid;
  transition: rotate 0.12s ease, box-shadow 0.12s ease;
}

.sema-fiche__galerie-corps .tf-gallery-wrapper .gallery-items .item:nth-child(3n+2) {
  --sema-galerie-accent: var(--rem-terre);
}

.sema-fiche__galerie-corps .tf-gallery-wrapper .gallery-items .item:nth-child(3n) {
  --sema-galerie-accent: var(--rem-moutarde);
}

.sema-fiche__galerie-corps .tf-gallery-wrapper .gallery-items .item:nth-child(4n+2),
.sema-fiche__galerie-corps .tf-gallery-wrapper .gallery-items .item:nth-child(4n) {
  rotate: 2deg;
}

.sema-fiche__galerie-corps .tf-gallery-wrapper .gallery-items .item:nth-child(4n+3) {
  rotate: 4deg;
}

.sema-fiche__galerie-corps .tf-gallery-wrapper .gallery-items .item img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.sema-fiche__galerie-corps .tf-gallery-wrapper .gallery-items .item a {
  cursor: zoom-in;
}

/* Le tirage s'enfonce vers son ombre et se redresse au survol, comme les
   boutons du site (composants.css). */
.sema-fiche__galerie-corps .tf-gallery-wrapper .gallery-items .item:hover,
.sema-fiche__galerie-corps .tf-gallery-wrapper .gallery-items .item:focus-within {
  rotate: 0deg;
  box-shadow: 0.25rem 0.25rem 0 var(--sema-galerie-accent, var(--rem-olive));
}

@media (prefers-reduced-motion: reduce) {
  .sema-fiche__galerie-corps .tf-gallery-wrapper .gallery-items .item {
    transition: none;
  }
}

/* Légende en étiquette sur la photo, seulement si le champ « caption » de
   l'image est renseigné : le widget la garde sinon masquée par défaut (elle ne
   sert alors qu'à la description affichée dans la visionneuse plein écran). */
.sema-fiche__galerie-corps .tf-gallery-wrapper .gallery-items .item .glightbox-desc .module {
  display: none;
}

.sema-fiche__galerie-corps .tf-gallery-wrapper .gallery-items .item:has(.glightbox-desc .caption:not(:empty)) .glightbox-desc {
  position: absolute;
  inset-inline-start: 1.1rem;
  inset-block-end: 1.1rem;
  display: block;
  max-inline-size: calc(100% - 2.2rem);
}

.sema-fiche__galerie-corps .tf-gallery-wrapper .gallery-items .item .glightbox-desc .caption:not(:empty) {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  color: var(--rem-creme);
  background-color: var(--rem-encre);
  font-family: var(--rem-police-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- Encadrés */

.sema-fiche__encadres {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (width >= 48rem) {
  .sema-fiche__encadres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sema-fiche__encadre {
  padding: 1.5rem;
  border: var(--rem-trait-fin) solid var(--rem-encre);
  box-shadow: 0.5rem 0.5rem 0 var(--sema-fiche-ombre, var(--rem-kraft));
}

.sema-fiche__encadre > h2 {
  font-size: 1.25rem;
}

.sema-fiche__encadre p,
.sema-fiche__encadre li {
  font-size: 1rem;
  line-height: 1.6;
}

.sema-fiche__encadre p:last-child {
  margin-block-end: 0;
}

.sema-fiche__encadre--kraft {
  --sema-fiche-ombre: var(--rem-olive);
  background-color: var(--rem-kraft);
}

.sema-fiche__encadre--moutarde {
  --sema-fiche-ombre: var(--rem-moutarde);
  background-color: var(--rem-creme);
}

/* ------------------------------------------------------------- Chiffres clés */

.sema-fiche__chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 1.5rem 2rem;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  color: var(--rem-creme);
  background-color: var(--rem-foret);
}

.sema-fiche__chiffres dt {
  color: var(--rem-moutarde);
  font-family: var(--rem-police-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
}

.sema-fiche__chiffres dd {
  margin: 0.35rem 0 0;
  font-family: var(--rem-police-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ Colonne */

.sema-fiche__colonne > * + * {
  margin-block-start: 1.5rem;
}

.sema-fiche__pratique {
  padding: 1.5rem;
  background-color: var(--rem-creme);
  border: var(--rem-trait) solid var(--rem-encre);
}

.sema-fiche__pratique > h2,
.sema-fiche__prochain-rdv > h2 {
  padding-block-end: 0.5rem;
  font-size: 1.25rem;
  border-block-end: var(--rem-trait-fin) solid var(--rem-encre);
}

/* --------------------------------------------------------- Prochain rendez-vous */

/* Pas de carte englobante ici, contrairement à « Informations pratiques » :
   chaque événement est déjà une tuile bordée (reprise ci-dessous), une carte
   par-dessus une carte aurait doublé le cadre. Le titre garde la même
   ponctuation que les autres en-têtes de la colonne (filet fin en pied,
   réglé plus haut avec celui de « Informations pratiques »). */
.sema-fiche__prochain-rdv-liste {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tuile reprise telle quelle du design des « Prochains rendez-vous » de
   l'accueil (`.sema-agenda__evenement` dans agenda.css) : mêmes couleurs,
   même trait, même ombre portée — cohérence voulue entre les deux endroits
   du site où un événement s'affiche en carte. */
.sema-fiche__rdv-carte {
  padding: 1rem 1.1rem;
  background-color: var(--rem-creme);
  border: var(--rem-trait) solid var(--rem-encre);
  box-shadow: 0.4rem 0.4rem 0 var(--rem-encre);
}

.sema-fiche__rdv-quand {
  margin: 0 0 0.5rem;
  padding-block-end: 0.5rem;
  color: var(--rem-terre);
  font-family: var(--rem-police-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-block-end: var(--rem-trait-fin) solid var(--rem-encre);
}

.sema-fiche__rdv-heure {
  margin-inline-start: 0.4rem;
  color: var(--rem-encre);
  font-weight: 400;
}

.sema-fiche__rdv-titre {
  margin: 0;
  font-family: var(--rem-police-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  text-wrap: balance;
}

.sema-fiche__rdv-titre a {
  color: var(--rem-encre);
  text-decoration: none;
}

.sema-fiche__rdv-titre a:hover,
.sema-fiche__rdv-titre a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--rem-terre);
  text-decoration-thickness: var(--rem-trait);
  text-underline-offset: 0.2em;
}

.sema-fiche__rdv-lieu {
  margin: 0.6rem 0 0;
  font-family: var(--rem-police-mono);
  font-size: 0.75rem;
  line-height: 1.5;
}

.sema-fiche__rdv-commune {
  color: var(--rem-olive);
}

/* Requête de conteneur et non de fenêtre : ce qui décide, c'est la largeur
   disponible dans la colonne, pas celle de l'écran. Sur grand écran la colonne
   ne fait que 24 rem, et une media query aurait mis l'adresse sur cinq lignes. */
.sema-fiche__pratique {
  container-type: inline-size;
}

.sema-fiche__pratique dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
  font-family: var(--rem-police-mono);
  font-size: 0.875rem;
  line-height: 1.5;
}

@container (width >= 20rem) {
  .sema-fiche__pratique dl {
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }
}

.sema-fiche__pratique dt {
  color: var(--rem-olive);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sema-fiche__pratique dd {
  margin: 0 0 0.75rem;
  overflow-wrap: anywhere;
}

.sema-fiche__liens {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Modules insérés dans la colonne : ils reprennent le cadre de l'encadré
   pratique, quel que soit le module posé en `fiche-acteur-aside`. */
.sema-fiche__colonne .moduletable,
.sema-fiche__colonne .card {
  padding: 1.25rem;
  background-color: var(--rem-creme);
  border: var(--rem-trait-fin) solid var(--rem-encre);
}