/* Vérifie mon idée — « TOP 5 des idées originales » (bloc de la page d'accueil et page
   /idees-business-originales/). Fichier séparé de styles.css, comme tableau-departs.css : seules
   ces deux pages le chargent et aucune autre page n'a à incrémenter ?v=. Même règle de cache que
   styles.css : /assets/* est immutable (1 an), donc toute modification ici impose d'incrémenter
   ?v=N dans index.html et dans le gabarit de scripts/build-top5.js.
   v=1 (20/10/2026) : création. Couleurs et espacements uniquement par variables de styles.css ;
   le jaune de vigilance reste réservé au statut « A vérifier », en aplat. */

/* ---------------------------------------------------------------------------------------------
   Bloc de la page d'accueil
   --------------------------------------------------------------------------------------------- */
.top5 { padding-top: var(--space-2); }
/* Filet à la largeur du contenu : la section prolonge le tableau des départs sans créer de bande
   de couleur qui rejoindrait celle des trois contrôles juste dessous. */
.top5 > .container { border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.top5 .kicker { font-family: var(--font-mono); font-weight: 600; letter-spacing: .07em; font-size: .78rem; text-transform: uppercase; color: var(--color-accent-text); margin: 0 0 var(--space-1); }
.top5 h2 { max-width: 46rem; }
.top5-lead { max-width: 44rem; margin-bottom: var(--space-4); }

.top5-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.top5-item { margin: 0; }

.top5-carte {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: stretch;
  height: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.top5-carte:focus-within { border-color: var(--color-ink); box-shadow: 0 8px 24px rgba(42, 16, 51, .10); }

.top5-rang {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--color-accent-text);
  min-width: 2.4ch;
  align-self: start;
}

.top5-corps { display: flex; flex-direction: column; }
.top5-corps > * { margin-top: 0; }
.top5-meta {
  display: flex; flex-direction: column; gap: .15rem;
  font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: .5rem;
}
.top5-meta span:first-child { color: var(--color-accent-text); font-weight: 600; }
.top5-corps h3 { font-size: var(--step-1); line-height: 1.2; margin-bottom: .5rem; }
.top5-accroche { margin-bottom: var(--space-2); }

.top5-verif { font-size: .9rem; color: var(--color-muted); margin-bottom: var(--space-2); }
.top5-verif strong {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 600; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--color-vigilance); color: var(--color-ink);
  padding: 1px 6px; margin-right: .35rem; border-radius: 2px;
}

.top5-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-bottom: 0; }
.top5-lien { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.top5-lien::after { content: "→"; margin-left: .35em; text-decoration: none; display: inline-block; transition: transform .2s ease; }
.top5-lien:hover::after, .top5-lien:focus-visible::after { transform: translateX(3px); }

.top5-note { margin-top: var(--space-3); font-size: .85rem; color: var(--color-muted); max-width: 46rem; }

@media (min-width: 900px) {
  .top5-list { grid-template-columns: repeat(2, 1fr); }
  /* Rang 1 : pleine largeur, numéro plus grand, deux colonnes de texte. */
  .top5-item:first-child { grid-column: 1 / -1; }
  .top5-item:first-child .top5-carte { padding: var(--space-4); gap: var(--space-2) var(--space-4); border-color: var(--color-ink); }
  .top5-item:first-child .top5-rang { font-size: 4.2rem; }
  .top5-item:first-child h3 { font-size: var(--step-3); max-width: 34rem; }
  .top5-item:first-child .top5-accroche { font-size: var(--step-1); max-width: 40rem; }
}

@media (max-width: 480px) {
  .top5-carte { grid-template-columns: 1fr; padding: var(--space-2) var(--space-2) var(--space-3); }
  .top5-rang { font-size: 1.6rem; }
  .top5-actions .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .top5-carte, .top5-lien::after { transition: none; }
}

/* ---------------------------------------------------------------------------------------------
   Page /idees-business-originales/
   --------------------------------------------------------------------------------------------- */
.top5-fiche { max-width: 60rem; }
section[id] { scroll-margin-top: 5.5rem; }

.top5-fiche-rang {
  display: flex; align-items: baseline; gap: .8rem;
  font-family: var(--font-mono); font-weight: 600; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-accent-text); margin: 0 0 var(--space-1);
}
.top5-fiche-rang > span[aria-hidden] { font-size: 2.2rem; line-height: 1; letter-spacing: -.02em; }
.top5-fiche h2 { max-width: 44rem; }
.top5-fiche-accroche { font-size: var(--step-1); max-width: 44rem; margin-bottom: var(--space-3); }

.top5-dl { display: grid; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); }
.top5-dl > div { border-top: 1px solid var(--color-border); padding-top: var(--space-1); }
.top5-dl dt { font-family: var(--font-mono); font-weight: 600; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: .3rem; }
.top5-dl dd { margin: 0; }
@media (min-width: 760px) {
  .top5-dl { grid-template-columns: 1fr 1fr; }
}

.top5-reserves { max-width: 44rem; margin-bottom: var(--space-3); background: var(--color-bg); border: 1px solid var(--color-border); border-left: 4px solid var(--color-vigilance); }
.top5-reserves p { margin: 0; }
.top5-reserves p + p { margin-top: .4rem; }

.top5-sommaire { align-self: start; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); }
.top5-sommaire-titre { font-family: var(--font-mono); font-weight: 600; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 var(--space-1); }
.top5-sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.top5-sommaire a { display: flex; gap: .8rem; align-items: baseline; color: var(--color-ink); font-weight: 600; text-decoration: none; }
.top5-sommaire a:hover, .top5-sommaire a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.top5-som-rang { font-family: var(--font-mono); font-weight: 600; color: var(--color-accent-text); }