/* =========================================================
   AdminToolz : page contact
   Chargé par ContactController : 'styles' => ['contact.css']
   (le fichier était référencé mais n'existait pas : la page
   s'affichait donc sans aucun style)

   Sommaire :
   1. Bandeau de tête
   2. Grille formulaire + colonne d'aide
   3. Champs
   4. Alertes et erreurs
   5. Cartes latérales
   6. Responsive
   ========================================================= */

/* ---------- 1. BANDEAU ---------- */
.contact-hero{
  background:var(--dark);
  color:#fff;
  padding:44px 26px 46px;
}
.contact-hero-inner{max-width:var(--narrow);margin:0 auto;}
.contact-eyebrow{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#F3C9D0;
}
.contact-title{
  font-family:var(--heavy);
  font-size:42px;line-height:1.08;letter-spacing:-.5px;
  margin-top:12px;
}
.contact-lead{
  margin-top:14px;font-size:17.5px;line-height:1.55;
  color:#DCDCDC;max-width:68ch;
}

/* ---------- 2. GRILLE ---------- */
.contact-body{padding:38px 26px 62px;}
.contact-grid{
  max-width:var(--narrow);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:40px;align-items:start;
}
.contact-form-wrap{
  background:#fff;border:1px solid #E6E6E6;border-radius:8px;
  padding:28px 30px 30px;box-shadow:0 2px 10px rgba(0,0,0,.04);
}

/* ---------- 3. CHAMPS ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:20px;}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;}
.field label{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#3F3F3F;
}
.field input,
.field textarea{
  width:100%;font-family:var(--sans);font-size:16.5px;color:var(--text);
  background:#fff;border:1px solid #DCDCDC;border-radius:5px;
  padding:12px 14px;transition:border-color .15s,box-shadow .15s;
}
.field textarea{resize:vertical;min-height:170px;line-height:1.6;}
.field input::placeholder,
.field textarea::placeholder{color:#A8A8A8;}
.field input:focus,
.field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,104,199,.12);
}
.field.invalid input,
.field.invalid textarea{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,21,29,.10);}
.field-hint{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--muted);
}
.field-hint a{color:var(--blue);text-decoration:underline;}
.field-error{
  display:block;font-size:14px;color:var(--red);font-weight:600;
}
.field.invalid .field-hint{color:var(--red);}
.field-actions{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.field-actions .field-hint{max-width:38ch;line-height:1.5;text-transform:none;letter-spacing:0;font-size:12.5px;}
#submitBtn[disabled]{opacity:.6;cursor:progress;}

/* Honeypot : invisible sans display:none (certains bots l'ignorent). */
.hp-field{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

/* ---------- 4. ALERTES ---------- */
.form-alert{
  border-radius:6px;padding:14px 16px;margin-bottom:22px;
  font-size:15.5px;line-height:1.5;
  border-left:3px solid var(--red);background:#FFF6F6;color:#8E0E2E;
}
.form-alert-ok{
  border-left-color:#0F9D58;background:#E9F8EF;color:#136B39;
}
.form-alert-err{
  border-left-color:var(--red);background:#FBE6E6;color:#B3261E;
}

/* ---------- 5. CARTES LATÉRALES ---------- */
.contact-aside{display:flex;flex-direction:column;gap:16px;}
.contact-card{
  background:var(--bg-soft);border:1px solid #E6E6E6;border-radius:8px;
  padding:20px 22px 22px;
}
.contact-card h2{
  display:flex;align-items:center;gap:9px;
  font-family:var(--heavy);font-size:17px;line-height:1.25;color:#1F1F1F;
}
.contact-card h2 svg{width:18px;height:18px;flex:none;color:var(--red);stroke-width:2.1;}
.contact-card p{margin-top:10px;font-size:15.5px;line-height:1.55;color:#3F3F3F;}
.contact-card a{color:var(--blue);}
.contact-card a:hover{text-decoration:underline;}
.contact-card--intro ul{margin-top:12px;padding-left:18px;}
.contact-card--intro li{list-style:disc;font-size:15.5px;line-height:1.5;color:#3F3F3F;}
.contact-card--intro li + li{margin-top:8px;}
.contact-card--intro strong{color:#1F1F1F;}
.contact-card--data{background:#fff;}
.contact-data{
  font-family:var(--display);font-size:32px;line-height:1.1;
  color:var(--red);margin-top:8px;
}

/* ---------- 6. RESPONSIVE ---------- */
@media (max-width:1000px){
  .contact-title{font-size:32px;}
  .contact-grid{grid-template-columns:1fr;gap:28px;}
}

@media (max-width:640px){
  .contact-hero{padding:30px 18px 32px;}
  .contact-title{font-size:26px;}
  .contact-lead{font-size:16px;}
  .contact-body{padding:24px 18px 48px;}
  .contact-form-wrap{padding:20px 18px 22px;border-radius:6px;}
  .field-row{grid-template-columns:1fr;gap:0;}
  .field-actions{flex-direction:column;align-items:stretch;gap:12px;}
  .field-actions .btn-blue{text-align:center;}
}