/* Pages remplies par les patients (questionnaires en ligne). Écrit à la main, sans Tailwind : les couleurs viennent de la charte du cabinet via les variables posées sur (--couleur, --claire, --tres-claire, --foncee, --sur-couleur). */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 300; color: #1f2937; background: #f8fafc; line-height: 1.5; -webkit-text-size-adjust: 100%; } strong, b { font-weight: 600; } .entete { background: var(--claire); color: var(--foncee); } .entete-interieur, .contenu { max-width: 46rem; margin: 0 auto; padding: 0 1rem; } .entete-interieur { display: flex; align-items: center; gap: .9rem; padding-top: .9rem; padding-bottom: .9rem; } .entete img { height: 3rem; max-width: 9rem; object-fit: contain; } .monogramme { width: 3rem; height: 3rem; border-radius: 50%; background: var(--couleur); color: var(--sur-couleur); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 500; flex: none; } .identite .nom { font-weight: 500; } .identite .titre { font-size: .875rem; } .contenu { padding-top: 1.5rem; padding-bottom: 3rem; } h1 { font-size: 1.5rem; font-weight: 500; color: var(--foncee); margin: 0 0 .25rem; line-height: 1.25; } .reference { font-size: .8rem; color: #6b7280; margin: 0 0 1.25rem; } .pour { font-size: .95rem; margin: 0 0 1.25rem; } .carte { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.1rem; margin-bottom: 1rem; } .section-titre { font-size: 1.1rem; font-weight: 500; color: var(--foncee); margin: 1.75rem 0 .5rem; } .consigne { background: var(--tres-claire); border-radius: .75rem; padding: .85rem 1rem; margin-bottom: 1rem; font-size: .95rem; } .legende { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-bottom: 1rem; } .legende h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--foncee); margin: 0 0 .3rem; } .legende ol { list-style: none; margin: 0; padding: 0; font-size: .9rem; } .legende li span { display: inline-block; min-width: 1.6rem; font-weight: 600; color: var(--foncee); } .question { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .75rem; } .numero { flex: none; min-width: 1.75rem; height: 1.75rem; padding: 0 .4rem; border-radius: 999px; background: var(--couleur); color: var(--sur-couleur); font-size: .8rem; font-weight: 600; display: flex; align-items: center; justify-content: center; } .libelle { font-weight: 400; padding-top: .1rem; } .reponse + .reponse { margin-top: .8rem; } .reponse-titre { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: #6b7280; margin-bottom: .35rem; } .pastilles { display: flex; flex-wrap: wrap; gap: .4rem; } .pastilles label { flex: 1 1 0; min-width: 2.6rem; } .pastilles input, .liste input { position: absolute; opacity: 0; width: 1px; height: 1px; } .pastilles span { display: block; text-align: center; padding: .55rem .25rem; border: 1px solid #d1d5db; border-radius: .6rem; background: #fff; cursor: pointer; font-weight: 500; font-variant-numeric: tabular-nums; } .pastilles input:checked + span, .liste input:checked + span { background: var(--couleur); border-color: var(--couleur); color: var(--sur-couleur); } .pastilles input:focus-visible + span, .liste input:focus-visible + span { outline: 3px solid var(--claire); outline-offset: 1px; } .liste { display: grid; gap: .35rem; } .liste span { display: flex; gap: .75rem; align-items: center; padding: .55rem .75rem; border: 1px solid #d1d5db; border-radius: .6rem; background: #fff; cursor: pointer; } .liste span b { min-width: 1.2rem; text-align: center; } .liste .intermediaire span { color: #6b7280; padding-top: .3rem; padding-bottom: .3rem; } input[type=text], input[type=number] { width: 100%; font: inherit; font-weight: 400; padding: .6rem .75rem; border: 1px solid #d1d5db; border-radius: .6rem; margin-bottom: .6rem; background: #fff; } input[type=number] { max-width: 9rem; } input[type=text]:focus, input[type=number]:focus { outline: 2px solid var(--couleur); border-color: var(--couleur); } .erreurs { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: .75rem; padding: .85rem 1rem; margin-bottom: 1rem; } .erreurs ul { margin: .35rem 0 0; padding-left: 1.2rem; } .bouton { display: block; width: 100%; padding: .9rem; border: 0; border-radius: .8rem; background: var(--couleur); color: var(--sur-couleur); font: inherit; font-weight: 600; font-size: 1.05rem; cursor: pointer; } .bouton:hover { filter: brightness(.95); } .discret { font-size: .8rem; color: #6b7280; text-align: center; margin-top: 1rem; } .message { text-align: center; padding: 2.5rem 1rem; } .message h1 { margin-bottom: .75rem; }