/* ==========================================================================================
   Questionnaire du cabinet — composition propre à la page (préfixe q-).
   Jetons et composants : cadran.css (extrait de la feuille de production). Mouvement : en réponse
   à un geste seulement, transform/opacité, sous prefers-reduced-motion: no-preference.
   ========================================================================================== */

/* Marque (symbole défini une fois dans index.html, jamais en display:none : le dégradé y vit). */
.q-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.q-lg1{ stop-color:var(--lg1); }
.q-lg2{ stop-color:var(--lg2); }
.q-mark{ flex:none; width:30px; height:30px; }

/* Aller au contenu : premier arrêt du clavier. */
.q-skip{ position:absolute; left:12px; top:-80px; z-index:var(--z-progress); display:inline-flex; align-items:center; min-height:var(--ctl); padding:0 18px; border-radius:var(--r-pill); background:var(--ink); color:var(--dial); font-weight:var(--fw-sb); text-decoration:none; }
.q-skip:focus{ top:12px; }

.q-noscript{ max-width:480px; margin:15vh auto 0; padding:0 16px; font-size:var(--fs-m); }

/* ------------------------------------------------------------------------------------------
   Coquille : téléphone et tablette d'abord (barre du haut + rangée de parties collante),
   ordinateur dès 1100 px (colonne de gauche collante). .q-side disparaît au téléphone
   (display:contents) pour que la rangée colle sur toute la page.
   ------------------------------------------------------------------------------------------ */
.q-app{ min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"top save theme" "nav nav nav" "main main main"; align-items:center; }
.q-side{ display:contents; }
.q-top{ grid-area:top; display:flex; align-items:center; gap:10px; min-width:0; padding:10px 0 8px 16px; }
.q-brand{ display:flex; flex-direction:column; gap:1px; min-width:0; line-height:1.15; }
.q-brand > b{ font-size:var(--fs-m); font-weight:var(--fw-t); }
.q-brand-cab{ font-size:var(--fs-xs); font-weight:var(--fw-m); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.q-save{ grid-area:save; margin:0 2px 0 8px; }
.q-theme{ grid-area:theme; margin-right:6px; }
.q-local{ display:none; }
.q-nav{ grid-area:nav; position:sticky; top:0; z-index:var(--z-nav); align-self:start; min-width:0; padding:6px 10px; background:var(--ground); border-bottom:1px solid var(--hair); }
.q-main{ grid-area:main; align-self:start; min-width:0; padding:16px 16px 56px; }
.q-main:focus{ outline:none; }

/* Rangée de parties (téléphone, tablette) */
.q-prog-t, .q-nav > .prog{ display:none; }
.q-steps{ list-style:none; margin:0; padding:0; display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
.q-steps::-webkit-scrollbar{ display:none; }
.q-step{ flex:none; }
.q-step > a{ position:relative; display:flex; align-items:center; gap:8px; min-height:var(--tap); min-width:var(--tap); padding:0 12px 0 7px; border-radius:var(--r-pill); color:var(--ink-2); font-weight:var(--fw-sb); font-size:var(--fs-s); text-decoration:none; white-space:nowrap; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.q-step > a[aria-current="true"]{ background:var(--sunk); color:var(--ink); font-weight:var(--fw-b); }
.q-step-c{ display:none; }
@media (max-width:759px){
  .q-step > a{ justify-content:center; padding:0 7px; }
  .q-step-l{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

/* Ordinateur : colonne de gauche collante */
@media (min-width:1100px){
  /* Le fond peint la colonne sur toute la hauteur : la colonne collante (100vh) reste d'un seul tenant. */
  .q-app{ grid-template-columns:220px minmax(0,1fr); grid-template-areas:"side main"; align-items:start; background:linear-gradient(90deg, var(--dial) 0 219px, var(--hair) 219px 220px, transparent 220px); }
  .q-side{ --surface:var(--dial); grid-area:side; position:sticky; top:0; height:100vh; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto minmax(0,1fr) auto auto; grid-template-areas:"top theme" "nav nav" "save save" "local local"; align-items:center; padding:18px 10px 16px 12px; background:var(--dial); border-right:1px solid var(--hair); }
  .q-top{ padding:0 0 0 6px; }
  .q-theme{ margin:0; }
  .q-nav{ position:static; align-self:stretch; min-height:0; margin-top:20px; padding:0; overflow-y:auto; background:transparent; border:0; scrollbar-width:thin; }
  .q-prog-t{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 8px 8px; font-size:var(--fs-xs); font-weight:var(--fw-sb); color:var(--ink-2); }
  .q-prog-t b{ color:var(--ink); font-size:var(--fs-s); font-variant-numeric:tabular-nums; }
  .q-nav > .prog{ display:block; margin:0 8px 14px; }
  .q-steps{ flex-direction:column; overflow:visible; }
  .q-step > a{ gap:12px; min-height:46px; padding:0 10px 0 8px; border-radius:var(--r-m); white-space:normal; line-height:1.2; }
  .q-step > a[aria-current="true"]::before{ content:''; position:absolute; left:-12px; top:50%; width:3px; height:22px; margin-top:-11px; border-radius:0 2px 2px 0; background:var(--accent); }
  .q-step-l{ flex:1; min-width:0; }
  .q-step-c{ display:block; flex:none; font-size:var(--fs-xs); font-weight:var(--fw-sb); color:var(--ink-2); font-variant-numeric:tabular-nums; }
  .q-step-c:empty{ display:none; }
  .q-step.q-step-end{ margin-top:6px; padding-top:6px; border-top:1px solid var(--hair); }
  .q-save{ justify-self:start; margin:12px 0 0 4px; }
  .q-local{ grid-area:local; display:flex; align-items:center; gap:6px; margin:8px 0 0 12px; font-size:var(--fs-xs); font-weight:var(--fw-m); color:var(--ink-2); }
  .q-local .ms{ font-size:17px; }
  .q-main{ padding:28px 32px 80px; }
}

/* Point d'une partie : un petit cadran rempli à la part des questions répondues. */
.q-dot{ position:relative; flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--line-ctl); background:conic-gradient(var(--work) calc(var(--p, 0) * 1turn), var(--line-ctl) 0); color:var(--ink-2); font-size:var(--fs-xs); font-weight:var(--fw-b); font-stretch:var(--wide); font-variant-numeric:tabular-nums; line-height:1; }
.q-dot::before{ content:''; position:absolute; inset:2px; border-radius:50%; background:var(--surface); }
.q-dot > *{ position:relative; }
.q-dot .ms{ font-size:17px; }
.q-dot.is-fait{ background:var(--ok-ic); color:var(--dial); }
.q-dot.is-fait::before{ display:none; }
/* Faite : une coche ; dans la rangée du téléphone, le numéro reste (repère), sur le vert. */
.q-dot-ok{ display:none; }
.q-dot.is-fait > .q-dot-ok{ display:inline-block; }
.q-dot.is-fait > .q-dot-n{ display:none; }
@media (max-width:1099px){
  .q-steps .q-dot.is-fait > .q-dot-ok{ display:none; }
  .q-steps .q-dot.is-fait > .q-dot-n{ display:inline; }
}
.q-dot.is-end{ background:var(--ink); color:var(--dial); }
.q-dot.is-end::before{ display:none; }
.q-dot.lg{ width:40px; height:40px; font-size:var(--fs-m); }
.q-dot.lg::before{ inset:3px; }
.q-dot.lg .ms{ font-size:21px; }
.q-step > a[aria-current="true"] .q-dot:not(.is-fait):not(.is-end){ color:var(--ink); }

/* ------------------------------------------------------------------------------------------
   Page
   ------------------------------------------------------------------------------------------ */
.q-page{ width:100%; max-width:1000px; margin-inline:auto; }
.q-page > * + *{ margin-top:16px; }
@media (min-width:900px){ .q-page > * + *{ margin-top:22px; } }
.q-head{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 18px; }
.q-head-t{ flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:6px; }
.q-sub{ font-size:var(--fs-m); color:var(--ink-2); }
.q-ex{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; max-width:100%; }
@media (max-width:640px){ .q-ex{ align-items:flex-start; } }

/* En-tête du questionnaire : cabinet, canton, personne qui répond */
.q-id-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr); align-items:end; gap:16px; }
@media (max-width:759px){ .q-id-grid{ grid-template-columns:minmax(0,1fr); } }
.q-privacy{ display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); font-weight:var(--fw-m); color:var(--ink-2); line-height:1.35; }
.q-privacy .ms{ font-size:18px; }
@media (min-width:1100px){ .q-id > .q-privacy{ display:none; } }

/* Partie */
.q-part{ scroll-margin-top:68px; }
@media (min-width:1100px){ .q-part{ scroll-margin-top:24px; } }
.q-part-head{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; }
.q-part-t{ margin-right:auto; font-size:var(--fs-xl); font-weight:var(--fw-t); line-height:1.2; letter-spacing:-.005em; }
.q-part-t:focus-visible{ outline-offset:4px; border-radius:4px; }
.q-qs{ display:flex; flex-direction:column; }

/* Question : libellé et aide à gauche, réponse à droite (ordinateur) ; empilés au téléphone. */
.q-row{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding:16px 0; }
.q-row + .q-row{ border-top:1px solid var(--hair); }
.q-row:last-child{ padding-bottom:4px; }
.q-q{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.q-l{ font-size:var(--fs-m); font-weight:var(--fw-sb); color:var(--ink); line-height:1.3; }
.q-aide{ font-size:var(--fs-s); color:var(--ink-2); line-height:1.4; }
/* Étiquette d'un libellé (« Facultatif », « Conseillé ») : un contour, jamais une couleur d'état. */
.q-tag{ display:inline-flex; align-items:center; min-height:20px; padding:0 8px; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px var(--hair-2); color:var(--ink-2); font-size:var(--fs-xs); font-weight:var(--fw-sb); line-height:1; white-space:nowrap; vertical-align:middle; }
.q-l .q-tag{ margin-left:8px; position:relative; top:-1px; }
/* Une phrase d'information sous un libellé (DentalSystems administrateur). */
.q-note{ display:flex; align-items:flex-start; gap:8px; max-width:560px; font-size:var(--fs-s); font-weight:var(--fw-m); color:var(--ink); line-height:1.4; }
.q-note .ms{ font-size:19px; color:var(--info-ic); margin-top:-1px; }
/* Un champ et sa pastille d'état sur une ligne (passent l'un sous l'autre au besoin). */
.q-inline{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; max-width:100%; }
/* Pastille d'état d'un champ (« Ne sait pas », « À demander »…) : cochée, couleur des points à reprendre. */
button.chip.q-bascule{ align-self:flex-start; }
button.chip.q-bascule .ms{ color:var(--ink-2); }
button.chip.q-bascule[aria-pressed="true"]{ background:var(--warn-bg); color:var(--warn-ink); box-shadow:inset 0 0 0 1.5px var(--warn-ic); }
button.chip.q-bascule[aria-pressed="true"] .ms{ color:var(--warn-ic); }
/* Champ remplacé par un état : contour en pointillé ; sa saisie attend, rien n'est perdu. */
:is(.input, .select):disabled{ border-style:dashed; background:transparent; color:var(--ink-2); cursor:not-allowed; opacity:1; }
.input:disabled::placeholder{ color:var(--ink-2); }
.affix.is-off{ border-style:dashed; background:transparent; }
/* État d'un chiffre ou d'une adresse (menu) : discret tant qu'aucun état n'est choisi. */
.select.q-etat-s{ color:var(--ink-2); font-weight:var(--fw-sb); }
.select.q-etat-s.is-set{ background-color:var(--warn-bg); color:var(--warn-ink); border-color:var(--warn-ic); box-shadow:inset 0 0 0 1px var(--warn-ic); }
/* Sous-titre dans une partie (Soldes de chacun, Absences et congés) ; sa légende juste dessous. */
.q-sub-t{ display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:18px; border-top:1px solid var(--hair); font-size:var(--fs-l); font-weight:var(--fw-t); line-height:1.25; }
.q-sub-t .ms{ font-size:21px; color:var(--ink-2); }
.q-qs > .q-sub-t:first-child{ margin-top:6px; padding-top:0; border-top:0; }
.q-sub-t + .q-legend{ margin-top:10px; }
.q-a{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-width:0; }
.q-a > *{ max-width:100%; }
@media (min-width:760px){
  .q-row{ grid-template-columns:232px minmax(0,1fr); gap:10px 28px; }
  .q-q{ padding-top:11px; }
}
.q-w-s{ width:180px; }
.q-w-m{ width:260px; }
.q-w-l{ width:min(100%, 420px); }
.q-w-time{ width:140px; }
.q-w-xl{ width:min(100%, 560px); }
.q-pair{ display:grid; grid-template-columns:repeat(2, minmax(0, 280px)); gap:12px 14px; width:100%; }
.q-pair.q-pair-s{ grid-template-columns:190px 140px; }
@media (max-width:559px){
  .q-pair{ grid-template-columns:minmax(0,1fr); }
  .q-pair.q-pair-s{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

/* Choix en pastilles (plus de trois options ou libellés longs) : elles passent à la ligne. */
.q-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.q-opt{ position:relative; display:inline-flex; align-items:center; gap:7px; min-height:var(--ctl); padding:0 18px; border-radius:var(--r-pill); background:var(--dial); color:var(--ink); box-shadow:inset 0 0 0 1px var(--hair-2); font-weight:var(--fw-sb); font-size:var(--fs-s); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.q-opt .ms{ font-size:19px; margin-left:-4px; color:var(--ink-2); }
.q-opt > input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.q-opt.on{ background:var(--ink); color:var(--dial); box-shadow:none; }
.q-opt.on .ms{ color:var(--dial); }
.q-opt:focus-within{ outline:var(--focus-w) solid var(--focus); outline-offset:2px; }
@supports selector(:has(a)){
  .q-opt:focus-within{ outline:none; }
  .q-opt:has(> input:focus-visible){ outline:var(--focus-w) solid var(--focus); outline-offset:2px; }
}
/* Un choix qui est un état (« Ne sait pas », « À fixer »…), choisi : couleur des points à reprendre. */
.seg > label.q-etat-o.on, .q-opt.q-etat-o.on{ background:var(--warn-bg); color:var(--warn-ink); box-shadow:inset 0 0 0 1.5px var(--warn-ic); }
.q-opt.q-etat-o.on .ms{ color:var(--warn-ic); }
/* Plusieurs choix (format de l'export) : la même pastille, en bouton qui se coche. */
button.q-opt{ border:0; }
button.q-opt:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:2px; }
button.q-opt:focus:not(:focus-visible){ outline:none; }

/* Suite d'une réponse (qui, quand) : un creux sous le choix qui l'ouvre. */
.q-suite{ --surface:var(--sunk); width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:14px 16px 16px; border-radius:var(--r-l); background:var(--sunk); }
.q-suite > *{ max-width:100%; }
.q-who{ display:flex; flex-wrap:wrap; gap:8px; }
.q-who > .chip{ max-width:100%; }
.q-who-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.q-dlist{ display:flex; flex-direction:column; gap:10px; width:100%; }
.q-drow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.q-drow-n{ min-width:140px; font-size:var(--fs-s); font-weight:var(--fw-sb); }
.q-days{ display:flex; flex-wrap:wrap; gap:6px; }
button.chip.q-dchip{ min-width:44px; justify-content:center; padding:0 10px; }

/* Listes à lignes (absences, congés, périodes, fériés) */
.q-entries-w{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100%; }
.q-entries{ display:flex; flex-direction:column; gap:10px; width:100%; }
.q-entries:empty{ display:none; }
.q-entry{ display:grid; gap:10px; align-items:end; width:100%; }
.q-entry.c-pdb{ grid-template-columns:minmax(0, 260px) 190px auto 44px; }
.q-entry.c-pdd, .q-entry.c-ndd{ grid-template-columns:minmax(0, 260px) 190px 190px 44px; }
.q-entry.c-pj{ grid-template-columns:minmax(0, 260px) 190px 44px; }
.q-entry.c-dd{ grid-template-columns:190px 190px 44px; }
.q-entry.c-d{ grid-template-columns:190px 44px; }
/* « Date inconnue » : la pastille au niveau du champ de date (36 px centrés sur 44). */
.q-entry > .q-ebascule{ align-self:end; justify-self:start; margin-bottom:4px; }
@media (max-width:899px){
  .q-entry.c-pdd, .q-entry.c-ndd, .q-entry.c-pdb{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px; }
  .q-entry.c-pdd > :first-child, .q-entry.c-ndd > :first-child, .q-entry.c-pdb > :first-child{ grid-column:1 / 3; grid-row:1; }
  .q-entry.c-pdd > .q-rm, .q-entry.c-ndd > .q-rm, .q-entry.c-pdb > .q-rm{ grid-column:3; grid-row:1; }
  .q-entry.c-pdb > .q-ebascule{ grid-column:2; grid-row:2; }
}
/* Téléphone : un champ par ligne (une date entière se lit), « Retirer » sur la première. */
@media (max-width:559px){
  .q-entry.c-pdb, .q-entry.c-pdd, .q-entry.c-ndd, .q-entry.c-pj, .q-entry.c-dd, .q-entry.c-d{ grid-template-columns:minmax(0,1fr) 44px; }
  .q-entry > .field{ grid-column:1; }
  .q-entry.c-pdb > :first-child, .q-entry.c-pdd > :first-child, .q-entry.c-ndd > :first-child, .q-entry.c-pj > :first-child{ grid-column:1; }
  .q-entry > .q-rm{ grid-column:2; grid-row:1; align-self:end; }
  .q-entry.c-pdb > .q-ebascule{ grid-column:1; grid-row:auto; margin-bottom:0; }
  .q-suite{ padding:12px 12px 14px; }
  .q-days{ gap:4px; }
}

/* Heures d'ouverture : un interrupteur par jour, puis de … à … */
.q-hours{ display:flex; flex-direction:column; width:100%; max-width:520px; }
.q-hrow{ display:grid; grid-template-columns:48px 96px minmax(0,1fr); align-items:center; gap:8px 14px; min-height:56px; padding:4px 0; }
.q-hrow + .q-hrow{ border-top:1px solid var(--hair); }
.q-hday{ font-size:var(--fs-m); font-weight:var(--fw-sb); }
.q-hrow.is-off .q-hday{ color:var(--ink-2); font-weight:var(--fw-m); }
.q-htimes{ display:flex; align-items:center; gap:8px; min-width:0; }
.q-htimes .field{ width:128px; }
.q-hsep{ color:var(--ink-2); }
.q-closed{ font-size:var(--fs-s); font-weight:var(--fw-m); color:var(--ink-2); }
@media (max-width:559px){
  .q-hrow{ grid-template-columns:48px minmax(0,1fr); }
  .q-hrow > .q-htimes, .q-hrow > .q-closed{ grid-column:2; }
  .q-htimes .field{ width:auto; flex:1; }
}

/* Notes d'une partie : une icône, une ligne. */
.q-notes{ list-style:none; margin:4px 0 6px; padding:0; display:flex; flex-direction:column; gap:8px; }
.q-notes li{ display:flex; align-items:flex-start; gap:10px; font-size:var(--fs-s); color:var(--ink); line-height:1.4; }
.q-notes .ms{ font-size:19px; color:var(--ink-2); margin-top:-1px; }

/* Badge de midi : les quatre badges du jour, midi en accent. */
.q-midi{ display:flex; flex-direction:column; gap:12px; margin:4px 0 6px; }
.q-four{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.q-four-i{ display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px 0 10px; border-radius:var(--r-pill); background:var(--sunk); color:var(--ink); font-size:var(--fs-s); font-weight:var(--fw-sb); }
.q-four-i .ms{ font-size:18px; color:var(--ink-2); }
.q-four-i.is-midi{ background:var(--accent-soft); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--accent); }
.q-four-i.is-midi .ms{ color:var(--accent); }
.q-four-sep{ font-size:16px; color:var(--steel); }

/* Légende d'un tableau : une icône, le nom de la colonne en gras, ce qu'elle attend. */
.q-legend b{ font-weight:var(--fw-t); }

/* En-tête d'un tableau (ordinateur seulement) : le nom de chaque colonne, et ce qu'elle attend en petit. */
.q-thead{ display:none; }
.q-thead > span{ display:flex; flex-direction:column; justify-content:flex-end; gap:2px; min-width:0; min-height:2.8em; }
.q-thead b{ font-size:var(--fs-xs); font-weight:var(--fw-t); color:var(--ink); line-height:1.2; }
.q-thead small{ font-size:var(--fs-xs); font-weight:var(--fw-m); color:var(--ink-2); line-height:1.2; }

/* Tableau des personnes (partie 2) : cartes au téléphone et à la tablette, tableau dès 1240 px. */
.q-people{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:6px; }
.q-people-list{ display:flex; flex-direction:column; gap:10px; width:100%; }
.q-person{ --surface:var(--sunk); position:relative; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:10px 12px; width:100%; padding:6px 12px 14px 14px; border-radius:var(--r-l); background:var(--sunk); }
.q-person-n{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:40px; }
.q-person-t{ font-size:var(--fs-s); font-weight:var(--fw-t); color:var(--ink-2); }
.q-person-n > .q-rm{ margin-right:-8px; }
.q-pf{ grid-column:span 12; }
@media (min-width:560px){
  .q-pf-email{ grid-column:span 7; } .q-pf-email_etat{ grid-column:span 5; }
  .q-pf-poste, .q-pf-badge{ grid-column:span 6; }
}
@media (min-width:760px){
  .q-pf-nom{ grid-column:span 4; } .q-pf-email{ grid-column:span 5; } .q-pf-email_etat{ grid-column:span 3; }
}
@media (min-width:1240px){
  .q-people-head, .q-person{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) 150px minmax(0,1fr) 172px 32px; gap:6px 8px; }
  .q-people-head{ width:100%; padding:0 0 2px; }
  .q-people-list{ gap:6px; }
  .q-person{ --surface:var(--dial); padding:0; border-radius:0; background:transparent; }
  .q-person-n{ display:contents; }
  .q-person-t{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .q-person-n > .q-rm{ grid-column:6; grid-row:1; align-self:start; width:32px; height:44px; margin:0; border-radius:var(--r-s); }
  /* La cellule s'efface : le champ prend sa colonne, un message court sous la ligne, de sa colonne à la fin. */
  .q-pf{ display:contents; }
  .q-pf > :is(.input, .select, .affix){ grid-row:1; min-width:0; }
  .q-pf-nom > :is(.input, .select, .affix){ grid-column:1; } .q-pf-email > :is(.input, .select, .affix){ grid-column:2; }
  .q-pf-email_etat > :is(.input, .select, .affix){ grid-column:3; } .q-pf-poste > :is(.input, .select, .affix){ grid-column:4; }
  .q-pf-badge > :is(.input, .select, .affix){ grid-column:5; }
  .q-pf > .field-error{ grid-column:1 / -1; }
  .q-pf-email > .field-error{ grid-column:2 / -1; }
  .q-pf > label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .q-person :is(.input, .select){ padding-inline:10px; font-size:var(--fs-m); font-stretch:var(--narrow); }
  .q-person .select{ padding-right:30px; background-position:calc(100% - 16px) 52%, calc(100% - 11px) 52%; }
}

/* Soldes de chacun (partie 5) : une carte par personne, tableau dès 1240 px. Chaque chiffre a son état. */
.q-soldes{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.q-soldes-list{ display:flex; flex-direction:column; gap:10px; width:100%; }
.q-solde{ --surface:var(--sunk); display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:12px; width:100%; padding:12px 14px 14px; border-radius:var(--r-l); background:var(--sunk); }
.q-solde-n{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-width:0; }
.q-solde-t{ font-size:var(--fs-m); font-weight:var(--fw-t); color:var(--ink); overflow-wrap:anywhere; }
.q-solde-p{ font-size:var(--fs-xs); font-weight:var(--fw-m); color:var(--ink-2); }
.q-solde .chip.q-solde-c{ background:var(--dial); box-shadow:inset 0 0 0 1px var(--hair-2); }
.q-sf{ grid-column:span 12; }
.q-sf .form-hint{ margin-top:-2px; }
.q-val{ display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.q-val > :is(.affix, .input){ flex:1 1 120px; min-width:0; }
.q-val > .select{ flex:1 1 140px; width:auto; min-width:0; }
.q-sf-remarque .textarea{ min-height:64px; }
@media (min-width:760px){
  .q-sf-droit, .q-sf-restantes, .q-sf-sup{ grid-column:span 4; }
  .q-val{ flex-direction:column; flex-wrap:nowrap; }
  .q-val > :is(.affix, .input, .select){ flex:none; width:100%; }
}
@media (min-width:1240px){
  .q-soldes-head, .q-solde{ display:grid; grid-template-columns:minmax(0,1fr) 150px 150px 150px minmax(0,1.4fr); gap:8px 12px; }
  .q-soldes-head{ padding:0 0 4px; }
  .q-soldes.is-vide .q-soldes-head{ display:none; }
  .q-soldes-list{ gap:0; }
  .q-solde{ --surface:var(--dial); padding:10px 0; border-radius:0; background:transparent; border-top:1px solid var(--hair); }
  .q-solde-n{ grid-column:auto; flex-direction:column; align-items:flex-start; gap:3px; padding-top:11px; }
  .q-sf{ grid-column:auto; }
  .q-sf > label, .q-sf > .form-hint{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .q-val{ gap:6px; }
  .q-solde :is(.input, .select){ font-size:var(--fs-m); font-stretch:var(--narrow); }
  .q-solde .affix > .input{ padding-right:2px; }
  .q-solde .unit{ padding:0 12px 0 0; }
  .q-solde .select.q-etat-s{ min-height:36px; padding:6px 30px 6px 12px; font-size:var(--fs-s); background-position:calc(100% - 16px) 52%, calc(100% - 11px) 52%; }
  .q-sf-remarque .textarea{ min-height:86px; }
}
.q-undo-w:empty{ display:none; }
.q-undo-w{ width:100%; }
.q-undo{ min-height:52px; padding:6px 6px 6px 14px; }
.q-undo .btn{ margin-left:auto; }

/* Terminer : fiche, extrait, puis effacement, de haut en bas */
.q-missing{ display:flex; flex-direction:column; gap:10px; }
.q-missing .cluster{ --gap:8px; }
.q-outs{ display:flex; flex-direction:column; gap:14px; }
.q-out{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.card.q-out > * + *{ margin-top:0; }
.q-out-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; width:100%; }
.q-out-txt{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.q-out-row > .q-out-txt{ flex:1 1 260px; }
.q-out-t{ display:flex; align-items:center; gap:10px; font-size:var(--fs-l); font-weight:var(--fw-t); line-height:1.2; }
.q-out-t .ms{ font-size:21px; color:var(--ink-2); }
.q-kv{ width:100%; margin:0; }
@media (min-width:900px){ .q-kv{ column-count:2; column-gap:32px; } }
.q-kv-r{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:2px 14px; padding:8px 0; border-bottom:1px solid var(--hair-2); font-size:var(--fs-s); line-height:1.4; break-inside:avoid; page-break-inside:avoid; }
.q-kv dt{ color:var(--ink-2); font-weight:var(--fw-m); }
.q-kv dd{ margin:0; color:var(--ink); font-weight:var(--fw-sb); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
@media (max-width:420px){ .q-kv-r{ grid-template-columns:minmax(0,1fr); } }
.q-verdict{ display:flex; align-items:flex-start; gap:8px; font-size:var(--fs-s); font-weight:var(--fw-sb); color:var(--ink); line-height:1.35; overflow-wrap:anywhere; }
/* Vide, la zone d'annonce reste dans l'arbre d'accessibilité (une zone née avec son texte n'est pas lue). */
.q-verdict:empty{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.q-verdict .ms{ font-size:19px; color:var(--ok-ic); margin-top:-1px; }
/* Points à reprendre avant l'installation : par partie, l'état en un mot (icône, couleur), la question, la remarque. */
.q-out-t > .chip{ margin-left:2px; }
.q-points-g{ display:flex; flex-direction:column; width:100%; }
.q-points-p{ margin:4px 0 2px; font-size:var(--fs-s); font-weight:var(--fw-t); color:var(--ink-2); }
.q-points-l{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; width:100%; }
.q-points-l > li + li{ border-top:1px solid var(--hair-2); }
.q-pt{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; min-height:48px; padding:8px; margin:0 -8px; border-radius:var(--r-m); color:var(--ink); text-decoration:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.q-pt > .chip{ flex:none; }
.q-pt > .chip:not(.warn){ background:var(--dial); box-shadow:inset 0 0 0 1px var(--hair-2); }
.q-pt-q{ flex:1 1 220px; min-width:0; font-size:var(--fs-s); font-weight:var(--fw-sb); line-height:1.35; overflow-wrap:anywhere; }
.q-pt-q.q-pt-n{ flex:0 1 auto; }
.q-pt-q b{ font-weight:var(--fw-b); }
.q-pt-r{ flex:1 1 260px; min-width:0; font-size:var(--fs-s); color:var(--ink); line-height:1.4; overflow-wrap:anywhere; }
.q-erase{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; padding-top:18px; border-top:1px solid var(--hair); }
.q-erase-t{ flex:1 1 260px; min-width:0; display:flex; flex-direction:column; gap:3px; }

/* Confirmation sur place (jamais confirm()) */
.q-confirm{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; width:100%; padding:10px 10px 10px 14px; border-radius:var(--r-l); background:var(--bad-bg); color:var(--bad-ink); font-size:var(--fs-s); font-weight:var(--fw-sb); line-height:1.35; }
.q-confirm > .ms{ font-size:21px; color:var(--bad-ic); }
.q-confirm-t{ flex:1 1 220px; min-width:0; }
.q-confirm .btn{ background:var(--dial); color:var(--ink); box-shadow:inset 0 0 0 1px var(--hair-2); }
.q-confirm .btn.btn-danger{ background:var(--bad-ic); color:var(--dial); box-shadow:none; }
.q-confirm .btn.btn-danger .ms{ color:var(--dial); }
.q-confirm.q-confirm-ex{ width:auto; max-width:420px; background:var(--info-bg); color:var(--info-ink); }
.q-confirm.q-confirm-ex > .ms{ color:var(--info-ic); }

/* Accueil (sans ?cabinet=) et page « Effacé » */
.q-start{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px 16px; }
.q-start-bar{ width:100%; max-width:560px; display:flex; justify-content:flex-end; }
.q-start-card{ --surface:var(--dial); width:100%; max-width:560px; display:flex; flex-direction:column; gap:20px; padding:30px 28px; border-radius:var(--r-2xl); background:var(--dial); box-shadow:inset 0 0 0 1px var(--hair); }
@media (max-width:640px){ .q-start-card{ padding:24px 18px; } }
.q-start-head{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.q-start-head .q-mark{ width:40px; height:40px; }
.q-start-t{ font-size:1.625rem; font-weight:var(--fw-sb); letter-spacing:-.01em; line-height:1.15; }
.q-start-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.q-start-form > .field{ flex:1 1 240px; }
.q-saved-t{ font-size:var(--fs-s); font-weight:var(--fw-t); color:var(--ink-2); }
.q-saved{ list-style:none; margin:0; padding:0; }
.q-saved > li + li{ border-top:1px solid var(--hair); }
.q-saved a{ display:flex; align-items:center; gap:12px; min-height:60px; padding:8px 8px; margin:0 -8px; border-radius:var(--r-m); color:var(--ink); text-decoration:none; }
.q-saved-n{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.q-saved-n b{ font-weight:var(--fw-sb); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.q-saved-n span{ font-size:var(--fs-xs); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.q-saved a > .ms{ color:var(--ink-2); }
.q-done{ align-items:center; text-align:center; }
.empty-ic.is-ok{ color:var(--ok-ic); }

/* Pression, transitions et survol des pièces propres à la page (mêmes jetons que le kit). */
:is(.q-opt, .q-step > a, .q-saved a):active{ transform:scale(.97); }
.q-pt:active{ transform:scale(.99); }
@media (prefers-reduced-motion: no-preference){
  :is(.q-opt, .q-step > a, .q-saved a, .q-pt){ transition:transform var(--t-fast) var(--ease-out), background-color var(--t-base) var(--ease-inout), color var(--t-base) var(--ease-inout), box-shadow var(--t-base) var(--ease-inout); }
  .q-dot{ transition:background-color var(--t-base) var(--ease-inout), color var(--t-base) var(--ease-inout); }
  .select.q-etat-s{ transition:background-color var(--t-base) var(--ease-inout), color var(--t-base) var(--ease-inout), border-color var(--t-base) var(--ease-inout); }
}
@media (hover:hover){
  .q-opt:not(.on):hover{ background:var(--sunk); }
  .q-suite .q-opt:not(.on):hover{ background:var(--dial); box-shadow:inset 0 0 0 1px var(--line-ctl); }
  .q-step > a:not([aria-current="true"]):hover{ color:var(--ink); background:var(--sunk); }
  .q-saved a:hover{ background:var(--sunk); }
  .q-pt:hover{ background:var(--dial); }
  .q-person button.chip.q-bascule:not([aria-pressed="true"]):hover, .q-suite button.chip.q-bascule:not([aria-pressed="true"]):hover{ background:var(--dial); }
}

/* ------------------------------------------------------------------------------------------
   Version imprimable (A4) : un document, pas un écran. Rendue à l'impression seulement.
   ------------------------------------------------------------------------------------------ */
.q-print{ display:none; }
@media print{
  @page{ size:A4; margin:14mm 13mm 15mm; }
  /* Papier : toujours clair, marges comprises, quel que soit le thème de l'écran. */
  :root{ color-scheme:light !important; }
  html, body{ background:#FFFFFF !important; }
  body > :not(.q-print):not(.q-defs){ display:none !important; }
  .q-print{ display:block; color:#111418; font:400 9.5pt/1.4 var(--f); -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .q-pr-head{ display:flex; align-items:center; gap:12px; padding-bottom:9pt; border-bottom:1.5pt solid #111418; }
  .q-pr-head .q-mark{ width:28pt; height:28pt; }
  .q-pr-id{ flex:1; min-width:0; }
  .q-pr-t{ font-size:16pt; font-weight:650; line-height:1.15; }
  .q-pr-meta{ margin-top:2pt; font-size:9.5pt; color:#3E4650; }
  .q-pr-ref{ text-align:right; font-size:8.5pt; color:#3E4650; font-variant-numeric:tabular-nums; }
  .q-pr-part{ margin-top:12pt; }
  .q-pr-h{ display:flex; align-items:baseline; gap:6pt; margin-bottom:4pt; font-size:11.5pt; font-weight:650; break-after:avoid; page-break-after:avoid; }
  .q-pr-st{ margin-left:auto; font-size:8.5pt; font-weight:600; color:#3E4650; }
  .q-pr-kv, .q-pr-grid{ width:100%; border-collapse:collapse; }
  .q-pr-kv th, .q-pr-kv td{ padding:3.5pt 0; border-top:.5pt solid #C9CED5; vertical-align:top; text-align:left; }
  .q-pr-kv th{ width:36%; padding-right:10pt; font-weight:500; color:#3E4650; }
  .q-pr-kv td{ font-weight:600; white-space:pre-wrap; overflow-wrap:anywhere; }
  .q-pr-kv tr, .q-pr-grid tr{ break-inside:avoid; page-break-inside:avoid; }
  .q-pr-grid{ margin-bottom:6pt; table-layout:fixed; font-size:8.5pt; font-variant-numeric:tabular-nums; }
  .q-pr-grid th{ padding:3pt 4pt; border-bottom:1pt solid #111418; text-align:left; vertical-align:bottom; font-weight:600; color:#3E4650; }
  .q-pr-grid td{ padding:3pt 4pt; border-bottom:.5pt solid #C9CED5; vertical-align:top; overflow-wrap:break-word; }
  .q-pr-id th:nth-child(1){ width:4%; } .q-pr-id th:nth-child(2){ width:24%; } .q-pr-id th:nth-child(3){ width:32%; }
  .q-pr-id th:nth-child(4){ width:22%; } .q-pr-id th:nth-child(5){ width:18%; }
  .q-pr-so th:nth-child(1){ width:4%; } .q-pr-so th:nth-child(2){ width:22%; } .q-pr-so th:nth-child(3){ width:13%; }
  .q-pr-so th:nth-child(4){ width:14%; } .q-pr-so th:nth-child(5){ width:12%; } .q-pr-so th:nth-child(6){ width:35%; }
  .q-pr-pts th:nth-child(1){ width:8%; } .q-pr-pts th:nth-child(2){ width:42%; } .q-pr-pts th:nth-child(3){ width:16%; } .q-pr-pts th:nth-child(4){ width:34%; }
  .q-pr-grid .q-pr-n{ text-align:right; }
  .q-pr-grid td.q-pr-n{ white-space:nowrap; }
  .q-pr-empty{ color:#6B7380; font-weight:400; }
  .q-pr-foot{ margin-top:14pt; padding-top:6pt; border-top:.5pt solid #C9CED5; font-size:8pt; color:#3E4650; }
}