@layer tokens, base, layout, components, pages, utilities;
@layer components{
/* Carte : une seule famille. Structure : .card > .card__media (photo) + .card__body > .card__kicker, .card__title, .card__text, .card__meta ; .card__tab (flèche de la variante --cta).
   Variantes : --cta (aplat rouge, flèche), --photo (photo en haut, texte dessous), --portrait (couverture de livre, hauteur libre), --row (miniature à gauche, texte à droite).
   Réglages : --card-gap, --card-pad, --card-bg, --card-ink, --card-min-h, --card-ratio, --card-media-w, --card-media-h, --card-media-bg,
   --card-title-size, --card-title-weight, --card-title-lh, --card-text-size, --card-text-ink, --card-kicker-size, --card-kicker-ink. */
.card{position:relative;display:flex;flex-direction:column;min-width:0;color:var(--card-ink,inherit);background:var(--card-bg,transparent)}
.card:hover{text-decoration:none}
.card__media{display:block;overflow:hidden;background:var(--card-media-bg,var(--c-sand))}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{display:block;margin-top:var(--card-gap,var(--space-4));padding:var(--card-body-pad,0)}
.card__kicker{display:block;font-size:var(--card-kicker-size,12px);line-height:1.3;color:var(--card-kicker-ink,var(--c-ink-soft))}
.card__title{display:block;margin:var(--space-1) 0 0;font-size:var(--card-title-size,20px);font-weight:var(--card-title-weight,600);line-height:var(--card-title-lh,1.25)}
.card__text{display:block;margin-top:var(--space-2);font-size:var(--card-text-size,15px);line-height:1.55;color:var(--card-text-ink,var(--c-ink-soft))}
.card__meta{display:block;margin-top:var(--space-1);font-size:14px;color:var(--c-ink-soft)}
.card:hover .card__title{text-decoration:underline;text-underline-offset:4px}
.card--photo .card__media{aspect-ratio:var(--card-ratio,4/5)}
.card--portrait .card__media{display:flex;align-items:flex-end;height:var(--card-media-h,auto);background:transparent}
.card--portrait:hover .card__title{text-underline-offset:3px}
.card--portrait .card__media img{height:auto;max-height:100%;object-fit:contain;object-position:bottom}
.card--row{display:grid;grid-template-columns:var(--card-media-w,104px) minmax(0,1fr);column-gap:var(--card-gap,var(--space-4));align-items:start}
.card--row .card__media{aspect-ratio:var(--card-ratio,1/1)}
.card--row .card__body{margin-top:0}
.card--row:not(:has(.card__media)){display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;gap:6px 14px;padding:var(--card-pad,11px 0)}
.card--reverse .card__media{order:2}
.card--reverse.card--row{grid-template-columns:minmax(0,1fr) var(--card-media-w,104px)}
@media (max-width:600px){.card--row-s{display:grid;grid-template-columns:var(--card-media-w,104px) minmax(0,1fr);column-gap:var(--space-4);align-items:start}
.card--row-s .card__media{aspect-ratio:1/1}
.card--row-s .card__body{margin-top:0}
}
.card--cta{--card-ink:var(--c-white);--card-kicker-ink:var(--c-white);--card-text-ink:var(--c-white);--card-title-size:32px;--card-title-weight:300;--card-title-lh:1.15;--card-text-size:14px;
  justify-content:space-between;min-height:var(--card-min-h,360px);background:var(--card-bg,var(--c-brand));padding:var(--card-pad,var(--space-5) var(--space-5) 88px);transition:background .15s}
.card--cta:hover{background:var(--c-brand-strong)}
.card--cta .card__kicker{font-size:14px}
.card--cta .card__body{margin-top:0}
.card--cta:hover .card__title{text-decoration:none}
.card--cta .card__text{margin-top:var(--space-3)}
.card--cta .card__media{aspect-ratio:var(--card-ratio,3/2)}
.card--cta:has(.card__media){--card-pad:0 0 56px;--card-min-h:0;--card-title-size:26px;justify-content:flex-start}
.card--cta .card__media+.card__body{padding:20px var(--space-5) var(--space-5)}
.card__tab{position:absolute;left:0;bottom:0;width:56px;height:56px;background:var(--c-white);color:var(--c-ink)}
.card__tab::before{content:"";position:absolute;left:19px;top:27.25px;width:18px;height:1.5px;background:currentColor}
.card__tab::after{content:"";position:absolute;left:28.5px;top:24.5px;box-sizing:border-box;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
@media (max-width:820px){.card--cta{--card-min-h:260px}
}
@media (prefers-reduced-motion:reduce){.card--cta{transition:none}
}
.card--photo .card__media{max-width:var(--card-media-max,none)}
}