/* Outil · Convertir une image (Image converter) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : ci-
   Deux colonnes (.outil-colonnes) : à gauche l'aperçu (cadre 4:3 fixe, damier pour la transparence), la navigation entre
   les images, une ligne qui résume la conversion, les exports ; à droite le format, la qualité, la taille, le fond. */
.ci .outil-fixe { align-items: stretch; }
.ci-cadre { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: rgba(242, 240, 235, .025); box-shadow: inset 0 0 0 1px var(--filet-doux); }
.ci-cadre.survol { box-shadow: inset 0 0 0 1.5px var(--orange); }
.ci-apercu { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: block; transition: width .35s var(--courbe), height .35s var(--courbe);
  background-color: #2a2725; background-image: conic-gradient(rgba(242, 240, 235, .12) 25%, transparent 0 50%, rgba(242, 240, 235, .12) 0 75%, transparent 0); background-size: 16px 16px; }
.ci-apercu[hidden] { display: none; }
/* La taille d'origine : un cadre pointillé, l'image convertie dedans à la même échelle ; son nom en haut à gauche */
.ci-origine { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border: 1px dashed rgba(242, 240, 235, .35); border-radius: 2px; pointer-events: none;
  transition: width .35s var(--courbe), height .35s var(--courbe), opacity .3s; }
.ci-origine[hidden] { display: none; }
.ci-origine.pareil { opacity: 0; }
.ci-origine i { position: absolute; bottom: 100%; left: -1px; margin-bottom: 5px; font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .08em; color: var(--texte2); white-space: nowrap; }
.ci-vide { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; text-align: center; }
.ci-vide[hidden] { display: none; }
.ci-vide svg.grand { width: 40px; height: 40px; fill: none; stroke: var(--texte2); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.ci-vide .pastille { cursor: pointer; }
.ci-vide .pastille:hover { translate: none; }
.ci-vide p { margin: 0; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }
/* Sous l'aperçu : ‹ 2 / 5 › à gauche, retirer l'image à droite (places gardées) */
.ci-barre { display: flex; align-items: center; justify-content: space-between; margin-top: -10px; }
.ci-nav { display: flex; align-items: center; gap: 8px; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }
.ci-barre .rond { width: 32px; height: 32px; }
.ci-barre .rond:disabled { opacity: .25; cursor: default; }
.ci-cache { visibility: hidden; }
.ci-nav span { min-width: 4.5em; text-align: center; }
.ci-info { height: 2lh; margin: 0; overflow: hidden; }
.ci-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ci-actions .pastille { cursor: pointer; }
.ci-actions .pastille:hover { translate: none; }
.ci-actions .pastille:disabled { opacity: .3; cursor: default; }
.ci-grise { opacity: .3; pointer-events: none; }
.puce.ci-indispo { opacity: .3; pointer-events: none; }   /* une taille plus grande que l'image : rien à réduire */
.ci .seg button:disabled { opacity: .3; cursor: default; }
.ci-tailles .groupe { padding-bottom: 4px; }
/* Deux lignes, chacune avec son étiquette : en %, puis le grand côté en px */
.ci-sous { margin: 10px 0 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--texte2); opacity: .65; }
.ci-tailles .puces + .ci-sous { margin-top: 18px; }
.ci-note { margin: 0; font: 400 13px/1.5 var(--corps); color: var(--texte2); }