/* Guide des plugins WordPress (src/modules/aide.ts, textes de src/guide) : sommaire du guide, panneau illustré,
   captures d'écran, encadrés « À savoir », navigation entre les six pages, impression propre.
   Chargée après style.css et legal.css, dont elle reprend la colonne de lecture, le sommaire collant et les tableaux.
   Charte design/CHARTE.md : thème clair uniquement, rayons 14 px et 24 px, transitions de 150 à 200 ms. */

/* Sans compte, la colonne publique fait 520 px : le sommaire du guide a besoin de la même largeur que ses pages. */
.public--guide { max-width: 1120px; }

/* ---------- Panneau illustré en tête de page (panneau sable de la charte) ---------- */
.guide-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center;
  background: var(--sand); border-radius: var(--r-panel); padding: 40px;
}
.guide-hero::before, .guide-hero::after { content: ""; position: absolute; border-radius: 50%; background: var(--sand-2); pointer-events: none; }
.guide-hero::before { width: 180px; height: 180px; right: -60px; top: -70px; }
.guide-hero::after { width: 120px; height: 120px; left: -44px; bottom: -52px; }
.guide-hero > * { position: relative; z-index: 1; }
.guide-hero__illu { line-height: 0; }
.guide-hero__illu .illu { display: block; max-width: 100%; height: auto; }
.guide-hero__text > * { margin: 0; max-width: 60ch; }
.guide-hero__text > * + * { margin-top: 12px; }
.guide-hero__title { font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.guide-hero__lead { font-size: 1.125rem; line-height: 1.55; color: var(--ink); }
.guide-hero__meta { font-size: .8125rem; color: var(--soft); }
.guide-hero__actions { margin-top: 20px; }
.guide-hero--page { padding: 24px 32px; gap: 24px; }

.guide-arrow { flex: none; transition: transform .18s cubic-bezier(.2, .7, .2, 1); }
.btn .guide-arrow { margin-left: 8px; }
.btn:hover .guide-arrow { transform: translateX(4px); }

/* ---------- Sommaire du guide : six pages numérotées ---------- */
/* 32 px entre deux sections (charte, grille de 8 px). */
.guide-index > * + *, .guide-index > .guide-cards { margin-top: 32px; }
.guide-cards { list-style: none; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.guide-card {
  position: relative; display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-field); padding: 24px; box-shadow: var(--shadow-1);
  transition: box-shadow .18s cubic-bezier(.2, .7, .2, 1), border-color .18s cubic-bezier(.2, .7, .2, 1);
}
.guide-card:hover, .guide-card:focus-within { border-color: var(--ember); box-shadow: var(--shadow-2); }
.guide-card__num {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--sand); color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums;
}
.guide-card__text > * { margin: 0; }
.guide-card__text > * + * { margin-top: 6px; }
.guide-card__text p { color: var(--soft); font-size: .94rem; line-height: 1.5; }
.guide-card__title {
  font-family: "Inter Tight", system-ui, sans-serif; font-size: 1.0625rem; font-weight: 700; line-height: 1.3;
  text-transform: none; letter-spacing: 0; color: var(--ink);
}
.guide-card__title a { color: inherit; text-decoration: none; }
/* Toute la carte est cliquable, le lien reste le seul élément interactif. */
.guide-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.guide-card:hover .guide-card__title a { color: var(--ember-d); }
.guide-card__text .guide-card__meta { font-size: .8125rem; color: var(--faint); }
.guide-contact { border-top: 1px solid var(--line); padding-top: 24px; }
.guide-contact p { margin: 0; max-width: 72ch; color: var(--soft); }

/* Carte « Guide d'installation » de la page Aide. */
.guide-links { margin: 12px 0 0; padding-left: 22px; }
.guide-links li + li { margin-top: 4px; }

/* ---------- Page du guide ---------- */
.guide-toc__list { list-style: none; padding-left: 0; }
.guide-toc__back { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .875rem; font-weight: 600; }
.guide h3 { margin-top: 24px; }
.guide > ol > li, .guide > ul > li { margin: 8px 0; }

/* Capture d'écran : boîte blanche, légende dessous. */
.guide-figure { margin: 24px 0; max-width: 820px; }
.guide-figure img {
  display: block; width: 100%; height: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-field); box-shadow: var(--shadow-1);
}
.guide-figure figcaption { margin-top: 8px; font-size: .8125rem; line-height: 1.5; color: var(--soft); }
/* Image de remplacement : plus petite, pour ne pas prendre la place d'une vraie capture. */
.guide-figure--placeholder { max-width: 420px; }
.guide-figure--placeholder img { box-shadow: none; border-style: dashed; }

/* Encadré « À savoir » (sable, filet ocre) et « Attention » (tonalité attention). */
.callout { max-width: 72ch; margin: 24px 0; padding: 16px 20px; border-radius: var(--r-field); border-left: 3px solid var(--ochre); background: var(--sand); }
.callout > p { margin: 0; }
.callout > p + p { margin-top: 8px; }
.callout .callout__title { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.callout--warn { background: var(--warn-bg); border-left-color: var(--warn); }
.callout--warn .callout__title { color: var(--warn); }

/* ---------- Page précédente, page suivante ---------- */
.guide-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 24px; }
.guide-pager__link {
  display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 16px 6px 12px;
  background: var(--surface); border: 1px solid #cfc3ab; border-radius: var(--r-field); color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.guide-pager__link:hover { border-color: var(--ember); color: var(--ember-d); text-decoration: none; }
.guide-pager__link:hover .guide-arrow { transform: translateX(-4px); }
.guide-pager__hint { display: block; font-size: .75rem; color: var(--soft); }
.guide-pager__label { display: block; font-weight: 600; line-height: 1.3; }
.guide-pager__next { margin-left: auto; text-align: left; }

@media (max-width: 720px) {
  .guide-hero, .guide-hero--page { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 16px; }
  .guide-hero__illu .illu { width: 128px; }
  .guide-hero__title { font-size: 1.25rem; }
  .guide-hero__lead { font-size: 1rem; }
  .guide-pager { flex-direction: column; align-items: stretch; }
  .guide-pager__next { margin-left: 0; justify-content: space-between; }
  .guide-card { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-arrow, .guide-card, .guide-pager__link { transition: none; }
  .btn:hover .guide-arrow, .guide-pager__link:hover .guide-arrow { transform: none; }
}

/* ---------- Impression et enregistrement en PDF ---------- */
@media print {
  .guide-pager, .guide-nav, .guide-toc__back, .guide-hero__actions, .guide-contact { display: none !important; }
  .guide-hero { background: none; border: 1px solid var(--line); padding: 12pt; margin-bottom: 14pt; break-inside: avoid; }
  .guide-hero::before, .guide-hero::after { display: none; }
  .guide-hero__illu .illu { width: 90pt; }
  .guide-hero__lead { font-size: 11pt; }
  .guide-cards { display: block; }
  .guide-card { border: 0; box-shadow: none; padding: 0 0 10pt; break-inside: avoid; }
  .guide-figure { break-inside: avoid; max-width: 75%; }
  .guide-figure img { box-shadow: none; }
  /* Une image de remplacement n'apporte rien sur papier : seule sa légende est gardée. */
  .guide-figure--placeholder img { display: none; }
  .guide-figure--placeholder figcaption::before { content: "Capture : "; font-weight: 600; }
  .callout { background: none; border: 1px solid var(--line); border-left-width: 3pt; break-inside: avoid; }
  .guide h2, .guide h3 { break-after: avoid; }
  .guide ol li, .guide ul li { break-inside: avoid; }
}