/* =========================================================
   Pages de rubrique : bandeau framboise aux vagues des plaquettes + cartes des articles
   ========================================================= */

.bandeau {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--fond) linear-gradient(160deg, #e2425f 0%, var(--framboise) 45%, #b01f3e 100%) top / 100% calc(100% - 6px) no-repeat;
  color: #fff;
  padding: clamp(40px, 5.5vw, 76px) 0 clamp(84px, 10vw, 130px);
}
.bandeau .vagues { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.bandeau .vague-bas { position: absolute; left: 0; right: 0; bottom: -1px; z-index: -1; width: 100%; height: clamp(50px, 8vw, 110px); color: var(--fond); }
.bandeau h1 { color: #fff !important; max-width: 15ch; }
.bandeau .chapo { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.55; max-width: 56ch; margin: 18px 0 0; color: rgba(255,255,255,.92); }
.bandeau .compteur { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .875rem; font-weight: 500; }

.fil { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; font-size: .875rem; }
.fil li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.fil a { text-decoration: none; color: inherit; opacity: .85; }
.fil a:hover { opacity: 1; text-decoration: underline; }
.bandeau .fil { color: #fff; }

.rubrique-corps { padding-bottom: 88px; }
.cartes {
  display: grid; gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  margin-top: calc(-1 * clamp(56px, 8vw, 100px));
  position: relative; z-index: 2;
}
.carte {
  --couleur: var(--framboise);
  display: flex; flex-direction: column; gap: 12px;
  background: var(--blanc); border-radius: var(--rayon); padding: 26px 26px 22px;
  text-decoration: none !important; color: var(--texte);
  border: var(--bord);
  transition: transform .45s var(--ressort), border-color .3s var(--ressort), opacity .6s var(--ressort);
  -webkit-tap-highlight-color: transparent;
}
.carte:nth-child(3n+2) { --couleur: var(--vert-fonce); }
.carte:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--couleur) 40%, transparent); color: var(--texte); }
.carte:active { transform: scale(.985); transition-duration: .1s; }
.carte-icone { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--couleur) 10%, white); color: var(--couleur); }
.carte-icone svg { width: 24px; height: 24px; }
.carte h2 { font-family: var(--police-titre); font-weight: 500; font-size: 1.1rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--encre); margin: 0; }
.carte p { font-size: .95rem; line-height: 1.55; color: var(--gris); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carte .lire { margin-top: auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--couleur); }
.carte .lire svg { width: 16px; height: 16px; transition: transform .35s var(--ressort); }
.carte:hover .lire svg { transform: translateX(4px); }

.rubrique-texte { margin-top: 48px; background: var(--blanc); border-radius: var(--rayon); border: var(--bord); padding: clamp(24px, 4.5vw, 56px); }

@media (max-width: 640px) {
  .bandeau { padding-top: 36px; }
  .carte { padding: 22px 20px 18px; border-radius: 18px; }
}

/* Actualités : la date à la place du pictogramme ; message quand il n'y a encore rien */
.carte-date { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--framboise); }
/* Page Actualités : une carte par actualité, avec son image à la une en haut */
.carte-actu { padding: 0; gap: 0; overflow: hidden; --couleur: var(--framboise) !important; }
.carte-actu .carte-image { aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(160deg, #e2425f, var(--framboise) 55%, #a51f3b); }
.carte-actu .carte-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ressort); }
.carte-actu:hover .carte-image img { transform: scale(1.04); }
.carte-actu .carte-corps { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; flex: 1; padding: 22px 24px 24px; }
.carte-actu h2 { font-size: 1.15rem; }
.carte-actu .lire { align-self: center; margin-top: auto; padding-top: 6px; }
.carte-vide { grid-column: 1 / -1; text-align: center; padding: 48px 26px; }
.carte-vide p { -webkit-line-clamp: unset; }