/* ============================================================
   Questionnaire patient « Fiche 1re visite » : page publique autonome.
   Identité reprise du formulaire historique du cabinet (bleu #2c5985,
   cartes blanches arrondies, pastilles, barre de progression).
   Mobile d'abord (320 px mini), champs en 16 px (pas de zoom iOS),
   cibles tactiles de 44 px au moins. Aucune ressource externe.
   Sans JavaScript (pas de classe q-js sur <html>) : toutes les étapes
   s'affichent à la suite ; avec q-js, seule .q-etape.is-active est visible.
   ============================================================ */

:root {
  --primaire: #2c5985;
  --accent: #2563eb;
  --accent-fonce: #1d4ed8;
  --accent-clair: #eff6ff;
  --succes: #15803d;
  --succes-fonce: #166534;
  --succes-clair: #f0fdf4;
  --erreur: #b91c1c;
  --erreur-clair: #fef2f2;
  --fond: #f0f4f8;
  --carte: #ffffff;
  --texte: #1e293b;
  --texte-doux: #4b5b70;
  --ligne: #dbe3ec;
  --bordure-champ: #7d8da3;
  --rayon: 8px;
  --ombre: 0 4px 12px rgba(15, 23, 42, 0.08);
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
  min-height: 100vh;
  min-height: 100dvh;
}

[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

h2[tabindex="-1"]:focus {
  outline: none;
}

.q-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Page ---------- */
.q-app {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 8px 24px;
}

.q-page:not(.q-page-centree) {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.q-validation {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 10px 16px;
  background: #fef3c7;
  border-bottom: 2px solid #d97706;
  color: #78350f;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
}

.q-entete {
  text-align: center;
  padding: 16px 0 12px;
}

.q-entete > img {
  display: block;
  height: 50px;
  width: auto;
  max-width: 100%;
  margin: 0 auto 10px;
}

.q-titre {
  margin: 0 0 4px;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--primaire);
}

.q-titre sup {
  font-size: 0.65em;
  line-height: 0;
}

.q-sous-titre {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texte-doux);
}

.q-pied {
  margin: 8px 12px 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--texte-doux);
}

/* ---------- Progression (JavaScript seulement) ---------- */
.q-progression {
  display: none;
  margin-bottom: 16px;
}

.q-js .q-progression {
  display: block;
}

.q-barre {
  height: 6px;
  margin-bottom: 10px;
  border-radius: 3px;
  background: #cfd9e5;
  overflow: hidden;
}

.q-barre-remplie {
  height: 100%;
  width: 20%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.4s ease;
}

.q-etapes-liste {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.q-etape-bouton {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid #aab8c9;
  border-radius: 50%;
  background: var(--carte);
  color: var(--texte-doux);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Zone tactile de 44 px autour du rond de 36 px. */
.q-etape-bouton::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
}

.q-etape-bouton:disabled {
  cursor: default;
}

.q-etape-bouton.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.q-etape-bouton.done {
  background: var(--succes);
  border-color: var(--succes);
  color: #fff;
}

.q-etape-texte {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texte-doux);
}

/* ---------- Alertes et brouillon ---------- */
.q-alerte {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #fca5a5;
  border-radius: var(--rayon);
  background: var(--erreur-clair);
  color: var(--erreur);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

.q-alerte p {
  margin: 0;
}

.q-alerte p + p {
  margin-top: 6px;
}

.q-bandeau-brouillon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 6px 8px 6px 14px;
  border: 1px solid #bfdbfe;
  border-radius: var(--rayon);
  background: var(--accent-clair);
  color: #1e3a8a;
  font-size: 0.95rem;
}

.q-lien-bouton {
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--accent-fonce);
  font-size: 0.95rem;
  text-decoration: underline;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Pot de miel : hors écran, jamais display:none (les robots le repéreraient). */
.q-appat {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Étapes ---------- */
.q-etape {
  margin: 0 0 16px;
  padding: 20px 14px;
  border-radius: 16px;
  background: var(--carte);
  box-shadow: var(--ombre);
}

.q-js .q-etape {
  display: none;
}

.q-js .q-etape.is-active {
  display: block;
  animation: q-apparition 0.3s ease both;
}

.q-etape-entete {
  margin-bottom: 20px;
  text-align: center;
}

.q-etape-icone {
  display: block;
  margin-bottom: 6px;
  font-size: 2.25rem;
  line-height: 1;
}

.q-etape-entete h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
}

.q-etape-entete p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texte-doux);
}

.q-note {
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: var(--texte-doux);
}

.q-aide-bloc {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: var(--texte-doux);
}

.q-separateur {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--ligne);
}

/* ---------- Champs ---------- */
.q-champ {
  min-width: 0;
  margin: 0 0 16px;
  scroll-margin-top: 90px;
}

fieldset.q-champ {
  padding: 0;
  border: 0;
}

.q-champ > label,
.q-champ > legend,
.q-etiquette {
  display: block;
  padding: 0;
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texte);
}

.q-req {
  color: var(--erreur);
  font-weight: 700;
}

.q-aide {
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 400;
  color: var(--texte-doux);
}

.q-champ input[type="text"],
.q-champ input[type="email"],
.q-champ input[type="tel"],
.q-champ input[type="number"],
.q-champ select,
.q-champ textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid var(--bordure-champ);
  border-radius: var(--rayon);
  background-color: var(--carte);
  color: var(--texte);
  font-size: 16px;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}

.q-champ textarea {
  min-height: 72px;
  resize: vertical;
}

.q-champ input::placeholder,
.q-champ textarea::placeholder {
  color: #6b7a8f;
  opacity: 1;
}

.q-champ input:focus,
.q-champ select:focus,
.q-champ textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  outline: none;
}

/* Flèche des listes dessinée en dégradés : aucune image, aucune URL. */
.q-champ select {
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--texte-doux) 50%),
    linear-gradient(135deg, var(--texte-doux) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.q-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}

.q-ligne > .q-champ {
  flex: 1 1 220px;
}

.q-ligne-enfants {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.q-date {
  display: grid;
  grid-template-columns: 0.85fr 1.5fr 1fr;
  gap: 8px;
}

.q-date select {
  padding-right: 28px;
  padding-left: 10px;
  background-position: calc(100% - 15px) 50%, calc(100% - 9px) 50%;
}

/* Erreur d'un champ */
.q-erreur {
  margin: 6px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--erreur);
}

.q-champ.has-error > label,
.q-champ.has-error > legend,
.q-champ.has-error > .q-etiquette {
  color: var(--erreur);
}

.q-champ.has-error input[type="text"],
.q-champ.has-error input[type="email"],
.q-champ.has-error input[type="tel"],
.q-champ.has-error input[type="number"],
.q-champ.has-error select,
.q-champ.has-error textarea,
.q-champ.has-error .q-carte,
.q-champ.has-error .q-pastille,
.q-champ.has-error .q-planche {
  border-color: var(--erreur);
}

.q-champ.has-error input:focus,
.q-champ.has-error select:focus,
.q-champ.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.18);
}

/* ---------- Cartes (Oui / Non) et pastilles : de vrais radios et cases, masqués visuellement ---------- */
.q-entree {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.q-choix,
.q-pastilles,
.q-champ-consentement {
  position: relative;
}

.q-choix-carte {
  display: flex;
  gap: 8px;
}

.q-choix-pastille,
.q-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.q-carte,
.q-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 16px;
  border: 1.5px solid var(--bordure-champ);
  background: var(--carte);
  color: var(--texte);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.q-carte {
  flex: 1 1 0;
  border-radius: var(--rayon);
}

.q-pastille {
  border-radius: 22px;
}

@media (hover: hover) {
  .q-carte:hover,
  .q-pastille:hover {
    border-color: var(--accent);
    background: var(--accent-clair);
  }
}

.q-entree:checked + .q-carte,
.q-carte.checked {
  border-color: var(--accent);
  background: var(--accent-clair);
  color: var(--accent-fonce);
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.q-entree:checked + .q-pastille,
.q-pastille.checked {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* Pastilles des antécédents : bleu du cabinet. */
.q-pastilles > .q-entree:checked + .q-pastille,
.q-pastilles > .q-pastille.checked {
  border-color: var(--primaire);
  background: var(--primaire);
}

.q-entree:focus-visible + .q-carte,
.q-entree:focus-visible + .q-pastille {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Précision d'un antécédent : affichée par la seule feuille de style quand la case est cochée. */
.q-pastilles > .q-pastille {
  order: 0;
}

.q-precision {
  display: none;
  order: 1;
  flex: 0 0 100%;
  padding: 10px;
  border-radius: var(--rayon);
  background: #eef2f7;
}

.q-entree:checked + .q-pastille + .q-precision {
  display: block;
}

.q-precision label {
  display: block;
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texte-doux);
}

.q-precision textarea {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 9px 12px;
  border: 1.5px solid var(--bordure-champ);
  border-radius: 6px;
  background: var(--carte);
  color: var(--texte);
  font-size: 16px;
  line-height: 1.4;
  resize: vertical;
}

.q-precision textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  outline: none;
}

/* ---------- Accordéon des antécédents ---------- */
.q-champ.q-champ-groupe {
  margin: 0 0 6px;
}

.q-accordeon {
  margin: 0;
  border: 1.5px solid var(--bordure-champ);
  border-radius: var(--rayon);
  background: var(--carte);
}

.q-champ.has-error .q-accordeon {
  border-color: var(--erreur);
}

.q-accordeon.a-des-choix {
  border-left: 4px solid var(--succes);
}

.q-accordeon > summary {
  position: relative;
  display: block;
  min-height: 48px;
  padding: 12px 44px 12px 14px;
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.q-accordeon > summary::-webkit-details-marker {
  display: none;
}

.q-accordeon > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--texte-doux);
  border-bottom: 2px solid var(--texte-doux);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.q-accordeon[open] > summary {
  background: var(--accent-clair);
  border-radius: 6px 6px 0 0;
}

.q-accordeon[open] > summary::after {
  margin-top: -2px;
  transform: rotate(225deg);
}

.q-compteur {
  display: inline-block;
  min-width: 24px;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  vertical-align: 1px;
}

.q-accordeon-corps {
  padding: 12px 14px 14px;
}

/* ---------- Consentement ---------- */
.q-consentement {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--ligne);
  border-radius: 12px;
  background: #f8fafc;
}

.q-consentement h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: var(--primaire);
}

.q-engagements {
  margin: 0;
  padding: 0;
  list-style: none;
}

.q-engagements li {
  position: relative;
  margin: 0 0 6px;
  padding-left: 26px;
  font-size: 0.95rem;
}

.q-engagements li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--succes);
  font-weight: 700;
}

.q-consentement .q-lien-bouton {
  margin-top: 6px;
  padding-left: 0;
}

.q-consentement-texte {
  max-height: 300px;
  margin-top: 10px;
  padding: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--carte);
  font-size: 0.9rem;
  line-height: 1.6;
}

.q-champ-consentement {
  padding: 16px;
  border: 2px solid #86efac;
  border-radius: 12px;
  background: var(--succes-clair);
}

.q-champ-consentement.has-error {
  border-color: #fca5a5;
  background: var(--erreur-clair);
}

.q-champ > label.q-accord {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.q-case {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 2.5px solid #64748b;
  border-radius: 10px;
  background: var(--carte);
}

.q-case::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 4px;
  display: none;
  width: 10px;
  height: 20px;
  border: solid #fff;
  border-width: 0 3.5px 3.5px 0;
  transform: rotate(45deg);
}

.q-entree:checked + .q-accord .q-case {
  border-color: var(--succes);
  background: var(--succes);
}

.q-entree:checked + .q-accord .q-case::after {
  display: block;
}

.q-entree:focus-visible + .q-accord .q-case {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.q-champ-consentement.has-error .q-case {
  border-color: var(--erreur);
}

/* ---------- Zones de dessin (JavaScript seulement) ---------- */
html:not(.q-js) .q-champ-planche {
  display: none;
}

.q-planche {
  overflow: hidden;
  border: 1.5px solid var(--bordure-champ);
  border-radius: 12px;
  background: var(--carte);
}

.q-canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.q-effacer {
  display: block;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-top: 1px solid var(--ligne);
  background: #f8fafc;
  color: var(--texte-doux);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Navigation fixe en bas ---------- */
.q-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ligne);
  background: var(--carte);
  box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.08);
}

.q-nav-interieur {
  display: flex;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
}

html:not(.q-js) .q-btn-prec,
html:not(.q-js) .q-btn-suiv {
  display: none;
}

.q-btn {
  min-height: 48px;
  padding: 0 20px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.q-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.q-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.q-btn-secondaire {
  border-color: var(--bordure-champ);
  background: var(--carte);
  color: var(--texte);
}

.q-btn-primaire {
  background: var(--accent);
  color: #fff;
}

.q-btn-envoi {
  background: var(--succes);
  color: #fff;
}

@media (hover: hover) {
  .q-btn-primaire:hover:not(:disabled) {
    background: var(--accent-fonce);
  }

  .q-btn-envoi:hover:not(:disabled) {
    background: var(--succes-fonce);
  }
}

.q-btn-prec {
  flex: 0 0 auto;
}

.q-btn-suiv,
.q-btn-envoi {
  flex: 1 1 0;
}

/* ---------- Fenêtre de confirmation (jamais confirm() : bloqué dans WhatsApp) ---------- */
.q-modale {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.5);
}

.q-modale-boite {
  width: 100%;
  max-width: 380px;
  padding: 24px;
  border-radius: 16px;
  background: var(--carte);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
  text-align: center;
}

.q-modale-boite:focus {
  outline: none;
}

.q-modale-boite p {
  margin: 0 0 20px;
  font-size: 1.05rem;
  line-height: 1.5;
}

.q-modale-actions {
  display: flex;
  gap: 12px;
}

.q-modale-actions .q-btn {
  flex: 1 1 0;
  padding: 0 12px;
}

/* ---------- Remerciement et information ---------- */
.q-page-centree {
  background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
}

.q-carte-centrale {
  max-width: 440px;
  margin: 10vh auto 24px;
  padding: 36px 28px;
  border-radius: 20px;
  background: var(--carte);
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.1);
  text-align: center;
}

.q-page-centree .q-carte-centrale {
  width: calc(100% - 32px);
}

.q-carte-centrale > img {
  display: block;
  height: 50px;
  width: auto;
  max-width: 100%;
  margin: 0 auto 20px;
}

.q-carte-centrale h1 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--primaire);
}

.q-carte-centrale p {
  margin: 0 0 8px;
  color: #3b4a5f;
  line-height: 1.6;
}

.q-carte-centrale .q-cabinet {
  margin-top: 16px;
  font-weight: 700;
  color: var(--primaire);
}

.q-coche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--succes);
  animation: q-pop 0.4s ease both;
}

.q-coche svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Animations ---------- */
@keyframes q-apparition {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes q-pop {
  0% {
    transform: scale(0);
  }

  60% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Écrans larges ---------- */
@media (min-width: 600px) {
  .q-app {
    padding: 16px 16px 32px;
  }

  .q-etape {
    padding: 28px;
  }

  .q-carte,
  .q-pastille {
    font-size: 1rem;
  }
}

/* ---------- Très petits écrans (320 px) ---------- */
@media (max-width: 359px) {
  .q-etapes-liste {
    gap: 8px;
  }

  .q-btn {
    padding: 0 14px;
  }
}

@media print {
  .q-nav,
  .q-progression,
  .q-modale,
  .q-effacer {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .q-etape {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }
}