/* CSS basé sur v1.7 (titre démarre en bas, monte au survol) */
.esoc-card{ position:relative; display:block; width:100%; overflow:hidden; isolation:isolate; }
.esoc-card::before{ content:""; display:block; padding-top:var(--esoc-ratio,60%); }
.esoc-grid4.esoc-fixed .esoc-card::before{ display:none; }
.esoc-grid4.esoc-fixed .esoc-card{ height: var(--esoc-fixed-h,260px); }
.esoc-media, .esoc-overlay{ position:absolute; inset:0; }
.esoc-media img, .esoc-overlay img{ width:100%; height:100%; object-fit:cover; display:block; will-change:transform, opacity; }
.esoc-overlay{ opacity:0; transition: opacity var(--esoc-duration,450ms) ease, transform var(--esoc-duration,450ms) ease; background:transparent; }

.esoc-caption{ position:absolute; left:0; bottom:0; z-index:3; background:transparent; padding:12px 16px; }
.esoc-cap-title{ margin:0 0 6px 0; line-height:1.1; transform:translateY(var(--esoc-title-shift,16px)); transition: transform var(--esoc-duration,450ms) ease; }
.esoc-cap-cta{ position:relative; margin:0; line-height:1.1; opacity:0; transform:translateY(12px); transition: transform var(--esoc-duration,450ms) ease, opacity var(--esoc-duration,450ms) ease; display:inline-flex; align-items:center; gap:.5rem; }

.esoc-grid4 .esoc-card:hover .esoc-cap-cta,
.esoc-grid4 .esoc-card:focus-within .esoc-cap-cta{ opacity:1; transform:translateY(0); }
.esoc-grid4 .esoc-card:hover .esoc-cap-title,
.esoc-grid4 .esoc-card:focus-within .esoc-cap-title{ transform:translateY(0); }

.esoc-arrow-on .esoc-cap-cta .esoc-cta-arrow{ position:relative; display:inline-block; height:1px; width:0; background:currentColor; transition: width var(--esoc-duration,450ms) ease; }
.esoc-arrow-on .esoc-cap-cta .esoc-cta-arrow::after{ content:""; position:absolute; right:-6px; top:-3px; width:6px; height:6px; border-right:1px solid currentColor; border-top:1px solid currentColor; transform:rotate(45deg); }
.esoc-grid4 .esoc-card:hover .esoc-cta-arrow,
.esoc-grid4 .esoc-card:focus-within .esoc-cta-arrow{ width:28px; }

.esoc-grid4{ display:grid; grid-template-columns: repeat(4, 1fr); gap:0; width:100%; }
@media (max-width: 1024px){ .esoc-grid4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .esoc-grid4{ grid-template-columns: 1fr; } }

.esoc-card img[data-scale="1"]{ transform:scale(1); transition:transform var(--esoc-duration,450ms) ease; }
.esoc-effect-fade .esoc-card:hover .esoc-overlay,
.esoc-effect-fade .esoc-card:focus-within .esoc-overlay{ opacity:1; }