:root {
  --bleu: #4099BA;
  --bleu-fonce: #2f7c99;
  --bleu-clair: #9fd3e8;
  --fond: #f3f3f3;
  --texte: #333;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fond);
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  color: var(--texte);
}
/* La page occupe au moins tout l'écran : le pied de page est poussé en bas (sans flotter sur le contenu) */
.page {
  max-width: 840px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.espace-pied { flex: 1 0 24px; }
.entete img { display: block; width: 100%; height: auto; }

/* Barre de progression */
.progression {
  position: relative;
  height: 56px;
  margin: 2px 0 6px;
  border: 1px solid #ccc;
  background: var(--fond);
}
.progression .barre { height: 100%; background: var(--bleu-clair); }
.progression span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* Texte d'accueil et cadre du formulaire */
.intro { padding: 20px 8px 12px; font-weight: bold; }
.intro.nom-magasin { color: #888; }   /* nom du magasin au-dessus des questions */
.intro.accueil { font-size: 1.3rem; line-height: 1.3; }   /* phrase d'accueil (client.php, magasin.php) */
.merci { font-size: 1.3rem; line-height: 1.3; font-weight: bold; margin: 0; }   /* remerciement (merci.php) */
/* Cadre autour de la barre de progression, des questions et des boutons (questionnaire) */
/* La barre de progression est collée aux bords haut, gauche et droit du cadre (marges négatives) */
.cadre-page {
  --espace-cadre: clamp(8px, 2vw, 16px);
  border: 1px solid #bbb;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  padding: 0 var(--espace-cadre) var(--espace-cadre);
  margin-top: 8px;
}
.cadre-page .progression {
  height: 32px;
  margin: 0 calc(-1 * var(--espace-cadre));
  border: 0;
  border-bottom: 1px solid #ccc;
  background: #e2e2e2;   /* partie pas encore faite */
  font-size: .9rem;
}
.actions.actions-questionnaire { margin-top: 12px; }
.bloc-gris { background: #fafafa; border: 1px solid #222; }
.cadre-form { padding: 16px 24px 20px; }
.bloc-gris h2 { font-size: 1.15rem; font-weight: normal; margin: 20px 0 8px; }
.bloc-gris h2:first-child { margin-top: 0; }
.bloc-gris .erreur { margin-bottom: 0; }

/* Champs */
input[type="text"], select, textarea {
  font: inherit;
  padding: 8px;
  border: 1px solid #bbb;
  border-radius: 5px;
  background: #fff;
}
.form-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin: 16px 0; }
.form-ligne > label { width: 150px; font-weight: bold; }
.form-ligne select { min-width: min(320px, 100%); max-width: 100%; }
.form-ligne input[type="text"] { width: min(320px, 100%); }
.identite { margin-bottom: 64px; }   /* grand espace entre le nom/prénom et le choix du magasin */
.civilite { display: flex; gap: 24px; margin-bottom: 12px; font-weight: bold; }

/* Questionnaire */
.question { padding: 12px 0; border-bottom: 1px solid #ddd; }
.question:last-child { border-bottom: 0; }
.question .libelle { font-weight: bold; font-size: 1.1rem; line-height: 1.3; margin: 0 0 16px; }
.question .choix { display: block; margin: 4px 0 4px 8px; }
.question .remarque { width: 100%; margin-top: 8px; }
.question.cachee { display: none; }
/* Cadre des questions : plus d'espace intérieur (réduit sur petit écran) */
.cadre-questions {
  padding: clamp(20px, 4vw, 36px) clamp(16px, 5vw, 48px);
  border: 0;
  background: transparent;
}

/* Page du questionnaire : tout tient dans la hauteur de l'écran (logo, cadre, boutons, pied de page).
   Le cadre blanc prend la place disponible : il rapetisse si l'écran est bas,
   et les questions défilent alors à l'intérieur du cadre. */
.page-encadree { height: 100vh; height: 100dvh; }
.page-encadree > * { flex-shrink: 0; }
.page-encadree .espace-pied { flex: 0 0 16px; }
.page-encadree .cadre-page {
  flex: 1 1 auto;
  min-height: 180px;   /* en dessous, c'est la page entière qui défile */
  display: flex;
  flex-direction: column;
}
.page-encadree .cadre-page > .progression { flex-shrink: 0; }
.page-encadree .cadre-page > form { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Questions trop longues pour le cadre : pas d'espace entre le nom du magasin et la 1re question */
.serre .intro { padding-bottom: 0; }
.serre .cadre-questions { padding-top: 4px; }

/* Boutons */
.actions { display: flex; justify-content: space-between; align-items: stretch; gap: 8px; margin-top: 4px; }
.actions .droite { display: flex; gap: 8px; margin-left: auto; }
.btn-bleu {
  display: inline-block;
  background: var(--bleu);
  color: #fff;
  border: 0;
  border-bottom: 2px solid #999;
  font: bold 1rem "Trebuchet MS", Tahoma, sans-serif;
  text-align: center;
  text-decoration: none;
  padding: 12px 20px;
  cursor: pointer;
}
.btn-bleu:hover, .btn-bleu:focus-visible { background: var(--bleu-fonce); }
/* Boutons du questionnaire : coins arrondis ; bouton de gauche (retour, précédent) plus clair */
.actions-questionnaire .btn-bleu { border-radius: 5px; }
.btn-bleu.petit { font-size: .85rem; }
.btn-bleu.secondaire { background: color-mix(in srgb, var(--bleu) 60%, transparent); }
.btn-bleu.secondaire:hover, .btn-bleu.secondaire:focus-visible { background: color-mix(in srgb, var(--bleu-fonce) 60%, transparent); }

/* Pied de page */
.pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 48px;
  padding: 10px 16px;
  background: #e4e4e4;
  font-family: Arial, sans-serif;
  font-size: .75rem;
  line-height: 1.3;
}
.pied address { font-style: normal; }
.info {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--bleu);
  background: #fff;
  color: var(--bleu);
  font: bold 1rem Georgia, serif;
  cursor: pointer;
}

.erreur { color: #a00; font-weight: bold; }
.ok { color: #4d6b12; font-weight: bold; }