/* ============================================================
   Portail Heutz — style partagé (accueil + formulaire chantier)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --fond:      #FFFDF9;
  --carte:     #FFFFFF;
  --encre:     #3A342C;
  --sourdine:  #9B9186;
  --bordure:   #EEE7DC;

  --eau-bg:       #E3F2FA;  --eau-ic:       #1786C4;
  --reception-bg: #FCEAE4;  --reception-ic: #E8543C;
  --devis-bg:     #E4F5EC;  --devis-ic:     #1E9E6B;
  --pointage-bg:  #FDF1DC;  --pointage-ic:  #D98A00;
  --etikt-bg:     #F0EAF8;  --etikt-ic:     #7B5EA7;
  --chantier-bg:  #FBE7E3;  --chantier-ic:  #D1281C;
}

*{ box-sizing:border-box; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

html,body{
  margin:0;
  min-height:100%;
  background:var(--fond);
  color:var(--encre);
  font-family:'Inter', -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}

.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:56px 20px 72px;
}

header{
  text-align:center;
  margin-bottom:40px;
}

header .salut{
  font-size:1.05rem;
  color:var(--sourdine);
  font-weight:500;
  margin:0 0 6px;
}

header .marque{
  font-family:'Quicksand', sans-serif;
  font-weight:700;
  font-size:clamp(2.2rem, 7vw, 3rem);
  letter-spacing:0.005em;
  margin:0;
  color:var(--encre);
}

.voyants{
  width:100%;
  max-width:760px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

@media (max-width:640px){
  .voyants{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:400px){
  .voyants{ grid-template-columns:1fr; }
}

.voyant{
  --fondc: #E3F2FA;
  --icc:   #1786C4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:150px;
  padding:22px;
  border-radius:22px;
  background:var(--fondc);
  color:var(--encre);
  text-decoration:none;
  box-shadow:0 6px 16px -10px rgba(58,52,44,0.18);
  transition:transform 140ms ease, box-shadow 140ms ease;
  border:none;
  cursor:pointer;
  font-family:inherit;
}

.voyant:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 20px -10px rgba(58,52,44,0.24);
}

.voyant:active{ transform:translateY(-1px) scale(0.99); }

.voyant:focus-visible{
  outline:3px solid var(--icc);
  outline-offset:3px;
}

.voyant .bulle{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.voyant .bulle svg{ width:26px; height:26px; }

.voyant .nom{
  font-family:'Quicksand', sans-serif;
  font-weight:700;
  font-size:1.15rem;
  text-align:center;
}

.v-eau       { --fondc: var(--eau-bg);       --icc: var(--eau-ic); }
.v-reception { --fondc: var(--reception-bg); --icc: var(--reception-ic); }
.v-devis     { --fondc: var(--devis-bg);     --icc: var(--devis-ic); }
.v-pointage  { --fondc: var(--pointage-bg);  --icc: var(--pointage-ic); }
.v-etikt     { --fondc: var(--etikt-bg);     --icc: var(--etikt-ic); }
.v-chantier  { --fondc: var(--chantier-bg);  --icc: var(--chantier-ic); }

footer{
  margin-top:40px;
  font-size:0.82rem;
  color:var(--sourdine);
}

/* ---------- Page "Nouveau chantier" ---------- */
.retour{
  align-self:flex-start;
  margin:0 auto 24px;
  width:100%;
  max-width:480px;
  display:block;
  color:var(--chantier-ic);
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
}

.carte-formulaire{
  width:100%;
  max-width:480px;
  background:var(--carte);
  border-radius:24px;
  padding:32px 28px;
  box-shadow:0 6px 20px -10px rgba(58,52,44,0.16);
}

.carte-formulaire h1{
  font-family:'Quicksand', sans-serif;
  font-weight:700;
  font-size:1.7rem;
  margin:0 0 24px;
  display:flex;
  align-items:center;
  gap:10px;
}

.formulaire{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.formulaire label{
  font-weight:600;
  font-size:0.88rem;
  color:var(--encre);
  margin-top:16px;
}

.formulaire input,
.formulaire select{
  padding:12px 14px;
  border-radius:12px;
  border:1.5px solid var(--bordure);
  font-size:1rem;
  font-family:inherit;
  background:var(--fond);
  color:var(--encre);
}

.formulaire input:focus,
.formulaire select:focus{
  outline:none;
  border-color:var(--chantier-ic);
}

.formulaire button{
  margin-top:26px;
  padding:15px;
  background:var(--chantier-ic);
  color:#FFFFFF;
  border:none;
  border-radius:14px;
  font-size:1rem;
  font-weight:700;
  font-family:'Quicksand', sans-serif;
  cursor:pointer;
  transition:transform 120ms ease, opacity 120ms ease;
}

.formulaire button:hover{ opacity:0.92; }
.formulaire button:active{ transform:scale(0.99); }

.message-flash{
  background:var(--pointage-bg);
  border:1.5px solid #F0D9A8;
  color:var(--encre);
  padding:12px 16px;
  border-radius:14px;
  margin-bottom:18px;
  font-size:0.92rem;
}