/* =========================================================
   Carré Noir — Apply Form (standalone)
   Style "Reservation" : cadre blanc / bord noir / champs encadrés
   Objectif : propre, lisible, sans dépendre du CSS Kirby
   ========================================================= */

/* -------------------------
   Variables / Base
   ------------------------- */
:root{
  --bg: #F6E17A;          /* jaune fond */
  --card: #fff;           /* fond des blocs */
  --ink: #111;            /* texte / traits */
  --muted: #333;          /* texte secondaire */
  --shadow: rgba(0,0,0,.08);

  --max: 1180px;
  --radius: 18px;
  --border-w: 3px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* -------------------------
   Layout
   ------------------------- */
.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 16px 60px;
}

/* Carte principale (cadre blanc) */
.card{
  background: var(--card);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  padding: 34px 34px 28px;
  box-shadow: 0 10px 30px var(--shadow);
  margin: 18px auto 22px;
}

/* -------------------------
   Hero (intro)
   ------------------------- */
.hero h1{
  margin: 0 0 12px;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.hero p{
  margin: 10px 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted);
}

/* Note importante */
.hero .note{
  margin-top: 14px;
  color: var(--ink);
  font-weight: 700;
}

/* -------------------------
   Titres de sections (CONTACT, PROJET…)
   => Majuscule + gras (comme demandé)
   ------------------------- */
.form h2{
  margin: 26px 0 14px;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* -------------------------
   Grilles
   ------------------------- */
.grid{
  display:grid;
  gap: 18px 22px;
}

.grid-2{
  grid-template-columns: 1fr 1fr;
}

.col-2{
  grid-column: 1 / -1;
}

/* -------------------------
   Champs
   ------------------------- */
.field label{
  display:block;
  font-size: 18px;
  font-weight: 400;      /* ✅ labels en normal */
  margin: 0 0 8px;
  text-transform: none;  /* ✅ pas d'uppercase sur les labels */
}

.field label span{
  font-weight: 900;      /* étoile * plus marquée */
}

.field input,
.field textarea,
.field select{
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 0;      /* style "Reservation" (angles droits) */
  padding: 16px 14px;
  font-size: 18px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

.field textarea{
  min-height: 130px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus{
  outline: 3px solid rgba(0,0,0,.2);
  outline-offset: 2px;
}

/* -------------------------
   Consentement
   ------------------------- */
.consent{
  margin-top: 18px;
}

.checkbox{
  display:flex;
  gap: 12px;
  align-items:center;
  font-size: 18px;
  font-weight: 400;
}

.checkbox input{
  width: 20px;
  height: 20px;
  accent-color: #111;
}

/* -------------------------
   Bouton submit
   (✅ pas noir : demandé)
   ------------------------- */
.actions{
  margin-top: 22px;
}

.btn{
  display:block;
  width: 100%;
  padding: 18px 18px;
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;

  border: 2px solid var(--ink);
  background: var(--bg);     /* ✅ jaune */
  color: var(--ink);
  cursor: pointer;
}

.btn:hover{
  filter: brightness(1.03);
}

.status{
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 700;
}

/* 👉 Si tu veux le bouton NOIR comme la capture :
   remplace background/color ci-dessus par :
   background:#111; color:#fff;
*/

/* -------------------------
   Honeypot invisible (anti-spam)
   ------------------------- */
.hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* -------------------------
   Bouton "Retour au site" (centré)
   ------------------------- */
.back-box{
  display:flex;
  justify-content:center;
  margin: 28px 0 10px;
}

.back-btn{
  display:inline-block;
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 16px 22px;
  font-size: 20px;
  font-weight: 900;
  text-decoration:none;
}

.back-btn:hover{
  filter: brightness(1.03);
}

/* -------------------------
   Responsive
   ------------------------- */
@media (max-width: 820px){
  :root{ --border-w: 2px; }

  .card{
    padding: 22px 18px 18px;
    border-radius: 16px;
  }

  .grid-2{
    grid-template-columns: 1fr;
  }

  .col-2{
    grid-column: auto;
  }

  .form h2{
    font-size: 26px;
  }

  .field label{
    font-size: 16px;
  }

  .field input,
  .field textarea,
  .field select{
    font-size: 16px;
    padding: 14px 12px;
  }

  .btn{
    font-size: 18px;
    padding: 16px;
  }

  .back-btn{
    font-size: 18px;
    padding: 14px 18px;
  }
}