/* =========================================================
   Page Contact et page Merci
   Tailles : Boska = section (titre) / card (types d'événement) ;
   Clash = small (intitulés de champ, aides, erreurs) / body (saisie) / label (intitulé de section)
   ========================================================= */

/* Pas de hero : la barre de navigation est pleine dès le départ, le contenu commence dessous */
.contact { padding-top: calc(5.25rem + var(--section-y) * .55); --bg: var(--chalk); --error: var(--bordeaux); } /* erreurs : bordeaux de la palette */
.contact__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.contact__aside { display: grid; gap: 1.6rem; align-content: start; position: sticky; top: 8rem; }
.contact__aside .section__label { margin-bottom: 0; }
.contact__coords { display: grid; gap: .15rem; margin-top: .4rem; color: var(--ink); }
.contact__coords a { transition: opacity .3s; }
.contact__coords a:hover { opacity: .6; }

/* ---------- Formulaire ---------- */
.form { display: grid; gap: clamp(1.8rem, 3vw, 2.4rem); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2rem; }
.field { display: grid; gap: .55rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.field__label { color: var(--ink-soft); letter-spacing: .14em; }
.field__label span { color: var(--taupe); }
.field__control {
  width: 100%; padding: .55rem 0 .7rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-body); line-height: 1.5;
  transition: border-color .3s var(--ease);
}
.field__control::placeholder { color: color-mix(in srgb, var(--ink) 40%, transparent); }
.field__control:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.field__control:focus { outline: none; border-color: var(--ink); }
.field__control:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--ink); }
textarea.field__control { resize: vertical; min-height: 7.5rem; }

/* Listes déroulantes : flèche fine, comme le chevron de la navigation */
select.field__control {
  appearance: none; cursor: pointer; padding-right: 2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23181611' stroke-width='1.3'/%3E%3C/svg%3E") right .2rem center / .75rem auto no-repeat;
}
select.field__control:has(option[value=""]:checked) { color: color-mix(in srgb, var(--ink) 40%, transparent); }
select.field__control option { color: var(--night); }

/* Type d'événement : trois choix en Boska, le choix actif est plein et souligné */
.choices { display: flex; flex-wrap: wrap; gap: .4rem clamp(1.4rem, 3vw, 2.4rem); }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice .t-card {
  display: inline-block; padding-bottom: .25rem; color: color-mix(in srgb, var(--ink) 45%, transparent);
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: color .4s var(--ease), background-size .5s var(--ease);
}
.choice:hover .t-card { color: var(--ink-soft); }
.choice input:checked ~ .t-card { color: var(--ink); background-size: 100% 1px; }
.choice input:focus-visible ~ .t-card { outline: 1px solid var(--accent); outline-offset: 4px; }

/* Entreprise : seulement pour un séminaire */
.field--company { display: none; }
.form:has(input[name="type"][value="seminaire"]:checked) .field--company { display: grid; }

/* Date précise ou mois + année */
.field--date { gap: 1rem; }
.date-exact { display: grid; gap: .55rem; position: relative; }
.date-approx { display: none; }
.field--date:has(input[name="sans_date"]:checked) .date-exact { display: none; }
.field--date:has(input[name="sans_date"]:checked) .date-approx { display: grid; }
.date-approx { gap: 1rem; border: 0; padding: 0; margin: .6rem 0 0; min-width: 0; }
.date-approx legend { padding: 0; margin-bottom: 1rem; }
.date-approx .form__row > div { display: grid; gap: .3rem; position: relative; }
.field__sublabel { color: var(--ink-soft); }

/* Case à cocher */
.check { display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; color: var(--ink-soft); justify-self: start; }
.check input { appearance: none; width: 1rem; height: 1rem; margin: 0; border: 1px solid currentColor; display: grid; place-items: center; cursor: pointer; }
.check input::after { content: ""; width: .5rem; height: .5rem; background: var(--ink); transform: scale(0); transition: transform .25s var(--ease); }
.check input:checked::after { transform: scale(1); }
.check:hover { color: var(--ink); }

/* Erreurs */
.field__error { color: var(--error); font-size: var(--fs-small); line-height: 1.5; }
.field__error[hidden] { display: none; }
[aria-invalid="true"].field__control { border-color: var(--error); }
.form__alert { padding: 1rem 1.2rem; border-left: 2px solid var(--error); background: color-mix(in srgb, var(--error) 7%, transparent); color: var(--ink); max-width: none; }

.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { display: grid; gap: 1.1rem; justify-items: start; padding-top: .4rem; }
.contact .btn { --btn-fill: var(--night); --btn-ink: var(--chalk); }
.contact .btn[disabled] { opacity: .5; pointer-events: none; }
.form__note { color: var(--ink-soft); max-width: 34em; }
.form__note a { text-decoration: underline; text-underline-offset: .25em; }

/* ---------- Calendrier (remplace le sélecteur de date du navigateur) ---------- */
.datepick__btn { text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.datepick__btn.is-empty { color: color-mix(in srgb, var(--ink) 40%, transparent); }
.datepick__btn svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: var(--ink-soft); stroke-width: 1.3; }
.datepick__pop {
  position: absolute; z-index: 20; left: 0; top: calc(100% + .5rem); width: min(22rem, 100%);
  padding: 1.2rem; background: var(--linen, #F3EDE6); color: var(--night);
  box-shadow: 0 24px 50px -24px rgba(24, 22, 17, .45);
  opacity: 0; transform: translateY(-.5rem); visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.datepick__pop.is-open { opacity: 1; transform: none; visibility: visible; }
.datepick__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.datepick__month { letter-spacing: .14em; }
.datepick__nav { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; transition: background-color .25s; }
.datepick__nav:hover { background: rgba(24, 22, 17, .07); }
.datepick__nav:disabled { opacity: .25; pointer-events: none; }
.datepick__nav span { width: .45rem; height: .45rem; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateX(15%) rotate(45deg); }
.datepick__nav--next span { transform: translateX(-15%) rotate(-135deg); }
.datepick__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .15rem; text-align: center; }
.datepick__dow { color: var(--taupe); padding-bottom: .35rem; }
.datepick__day { aspect-ratio: 1; border-radius: 50%; font-size: var(--fs-small); transition: background-color .2s, color .2s; }
.datepick__day:hover { background: rgba(24, 22, 17, .08); }
.datepick__day.is-today { box-shadow: inset 0 0 0 1px rgba(24, 22, 17, .3); }
.datepick__day[aria-pressed="true"] { background: var(--night); color: var(--chalk); }
.datepick__day:disabled { opacity: .28; pointer-events: none; }

/* ---------- Listes déroulantes et suggestions de lieu ----------
   Même panneau que le calendrier : beige très clair, ombre douce, angles droits. */
.has-pop { position: relative; }
.select__native { position: absolute; inset: auto 0 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; }
.select__btn { text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.select__btn.is-empty { color: color-mix(in srgb, var(--ink) 40%, transparent); }
.select__btn::after {
  content: ""; flex: none; width: .4rem; height: .4rem; margin: 0 .3rem .25rem 0;
  border-right: 1.3px solid var(--ink-soft); border-bottom: 1.3px solid var(--ink-soft);
  transform: rotate(45deg); transition: transform .35s var(--ease), margin .35s var(--ease);
}
.select__btn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -.2rem; }

.pop-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .5rem);
  max-height: 21rem; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--almond, #C1B5A6) transparent;
  margin: 0; padding: .5rem 0; list-style: none;
  background: var(--linen, #F3EDE6); color: var(--night);
  box-shadow: 0 24px 50px -24px rgba(24, 22, 17, .45);
  opacity: 0; transform: translateY(-.5rem); visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.pop-list.is-open { opacity: 1; transform: none; visibility: visible; }
.pop-list__opt {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem 1.2rem; cursor: pointer; font-size: var(--fs-body); line-height: 1.4;
  color: color-mix(in srgb, var(--night) 75%, transparent); transition: background-color .2s, color .2s;
}
.pop-list__opt:hover, .pop-list__opt.is-active { background: rgba(24, 22, 17, .06); color: var(--night); }
.pop-list__opt:focus { outline: none; }
.pop-list__opt[aria-selected="true"] { color: var(--night); }
/* L'option choisie porte le même petit carré que la case à cocher */
.pop-list__opt[aria-selected="true"]::after { content: ""; flex: none; width: .4rem; height: .4rem; background: var(--night); }
.pop-list__hint { display: block; color: var(--taupe); font-size: var(--fs-small); }

/* ---------- Mise en page compacte (retenue le 2 novembre 2026) ----------
   Grille de 6 colonnes : Date · Invités · Budget, puis Nom · Téléphone · Email sur une ligne. */
.contact--compact { padding-top: calc(5.25rem + var(--section-y) * .4); padding-bottom: calc(var(--section-y) * .7); }
.contact--compact .contact__aside { top: 7rem; }
.contact--compact .form { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem 2rem; align-items: start; }
.contact--compact .form > * { grid-column: span 6; }
.contact--compact .field--date { grid-column: span 2; gap: .7rem; }
.contact--compact .field--date + .form__row { grid-column: span 4; }
.contact--compact .field:has(#f-nom) { grid-column: span 2; }
.contact--compact .field:has(#f-nom) + .form__row { grid-column: span 4; }
.contact--compact .form__row { gap: 1.5rem 2rem; }
.contact--compact .field, .contact--compact .date-exact { gap: .3rem; }
.contact--compact .field__control { padding: .45rem 0 .55rem; }
.contact--compact textarea.field__control { min-height: 5rem; }
/* Date approximative : même structure que la date précise (intitulé, une ligne, case à cocher dessous),
   pour garder la colonne alignée sur Invités et Budget. Le mois, plus long, prend plus de place. */
.contact--compact .date-approx { order: -1; margin: 0; }
.contact--compact .date-approx legend { margin-bottom: .3rem; }
.contact--compact .date-approx .form__row { grid-template-columns: 3fr 2fr; gap: 1rem; }
.contact--compact .date-approx .select__btn { gap: .5rem; }
.contact--compact .select__btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact--compact .form__submit { display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; padding-top: .2rem; }
.contact--compact .form__note { flex: 1 1 16rem; }

/* ---------- Page Merci ---------- */
.contact--thanks { min-height: 100svh; display: grid; align-content: center; }
.contact--thanks .wrap { display: grid; gap: 1.6rem; justify-items: start; }
.contact--thanks .section__label { margin-bottom: 0; }
.contact--thanks .t-section { max-width: 16em; }

/* ---------- Mobile ---------- */
@media (max-width: 960px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__aside { position: static; }
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .choices { flex-direction: column; }
  .contact--compact .form > *, .contact--compact .field--date, .contact--compact .field:has(#f-nom), .contact--compact .field--date + .form__row, .contact--compact .field:has(#f-nom) + .form__row { grid-column: span 6; }
  .contact--compact .field--date + .form__row, .contact--compact .date-approx .form__row { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .contact--compact .choices { flex-direction: row; }
}

/* Mention « (facultatif) » après l'intitulé Date / Date approximative */
.field__opt { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------- Première étape : choisir le type d'événement ----------
   Sans choix (classe is-choosing posée par contact.js) : trois grandes cartes avec photo,
   le reste du formulaire est masqué. Après le choix : retour à la ligne compacte et soulignée,
   et les champs apparaissent en cascade. Sans JavaScript : tout reste visible, comme avant. */
.choices__hint, .choice__media { display: none; }
.form.is-choosing > :not(.field--type) { display: none !important; }
.form.is-choosing .choices__hint { display: block; color: var(--ink-soft); margin-top: .1rem; }
.form.is-choosing .choices {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.4rem); margin-top: .35rem;
}
.form.is-choosing .choice { display: grid; gap: .9rem; align-content: start; min-width: 0; }
.form.is-choosing .choice__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.choice__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) sepia(.3) contrast(1.05); transform: scale(1.04);
  transition: filter .8s var(--ease), transform 1.2s var(--ease);
}
.form.is-choosing .choice:hover .choice__media img,
.form.is-choosing .choice input:focus-visible ~ .choice__media img { filter: grayscale(0) sepia(.1); transform: scale(1); }
.form.is-choosing .choice .t-card { color: var(--ink); }
.form.is-choosing .choice:hover .t-card { background-size: 100% 1px; }
.form.is-choosing .choice input:focus-visible ~ .choice__media { outline: 1px solid var(--accent); outline-offset: 4px; }

@keyframes form-rise { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }
.form.is-revealing > :not(.field--type) { animation: form-rise .9s var(--ease) both; }
.form.is-revealing > :nth-child(n+3) { animation-delay: .08s; }
.form.is-revealing > :nth-child(n+4) { animation-delay: .16s; }
.form.is-revealing > :nth-child(n+6) { animation-delay: .24s; }
.form.is-revealing > :nth-child(n+7) { animation-delay: .32s; }
.form.is-revealing > :nth-child(n+9) { animation-delay: .4s; }

@media (max-width: 560px) {
  /* Mobile : une carte par ligne, photo à gauche, intitulé à droite */
  .form.is-choosing .choices { grid-template-columns: 1fr; gap: .8rem; }
  .form.is-choosing .choice { grid-template-columns: 7rem 1fr; align-items: center; gap: 1.1rem; }
  .form.is-choosing .choice__media { aspect-ratio: 4 / 3; }
}
/* Pendant le choix, la page est courte : la section garde la hauteur de l'écran (le footer ne remonte pas) */
.contact:has(.form.is-choosing) { min-height: 100svh; }
/* Titres des cartes : taille Boska des questions de la FAQ, sur une seule ligne */
.form.is-choosing .choice .t-card { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.3; white-space: nowrap; justify-self: start; }