/* Outil · Blend modes : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : mf- */

/* Mise en page : la structure commune .outil-colonnes (app/kit.css).
   Téléphone : l'aperçu reste collé en haut pendant qu'on règle les calques et choisit les modes plus bas.
   Ordinateur : à gauche l'aperçu et tout ce qui change l'image ; à droite l'explication et le choix du mode. */
.mf-zone { position: sticky; top: 0; z-index: 2; padding: 4px 0 10px; transition: background .3s var(--courbe); }
/* Collé en haut (.colle, posé au défilement) : un fond, et un fondu dessous ; le texte qui défile passe dessous en douceur.
   Au repos, rien : pas de bande plus sombre sous l'aperçu */
.mf-zone::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; pointer-events: none; opacity: 0;
  background: linear-gradient(rgba(18, 16, 14, .9), rgba(18, 16, 14, 0)); transition: opacity .3s var(--courbe); }
.mf-zone.colle { background: rgba(18, 16, 14, .9); }
.mf-zone.colle::after { opacity: 1; }
@media (min-width: 960px) { .mf-zone { position: static; padding: 0; background: none; } .mf-zone::after { display: none; } }
.mf-apercu { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 6px; touch-action: none; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Explication du mode choisi : toutes superposées dans la même case, seule la bonne est visible
   (hauteur fixe = la plus longue : rien ne saute quand on change de mode) */
.mf-explication { display: grid; }
.mf-texte { grid-area: 1 / 1; visibility: hidden; }
.mf-texte.actif { visibility: visible; }
.mf-explication h3 { margin: 0 0 8px; font: 700 18px/1.2 var(--display); letter-spacing: -.02em; }
.mf-explication h3 span { margin-left: 6px; font: var(--valeur); line-height: 1; letter-spacing: .06em; color: var(--texte2); }
.mf-explication p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--texte2); }
.mf-explication p:first-of-type { color: var(--papier); }
.mf-pour b { font-weight: 600; color: var(--papier); }
.mf-neutre { display: flex; align-items: center; gap: 8px; font: var(--valeur) !important; letter-spacing: .06em; }
.mf-pastille { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--filet); }
.mf-blanc { background: #fff; } .mf-noir { background: #000; } .mf-gris { background: #808080; }

/* Opacité du calque du dessus */
.mf-opacite { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 14px; }
.mf-opacite .groupe { grid-column: 1 / -1; margin: 0; }
/* Curseur dessiné comme la barre du Pomodoro : rail fin, partie remplie papier, pastille papier (--rempli : posé par l'outil) */
.mf-opacite input { --rempli: 100%; width: 100%; height: 28px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mf-opacite input::-webkit-slider-runnable-track { height: 2px; border-radius: 2px;
  background: linear-gradient(var(--papier), var(--papier)) 0 / var(--rempli) 100% no-repeat, var(--filet); }
.mf-opacite input::-moz-range-track { height: 2px; border-radius: 2px; background: var(--filet); }
.mf-opacite input::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--papier); }
.mf-opacite input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border: 0; border-radius: 50%; background: var(--papier);
  transition: transform .3s var(--courbe); }
.mf-opacite input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--papier); }
.mf-opacite input:active::-webkit-slider-thumb { transform: scale(1.15); }
.mf-opacite input:focus { outline: none; }
.mf-opacite input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--noir), 0 0 0 4px var(--orange); }
.mf-opacite b { font: var(--valeur); line-height: 1; letter-spacing: .06em; color: var(--papier); min-width: 48px; text-align: right; }

/* Sous l'aperçu : une ligne « Calques » qui résume les réglages de l'image et les déplie au clic
   (une ligne par calque : nom, choix, importer une image ; puis l'opacité et l'inversion) */
.mf-visuel { width: 100%; }
.mf-tete { width: 100%; display: flex; align-items: baseline; gap: 14px; border: 0; background: none; padding: 10px 0; color: var(--papier); cursor: pointer;
  border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); text-align: left; }
.mf-tete .groupe { margin: 0; padding: 0; }                       /* sans le padding des titres de groupe : centré avec le résumé */
/* Les capitales de la police mono tombent 2 px au-dessus du centre de leur ligne (place des jambages) :
   on descend le texte de 2 px pour que le corps des lettres soit pile au centre de la bande, comme la flèche (mesuré à l'encre) */
.mf-tete .groupe, .mf-resume { position: relative; top: 2px; }
.mf-resume { flex: 1; min-width: 0; font: var(--repere); letter-spacing: .1em; color: var(--papier); opacity: .75;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* même police, même taille et même ligne que « Calques » */
.mf-tete svg { align-self: center; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--courbe); }
.mf-visuel.ouvert .mf-tete svg { transform: rotate(180deg); }
.mf-repli { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--courbe); }
.mf-visuel.ouvert .mf-repli { grid-template-rows: 1fr; }
.mf-repli-dedans { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.mf-visuel.ouvert .mf-repli-dedans { padding-top: 14px; }
.mf-ligne { display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px; align-items: center; gap: 10px; }
.mf-ligne .groupe { margin: 0; }
.mf-ligne .puces { flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 2px 0;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);   /* fondu à droite : la suite défile */
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.mf-importer { cursor: pointer; }
.mf-pied { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; }
.mf-inverser:hover { translate: none; }
.mf-importer svg, .mf-inverser svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }