/* ==========================================================================
   COQUILLE D'ATELIER — chrome commun à TOUS les écrans de travail
   --------------------------------------------------------------------------
   Ces règles habillent la coquille elle-même — barre du haut, sortie « ‹ Klipa AI »,
   filet d'avancement, barre d'action basse — et NON la mise en page d'un outil.
   Elles vivaient dans le <style> de templates/tool/styles-outils.html, donc sur les
   seules pages-outil : l'écran de résultat / d'atelier (templates/result.html), servi
   par une autre route, ne pouvait pas les recevoir. C'est la cause exacte du défaut
   d'uniformité constaté sur /preview/ et /result/.
   Feuille unique, liée par les DEUX familles de gabarits. Elle se charge APRÈS le
   <style> des outils : c'est ce qui lui permet de primer, comme avant le partage.
   ========================================================================== */
/* Repère de focus au clavier, identique à celui des boutons primaires du
   site. Il manquait à ce composant : la barre basse du téléphone en profite
   aussi, les deux partagent la même classe. */
.klat-go:focus-visible { outline: 2px solid var(--beam-bright, #4D82F3); outline-offset: 2px; }

/* Bouton inactif : l'état natif porte l'apparence. Un liage :style le faisait
   avant — en renvoyant une chaîne VIDE quand le bouton était actif, il
   réécrivait l'attribut style entier et effaçait le display:none posé par
   x-show : le lancement réapparaissait sur un écran qui n'en a pas. */
.klat-go:disabled { opacity: .5; cursor: not-allowed; }

/* Lancement au bout de la barre d'atelier — ORDINATEUR uniquement.
   La barre est collante sous l'en-tête : c'est la seule zone de cet écran
   qui reste visible quel que soit le défilement. Sur téléphone la barre
   basse fixe porte déjà la même action ; deux copies visibles ensemble
   laisseraient douter de laquelle agit, donc une seule à la fois. */
.klat-go-bar { display: none; }
@media (min-width: 900px) {
    .klat-go-bar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        max-width: 300px;
    }
}

body.tool-engaged .klx-cta,
body.tool-engaged .klx-mobile-cta {
    background: transparent;
    color: var(--primary-ink);
    border: 1px solid var(--primary-ink);
    box-shadow: none;
}
body.tool-engaged .klx-cta:hover,
body.tool-engaged .klx-mobile-cta:hover { background: rgba(37, 99, 235, .06); }

/* L'effacement de l'en-tête du site a DÉMÉNAGÉ dans header-footer.css.
   Motif : cette feuille-ci est liée dans le CORPS de la page (après le <style>
   des outils, dont elle doit primer). Elle arrivait donc APRÈS la première
   peinture — mesuré : 45 ms sur une machine de bureau — et pendant ce temps
   l'en-tête du site ET la barre de travail étaient visibles ensemble. La règle
   vit maintenant dans la feuille de l'en-tête, chargée dans le <head> : l'en-tête
   n'est jamais peint quand le serveur sert la page déjà engagée. Elle y est chez
   elle — c'est la seule feuille qui habille .klx-header. */

/* ══════════════════════════════════════════════════════════════════════════
   LA BARRE DE TRAVAIL EST UNE BANDE, PAS UNE CARTE
   --------------------------------------------------------------------------
   C'était la cause matérielle de la rupture ressentie au dépôt d'un fichier :
   la navigation du site est une bande pleine largeur, plate, posée en haut ;
   la barre de travail était une carte arrondie et ombrée, posée DANS la page,
   avec de l'espace au-dessus et sur les côtés. Deux objets de nature
   différente. On les rend identiques — même hauteur, même fond, même marge
   intérieure, une seule bordure basse, aucun arrondi, aucune ombre : seul le
   CONTENU change d'un état à l'autre.
   Le débord pleine largeur ne passe PAS par des marges négatives (un -24px a
   déjà provoqué 8 px de défilement horizontal) : la coquille est sortie du
   conteneur dans les trois gabarits, la bande est donc naturellement large.
   ══════════════════════════════════════════════════════════════════════════ */
/* PEAU PROJECTION — bande nuit fixe, quel que soit le thème clair/sombre du
   site (systeme/projection.css §COMPLÉMENTS ATELIER : la bande de travail est
   toujours nuit, comme .at-bar de la maquette validée). Les jetons --night,
   --beam*, --kick-d etc. viennent de projection.css, déjà lié par
   partials/head.html sur CHAQUE page-outil — aucune nouvelle variable posée
   ici, zéro collision (vérifié par le système Projection lui-même). */
body.atelier-on .klat-bar {
    top: 0;
    z-index: 100;                      /* celui de .klx-header : même plan */
    height: 66px;
    min-height: 0;
    gap: 14px;
    padding: 0 28px;                   /* .klx-header : 0 28px */
    margin: 0 0 14px;
    background: rgba(7, 11, 20, .97);  /* var(--night), translucide comme .at-bar */
    border: 0;
    border-bottom: 1px solid var(--line-d, rgba(77,130,243,.14));
    border-radius: 0;
    box-shadow: none;
}
/* La section ne pose plus d'espace au-dessus : la bande touche le haut. */
body.atelier-on .feature-hero.tool-hero,
body.atelier-on .result-section,
body.atelier-on .job-section { padding-top: 0; }

@media (max-width: 960px) {
    body.atelier-on .klat-bar { height: 56px; padding: 0 16px; gap: 10px; }
}
@media (min-width: 900px) {
    body.tool-engaged .rf-formats-col,
    body.tool-engaged .tool-options-panel.atelier-split > .tool-preview,
    body.tool-engaged .feature-hero.tool-hero[data-tool-type="rotate"] .options-choices > .wysiwyg-stage { top: 68px; }
}

/* SORTIE = LE LOGO SEUL. Aucun chevron devant : tout élément placé avant le
   logo le décale, or c'est ce point d'ancrage qui doit rester rigoureusement
   immobile entre la barre du site et la barre de travail — sans quoi l'on
   croit avoir changé de site. `margin-left` annule exactement le `padding`,
   pour que l'image commence au même x que .klx-logo (soit le bord intérieur
   de la bande). La zone cliquable, elle, garde ses 44 px. */
.klat-exit {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 8px;
    margin-left: -8px;
    border-radius: 10px;
    color: var(--muted-d, #94A3BE);
    text-decoration: none;
}
.klat-exit:hover { background: rgba(77, 130, 243, .1); color: #fff; }
.klat-exit:focus-visible { outline: 2px solid var(--beam-bright, #4D82F3); outline-offset: 2px; }
.klat-exit svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* Tailles reprises de .klx-logo img (header-footer.css:39 et :237), au pixel. */
.klat-exit img { height: 24px; width: auto; }
@media (min-width: 961px) { .klat-exit img { height: 34px; } }
/* SOUS 640 px, C'EST LE NOM DU FICHIER QUI TOMBE — pas le nom de l'outil.
   L'inverse était appliqué : sur un téléphone la bande n'annonçait plus quel
   outil était ouvert, mais gardait un nom de fichier tronqué au tiers. Or la
   vidéo est visible juste dessous : le nom n'apprend rien qu'on ne voie déjà,
   tandis que le nom de l'outil dit ce qu'on est en train de faire. C'est aussi
   ce que fait la maquette validée à 375 px, à l'identique — la ligne restante
   prend le corps et la couleur de la ligne forte. */
@media (max-width: 640px) {
    .klat-bar-file { display: none; }
    .klat-bar-tool { font-size: 14px; font-weight: 700; color: #fff; }
}
body.atelier-fit .klat-exit svg { display: none; }

/* Identité nuit de la bande : kicker mono (nom de l'outil) et nom de fichier
   en blanc plein — mêmes jetons que .at-tool / .at-file de la maquette. */
.klat-bar-tool {
    font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kick-d, #8FB0F9);
}
.klat-bar-file { color: #fff; }

body.atelier-on .klat-shell { align-self: stretch; width: 100%; }

/* ÉCRAN DE RÉSULTAT UNIFIÉ (body.klr-on, posé par tool/resultat-unifie.html).
   La bande y est EXACTEMENT celle des réglages : mêmes organes, même géométrie,
   même place — seule l'action change de mot. C'est tout l'objet du dispositif :
   on reclique là où l'on a déjà cliqué. Aucune règle particulière n'est donc
   posée ici ; « changer de vidéo » reste le seul organe propre aux réglages,
   il n'a rien à faire sur un résultat. */
body.klr-on .klat-back { display: none; }

/* ═══ L'ACTION : UN SEUL BOUTON BLEU PLEIN, AU MÊME ENDROIT PARTOUT ═══
   Téléphone : la barre basse fixe, dans la zone du pouce. Ordinateur : le
   bout de la barre haute, qui ne défile jamais. Le bouton d'origine, posé en
   fin d'écran de réglages, s'efface dans les deux cas — il tombait sous la
   ligne de flottaison et portait un second libellé pour la même action. La
   classe est posée par la coquille : un outil sans coquille la voit jamais,
   et garde donc son bouton. */
body.atelier-go .options-start-btn,
body.atelier-go .cvf-cta { display: none; }

/* MÊME RÈGLE AU RÉSULTAT : le téléchargement principal vit dans la barre, les
   exemplaires du corps s'effacent — jamais deux boutons pour le même fichier.
   `.sbr-dl` = héros du parcours sous-titres, `.klc-board-dl` = le ZIP de la
   planche de clips. Les téléchargements PAR CLIP restent, eux : ils emportent
   autre chose que la barre, ce ne sont pas des doublons.
   Quand les clips portent le logo, le bouton de la barre ouvre la MÊME feuille
   d'offre que celui du corps (openDlSheet → lockedClean) : la vente est
   conservée intacte. */
body.atelier-go .sbr-dl,
body.atelier-go .klc-board-dl { display: none; }

/* ═══ LE HAUT DE L'ÉCRAN DE TRAVAIL ═══
   Une fois le fichier engagé, l'écran n'a plus qu'un seul haut : la barre de
   travail. Elle nomme l'outil et le fichier, dit où en est le travail et porte
   l'action. Tout ce qui se posait entre elle et l'aperçu — liste d'étapes,
   titre de section, phrase d'explication — répétait ce qu'elle dit déjà ou ce
   que les commandes disent d'elles-mêmes, et repoussait la vidéo vers le bas.
   Les textes de la page d'accueil de l'outil ne sont pas concernés. */

/* Avancée du travail : filet collé au bord bas de la barre. Seul `transform`
   est animé (mise à l'échelle horizontale) : aucun recalcul de page. */
body.atelier-fit .klat-bar { position: relative; }
.klat-rail {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    overflow: hidden;
    background: rgba(77, 130, 243, .15);   /* piste du filet, comme .at-rail */
    /* Plus d'arrondi : la bande n'en a pas, le filet suit son bord d'un bout
       à l'autre. Il en avait un du temps où la barre était une carte. */
}
.klat-rail-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--beam-bright, #4D82F3);
    box-shadow: 0 0 10px rgba(77, 130, 243, .8);   /* lueur du projecteur, .at-rail i */
    transform-origin: left center;
    transform: scaleX(.08);
    transition: transform .3s ease;
    will-change: transform;
}
/* La bande est fixe en nuit désormais (peau Projection) : plus de variante
   par thème, --beam-bright se lit pareil quel que soit le thème du site. */
@media (prefers-reduced-motion: reduce) { .klat-rail-fill { transition: none; } }
/* Écran de résultat : la barre garde son aplat et son liseré, le filet garde
   donc son bord — et il est PLEIN. Un travail terminé se voit : la jauge dit
   « c'est fait » là même où elle disait « c'est en cours ». */

/* La barre se lit de gauche à droite : sortie, fichier, état, action. Centrée,
   l'identité du fichier flottait au milieu d'un vide sur grand écran. */
.klat-bar-meta { text-align: left; }
.klat-bar-tool { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 899px) {
    /* La barre d'action garde la MÊME hauteur et la même assise du premier au
       dernier écran : réglages puis résultat, le pouce ne se redéplace jamais. */
    .klat-dock { padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
    .klat-dock .klat-go { min-height: 52px; }
}

/* --------------------------------------------------------------------------
   ÉCRANS DE RÉSULTAT ET DE SUIVI (templates/result.html, templates/job.html)
   La coquille y remplace le haut de page d'origine : le lien de retour et le
   titre disaient ce que la barre dit mieux, et le bouton posé en fin de colonne
   faisait un SECOND bouton bleu plein en même temps que celui de la coquille.
   -------------------------------------------------------------------------- */
body.atelier-on .result-section > .container > .back-link,
body.atelier-on .result-section > .container > h1,
body.atelier-on .job-section > .container > .back-link,
body.atelier-on .job-section > .container > h1 { display: none; }
body.atelier-go .sbs-burn-btn { display: none; }

/* La barre d'action basse s'ancre sur la hauteur VISIBLE mesurée
   (--klat-vue-h) dans la coquille sans défilement du recadrage. L'écran de
   résultat défile normalement et ne publie pas cette mesure : le repli en
   `svh` le décollerait du bas. Ancrage simple, celui d'une page qui défile. */
body:has(.result-section) .klat-dock,
body:has(.job-section) .klat-dock { bottom: 0; }

/* Le lanceur flottant « + » appartient à la vitrine : PENDANT le travail il
   ajoute un rond bleu à côté de l'action, on le masque donc. Au RÉSULTAT le
   travail est fini et l'enchaînement vers un autre outil redevient une offre
   utile : il reparaît — et il est alors le SEUL « + » de l'écran, l'exemplaire
   qui vivait dans la barre basse du résultat ayant disparu avec elle.
   Il se pose au-dessus de la barre basse, jamais par-dessus. */
body.atelier-on:not(.atelier-result) .klplus { display: none; }
@media (max-width: 899px) {
    body.atelier-result.atelier-go .klplus {
        bottom: calc(var(--klat-dock-h, 72px) + env(safe-area-inset-bottom, 0px) + 16px);
    }
    body.atelier-result.atelier-go .klplus-menu {
        bottom: calc(var(--klat-dock-h, 72px) + env(safe-area-inset-bottom, 0px) + 82px);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   CE QUE LA BANDE REND À L'UTILISATEUR : SON QUOTA ET SON COMPTE
   --------------------------------------------------------------------------
   La navigation du site disparaît pendant le travail ; sans cela une personne
   ne pouvait plus ni voir son quota, ni se connecter, ni atteindre les tarifs.
   Le badge de quota est le composant de l'en-tête (.klx-credits-btn), repris
   TEL QUEL — aucun style recopié — et il OUVRE LE MÊME PANNEAU que dans
   l'en-tête : il informe et il ouvre la porte des tarifs, sans faire sortir
   de l'atelier. Son enveloppe .klx-item ancre le panneau (position:relative,
   déjà défini dans header-footer.css) ; .klat-compte étant en display:contents,
   c'est elle qui devient l'élément de la bande, d'où le flex figé.
   ══════════════════════════════════════════════════════════════════════════ */
.klat-quota-item { flex: 0 0 auto; }
.klat-quota { flex: 0 0 auto; text-decoration: none; }
.klat-quota svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ─── PEAU PROJECTION — VERT RETIRÉ, SÉMANTIQUE DE LA MAQUETTE ───
   Le vert est banni de l'interface Projection (design-foundations). La forme
   du jeton (plein / seul / barré) porte déjà l'état sans la couleur, donc la
   couleur redevient un simple renfort : bleu pour « ça tourne » (même famille
   que --beam-bright, jamais lu comme un « succès » à part), ambre/rouge sur
   nuit pour « bas »/« vide » (systeme/projection.css §COMPLÉMENTS ATELIER —
   --warn-d et --danger-d, absents du fichier de base car propres à l'atelier,
   donc posés ici en dur). La bande étant fixe en nuit (voir plus haut), ces
   trois teintes ne varient plus avec le thème du site.
   Contrastes mesurés sur le fond de la bande (rgba(7,11,20,.97)) :
     bleu   #4D82F3 → 5,44:1   ambre  #FBBF24 → 11,79:1   rouge  #F87171 → 7,12:1 */
.klat-quota.is-ok    { color: var(--beam-bright, #4D82F3); border-color: var(--beam-bright, #4D82F3); }
.klat-quota.is-bas   { color: #FBBF24; border-color: #FBBF24; }
.klat-quota.is-vide  { color: #F87171; border-color: #F87171; }
/* Le libellé prend la couleur de son icône : l'état se lit d'un coup, par la
   forme ET par la couleur du couple. */
.klat-quota.is-ok span, .klat-quota.is-bas span, .klat-quota.is-vide span { color: inherit; }

/* « Se connecter » : lien texte, jamais un bouton. L'action de travail est le
   seul bleu plein de l'écran ; un second aplat rendrait de nouveau incertain
   l'endroit où cliquer. */
.klat-signin {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--beam-bright, #4D82F3);
    text-decoration: none;
    white-space: nowrap;
}
.klat-signin:hover { background: rgba(77, 130, 243, .1); }
.klat-signin:focus-visible { outline: 2px solid var(--beam-bright, #4D82F3); outline-offset: 2px; }

/* Sous 960 px la place manque : seul le quota reste à droite — exactement la
   règle déjà appliquée par l'en-tête du site (.klx-right > *:not(.klx-credits)). */
@media (max-width: 960px) {
    .klat-signin { display: none; }
    .klat-quota { min-height: 44px; max-width: 150px; padding: 0 10px; font-size: 12.5px; }
}

/* Conteneur technique du couple quota + connexion : il porte l'x-data et
   disparaît de la mise en page, ses enfants restent des éléments de la bande. */
.klat-compte { display: contents; }

/* LE COMPTE DANS LA BANDE. La navigation du site est effacée pendant le
   travail : sans cet ancrage, une personne connectée ne savait plus sur quel
   compte elle travaillait ni comment en sortir. Le composant est CELUI de
   l'en-tête (.klx-avatar, .klx-drop-account) — aucun style recopié, seul
   l'ancrage du menu est posé ici, la bande étant un conteneur flexible où
   l'avatar ne doit ni s'étirer ni se comprimer. */
.klat-user { flex: 0 0 auto; }

/* Logo de la barre de travail : la barre est TOUJOURS en nuit (Projection), le
   logo suit donc le FOND de la barre et non le thème de la page → toujours le
   logo blanc (.logo-dark = logo-white.png), jamais le logo sombre (.logo-light).
   Spécificité .klat-bar .logo-* (0,2,0) : bat les règles de bascule de thème de
   style.css dans les deux thèmes. */
.klat-bar .logo-light { display: none; }
.klat-bar .logo-dark { display: inline-block; }
