/* Événementiel : mosaïque « Chaque occasion a son décor » (FR /evenementiel, NL /nl/evenementen). */
.occ { --occ-green: #2F3B32; --occ-sauge: #E4E9E1; --occ-terra: #A85532; --occ-gold: #F0D9AE; --occ-shade: 18, 24, 20;
  background: var(--occ-sauge); padding: 70px 0 76px; font-family: "DM Sans", "Work Sans", Arial, sans-serif; color: #20221E; }
.occ-wrap { max-width: 1180px; }
.occ-head { text-align: center; margin-bottom: 44px; }
/* Terracotta #9A4A2B and grey #5F5B51 keep 4.5:1 on the sage background. */
.occ-kicker { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: #9A4A2B; }
.occ-head h2 { margin: 10px 0 12px; font: italic 500 54px/1.05 "Cormorant Garamond", Georgia, serif; color: var(--occ-green); }
.occ-head p:last-child { margin: 0; font-size: 15.5px; color: #5F5B51; }

.occ-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 16px; }
.occ-tile { position: relative; overflow: hidden; display: flex; align-items: flex-end; margin: 0; background: var(--occ-green); color: #fff; isolation: isolate; }
.occ-tile > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.occ-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--occ-shade), .05) 0%, rgba(var(--occ-shade), .25) 40%, rgba(var(--occ-shade), .92) 100%); }
.occ-tile:hover > img, .occ-tile:focus-within > img { transform: scale(1.04); }
/* Every line of text sits on at least 0.74 of dark shade (0.92 at the bottom):
   white and #F0D9AE text then stay above 4.5:1 even over a white photo. */
.occ-text { position: relative; width: 100%; padding: 56px 28px 26px; text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
  background: linear-gradient(180deg, rgba(var(--occ-shade), 0) 0, rgba(var(--occ-shade), .74) 44px, rgba(var(--occ-shade), .92) 100%); }
.occ-text .occ-k { margin: 0; font-size: 10.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--occ-gold); }
.occ-tile h3 { margin: 7px 0 6px; font: 500 31px/1.1 "Cormorant Garamond", Georgia, serif; color: #fff; }
.occ-tile h3 a { color: inherit; text-decoration: none; }
.occ-tile h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.occ-tile h3 a:focus-visible { outline: none; }
.occ-tile:focus-within { outline: 2px solid var(--occ-gold); outline-offset: 3px; }
.occ-text p:not(.occ-k) { margin: 0; max-width: 420px; font-size: 13.5px; line-height: 1.55; color: #F1EEE8; }
.occ-go { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding-bottom: 3px;
  border-bottom: 1px solid rgba(232, 207, 162, .7); color: #F4EEE3; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.occ-go:hover { color: #fff; border-bottom-color: #fff; }
.occ-big { grid-column: span 2; grid-row: span 2; }
.occ-big h3 { font-size: 50px; }
.occ-badge { position: absolute; top: 24px; left: 28px; z-index: 2; padding: 7px 12px; background: var(--occ-terra); color: #fff;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; }

.occ-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 36px; padding: 30px 38px; background: var(--occ-green); color: #F4EEE3; }
.occ-cta-title { margin: 0; font: italic 500 30px/1.2 "Cormorant Garamond", Georgia, serif; color: #fff; }
.occ-cta p:not(.occ-cta-title) { margin: 4px 0 0; font-size: 14px; color: #D3D6D0; }
.occ-cta-btn { flex: none; padding: 16px 28px; background: var(--occ-terra); color: #fff; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .2s ease; }
.occ-cta-btn:hover { background: #8F4628; color: #fff; }
.occ-more { margin: 18px 0 0; text-align: center; font-size: 13px; }
.occ-more a { color: #4A4840; }

@media (max-width: 760px) {
  .occ { padding: 44px 0 52px; }
  .occ-head { margin-bottom: 28px; }
  .occ-head h2 { font-size: 40px; }
  .occ-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .occ-tile { min-height: 240px; }
  .occ-big { grid-column: span 1; grid-row: span 1; min-height: 380px; }
  .occ-big h3 { font-size: 38px; }
  .occ-text { padding: 52px 22px 22px; }
  .occ-tile h3 { font-size: 28px; }
  .occ-cta { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
  .occ-cta-title { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) { .occ-tile > img { transition: none; } .occ-tile:hover > img { transform: none; } }