/* ========= Tokens + font ========= */
:root{
  --accent:#ff6233;

  /* light */
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f6f7f9;
  --text:#111319;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow-1:0 10px 26px rgba(0,0,0,.06);

  --radius:16px;
  --radius-sm:12px;
}
:root[data-theme="dark"]{
  --bg:#0f131b;
  --surface:#0b0e14;
  --surface-2:#0f141e;
  --text:#e8edf5;
  --muted:#9aa4b2;
  --border:#1c2230;
  --shadow-1:0 16px 36px rgba(0,0,0,.45);
}

/* Montserrat partout */
body.contact-page{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--surface-2);
  color: var(--text);
}

/* ========= Layout global ========= */
.page-wrapper{ padding: clamp(2.5rem,6vw,5rem) 0; }
.container{ max-width: var(--container, 1200px); margin: 0 auto; padding: 0 1.5rem; }

.intro{ text-align:center; margin-bottom: 2rem; }
.page-title{ font-weight:800; font-size:clamp(2rem,4.5vw,2.8rem); margin:0 0 .4rem; color:var(--text); }
.chapo{ color:var(--muted); font-size:clamp(1rem,1.6vw,1.15rem); margin:0 auto; max-width: 60ch; }

/* 2 colonnes : main + aside */
.content-wrap{
  display:grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}
@media (max-width: 960px){
  .content-wrap{
    grid-template-columns: 1fr;
  }
}

/* ========= Carte formulaire ========= */
.card.contact-form{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 1.25rem;
}

.contact-form .grid.two{
  display:grid; gap:1rem; grid-template-columns:1fr 1fr;
}
@media (max-width: 760px){ .contact-form .grid.two{ grid-template-columns:1fr; } }

.contact-form label{
  display:flex; flex-direction:column; gap:.45rem;
  font-weight:700; color: var(--text);
}
.contact-form input,
.contact-form textarea{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  font: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.contact-form textarea{ resize: vertical; min-height: 8rem; }

.contact-form input::placeholder,
.contact-form textarea::placeholder{ color: color-mix(in oklab, var(--muted) 86%, transparent); }

.contact-form input:focus,
.contact-form textarea:focus{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, #fff);
  background: color-mix(in oklab, var(--surface) 98%, white);
}

/* honeypot caché */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* Consentement */
.consent{ margin-top:.4rem; }
.checkbox{ display:flex; align-items:flex-start; gap:.6rem; font-weight:600; color:var(--text); }
.checkbox input[type="checkbox"]{ margin-top:.25rem; width:1.1rem; height:1.1rem; }
.checkbox a{ color:var(--text); text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="dark"] .checkbox a{ color: var(--text); }

/* Actions / bouton / état */
.actions{
  margin-top: 1rem;
  display:flex; align-items:center; gap: 1rem;
  flex-wrap: wrap;
}
.btn{
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.7rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight:800;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.12); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.btn .spinner{ display:none; font-weight:700; }
.btn.is-submitting .label{ display:none; }
.btn.is-submitting .spinner{ display:inline; }

/* Messages de statut */
.status{ min-height: 1.4rem; }
.status .ok{ color:#16a34a; font-weight:700; }  /* vert lisible */
.status .err{ color:#dc2626; font-weight:700; } /* rouge lisible */

/* ========= Aside ========= */
.aside h2{ font-weight:800; font-size: clamp(1.2rem,2vw,1.4rem); margin: .2rem 0 1rem; color:var(--text); }

.alt-grid{
  list-style:none; padding:0; margin:0;
  display:grid; gap:1rem;
}
.alt-card{
  display:flex; gap:.9rem; align-items: flex-start;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.alt-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
}
.alt-card i{
  font-size: 1.15rem; color: var(--accent); margin-top:.2rem;
}
.alt-card h3{
  margin:.05rem 0 .25rem; font-weight:800; font-size:1.02rem; color:var(--text);
}
.alt-link{
  font-weight:800;
  color: var(--accent);
  text-decoration: none;
}
.alt-link:hover{ text-decoration: underline; text-underline-offset: 2px; }