/* Black Olive, page Contact (style « bento ») */
.cx-hero { max-width: var(--pg-max); margin: 0 auto; padding: 48px var(--gutter) clamp(36px, 5vw, 64px); text-align: center;
  background: radial-gradient(ellipse 55% 60% at 50% 30%, rgba(201, 160, 99, .12) 0%, transparent 70%); }
.cx-hero .kicker { justify-content: center; }
.cx-title { margin: 14px 0 0; font-family: var(--font-display); font-weight: 300; line-height: .95; letter-spacing: -.01em; font-size: clamp(3.4rem, 11vw, 9rem); color: var(--cream); text-transform: uppercase; }
.cx-title em { display: block; text-transform: none; font-style: italic; font-weight: 400;
  background: linear-gradient(100deg, #b98f5c 0%, #f1d9a8 45%, #c9a581 70%, #f6e2b8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx-lead { max-width: 52ch; margin: 22px auto 0; color: var(--cream-muted); font-weight: 300; font-size: 1.05rem; line-height: 1.7; }
.cx-pill { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 11px 20px; border-radius: 999px;
  border: 1px solid rgba(201, 160, 99, .4); background: rgba(14, 21, 18, .5); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-muted); }
.cx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; }
.cx-dot.is-open { background: #8fbf6a; box-shadow: 0 0 0 5px rgba(143, 191, 106, .22); }
.cx-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }

/* grille de tuiles */
.cx-bento { max-width: var(--pg-max); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.cx-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 190px; padding: 26px 28px; overflow: hidden;
  border-radius: 24px; border: 1px solid rgba(201, 160, 99, .28); background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); color: var(--cream);
  transition: border-color .35s var(--ease-out), transform .35s var(--ease-out); }
a.cx-tile:hover { border-color: rgba(233, 207, 159, .8); transform: translateY(-3px); }
.cx-k { font-size: .66rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: #e9cf9f; }
.cx-v { font-family: var(--font-display); font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.2; overflow-wrap: anywhere; }
.cx-sub { margin: 0; font-weight: 300; color: var(--cream-muted); font-size: .92rem; max-width: 40ch; }
.cx-go { margin-top: 6px; font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: #e9cf9f; }
.cx-go i { display: inline-block; font-style: normal; transition: transform .35s var(--ease-out); }
a.cx-tile:hover .cx-go i { transform: translateX(6px); }
.cx-ico { position: absolute; top: 22px; right: 24px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(201, 160, 99, .45); background: rgba(14, 21, 18, .55); color: #e9cf9f; }
.cx-ico svg { width: 18px; height: 18px; }
.cx-tile--map { min-height: 380px; padding: 0; justify-content: flex-end; }
.cx-tile--map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.75) contrast(1.05) brightness(.82) sepia(.15); pointer-events: none; }
.cx-tile--map::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 16, 13, .92) 100%); pointer-events: none; }
.cx-map-info { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 26px 28px; }
.cx-hours { margin: 6px 0 0; padding: 0; list-style: none; max-width: 360px; }
.cx-hours li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed rgba(248, 246, 240, .16); font-size: .9rem; color: var(--cream-muted); }
.cx-hours li b { font-weight: 500; color: var(--cream); }
@media (min-width: 900px) {
  .cx-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cx-tile--map { grid-column: 1 / 8; grid-row: 1 / 3; min-height: 420px; }
  .cx-tile--tel { grid-column: 8 / 13; }
  .cx-tile--mail { grid-column: 8 / 13; }
  .cx-tile--hours { grid-column: 1 / 8; }
  .cx-tile--ig { grid-column: 8 / 13; }
}

/* formulaire */
.cx-form-sec { max-width: var(--pg-max); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(64px, 9vw, 120px); display: grid; gap: clamp(28px, 5vw, 72px); scroll-margin-top: calc(var(--pg-top) + 16px); }
@media (min-width: 1000px) { .cx-form-sec { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } .cx-aside { position: sticky; top: calc(var(--pg-top) + 28px); } }
.cx-aside h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; text-transform: uppercase; color: var(--cream); }
.cx-aside h2 em { display: block; text-transform: none; font-style: italic; font-weight: 400; color: #e9cf9f; }
.cx-aside p { margin: 18px 0 0; color: var(--cream-muted); font-weight: 300; max-width: 40ch; line-height: 1.7; }
.cx-steps { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: s; }
.cx-steps li { counter-increment: s; display: flex; gap: 14px; align-items: baseline; color: var(--cream); font-size: .95rem; }
.cx-steps li::before { content: counter(s, decimal-leading-zero); font-size: .7rem; letter-spacing: .2em; color: #e9cf9f; }
.ct-panel { background: #f4f2e8; color: #0e1c17; padding: clamp(24px, 4vw, 48px); border-radius: 28px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.ct-form { display: grid; gap: 18px; }
.ct-two, .ct-resa { display: grid; gap: 18px; }
@media (min-width: 641px) { .ct-two { grid-template-columns: 1fr 1fr; } .ct-resa { grid-template-columns: 1.3fr 1fr .8fr; } }
.ct-resa[hidden] { display: none; }
.ct-field { display: grid; gap: 8px; }
.ct-field label { font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: #566432; }
.ct-field label small { font-size: inherit; letter-spacing: .08em; text-transform: none; color: #5d6a62; font-weight: 400; }
.ct-field input, .ct-field select, .ct-field textarea { width: 100%; font: inherit; font-size: 1rem; color: #0e1c17; background: #fff; border: 1px solid rgba(14, 28, 23, .18); border-radius: 14px; padding: 13px 16px; outline: 0; }
.ct-field textarea { resize: vertical; min-height: 130px; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { border-color: #c9a063; box-shadow: 0 0 0 3px rgba(201, 160, 99, .28); }
.ct-field [aria-invalid="true"] { border-color: #8c3b2a; box-shadow: 0 0 0 3px rgba(140, 59, 42, .15); }
.ct-err { margin: 0; font-size: .82rem; color: #8c3b2a; }
.ct-submit { justify-self: start; margin-top: 6px; }
.ct-note { margin: 0; font-size: .85rem; color: #4a564e; font-weight: 300; }
.ct-note.is-ok { color: #566432; }
@media (prefers-reduced-motion: reduce) { .cx-tile, .cx-go i { transition: none; } a.cx-tile:hover { transform: none; } }