/* ═══════════════════════════════════════════════════════════════════════
   Dépôt d'import « en vrac » — page d'accueil
   Deux blocs indépendants :
     1. .import-showcase — la vitrine, visible au défilement de la landing
     2. .import-tunnel   — le tunnel plein écran, invisible tant qu'on n'a
        pas déposé quelque chose
   Palette et rayons repris de index.html, aucune variable nouvelle.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. VITRINE ─────────────────────────────────────────────────────── */
/*
   Une carte de hauteur fixe, deux calques.

   Au repos elle ne contient qu'une chose : une zone de dépôt. Pas de
   compteurs à zéro, pas de colonnes vides, pas de liste de formats — rien
   qui demande à être lu avant d'avoir servi.

   Ensuite elle ne grandit pas : elle se retourne. L'invitation s'efface, le
   plateau prend sa place DANS LA MÊME BOÎTE. C'est l'invitation, restée dans
   le flux, qui tient la hauteur — le plateau est en absolu par-dessus — donc
   la carte mesure exactement pareil avant, pendant et après. Rien ne descend
   sous le curseur, la page ne bouge pas, on peut regarder.

   Sur le plateau, trois choses : les documents déposés à gauche, trois
   casiers à droite, et entre les deux la donnée qui passe de l'un à l'autre.
   Le trajet est horizontal parce qu'il se lit comme une phrase — voilà ce
   que vous avez donné, voilà où ça se range — et parce qu'un mouvement de
   haut en bas dans une carte qui ne grandit pas ressemble à une chute.

   Le détail complet n'est pas ici : on le verra en entier, corrigeable, au
   moment de créer l'ensemble. Mais un casier qui affiche « 42 » sans jamais
   montrer un seul des 42 ne prouve rien. D'où l'aperçu : on ouvre un casier,
   les premières lignes se déploient en arc autour de lui, et on sait.
*/

.import-showcase {
    --imp-ink: #16233d;
    --imp-muted: #64748b;
    --imp-faint: #94a3b8;
    --imp-rule: #e8edf4;
    --imp-blue: #1e40af;
    --imp-wash: rgba(30, 64, 175, .06);
    --imp-ease: cubic-bezier(.22, .8, .24, 1);

    padding: 6rem 2rem;
    /* Le dégradé fait le pont entre la section des fonctionnalités, qui est
       sur #f7fafc, et les tarifs, qui sont sur blanc : aucune couture. */
    background: linear-gradient(180deg, #f7fafc 0%, #ffffff 100%);
    position: relative;
}

/* Étroite : une zone de dépôt qui s'étale sur mille pixels ne se lit plus
   comme un objet unique, et les jetons qui la traversent n'ont plus de
   trajet lisible. */
.import-showcase__inner {
    max-width: 44rem;
    margin: 0 auto;
}

/* ── Deux colonnes : ce que fait l'outil à gauche, l'outil à droite ──
   Même grille que les blocs .feature-item de la page d'accueil (deux
   colonnes égales, 4rem de gouttière, centrage vertical). La section se lit
   alors comme les autres au lieu de s'annoncer comme une exception, et la
   carte cesse d'être un grand rectangle posé seul au milieu de la page,
   avec un titre qui court sur toute la largeur au-dessus.

   Le modificateur est posé par la page hôte, jamais par __inner : dans
   l'inscription, ce même bloc n'a QUE la carte, et une grille de deux
   colonnes l'y réduirait à la moitié de la largeur. */
.import-showcase__split {
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* ── En-tête ──
   Balisage propre plutôt que la classe .section-header du site : celle-ci
   impose white-space: nowrap au h2, ce qui faisait déborder le titre. */
.import-head {
    margin: 0 0 2.5rem;
    text-align: center;
}

.import-title {
    font-size: clamp(1.75rem, 3.4vw, 2.4rem);
    line-height: 1.14;
    letter-spacing: -.022em;
    font-weight: 800;
    color: var(--imp-ink);
    margin: 0;
    white-space: normal;
    text-wrap: balance;
}

/* En colonne, l'en-tête est un texte courant : il s'aligne à gauche, il ne
   se sépare plus de la carte par une marge (c'est la gouttière qui le fait)
   et son titre revient à la taille des autres titres de bloc. */
.import-showcase__split .import-head {
    margin: 0;
    text-align: left;
}

.import-showcase__split .import-title {
    font-size: clamp(1.6rem, 2.7vw, 2.1rem);
}

.import-lede {
    margin: 1rem 0 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--imp-muted);
}

/* Ce que « vos documents » veut dire, en trois lignes. Sans elles, le
   visiteur doit deviner ce que l'outil sait lire, et dans le doute il
   suppose que ses fichiers à lui n'en font pas partie. */
.import-points {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.import-points li {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: .98rem;
    color: var(--imp-muted);
}

.import-points li svg {
    flex-shrink: 0;
    color: var(--imp-blue);
}

/* ═══ LA CARTE ═══════════════════════════════════════════════════════════ */

.import-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--imp-rule);
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(22, 35, 61, .04),
                0 30px 60px -46px rgba(22, 35, 61, .5);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .24s var(--imp-ease),
                box-shadow .24s var(--imp-ease),
                background-color .24s var(--imp-ease);
}

.import-card:hover {
    border-color: #cfdaea;
    box-shadow: 0 1px 2px rgba(22, 35, 61, .04),
                0 30px 60px -38px rgba(22, 35, 61, .55);
}

/* Toute la carte est la cible : c'est elle qui s'allume, pas un rectangle
   à l'intérieur. */
.import-card.is-dragover {
    border-color: var(--imp-blue);
    background: var(--imp-wash);
    box-shadow: 0 0 0 4px rgba(30, 64, 175, .09),
                0 30px 60px -38px rgba(30, 64, 175, .45);
}

/* Une fois qu'il y a quelque chose dedans, la carte n'est plus un bouton :
   relancer d'un clic effacerait ce que le visiteur vient de voir arriver. */
.import-card.is-busy,
.import-card.is-done { cursor: default; }

/* ── Les calques ──
   Deux états de la même carte, jamais deux écrans. Le fondu croisé les
   échange sur place ; visibility passe à la fin de la transition pour que le
   calque effacé sorte aussi du parcours au clavier. */
.import-layer {
    opacity: 1;
    transition: opacity .34s var(--imp-ease), transform .34s var(--imp-ease);
}

.import-layer.is-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(.99);
    transition: opacity .3s var(--imp-ease),
                transform .3s var(--imp-ease),
                visibility 0s linear .3s;
}

/* ── 1. L'invitation ──────────────────────────────────────────────────── */
/* Le seul calque qui reste dans le flux : c'est sa hauteur qui devient la
   hauteur de la carte, définitivement. */

.import-invite {
    padding: clamp(2.75rem, 7vw, 4.25rem) 1.75rem clamp(2.25rem, 5vw, 3rem);
    text-align: center;
}

.import-invite__glyph {
    position: relative;
    width: 84px;
    height: 60px;
    margin: 0 auto 1.6rem;
}

.import-sheet {
    position: absolute;
    left: 50%;
    top: 0;
    width: 42px;
    height: 54px;
    margin-left: -21px;
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 5px;
    box-shadow: 0 8px 16px -12px rgba(22, 35, 61, .6);
    transition: transform .42s var(--imp-ease), border-color .3s ease;
}

.import-sheet:nth-child(1) { transform: translate(-13px, 6px) rotate(-9deg); }
.import-sheet:nth-child(2) { transform: translate(13px, 4px) rotate(8deg); }
.import-sheet:nth-child(3) { transform: translateY(0) rotate(0deg); }

/* Deux traits sur la feuille du dessus : sans eux, trois rectangles blancs
   ne disent pas « des documents ». */
.import-sheet:nth-child(3)::before,
.import-sheet:nth-child(3)::after {
    content: '';
    position: absolute;
    left: 9px;
    right: 9px;
    height: 2px;
    border-radius: 1px;
    background: #e6ecf5;
}
.import-sheet:nth-child(3)::before { top: 15px; }
.import-sheet:nth-child(3)::after { top: 23px; right: 17px; }

/* Le seul mouvement au repos, et il ne part qu'à l'approche : les feuilles
   s'écartent quand la carte devient une cible. */
.import-card:hover .import-sheet:nth-child(1) { transform: translate(-19px, 4px) rotate(-13deg); }
.import-card:hover .import-sheet:nth-child(2) { transform: translate(19px, 2px) rotate(12deg); }
.import-card:hover .import-sheet:nth-child(3) { transform: translateY(-3px); }

.import-card.is-dragover .import-sheet { border-color: #b9c9e8; }
.import-card.is-dragover .import-sheet:nth-child(1) { transform: translate(-23px, 2px) rotate(-16deg); }
.import-card.is-dragover .import-sheet:nth-child(2) { transform: translate(23px, 0) rotate(15deg); }
.import-card.is-dragover .import-sheet:nth-child(3) { transform: translateY(-7px); }

.import-invite__title {
    font-size: clamp(1.15rem, 2.4vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--imp-ink);
}

.import-invite__hint {
    margin: .55rem auto 1.65rem;
    max-width: 26rem;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--imp-muted);
}

.import-invite__btn { margin: 0 auto; }

.import-example {
    display: block;
    margin: 1.05rem auto 0;
    padding: .25rem;
    background: none;
    border: 0;
    font: inherit;
    font-size: .85rem;
    color: var(--imp-faint);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(148, 163, 184, .4);
    transition: color .18s ease;
}

.import-example:hover { color: var(--imp-blue); text-decoration-color: currentColor; }

/* ── 2. Le plateau ────────────────────────────────────────────────────── */
/* En absolu par-dessus l'invitation : il ne peut donc rien ajouter à la
   hauteur de la carte, quoi qu'on y mette. Trois bandes, une seule élastique
   — celle du haut, où les documents défilent. Aucune ne peut apparaître ou
   disparaître en cours de route, sinon la carte se mettrait à respirer à
   chaque document, et c'est exactement ce qu'on ne veut pas voir. */

.import-layer--stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: minmax(min-content, 1fr) auto auto;
    padding: 1.35rem 1.5rem 1.2rem;
}

/* ── Le compte rendu se recentre ──
   Le défilé a besoin de toute la carte ; le compte rendu, non — trois chiffres
   et un bouton occupent le tiers de la hauteur. Tant que la bande du haut reste
   élastique, elle garde pour elle tout le blanc disponible : les chiffres se
   retrouvent perchés en haut, la note et le bouton restent cloués en bas, et le
   trou se creuse entre les deux.

   Le défilé fini, la bande du haut cesse d'être élastique (1fr → 0fr) et
   retombe sur la hauteur de son contenu, c'est-à-dire du compte rendu. Les
   trois bandes forment alors un bloc compact, qu'align-content pose au milieu :
   autant de blanc au-dessus des chiffres qu'en dessous du bouton, et plus rien
   entre eux. La carte, elle, n'a pas bougé d'un pixel — c'est ce qu'elle
   contient qui s'y est recentré.

   Le remaniement attend .3s, le temps que le dernier document ait fini de
   s'effacer : sinon on le verrait s'écraser sous nos yeux pendant son fondu.
   Aucun navigateur n'interpole une piste en fr, donc ces .3s ne retardent pas
   un mouvement, ils cachent un saut — d'où le reste du procédé plus bas. */
.import-card.is-done .import-layer--stage {
    grid-template-rows: minmax(min-content, 0fr) auto auto;
    align-content: center;
    transition: grid-template-rows 0s .3s;
}

/* Encore faut-il que la bande retombe sur la hauteur du compte rendu et pas sur
   celle de l'écran d'attente, qui partage la même case. Hors flux, il ne pèse
   plus rien — et il est de toute façon invisible à ce moment-là. */
.import-card.is-done .import-wait { position: absolute; inset: 0; }

/* Une fois les quatre lignes rassemblées, elles se lisaient d'un bloc : le
   titre, les chiffres, la note et le bouton également espacés, donc de même
   nature. Le bouton n'est pas une quatrième ligne de résultat, c'est ce qu'on
   en fait — il lui faut son propre blanc au-dessus. */
.import-card.is-done .import-foot {
    margin-top: 1.35rem;
    transition: margin-top 0s .3s;
}

/* ── Ce qui rend le remaniement invisible ──
   À la .3e seconde, la note et le bouton changent de place d'un coup. Pour que
   personne ne les voie sauter, il suffit qu'ils n'y soient pas encore : ils
   naissent après, à leur place définitive. Le compte rendu, lui, apparaît tout
   de suite — son contenu reste centré sur une bande dont le centre ne bouge
   pas, il ne se déplace donc que de cinq pixels, sous un fondu.

   Ce qu'on voit, au total : le dernier document s'efface, les chiffres
   arrivent, puis la note et le bouton se posent en dessous. (Le bouton retarde
   son apparition depuis sa propre règle, plus bas.) */
.import-card.is-done .import-note {
    animation: importSettleIn .32s var(--imp-ease) .3s both;
}

@keyframes importSettleIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── La scène ──
   Une seule case, deux occupants qui s'y succèdent : le défilé des documents,
   puis le compte rendu. Ils sont superposés dans la même cellule de grille,
   donc l'un remplace l'autre en fondu sans que rien ne change de taille. La
   carte a exactement la même hauteur du premier fichier au dernier chiffre. */

.import-stage {
    position: relative;
    display: grid;
    min-height: 0;
}

.import-stage > * {
    grid-area: 1 / 1;
    min-height: 0;
}

/* ── Le défilé ── */
/* Un document à la fois, à pleine carte. Les cartes sont posées en absolu les
   unes sur les autres : pendant les quelques images où la sortante et
   l'entrante coexistent, aucune ne pousse l'autre — elles se croisent sur
   place, et le plateau ne se vide jamais entre deux documents. */

.import-reel {
    position: relative;
    transition: opacity .3s var(--imp-ease);
}

.import-reel.is-out {
    opacity: 0;
    pointer-events: none;
}

/* ── L'attente ── */
/* Le troisième occupant de la même case. Il tient l'écran pendant qu'on ouvre
   les fichiers puis qu'on les fait analyser — c'est-à-dire pendant tout le
   temps où l'on ne sait encore rien d'aucun document. Une carte de document
   qui tournerait là raconterait que ce document-là est long à lire ; celui-ci
   ne raconte que ce qui se passe, et le nom qui change dessous prouve qu'on
   avance fichier par fichier. */

.import-wait {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .5rem;
    padding: 0 .5rem;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .32s var(--imp-ease),
                visibility 0s linear .32s;
}

.import-wait.is-in {
    opacity: 1;
    visibility: visible;
    transition: opacity .32s var(--imp-ease);
}

.import-wait__spin {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--imp-rule);
    border-top-color: var(--imp-blue);
    animation: importSpinner .8s linear infinite;
}

.import-wait__title {
    margin: 0;
    font-size: .98rem;
    font-weight: 600;
    color: var(--imp-ink);
}

/* Sa hauteur est réservée : entre deux fichiers, une ligne qui disparaît une
   image ferait sauter le titre au-dessus. */
.import-wait__file {
    margin: 0;
    min-height: 1.2rem;
    max-width: 100%;
    font-size: .84rem;
    color: var(--imp-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-wait__file.is-fresh {
    animation: importWaitFile .3s var(--imp-ease) both;
}

@keyframes importWaitFile {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
}

/* Aucun cadre autour d'un document, jamais. Encadrer chaque fichier donne un
   tableau de bord de logiciel de gestion, où l'œil compte des bordures au lieu
   de lire des noms. Ce qui tient cette carte ensemble, c'est son alignement et
   le blanc autour — pas un trait. */
/* La place des lignes est réservée avant qu'il y en ait une seule. Sans ça,
   une carte centrée remonte son propre nom de cinquante pixels au moment où
   les lignes tombent : on regarde le nom du fichier, il s'enfuit vers le
   haut. La hauteur vaut le maximum que le JS peut écrire (linesRoom + la
   ligne « + N »), donc le nom ne bouge ni pendant une carte, ni entre deux. */
.import-doc {
    --doc-lines: 8rem;
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto auto var(--doc-lines);
    align-content: center;
    gap: .5rem;
    min-width: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .34s var(--imp-ease),
                transform .34s var(--imp-ease);
}

.import-doc.is-in {
    opacity: 1;
    transform: none;
}

/* La sortante s'en va par le haut, l'entrante arrive par le bas : le défilé a
   un sens de lecture, et c'est ce sens qui dit qu'on avance dans une pile
   plutôt que de changer d'écran. */
.import-doc.is-out {
    opacity: 0;
    transform: translateY(-10px);
}

/* ── L'identité du document ── */

.import-doc__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

/* L'extension en toutes lettres, dans sa couleur d'usage : c'est ce qui fait
   reconnaître SON fichier avant même d'en lire le nom. */
.import-doc__type {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(100, 116, 139, .1);
    color: #64748b;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .05em;
}

.import-doc__type[data-kind="pdf"]   { background: rgba(180, 69, 58, .1);   color: #b4453a; }
.import-doc__type[data-kind="sheet"] { background: rgba(47, 122, 84, .11);  color: #2f7a54; }
.import-doc__type[data-kind="doc"]   { background: rgba(42, 90, 168, .1);   color: #2a5aa8; }
.import-doc__type[data-kind="image"] { background: rgba(146, 96, 173, .11); color: #8250a6; }

.import-doc__name {
    flex: 1;
    min-width: 0;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--imp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La carte qui regroupe la fin du lot : « + 3 fichiers ». Ce n'est le nom
   d'aucun fichier en particulier, donc elle ne se donne pas l'air d'en être
   un — son titre passe en gris, et le bleu reste pour ce qu'on en a tiré. */
.import-doc--rest .import-doc__name { color: var(--imp-muted); }

/* La roue, et rien d'autre. Pas de barre de progression : on ne sait pas
   combien de temps la lecture prendra, et une barre qui court en boucle a
   l'air d'un chargement en panne. Une roue ne promet aucune durée — elle dit
   seulement qu'on s'occupe de CE document-là. Elle s'éteint quand il a livré. */
.import-doc__spin {
    flex: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid rgba(30, 64, 175, .16);
    border-top-color: var(--imp-blue);
    animation: importSpinner .75s linear infinite;
    transition: opacity .3s var(--imp-ease);
}

.import-doc.is-got .import-doc__spin { opacity: 0; }

@keyframes importSpinner {
    to { transform: rotate(360deg); }
}

/* ── Ce qu'on est en train d'en faire, puis ce qu'on en a tiré ── */
/* La même ligne, au même endroit : « extraction en cours » devient « 6
   musiciens ». Deux lignes distinctes obligeraient à réserver la place des
   deux, et l'annonce du résultat n'aurait plus rien à remplacer. */

.import-doc__step {
    margin: 0;
    padding-left: calc(34px + .6rem);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--imp-faint);
    transition: color .35s var(--imp-ease);
}

.import-doc.is-got .import-doc__step { color: var(--imp-blue); }

/* Ce qu'on garde sans le lire reste gris : la couleur est réservée à ce qui a
   effectivement été repris. */
.import-doc.is-aside .import-doc__step { color: var(--imp-faint); }

/* ── Les lignes extraites ── */
/* Ce sont SES noms, SES dates, SES titres — la seule chose sur cette carte qui
   ne pouvait pas être imprimée d'avance, donc la seule qui prouve quoi que ce
   soit. Elles tombent l'une après l'autre : assez lentement pour qu'on en lise
   au moins une, assez vite pour que personne n'attende. */

.import-doc__lines {
    list-style: none;
    margin: .15rem 0 0;
    padding: 0 0 0 calc(34px + .6rem);
    min-height: 0;
    overflow: hidden;
}

.import-doc__line {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .26rem 0;
    font-size: .86rem;
    line-height: 1.25;
    color: var(--imp-ink);
    animation: importLineIn .34s var(--imp-ease) both;
}

@keyframes importLineIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}

.import-doc__lines.is-instant .import-doc__line {
    animation: none;
    opacity: 1;
}

/* La coche ne décore pas : c'est elle qui dit « celle-là, je l'ai ». */
.import-doc__tick {
    flex: none;
    width: 13px;
    height: 13px;
    color: var(--imp-blue);
    opacity: .72;
}

.import-doc__what {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La précision reste collée au nom. Poussée au bord droit de la carte, elle
   se lisait comme une deuxième colonne, et il fallait traverser trente
   centimètres de blanc pour savoir de quel musicien était l'instrument. */
.import-doc__meta {
    flex: none;
    font-size: .78rem;
    color: var(--imp-faint);
    white-space: nowrap;
}

/* Le point sépare sans peser : sans lui, « Amélie Nguyen trombone » se lit
   comme une seule suite de mots. */
.import-doc__meta::before {
    content: '·';
    margin-right: .4rem;
    opacity: .6;
}

/* Le reste, quand il y en a plus que de place : aligné sur les autres, sans
   coche — il ne désigne aucune ligne en particulier. */
.import-doc__line--rest {
    padding-left: calc(13px + .5rem);
    font-size: .8rem;
    color: var(--imp-faint);
}

/* ── Le compte rendu ── */
/* Il prend la place du défilé une fois celui-ci terminé. Trois nombres posés
   au milieu du blanc : tout le poids visuel est dans le chiffre, parce que
   c'est la seule information qu'on cherche à ce moment-là. Rien pour les
   catégories vides — un « 0 œuvre » n'annonce pas une absence, il annonce un
   échec, alors que ne rien montrer laisse la carte dire ce qu'elle a trouvé. */

.import-recap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .42s var(--imp-ease),
                visibility 0s linear .42s;
}

.import-recap.is-in {
    opacity: 1;
    visibility: visible;
    transition: opacity .42s var(--imp-ease);
}

.import-recap__head {
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--imp-faint);
}

.import-recap__totals {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.import-total {
    display: grid;
    justify-items: center;
    gap: .12rem;
    padding: .5rem .85rem;
    border: 0;
    border-radius: 14px;
    background: none;
    font: inherit;
    color: var(--imp-muted);
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    -webkit-tap-highlight-color: transparent;
    transition: opacity .5s var(--imp-ease),
                transform .5s var(--imp-ease),
                background-color .25s var(--imp-ease);
}

.import-total.is-in {
    opacity: 1;
    transform: none;
}

.import-total:hover { background: var(--imp-wash); }

.import-total:focus-visible {
    outline: 2px solid var(--imp-blue);
    outline-offset: 2px;
}

.import-total__icon {
    display: grid;
    place-items: center;
    color: var(--imp-faint);
}

.import-total__icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Tabulaire, sinon la largeur du chiffre change à chaque image du défilement
   et le mot en dessous se recentre en permanence. */
.import-total__n {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--imp-blue);
}

.import-total__w {
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* ── La ligne de bas de page ── */
/* Elle réserve sa hauteur même vide. Une ligne qui n'apparaît qu'à la fin,
   quand on annonce les partitions mises de côté, remonterait le compte rendu
   au moment précis où on essaie d'en lire les chiffres. */

.import-note {
    margin: .8rem 0 0;
    min-height: 1.15rem;
    text-align: center;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--imp-faint);
    transition: opacity .3s ease;
}

.import-note.is-error { color: #b91c1c; }

/* ── Ce qu'on peut faire de tout ça ── */
/* Le texte d'état et le bouton occupent la même case : la hauteur est celle
   du bouton du début à la fin, et l'un devient l'autre en fondu. */

.import-foot {
    display: grid;
    place-items: center;
    margin-top: .65rem;
    min-height: 2.9rem;
}

.import-foot > * { grid-area: 1 / 1; }

.import-status {
    margin: 0;
    text-align: center;
    font-size: .88rem;
    color: var(--imp-muted);
    transition: opacity .3s ease;
}

.import-card.is-done .import-status,
.import-card.is-offer .import-status { opacity: 0; }

.import-go {
    opacity: 0;
    visibility: hidden;
    transform: translateY(7px);
    pointer-events: none;
    transition: opacity .42s var(--imp-ease),
                transform .42s var(--imp-ease),
                visibility 0s linear .42s;
}

.import-card.is-done .import-go,
.import-card.is-offer .import-go {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity .42s var(--imp-ease),
                transform .42s var(--imp-ease);
}

/* Après le compte rendu seulement, le bouton attend que la carte ait fini de se
   réorganiser sous lui : il se montre à sa place définitive plutôt que d'y
   sauter à moitié visible. En sortie d'échec il n'y a rien à attendre, la carte
   ne bouge pas — d'où la règle réservée à is-done. */
.import-card.is-done .import-go {
    transition: opacity .42s var(--imp-ease) .3s,
                transform .42s var(--imp-ease) .3s;
}

/* ─── 2. TUNNEL PLEIN ÉCRAN ──────────────────────────────────────────── */

.import-tunnel {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-white);
    display: none;
    flex-direction: column;
}

.import-tunnel.is-open { display: flex; }

body.import-tunnel-open { overflow: hidden; }

/* La bulle du chat d'assistance vit au z-index maximal (2147483000) : elle
   passait devant le tunnel et interceptait les clics sur « Continuer », en bas
   à droite. Le tunnel est une page à lui seul ; on range la bulle le temps du
   passage, elle revient à la fermeture. */
body.import-tunnel-open #sostenutoo-chat { display: none; }

.import-tunnel__header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg-white);
}

.import-tunnel__brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    color: var(--primary);
    font-size: 1.05rem;
}

.import-tunnel__brand img { height: 28px; width: auto; }

.import-steps {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.import-step {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: var(--text-light);
    font-weight: 600;
}

.import-step__num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-light);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    flex-shrink: 0;
}

.import-step.is-current { color: var(--primary); }
.import-step.is-current .import-step__num { background: var(--primary); border-color: var(--primary); color: #fff; }
.import-step.is-done .import-step__num { background: var(--success); border-color: var(--success); color: #fff; }
.import-step__sep { width: 22px; height: 1px; background: var(--border); }

.import-tunnel__close {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: .5rem;
    border-radius: 8px;
    display: flex;
}

.import-tunnel__close:hover { background: var(--bg-light); color: var(--text-dark); }

.import-tunnel__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2.5rem 1.5rem 3rem;
}

.import-panel { display: none; max-width: 860px; margin: 0 auto; }
.import-panel.is-active { display: block; }

.import-panel__title {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: .5rem;
    line-height: 1.25;
}

.import-panel__sub {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* ── Écran de vérification ── */
.import-tabs {
    display: flex;
    gap: .5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.import-tabs::-webkit-scrollbar { display: none; }

.import-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: .7rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.import-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }

.import-tab__badge {
    background: var(--bg-light);
    border-radius: 999px;
    padding: .1rem .5rem;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.import-tab.is-active .import-tab__badge { background: #e0eaff; color: var(--primary); }

/* Les ombres n'apparaissent que du côté où il reste du contenu : les deux
   dégradés blancs défilent avec le tableau (`local`) et viennent recouvrir
   les ombres fixes (`scroll`) dès qu'on est au bord. Sans ça, un tableau de
   trente musiciens coupé net après le dixième se lit comme un tableau de
   dix, alors que l'onglet annonce trente. */
.import-table-wrap {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: auto;
    max-height: 52vh;
    background:
        linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) top / 100% 26px no-repeat local,
        linear-gradient(rgba(255, 255, 255, 0), #fff 70%) bottom / 100% 26px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(22, 35, 61, .13), rgba(22, 35, 61, 0)) top / 100% 11px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(22, 35, 61, .13), rgba(22, 35, 61, 0)) bottom / 100% 11px no-repeat scroll;
}

.import-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    min-width: 560px;
}

.import-table th {
    position: sticky;
    top: 0;
    background: var(--bg-light);
    text-align: left;
    padding: .65rem .75rem;
    font-weight: 700;
    color: var(--text-light);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--border);
    z-index: 1;
    white-space: nowrap;
}

.import-table td {
    padding: .3rem .4rem;
    border-bottom: 1px solid #edf2f7;
    vertical-align: middle;
}

.import-table tr:last-child td { border-bottom: none; }
.import-table tr.is-off { opacity: .38; }

.import-table td.import-td-check { width: 40px; text-align: center; padding-left: .75rem; }
.import-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }

.import-cell {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    padding: .4rem .5rem;
    font-size: .9rem;
    font-family: inherit;
    color: var(--text-dark);
    transition: border-color .15s ease, background .15s ease;
}

.import-cell:hover { border-color: var(--border); }
.import-cell:focus { border-color: var(--primary); background: var(--bg-white); outline: none; }
.import-cell::placeholder { color: #b8c2cf; }

.import-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-light);
    font-size: .95rem;
    line-height: 1.6;
}

.import-aside-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.import-aside-list li {
    list-style: none;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .4rem .7rem;
    font-size: .85rem;
    color: var(--text-light);
}

/* ── Formulaires ── */
.import-form {
    display: grid;
    gap: 1.15rem;
    max-width: 520px;
}

.import-form--2col { grid-template-columns: 1fr 1fr; }

.import-field { display: flex; flex-direction: column; gap: .4rem; }
.import-field--full { grid-column: 1 / -1; }

.import-field label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-dark);
}

.import-field input,
.import-field select {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .75rem .9rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-dark);
    background: var(--bg-white);
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}

.import-field input:focus,
.import-field select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, .12);
    outline: none;
}

.import-field__help { font-size: .8rem; color: var(--text-light); }
.import-field.has-error input { border-color: #e53e3e; }
.import-field__error { font-size: .82rem; color: #e53e3e; display: none; }
.import-field.has-error .import-field__error { display: block; }

/* Le récapitulatif du tunnel. Il porte son propre nom : tant qu'il s'appelait
   .import-recap comme celui de la vitrine, son cadre et son fond gris se
   posaient aussi autour des totaux de la carte d'accueil, où l'on ne veut
   aucune boîte. */
.import-tunnel-recap {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.import-tunnel-recap__item { display: flex; flex-direction: column; }
.import-tunnel-recap__num { font-size: 1.5rem; font-weight: 800; color: var(--primary); line-height: 1.1; font-variant-numeric: tabular-nums; }
.import-tunnel-recap__label { font-size: .82rem; color: var(--text-light); }

.import-legal {
    font-size: .82rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-top: 1.25rem;
    max-width: 520px;
}

.import-legal a { color: var(--text-light); text-decoration: underline; }
.import-legal a:hover { color: var(--primary); }

/* ── Pied de tunnel ── */
.import-tunnel__footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg-white);
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.import-tunnel__footer .btn { min-width: 180px; justify-content: center; }

.import-back {
    background: none;
    border: none;
    color: var(--text-light);
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    font-family: inherit;
    padding: .6rem .8rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.import-back:hover { background: var(--bg-light); color: var(--text-dark); }
.import-back[hidden] { visibility: hidden; }

.import-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: importSpin .7s linear infinite;
    display: inline-block;
}

@keyframes importSpin { to { transform: rotate(360deg); } }

.btn[disabled] { opacity: .6; pointer-events: none; }

/* ─── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .import-showcase { padding: 4.5rem 1.25rem; }
    .import-head { margin-bottom: 2.25rem; }

    /* Une colonne, comme les .feature-item du site au même point de rupture :
       le propos d'abord, la carte dessous. Le texte reste aligné à gauche —
       le centrer ferait de la liste des trois points une suite de lignes
       flottantes qu'on ne parcourt plus du regard. */
    .import-showcase__split {
        grid-template-columns: 1fr;
        gap: 2.25rem;
        max-width: 44rem;
    }

    .import-tunnel__body { padding: 1.75rem 1.1rem 2.5rem; }
    .import-panel__title { font-size: 1.35rem; }
    .import-form--2col { grid-template-columns: 1fr; }
    .import-steps { display: none; }
    .import-tunnel__footer .btn { min-width: 0; flex: 1; }
    .import-table-wrap { max-height: 45vh; }
}

@media (max-width: 560px) {
    .import-showcase { padding: 4rem 1.1rem; }
    .import-invite { padding: 2.5rem 1.15rem 2rem; }
    .import-invite__hint { font-size: .88rem; }

    /* Le plateau doit tenir dans la hauteur de l'invitation, qui est plus
       courte ici : tout se resserre pour qu'un document garde la place de
       montrer son nom ET deux ou trois lignes en dessous. Le JS le sait aussi
       (linesRoom), il en écrit une de moins. */
    .import-layer--stage { padding: 1.1rem 1rem 1rem; }
    .import-doc { --doc-lines: 6rem; gap: .4rem; }
    .import-doc__type { width: 28px; height: 28px; border-radius: 8px; font-size: .53rem; }
    .import-doc__name { font-size: .85rem; }
    .import-doc__spin { width: 13px; height: 13px; }
    .import-doc__step,
    .import-doc__lines { padding-left: calc(28px + .5rem); }
    .import-doc__step { font-size: .76rem; }
    .import-doc__line { font-size: .79rem; padding: .2rem 0; }
    .import-doc__meta { font-size: .72rem; }

    .import-wait__spin { width: 22px; height: 22px; }
    .import-wait__title { font-size: .9rem; }
    .import-wait__file { font-size: .78rem; }

    /* Trois chiffres sur une ligne, quitte à être serrés : les passer l'un
       sous l'autre en ferait une liste, et une liste ne se lit pas d'un coup
       d'œil comme un total. */
    .import-recap { gap: .7rem; }
    .import-total { padding: .35rem .5rem; }
    .import-total__icon svg { width: 17px; height: 17px; }
    .import-total__n { font-size: 1.6rem; }
    .import-total__w { font-size: .71rem; }
    .import-note { margin-top: .55rem; font-size: .75rem; }
    .import-foot { margin-top: .5rem; min-height: 2.7rem; }
    .import-go { width: 100%; justify-content: center; }
}

/* Le mouvement porte le message, mais il ne doit jamais être la seule façon
   de le recevoir : sans lui, le JS saute le défilé et affiche directement le
   compte rendu, avec ses totaux écrits et le bouton en dessous. */
@media (prefers-reduced-motion: reduce) {
    .import-layer,
    .import-doc,
    .import-doc__step,
    .import-reel,
    .import-recap,
    .import-wait,
    .import-sheet,
    .import-total,
    .import-status,
    .import-go { transition: none; }

    /* Le compte rendu est posé au milieu de la carte : il s'y recentre sans
       délai, et la note comme le bouton n'ont plus de saut à masquer. */
    .import-card.is-done .import-layer--stage,
    .import-card.is-done .import-foot,
    .import-card.is-done .import-go { transition: none; }
    .import-card.is-done .import-note { animation: none; }

    /* Le nom du fichier en cours de lecture se pose, il n'arrive pas. */
    .import-wait__file.is-fresh { animation: none; }

    /* Le document en cours ne monte ni ne descend : il est là, ou il n'y est
       pas. Ses lignes non plus n'arrivent pas une par une — le JS pose la
       classe is-instant sur la liste. */
    .import-doc { opacity: 0; transform: none; }
    .import-doc.is-in { opacity: 1; }
    .import-doc.is-out { opacity: 0; }
    .import-doc__line { animation: none; opacity: 1; }

    /* La roue ne tourne plus : elle se pose, quartier bleu en haut. Le
       document en cours de lecture reste reconnaissable sans qu'elle bouge. */
    .import-doc__spin,
    .import-wait__spin { animation: none; }

    .import-total { opacity: 0; transform: none; }
    .import-total.is-in { opacity: 1; }
}