/* ════════════════════════════════════════════════════════════════
   pape-france.fr – DOCUMENTS À TÉLÉCHARGER  (.pf-docs / .pf-docvis / .pf-doclink)
   Version pour le pattern GenerateBlocks 2.x documents.gb2.html.
   Remplace documents.css (Claude Design) sous le même nom dans le thème :
   l'entrée 'documents' de PF_CSS, après components.css, reste valable.
   Remplace doc-list/doc-item (Transparence), les sélecteurs ne se croisent pas.

   Trois formes, trois usages :
     .pf-docs    liste de fichiers homogènes (2 et plus)
     .pf-docvis  un document dont le contenu se regarde (plan, carte, affiche)
     .pf-doclink un fichier isolé cité dans un texte

   Écarts avec documents.css, tous voulus :
   - Pictogrammes : GB les pose dans <span class="gb-shape">, à côté d'un
     <span class="gb-text">. « .pf-doclink span » visait le seul poids du
     fichier ; il aurait maintenant réduit tout le libellé à 12,5 px, d'où
     « .pf-doclink .gb-text span ».
   - « .pf-btn svg » n'est dimensionné nulle part dans le thème (seulement
     dans la page d'aperçu de la maquette) : sans la règle du bouton, le
     SVG sans width prend 300 px de large.
   - Couleurs en dur retirées. Les pastilles de format tirent fond, texte
     et filet d'une seule teinte, --pf-doc-teinte, pointée sur les tokens
     --red, --cyan, --green, --navy : rien à déclarer dans style-v3.css.
     Le texte est la teinte assombrie en clair, éclaircie vers --ink en
     sombre (contraste > 4,5 à 11 px gras dans les deux thèmes).
   - Mode sombre : --navy-900 y vaut #0B1233, un fond. Tout texte écrit en
     --navy-900 (action, pastille « Agrandir », lien secondaire, titre au
     survol) disparaissait sur le papier nuit : il passe en --ink. La
     pastille « Agrandir » était blanche en dur : elle suit --paper.
   ════════════════════════════════════════════════════════════════ */

/* ─── 1 · LISTE  (.pf-docs) ────────────────────────────────────── */
.pf-docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); max-width: 860px; }
.pf-docs--full { max-width: none; }
.pf-doc {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 20px; align-items: center;
  padding: 18px 16px 18px 4px; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit; border-radius: 10px;
  transition: background .18s, padding-left .18s;
}
.pf-doc:hover { background: var(--cream); padding-left: 12px; }
.pf-doc__type {
  --pf-doc-teinte: var(--navy);
  display: grid; place-items: center; width: 46px; height: 56px; flex: none;
  border-radius: 6px 10px 6px 6px;
  background: color-mix(in srgb, var(--pf-doc-teinte) 12%, var(--paper));
  color: color-mix(in srgb, var(--pf-doc-teinte) 55%, black);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-doc-teinte) 24%, transparent);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pf-doc__type[data-format="pdf"] { --pf-doc-teinte: var(--red); }
.pf-doc__type[data-format="img"] { --pf-doc-teinte: var(--cyan); }
.pf-doc__type[data-format="xls"] { --pf-doc-teinte: var(--green); }
.pf-doc__title { display: block; font-size: 19px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.pf-doc:hover .pf-doc__title { color: var(--navy-900); }
.pf-doc__meta { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.pf-doc__action {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy-900);
}
.pf-doc__action svg { width: 15px; height: 15px; transition: transform .18s; }
.pf-doc:hover .pf-doc__action svg { transform: translateY(2px); }

/* ─── 2 · DOCUMENT VISUEL  (.pf-docvis) ─────────────────────────
   Aperçu cliquable + légende. Deux colonnes, empilé sous 768 px. */
.pf-docvis {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 0;
  margin: 0; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 14px; overflow: hidden;
}
.pf-docvis--portrait { grid-template-columns: minmax(0,.62fr) minmax(0,1fr); }
.pf-docvis__preview {
  position: relative; display: block; background: var(--cream);
  border-right: 1px solid var(--rule);
}
.pf-docvis__preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pf-docvis--portrait .pf-docvis__preview img { object-fit: contain; padding: 22px; box-sizing: border-box; }
.pf-docvis__zoom {
  position: absolute; bottom: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 2px 10px rgba(9,29,90,.16);
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy-900);
}
.pf-docvis__zoom svg { width: 14px; height: 14px; }
.pf-docvis__preview:hover .pf-docvis__zoom { background: var(--paper); }
.pf-docvis__body { padding: 34px 34px 30px; display: flex; flex-direction: column; align-items: flex-start; }
.pf-docvis__title {
  font-family: 'LeonXIV','Jost',sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.02; margin: 0; color: var(--navy);
}
.pf-docvis__text { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.pf-docvis__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.pf-docvis__actions .pf-btn svg { width: 15px; height: 15px; }
.pf-docvis__alt {
  font-size: 13px; font-weight: 600; color: var(--navy-900);
  text-decoration: none; border-bottom: 1px solid var(--rule);
}
.pf-docvis__alt:hover { border-bottom-color: var(--navy); }
.pf-docvis__note { margin: 18px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.pf-docvis__note b { font-weight: 600; }
/* variante posée sur fond crème : le cadre disparaît */
.pf-section--cream .pf-docvis { border-color: transparent; box-shadow: 0 1px 2px rgba(9,29,90,.05), 0 10px 30px -18px rgba(9,29,90,.22); }

/* ─── 3 · FICHIER CITÉ DANS UN TEXTE  (.pf-doclink) ────────────── */
.pf-doclink {
  display: inline-flex; align-items: center; gap: 10px; vertical-align: baseline;
  padding: 9px 16px 9px 13px; margin: 2px 0;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper); text-decoration: none;
  font-size: 14.5px; font-weight: 500; color: var(--ink);
  transition: border-color .18s, background .18s;
}
.pf-doclink:hover { border-color: var(--navy); background: var(--navy-050); }
.pf-doclink svg { width: 16px; height: 16px; flex: none; color: var(--navy); }
.pf-doclink .gb-text span { font-size: 12.5px; color: var(--ink-soft); }

/* ─── 4 · PICTOGRAMMES GB ──────────────────────────────────────
   Le <span class="gb-shape"> est en ligne : sans flex, la hauteur de
   ligne s'ajoute sous le SVG et le décale du libellé. */
:is(.pf-doc__action, .pf-docvis__zoom, .pf-docvis__actions .pf-btn, .pf-doclink) > .gb-shape { display: flex; }

/* ─── 5 · SOMBRE ─────────────────────────────────────────────── */
html.pf-dark .pf-doc__type { color: color-mix(in srgb, var(--pf-doc-teinte) 45%, var(--ink)); }
html.pf-dark :is(.pf-doc:hover .pf-doc__title, .pf-doc__action, .pf-docvis__zoom, .pf-docvis__alt) { color: var(--ink); }
html.pf-dark .pf-docvis__alt:hover { border-bottom-color: var(--ink); }
html.pf-dark .pf-doclink svg { color: var(--ink); }

@media (max-width: 768px) {
  .pf-doc { grid-template-columns: 38px 1fr; gap: 14px; padding: 16px 0; row-gap: 10px; }
  .pf-doc:hover { padding-left: 0; }
  .pf-doc__type { width: 38px; height: 46px; font-size: 10px; }
  .pf-doc__title { font-size: 17px; }
  .pf-doc__action { grid-column: 2; justify-self: start; }
  .pf-docvis, .pf-docvis--portrait { grid-template-columns: 1fr; }
  .pf-docvis__preview { border-right: none; border-bottom: 1px solid var(--rule); }
  .pf-docvis__preview img { max-height: 62vh; object-fit: contain; }
  .pf-docvis--portrait .pf-docvis__preview img { padding: 16px; }
  .pf-docvis__body { padding: 26px 22px 24px; }
  .pf-docvis__actions { gap: 12px; }
  .pf-docvis__actions .pf-btn { width: 100%; justify-content: center; }
}