/* =====================================================
   MTW RÉNOVATION – Page d’attente (style.css)
   Centrage vertical + horizontal | Responsive
   Couleur boutons : #20335e
   ===================================================== */

/* -------- Variables -------- */
:root{
    --primary: #20335e;
    --primary-hover: #162645;

    --text: #111827;
    --muted: #374151;
    --footer: #6b7280;

    --max-width: 900px;
}

/* -------- Reset léger -------- */
*,
*::before,
*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* -------- Base -------- */
html, body{
    height: 100%;
}

body{
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: var(--text);
  line-height: 1.6;
  text-align: center;

  min-height: 100svh;     /* hauteur visible mobile */
  display: flex;
  justify-content: center; /* centre horizontal */
  align-items: center;     /* centre vertical */
  padding: 20px;

  overflow-y: auto;        /* si ça dépasse, ça scrolle (évite la découpe) */
}
/* -------- Wrapper -------- */
.wrapper{
  width: 100%;
  max-width: var(--max-width);

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* -------- Header / Logo -------- */
.logo-box{
    margin-bottom: 10px;
}

.logo-box img{
    max-width: 500px;   /* logo plus présent */
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* -------- Titres -------- */
h1{
    font-size: clamp(2rem, 4.5vw, 2.4rem);
    font-weight: 600;
    margin-bottom: 8px;
}

h2{
    font-size: clamp(1.1rem, 2.5vw, 1.25rem);
    font-weight: 400;
    color: var(--muted);
    margin-bottom: 26px;
}

/* -------- Texte -------- */
p{
    font-size: 1rem;
    color: #1f2937;
    margin-bottom: 18px;
}

/* -------- Liste de services -------- */
.services{
    margin: 18px 0 28px;
    font-weight: 400;
}

.services span{
    display: block;
    margin: 4px 0;
}

/* -------- Contact (boutons) -------- */
.contact-box{
    margin-top: 18px;
}

.contact-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 8px;
    padding: 14px 22px;
    border-radius: 8px;

    font-weight: 600;
    text-decoration: none;
    color: #ffffff;

    background: var(--primary);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.14);

    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.contact-btn:hover{
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(17, 24, 39, 0.18);
}

/* Option : si tu veux différencier phone/mail plus tard,
   tu peux décommenter et ajuster les couleurs.
*/
/*
.contact-btn.phone{ }
.contact-btn.mail{ }
*/

/* -------- Liens (si tu en as ailleurs) -------- */
a{
    color: inherit; /* les boutons gardent leur couleur */
}

/* -------- Footer -------- */
footer{
    margin-top: 36px;
    font-size: 0.85rem;
    color: var(--footer);
}

/* -------- Responsive mobile -------- */
@media (max-width: 768px){
  body{
    align-items: flex-start;  /* au lieu de center */
  }

  .wrapper{
    padding-top: 28px;        /* respiration au-dessus */
    padding-bottom: 28px;
  }
}