/* ==========================================================================
   Gabarit Atelier — chrome du shell (pilote smart_reframe + lot G1 d'outils
   simples). Chargé seulement sur les pages des outils du gabarit (link injecté
   par main.py d'après _ATELIER_TOOL_TYPES).
   Tout passe par les jetons existants (--primary, --text-*, --border, --shadow-*) :
   aucune couleur en dur, aucun composant nouveau non validé.
   ========================================================================== */

/* ==========================================================================
   UNIFICATION NUIT DES RÉGLAGES SUR MESURE (peau Projection)
   --------------------------------------------------------------------------
   La coquille et les réglages GÉNÉRIQUES (.opt-*, .option-card, .tho-*) sont
   déjà en nuit (restyle direct, commit « adopte le design Projection »). Mais
   chaque outil a ses PROPRES contrôles (.rf-* recadrage, .cvf-* conversion,
   .sbs-*, .klsa-* sous-titres, .klc-* clips, .rz-* redimensionnement, .wm-*
   filigrane…) qui lisent les jetons de THÈME DU SITE (--bg-card, --border,
   --text, --text-muted, --bg-input, --surface-2…) plutôt que les jetons nuit.
   Sur un compte resté en thème clair, ces contrôles gardaient donc un fond
   clair au milieu de la coquille nuit — impression de « sortir du site ».
   Plutôt que restyler ~300 classes (slop), on redéfinit ICI les jetons de
   thème du site sur la palette nuit Projection (--night, --night-2, --night-3,
   --muted-d, --line-d, définis sur :root dans projection.css, déjà lié par partials/head.html),
   dans le seul périmètre TRAVAIL/RÉGLAGES de l'atelier. Les contrôles lisant
   ces jetons passent alors TOUS en nuit d'un coup, sans toucher à un seul
   sélecteur `.rf-*`/`.cvf-*`/etc. La zone de RÉSULTAT (décision, claire) est
   exclue via :not(.atelier-result) — philosophie « travail nuit / décision
   claire » (même garde que .klplus un peu plus bas dans le fichier).
   Encres ajoutées au-delà des jetons de fond/texte/bordure de base :
   --primary-ink/--accent-ink/--warning-ink/--error-ink sont LARGEMENT
   utilisés comme COULEUR DE TEXTE par ces contrôles (12/4/3/3 occurrences) ;
   leur valeur CLAIRE tombe à 3,2–3,7:1 sur les fonds nuit ci-dessous (mesuré)
   — sous le seuil WCAG 4,5:1. On reprend donc les valeurs déjà éclaircies que
   style.css publie pour [data-theme="dark"] (conçues pour ce même usage),
   plutôt que d'en inventer de nouvelles. --primary-hover n'a pas d'équivalent
   dans style.css (jeton non redéfini en sombre côté site) : on le fait pointer
   sur --beam-bright, son rôle exact dans la palette nuit (accent au survol).
   ========================================================================== */
body.atelier-active:not(.atelier-result) .feature-hero.tool-hero {
    --bg: var(--night);            --bg-main: var(--night);      --bg-primary: var(--night);
    --bg-secondary: var(--night-2); --bg-card: var(--night-2);   --surface-2: var(--night-2);
    --bg-input: var(--night-3);
    --text: #E8EDF7;              --text-primary: #E8EDF7;      --text-main: #E8EDF7;
    --text-muted: var(--muted-d);  --text-3: var(--muted-d);     --text-muted-strong: #C0CADB;
    --border: var(--line-d);       --border-strong: rgba(77,130,243,.28);
    /* Encres de texte utilisées par les contrôles (voir note ci-dessus) —
       mêmes valeurs que style.css [data-theme="dark"], contraste ≥ 8:1 sur
       --night-2/--night-3. */
    --primary-ink: #8AB4F8;        --accent-ink: #C4B5FD;
    --warning-ink: #FBBF24;        --error-ink: #FCA5A5;
    --primary-hover: var(--beam-bright);
}
/* Éditeurs POST-TRAITEMENT (.klr-atelier : sous-titres .sbs-, clips IA .klc-) :
   ce sont des écrans de TRAVAIL/configuration (on façonne activement le rendu),
   pas des résultats passifs → nuit comme les autres réglages, MÊME dans l'étape
   résultat. Les résultats passifs (téléchargement, gain de poids) hors .klr-atelier
   restent clairs — la distinction n'est pas avant/après traitement mais
   « je travaille » (nuit) vs « je récupère/décide » (clair).
   AVANT ce correctif, seul `.klr-atelier` (la boîte intérieure) recevait ces
   jetons — pas son conteneur `.feature-hero.tool-hero`, qui gardait le fond
   CLAIR du site (`--bg` non redéfini à ce niveau) : mesuré, un cadre clair
   entourait la boîte nuit de l'atelier (aspect « patchwork »). Ce bloc peint
   maintenant le CONTENEUR lui-même, pas seulement son contenu.
   Règle séparée du bloc RÉGLAGES ci-dessus (jamais mélangé à une liste de
   sélecteurs ordinaires — même convention que .klplus/atelier-chrome.css plus
   bas/ailleurs dans ce fichier) : un navigateur sans :has() ignore CETTE règle
   seule, sans invalider le bloc RÉGLAGES qui marche déjà.
   Garde sur le contenu RÉELLEMENT rendu (.sbr/.sbs-studio/.klc-board-head =
   les 3 blocs de resultat-atelier.html, posés par x-if donc ABSENTS du DOM
   tant qu'ils ne sont pas actifs) — jamais juste `:has(.klr-atelier)` : ce
   conteneur existe TOUJOURS, vide, sur CHAQUE page-outil (resultat-atelier.html
   est concaténé partout par seo_engine.py, y compris compress/resize) ; un
   simple `:has(.klr-atelier)` aurait aussi peint les résultats PASSIFS en
   nuit — cassant leur zone de décision claire (garde-fou explicite de ce
   correctif, voir aussi RÈGLE ci-dessous sur body). */
/* MISE À JOUR — la garde `:has()` a été RETIRÉE, et c'est elle qui laissait du
   blanc autour du panneau. Elle ne reconnaissait que les trois blocs de l'atelier
   de retouche (sous-titres, extraits IA) : pour tous les AUTRES outils, le
   panneau de résultat était peint en nuit par style.css mais son conteneur
   restait clair — un cadre blanc tout autour, constaté sur video-resizer et
   mesuré identique sur l'écran hashtags (panneau #0C1322, héros #F7F8FA).
   Cette garde protégeait les résultats « passifs », qu'on voulait clairs à
   l'époque ; depuis, la décision est que TOUS les écrans d'outil vivent dans la
   nuit — le dernier écran clair, l'aperçu du convertisseur, vient d'y passer.
   Il n'y a donc plus rien à protéger, et `body.atelier-result` suffit : il est
   posé exactement quand une étape terminale est affichée. Bénéfice au passage :
   la règle ne dépend plus de `:has()`. */
body.atelier-result .feature-hero.tool-hero {
    --bg: var(--night);            --bg-main: var(--night);      --bg-primary: var(--night);
    --bg-secondary: var(--night-2); --bg-card: var(--night-2);   --surface-2: var(--night-2);
    --bg-input: var(--night-3);
    --text: #E8EDF7;              --text-primary: #E8EDF7;      --text-main: #E8EDF7;
    --text-muted: var(--muted-d);  --text-3: var(--muted-d);     --text-muted-strong: #C0CADB;
    --border: var(--line-d);       --border-strong: rgba(77,130,243,.28);
    --primary-ink: #8AB4F8;        --accent-ink: #C4B5FD;
    --warning-ink: #FBBF24;        --error-ink: #FCA5A5;
    --primary-hover: var(--beam-bright);
}
/* `.feature-hero.tool-hero{background:var(--bg)}` (style.css:3058, inconditionnel)
   peint déjà le conteneur dès que --bg vaut --night ci-dessus : plus besoin
   d'un `background:` séparé ici, ni de peindre `.klr-atelier` (elle n'a aucun
   fond propre — voir commentaire d'origine — elle hérite du conteneur,
   identique). `body` lui-même (visible si le contenu est plus court que
   l'écran ; en-tête/pied déjà masqués ailleurs par body.atelier-on) suit la
   même garde de contenu, pour qu'aucun clair ne transparaisse nulle part. */
body.atelier-result { --bg: var(--night); }

.klat-shell[x-cloak] { display: none; }

/* --- Barre d'atelier : état seulement, jamais d'action de téléchargement dupliquée.
   Sticky sous l'en-tête réel (66px). --- */
.klat-bar {
    position: sticky;
    top: 66px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 16px;
    margin: 0 0 14px;
    /* Peau Projection : bande nuit fixe (var(--night) de projection.css, déjà
       lié par partials/head.html), quel que soit le thème du site — voir
       atelier-chrome.css pour la version body.atelier-on de cette même bande. */
    background: rgba(7, 11, 20, .97);
    border: 1px solid var(--line-d, rgba(77, 130, 243, .14));
    border-radius: var(--radius);
    box-shadow: none;
}
.klat-bar-meta { flex: 1; min-width: 0; }
.klat-bar-tool {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kick-d, #8FB0F9);
    line-height: 1.1;
}
.klat-bar-file {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ==========================================================================
   Mode PLEIN ÉCRAN atelier — activé par body.atelier-active (posé par Alpine
   x-effect, uniquement pour smart_reframe hors étape « upload »). Sans JS le
   corps garde tout son contenu SEO (rendu serveur intact, indexable).
   ========================================================================== */
body.atelier-active main > *:not(.tool-hero) { display: none; }   /* fil d'Ariane + tout le bloc SEO */
/* Pied de page : LAISSÉ disponible pendant tout l'atelier (réglages, traitement,
   résultat). Il n'a pas d'équivalent dans la barre de travail — contrairement à
   l'en-tête, remplacé par elle — et se place sous la zone de travail : on y accède
   en défilant, sans quitter la tâche. Une tâche en cours ne doit jamais l'effacer. */
/* En-tête du SITE effacé quand l'atelier prend l'écran : la barre de travail porte
   déjà logo + compte + action, sinon double en-tête. Le nouvel en-tête « Projection »
   n'a pas de classe .klx-header (structure <div class="proj"><div x-data="klHeader()">)
   → on cible klHeader ; on garde l'ancien sélecteur pour les pages non-Projection. */
body.atelier-on [x-data*="klHeader"],
body.atelier-on .klx-header { display: none; }
body.atelier-on .klat-bar { top: 0; }
body.atelier-active .feature-hero.tool-hero { padding-top: 18px; }
/* En atelier, la barre remplace le titre/sous-titre héros (encore montrés à
   l'étape « options » par leur x-show) : on les masque au profit de la barre. */
body.atelier-active .feature-hero.tool-hero .feature-hero-title,
body.atelier-active .feature-hero.tool-hero .feature-hero-subtitle,
body.atelier-active .feature-hero.tool-hero .tool-compat-notice,
body.atelier-active .feature-hero.tool-hero .tho-title,
body.atelier-active .feature-hero.tool-hero .tho-subtitle,
body.atelier-active .feature-hero.tool-hero .tho-warn,
body.atelier-active .feature-hero.tool-hero .tho-visual { display: none; }

@media (max-width: 640px) {
    /* La barre reste DANS le conteneur (pas de débord à marges négatives fixes :
       le padding mobile du conteneur n'est pas 24px → un -24px provoquait un
       scroll horizontal du body de 8px). Carte arrondie, jamais de débord. */
    .klat-bar { top: 0; }
    /* Le shell prenait sa largeur MAX-CONTENU (fil d'étapes non replié) dans un
       conteneur flex align-items:center → centré et débordant de ~27px. On le
       borne au conteneur : le fil d'étapes se replie, le nom de fichier s'élide. */
    .klat-shell { max-width: 100%; }
}

/* ==========================================================================
   PLEINE LARGEUR en mode atelier (ordinateur ≥ 900px). En vitrine la largeur
   éditoriale (--max-w, SEO) est conservée ; sur mobile tout reste empilé.
   Cause d'origine du confinement : .tool-hero .container est en flex-column
   align-items:center (largeur ajustée au contenu) → les grilles ne s'étirent
   jamais. On l'étire et on élargit le conteneur, uniquement en atelier.
   ========================================================================== */
@media (min-width: 900px) {
    body.atelier-active .feature-hero.tool-hero .container {
        max-width: 1500px;
        align-items: stretch;
    }
    /* Réglages : aperçu large à gauche | panneau réglages 380px collant à droite */
    body.atelier-active .rf-grid { grid-template-columns: minmax(0, 1fr) 380px; }
    body.atelier-active .rf-player { max-width: 100%; }
    body.atelier-active .rf-formats-col { position: sticky; top: 134px; align-self: start; }
    /* Résultat : scène 9:16 | colonne action-offre-parcours, sur toute la largeur */
    body.atelier-active .rfr-grid { grid-template-columns: minmax(0, 360px) 1fr; }
    /* Moment 2 : suggestions en 3 colonnes, carte déplafonnée */
    body.atelier-active .klsa-card,
    body.atelier-active .klsa-card.klsa-wide { max-width: none; }
    body.atelier-active .klsa-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* ── Lot G1 — RÉGLAGES pleine largeur, deux colonnes (aperçu large | ~380px) ──
       Directive patron : en atelier, TOUT prend la pleine largeur ; l'écran de
       réglages suit le gabarit du pilote/resize (.rf-grid 898|380). Aucune carte
       660px centrée.

       resize : déjà `is-wide` + .rf-grid (règle ci-dessus). Rien à faire.

       Outils à APERÇU PARTAGÉ (compress, cut, extract_audio, adjust_speed,
       video_to_gif, remove_noise) : le panneau `.atelier-split` a des enfants
       PLATS (badge, titre, aperçu partagé, options, bouton). On le passe en
       grille : l'en-tête coiffe les deux colonnes, l'aperçu tient la colonne
       gauche (collant), les réglages s'empilent dans la colonne droite ~380px. */
    body.atelier-active .tool-options-panel.atelier-split {
        max-width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        column-gap: 32px;
        align-items: start;
        padding: 22px 30px 28px;
    }
    body.atelier-active .tool-options-panel.atelier-split > .tool-preview {
        grid-column: 1; grid-row: 2 / span 50;
        align-self: start; position: sticky; top: 134px; margin: 0;
    }
    body.atelier-active .tool-options-panel.atelier-split > .options-section-title,
    body.atelier-active .tool-options-panel.atelier-split > .options-section-sub,
    body.atelier-active .tool-options-panel.atelier-split > .options-choices,
    body.atelier-active .tool-options-panel.atelier-split > .options-start-btn,
    body.atelier-active .tool-options-panel.atelier-split > .options-hint { grid-column: 2; }
    body.atelier-active .tool-options-panel.atelier-split > .options-choices { padding-left: 0; padding-right: 0; }

    /* rotate : APERÇU PROPRE (la vidéo pivotée .wysiwyg-stage vit DANS ses
       options). On grille le bloc d'options lui-même : aperçu à gauche (collant),
       commandes de rotation à droite ~380px. */
    body.atelier-active .feature-hero.tool-hero[data-tool-type="rotate"] .tool-options-panel { max-width: 100%; }
    body.atelier-active .feature-hero.tool-hero[data-tool-type="rotate"] .options-choices {
        display: grid; grid-template-columns: minmax(0, 1fr) 380px;
        column-gap: 32px; align-items: start; text-align: left;
    }
    body.atelier-active .feature-hero.tool-hero[data-tool-type="rotate"] .options-choices > .options-hint { grid-column: 1 / -1; }
    body.atelier-active .feature-hero.tool-hero[data-tool-type="rotate"] .options-choices > .wysiwyg-stage {
        grid-column: 1; grid-row: 2 / span 20; align-self: start; position: sticky; top: 134px; margin: 0;
    }
    body.atelier-active .feature-hero.tool-hero[data-tool-type="rotate"] .options-choices > .rotate-dirs,
    body.atelier-active .feature-hero.tool-hero[data-tool-type="rotate"] .options-choices > .rotate-result { grid-column: 2; margin: 0; }

    /* Watermark / Logo : éditeur Fabric à son PROPRE deux-colonnes natif (.wm-grid
       = canevas | 372px). Panneau libéré en pleine largeur ; canevas JAMAIS comprimé. */
    body.atelier-active .feature-hero.tool-hero[data-tool-type="add_watermark"] .tool-options-panel,
    body.atelier-active .feature-hero.tool-hero[data-tool-type="logo_overlay"] .tool-options-panel { max-width: 100%; }
}

/* ==========================================================================
   COQUILLE D'APPLICATION — l'outil tient dans la hauteur visible
   --------------------------------------------------------------------------
   Posée par body.atelier-fit (Alpine, écran de réglage du recadrage seulement).
   Trois bandes qui font exactement la hauteur VISIBLE : barre, aperçu, réglages.
   Seule la bande des réglages peut défiler à l'intérieur d'elle-même ; la page,
   jamais. `dvh` et non `vh` : sur téléphone la barre du navigateur apparaît et
   disparaît, et `vh` ignore ce mouvement — le bas de l'écran passerait sous le pli.

   La bande basse n'a PAS de hauteur figée. Une hauteur en dur déborde dès qu'un
   libellé s'allonge (mesuré sur la maquette : 205 px de contenu pour 200 réservés,
   soit le bas rogné) et ne survit pas à un écran court ni au mode paysage.
   ========================================================================== */
/* La hauteur se répartit en chaîne depuis le corps : l'en-tête du site garde sa
   place quelle qu'elle soit, et l'atelier occupe exactement ce qui reste. Aucune
   hauteur d'en-tête n'est écrite en dur — elle change avec la langue et le thème. */
body.atelier-fit {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body.atelier-fit > main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* `dvh` suit la barre du navigateur quand elle se replie, mais elle ne se replie pas
   toujours : on garde une réserve pour que la dernière rangée de boutons ne se
   retrouve jamais dessous. */
body.atelier-fit { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
body.atelier-fit .feature-hero.tool-hero {
    flex: 1;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body.atelier-fit .feature-hero.tool-hero > .container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}
body.atelier-fit .klat-shell { flex: 0 0 auto; margin-bottom: 8px; }
body.atelier-fit .tool-options-panel,
body.atelier-fit .rf-block { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.atelier-fit .options-section-title,
body.atelier-fit .options-section-sub { display: none; }
body.atelier-fit .rf-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }

/* Bande 2 — l'APERÇU. Sa boîte garde une taille constante : c'est l'image qui
   s'ajuste dedans. Redimensionner la boîte obligerait la page à se recalculer et
   ferait apparaître la vidéo écrasée le temps de la transition. */
body.atelier-fit .rf-preview-col {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
/* Le lecteur porte le ratio du format choisi. Plafonner sa HAUTEUR seule brisait
   ce ratio : la largeur ne suivait pas, et un 9:16 s'affichait en 0,81 — la forme
   montrée n'était plus celle du fichier à produire. On plafonne donc la LARGEUR à
   partir de la hauteur disponible : la colonne devient un conteneur mesurable, et
   `cqh` exprime cette hauteur dans la largeur du lecteur. Le ratio reste exact. */
/* Deux causes distinctes écrasaient l'aperçu, et il fallait traiter les deux :
   1. la boîte est un enfant flexible — elle se laissait COMPRIMER en hauteur, et
      le ratio partait avec ; `flex:0 0 auto` le lui interdit ;
   2. sans plafond, elle débordait alors de la bande. On plafonne donc sa LARGEUR
      à partir de la hauteur réellement disponible (`cqh` mesure la bande, que le
      JS ne peut pas connaître), et la hauteur en découle. Le ratio reste exact. */
/* Un conteneur mesuré en taille doit avoir ses DEUX dimensions définies :
   sans largeur explicite il se replie et l'aperçu disparaît. */
body.atelier-fit .rf-preview-col { container-type: size; width: 100%; }
body.atelier-fit .rf-player {
    flex: 0 0 auto;
    margin: 0 auto;
    /* Le script écrit `max-width` EN LIGNE : une règle de feuille de style ne peut
       pas l'emporter. Il y laisse donc un point d'entrée, `--rf-cap`, que seule la
       feuille peut renseigner — c'est ici qu'on connaît la hauteur de la bande. */
    --rf-cap: calc(100cqh * var(--rf-ar, 1));
}
body.atelier-fit .rf-noblack { display: none; }        /* redit ce que dit déjà la méthode */

/* Bande 3 — les RÉGLAGES. Bornée au tiers de l'écran, elle défile en son sein
   plutôt que de pousser l'aperçu hors de vue. */
body.atelier-fit .rf-formats-col {
    flex: 0 0 auto;
    /* Les réglages servent d'abord : ils prennent leur hauteur naturelle, et c'est
       l'aperçu qui absorbe le reste. L'inverse laissait un défilement résiduel dans
       la bande basse sur les écrans courts — le défaut même qu'on supprime ici.
       Le plafond n'existe que pour empêcher les réglages de manger tout l'écran. */
    max-height: 46dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
/* L'action vit dans la barre : le bouton d'origine ferait doublon. */
body.atelier-fit .options-start-btn { display: none; }

/* Action dans la barre */
.klat-go {
    position: relative;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    /* Peau Projection : bleu-projecteur plein (.btn-beam de la maquette),
       jamais un dégradé — l'action reste le SEUL bleu plein de l'écran. */
    background: var(--beam, #2563EB);
    box-shadow: 0 0 0 1px rgba(77, 130, 243, .35), 0 8px 32px rgba(37, 99, 235, .45);
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
.klat-go:hover { background: #1D4ED8; }

/* Avancée du TÉLÉCHARGEMENT, à même le bouton : seul `transform` est animé, la
   page ne se recalcule à aucune image. Aux réglages l'échelle vaut 0 — la bande
   existe sans rien peindre. */
.klat-go-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 100%;
    background: #1D4ED8;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform .24s ease;
    pointer-events: none;
}
.klat-go-in {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Fichier récupéré : le bouton garde sa place et reste cliquable, mais rend le
   plein bleu — jamais deux boutons pleins en concurrence sur le même écran. */
.klat-go.is-done {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--beam-bright, #4D82F3);
    color: var(--beam-bright, #4D82F3);
}
.klat-go.is-done .klat-go-fill { background: none; }

/* Ordinateur : les mêmes bandes, réparties en largeur — aperçu à gauche,
   réglages à droite, sans défilement de page non plus. */
@media (min-width: 900px) {
    body.atelier-fit .rf-grid {
        flex-direction: row;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 20px;
    }
    body.atelier-fit .rf-formats-col { max-height: 100%; align-self: stretch; position: static; }
    .klat-go { max-width: none; min-height: 44px; font-size: 14px; }
}

/* Paysage sur téléphone : la hauteur visible tombe sous 480 px. L'aperçu passe à
   gauche des réglages plutôt que de se réduire à une bande inexploitable. */
@media (max-width: 899px) and (max-height: 520px) {
    body.atelier-fit .rf-grid {
        flex-direction: row;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
    }
    body.atelier-fit .rf-formats-col { max-height: 100%; }
}

/* --------------------------------------------------------------------------
   Bande des réglages, forme COMPACTE (écran serré uniquement)
   Le contenu réclamait plus du double de la place disponible : la bande devait
   défiler en son sein, ce qui reproduisait le défaut qu'on voulait supprimer.
   Les cinq formats tiennent sur une ligne, les trois méthodes sur une autre :
   la forme du bouton porte l'information, le libellé la confirme.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
    body.atelier-fit .rf-formats-label { font-size: 11px; margin: 0 0 6px; }
    body.atelier-fit .rf-cards {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }
    /* La carte garde son rendu validé (vignette à la forme du format + libellé) :
       seule la RÉPARTITION change, cinq colonnes au lieu d'un retour à la ligne.
       Toucher à l'intérieur de la carte entrait en conflit avec les dimensions
       calculées de la vignette et la rendait illisible. */
    body.atelier-fit .rf-card { width: auto; min-width: 0; }

    body.atelier-fit .rz-sub { margin-top: 10px; }
    body.atelier-fit .rz-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 0; }
    body.atelier-fit .cvf-mode-opt { padding: 8px 6px; text-align: center; min-height: 46px; }
    body.atelier-fit .cvf-mode-note { display: none; }      /* dit par la phrase de résultat */
    body.atelier-fit .cvf-mode-top { display: flex; flex-direction: column; align-items: center; gap: 2px; }
    body.atelier-fit .cvf-mode-top b { font-size: 12px; line-height: 1.15; }
    body.atelier-fit .cvf-mode-badge { font-size: 8.5px; padding: 1px 4px; }
    body.atelier-fit .rz-mode-outcome { margin-top: 8px; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   Barre compacte en mode coquille. Elle ne défile plus avec la page (il n'y a
   plus de défilement) : le collant, la marge et l'ombre n'ont plus d'objet, et
   les rendre libère la hauteur qui manquait aux réglages sur les petits écrans.
   -------------------------------------------------------------------------- */
body.atelier-fit .klat-bar {
    position: static;
    min-height: 0;
    padding: 6px 12px;
    margin: 0;
    gap: 9px;
    box-shadow: none;
}
body.atelier-fit .klat-bar-tool { display: none; }   /* la page dit déjà quel outil */

/* La marge du bas suffit à séparer les bandes : le liseré et l'aplat en moins,
   c'est autant de hauteur rendue à l'aperçu. */
body.atelier-fit .rf-help { margin: 0; padding: 4px 0 0; font-size: 12px; }
body.atelier-fit .rf-help svg { width: 15px; height: 15px; }
body.atelier-fit .rf-warn { margin: 4px 0 0; padding: 5px 8px; font-size: 11.5px; }

/* ==========================================================================
   FIDÉLITÉ À LA MAQUETTE — ce que l'atelier retire de l'écran
   --------------------------------------------------------------------------
   1. La navigation du site n'a pas sa place dans l'outil : elle appartient à la
      vitrine. Elle rendait 56 px à l'aperçu, et la barre porte déjà la sortie.
   2. Un seul message sous le lecteur. Il y en avait trois — fidélité, alerte de
      dégradation, « jamais de bandes noires » — qui répétaient ce que l'aperçu
      montre déjà et écrasaient la vidéo.
   ========================================================================== */
/* La navigation du site ne disparaît que sur TÉLÉPHONE, où chaque pixel de hauteur
   compte. Sur ordinateur la place ne manque pas : elle reste, et l'atelier s'installe
   dessous. */
@media (max-width: 899px) {
    body.atelier-fit .klx-header { display: none; }
}

@media (min-width: 900px) { .klat-back, .klat-dock { display: none; } }
.klat-back {
    width: 36px; height: 36px; flex: 0 0 auto;
    border: 1px solid var(--line-d, rgba(77, 130, 243, .14));
    border-radius: 9px;
    background: var(--night-2, #0C1322);
    color: var(--muted-d, #94A3BE);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.klat-back svg { width: 17px; height: 17px; }
.klat-back:hover { background: rgba(77, 130, 243, .1); color: #fff; }

/* Le seul message conservé sous le lecteur : la promesse de fidélité, sur une
   ligne, sans encadré — l'encadré prenait à lui seul deux fois sa hauteur. */
body.atelier-fit .rf-help {
    background: none;
    border: 0;
    margin: 0;
    padding: 3px 0 0;
    font-size: 11.5px;
    line-height: 1.3;
    gap: 6px;
}
body.atelier-fit .rf-help p { margin: 0; }
body.atelier-fit .rf-warn { display: none; }

/* La phrase qui décrit la méthode tient sur deux lignes au plus : au-delà, elle
   mange l'aperçu sans rien apprendre de plus. */
body.atelier-fit .rz-mode-outcome {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Vignettes de format : le grand côté suit la largeur de la carte. Le ratio est
   calculé par rfShapeStyle à partir de cette variable — il reste donc exact. */
@media (max-width: 899px) {
    /* Cinq cartes de front : la forme et le ratio, rien d'autre. Le nom des
       plateformes ne tient pas dans 60 px — il se coupait au milieu d'un mot.
       Il reste lu par les lecteurs d'écran via l'étiquette du bouton. */
    body.atelier-fit .rf-cards { --rf-shape-side: 26px; }
    body.atelier-fit .rf-card { padding: 6px 2px; gap: 4px; min-height: 0; }
    body.atelier-fit .rf-shape-box { margin: 0; padding: 0; min-height: 0; }
    body.atelier-fit .rf-card-lab { gap: 0; }
    body.atelier-fit .rf-card-lab b { font-size: 11px; line-height: 1.1; }
    body.atelier-fit .rf-card-lab span { display: none; }
    body.atelier-fit .rz-current { font-size: 8px; padding: 1px 3px; }
    body.atelier-fit .rf-formats-label { font-size: 11px; margin: 0 0 5px; }
}

/* La phrase de méthode : deux lignes pleines, jamais une troisième coupée en son
   milieu. Le sélecteur reprend la colonne pour l'emporter sur la règle d'origine
   qui rétablissait `display:block` et annulait la troncature. */
body.atelier-fit .rf-formats-col .rz-mode-outcome {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 7px 9px;
}

/* ==========================================================================
   MODÈLE RETENU — écran DÉFILABLE + barre d'action fixe en bas
   --------------------------------------------------------------------------
   Tenir tout l'outil dans un écran sans défilement obligeait à rogner partout :
   noms de plateformes coupés, phrases tronquées, aperçu à l'étroit. On garde
   donc le défilement — ce qui rend de la place — et on rend permanent le SEUL
   élément qui ne doit jamais disparaître : l'action. Les règles de verrouillage
   de hauteur posées plus haut sont neutralisées ici (même portée, écrites après).
   ========================================================================== */
body.atelier-fit { height: auto; overflow: visible; display: block; padding-bottom: 0; }
body.atelier-fit > main { display: block; }
body.atelier-fit .feature-hero.tool-hero { flex: none; min-height: 0; display: block; overflow: visible; }
body.atelier-fit .feature-hero.tool-hero > .container {
    display: block;
    /* la barre fixe ne doit jamais recouvrir la fin du contenu */
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}
body.atelier-fit .tool-options-panel,
body.atelier-fit .rf-block,
body.atelier-fit .rf-grid { display: block; flex: none; min-height: 0; }
body.atelier-fit .rf-preview-col { display: block; container-type: normal; }
body.atelier-fit .rf-formats-col { max-height: none; overflow: visible; }
body.atelier-fit .rf-player { --rf-cap: 58dvh; }

/* La place étant revenue, on rétablit ce que la contrainte avait supprimé :
   le nom des plateformes sous chaque format, et la phrase de méthode entière. */
@media (max-width: 899px) {
    body.atelier-fit .rf-cards { --rf-shape-side: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    body.atelier-fit .rf-card-lab span { display: block; font-size: 9.5px; line-height: 1.25; }
    body.atelier-fit .rf-card { padding: 9px 4px; gap: 6px; }
}
body.atelier-fit .rf-formats-col .rz-mode-outcome {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
}
body.atelier-fit .rf-help { background: none; border: 0; }

/* La barre d'action fixe */
.klat-dock {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(7, 11, 20, .97);   /* var(--night), comme .at-dock */
    border-top: 1px solid var(--line-d, rgba(77, 130, 243, .14));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .4);
}
/* La bande de travail et la barre basse ne portent QUE l'action : l'une est haute
   de 66 px, l'autre a une hauteur réservée. Un texte de plusieurs lignes y déborde
   et recouvre ce qu'il y a en dessous. Ce que coûte le traitement voyage donc SUR
   le bouton (KLAT.lab), et rien d'autre ne s'ajoute ici. */
.klat-dock .klat-go {
    display: flex;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    font-size: 15.5px;
}
@media (min-width: 900px) {
    .klat-dock { padding: 12px 24px; }
    body.atelier-fit .feature-hero.tool-hero > .container { padding-bottom: 96px; }
}

/* ==========================================================================
   PLACE RÉSERVÉE CONSTANTE POUR L'APERÇU
   --------------------------------------------------------------------------
   Le lecteur change de forme avec le format — c'est voulu, c'est l'information.
   Mais la PLACE qu'il occupe ne doit pas changer : sinon tout ce qui suit saute
   d'un demi-écran à chaque clic, et la page se recalcule à chaque fois.
   On réserve donc une bande de hauteur fixe, et le lecteur s'y centre :
   la boîte ne bouge jamais, seule l'image change de forme à l'intérieur.
   Le plafond de largeur se déduit de cette hauteur (× le ratio) — plafonner la
   hauteur seule casserait le ratio, la largeur ne suivant pas.
   ========================================================================== */
body.atelier-fit .rf-preview-col {
    --rf-h: 46dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--rf-h);
    margin-bottom: 10px;
}
body.atelier-fit .rf-player {
    --rf-cap: calc(var(--rf-h, 46dvh) * var(--rf-ar, 1));
    margin: 0 auto;
    flex: 0 0 auto;
}
@media (min-width: 900px) {
    body.atelier-fit .rf-preview-col { --rf-h: 58dvh; }
}

/* ==========================================================================
   TROIS CORRECTIFS
   1. Le changement de format s'ANIME. La place réservée étant désormais fixe,
      l'animation ne fait plus bouger la page : elle reste confinée au lecteur.
      Largeur et proportion sont animées ENSEMBLE, même durée, même courbe —
      désynchronisées, l'image passerait par des états écrasés.
   2. Le lecteur débordait par le HAUT : sa marge basse s'ajoutait à sa hauteur,
      le total dépassait la réserve, et un contenu centré qui déborde sort des
      DEUX côtés — les coins arrondis du haut disparaissaient. On retire cette
      marge et on la déduit du plafond.
   3. Les vignettes de format étaient restées dimensionnées pour les cartes
      étroites de la version sans défilement. Les cartes sont maintenant larges :
      la vignette reprend une taille proportionnée à son conteneur.
   ========================================================================== */
body.atelier-fit .rf-player {
    margin: 0 auto;
    --rf-cap: calc((var(--rf-h, 46dvh) - 4px) * var(--rf-ar, 1));
    transition: max-width .24s ease, aspect-ratio .24s ease;
}
@media (prefers-reduced-motion: reduce) {
    body.atelier-fit .rf-player { transition: none; }
}

@media (max-width: 899px) {
    body.atelier-fit .rf-cards { --rf-shape-side: 46px; }
    body.atelier-fit .rf-card { padding: 11px 6px; gap: 8px; }
}
@media (min-width: 900px) {
    body.atelier-fit .rf-cards { --rf-shape-side: 58px; }
}

/* Dans la réserve à hauteur fixe, la marge basse du lecteur n'a plus lieu d'être :
   l'espacement vient de la réserve elle-même. */
body.atelier-fit .rf-player { --rf-mb: 0px; }

/* Taille des vignettes de format, demandée à 75 px. */
body.atelier-fit .rf-cards { --rf-shape-side: 75px; }

/* Le lecteur se dimensionne seul (voir rlBoxStyle) : plus de plafond calculé,
   donc plus rien qui puisse se défaire d'un format à l'autre. On garde le
   mouvement, qui ne porte plus que sur la proportion. */
body.atelier-fit .rf-player {
    --rf-cap: initial;
    flex: 0 0 auto;
    transition: aspect-ratio .24s ease, width .24s ease, height .24s ease;
}
@media (prefers-reduced-motion: reduce) { body.atelier-fit .rf-player { transition: none; } }

/* ==========================================================================
   FIXER LA BARRE DU NAVIGATEUR
   --------------------------------------------------------------------------
   Les navigateurs mobiles replient leur barre quand c'est le DOCUMENT qui
   défile. Le procédé employé par les sites qui la gardent visible : empêcher le
   document de défiler, et faire défiler un conteneur INTÉRIEUR à la place. La
   barre n'a alors plus de raison de bouger, et la hauteur visible cesse de
   varier — ce qui stabilise du même coup la place réservée à l'aperçu.
   ========================================================================== */
body.atelier-fit {
    position: fixed;
    inset: 0;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
}
body.atelier-fit > main {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
body.atelier-fit .feature-hero.tool-hero { overflow: visible; }

/* La réserve de l'aperçu se mesure alors sur une hauteur qui ne bouge plus. */
body.atelier-fit .rf-preview-col { --rf-h: 44dvh; }

/* ==========================================================================
   LE LECTEUR NE PEUT PLUS DÉPASSER SA RÉSERVE
   La colonne devient un conteneur mesurable : `cqh` y exprime sa hauteur, et on
   en déduit le plafond de LARGEUR (hauteur × ratio). La hauteur du lecteur en
   découle et ne peut donc pas excéder la réserve. La valeur de repli est
   volontairement étroite : si le ratio venait à manquer, mieux vaut un aperçu
   trop petit qu'un aperçu qui déborde.
   ========================================================================== */
body.atelier-fit .rf-preview-col { container-type: size; }
body.atelier-fit .rf-player {
    width: 100%;
    height: auto;
    margin: 0 auto;
    max-width: min(100%, calc(100cqh * var(--rf-ar, 0.5)));
    transition: max-width .24s ease, aspect-ratio .24s ease;
}

/* Les deux lignes se ressemblaient et se touchaient : même taille, même graisse,
   côte à côte. On les sépare et on leur donne des rôles visuellement distincts —
   l'une est une confirmation, l'autre un intitulé de section. */
body.atelier-fit .rf-help {
    margin: 0 0 18px;
    font-size: 12px;
    color: var(--muted-d, #94A3BE);
    align-items: flex-start;
}
body.atelier-fit .rf-help svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
body.atelier-fit .rf-formats-label {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kick-d, #8FB0F9);
}

/* La taille du lecteur est désormais calculée en pixels par rlBoxStyle : le CSS
   ne pose plus aucun plafond, il n'y a donc plus de chaîne de variables à tenir. */
body.atelier-fit .rf-player { max-width: none; height: auto; }

/* La confirmation de fidélité disparaît du téléphone : elle doublait l'intitulé
   de section juste en dessous, pour une information que l'aperçu démontre déjà. */
@media (max-width: 899px) {
    body.atelier-fit .rf-help { display: none; }
}

/* ==========================================================================
   PLEIN ÉCRAN DÉSACTIVÉ SUR L'APERÇU DE CADRAGE
   Le cadrage est obtenu par une transformation appliquée à la vidéo dans la page.
   Le plein écran d'iOS confie la lecture au lecteur du système, qui ignore cette
   transformation et affiche la vidéo D'ORIGINE — soit exactement le contraire de
   ce que promet cet écran. Il fait de plus disparaître la barre du navigateur,
   ce qui rend les commandes de la page inopérantes. On retire donc le bouton
   ici ; il reste partout ailleurs, où la vidéo affichée est la vraie.
   ========================================================================== */
body.atelier-fit .rf-preview-col .kp-fs { display: none; }

/* Le bouton de plein écran revient : il ouvre désormais un plein écran DANS la
   page (voir media.js), qui conserve le cadrage et la barre du navigateur. */
body.atelier-fit .rf-preview-col .kp-fs { display: inline-flex; }
body.rf-full { overflow: hidden; }
body.rf-full::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #000;
}

/* ==========================================================================
   RIEN NE RESTE CACHÉ SOUS LA BARRE D'ACTION
   Le défilement a lieu dans le conteneur intérieur : c'est LUI qui doit réserver
   la hauteur de la barre, pas la page. La réserve est portée par une variable
   unique, pour que barre et réserve ne puissent pas diverger.
   ========================================================================== */
body.atelier-fit { --klat-dock-h: 74px; }
body.atelier-fit > main {
    padding-bottom: calc(var(--klat-dock-h) + env(safe-area-inset-bottom, 0px) + 16px);
    box-sizing: border-box;
}
body.atelier-fit .feature-hero.tool-hero > .container { padding-bottom: 8px; }
@media (min-width: 900px) { body.atelier-fit { --klat-dock-h: 80px; } }

/* ==========================================================================
   LA BARRE D'ACTION NE PEUT PLUS RIEN CACHER — solution définitive
   --------------------------------------------------------------------------
   Réserver la place par une marge intérieure sur le conteneur qui défile ne
   suffit pas : plusieurs moteurs ignorent cette marge en fin de défilement,
   c'est un travers connu des zones défilantes. On ajoute donc un BLOC RÉEL en
   fin de contenu. Un bloc, lui, ne peut pas être ignoré : il fait partie du flux
   et le défilement va nécessairement jusqu'à lui.
   ========================================================================== */
body.atelier-fit { --klat-dock-h: 76px; }
body.atelier-fit > main { padding-bottom: 0; }
body.atelier-fit > main::after {
    content: "";
    display: block;
    width: 100%;
    height: calc(var(--klat-dock-h) + env(safe-area-inset-bottom, 0px) + 20px);
    flex: 0 0 auto;
    pointer-events: none;
}
/* La marge basse du conteneur éditorial ne doit pas contredire ce bloc. */
body.atelier-fit .feature-hero.tool-hero > .container { padding-bottom: 0; }
@media (min-width: 900px) { body.atelier-fit { --klat-dock-h: 82px; } }

/* ==========================================================================
   HAUTEUR : `svh` ET NON `dvh`
   --------------------------------------------------------------------------
   `dvh` suit les barres du navigateur quand elles se replient — donc la mise en
   page se décale, et sur iPhone un élément fixé en bas se retrouve DERRIÈRE la
   barre d'outils de Safari, qui elle ne se replie pas. `svh` est la hauteur avec
   les barres AFFICHÉES : c'est la seule valeur qui ne promet jamais plus de
   place qu'il n'y en a. C'est la recommandation retenue par le secteur.
   ========================================================================== */
body.atelier-fit { height: 100svh; }
body.atelier-fit .rf-preview-col { --rf-h: 42svh; }
.klat-dock { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

/* Le voile noir ne couvre plus tout l'écran : s'il arrivait que le conteneur ne
   se place pas, on se retrouvait avec un écran entièrement noir et rien d'autre.
   Le fond noir appartient désormais au conteneur lui-même. */
body.rf-full::before { content: none; }

/* ==========================================================================
   LA BARRE SE CALE SUR LA ZONE RÉELLEMENT VISIBLE
   --------------------------------------------------------------------------
   Un élément fixé en bas se place, sur iPhone, derrière la barre d'outils de
   Safari : le navigateur résout `bottom:0` sur l'écran entier, pas sur ce qu'on
   voit. Aucune unité CSS ne corrige cela de façon fiable. On ancre donc la barre
   par le HAUT, à une position calculée depuis la hauteur visible mesurée
   (`--klat-vue-h`, publiée par media.js). Repli en `svh` si la mesure manque.
   ========================================================================== */
body.atelier-fit { height: var(--klat-vue-h, 100svh); }
/* DÉPENDANCE CIRCULAIRE À NE PAS REFAIRE : le script MESURE la barre pour en
   déduire la réserve. Lui donner en retour une hauteur issue de cette mesure
   l'enfermait dans sa première valeur — mesurée avant que le bouton ne soit
   rendu, soit 21 px. La barre restait donc écrasée, et la réserve dérisoire.
   La barre se dimensionne sur son CONTENU ; la mesure ne sert qu'à la réserve. */
.klat-dock {
    bottom: calc(100% - var(--klat-vue-h, 100svh));
    top: auto;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
body.atelier-fit { --klat-dock-h: 72px; }
@media (min-width: 900px) { body.atelier-fit { --klat-dock-h: 78px; } }

/* La barre reste FIXE et visible en permanence — c'est une exigence produit.
   La réserve de fin de page est traitée séparément (voir plus bas). */

/* ==========================================================================
   RÉSERVE PORTÉE PAR LE DERNIER BLOC DE CONTENU LUI-MÊME
   --------------------------------------------------------------------------
   Les tentatives précédentes réservaient la place sur la zone défilante — marge
   intérieure, puis bloc ajouté en fin. Selon le navigateur, l'une comme l'autre
   peut ne pas être parcourue en fin de défilement. Une marge posée sur un bloc
   RÉEL et VISIBLE du contenu, elle, l'est toujours : quel que soit l'élément qui
   défile, il doit aller jusqu'au bas de ses enfants.
   ========================================================================== */
body.atelier-fit .rf-formats-col {
    margin-bottom: calc(var(--klat-dock-h, 72px) + env(safe-area-inset-bottom, 0px) + 28px);
}

/* Sortie du plein écran : ronde, large, en haut à droite, au-dessus de tout le
   reste. C'est la seule commande dont l'absence enferme l'utilisateur. */
.rf-fsclose {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(5, 7, 10, .62);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: none;
}
.rf-fsclose svg { width: 20px; height: 20px; }
.rf-fsclose:hover { background: rgba(5, 7, 10, .8); }
@supports (top: env(safe-area-inset-top)) {
    .rf-fsclose { top: calc(12px + env(safe-area-inset-top, 0px)); }
}

/* En plein écran sur téléphone, la barre du lecteur retrouve toute sa largeur et
   réaffiche tout : elle déborde alors sur un format vertical. On y garde le
   strict nécessaire — lecture, coupure du son, plein écran. Les sauts de 10 s se
   font au doigt sur la barre de progression, et le VOLUME se règle avec les
   touches du téléphone : seule la coupure a un sens ici. */
@media (max-width: 899px) {
    .rf-player.is-full .kp-b10,
    .rf-player.is-full .kp-f10,
    .rf-player.is-full .kp-spd,
    .rf-player.is-full .kp-vr,
    .rf-player.is-full .kp-t i { display: none; }
    .rf-player.is-full .kp-row { gap: 6px; }
}

/* L'animation du plein écran est faite par transformation (technique FLIP, voir
   media.js) : elle relie visuellement la vignette et l'écran entier, là où un
   simple fondu ne donnait qu'une apparition brutale. Rien à déclarer ici — la
   transition est posée puis retirée par le script, pour ne pas interférer avec
   celle du changement de format. */
.rf-fsclose { animation: kl-fs-btn .22s .18s ease both; }
@keyframes kl-fs-btn { from { opacity: .001; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .rf-fsclose { animation: none; } }

/* ORDINATEUR : la barre bleue et la flèche de sortie sont des organes de la
   coquille MOBILE. En fin de feuille et ancrées sur `body` : les réglages de
   position de la barre, écrits plus haut, ne peuvent plus les ressusciter. */
@media (min-width: 900px) {
    body .klat-dock,
    body .klat-back { display: none; }
}

/* ORDINATEUR : l'animation du changement de format, identique au mobile validé.
   Elle vivait sous la classe de la coquille mobile — en limitant celle-ci au
   téléphone, l'ordinateur l'avait perdue. Les DEUX propriétés s'animent
   ensemble, même durée, même courbe : c'est leur désynchronisation (l'une
   animée, l'autre instantanée) qui écrasait l'image autrefois. */
@media (min-width: 900px) {
    body.atelier-active .rf-player { transition: max-width .24s ease, aspect-ratio .24s ease; }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
    body.atelier-active .rf-player { transition: none; }
}