/*
 * Écran Accueil. Valeurs recopiées de la maquette « ReputatioLab v2.dc.html »
 * (écran Accueil, mise en page L : étroit < 1100 px, mobile < 720 px).
 * Les blocs communs (cartes, inscription, écosystème, réseaux, auteur) sont ceux du socle.
 */

/* le filtre des études récentes masque par l'attribut hidden, plus fort que display:flex */
.rl-accueil [hidden] { display: none !important; }

/* ------------------------------------------------------------ l'étude de la semaine */
.rl-hero { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 20px; }

.rl-hero-carte {
  text-align: left; color: inherit; border: 1px solid var(--rl-line); border-radius: 28px;
  background: var(--rl-tile); box-shadow: var(--rl-shadow); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.rl-hero-carte:hover { color: inherit; transform: translateY(-4px); box-shadow: var(--rl-shadow-h); }
.rl-hero-visuel { position: relative; display: block; aspect-ratio: 16/8; overflow: hidden; background: var(--rl-alt); }
.rl-hero-visuel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rl-hero-pastilles { position: absolute; left: 20px; top: 20px; right: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.rl-hero-etiquette {
  padding: 8px 14px; border-radius: 999px; background: rgba(28,39,50,.82); backdrop-filter: blur(8px);
  color: #fff; font: 700 11px/1 var(--rl-font); letter-spacing: .16em; text-transform: uppercase;
}
.rl-hero-corps { padding: 32px 36px 36px; display: flex; flex-direction: column; gap: 16px; }
.rl-hero-titre {
  font: 800 var(--rl-h1-home)/1.02 var(--rl-font); letter-spacing: -.03em; color: var(--rl-ink); text-wrap: balance;
}
.rl-hero-chapo { font: 400 18px/1.6 var(--rl-font); color: var(--rl-soft); max-width: 680px; text-wrap: pretty; }
.rl-hero-pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 6px; }
.rl-hero-signature { display: flex; align-items: center; gap: 10px; font: 400 14px var(--rl-font); color: var(--rl-soft); min-width: 0; }
.rl-hero-signature img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.rl-hero-signature strong { color: var(--rl-ink); font-weight: 600; }
.rl-hero-fleche {
  width: 44px; height: 44px; border-radius: 999px; background: var(--rl-ink); color: var(--rl-bg);
  display: grid; place-items: center; flex: none;
}

/* « Au sommaire » */
.rl-hero-somm {
  border-radius: 28px; padding: 26px 28px; background: var(--rl-tile);
  border: 1px solid var(--rl-line); box-shadow: var(--rl-shadow);
  display: flex; flex-direction: column; gap: 6px;
}
.rl-hero-somm .rl-surtitre { padding-bottom: 4px; }
.rl-hero-somm-note { font: 400 13px/1.4 var(--rl-font); color: var(--rl-soft); padding-bottom: 8px; }
.rl-hero-somm-ligne {
  border-top: 1px solid var(--rl-line); padding: 14px 0; color: var(--rl-ink);
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; gap: 10px; align-items: center;
}
.rl-hero-somm-ligne:hover { color: var(--rl-accent); }
.rl-hero-somm-n { font: 700 12px/1 var(--rl-font); letter-spacing: .14em; color: var(--rl-accent); }
.rl-hero-somm-t { font: 600 15px/1.35 var(--rl-font); color: var(--rl-ink); }
.rl-hero-somm-ligne:hover .rl-hero-somm-t { color: var(--rl-accent); }

/* ------------------------------------------------------------ explorer par rubrique */
.rl-rubriques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rl-recherche-tuile {
  position: relative; overflow: hidden; align-self: start; aspect-ratio: 16/9; padding: 24px;
  border-radius: 22px; border: 1px solid var(--rl-line); background: var(--rl-tile); box-shadow: var(--rl-shadow);
  color: var(--rl-ink); display: flex; flex-direction: column; gap: 8px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.rl-recherche-tuile:hover, .rl-recherche-tuile:focus-within { transform: translateY(-4px); }
.rl-recherche-fleche { font: 700 12px/1 var(--rl-font); letter-spacing: .14em; color: var(--rl-accent); }
.rl-recherche-titre { font: 800 22px/1.1 var(--rl-font); letter-spacing: -.02em; }
.rl-recherche-sous { font: 400 14px var(--rl-font); color: var(--rl-soft); }
.rl-recherche-champ {
  position: absolute; left: 24px; right: 66px; bottom: 18px; height: 36px; box-sizing: border-box; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--rl-line); background: var(--rl-field); color: var(--rl-ink);
  font: 400 14px var(--rl-font); outline: none;
}
.rl-recherche-champ:focus { border-color: #47A1DA; }
.rl-recherche-bouton {
  position: absolute; right: 18px; bottom: 18px; width: 36px; height: 36px; border-radius: 999px; border: 0; padding: 0;
  background: var(--rl-ink); color: var(--rl-bg); display: grid; place-items: center; cursor: pointer;
}

/* ------------------------------------------------------------ étroit (< 1100 px) */
@media (max-width: 1099px) {
  .rl-hero { grid-template-columns: minmax(0, 1fr); }
  .rl-rubriques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ mobile (< 720 px) */
@media (max-width: 719px) {
  .rl-rubriques { grid-template-columns: minmax(0, 1fr); }
  .rl-recherche-tuile { aspect-ratio: auto; min-height: 168px; }
  .rl-hero-corps { padding: 24px 22px 28px; }
}