/* Outil · Composition (Composition guides) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : cp-
   Mise en page : .outil-colonnes, comme Grain. Téléphone : l'aperçu, ses boutons, la fiche, l'info, les actions, puis les réglages
   (la fiche est dans la colonne de droite : remontée par « order »). Ordinateur : l'aperçu à gauche ; à droite la fiche, puis les réglages. Tout a sa hauteur fixe : rien ne bouge quand la grille, le format ou la photo changent. */
.cp .outil-fixe { align-items: stretch; }

/* L'aperçu : un cadre de taille fixe (4:3) ; le format choisi s'y loge, centré */
.cp-cadre { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #000; }
.cp-toile { display: block; width: 100%; height: 100%; }

/* Sous l'aperçu : tourner / retourner à gauche (grisés si la grille n'a pas de sens), retirer la photo à droite (place gardée) */
.cp-barre { display: flex; align-items: center; justify-content: space-between; margin-top: -10px; }
.cp-orient { display: flex; gap: 8px; }
.cp-barre .rond { width: 32px; height: 32px; }
.cp-barre .rond:disabled { opacity: .25; cursor: default; }
.cp-cache { visibility: hidden; }

/* La fiche de la grille : un titre, puis un texte de 5 lignes fixes */
.cp-fiche { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.cp-fiche b { font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--papier); }
.cp-fiche p { margin: 0; height: 5lh; overflow: hidden; font: 400 13.5px/1.5 var(--corps); color: var(--texte2); }

.cp-info { height: 2lh; overflow: hidden; }
.cp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cp-actions .pastille { cursor: pointer; }
.cp-actions .pastille:hover { translate: none; }

/* Les couleurs du trait : une pastille de couleur devant le nom */
.cp-teinte::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; vertical-align: -1px;
  background: var(--teinte); box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .35); }
.puce.cp-grise { opacity: .3; pointer-events: none; }

@media (max-width: 959px) { .cp-cadre, .cp-barre { order: -2; } .cp-fiche { order: -1; } }