/* Page contact — mise en page (même famille que la page Réservation et le Plan du site). */
:root {
  --ct-fond-bloc: #f8f6f1;
  --ct-blanc: #fffdfa;
  --ct-texte: #1f2430;
  --ct-texte-doux: #6d6a64;
  --ct-bordure: #d3cdc0;
  --ct-champ: #d6d0c4;
  --ct-accent: #3e3428;
  --ct-filet: #c49a5a;
}

/* flex_secCal.css impose « body { height: 98vh; width: 100vw } » : le pied de page disparaissait */
body#bodyContact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: clip;
  color: var(--ct-texte);
}

body#bodyContact *,
body#bodyContact *::before,
body#bodyContact *::after { box-sizing: border-box; }

.ct-entete,
.ct-navigation,
.ct-pied { flex: 0 0 auto; width: 100%; min-width: 0; }

.ct-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(12px, 2.5vw, 28px) clamp(12px, 2.5vw, 30px) 40px;
  font-family: Arial, Helvetica, sans-serif;
}

.ct-intro {
  max-width: 820px;
  margin: 0 auto 24px;
  color: var(--ct-texte-doux);
  font-size: 1.02rem;
  line-height: 1.6;
  text-align: center;
}

/* Grille : formulaire large à gauche, infos + calendrier à droite */
.ct-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 24px;
  align-items: stretch;
}

.ct-colonne {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.ct-carte {
  min-width: 0;
  padding: clamp(16px, 2vw, 24px);
  background: var(--ct-blanc);
  border: 1px solid var(--ct-bordure);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 4%);
}

.ct-carte h2 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ct-filet);
  color: var(--ct-texte);
  font-size: 1.2rem;
  line-height: 1.3;
}

.ct-carte p { margin: 0 0 10px; line-height: 1.55; color: var(--ct-texte-doux); }
.ct-carte p:last-child { margin-bottom: 0; }
.ct-carte a { color: #28546a; text-underline-offset: .18em; }

/* --- Formulaire : la carte s'étire, le message prend toute la place restante --- */
.ct-carte--formulaire { display: flex; flex-direction: column; }

.ct-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
}

.ct-ligne {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ct-form label {
  display: grid;
  gap: 6px;
  color: var(--ct-texte);
  font-size: .92rem;
  font-weight: 700;
}

.ct-form input[type="text"],
.ct-form input[type="email"],
.ct-form input[type="tel"],
.ct-form input[type="date"],
.ct-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--ct-champ);
  border-radius: 10px;
  background: #fff;
  color: var(--ct-texte);
  font: inherit;
  font-weight: 400;
}

.ct-form input:focus,
.ct-form textarea:focus {
  outline: 2px solid var(--ct-filet);
  outline-offset: 1px;
  border-color: var(--ct-filet);
}

.ct-form .invalid { border-color: #b3261e; background: #fff6f5; }

.ct-form .ct-message { display: flex; flex: 1; flex-direction: column; }

.ct-form textarea {
  flex: 1;
  min-height: max(220px, 32vh);
  resize: vertical;
  line-height: 1.5;
}

.ct-form .ct-case {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}

.ct-form .ct-case input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ct-accent); }
.ct-form .ct-case--rgpd { font-size: .88rem; color: var(--ct-texte-doux); }

.ct-obligatoire { color: #9a3b2f; }

.ct-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ct-bouton {
  padding: 12px 34px;
  border: 1px solid var(--ct-accent);
  border-radius: 999px;
  background: var(--ct-accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, transform .15s;
}

.ct-bouton:hover { background: #5c4e39; transform: translateY(-1px); }
.ct-bouton:focus-visible { outline: 3px solid var(--ct-filet); outline-offset: 2px; }

.ct-note { margin: 0; color: var(--ct-texte-doux); font-size: .82rem; }

/* --- Calendrier : un seul mois --- */
.ct-calendrier { overflow-x: auto; }
.ct-calendrier .month-block { display: none; }
.ct-calendrier .month-1 { display: flex; }
.ct-calendrier #full-calendrier { width: 100%; }
.cal-ajax-chargement { opacity: .6; transition: opacity .15s; }

.ct-popup-texte { color: #000; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .ct-grille { grid-template-columns: minmax(0, 1fr); }
  .ct-form textarea { min-height: 200px; }
}

@media (max-width: 560px) {
  .ct-ligne { grid-template-columns: minmax(0, 1fr); }
  .ct-actions { flex-direction: column; align-items: stretch; }
  .ct-bouton { width: 100%; }
}