/* Générateur de dégradé CSS : styles propres à l'outil. Le damier (gris en dur, voulu) laisse voir la transparence. */
.o-degrade-css {
  --dg: linear-gradient(90deg, #1f5fe0 0%, #e0409b 100%);
  --dg-barre: linear-gradient(90deg, #1f5fe0 0%, #e0409b 100%);
  --dg-damier: repeating-conic-gradient(#c9ced9 0% 25%, #f4f5f8 0% 50%) 0 0 / 18px 18px;
}
.o-degrade-css .dg-apercu {
  width: 100%; height: clamp(180px, 34vw, 300px); border: 1px solid var(--bord); border-radius: var(--rayon-petit);
  background: var(--dg), var(--dg-damier);
}
.o-degrade-css .dg-barre-haut { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 14px; }
.o-degrade-css .dg-types, .o-degrade-css .dg-actions, .o-degrade-css .dg-variantes { display: flex; flex-wrap: wrap; gap: 8px; }
.o-degrade-css .dg-types .btn, .o-degrade-css .dg-variantes .btn { min-height: 42px; border-radius: 999px; }
.o-degrade-css .dg-actions .btn { min-height: 42px; }
.atelier .o-degrade-css .btn[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.o-degrade-css .btn:focus-visible, .o-degrade-css input:focus-visible, .o-degrade-css select:focus-visible, .o-degrade-css button:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; }
.o-degrade-css .tirage-astuce { margin: 10px 0 14px; }
.o-degrade-css [hidden] { display: none !important; }

.o-degrade-css .dg-directions { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--texte-2); }
.o-degrade-css .dg-directions div { display: flex; gap: 4px; }
.o-degrade-css .dg-directions .btn { flex: 1 1 0; min-width: 0; max-width: 46px; min-height: 42px; padding: 0; font-size: 1.1rem; }

.o-degrade-css .dg-bloc { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bord); }
.o-degrade-css .dg-bloc h2 { margin: 0 0 10px; font-size: 1.15rem; }
.o-degrade-css .dg-bloc h3 { margin: 16px 0 8px; font-size: .95rem; font-weight: 600; color: var(--texte-2); }
.o-degrade-css .dg-aide { margin: 8px 0 10px; font-size: .9rem; color: var(--texte-2); }
.o-degrade-css .tirage-message { margin-top: 8px; color: var(--texte); font-size: .95rem; }

/* Barre des arrêts */
.o-degrade-css .dg-rail { padding: 8px 14px; }
.o-degrade-css .dg-barre {
  position: relative; height: 36px; border: 1px solid var(--bord); border-radius: 8px; cursor: copy; touch-action: none;
  background: var(--dg-barre), var(--dg-damier); user-select: none; -webkit-user-select: none;
}
.o-degrade-css .dg-poignee {
  --c: #888888;
  position: absolute; top: -8px; width: 24px; height: 52px; margin-left: -12px; padding: 0; border-radius: 8px; cursor: grab; touch-action: none;
  border: 3px solid #ffffff; background: var(--c); box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 1px 5px rgba(0, 0, 0, .45);
}
.o-degrade-css .dg-poignee:active { cursor: grabbing; }
.o-degrade-css .dg-poignee.actif { box-shadow: 0 0 0 3px var(--marque), 0 1px 5px rgba(0, 0, 0, .45); z-index: 1; }

/* Lignes des arrêts */
.o-degrade-css .dg-entetes, .o-degrade-css .dg-arrets li { display: grid; grid-template-columns: 48px minmax(0, 1fr) 84px 84px 42px; gap: 8px; align-items: center; }
.o-degrade-css .dg-entetes { font-size: .82rem; color: var(--texte-2); padding: 0 6px; }
.o-degrade-css .dg-arrets { margin: 4px 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.o-degrade-css .dg-arrets li { padding: 5px 6px; border: 1px solid transparent; border-radius: var(--rayon-petit); }
.o-degrade-css .dg-arrets li.actif { border-color: var(--marque); background: var(--surface-2); }
.o-degrade-css .dg-arrets input { min-width: 0; width: 100%; min-height: 40px; }
.o-degrade-css .dg-arrets input[type="color"] { height: 40px; padding: 3px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface); cursor: pointer; }
.o-degrade-css .dg-arrets input[type="text"] { font-family: var(--mono); }
.o-degrade-css .dg-arrets input[aria-invalid="true"] { border-color: var(--erreur-texte); outline: 1px solid var(--erreur-texte); }
.o-degrade-css .dg-arrets .btn { min-height: 40px; padding: 0; font-size: 1.2rem; }

/* Code */
.o-degrade-css .dg-code {
  display: block; margin: 12px 0; padding: 14px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface-2); color: var(--texte);
  font: .95rem/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all;
}
.o-degrade-css .dg-fin { display: flex; align-items: end; }
.o-degrade-css .dg-fin .btn { min-height: 42px; width: 100%; }

/* Rendus et contraste */
.o-degrade-css .dg-rendus { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.o-degrade-css .dg-ex-bouton {
  display: inline-flex; align-items: center; min-height: 48px; padding: 10px 28px; border-radius: 999px; background: var(--dg);
  color: #ffffff; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.o-degrade-css .dg-ex-texte {
  font-size: clamp(1.7rem, 6vw, 2.6rem); font-weight: 800; line-height: 1.2; background: var(--dg);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.o-degrade-css .dg-contrastes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.o-degrade-css .dg-contraste { padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); }
.o-degrade-css .dg-contraste p { margin: 0 0 8px; }
.o-degrade-css .dg-contraste p:last-child { margin-bottom: 0; }
.o-degrade-css .dg-contraste code { font-family: var(--mono); font-size: .9em; color: var(--texte-2); }
.o-degrade-css .dg-ligne-contraste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.o-degrade-css .dg-ech { padding: 5px 10px; border-radius: 6px; font-weight: 600; font-size: .92rem; border: 1px solid var(--bord); }
.o-degrade-css .dg-ech-blanc { color: #ffffff; }
.o-degrade-css .dg-ech-noir { color: #000000; }
.o-degrade-css .dg-ligne-contraste output { font: 700 1.05rem var(--mono); }
.o-degrade-css .dg-ligne-contraste b { padding: 2px 8px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--erreur-fond); color: var(--erreur-texte); }
.o-degrade-css .dg-ligne-contraste b.ok { background: var(--ok-fond); color: var(--ok-texte); }

/* Galerie et dégradés enregistrés */
.o-degrade-css .dg-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.o-degrade-css .dg-galerie button {
  display: flex; flex-direction: column; gap: 5px; padding: 6px; border: 1px solid var(--bord); border-radius: var(--rayon-petit);
  background: var(--surface); color: var(--texte); font: inherit; font-size: .85rem; text-align: left; cursor: pointer;
}
.o-degrade-css .dg-galerie button:hover { background: var(--surface-2); }
.o-degrade-css .dg-galerie i { display: block; align-self: stretch; width: 100%; height: 58px; border-radius: 6px; background-color: #f4f5f8; }
.o-degrade-css .dg-enregistres { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.o-degrade-css .dg-enregistres li { display: flex; gap: 4px; }
.o-degrade-css .dg-enregistres [data-reprendre] { flex: 1; min-width: 0; height: 46px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background-color: #f4f5f8; cursor: pointer; }
.o-degrade-css .dg-enregistres .btn { min-height: 46px; min-width: 36px; padding: 0; font-size: 1.2rem; }

@media (max-width: 640px) {
  .o-degrade-css .dg-entetes, .o-degrade-css .dg-arrets li { grid-template-columns: 42px minmax(0, 1fr) 62px 62px 36px; gap: 5px; }
  .o-degrade-css .dg-entetes { font-size: .74rem; padding: 0 4px; }
  .o-degrade-css .dg-arrets li { padding: 4px; }
  .o-degrade-css .dg-arrets input[type="number"], .o-degrade-css .dg-arrets input[type="text"] { padding-inline: 6px; }
  .o-degrade-css .dg-contrastes { grid-template-columns: 1fr; }
  .o-degrade-css .dg-barre-haut { flex-direction: column; }
}
@media (prefers-reduced-motion: no-preference) {
  .o-degrade-css .dg-poignee { transition: box-shadow .12s; }
}