.body {
    font-family: Arial, sans-serif;
   background-image: url('../img/fond.png');
background-size: cover;
background-position: center;
    padding: 20px;
    color: #333;
}

h1, h2 {
    text-align: center;
    
    
}

h1 {
    /* style du cadre */
border: 2px solid #333;      /* épaisseur 2px, couleur gris foncé */
/* coins arrondis */

/* un peu d’espace à l’intérieur pour que ça respire */
padding: 0.5em 1em;

/* pour que le cadre suive la largeur du contenu */
display: inline-block;
}

h3 {
    color: black;
}

form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

p {
    margin-bottom: 10px;
}

input[type="text"],
textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid #EE7298;
    box-sizing: border-box;
}

textarea {
    resize: vertical;
}

label {
    display: block;
    margin: 5px 0;
}

button {
    background-color: #EE7298;
    color: white;
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
    width: 100%;
    font-size: 16px;
}

#questionnaire-title {
    display: inline-block;
border: 2px solid black;
border-radius: 0.3em;
padding: 0.5em 1em;
/* plus besoin de text-align ici */
margin: 1em 0; /* espace vertical */
}

.titre-container {
text-align: center; /* on centre tout ce qui est inline/inline-block */
}

button:hover {
    background-color: #EE7298;
}

@media (max-width: 600px) {
    form {
        padding: 15px;
    }
}

.margin-top button {
background-color: #fff;
color: #EE7298;
font-weight: bold;
border: none;
padding: 1em 1.5em;
border-radius: 8px;
cursor: pointer;
display: block;           /* pour pouvoir centrer avec margin auto */
width: auto;              /* ou met une largeur fixe : ex. 250px */
max-width: 90%;           /* limite au cas où l’écran est tout petit */      
text-align: center; 
}


/*      #btn-google-review {
display: block;           /* pour pouvoir centrer avec margin auto */
/*width: auto;              /* ou met une largeur fixe : ex. 250px */
/*max-width: 90%;           /* limite au cas où l’écran est tout petit */
/*padding: 0.75em 1.5em;    /* respire un peu */
/*margin: 1.5em auto;       /* top/bottom 1.5em, left/right auto = centré */
/*text-align: center;       /* texte centré à l’intérieur */
/* supprime éventuellement un style width:100% existant */
/*}*/



.img-container {
text-align: center; /* centre tout ce qui est inline ou inline-block */
}

.img-container img {
display: inline-block; /* l’image reste inline, donc centrée */
}

.center-block {
display: block;     /* il faut que l’image soit un bloc */
margin: 1em auto;
max-width: 90%;   /* l’image ne dépassera pas 50% de la largeur de son conteneur */
width: auto;      /*…et prendra sa taille native si elle est plus petite */
height: auto;     /* conserve les proportions */
}




.thanks-container {
    text-align: center;
    padding: 2em;
    background: #fff;
    border-radius: 0.5em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  .thanks-container h1 {
    margin-bottom: 0.5em;
    color: #EE7298;
  }
  .thanks-container p {
    margin-bottom: 1.5em;
  }
  .thanks-container a {
    display: inline-block;
    padding: 0.5em 1em;
    background: #EE7298;
    color: #fff;
    text-decoration: none;
    border-radius: 0.3em;
  }

  


  #btn-google {
   
  width: auto !important;      
    display: inline-block;           /* pour se comporter comme un bouton */
    margin: 0 auto;                  /* centré */
    padding: 0.8em 1.5em;            /* espace interne suffisant */
    background-color: #EE7298;       /* fond rose vif */
    color: #fff;                     /* texte blanc */
    font-weight: bold;               /* emphase */
    border: none;                    /* pas de bordure */
    border-radius: 8px;              /* coins arrondis */
    text-align: center;              /* texte centré */
    cursor: pointer;                 /* pointeur clic */
  }
  #btn-google:hover {
    background-color: #d55a80;       /* variante plus foncée au survol */
  }


  .thanks-page {
  /* si tu veux une image de fond : */
  background-image: url('../img/fond.png');
  background-size: cover;
  background-position: center;
  /* ou, un fond uni gris clair : */
  /* background-color: #f0f0f0; */
  display: flex;
  justify-content: center;
  align-items: center;
}