/* Utilitaires métier et largeurs de progression (EX-016). */

.g8 { gap: 0.5rem; }
.g10 { gap: 0.625rem; }
.g12 { gap: 0.75rem; }
.g14 { gap: 0.875rem; }
.g20 { gap: 1.25rem; }

.col1 { grid-template-columns: 1fr; }
.col2 { grid-template-columns: 1fr 1fr; }
.col3 { grid-template-columns: 1fr 1fr 1fr; }
.col4 { grid-template-columns: repeat(4, 1fr); }
.col5 { grid-template-columns: repeat(5, 1fr); }
.col-corps-marge { grid-template-columns: 1fr 21.375rem; }
.col-legende-corps { grid-template-columns: 1.15fr 2fr; gap: 1.25rem; }

.mt4 { margin-top: 0.25rem; }
.mt6 { margin-top: 0.375rem; }
.mt16 { margin-top: 1rem; }
.mb3 { margin-bottom: 0.1875rem; }
.mb4 { margin-bottom: 0.25rem; }
.mb14 { margin-bottom: 0.875rem; }
.mb16 { margin-bottom: 1rem; }

.titre-encart { font-size: var(--bacs-font-size-body); font-weight: 600; margin-bottom: 0.25rem; }
.titre-erreur { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.375rem; }
.panneau-borde { border-left: 0.0625rem solid var(--line); border-radius: var(--r); }
.marque-nue { border: none; padding: 0 0 0.875rem; }
.marque-separee { border-bottom: 0.0625rem solid var(--line); padding: 0 0 1rem; }
.pastille-teal-dk { background: var(--teal-dk); }
.sur-fonce-attenue { color: var(--grey); }
.etroit { max-width: 20rem; }
.rangee-enveloppante { flex-wrap: wrap; gap: 0.5rem; }

.accent-teal { color: var(--teal); }
.accent-teal-dk { color: var(--teal-dk); }
.accent-teal-lt { color: var(--teal-lt); }
.accent-amber { color: var(--amber); }
.accent-green { color: var(--green); }
.accent-grey { color: var(--grey); }
.accent-ink { color: var(--ink); }

.l0 { width: 0%; }
.l1 { width: 1%; }
.l2 { width: 2%; }
.l3 { width: 3%; }
.l4 { width: 4%; }
.l5 { width: 5%; }
.l6 { width: 6%; }
.l7 { width: 7%; }
.l8 { width: 8%; }
.l9 { width: 9%; }
.l10 { width: 10%; }
.l11 { width: 11%; }
.l12 { width: 12%; }
.l13 { width: 13%; }
.l14 { width: 14%; }
.l15 { width: 15%; }
.l16 { width: 16%; }
.l17 { width: 17%; }
.l18 { width: 18%; }
.l19 { width: 19%; }
.l20 { width: 20%; }
.l21 { width: 21%; }
.l22 { width: 22%; }
.l23 { width: 23%; }
.l24 { width: 24%; }
.l25 { width: 25%; }
.l26 { width: 26%; }
.l27 { width: 27%; }
.l28 { width: 28%; }
.l29 { width: 29%; }
.l30 { width: 30%; }
.l31 { width: 31%; }
.l32 { width: 32%; }
.l33 { width: 33%; }
.l34 { width: 34%; }
.l35 { width: 35%; }
.l36 { width: 36%; }
.l37 { width: 37%; }
.l38 { width: 38%; }
.l39 { width: 39%; }
.l40 { width: 40%; }
.l41 { width: 41%; }
.l42 { width: 42%; }
.l43 { width: 43%; }
.l44 { width: 44%; }
.l45 { width: 45%; }
.l46 { width: 46%; }
.l47 { width: 47%; }
.l48 { width: 48%; }
.l49 { width: 49%; }
.l50 { width: 50%; }
.l51 { width: 51%; }
.l52 { width: 52%; }
.l53 { width: 53%; }
.l54 { width: 54%; }
.l55 { width: 55%; }
.l56 { width: 56%; }
.l57 { width: 57%; }
.l58 { width: 58%; }
.l59 { width: 59%; }
.l60 { width: 60%; }
.l61 { width: 61%; }
.l62 { width: 62%; }
.l63 { width: 63%; }
.l64 { width: 64%; }
.l65 { width: 65%; }
.l66 { width: 66%; }
.l67 { width: 67%; }
.l68 { width: 68%; }
.l69 { width: 69%; }
.l70 { width: 70%; }
.l71 { width: 71%; }
.l72 { width: 72%; }
.l73 { width: 73%; }
.l74 { width: 74%; }
.l75 { width: 75%; }
.l76 { width: 76%; }
.l77 { width: 77%; }
.l78 { width: 78%; }
.l79 { width: 79%; }
.l80 { width: 80%; }
.l81 { width: 81%; }
.l82 { width: 82%; }
.l83 { width: 83%; }
.l84 { width: 84%; }
.l85 { width: 85%; }
.l86 { width: 86%; }
.l87 { width: 87%; }
.l88 { width: 88%; }
.l89 { width: 89%; }
.l90 { width: 90%; }
.l91 { width: 91%; }
.l92 { width: 92%; }
.l93 { width: 93%; }
.l94 { width: 94%; }
.l95 { width: 95%; }
.l96 { width: 96%; }
.l97 { width: 97%; }
.l98 { width: 98%; }
.l99 { width: 99%; }
.l100 { width: 100%; }

.g9 { gap: 0.5625rem; }
.g11 { gap: 0.6875rem; }
.g18 { gap: 1.125rem; }

.mt3 { margin-top: 0.1875rem; }
.mt5 { margin-top: 0.3125rem; }
.mt8 { margin-top: 0.5rem; }
.mt9 { margin-top: 0.5625rem; }
.mt10 { margin-top: 0.625rem; }
.mb5 { margin-bottom: 0.3125rem; }
.ml3 { margin-left: 0.1875rem; }
.pl12 { padding-left: 0.75rem; }
.pb8 { padding-bottom: 0.5rem; }
.liste-serree { margin: 0.375rem 0 0 1rem; }
.encart-intercale { margin: 0.5rem 0 0.375rem; }
.pad-bas { padding: 0 1rem 0.75rem; }
.pad-liste { padding: 0.375rem 1rem 0.25rem; }
.pad-vertical { padding: 0.5rem 0; }
.pad-sommaire { padding: 0.5625rem 0.875rem; line-height: 1.72; }
.cellule-nue { padding: 0.125rem 0; border: none; }
.rangee-listee { padding: 0.375rem 0; border-bottom: 0.0625rem solid var(--line); }

.t11 { font-size: var(--bacs-font-size-ui); }
.t115 { font-size: var(--bacs-font-size-ui); }

.saisie-130 { width: 8.125rem; }
.saisie-190 { width: 11.875rem; }
.saisie-200 { width: 12.5rem; }
.saisie-230 { width: 14.375rem; }
.minw220 { min-width: 13.75rem; }
.flex-souple { flex: 1; min-width: 0; }

.col6 { grid-template-columns: repeat(6, 1fr); }
.col-2-1 { grid-template-columns: 2fr 1fr; }
.col-1-2 { grid-template-columns: 1fr 2fr; }
.col-12-1 { grid-template-columns: 1.2fr 1fr; }
.col-122-1 { grid-template-columns: 1.22fr 1fr; }
.col-13-1 { grid-template-columns: 1.3fr 1fr; }
.col-14-1 { grid-template-columns: 1.4fr 1fr; }
.col-1-14-1 { grid-template-columns: 1fr 1.4fr 1fr; }
.col-105-125-11 { grid-template-columns: 1.05fr 1.25fr 1.1fr; }
.col-115-135-11 { grid-template-columns: 1.15fr 1.35fr 1.1fr; }
.col-vignette-corps { grid-template-columns: 16.375rem 1fr; }

.bord-teal { border: 0.125rem solid var(--teal); }
.bord-amber { border: 0.125rem solid var(--amber); }
.entete-teal { background: var(--teal-pale); border-radius: 0.5rem 0.5rem 0 0; }
.entete-amber { background: var(--amber-pale); border-radius: 0.5rem 0.5rem 0 0; }

.m2-0-13 { margin: 0.125rem 0 0.8125rem; }
.m20-0-4 { margin: 1.25rem 0 0.25rem; }
.m4-0-12 { margin: 0.25rem 0 0.75rem; }
.m4-0-14 { margin: 0.25rem 0 0.875rem; }
.m4-0-16 { margin: 0.25rem 0 1rem; }
.m4-0-8 { margin: 0.25rem 0 0.5rem; }
.m6-0-16 { margin: 0.375rem 0 1rem; }
.mb0 { margin-bottom: 0; }
.mb10 { margin-bottom: 0.625rem; }
.mb11 { margin-bottom: 0.6875rem; }
.mb12 { margin-bottom: 0.75rem; }
.mb6 { margin-bottom: 0.375rem; }
.mb8 { margin-bottom: 0.5rem; }
.ml6 { margin-left: 0.375rem; }
.mt0 { margin-top: 0; }
.mt12 { margin-top: 0.75rem; }
.mt14 { margin-top: 0.875rem; }

.p10-0 { padding: 0.625rem 0; }
.p11-14 { padding: 0.6875rem 0.875rem; }
.p12-16 { padding: 0.75rem 1rem; }
.p13-16-0 { padding: 0.8125rem 1rem 0; }
.p14-0-12 { padding: 0.875rem 0 0.75rem; }
.p5 { padding: 0.3125rem; }
.p6 { padding: 0.375rem; }
.p6-0 { padding: 0.375rem 0; }
.p9-14 { padding: 0.5625rem 0.875rem; }
.pb0 { padding-bottom: 0; }
.pb12 { padding-bottom: 0.75rem; }
.pt0 { padding-top: 0; }

.ac-debut { align-content: start; }
.affiche-bloc { display: block; }
.ai-base { align-items: baseline; }
.ai-centre { align-items: center; }
.ai-haut { align-items: flex-start; }
.as-fin { align-self: flex-end; }
.colonne { flex-direction: column; }
.colonnes-1fr { grid-template-columns: 1fr; }
.colonnes-1fr-320 { grid-template-columns: 1fr 20rem; }
.colonnes-1fr-340 { grid-template-columns: 1fr 21.25rem; }
.colonnes-1fr-368 { grid-template-columns: 1fr 23rem; }
.colonnes-2fr-1fr-1fr { grid-template-columns: 2fr 1fr 1fr; }
.enligne { display: inline; }
.flex { display: flex; }
.flex1 { flex: 1; }
.flex2 { flex: 2; }
.g13 { gap: 0.8125rem; }
.g5 { gap: 0.3125rem; }
.g6 { gap: 0.375rem; }
.gc-pleine { grid-column: 1 / -1; }
.grille { display: grid; }
.jc-espace { justify-content: space-between; }
.souple { flex-wrap: wrap; }

.maxw320 { max-width: 20rem; }
.maxw420 { max-width: 26.25rem; }
.maxw720 { max-width: 45rem; }
.minw180 { min-width: 11.25rem; }
.minw260 { min-width: 16.25rem; }
.w100 { width: 100%; }
.w140 { width: 8.75rem; }
.w180 { width: 11.25rem; }

.bc-amber { border-color: var(--amber); }
.bc-teal { border-color: var(--teal); }
.bord { border: 0.0625rem solid var(--line); }
.bord-bas-clair { border-bottom: 0.0625rem solid var(--line); }
.bord-gauche { border-left: 0.0625rem solid var(--line); }
.bord-haut { border-top: 0.0625rem solid var(--line); }
.fond-amber { background: var(--amber-pale); }
.r-carte { border-radius: var(--r); }
.r7 { border-radius: 0.4375rem; }
.sans-ombre { box-shadow: none; }

.c-teal { color: var(--teal-dk); }
.curseur { cursor: pointer; }
.f-herite { font: inherit; }
.fs15 { font-size: var(--bacs-font-size-body); }
.fs23 { font-size: 1.5rem; }
.fs27 { font-size: 1.5rem; }
.fw400 { font-weight: 400; }
.fw600 { font-weight: 600; }
.lh12 { line-height: 1.2; }
.lh158 { line-height: 1.58; }
.ta-gauche { text-align: left; }

.mt7 { margin-top: 0.4375rem; }
.mt11 { margin-top: 0.6875rem; }
.pt12 { padding-top: 0.75rem; }
.fond-amber-pale { background: var(--amber-pale); }
.choix-retenu { border-color: var(--teal); background: var(--teal-pale); }
.bloc-espace { display: block; margin-bottom: 0.5625rem; }
.rangee-cartes { display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: flex-start; }
.flex-260 { flex: 1; min-width: 16.25rem; }
.col-auto165 { grid-template-columns: repeat(auto-fit, minmax(10.3125rem, 1fr)); gap: 0.625rem; }
.liste-note { margin: 0 0 0.5rem 1.125rem; font-size: var(--bacs-font-size-ui); line-height: 1.7; }
.encart-intercale-large { margin: 0.75rem 0 0.375rem; }
.liste-retrait-5 { margin: 0.3125rem 0 0 1.125rem; }
.liste-retrait-6 { margin: 0.375rem 0 0 1.125rem; }
.liste-retrait-6-6 { margin: 0.375rem 0 0.375rem 1.125rem; }
.sans-souligne { text-decoration: none; }
.saisie-pleine-5 { width: 100%; padding: 0.3125rem; border: 0.0625rem solid var(--line); border-radius: 0.4375rem; }
.saisie-pleine-6 { width: 100%; padding: 0.375rem; border: 0.0625rem solid var(--line); border-radius: 0.4375rem; }
.zone-pleine { width: 100%; padding: 0.375rem; border: 0.0625rem solid var(--line); border-radius: 0.4375rem; font-family: inherit; font-size: var(--bacs-font-size-ui); }

.m0 { margin: 0; }
.p8-16 { padding: 0.5rem 1rem; }
.minw200 { min-width: 12.5rem; }
.maxw120 { max-width: 7.5rem; }

/* Adaptation des grilles existantes, sans masquer de donnée métier. */
@media (max-width: 1279px) {
  .col5, .col6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .col-corps-marge, .colonnes-1fr-368, .colonnes-1fr-340, .colonnes-1fr-320 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app > .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .top { padding-inline: 1.5rem; }
  .col-115-135-11, .col-105-125-11, .col-1-14-1, .col-14-1, .col-13-1, .col-122-1, .col-12-1 { grid-template-columns: minmax(0, 1fr); }
  .portail .boite { gap: 2rem; }
}
@media (max-width: 767px) {
  .top { min-height: var(--bacs-size-topbar-mobile); padding: .5rem 1rem; gap: .75rem; }
  .body, .pp-corps { padding: 1rem; gap: 1.5rem; }
  h1 { font-size: 1.5rem; line-height: 1.3; }
  .grid, .grille, .explique, .row2, .portail .boite, .kv { grid-template-columns: minmax(0, 1fr); }
  .grid:has(> .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .kpi { padding: .75rem 0; border: 0; }
  .kpi .val { font-size: 1.75rem; }
  .pad { padding: 1rem; }
  .card > h2 { padding: 1rem; }
  .rangee { flex-wrap: wrap; }
  .page-actions { width: 100%; }
  .btn.sm { min-height: var(--bacs-size-control); }
  .portail { padding: 1.5rem 1rem; }
  .portail .boite { gap: 1rem; }
  .portail .presentation { padding: 0; gap: 1rem; }
  .portail .presentation h1 { max-width: none; font-size: 1.5rem; }
  .portail .formulaire { padding: 1.5rem; }
  .pp-entete { padding: 1rem; }
  .pp-nav { margin-left: 0; gap: 1rem; }
  .minw180, .minw200, .minw220, .minw260, .flex-260 { min-width: 0; }
  .tableau-large .minw220 { min-width: 13.75rem; }
  .blind, .compteur-relances { flex-wrap: wrap; }
  .saisie-130, .saisie-190, .saisie-200, .saisie-230, .w140, .w180 { max-width: 100%; }
}

@media (max-width: 767px) {
  .kpi { position: relative; }
  .kpi .precisions { position: static; }
  .kpi .precisions .sub { left: 0; right: auto; top: calc(100% + .25rem); }
  .kpi:nth-child(even) .precisions .sub { left: auto; right: 0; }
}

/* Le QR conserve sa zone blanche et reste lisible sur les petits écrans. */
.qr-authentification { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }

/* Configuration compacte ; un seul champ conserve le collage et l'autoremplissage. */
.configuration-authentification { display: grid; grid-template-columns: 15rem minmax(0, 1fr); align-items: center; gap: 3rem; margin-block: 1.5rem 2rem; }
.configuration-authentification p { margin: 0 0 .75rem; }
.configuration-manuelle { min-width: 0; }
.cle-authentification { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; user-select: all; }
.verification-authentification { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.verification-authentification .champ { margin-bottom: 0; }
.ligne-cle { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.ligne-cle .cle-authentification { min-width: 0; overflow-wrap: normal; }
.ligne-cle .btn { flex-shrink: 0; }
#statut-copie:empty { display: none; }
.cases-code { display: none; }
.code-interactif { --case-code: 2.5rem; --espace-code: .5rem; position: relative; width: calc(6 * var(--case-code) + 7 * var(--espace-code)); height: 3rem; }
.code-interactif .cases-code { display: grid; grid-template-columns: repeat(3, var(--case-code)) var(--espace-code) repeat(3, var(--case-code)); gap: var(--espace-code); height: 100%; }
.cases-code [data-case-code] { display: grid; place-items: center; border: 1px solid var(--bacs-color-border-control); border-radius: var(--bacs-radius-control); background: var(--white); font-family: var(--bacs-font-family-mono); font-size: 1.5rem; }
.cases-code .case-active { outline: 2px solid var(--teal); outline-offset: 2px; }
.cases-code .case-selectionnee { background: var(--teal-pale); }
.verification-authentification .code-interactif input[type="text"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: text; }
@media (max-width: 767px) {
  .configuration-authentification { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .cle-authentification { font-size: 1.25rem; }
}

.verification-authentification .btn { min-height: 3rem; }
@media (max-width: 379px) {
  .code-interactif { --case-code: 2rem; --espace-code: .5rem; }
}