/* Page Import / Export (data-bundle) — scopée aux classes .data-*. */

.data-export { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.data-export > * { min-width: 0; }

.data-sources { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 2px; background: var(--color-surface); border-radius: var(--radius-tile); padding: .75rem; }
.data-sources-group { font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); margin: .75rem .5rem .25rem; }
.data-sources-group:first-child { margin-top: 0; }
.data-source { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: var(--radius-menu-item); font-size: .875rem; color: var(--color-ink); text-decoration: none; }
.data-source i { color: var(--color-muted); }
.data-source:hover { background: var(--color-tile); }
.data-source.is-active { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
.data-source.is-active i { color: var(--color-accent); }

.data-main { display: flex; flex-direction: column; gap: 1rem; }
.data-card { background: var(--color-surface); border-radius: var(--radius-tile); padding: 1.125rem 1.25rem; }
.data-card + .data-card { margin-top: 0; }
.data-card-title { display: flex; align-items: center; gap: .625rem; margin: 0 0 .25rem; font-size: .9375rem; font-weight: 700; color: var(--color-ink); }
.data-step { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-item); background: var(--color-accent-soft); color: var(--color-accent); display: grid; place-items: center; font-size: .75rem; }
.data-hint { margin: 0 0 .875rem; color: var(--color-muted-2); font-size: .8125rem; }
.data-hint-after { margin: .875rem 0 0; }
.data-card .filter-bar { padding: 0; border-bottom: 0; }

.data-columns { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 1rem; }
.data-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 1rem; align-content: start; }
.data-fields-group { grid-column: 1 / -1; display: flex; align-items: center; margin: .625rem 0 .125rem; font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); }
.data-fields-group:first-child { margin-top: 0; }
.data-link { margin-left: auto; border: 0; background: none; color: var(--color-accent); font-weight: 600; font-size: .75rem; text-transform: none; letter-spacing: 0; cursor: pointer; }
.data-field { display: flex; align-items: center; gap: .5rem; padding: .3125rem .375rem; border-radius: var(--radius-item); font-size: .875rem; cursor: pointer; }
.data-field:hover { background: var(--color-tile); }
.data-field input { accent-color: var(--color-accent); width: 15px; height: 15px; }
.data-field.is-locked { color: var(--color-muted); cursor: not-allowed; }
.data-field.is-locked i { font-size: .625rem; }

.data-chosen { background: var(--color-tile); border-radius: var(--radius-field); padding: .75rem; align-self: start; }
.data-chosen-head { display: flex; justify-content: space-between; margin-bottom: .5rem; font-size: .8125rem; font-weight: 600; }
.data-chosen-head span + span { color: var(--color-muted); font-weight: 400; }
.data-chosen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow: auto; }
.data-chosen li { display: flex; align-items: center; gap: .25rem; background: var(--color-surface); border-radius: var(--radius-item); padding: .375rem .5rem; font-size: .8125rem; }
.data-chosen li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-chosen li button { border: 0; background: none; color: var(--color-muted); padding: 0 .25rem; cursor: pointer; }
.data-chosen li button:hover { color: var(--color-accent); }

.data-preview { overflow: auto; border: 1px solid var(--color-line); border-radius: var(--radius-field); }
.data-preview table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.data-preview th { text-align: left; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); font-weight: 700; padding: .625rem .75rem; border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.data-preview td { padding: .5rem .75rem; border-bottom: 1px solid var(--color-line); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.data-preview tr:last-child td { border-bottom: 0; }
.data-preview .is-number { text-align: right; font-variant-numeric: tabular-nums; }
.data-empty { color: var(--color-muted); }
.data-actions { text-align: right; }

.data-footer { position: sticky; bottom: 1rem; display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; background: var(--color-surface); border-radius: var(--radius-tile); padding: .875rem 1.25rem; box-shadow: var(--shadow-dialog); }
.data-summary { flex: 1; color: var(--color-muted-2); font-size: .8125rem; }
.data-summary > i { margin-right: .375rem; color: var(--color-accent); }
.data-summary b { color: var(--color-ink); }


/* Exporter : un seul bloc, trois étapes reliées par un fil, le bouton en pied. */
.data-wizard { margin-top: 1rem; background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.data-wizard-back { display: flex; align-items: center; gap: .625rem; padding: .875rem 1.75rem; border-bottom: 1px solid var(--color-line); border-radius: var(--radius-card) var(--radius-card) 0 0; color: var(--color-ink-2); font-size: .875rem; text-decoration: none; transition: background-color .15s, color .15s; }
.data-wizard-back > i { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-tile); color: var(--color-ink); transition: background-color .15s, color .15s, transform .15s; }
.data-wizard-back b { color: var(--color-ink); }
.data-wizard-back:hover { background: var(--color-tile); color: var(--color-ink); }
.data-wizard-back:hover > i { background: var(--color-accent); color: var(--color-surface); transform: translateX(-2px); }
.data-wizard-steps { list-style: none; margin: 0; padding: 1.75rem 1.75rem .25rem; }
.data-wizard-step { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1.125rem; padding-bottom: 2rem; }
.data-wizard-step:not(:last-child)::before { content: ""; position: absolute; top: 2.5rem; bottom: .5rem; left: calc(1rem - 1px); width: 2px; border-radius: 1px; background: linear-gradient(var(--color-accent-soft), var(--color-line)); }
.data-wizard-dot { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-accent); color: var(--color-surface); font-size: .8125rem; font-weight: 700; box-shadow: 0 0 0 4px var(--color-accent-soft); }
.data-wizard-title { margin: .3125rem 0 .875rem; font-size: 1rem; font-weight: 700; color: var(--color-ink); }
.data-wizard .filter-bar { padding: 0; border-bottom: 0; }

/* Étape 1 : la donnée choisie, en tuile ; un clic ouvre le menu de toutes les données. */
.data-pick-trigger { display: flex; align-items: center; gap: .875rem; width: min(100%, 36rem); padding: .75rem 1.125rem .75rem .75rem; border: 1px solid var(--color-line); border-radius: var(--radius-tile); background: var(--color-tile); color: var(--color-ink); text-align: start; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.data-pick-trigger:hover, .data-pick-trigger[aria-expanded="true"] { border-color: var(--color-accent); background: var(--color-surface); box-shadow: var(--shadow-pop); }
.data-pick-trigger:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.data-pick-trigger .card-icon { width: 2.75rem; height: 2.75rem; border-radius: .75rem; font-size: 1.125rem; }
.data-pick-copy, .data-file-copy { display: flex; flex: 1; flex-direction: column; gap: .125rem; min-width: 0; }
.data-pick-copy b { font-size: .9375rem; }
.data-pick-copy small, .data-file-copy small { color: var(--color-muted-2); font-size: .8125rem; line-height: 1.4; }
.data-pick-change { display: inline-flex; flex: none; align-items: center; gap: .375rem; color: var(--color-accent); font-size: .8125rem; font-weight: 600; }

/* Étape 2 : combien de lignes, en ligne de résumé sous les filtres. */
.data-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-top: .875rem; padding-top: .875rem; border-top: 1px dashed var(--color-line-dashed); }
.data-result-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; min-width: 0; }
.data-result-total { color: var(--color-ink-2); font-size: .875rem; }
.data-result-total b { margin-right: .1875rem; color: var(--color-ink); font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.data-result small { color: var(--color-muted-2); font-size: .8125rem; }
.data-result > a { color: var(--color-accent); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.data-result > a:hover { text-decoration: underline; }
.data-result.is-empty .data-result-total b { color: var(--color-danger); }

/* Étape 3 : une tuile par fichier. */
.data-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; max-width: 48rem; }
.data-file { position: relative; display: flex; align-items: center; gap: .75rem; padding: .875rem 2.25rem .875rem .875rem; border: 1px solid var(--color-line); border-radius: var(--radius-tile); background: var(--color-surface); color: var(--color-ink); text-decoration: none; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.data-file:hover { border-color: var(--color-accent); }
.data-file input { position: absolute; opacity: 0; pointer-events: none; }
.data-file:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.data-file:has(input:checked), .data-file.is-active { border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.data-file:has(input:checked)::after, .data-file.is-active::after { content: "\f058"; position: absolute; top: .75rem; right: .875rem; color: var(--color-accent); font: var(--fa-font-solid); font-size: .9375rem; }
.data-file .card-icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; font-size: 1.125rem; }
.data-file-copy b { font-size: .875rem; }
.data-file-copy small { font-size: .75rem; }

/* Pour une liste : les colonnes et l'aperçu, repliés sous les formats. */
.data-fold { max-width: 48rem; margin-top: 1.25rem; padding: .875rem 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-tile); }
.data-fold > summary { display: flex; align-items: center; gap: .5rem; color: var(--color-ink); font-size: .875rem; list-style: none; cursor: pointer; }
.data-fold > summary::-webkit-details-marker { display: none; }
.data-fold > summary > i { color: var(--color-muted); }
.data-fold > summary > span { margin-left: auto; color: var(--color-accent); font-weight: 600; font-size: .8125rem; }
.data-fold[open] > summary { margin-bottom: 1rem; }

.data-wizard-footer { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.75rem; border-top: 1px solid var(--color-line); border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--color-surface); }

@media (max-width: 640px) {
    .data-wizard-steps { padding: 1.25rem 1rem .25rem; }
    .data-wizard-step { grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; }
    .data-wizard-step:not(:last-child)::before { left: calc(.875rem - 1px); top: 2.25rem; }
    .data-wizard-dot { width: 1.75rem; height: 1.75rem; }
    .data-pick-change { font-size: 0; }
    .data-pick-change > i { font-size: .875rem; }
    .data-wizard-footer { padding: .875rem 1rem; }
    .data-wizard-back { padding: .75rem 1rem; }
    .data-wizard-footer .btn { flex: 1; }
}

@media (max-width: 1024px) {
    .data-export, .data-columns { grid-template-columns: 1fr; }
    .data-sources { position: static; }
}

/* Importer */
.data-gap { margin-top: 1rem; }
.data-list { margin: 0; padding-left: 1.125rem; font-size: .875rem; display: flex; flex-direction: column; gap: .25rem; }
.data-drop { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; padding: 1.25rem; border: 2px dashed var(--color-line); border-radius: var(--radius-field); }
.data-drop > i { font-size: 1.5rem; color: var(--color-accent); }
.data-drop input[type=file] { flex: 1; min-width: 0; font-size: .875rem; }
.data-field.is-static { cursor: default; }
.data-field.is-static:hover { background: none; }
.data-file { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; }
.data-file > i { font-size: 1.375rem; color: var(--color-accent); }
.data-file > div { flex: 1; min-width: 0; }
.data-alert { display: flex; gap: .625rem; align-items: center; color: var(--color-danger, #b42318); font-size: .875rem; }
.data-alert.is-info { color: var(--color-ink); }
.data-mapping td { vertical-align: middle; }
.data-mapping select { min-width: 240px; max-width: 320px; display: inline-block; }
.data-mapping tr.is-ignored td:first-child, .data-mapping tr.is-ignored .data-examples { color: var(--color-muted); }
.data-mapping tr.is-guessed td { background: color-mix(in srgb, #7c3aed 6%, transparent); }
.data-examples { color: var(--color-muted-2); max-width: 360px; }
.data-guess { margin-left: .5rem; font-size: .75rem; font-weight: 600; color: #7c3aed; }
.data-options { display: flex; flex-direction: column; gap: 2px; }
.data-option-gap { margin-top: .5rem; }
.data-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: .5rem 0 1rem; }
.data-tile { background: var(--color-tile); border-radius: var(--radius-field); padding: .75rem 1rem; font-size: .8125rem; color: var(--color-muted-2); }
.data-tile b { display: block; font-size: 1.375rem; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.data-tile.is-create b { color: var(--color-success, #067647); }
.data-tile.is-update b { color: var(--color-accent); }
.data-tile.is-error b { color: var(--color-danger, #b42318); }
.data-result td { vertical-align: top; }
.data-result .data-detail { white-space: normal; max-width: none; }
.data-detail del { color: var(--color-muted); }
.data-detail ins { text-decoration: none; font-weight: 600; }
.data-error { color: var(--color-danger, #b42318); }

/* Exporter : un seul bloc, trois étapes reliées par un fil, le bouton en pied. */
.data-wizard { margin-top: 1rem; background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.data-wizard-steps { list-style: none; margin: 0; padding: 1.75rem 1.75rem .25rem; }
.data-wizard-step { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1.125rem; padding-bottom: 2rem; }
.data-wizard-step:not(:last-child)::before { content: ""; position: absolute; top: 2.5rem; bottom: .5rem; left: calc(1rem - 1px); width: 2px; border-radius: 1px; background: linear-gradient(var(--color-accent-soft), var(--color-line)); }
.data-wizard-dot { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-accent); color: var(--color-surface); font-size: .8125rem; font-weight: 700; box-shadow: 0 0 0 4px var(--color-accent-soft); }
.data-wizard-title { margin: .3125rem 0 .875rem; font-size: 1rem; font-weight: 700; color: var(--color-ink); }
.data-wizard .filter-bar { padding: 0; border-bottom: 0; }

/* Étape 1 : la donnée choisie, en tuile ; un clic ouvre le menu de toutes les données. */
.data-pick-trigger { display: flex; align-items: center; gap: .875rem; width: min(100%, 36rem); padding: .75rem 1.125rem .75rem .75rem; border: 1px solid var(--color-line); border-radius: var(--radius-tile); background: var(--color-tile); color: var(--color-ink); text-align: start; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.data-pick-trigger:hover, .data-pick-trigger[aria-expanded="true"] { border-color: var(--color-accent); background: var(--color-surface); box-shadow: var(--shadow-pop); }
.data-pick-trigger:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.data-pick-trigger .card-icon { width: 2.75rem; height: 2.75rem; border-radius: .75rem; font-size: 1.125rem; }
.data-pick-copy, .data-file-copy { display: flex; flex: 1; flex-direction: column; gap: .125rem; min-width: 0; }
.data-pick-copy b { font-size: .9375rem; }
.data-pick-copy small, .data-file-copy small { color: var(--color-muted-2); font-size: .8125rem; line-height: 1.4; }
.data-pick-change { display: inline-flex; flex: none; align-items: center; gap: .375rem; color: var(--color-accent); font-size: .8125rem; font-weight: 600; }

/* Étape 2 : le compte en pastille, puis d'où viennent les lignes. */

/* Étape 3 : une tuile par fichier. */
.data-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; max-width: 48rem; }
.data-file { position: relative; display: flex; align-items: center; gap: .75rem; padding: .875rem 2.25rem .875rem .875rem; border: 1px solid var(--color-line); border-radius: var(--radius-tile); background: var(--color-surface); color: var(--color-ink); text-decoration: none; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.data-file:hover { border-color: var(--color-accent); }
.data-file input { position: absolute; opacity: 0; pointer-events: none; }
.data-file:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.data-file:has(input:checked), .data-file.is-active { border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.data-file:has(input:checked)::after, .data-file.is-active::after { content: "\f058"; position: absolute; top: .75rem; right: .875rem; color: var(--color-accent); font: var(--fa-font-solid); font-size: .9375rem; }
.data-file .card-icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; font-size: 1.125rem; }
.data-file-copy b { font-size: .875rem; }
.data-file-copy small { font-size: .75rem; }

/* Pour une liste : les colonnes et l'aperçu, repliés sous les formats. */
.data-fold { max-width: 48rem; margin-top: 1.25rem; padding: .875rem 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-tile); }
.data-fold > summary { display: flex; align-items: center; gap: .5rem; color: var(--color-ink); font-size: .875rem; list-style: none; cursor: pointer; }
.data-fold > summary::-webkit-details-marker { display: none; }
.data-fold > summary > i { color: var(--color-muted); }
.data-fold > summary > span { margin-left: auto; color: var(--color-accent); font-weight: 600; font-size: .8125rem; }
.data-fold[open] > summary { margin-bottom: 1rem; }

.data-wizard-footer { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.75rem; border-top: 1px solid var(--color-line); border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--color-surface); }

@media (max-width: 640px) {
    .data-wizard-steps { padding: 1.25rem 1rem .25rem; }
    .data-wizard-step { grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; }
    .data-wizard-step:not(:last-child)::before { left: calc(.875rem - 1px); top: 2.25rem; }
    .data-wizard-dot { width: 1.75rem; height: 1.75rem; }
    .data-pick-change { font-size: 0; }
    .data-pick-change > i { font-size: .875rem; }
    .data-wizard-footer { padding: .875rem 1rem; }
    .data-wizard-back { padding: .75rem 1rem; }
    .data-wizard-footer .btn { flex: 1; }
}

@media (max-width: 1024px) {
    .data-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.data-note { color: var(--color-warning, #b54708); }