/* Shared stylesheet: questionnaire, thank-you page, export view.
   Audience: hard-of-hearing adults, often seniors, often on a phone.
   Hence: large type, high contrast, big tap targets, no distractions. */

:root
    {
    --bg        : #f4f6f8;
    --card      : #ffffff;
    --ink       : #1b2733;
    --muted     : #4f5d6b;
    --line      : #cfd6dd;
    --accent    : #0b5fa5;
    --accent-bg : #e6f0fa;
    --ok        : #1d7a3d;
    --ok-bg     : #e6f5ea;
    --err       : #b0261c;
    --err-bg    : #fbe9e7;
    --radius    : 10px;
    }

*
    {
    box-sizing: border-box;
    }

html
    {
    font-size: 112.5%;              /* 18px base */
    -webkit-text-size-adjust: 100%;
    }

body
    {
    margin: 0;
    background: var( --bg );
    color: var( --ink );
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    }

main
    {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1rem 16px 3rem;
    }

h1
    {
    font-size: 1.7rem;
    line-height: 1.25;
    margin: 0.5rem 0 1rem;
    }

h2
    {
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
    }

p
    {
    margin: 0 0 0.9rem;
    }

a
    {
    color: var( --accent );
    }

.card
    {
    background: var( --card );
    border: 1px solid var( --line );
    border-radius: var( --radius );
    padding: 1.1rem 1.1rem 0.9rem;
    margin-bottom: 1.1rem;
    }

.intro .signature
    {
    color: var( --muted );
    font-style: italic;
    }

fieldset
    {
    border: 0;
    padding: 0;
    margin: 0 0 0.5rem;
    min-width: 0;
    }

legend
    {
    font-size: 1.15rem;
    font-weight: 600;
    padding: 0;
    margin-bottom: 0.6rem;
    }

label.field
    {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    }

.hint
    {
    color: var( --muted );
    font-size: 0.95rem;
    margin: -0.3rem 0 0.7rem;
    }

.required
    {
    color: var( --err );
    font-weight: 700;
    }

input[type="text"],
input[type="email"],
textarea
    {
    width: 100%;
    font: inherit;
    color: inherit;
    padding: 0.7rem 0.8rem;
    border: 2px solid var( --line );
    border-radius: var( --radius );
    background: #fff;
    }

textarea
    {
    min-height: 7rem;
    resize: vertical;
    }

input:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible
    {
    outline: 3px solid var( --accent );
    outline-offset: 2px;
    }

/* One choice per line: the whole box is the click target. */
.choice
    {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.5rem;
    border: 2px solid var( --line );
    border-radius: var( --radius );
    cursor: pointer;
    }

.choice input
    {
    width: 1.4rem;
    height: 1.4rem;
    margin: 0.15rem 0 0;
    flex: 0 0 auto;
    accent-color: var( --accent );
    }

.choice:hover
    {
    border-color: var( --accent );
    }

.choice:has( input:checked )
    {
    border-color: var( --accent );
    background: var( --accent-bg );
    }

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

/* Yes / no, side by side when there is room. */
.inline
    {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    }

.inline .choice
    {
    flex: 1 1 10rem;
    margin-bottom: 0;
    }

/* 0..5 scale: six equal buttons in a row. */
.scale
    {
    display: grid;
    grid-template-columns: repeat( 6, 1fr );
    gap: 0.4rem;
    margin-bottom: 1.1rem;
    }

.scale label
    {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2rem;
    border: 2px solid var( --line );
    border-radius: var( --radius );
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    }

.scale input
    {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    }

.scale label:hover
    {
    border-color: var( --accent );
    }

.scale label:has( input:checked )
    {
    border-color: var( --accent );
    background: var( --accent );
    color: #fff;
    }

.scale label:has( input:focus-visible )
    {
    outline: 3px solid var( --accent );
    outline-offset: 2px;
    }

.scale-legend
    {
    display: flex;
    justify-content: space-between;
    color: var( --muted );
    font-size: 0.9rem;
    margin: -0.8rem 0 1rem;
    }

.criterion
    {
    font-weight: 600;
    margin: 0 0 0.4rem;
    }

/* Group that failed validation. */
.invalid
    {
    border-color: var( --err );
    background: var( --err-bg );
    }

.error
    {
    color: var( --err );
    font-weight: 600;
    margin: 0 0 0.6rem;
    }

button.primary
    {
    display: block;
    width: 100%;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    background: var( --accent );
    border: 0;
    border-radius: var( --radius );
    padding: 1rem;
    cursor: pointer;
    }

button.primary:hover
    {
    background: #094c84;
    }

button.primary[disabled]
    {
    opacity: 0.6;
    cursor: wait;
    }

.notice
    {
    border-radius: var( --radius );
    padding: 1rem 1.1rem;
    margin-bottom: 1.1rem;
    border: 2px solid;
    }

.notice.ok
    {
    color: var( --ok );
    background: var( --ok-bg );
    border-color: var( --ok );
    }

.notice.err
    {
    color: var( --err );
    background: var( --err-bg );
    border-color: var( --err );
    }

/* Honeypot: invisible to people, present for robots. */
.hp
    {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    }

footer
    {
    color: var( --muted );
    font-size: 0.85rem;
    text-align: center;
    margin-top: 2rem;
    }

/* Export view */
table.answers
    {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var( --card );
    }

table.answers th,
table.answers td
    {
    border: 1px solid var( --line );
    padding: 0.4rem 0.5rem;
    vertical-align: top;
    text-align: left;
    }

table.answers th
    {
    background: var( --accent-bg );
    position: sticky;
    top: 0;
    }

.wide
    {
    max-width: none;
    overflow-x: auto;
    }

@media ( max-width: 480px )
    {
    html
        {
        font-size: 106%;
        }

    .scale label
        {
        min-height: 2.8rem;
        font-size: 1.1rem;
        }
    }

@media print
    {
    body
        {
        background: #fff;
        }

    .card
        {
        border: 0;
        padding: 0;
        }

    button
        {
        display: none;
        }
    }

/* ===== Admin area ======================================================== */

:root
    {
    --series-1 : #2a78d6;      /* single data hue, also "oui" */
    --series-2 : #eb6834;      /* "non" */
    --track    : #e9edf1;
    }

body.admin
    {
    font-size: 0.95rem;
    }

body.admin h1
    {
    font-size: 1.5rem;
    }

body.admin h2
    {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    }

body.admin h3
    {
    font-size: 1rem;
    margin: 0 0 0.4rem;
    }

main.wide
    {
    max-width: 72rem;
    overflow: visible;
    }

main.narrow
    {
    max-width: 26rem;
    padding-top: 3rem;
    }

.topnav
    {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 1rem;
    padding: 0.6rem 16px;
    background: var( --ink );
    color: #fff;
    }

.topnav .brand
    {
    font-weight: 700;
    margin-right: 0.5rem;
    }

.topnav a
    {
    color: #dfe7ef;
    text-decoration: none;
    padding: 0.3rem 0.2rem;
    border-bottom: 2px solid transparent;
    }

.topnav a:hover,
.topnav a.active
    {
    color: #fff;
    border-bottom-color: #fff;
    }

.topnav a.logout
    {
    margin-left: auto;
    }

/* KPI tiles */
.tiles
    {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 11rem, 1fr ) );
    gap: 0.7rem;
    margin-bottom: 1.1rem;
    }

.tile
    {
    background: var( --card );
    border: 1px solid var( --line );
    border-radius: var( --radius );
    padding: 0.8rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    }

.tlabel
    {
    color: var( --muted );
    font-size: 0.85rem;
    }

.tvalue
    {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    }

.tsub
    {
    color: var( --muted );
    font-size: 0.8rem;
    }

/* Horizontal bars */
.hbars
    {
    display: grid;
    gap: 0.45rem;
    }

.hrow
    {
    display: grid;
    grid-template-columns: minmax( 10rem, 2fr ) 3fr 6rem;
    align-items: center;
    gap: 0.8rem;
    }

.hlabel
    {
    font-size: 0.9rem;
    line-height: 1.3;
    }

.htrack
    {
    display: block;
    height: 20px;
    background: var( --track );
    border-radius: 4px;
    overflow: hidden;
    }

.hbar
    {
    display: block;
    height: 100%;
    min-width: 2px;
    background: var( --series-1 );
    border-radius: 0 4px 4px 0;
    }

.hval
    {
    font-weight: 600;
    white-space: nowrap;
    }

.hval small,
.legend small
    {
    color: var( --muted );
    font-weight: 400;
    }

/* Columns */
.cols
    {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 150px;
    padding-top: 1.2rem;
    }

.col
    {
    flex: 1 1 0;
    min-width: 0;
    max-width: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    }

.cval
    {
    font-size: 0.8rem;
    font-weight: 600;
    height: 1.1rem;
    }

.ctrack
    {
    flex: 1 1 auto;
    width: 100%;
    max-width: 24px;
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid var( --line );
    }

.cbar
    {
    display: block;
    width: 100%;
    background: var( --series-1 );
    border-radius: 4px 4px 0 0;
    }

.clabel
    {
    font-size: 0.8rem;
    color: var( --muted );
    margin-top: 0.2rem;
    white-space: nowrap;
    }

.multiples
    {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
    gap: 1.2rem 2rem;
    }

/* Two-segment share bar */
.grid2
    {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
    gap: 1.2rem 2.5rem;
    }

.strack
    {
    display: flex;
    gap: 2px;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
    background: var( --track );
    }

.s1 { background: var( --series-1 ); }
.s2 { background: var( --series-2 ); }

.legend
    {
    display: flex;
    gap: 1.2rem;
    margin-top: 0.4rem;
    font-weight: 600;
    }

.legend i
    {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 3px;
    margin-right: 0.35rem;
    vertical-align: -1px;
    }

.k1 { background: var( --series-1 ); }
.k2 { background: var( --series-2 ); }

/* Expectations */
.attente
    {
    border-top: 1px solid var( --line );
    padding: 0.7rem 0 0.3rem;
    }

.attente .who
    {
    font-weight: 600;
    margin-bottom: 0.2rem;
    }

.attente .who small
    {
    color: var( --muted );
    font-weight: 400;
    }

/* Lists and detail */
.toolbar
    {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    }

.toolbar input[type="search"]
    {
    flex: 1 1 18rem;
    font: inherit;
    padding: 0.5rem 0.7rem;
    border: 2px solid var( --line );
    border-radius: var( --radius );
    }

.toolbar .count
    {
    margin-left: auto;
    color: var( --muted );
    }

button.primary.small
    {
    display: inline-block;
    width: auto;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    }

button.danger
    {
    font: inherit;
    color: #fff;
    background: var( --err );
    border: 0;
    border-radius: var( --radius );
    padding: 0.6rem 1rem;
    cursor: pointer;
    }

.scroll
    {
    overflow-x: auto;
    }

table.answers th a
    {
    text-decoration: none;
    white-space: nowrap;
    }

table.answers td.num
    {
    text-align: center;
    }

table.detail
    {
    width: 100%;
    border-collapse: collapse;
    }

table.detail th,
table.detail td
    {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var( --line );
    }

table.detail th
    {
    width: 18rem;
    color: var( --muted );
    font-weight: 600;
    }

@media ( max-width: 600px )
    {
    .hrow
        {
        grid-template-columns: 1fr 5rem;
        }

    .hlabel
        {
        grid-column: 1 / -1;
        }

    table.detail th
        {
        width: auto;
        }
    }

/* Course selector under the top bar */
.stagebar
    {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.8rem;
    padding: 0.6rem 16px;
    background: var( --accent-bg );
    border-bottom: 1px solid var( --line );
    }

.stagebar label
    {
    font-weight: 600;
    }

.stagebar select
    {
    font: inherit;
    padding: 0.4rem 0.6rem;
    border: 2px solid var( --line );
    border-radius: var( --radius );
    background: #fff;
    max-width: 100%;
    }

.stagebar .bar
    {
    font: inherit;
    font-weight: 600;
    color: var( --accent );
    background: #fff;
    border: 2px solid var( --accent );
    border-radius: var( --radius );
    padding: 0.35rem 0.8rem;
    text-decoration: none;
    cursor: pointer;
    }

.stagebar .bar.activate
    {
    color: #fff;
    background: var( --ok );
    border-color: var( --ok );
    }

.stagebar .active-note
    {
    margin-left: auto;
    color: var( --muted );
    }

body.admin h1 small
    {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    color: var( --muted );
    }

.narrow-card
    {
    max-width: 30rem;
    }

.narrow-card input[type="date"]
    {
    width: 100%;
    font: inherit;
    padding: 0.6rem 0.8rem;
    border: 2px solid var( --line );
    border-radius: var( --radius );
    }

.stagebar .bar.delete
    {
    color: var( --err );
    border-color: var( --err );
    }

/* Access code: monospace, spaced, uppercase */
input.code,
strong.code
    {
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    }