/* guides.css : liste des guides /guides/ */

.page-hero .tag-list { justify-content: center; margin-top: var(--s-1); }
.sec-guides { padding-top: var(--s-8); }

/* Vignette illustrée : teinte du thème, pastilles décoratives, pictogramme */
.guide-thumb { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--tint); aspect-ratio: 16 / 9; }
.guide-thumb::before, .guide-thumb::after { content: ""; position: absolute; border-radius: 50%; background: var(--accent); opacity: 0.18; }
.guide-thumb::before { width: 60%; aspect-ratio: 1; top: -25%; right: -15%; }
.guide-thumb::after { width: 30%; aspect-ratio: 1; bottom: -12%; left: -6%; opacity: 0.28; }
.il { position: relative; z-index: 1; width: 100%; height: 100%; padding: var(--s-2); }
.il-w { fill: var(--c-bg); }
.il-sh { fill: var(--c-ink); opacity: 0.07; }
.il-l { fill: var(--c-ph-2); }
.il-k { fill: var(--c-ink); }
.il-a { fill: var(--accent); }
.il-a2 { fill: var(--tint); }
.il-ia { fill: var(--c-ia); }
.il-o { fill: var(--c-agence); }
.il-r { fill: var(--c-dot-red); }
.il-g { fill: var(--c-dot-green); }
.il-ring { fill: none; stroke: var(--c-ia); stroke-width: 3; }
.il-ring-w { fill: none; stroke: var(--c-bg); stroke-width: 2; stroke-dasharray: 4 4; }
.il-sk, .il-sk-a { fill: none; stroke: var(--c-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.il-sk-sm { stroke: var(--c-bg); stroke-width: 2; }
.il-sk-a { stroke: var(--accent); }

.guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-1h); font-size: var(--fs-14); color: var(--c-ink-3); }

/* Guide à la une */
.guide-featured { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--s-4); }
.guide-featured .guide-thumb { aspect-ratio: 16 / 9; }
.guide-card .guide-thumb { aspect-ratio: 16 / 9; }
.guide-featured-txt { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; padding: var(--s-3); }
.guide-featured .h2 a { color: inherit; text-decoration: none; }
.guide-featured .h2 a:hover { color: var(--c-ia); }
.guide-lead { color: var(--c-ink-2); font-size: var(--fs-18); }
.guide-toc-title { font-family: var(--f-title); font-weight: 700; font-size: var(--fs-14); margin-top: var(--s-1); }
.guide-toc { display: flex; flex-direction: column; gap: var(--s-1); counter-reset: toc; margin-bottom: var(--s-1); }
.guide-toc li { display: flex; gap: var(--s-1h); color: var(--c-ink-2); font-size: var(--fs-14); counter-increment: toc; }
.guide-toc li::before { content: counter(toc); flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c-ia-soft); color: var(--c-ia-strong); font-weight: 700; font-size: var(--fs-12); display: flex; align-items: center; justify-content: center; }

/* Cartes des autres guides : toute la carte est cliquable */
.guides-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.guide-card { position: relative; display: flex; flex-direction: column; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.guide-card:hover { border-color: var(--c-ia); box-shadow: var(--shadow-soft); }
.guide-card:focus-within { border-color: var(--c-ia); }
.guide-body { flex: 1; display: flex; flex-direction: column; gap: var(--s-1h); padding: var(--s-3); }
.guide-body > p:not(.guide-meta) { color: var(--c-ink-2); font-size: var(--fs-14); }
.guide-title { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-20); line-height: 1.25; }
.guide-title a { color: inherit; text-decoration: none; }
.guide-title a::after { content: ""; position: absolute; inset: 0; }
.guide-card:hover .guide-title a { color: var(--c-ia); }
.guide-more { margin-top: auto; display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 600; font-size: var(--fs-14); color: var(--c-ia); }
.guide-card:hover .guide-more .ic { transform: translateX(4px); }
.guide-more .ic { transition: transform .2s; }

.guides-tools { margin-top: var(--s-6); }

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

@media (min-width: 641px) {
  .sec-guides { padding-top: var(--s-10); }
  .guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-featured-txt { padding: var(--s-5); }
}

@media (min-width: 1101px) {
  .guide-featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .guide-featured .guide-thumb { aspect-ratio: auto; height: 100%; }
  .guide-featured-txt { padding: var(--s-6); justify-content: center; }
  .guides-grid { gap: var(--s-4); }
  .guide-body { padding: var(--s-4); }
}