@charset "UTF-8";

/*
 * Pages Ressources (com_docman) — entrée de menu 146, layout Hierarchical
 * list par défaut. Seul le niveau de titre des fiches (H4 → H2, hors
 * d'atteinte du CSS) est corrigé par une surcharge — un seul paramètre
 * changé dans templates/html/views/tmpl/list.html.php (`heading` => '2').
 * Tout le reste est du CSS sur les classes natives `docman_*`/`k-*`/`koowa_*`.
 *
 * Piège à connaître : media/com_docman/css/site.min.css est chargé APRÈS ces
 * feuilles (comme dpcalendar sur la page agenda) — tout ce qui recroise une
 * classe déjà stylée par le cœur (docman_download__button, docman_download__info,
 * k-checkbox-dropdown-content, k-filters input[type=search]) doit passer en
 * `!important`, sinon le cœur regagne la main silencieusement.
 */

/* --------------------------------------------------------- Bord à bord */

/* Fond kraft bord à bord sous les fiches, comme /acteurs et /agenda :
   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. */
body:not(.has-sidebar-left) .site-grid .container-component:has(.docman_list_layout) {
  grid-column-start: full-start;
}

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

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

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

.container-component:has(.docman_list_layout) .mod-breadcrumbs__wrapper {
  padding-inline: var(--rem-marge-page);
}

/* Écart en `margin` et non en `padding` : à partir de 60rem ce conteneur
   porte un fond kraft (voir la grille desktop plus bas), qui peint tout son
   padding-box — un padding-block-start aurait donc affiché une bande kraft
   au-dessus du titre, alors que cette zone doit rester crème (fond de page). */
.docman_list_layout {
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
  padding-block-end: clamp(2.5rem, 5vw, 3.5rem);
}

/* À partir de 60rem, le titre et la recherche partagent une même ligne dans
   une grille à 5 pistes (marge | titre | intervalle | recherche | marge) —
   voir la section « Grille desktop » plus bas, qui replace .docman_category
   et .k-filters dans ces pistes. En dessous de 60rem, tout reste empilé au
   fil normal du document : pas de grille, la marge de page se pose ici. */
.docman_list_layout > .docman_category {
  padding-inline: var(--rem-marge-page);
  margin-block-end: clamp(1.5rem, 3vw, 2rem);
}

.docman_list_layout > .docman_category > .koowa_header {
  margin: 0;
  color: var(--rem-encre);
  font-family: var(--rem-police-display);
  font-size: clamp(2rem, 1.2rem + 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.docman_list_layout > .docman_category .docman_description {
  max-inline-size: var(--sema-mesure, 42rem);
  margin-block-start: 0.75rem;
}

/* -------------------------------------------- Grille de catégories (racine) */

.docman_categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: clamp(2rem, 4vw, 3rem) var(--rem-marge-page);
  /* !important : le cœur pose `.docman_categories{margin-top:10px;margin-bottom:20px}`
     (site.min.css, chargé après cette feuille) à la même spécificité — sans
     ça, ses valeurs gagnent par ordre de source malgré notre règle. */
  margin: 0 0 clamp(2rem, 4vw, 2.5rem) !important;
  background-color: var(--rem-kraft);
  border-top: 0 !important; /* efface le filet gris du cœur */
}

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

@media (width >= 62rem) {
  .docman_categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.docman_categories .docman_category {
  padding: 1.5rem 1.75rem;
  background-color: var(--rem-creme);
  border: var(--rem-trait) solid var(--rem-encre);
  box-shadow: 0.5rem 0.5rem 0 var(--rem-encre);
}

.docman_categories .koowa_header {
  margin: 0;
  font-family: var(--rem-police-display);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
}

.docman_categories .koowa_header__link {
  color: var(--rem-encre);
  text-decoration: none;
}

.docman_categories .koowa_header__link:hover,
.docman_categories .koowa_header__link:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--rem-terre);
  text-decoration-thickness: var(--rem-trait);
  text-underline-offset: 0.25em;
}

.docman_categories .docman_description {
  margin-block-start: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Ancien filet "Documents" (show_documents_header) désormais désactivé côté
   réglage (entrée de menu 146) : le bloc qui le portait reste vide dans le
   HTML, on l'efface pour ne pas laisser un espace mort. */
.docman_list_layout > .docman_block {
  display: none;
}

/* --------------------------------------------------- Bandeau kraft des fiches */

/* Seulement quand des documents sont réellement listés : sur la page racine
   (/ressources), ce même <form> ne contient que la recherche (les documents
   sont dans les sous-catégories) — sans ce garde-fou, un second bandeau kraft
   vide s'afficherait juste sous celui des catégories. */
.docman_list_layout form.k-js-grid-controller:has(.docman_document) {
  padding: clamp(2rem, 4vw, 3rem) var(--rem-marge-page);
  background-color: var(--rem-kraft);
}

.docman_document {
  padding: 1.5rem 1.75rem !important;
  margin: 0 0 1.25rem !important;
  background-color: var(--rem-creme);
  border: var(--rem-trait) solid var(--rem-encre);
  box-shadow: 0.5rem 0.5rem 0 var(--rem-encre);
}

.docman_document:last-child {
  margin-bottom: 0 !important;
}

.docman_document .koowa_header {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.docman_document .koowa_header__title_link {
  color: var(--rem-encre);
  font-family: var(--rem-police-display);
  font-weight: 700;
  text-decoration: none;
  text-wrap: balance;
}

.docman_document .koowa_header__title_link:hover,
.docman_document .koowa_header__title_link:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--rem-terre);
  text-decoration-thickness: var(--rem-trait-fin);
  text-underline-offset: 0.2em;
}

.docman_document_details {
  padding: 0 !important;
  margin: 0 0 0.75rem !important;
  color: var(--rem-terre);
  font-family: var(--rem-police-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 0 !important;
}

.docman_document_details > span:not(:first-child)::before {
  content: "· ";
}

/* Puces carrées à l'encre plutôt que le disque par défaut. */
.docman_description ul {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  column-gap: 2rem;
}

@media (width >= 48rem) {
  .docman_document .docman_description ul {
    columns: 2;
  }
}

.docman_description li {
  position: relative;
  padding-inline-start: 1.1rem;
  margin: 0 0 0.5rem;
  line-height: 1.5;
  break-inside: avoid;
}

.docman_description li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  background-color: var(--rem-terre);
}

/* Bouton de téléchargement : aplat moutarde, ombre dure encre — même langage
   que .sema-bouton--primaire (composants.css). Conservé en <a> flottant à
   droite (comportement natif du cœur, width:33%) : ça rejoue déjà la mise en
   page à deux colonnes de la maquette sans surcharge. */
.docman_download {
  text-align: center !important;
}

.docman_download__button {
  display: block !important;
  padding: 1rem !important;
  color: var(--rem-encre) !important;
  font-family: var(--rem-police-display);
  background-color: var(--rem-moutarde) !important;
  background-image: none !important;
  border: var(--rem-trait) solid var(--rem-encre) !important;
  border-radius: 0 !important;
  box-shadow: 0.4rem 0.4rem 0 var(--rem-encre);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.docman_download__button:hover,
.docman_download__button:focus-visible {
  color: var(--rem-encre) !important;
  background-color: var(--rem-moutarde) !important;
  transform: translate(0.15rem, 0.15rem);
  box-shadow: 0.25rem 0.25rem 0 var(--rem-encre);
}

.docman_download_label {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Type de fichier et poids, déjà fournis par le cœur : on les met en avant à
   la place du nombre de pages de la maquette, qu'aucune donnée ne renseigne. */
.docman_download__info {
  margin-block-start: 0.35rem !important;
  font-family: var(--rem-police-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ---------------------------------------------------------- Zone de recherche */

.docman_list_layout .k-filters {
  padding: 1rem 1.25rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  background-color: var(--rem-kraft);
  border: var(--rem-trait) solid var(--rem-encre);
  border-radius: 0;
  box-shadow: 0.4rem 0.4rem 0 var(--rem-encre);
}

/* Un seul champ, toujours visible : le mécanisme de repli par case à cocher
   (accordéon "Rechercher des documents") n'a pas sa place pour une recherche
   aussi simple. */
.docman_list_layout .k-checkbox-dropdown-toggle,
.docman_list_layout .k-checkbox-dropdown-label {
  display: none !important;
}

/* Grille compacte à 2 colonnes : la maquette montre un simple champ + un
   compteur, sans bouton (recherche instantanée) — DOCman, lui, a besoin d'un
   vrai bouton d'envoi. Sans ce regroupement, label/champ/bouton/réinitialiser
   s'empilaient sur 4 lignes pleine largeur et le bloc prenait beaucoup plus
   de hauteur que dans la maquette. Ici, le champ et le bouton partagent une
   ligne : `.form-group` (label + champ du cœur) est aplati pour que les deux
   deviennent des éléments de grille indépendants au même titre que le bouton. */
.docman_list_layout .k-checkbox-dropdown-content {
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 0.6rem;
  align-items: center;
}

.docman_list_layout .k-filters .form-group {
  display: contents;
}

.docman_list_layout .k-filters label {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--rem-terre);
  font-family: var(--rem-police-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.docman_list_layout .k-filters input[type="search"] {
  grid-column: 1;
  box-sizing: border-box;
  inline-size: 100%;
  height: auto !important;
  padding: 0.6rem 0.75rem !important;
  color: var(--rem-encre);
  font-family: var(--rem-police-mono);
  font-size: 0.95rem;
  background-color: var(--rem-creme);
  border: var(--rem-trait) solid var(--rem-encre);
  border-radius: 0;
}

.docman_list_layout .k-filters input[type="search"]:focus {
  outline: var(--rem-trait) solid var(--rem-terre);
  outline-offset: calc(-1 * var(--rem-trait));
}

.docman_list_layout .k-filters .k-js-search-submit {
  grid-column: 2;
  padding: 0.6rem 1rem;
  margin: 0;
  color: var(--rem-encre);
  font-family: var(--rem-police-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  background-color: var(--rem-moutarde);
  border: var(--rem-trait) solid var(--rem-encre);
  border-radius: 0;
}

.docman_list_layout .k-filters .k-js-search-reset {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0;
  padding: 0;
  color: var(--rem-terre);
  font-family: var(--rem-police-mono);
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  background: none;
  border: 0;
}

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

/* À partir de 60rem, le <form> qui porte la recherche et les fiches est
   aplati (`display: contents`) : ses enfants (.k-filters, .docman_document,
   .k-pagination) deviennent des éléments de grille directs de
   .docman_list_layout. Ça permet de placer la recherche à côté du titre sans
   connaître à l'avance la hauteur de l'un ou de l'autre — une position
   absolue avec une hauteur réservée « à vue » débordait sur les fiches à
   certaines largeurs (1920px notamment) : la ligne s'adapte maintenant
   d'elle-même à la hauteur du plus grand des deux blocs. Le <form> reste un
   vrai <form> dans le DOM (la recherche continue de le soumettre normalement,
   `display: contents` ne fait disparaître que sa boîte visuelle). */
@media (width >= 60rem) {
  .docman_list_layout {
    display: grid;
    grid-template-columns:
      var(--rem-marge-page)
      minmax(0, 1fr)
      1.5rem
      minmax(15rem, 20rem)
      var(--rem-marge-page);
    align-items: start;
    /* Kraft posé sur toute la grille, « percé » de crème sur la ligne 1 par
       le pseudo-élément ci-dessous. Poser le kraft en ::before sur la ligne
       2 et l'étendre jusqu'à la dernière (`2 / -1`) semblait plus direct,
       mais un nombre de lignes implicite inconnu (une fiche = une ligne)
       fait dérailler ce calcul dans Chrome : le pseudo-élément se retrouve
       étiré sur la ligne 1 au lieu de la 2. Détecté en isolant le rendu
       dans un fichier de test. Percer une seule ligne bien identifiée (la 1)
       est fiable quel que soit le nombre de fiches en dessous. */
    background-color: var(--rem-kraft);
  }

  .docman_list_layout::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 1;
    /* `align-items: start` sur la grille (nécessaire pour que le titre et la
       recherche ne s'étirent pas l'un sur l'autre) empêche aussi ce
       pseudo-élément de remplir sa cellule par défaut : sans ce
       `align-self`, il reste une lamelle de hauteur nulle, invisible. */
    align-self: stretch;
    background-color: var(--rem-creme);
  }

  .docman_list_layout > .docman_category {
    grid-column: 2;
    grid-row: 1;
    padding-inline: 0;
    margin-block-end: 0;
  }

  .docman_list_layout > .docman_categories,
  .docman_list_layout .docman_document,
  .docman_list_layout .k-pagination {
    grid-column: 2 / 5;
  }

  /* Redondant avec le fond kraft posé sur .docman_list_layout à cette
     largeur : la bande propre à .docman_categories ne sert plus qu'en
     dessous de 60rem. */
  .docman_list_layout > .docman_categories {
    padding: 0;
    background-color: transparent;
  }

  /* Écart entre la ligne 1 (titre + recherche, sur crème) et la ligne 2
     (catégories/fiches, sur kraft) : sans lui la première tuile touche
     directement le bas du bloc de recherche. Cet écart tombe dans la zone
     kraft (aucun ::before ne le recouvre), donc il se voit comme une
     respiration kraft entre les deux blocs, pas comme un blanc. Posé en
     marge et non en `row-gap` sur la grille : un `row-gap` global
     s'ajouterait aussi entre chaque fiche, en plus de leur propre marge. */
  .docman_list_layout > .docman_categories {
    margin-block-start: clamp(2rem, 4vw, 3rem) !important;
  }

  /* `!important` obligatoire : la règle de base plus haut fixe déjà
     `margin: 0 0 1.25rem !important` (nécessaire face au CSS du cœur) —
     une déclaration non importante, même plus spécifique, perdrait contre
     elle. */
  .docman_list_layout .docman_document {
    margin-block-start: clamp(2rem, 4vw, 3rem) !important;
  }

  .docman_list_layout .docman_document ~ .docman_document {
    margin-block-start: 0 !important;
  }

  .docman_list_layout form.k-js-grid-controller {
    display: contents;
  }

  .docman_list_layout .k-filters {
    grid-column: 4;
    grid-row: 1;
    margin: 0;
  }
}