/* =============================================================================
   LES COMPOSANTS COMMUNS DES PAGES — composant du theme
   =============================================================================
   Chargee sur toutes les pages publiques par common/header.php, apres
   cards.css. Ce qui se retrouvait a l'identique dans chaque feuille de page
   est ici, une seule fois : une page pose la classe, elle ne recopie pas la
   regle. La feuille d'une page (ou d'un plugin) ne garde que ce qui lui est
   propre, prefixe par sa classe de body pour ne rien toucher ailleurs.

   Rien ne s'applique tout seul : chaque regle vise une classe .eman-* que la
   vue pose. Les pages qui ne sont pas encore refaites ne voient donc rien.

   -- Les composants --------------------------------------------------------

     body.eman-page          page refaite : moins d'air sous le menu
     .eman-zone              un bloc pose directement dans #content
     .eman-stack             une pile de cartes separees par la gouttiere
     .eman-lead              la colonne qui porte la carte de tete
     .eman-toolbar           une barre de commandes
       .eman-toolbar__text     libelle ou etat, en texte secondaire
     .eman-pager             la pagination (a droite dans la barre)
     .eman-pager--bottom     la pagination repetee sous la liste
     .eman-btn               le bouton de reference du site
     .eman-select            l'enveloppe d'un <select> a fleche redessinee
     .eman-fields            porte une grille intitule / valeur
     .eman-list__card        une fiche dans une liste (avec .eman-card--section)
       .eman-thumb             la vignette
       .eman-list__fields      les champs
       .eman-list__plugin      ce que les plugins ajoutent
     .eman-plugin            un bloc monte par un autre plugin
     .eman-taglist           des mots-cles et leur decompte
     .eman-meta              les mentions de bas de page, hors carte

   La carte de tete et le bloc a bandeau sont des variantes de carte :
   .eman-card--head et .eman-card--section, dans cards.css. L'aplat des
   titres est dans la palette (--eman-titre-*, style.css).
   ========================================================================== */

:root {
  /* Gouttiere entre les zones et entre les cartes d'une pile. */
  --eman-gap: 1.5em;
  /* Hauteur des commandes : boutons, selecteurs, pagination. */
  --eman-control-height: 32px;
  /* Cote d'une vignette de liste. */
  --eman-thumb-size: 80px;
}


/* !---------- La page ---------------------------------------------------------- */

/* Le theme aere #content de 1.75em sous la barre de menu. Une page refaite
   s'ouvre sur sa carte de tete (ou son fil d'Ariane), qui fait deja cette
   separation. */
.eman-page #content {
  padding-top: 0.75em;
}

/* Le theme fait flotter bon nombre d'enfants de #content : une zone reprend
   toute la largeur. Les zones sont separees par la gouttiere, pas par la
   marge propre des cartes. */
.eman-zone {
  float: none;
  clear: both;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0 0 var(--eman-gap);
}

/* Une pile de cartes : la gouttiere remplace leur marge, sans quoi les deux
   s'ajoutent. Une pile vide n'ouvre pas de gouttiere. */
.eman-stack {
  display: flex;
  flex-direction: column;
  gap: var(--eman-gap);
  min-width: 0;
}

.eman-stack > .eman-card {
  margin-bottom: 0;
}

.eman-stack:empty {
  display: none;
}

/* Deux colonnes empilees (sous 900px, la ou les fiches passent a une seule
   colonne) : celle qui porte la carte de tete passe en premier, pour que le
   titre reste en tete de page quel que soit le cote que le template lui
   donne. */
@media (max-width: 899.98px) {
  .eman-lead {
    order: -1;
  }
}


/* !---------- Commandes -------------------------------------------------------- */

/* Les commandes a gauche, la pagination poussee a droite. */
.eman-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.eman-toolbar__text {
  font-size: 0.9em;
  color: var(--eman-ombre);
  white-space: nowrap;
}

.eman-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.eman-pager--bottom {
  justify-content: flex-end;
  float: none;
  clear: both;
  margin: var(--eman-gap) 0 0;
}

/* Le bouton de reference : aplat clair, filet marque, angles droits. Il sert
   aussi bien a un lien qu'a un <button>, d'ou la remise a plat de la police. */
.eman-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: var(--eman-control-height);
  margin: 0;
  padding: 0 8px;
  background: var(--eman-clair);
  color: var(--eman-encre);
  border: 1px solid var(--eman-lin);
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.eman-btn:hover {
  background: var(--eman-papier);
}

/* Un bouton inerte, en bout de course : il ne reagit plus au survol. */
.eman-btn--off,
.eman-btn--off:hover,
.eman-btn:disabled,
.eman-btn:disabled:hover {
  background: var(--eman-clair);
  opacity: 0.4;
  cursor: default;
}

/* La vue ou le tri courant : le bouton s'enfonce. Une fleche donne le sens
   d'un tri. */
.eman-btn--current,
.eman-btn--asc,
.eman-btn--desc {
  background: var(--eman-papier);
  border-color: var(--eman-encre);
}

.eman-btn--asc::after {
  content: "\2191";
  margin-left: 0.3em;
}

.eman-btn--desc::after {
  content: "\2193";
  margin-left: 0.3em;
}

/* Le <select> de reference : `appearance: none` est indispensable, sans lui
   macOS peint le fond natif et ignore la couleur demandee. La fleche est donc
   redessinee sur l'enveloppe. La largeur est celle de la page :

     <span class="eman-select"><select>…</select></span> */
.eman-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.eman-select::after {
  content: "";
  position: absolute;
  right: 10px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--eman-ombre);
  border-bottom: 1.5px solid var(--eman-ombre);
  transform: translateY(-25%) rotate(45deg);
  pointer-events: none;
}

/* Le fond blanc est verrouille en !important par bootstrap-eman.css : on le
   reprend de meme. Un <select> ne suit pas l'alignement flex : c'est
   `line-height` egal a la hauteur interieure qui centre son libelle. */
.eman-select > select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  height: var(--eman-control-height);
  margin: 0;
  padding: 0 26px 0 8px;
  background-color: #fff !important;
  color: var(--eman-encre);
  border: 1px solid var(--eman-lin);
  border-radius: 0;
  font: inherit;
  line-height: calc(var(--eman-control-height) - 2px);
}


/* !---------- Un champ ---------------------------------------------------------- */

/* Intitule et valeur sur la meme ligne, la valeur alignee a gauche d'une
   colonne commune : c'est ce qui rend une fiche lisible en diagonale. Les
   classes viennent du template UiTemplates, d'ou le conteneur .eman-fields :
   les pages qui gardent la mise en page du plugin ne sont pas touchees. */
.eman-fields .field-uitemplates {
  display: grid;
  grid-template-columns: minmax(6em, 11em) minmax(0, 1fr);
  gap: 0 0.75em;
  margin: 0 0 0.45em;
  line-height: 1.45;
}

.eman-fields .field-uitemplates:last-child {
  margin-bottom: 0;
}

/* `retour` : l'intitule prend sa propre ligne (reglage du template). Les deux
   lignes formant un couple, il faut plus d'air entre deux champs qu'entre
   l'intitule et sa valeur. */
.eman-fields .field-uitemplates.retour {
  grid-template-columns: 1fr;
  margin-bottom: 0.5em;
}

/* L'intitule est un repere, pas un titre : plus petit que la valeur, en
   capitales espacees, dans l'encre pale. C'est le meme traitement que le
   niveau d'un repere du fil d'Ariane. En capitales, le « : » que
   ui-templates.css ajoute n'a plus lieu d'etre. */
.eman-fields .field-uitemplates-title {
  float: none;
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--eman-ombre);
}

.eman-fields .field-uitemplates-title::after {
  content: none;
}

/* Sur deux colonnes, l'intitule s'aligne sur la premiere ligne de la valeur :
   sa police plus petite le remonterait sans ce calage. */
.eman-fields .field-uitemplates:not(.retour) .field-uitemplates-title {
  padding-top: 0.25em;
}

.eman-fields .field-uitemplates-title.bold {
  color: var(--eman-encre);
}

/* Un champ sans intitule (field_as_title) occupe les deux colonnes. */
.eman-fields .field-uitemplates > .uit-field:first-child {
  grid-column: 1 / -1;
}

/* ui-templates.css donne une marge basse et un retrait a .uit-field. Ici la
   valeur est une case de grille : cette marge ne separe plus rien. */
.eman-fields .uit-field {
  min-width: 0;
  margin: 0;
  padding-left: 0;
  overflow-wrap: break-word;
}

/* La valeur arrive telle qu'elle a ete saisie, souvent en <p> : les marges du
   theme aereraient la liste au point de la rendre illisible. */
.eman-fields .uit-field p {
  margin: 0 0 0.3em;
}

.eman-fields .uit-field p:last-child {
  margin-bottom: 0;
}

.eman-fields .uit-list {
  margin: 0;
  padding-left: 1.1em;
}

.eman-fields .uit-list li {
  margin: 0;
}

/* Champ long : replie, sans JavaScript. */
.eman-fields .uit-field--long > summary {
  cursor: pointer;
  font-style: italic;
  color: var(--eman-ombre);
}

.eman-fields .uit-field--long[open] > summary {
  margin-bottom: 0.4em;
}

/* Avec un extrait (fiches UiTemplates) : l'extrait et « Lire la suite »
   replie, « Retour a la version reduite » deplie. */
.eman-fields .uit-field--long > summary:has(.uit-field__excerpt) {
  list-style: none;
  font-style: normal;
  color: inherit;
}

.eman-fields .uit-field--long > summary::-webkit-details-marker {
  display: none;
}

.eman-fields .uit-field__more,
.eman-fields .uit-field__less {
  font-style: italic;
  color: var(--eman-ombre);
  white-space: nowrap;
}

.eman-fields .uit-field--long:not([open]) .uit-field__less,
.eman-fields .uit-field--long[open] .uit-field__excerpt,
.eman-fields .uit-field--long[open] .uit-field__more {
  display: none;
}


/* !---------- Une liste de fiches ------------------------------------------------ */

/* Une carte a bandeau par fiche, sur toute la largeur. La vignette se tient a
   gauche des champs. */
.eman-list__card .eman-card__body {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75em 1em;
}

.eman-list__fields {
  flex: 1 1 14em;
  min-width: 0;
}

/* Ce que les plugins ajoutent passe sous la vignette et les champs. */
.eman-list__plugin {
  flex: 1 1 100%;
  min-width: 0;
  overflow-x: auto;
}

/* Le picto « privee » du theme vise div.item.private : il se pose sous le
   bandeau, pour ne pas couvrir le titre. */
.eman-list__card.private .eman-card__body {
  padding-right: 60px;
  background: url('../images/private-small.png') top 8px right 12px no-repeat;
  background-size: 35px 35px;
}

/* Un decompte : texte secondaire, sur la ligne de ce qu'il compte. */
.eman-list__count {
  margin-left: 0.5em;
  font-size: 0.85em;
  color: var(--eman-ombre);
  white-space: nowrap;
}

/* Les mots-cles : les virgules font la separation, un mot-cle ne se coupe
   pas en deux. */
.eman-list__field--keywords .uit-field {
  overflow-wrap: normal;
}

/* La vignette : cadre discret, souligne au survol. */
.eman-thumb {
  display: block;
  flex: none;
  width: var(--eman-thumb-size);
  line-height: 0;
  overflow: hidden;
  border: 1px solid var(--eman-lin);
  border-radius: 2px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.eman-thumb:hover,
.eman-thumb:focus {
  border-color: var(--eman-encre);
  box-shadow: rgba(0, 0, 0, 0.18) 0 1px 4px;
}

.eman-thumb img {
  display: block;
  float: none;
  width: 100%;
  height: auto;
  margin: 0;
}


/* !---------- Blocs particuliers -------------------------------------------------- */

/* Un bloc monte par un autre plugin : son balisage ne nous appartient pas. On
   lui laisse la place et on remet a plat ce qui deborderait de la carte. Il
   porte souvent son propre titre : la carte en a deja un. */
.eman-plugin {
  min-width: 0;
  overflow-x: auto;
}

.eman-plugin img,
.eman-plugin iframe {
  max-width: 100%;
}

.eman-plugin > h2:first-child,
.eman-plugin > h3:first-child {
  margin-top: 0;
}

/* Des mots-cles qu'on parcourt des yeux : ils s'enchainent sur des lignes qui
   se replient, chacun suivi de son decompte. Un mot-cle ne se coupe pas de
   son decompte. */
.eman-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 1.25em;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.45;
}

.eman-taglist__tag {
  float: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.eman-taglist__count {
  margin-left: 0.3em;
  font-size: 0.85em;
  color: var(--eman-ombre);
}


/* !---------- Bas de page -------------------------------------------------------- */

/* Les mentions (cree par, cree le, formats d'export) : discretes, sous le
   contenu, hors carte. */
.eman-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1em;
  justify-content: flex-end;
  float: none;
  clear: both;
  width: auto;
  margin: var(--eman-gap) 0 1em;
  font-size: 0.9em;
  font-weight: 400;
  color: var(--eman-ombre);
}

.eman-meta .dclabel {
  font-weight: 400;
}