/* ══════════════════════════════════════════════════════════════
   TUILES PUBLICATIONS — grille bento partagée
   Reprise fidèle du langage de la page /publications pour que la
   section « Dernières publications » de l'accueil ait EXACTEMENT la
   même présentation (grande tuile-cover + 2 tuiles image).
   ⚠ Source miroir : les mêmes règles vivent dans publications.css.
   Toute évolution du visuel des tuiles doit être répercutée dans
   les DEUX fichiers.
   ══════════════════════════════════════════════════════════════ */

/* — Étiquettes de catégorie : un seul registre, l'accent — */
.pub-card-label,
.pub-card-label--actu,.pub-card-label--analyse,.pub-card-label--deal{
  background:none;border-radius:0;padding:0;
  font-family:var(--mu);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* — GRILLE BENTO — la 1re publication en grande tuile-cover image,
   les 2 suivantes en tuiles image compactes. — */
.pub-grid{display:grid;grid-template-columns:1.3fr 1fr;
  grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);
  height:clamp(460px,67vh,660px);min-height:0;margin:0}
.pub-grid--flat{grid-template-columns:repeat(2,1fr)}
/* tuile « À venir » — placeholder PREMIUM : se fond dans le fond (même
   teinte navy, presque transparente), voile dépoli + léger halo d'accent
   en haut à droite + balayage lumineux diagonal très lent qui signale
   « en préparation ». Pas un lien : pas de survol. */
.pub-card.pub-card--soon{position:relative;overflow:hidden;cursor:default;
  justify-content:flex-end;
  border:1px solid rgba(247,245,243,.055);
  box-shadow:inset 0 1px 0 rgba(247,245,243,.05);
  backdrop-filter:blur(8px) saturate(1.1);
  -webkit-backdrop-filter:blur(8px) saturate(1.1)}
.pub-card.pub-card--soon,.pub-card.pub-card--soon:hover{
  background:
    radial-gradient(130% 130% at 100% 0%,rgba(139,163,217,.08),transparent 55%),
    linear-gradient(155deg,rgba(44,58,84,.26),rgba(19,27,42,.12))}
/* balayage lumineux diagonal, très lent (les deux tuiles désynchronisées) */
.pub-card--soon::after{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(191,205,240,.06) 50%,transparent 66%);
  transform:translateX(-70%);
  animation:soonSheen 6s var(--ease) infinite}
.pub-card--soon+.pub-card--soon::after{animation-delay:-3s}
@keyframes soonSheen{0%{transform:translateX(-70%)}60%,100%{transform:translateX(70%)}}
.pub-card--soon>*{position:relative;z-index:2}
/* étiquette « À venir » : MÊME forme que « Analyses » sur la tuile-cover
   (chip rectangulaire dépoli) — le style de base .pub-card .pub-card-label
   s'applique déjà ; on ne touche à rien. */
@media(prefers-reduced-motion:reduce){
  .pub-card--soon::after{animation:none}}
.pub-grid>*{min-height:0;overflow:hidden}
.pub-grid>*{transition:opacity .45s var(--ease)}
.pub-grid:hover>a:not(:hover){opacity:.6}
/* grisé SIMULTANÉ : on neutralise le délai d'apparition (data-d) sur les
   tuiles, sinon il décale aussi l'estompage au survol (effet progressif
   indésirable) → toutes les autres tuiles se grisent en même temps */
.pub-grid>a[data-d]{transition-delay:0s}
/* …et comme la transition est ainsi confisquée par le survol, l'ARRIVÉE des
   tuiles se joue en keyframes, à la grammaire commune de la page (même durée,
   même courbe, même distance, même cascade que les autres bandeaux). */
.pub-grid>[data-r].in{animation:rvUp var(--rv-dur) var(--rv-e) var(--rv-d,0s) backwards}
/* grande tuile-cover */
.pub-cover{grid-row:1/-1;position:relative;display:flex;overflow:hidden;
  color:inherit;text-decoration:none}
.pub-cover-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform 1.2s var(--ease);filter:saturate(.9)}
.pub-cover:hover .pub-cover-img{transform:scale(1.045)}
.pub-cover-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,27,42,.4) 0%,rgba(19,27,42,.06) 26%,rgba(19,27,42,.58) 60%,rgba(19,27,42,.96) 100%)}
.pub-cover-content{position:relative;z-index:2;margin-top:auto;width:100%;
  padding:clamp(14px,1.6vw,22px);display:flex;flex-direction:column}
.pub-cover-meta{display:flex;align-items:baseline;justify-content:flex-start;
  gap:12px;margin-bottom:8px}
.pub-cover-title{font-family:var(--mu);font-weight:400;
  font-size:clamp(19px,1.7vw,27px);line-height:1.24;margin:0;
  color:rgba(247,245,243,.85);transition:color .3s}
.pub-cover:hover .pub-cover-title{color:var(--accent)}
.pub-cover-bottom{display:none}
/* tuiles droites : mini-covers — image plein cadre + voile navy + titre */
.pub-card{position:relative;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;
  background:var(--navy-2);border:none;border-radius:0;box-shadow:none;
  padding:clamp(12px,1.4vh,16px) clamp(14px,1.3vw,20px);transform:none;
  transition:opacity var(--fondu) var(--fondu-e)}
.pub-card:hover{transform:none;box-shadow:none;background:var(--navy-2)}
.pub-card-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:saturate(.9);
  transition:filter .6s var(--ease),transform .7s var(--ease)}
.pub-card:hover .pub-card-img{filter:none;transform:scale(1.05)}
.pub-card-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,27,42,.4) 0%,rgba(19,27,42,.06) 26%,rgba(19,27,42,.58) 60%,rgba(19,27,42,.96) 100%);
  transition:opacity .6s var(--ease)}
.pub-card:hover .pub-card-scrim{opacity:.6}
.pub-card>.pub-card-cat,.pub-card>.pub-card-title{position:relative;z-index:2}
.pub-card .pub-card-cat{margin-bottom:6px;justify-content:flex-start}
/* catégorie : puce dépolie angulaire — lisible sur tout fond */
.pub-card .pub-card-label,.pub-cover .pub-card-label{
  position:absolute;z-index:2;padding:5px 11px 4px;
  color:var(--accent-2);background:rgba(19,27,42,.34);
  border:1px solid rgba(247,245,243,.16);
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15)}
.pub-card .pub-card-label{top:clamp(12px,1.4vh,16px);left:clamp(14px,1.3vw,20px)}
.pub-cover .pub-card-label{top:clamp(14px,1.6vw,22px);left:clamp(14px,1.6vw,22px)}
.pub-card .pub-card-bottom{display:none}
.pub-card-cat{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:12px}
/* date : traitement « estampille » premium, ALIGNÉ sur /publications
   (.pub-card-date de publications.css) et /veille — capitales mono, graisse
   marquée, crème .72 → bien lisible même posée sur la cover (le gris .4/300
   d'avant se noyait dans l'image). */
.pub-card-date{font-family:var(--mu);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(247,245,243,.72);
  white-space:nowrap}
.pub-card-title{font-family:var(--mu);font-weight:400;
  font-size:clamp(17px,1.35vw,21px);line-height:1.32;color:var(--cream);
  margin:0 0 10px;max-width:none;transition:color .3s}
.pub-card:hover .pub-card-title{color:var(--accent)}
.pub-card-desc{display:none}
.pub-card-title{font-size:clamp(15px,1.15vw,19px);margin:0 0 12px;
  font-weight:400;color:rgba(247,245,243,.85);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pub-card-bottom{display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:0;border-top:none}
.pub-card-author{font-family:var(--mu);font-size:11px;font-weight:300;
  letter-spacing:.06em;text-transform:none;color:rgba(247,245,243,.4)}
.pub-card-arrow{width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(247,245,243,.15);display:flex;align-items:center;
  justify-content:center;color:rgba(247,245,243,.5);flex-shrink:0;
  transition:all .35s var(--ease)}
.pub-card-arrow svg{width:13px;height:13px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pub-card:hover .pub-card-arrow{background:var(--accent);border-color:var(--accent);color:var(--navy)}
.pub-card-line{display:none}

/* — Responsive grille bento : en pile, la hauteur redevient naturelle — */
@media(max-width:820px){
  .pub-grid{grid-template-columns:1fr;grid-template-rows:none;height:auto}
  .pub-cover{grid-row:auto;min-height:clamp(220px,40vw,300px)}
  .pub-card{min-height:clamp(200px,38vw,280px)}
}