/* mod_rtn_formations — (C) 2026 IKMATA Design France — GPL v2+ */

/* Le module prend la largeur de sa colonne et ne peut pas l'élargir (container-type
   neutralise sa largeur intrinsèque ; la grille minmax(0,1fr) sert de repli). */
.rtnf {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%;
  container: rtnf / inline-size;
  --rtnf-brand: #163d66; --rtnf-th-bg: #f1f5f9; --rtnf-detail-bg: rgba(22, 61, 102, .04); --rtnf-focus: #287bc1; --rtnf-label: #6b7280;
}
.rtnf [hidden] { display: none !important; }

/* Bandeau */
.rtnf-hero--brand { background: var(--rtnf-brand); }
.rtnf-hero .rtnf-title { text-transform: none; letter-spacing: normal; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.25; }
.rtnf-hero--brand .rtnf-title, .rtnf-hero--brand .rtnf-eyebrow { color: #fff; }
.rtnf-eyebrow { text-transform: uppercase; letter-spacing: .06em; }

/* Recherche et onglets */
.rtnf-search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rtnf-search-input { flex: 1 1 240px; min-width: 0; }
.rtnf-search-input input { width: 100%; box-sizing: border-box; }
.rtnf-tabs { gap: 8px; }
.rtnf-tabs .uk-button { white-space: normal; line-height: 1.5; padding-top: 10px; padding-bottom: 10px; text-align: left; }
.rtnf-tabs .uk-badge { margin-left: 6px; vertical-align: middle; }

/* Zone du tableau : défilement vertical seulement. */
.rtnf-scroll { position: relative; max-height: 65vh; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.rtnf-h-50 .rtnf-scroll { max-height: 50vh; }
.rtnf-h-80 .rtnf-scroll { max-height: 80vh; }
.rtnf-h-none .rtnf-scroll { max-height: none; }

/* Tableau pleine largeur : uniquement les colonnes principales. */
.rtnf .rtnf-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.rtnf .rtnf-table th { position: sticky; top: 0; z-index: 1; background: var(--rtnf-th-bg); vertical-align: bottom; }
.rtnf .rtnf-table td { vertical-align: top; white-space: pre-line; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.rtnf .rtnf-table > tbody > tr.rtnf-row > td:first-child { font-weight: 500; }
.rtnf .rtnf-link { overflow-wrap: anywhere; -webkit-hyphens: none; hyphens: none; }
.rtnf-h-none .rtnf-table th { position: static; }

/* Colonne et bouton « Détails » */
.rtnf .rtnf-table .rtnf-toggle-col { width: 1%; white-space: nowrap; text-align: right; vertical-align: top; }
.rtnf .rtnf-toggle { white-space: nowrap; padding: 0 10px; }
.rtnf .rtnf-toggle::after { content: " ▾"; }
.rtnf .rtnf-toggle[aria-expanded="true"]::after { content: " ▴"; }

/* Ligne de détail : prolonge visuellement la ligne principale. */
.rtnf .rtnf-table > tbody > tr.rtnf-open, .rtnf .rtnf-table > tbody > tr.rtnf-detail { background: var(--rtnf-detail-bg); }
.rtnf .rtnf-table > tbody > tr.rtnf-detail { border-top: 0 !important; }
.rtnf .rtnf-detail > td { padding-top: 4px; padding-bottom: 16px; white-space: normal; font-weight: normal; }
.rtnf .rtnf-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 24px; margin: 0; }
.rtnf .rtnf-dl dt { margin: 0 0 2px; font-size: .75rem; font-weight: normal; text-transform: uppercase; letter-spacing: .03em; color: var(--rtnf-label); }
.rtnf .rtnf-dl dd { margin: 0; white-space: pre-line; overflow-wrap: break-word; }
.rtnf .rtnf-dl dd.rtnf-link { overflow-wrap: anywhere; }

/* Bouton de tri : neutralise le style des boutons du thème. */
.rtnf .rtnf-sort { display: inline-flex; align-items: flex-start; gap: 6px; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.rtnf .rtnf-arrow { opacity: .45; }
.rtnf th[aria-sort="ascending"] .rtnf-arrow, .rtnf th[aria-sort="descending"] .rtnf-arrow { opacity: 1; }

/* Masquage accessible. Avec JS, le titre de chaque feuille est porté par l'onglet. */
.rtnf-sr, .rtnf-js .rtnf-panel-title { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.rtnf :focus-visible { outline: 3px solid var(--rtnf-focus); outline-offset: 3px; }
.rtnf .rtnf-panel:focus { outline: none; }

/* Colonne étroite ou mobile : chaque ligne devient une carte avec ses libellés. */
@container rtnf (max-width: 759.98px) {
  .rtnf-table, .rtnf-table tbody, .rtnf-table tr, .rtnf-table td { display: block; width: auto; }
  .rtnf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rtnf .rtnf-table > tbody > tr.rtnf-row { padding: 12px 0 4px; }
  .rtnf .rtnf-table > tbody > tr.rtnf-row > td { padding: 2px 12px; }
  .rtnf .rtnf-table td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: normal; text-transform: uppercase; letter-spacing: .03em; color: var(--rtnf-label); }
  .rtnf .rtnf-table > tbody > tr.rtnf-row > td:first-child { font-size: 1.05em; }
  .rtnf .rtnf-table > tbody > tr.rtnf-row > td:first-child::before { display: none; }
  .rtnf .rtnf-table .rtnf-toggle-col { width: auto; text-align: left; padding-top: 6px !important; padding-bottom: 8px !important; }
  .rtnf .rtnf-detail > td { padding: 0 12px 16px; }
  .rtnf .rtnf-dl { grid-template-columns: 1fr; gap: 8px; }
}

@media print {
  .rtnf [data-rtnf-controls], .rtnf [data-rtnf-tabs], .rtnf .rtnf-toggle { display: none !important; }
  .rtnf [data-rtnf-panel], .rtnf [data-rtnf-detail] { display: revert !important; }
  .rtnf [data-rtnf-panel] { display: block !important; }
  .rtnf .rtnf-scroll { max-height: none; overflow: visible; }
  .rtnf-js .rtnf-panel-title { position: static !important; width: auto; height: auto; margin: 1em 0 .5em; clip: auto; overflow: visible; }
}