/* Essai d'un cel sur un background : pages admin et publique (public/js/essai-cel.js). */
.essai-grille { display: grid; grid-template-columns: 360px 1fr; gap: 1.5rem; align-items: start; }
.essai-reglages { display: flex; flex-direction: column; gap: 1rem; }
.essai-reglages .dashboard-section { padding: 1rem; }
.essai-reglages h2 { font-size: 1rem; margin-bottom: .6rem; }
.essai-select { width: 100%; padding: .45rem .6rem; border: 1px solid #d2d2d7; border-radius: 8px; margin-bottom: .6rem; }
.essai-vignettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; max-height: 300px; overflow-y: auto; }
.essai-vignette { border: 2px solid transparent; border-radius: 6px; background: #f5f5f7; cursor: pointer; padding: 0; position: relative; }
.essai-vignette img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; display: block; }
.essai-vignette span { font-size: .65rem; color: #6e6e73; display: block; text-align: center; padding: 1px 0; }
.essai-vignette.choisie { border-color: #0066cc; }
#fond-liste .essai-vignette.choisie::after { content: "✓"; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #0066cc; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.essai-teintes { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.essai-teinte { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid #d2d2d7; background: #fff; border-radius: 999px;
  padding: .15rem .55rem .15rem .25rem; font-size: .75rem; cursor: pointer; color: #1d1d1f; }
.essai-teinte i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.essai-teinte.active { border-color: #0066cc; background: #e8f1fb; font-weight: 600; }
.essai-palette { display: flex; height: 5px; border-radius: 0 0 4px 4px; overflow: hidden; }
.essai-palette i { display: block; height: 100%; }
.essai-compteur { font-size: .75rem; font-weight: 600; color: #0066cc; margin-left: .3rem; }
.essai-bandeau { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.essai-bandeau .essai-fonds-choisis { flex: 1; margin-bottom: 0; }
.essai-vignette.vendue img { opacity: .55; }
.essai-aide { font-size: .78rem; color: #86868b; margin: .3rem 0; }
.essai-curseur { display: flex; align-items: center; gap: .5rem; font-size: .85rem; margin: .4rem 0; }
.essai-curseur input { flex: 1; }
.essai-case { display: flex; gap: .4rem; font-size: .8rem; margin: .4rem 0; align-items: flex-start; }
.essai-boutons { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.essai-fonds-choisis { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; min-height: 64px; align-items: center; }
.essai-fond-choisi { position: relative; width: 64px; border: 2px solid #e8e8ed; border-radius: 6px; cursor: pointer; background: #fff; padding: 0; }
.essai-fond-choisi.actif { border-color: #0066cc; }
.essai-fond-choisi img { width: 100%; height: 60px; object-fit: cover; border-radius: 4px; display: block; }
.essai-fond-choisi .retirer { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; border: none; background: #ff3b30; color: #fff; font-size: 11px; cursor: pointer; line-height: 20px; padding: 0; }
.essai-scene { position: relative; overflow: hidden; border-radius: 10px; min-height: 360px; touch-action: none;
  background: repeating-conic-gradient(#e8e8ed 0% 25%, #fff 0% 50%) 0 0 / 24px 24px; }
.essai-scene #scene-fond { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.essai-scene canvas { position: absolute; cursor: grab; }
.essai-scene canvas:active { cursor: grabbing; }
.essai-scene #scene-vide { padding: 2rem; text-align: center; }
.essai-attente { position: absolute; top: .6rem; left: .6rem; background: #fff3cd; color: #856404; padding: .3rem .6rem; border-radius: 6px; font-size: .8rem; }
@media (max-width: 900px) { .essai-grille { grid-template-columns: 1fr; } }
/* Page publique */
.essai-intro { color: #6e6e73; margin: -1rem 0 1.5rem; max-width: 760px; }
.essai-fichier { display: inline-block; cursor: pointer; }
.essai-fichier input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.essai-fichier input:focus-visible + .btn { outline: 2px solid #0066cc; outline-offset: 2px; }
.essai-apercu { display: block; max-width: 100%; max-height: 160px; margin-top: .6rem; border-radius: 6px; }
.essai-vignettes-hautes { max-height: 460px; }
.essai-plus { margin-top: .5rem; width: 100%; }
.essai-fichier-fond { margin-bottom: .6rem; }
/* Zone tracée à la main : le calque du tracé suit le cel, sans capter le pointeur */
.essai-zone { border-top: 1px solid #e8e8ed; margin: .6rem 0; padding-top: .6rem; }
.essai-sous-titre { font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.essai-zone #zone-annuler { margin-top: .4rem; }
.essai-scene .essai-trace { position: absolute; pointer-events: none; cursor: default; }
/* Page publique : sélecteur de langue */
.essai-entete { justify-content: space-between; }
.essai-entete h1 { flex: 1 1 320px; }
.essai-langues { display: flex; gap: .25rem; }
.essai-langues a { padding: .25rem .55rem; border-radius: 6px; font-size: .8rem; font-weight: 600; color: #6e6e73; text-decoration: none; border: 1px solid #d2d2d7; }
.essai-langues a.active { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }
/* L'attribut hidden doit l'emporter sur le display des .btn et .essai-boutons : sans cela, les
   actions de zone, « Voir plus » et ◀ ▶ restaient visibles alors que le script les masque. */
.essai-grille [hidden] { display: none !important; }
/* Rotation du fond, sous la scène */
.essai-tourner { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .85rem; color: #6e6e73; }
.essai-tourner .btn { font-size: 1rem; line-height: 1; padding: .3rem .6rem; }
/* Page publique : la partie « backgrounds » sous le cel et la scène, sur toute la largeur. Sa
   hauteur reste bornée pour que la scène, juste au-dessus, reste en vue pendant le choix. */
.essai-fonds-large { grid-column: 1 / -1; }
.essai-vignettes.essai-vignettes-large { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; max-height: 340px; }
.essai-fonds-large .essai-plus { width: auto; }
/* Aperçu flottant du montage, quand la scène est hors de l'écran (page publique) */
.essai-apercu-flottant { position: fixed; right: 16px; bottom: 16px; width: 260px; z-index: 50; padding: 0; border: 2px solid #fff;
  border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.25); cursor: pointer; }
.essai-apercu-flottant canvas { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .essai-apercu-flottant { width: 140px; right: 10px; bottom: 10px; } }