/* Maquettes du formulaire de contact (propositions 1 et 2, 29/10/2026) — pages hors menu, non indexées */
.maq-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; padding: 10px 16px; background: var(--gold); color: var(--ink); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.maq-bar a { text-decoration: underline; text-underline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Proposition 1 : le carton d'invitation ---- */
.maq1 { position: relative; padding: clamp(120px, 14vw, 180px) 0 clamp(70px, 8vw, 120px); background: var(--cacao); color: var(--ink); overflow: hidden; }
.maq1__bg { position: absolute; inset: 0; }
.maq1__bg img { width: 100%; height: 100%; object-fit: cover; }
.maq1::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 29, 22, .62), rgba(42, 29, 22, .82)); }
.maq1__wrap { position: relative; }
.maq1__card { position: relative; max-width: 920px; margin: 0 auto; padding: clamp(34px, 5vw, 72px); background: var(--paper); box-shadow: 0 70px 140px -50px rgba(0, 0, 0, .75); }
.maq1__card::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(184, 149, 90, .65); pointer-events: none; }
.maq1__script { display: block; text-align: center; font-size: clamp(2.6rem, 5vw, 4.6rem); }
.maq1__title { margin: 8px 0 0; text-align: center; font-family: var(--f-serif); font-weight: 300; font-size: clamp(2.4rem, 4.6vw, 4.4rem); line-height: 1; letter-spacing: -.01em; }
.maq1__title em { font-style: italic; color: var(--caramel); }
.maq1__lead { max-width: 620px; margin: 22px auto 0; text-align: center; font-family: var(--f-serif); font-size: 1.22rem; line-height: 1.45; color: var(--cacao); }
.form--carton { margin-top: 44px; gap: 18px 20px; }
.form--carton .form__sect { margin: 14px 0 0; padding-bottom: 8px; border-bottom: 1px solid rgba(184, 149, 90, .5); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.form--carton label { color: var(--cacao); }
.form--carton input, .form--carton select, .form--carton textarea { padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 2px; }
.form--carton input:focus, .form--carton select:focus, .form--carton textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 149, 90, .18); }
.form--carton .consent { color: rgba(42, 29, 22, .78); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.tiles label { position: relative; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 108px; padding: 16px 10px; border: 1px solid var(--line); background: #fff; text-align: center; letter-spacing: .12em; font-size: .64rem; color: var(--ink); cursor: pointer; transition: background .3s, border-color .3s, color .3s, transform .3s; }
.tiles label:hover { transform: translateY(-2px); border-color: var(--gold); }
.tiles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tiles svg { width: 30px; height: 30px; fill: none; stroke: var(--caramel); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.tiles label:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tiles label:has(input:checked) svg { stroke: var(--gold-2); }
.tiles label:has(input:focus-visible) { outline: 1.5px solid var(--gold); outline-offset: 3px; }
.btn--wide { width: 100%; justify-content: center; padding-top: 20px; padding-bottom: 20px; }
.maq1__note { margin: 12px 0 0; text-align: center; }
.maq1__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .78rem; letter-spacing: .06em; color: var(--cacao); }
.maq1__foot a { text-decoration: underline; text-underline-offset: 4px; }
.maq1 .form__ok { margin-top: 30px; }
@media (max-width: 620px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .maq1 { padding-top: 110px; } .maq1__card { padding: 30px 20px; } }

/* ---- Proposition 2 : la lettre ---- */
.form--lettre { grid-template-columns: 1fr; gap: 26px; }
.lettre { margin: 0; font-family: var(--f-serif); font-weight: 300; font-size: clamp(1.5rem, 2.3vw, 2.15rem); line-height: 1.7; color: var(--ink); }
.form--lettre .inl { display: inline; margin: 0 .1em; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.form--lettre .inl input, .form--lettre .inl select { display: inline-block; width: auto; min-width: 8.5ch; max-width: 100%; padding: 0 .35em 4px; margin: 0; background: rgba(184, 149, 90, .1); border: 0; border-bottom: 1.5px solid var(--gold); font: inherit; font-style: italic; color: var(--caramel); text-align: center; vertical-align: baseline; field-sizing: content; }
.form--lettre .inl select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 1.2em; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - .75em) 55%, calc(100% - .45em) 55%; background-size: .3em .3em; background-repeat: no-repeat; }
.form--lettre .inl input:focus, .form--lettre .inl select:focus { outline: none; border-bottom-color: var(--ink); background-color: rgba(184, 149, 90, .2); }
.form--lettre .inl input::placeholder { color: rgba(148, 112, 79, .55); font-style: italic; }
.form--lettre .inl--n input { min-width: 4.5ch; }
.form--lettre .inl--w input { min-width: 14ch; }
.form--lettre .inl input[type="date"] { min-width: 11ch; }
.form--lettre .lettre__msg { margin-top: 10px; }
.form--lettre .lettre__msg textarea { padding: 18px 20px; min-height: 160px; background: repeating-linear-gradient(transparent 0 38px, rgba(42, 29, 22, .12) 38px 39px); background-position: 0 14px; line-height: 39px; border: 0; border-bottom: 1px solid rgba(42, 29, 22, .3); font-size: 1.2rem; }
@media (max-width: 620px) { .lettre { font-size: 1.35rem; line-height: 1.8; } }
