/* ============================================================
   Accueil en cards (index.html).
   ============================================================ */

/* courbes de niveau : un seul fond derrière le hero ET les cards
   (gris moyen : lisible en clair comme en sombre) */
.topo-wrap{ position:relative; isolation:isolate; }
.topo-wrap::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url(../img/topo-main.svg) center / cover no-repeat; opacity:.34;
  -webkit-mask-image:linear-gradient(#000 82%, transparent);
  mask-image:linear-gradient(#000 82%, transparent);
}

.cards-hero{ max-width:none; padding-top:clamp(48px,9vw,120px); padding-bottom:clamp(36px,6vw,72px); }
.cards-hero h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(46px,11vw,150px); line-height:.92; letter-spacing:.08em;
  margin-bottom:28px;
}
.cards-hero p.lead{ font-size:clamp(17px,1.6vw,20px); }

.cards-section{ padding:0 clamp(16px,4vw,40px) 90px; }

/* grille sans cadre extérieur : seules les lignes entre les cards sont tracées */
.cards{
  --card-line:color-mix(in srgb, var(--ink) 30%, var(--paper));
  display:grid; grid-template-columns:repeat(3, 1fr);
}
.card{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  min-height:clamp(220px,24vw,320px); padding:22px 22px 20px;
  border-right:1px solid var(--card-line); border-bottom:1px solid var(--card-line);
  color:var(--ink); text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.card:nth-child(3n){ border-right:none; }
.card:nth-last-child(-n+3){ border-bottom:none; }

.card-num{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); letter-spacing:.06em; }
.card-title{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(24px,2.7vw,38px); line-height:1.05; letter-spacing:.12em; margin:0; text-wrap:balance; overflow-wrap:anywhere;
}
.card-desc{ margin:auto 0 0; font-size:14.5px; color:var(--ink-soft); max-width:44ch; }
.card-more{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; }

/* les courbes traversent le hero et les cards, mais s'estompent en fondu autour du
   texte : derrière chaque bloc, un aplat de la couleur du papier aux bords diffus */
.card-num, .card-title, .card-desc, .card-more,
.cards-hero .eyebrow, .cards-hero .lead{ position:relative; }
.cards-hero .eyebrow, .cards-hero .lead{ width:fit-content; }
.card-num::before, .card-title::before, .card-desc::before, .card-more::before,
.cards-hero .eyebrow::before, .cards-hero .lead::before{
  content:''; position:absolute; inset:-2px -6px; z-index:-1; pointer-events:none;
  background:var(--paper); box-shadow:0 0 18px 14px var(--paper); border-radius:10px;
  transition:opacity .2s ease;
}

.card:hover, .card:focus-visible{ background:var(--ink); color:var(--paper); outline:none; }
.card:hover .card-num, .card:hover .card-desc,
.card:focus-visible .card-num, .card:focus-visible .card-desc{
  color:color-mix(in srgb, var(--paper) 70%, var(--ink));
}
.card:hover > ::before, .card:focus-visible > ::before{ opacity:0; }

@media (max-width:900px){
  .cards{ grid-template-columns:repeat(2, 1fr); }
  .card:nth-child(n){ border-right:1px solid var(--card-line); border-bottom:1px solid var(--card-line); }
  .card:nth-child(2n){ border-right:none; }
  .card:nth-last-child(-n+2){ border-bottom:none; }
}
@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
  .card:nth-child(n){ border-right:none; border-bottom:1px solid var(--card-line); }
  .card:last-child{ border-bottom:none; }
}

@media (prefers-reduced-motion: reduce){
  .card{ transition:none; }
}