/* Générateur SVG → 3D — habillage de l'éditeur.
   Tout est scopé sous .s3-app : l'outil est un BLOC DE PAGE, pas une
   application plein écran (même doctrine que le générateur de particules). */

.s3-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.6rem;
  align-items: start;
  border: 1px solid #1e202b;
  border-radius: 16px;
  background: #0d0f16;
  padding: 1.4rem;
  color: #e8eaf0;
}
@media (max-width: 900px) {
  .s3-app { grid-template-columns: 1fr; padding: 1rem; gap: 1.1rem }
}

/* ---------- l'aperçu ---------- */
.s3-stage { position: sticky; top: 84px }
@media (max-width: 900px) { .s3-stage { position: static } }

.s3-field {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* un logo est plutôt carré : on lui donne de la place */
  max-width: 560px;      /* sur une page large, sans cette borne l'aperçu devient démesuré */
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(45deg, #171a22 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(-45deg, #171a22 25%, transparent 25%) -10px 0/20px 20px,
    linear-gradient(45deg, transparent 75%, #171a22 75%) 0 0/20px 20px,
    linear-gradient(-45deg, transparent 75%, #171a22 75%) 0 0/20px 20px,
    #11131a;                       /* damier : on voit qu'un fond transparent l'est */
}
.s3-field canvas { display: block; width: 100%; height: 100% }

.s3-notice {
  margin: .7rem 0 0;
  font-size: .87rem;
  line-height: 1.55;
  color: #8b90a0;
}
.s3-notice.s3-warn {
  color: #f0d9a8;
  background: rgba(200, 160, 60, .08);
  border-left: 2px solid #c8a03c;
  padding: .6rem .8rem;
  border-radius: 0 8px 8px 0;
}

/* ---------- le panneau ---------- */
.s3-panel { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0 }

.s3-group {
  border: 1px solid #1e202b;
  border-radius: 12px;
  background: #0f121a;
  padding: .9rem 1rem 1rem;
}
.s3-group h3 {
  margin: 0 0 .7rem;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7f869a;
  font-weight: 700;
}

.s3-row { margin-bottom: .75rem }
.s3-row:last-child { margin-bottom: 0 }
.s3-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .3rem }
.s3-lab { font-size: .85rem; color: #c3c8d4 }
.s3-val { font-size: .78rem; color: #7f869a; font-variant-numeric: tabular-nums }

.s3-row input[type=range] {
  width: 100%;
  accent-color: #7c5cff;              /* le curseur suit la couleur de marque */
  cursor: pointer;
}

.s3-select {
  width: 100%;
  background: #161922;
  color: #e8eaf0;
  border: 1px solid #262a36;
  border-radius: 8px;
  padding: .45rem .6rem;
  font-size: .87rem;
  cursor: pointer;
}

.s3-inline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap }
.s3-color {
  width: 40px; height: 30px; padding: 0;
  background: none; border: 1px solid #262a36; border-radius: 8px; cursor: pointer;
}

.s3-chips { display: flex; flex-wrap: wrap; gap: .4rem }

.s3-btn {
  font: inherit;
  font-size: .84rem;
  color: #e8eaf0;
  background: #1b1f2a;
  border: 1px solid #262a36;
  border-radius: 8px;
  padding: .42rem .75rem;
  cursor: pointer;
}
.s3-btn:hover { background: #222736; border-color: #333949 }
.s3-chip { font-size: .78rem; padding: .32rem .6rem }

.s3-locked { position: relative; border-color: #4a3f22; background: #1e1a12 }
.s3-locked:hover { background: #262014; border-color: #6b5a2e }
.s3-tag {
  display: inline-block;
  margin-left: .45rem;
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #0a0a0f;
  background: #c8a03c;
  border-radius: 999px;
  padding: .1rem .4rem;
}


.s3-drop {
  position: relative;
  margin-top: .6rem;
  border: 1px dashed #2e3342;
  border-radius: 10px;
  padding: .8rem;
  text-align: center;
  font-size: .8rem;
  color: #7f869a;
}
.s3-drop.s3-over { border-color: #7c5cff; color: #c3c8d4 }
.s3-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100% }

.s3-trace {
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid #1e202b;
}

/* Les instructions d'installation, ouvertes APRES un export — jamais avant :
   au-dessus de l'outil elles parleraient d'un fichier que le visiteur n'a pas. */
.s3-steps { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid #1e202b }
.s3-ol { margin: 0; padding-left: 1.1rem; font-size: .82rem; line-height: 1.6; color: #c3c8d4 }
.s3-ol li { margin-bottom: .35rem }
.s3-code {
  display: block; margin: .5rem 0 0; padding: .5rem .6rem;
  background: #161922; border: 1px solid #262a36; border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .7rem; color: #9fb4ff; overflow-x: auto; white-space: pre;
}
.s3-more { margin: .6rem 0 0; font-size: .78rem; color: #5b6276 }
.s3-howto {
  display: inline-block; margin-top: .7rem;
  font-size: .78rem; color: #8b90a0; text-decoration: underline;
}
.s3-howto:hover { color: #c3c8d4 }

/* ---------- le tuto, sous l'outil ----------
   L'outil repond a la requete et reste en haut ; ce qui suit explique, et
   c'est ce que lisent les moteurs comme les assistants. */
.s3-doc { max-width: 68ch; margin: 3rem auto 0; color: #c3c8d4; line-height: 1.7 }
.s3-doc h2 { margin: 2.4rem 0 .8rem; font-size: 1.25rem; color: #f5f6fa }
.s3-doc h3 { margin: 1.6rem 0 .5rem; font-size: 1rem; color: #e8eaf0 }
.s3-doc p, .s3-doc li, .s3-doc dd { font-size: .95rem }
.s3-doc ul, .s3-doc ol { padding-left: 1.2rem }
.s3-doc li { margin-bottom: .5rem }
.s3-doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; color: #9fb4ff }
.s3-doc-steps li { margin-bottom: .8rem }
.s3-doc-code {
  margin: .9rem 0; padding: .9rem 1rem; overflow-x: auto;
  background: #0f121a; border: 1px solid #1e202b; border-radius: 10px;
}
.s3-doc-code code { color: #b8c0d4; font-size: .78rem; line-height: 1.6; white-space: pre }
.s3-doc-faq dt { margin-top: 1rem; font-weight: 600; color: #e8eaf0 }
.s3-doc-faq dd { margin: .3rem 0 0; color: #8b90a0 }
.s3-doc-more { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid #1e202b; font-size: .9rem }
.s3-doc a { color: #9fb4ff }

/* La nav est fixe : sans cette marge, arriver par le lien « comment
   l'installer ? » place le titre juste dessous, hors de vue. */
.s3-doc h2, .s3-doc h3 { scroll-margin-top: 100px }

/* Les trois facons de donner un dessin s'enchainaient sans qu'aucune soit
   nommee : le champ de collage n'avait qu'une etiquette pour lecteur d'ecran. */
.s3-sub { margin: 0 0 .5rem; font-size: .85rem; color: #c3c8d4 }
.s3-sub-sep { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid #1e202b }
.s3-hint { margin: -.35rem 0 .5rem; font-size: .75rem; line-height: 1.5; color: #6b7285 }