/* ─────────────────────────────────────────────────────────────────
   cartes-apercu.css — chrome de la page d'aperçu des cartes uMap
   ─────────────────────────────────────────────────────────────────
   Ne contient QUE ce que le thème n'a pas déjà. Relevé par grep sur
   la pile CSS avant écriture : .pf-wrap, .pf-section, .pf-eyebrow et
   .pf-section-head* existent (pages-v3, components, inscriptions) et
   ne sont pas recopiés ici ; tout .pf-umap* vient de umap.css.

   Restent quatre classes de mise en page propres à la maquette, aux
   noms très génériques : .note, .lab, .col, .split. Elles sont donc
   TOUTES préfixées par .pf-cartes-apercu. Sans ce préfixe, un futur
   composant qui s'appellerait .note hériterait d'un filet cyan sans
   que rien ne le signale.

   Place dans PF_CSS : après components.css, avant charte-v4-dark,
   et APRÈS umap.css dont elle corrige deux points.
   ───────────────────────────────────────────────────────────────── */

/* ── Filet entre deux sections ──
   Remplace les <hr class="sep"> de la maquette : la même ligne, sans
   cinq blocs de plus dans l'éditeur. charte-v4-dark pose déjà
   exactement cette règle en thème sombre, ici elle vaut aussi de jour. */
.pf-cartes-apercu .pf-section + .pf-section { border-top: 1px solid var(--rule); }

/* Fond crème : chaque gabarit déclare le sien, comme le font déjà
   informations-pratiques.css et suivre-en-direct.css. */
.pf-cartes-apercu .pf-section--cream { background: var(--cream); }

/* ── Encadré explicatif ── */
.pf-cartes-apercu .note {
  max-width: 820px;
  margin: 0 0 26px;
  padding: 16px 18px;
  border-left: 3px solid var(--cyan);
  background: var(--navy-050);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pf-cartes-apercu .note b { color: var(--ink); }
.pf-cartes-apercu .note--large { max-width: none; }

/* ── Intitulé de variante ── */
.pf-cartes-apercu .lab {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ── Colonne de lecture et grille de démonstration ── */
.pf-cartes-apercu .col { max-width: 760px; }
.pf-cartes-apercu .col p { font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); }

.pf-cartes-apercu .split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .pf-cartes-apercu .split { grid-template-columns: 1fr; }
}
.pf-cartes-apercu .split__texte {
  margin-top: 0;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ── Fragments de code cités dans les notes ──
   Le thème ne stylise <code> que sous .prose, et seulement en sombre :
   sans cette règle les noms de classe sortent en Times, à la taille du
   texte courant, indistinguables de la prose autour. */
.pf-cartes-apercu code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
}

/* ── Une reprise sur umap.css, due au passage en blocs GB ──
   Un lien ou un bouton à pictogramme est un bloc texte à icône : GB
   enveloppe le SVG dans un <span class="gb-shape">. Les sélecteurs de
   umap.css visent le <svg>, qui n'est donc plus l'enfant direct du
   conteneur flex et perd son flex:none. Le span reprend le rôle.
   Cette règle n'a rien de propre à cette page : elle a vocation à
   remonter dans umap.css le jour où pf-umap sera posé en blocs GB
   ailleurs. */
.pf-cartes-apercu :is(.pf-umap__foot a, .pf-umap__open, .pf-umap__tool) > .gb-shape {
  display: inline-flex;
  flex: none;
  align-items: center;
}

/* ── Thème sombre ──
   charte-v4-dark.css vise .pf-section--cream en (0,2,1) ; une surcharge
   simplement préfixée pèse (0,2,0) et perdrait la nuit. D'où le
   doublage en html.pf-dark .pf-cartes-apercu */
html.pf-dark .pf-cartes-apercu .note { background: var(--navy-050); color: var(--ink-soft); }
html.pf-dark .pf-cartes-apercu .note b { color: var(--ink); }
html.pf-dark .pf-cartes-apercu code { background: var(--primary-tint); color: var(--ink); }

/* Liens du pied de légende. umap.css les pose en --navy-900, qui vaut
   #0B1233 en sombre : charte-v4-dark en fait le fond général, si bien
   que le lien tombait à 1,16:1 sur la surface du composant (mesuré au
   navigateur, AA en demande 4,5). --primary-deep est le token que le
   thème réserve aux liens de nuit, et charte-v4-dark:630 fait déjà
   exactement cela pour .pf-ecosys-panel__foot a. Mesuré à 5,0:1.
   Défaut de umap.css, pas du pattern : à remonter là-bas avec la
   règle .gb-shape ci-dessus. */
html.pf-dark .pf-cartes-apercu .pf-umap__foot a { color: var(--primary-deep); }