/* n1102 — Assistant de creation en trois etapes.
   Regle unique de ce fichier : AUCUNE couleur en dur. Tout passe par les
   variables de styles.css (--bg, --panel, --ink, --muted, --line, --accent),
   sinon le theme Gold se retrouve avec des panneaux noirs sur fond creme.
   Les teintes d'accent se fabriquent avec color-mix a partir de --accent :
   elles suivent donc le theme au lieu de le contredire. */

.assistant-view{
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* ---- En-tete : titre, sous-titre, retour au formulaire classique ---- */
.asst-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
}
.asst-head h1{
  margin:0;
  font:700 clamp(26px,4vw,40px) Manrope,Inter,sans-serif;
  letter-spacing:-.04em;
  color:var(--ink);
}
.asst-sub{
  margin:8px 0 0;
  color:var(--muted);
  font-size:13px;
}
.asst-link{
  border:0;
  background:none;
  padding:0;
  color:var(--accent);
  font-weight:650;
  font-size:13px;
  text-decoration:none;
}
.asst-link:hover{ text-decoration:underline; }

/* ---- Bande des trois etapes ---- */
.asst-stepper{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.asst-step{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--panel);
  min-width:0;
}
.asst-step-n{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font:700 13px Manrope,Inter,sans-serif;
  border:1px solid var(--line);
  color:var(--muted);
  flex:none;
}
.asst-step-text{ min-width:0; }
.asst-step b{
  display:block;
  font:700 14px Manrope,Inter,sans-serif;
  color:var(--ink);
}
.asst-step small{
  display:block;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.asst-step[data-state="done"] .asst-step-n{
  background:color-mix(in srgb,var(--green) 16%,transparent);
  border-color:color-mix(in srgb,var(--green) 50%,transparent);
  color:var(--green);
}
.asst-step[data-state="current"]{
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,var(--panel));
}
.asst-step[data-state="current"] .asst-step-n{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg);
}
.asst-step[data-state="todo"] b{ color:var(--muted); }

/* ---- Zone de travail : la carte, et le recapitulatif a droite ---- */
.asst-work{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:22px;
  align-items:start;
}
.asst-card{
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  border-radius:26px;
  padding:clamp(18px,3vw,30px);
  background:var(--panel);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:22px;
  min-width:0;
}
.asst-panel{
  display:flex;
  flex-direction:column;
  gap:22px;
  min-width:0;
}
.asst-q{
  margin:0;
  font:700 20px Manrope,Inter,sans-serif;
  letter-spacing:-.01em;
  color:var(--ink);
}
.asst-qsub{
  margin:5px 0 0;
  color:var(--muted);
  font-size:13px;
}
.asst-hint{
  margin:0;
  color:var(--muted);
  font-size:12.5px;
}

/* ---- Tuiles de choix (radios deguises) ---- */
.asst-tiles{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.asst-tiles[data-columns="2"]{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.asst-tile{
  position:relative;
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
  text-align:left;
}
.asst-tile input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  margin:0;
  padding:0;
}
.asst-tile-ic{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--panel);
  color:var(--muted);
  border:1px solid var(--line);
}
.asst-tile-ic svg{ width:18px; height:18px; }
.asst-tile b{
  font:700 15px Manrope,Inter,sans-serif;
  color:var(--ink);
}
.asst-tile span{
  color:var(--muted);
  font-size:12.5px;
}
.asst-tile:has(input:checked){
  border-color:color-mix(in srgb,var(--accent) 70%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,var(--panel));
}
.asst-tile:has(input:checked) .asst-tile-ic{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg);
}
.asst-tile:has(input:focus-visible){
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---- Champs ---- */
.asst-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.asst-lab{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}
.asst-lab em{
  font-style:normal;
  font-weight:500;
  opacity:.75;
}
.asst-card input[type="text"],
.asst-card input[type="number"],
.asst-card textarea{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 13px;
  color:var(--ink);
}
.asst-card textarea{
  min-height:132px;
  border-radius:20px;
  padding:16px 18px;
  line-height:1.6;
  resize:vertical;
}

/* ---- Pastilles ---- */
.asst-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
}
.asst-chip{
  border-radius:999px;
  padding:6px 11px;
  font-size:13px;
  font-weight:650;
  background:color-mix(in srgb,var(--ink) 7%,transparent);
  border:1px solid transparent;
  color:var(--ink);
}
.asst-chip[aria-pressed="true"]{
  border-color:color-mix(in srgb,var(--accent) 65%,transparent);
  background:color-mix(in srgb,var(--accent) 18%,transparent);
}

/* ---- Bascule a deux positions ---- */
.asst-seg{
  display:inline-flex;
  padding:4px;
  border:1px solid var(--line);
  border-radius:999px;
  gap:2px;
  align-self:flex-start;
  flex-wrap:wrap;
}
.asst-seg button{
  border:0;
  background:none;
  padding:7px 14px;
  border-radius:999px;
  font-weight:650;
  font-size:13px;
  color:var(--muted);
}
.asst-seg button[aria-pressed="true"]{
  background:color-mix(in srgb,var(--accent) 22%,transparent);
  color:var(--ink);
}

/* ---- Zone de depot de fichiers ---- */
.asst-drop{
  border:1.5px dashed color-mix(in srgb,var(--accent) 40%,var(--line));
  border-radius:18px;
  padding:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  background:color-mix(in srgb,var(--accent) 4%,transparent);
  text-align:center;
}
.asst-drop b{
  font:700 15px Manrope,Inter,sans-serif;
  color:var(--ink);
}
.asst-drop input[type="file"]{
  color:var(--muted);
  font-size:12.5px;
  max-width:100%;
}
/* n 1130 - Le champ natif des images de reference est masque : il affichait
   « Aucun fichier choisi » sous des vignettes deja choisies, puisque la liste
   vit hors du champ. Le libelle ouvre la meme fenetre de fichiers. */
.asst-drop .asst-file-button{
  display:inline-flex;
  color:var(--ink);
  font-size:13.5px;
  cursor:pointer;
}
.asst-drop input[type="file"]:focus-visible + .asst-file-button{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---- Rappel de l'etape 2, affiche a l'etape 3 ---- */
.asst-recall{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--bg);
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.asst-recall b{
  font-size:13.5px;
  color:var(--ink);
}
.asst-recall-body{ flex:1; min-width:0; }

/* ---- Liste ordonnee des medias televerses ---- */
.asst-files{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.asst-file{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--bg);
  padding:10px 14px;
  min-width:0;
}
.asst-file-num{
  width:26px;
  color:var(--muted);
  font-weight:700;
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
  flex:none;
}
.asst-file b{
  font-size:13px;
  font-weight:650;
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
}
.asst-file-kind{
  font-size:11px;
  font-weight:700;
  padding:5px 8px;
  border-radius:999px;
  background:color-mix(in srgb,var(--ink) 10%,transparent);
  color:var(--muted);
  flex:none;
}
.asst-file-move{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--ink);
  border-radius:8px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  flex:none;
  font-weight:700;
}
.asst-file-move:disabled{ opacity:.35; }

/* ---- Case a cocher ---- */
.asst-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--ink);
}
.asst-check input{ width:18px; height:18px; accent-color:var(--accent); }

/* ---- Pied de la carte ---- */
.asst-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:18px;
  gap:14px;
  flex-wrap:wrap;
}
.asst-btns{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* ---- Panneau recapitulatif ---- */
.asst-side{
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--panel);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
.asst-side .eyebrow{ margin:0; }
.asst-rows{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.asst-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.asst-dot{
  width:8px;
  height:8px;
  border-radius:99px;
  margin-top:6px;
  flex:none;
  /* Une pastille ne porte pas de texte, et si du texte y atterrit par erreur il
     ne doit pas repeindre le panneau : c'est ce qui est arrive le 12/09/2026. */
  overflow:hidden;
  background:color-mix(in srgb,var(--ink) 25%,transparent);
}
/* La colonne titre + valeur doit pouvoir retrecir, sinon une valeur longue
   pousse la pastille hors de la ligne. */
.asst-row > div{ min-width:0; }
.asst-row[data-state="done"] .asst-dot{ background:var(--green); }
.asst-row[data-state="current"] .asst-dot{ background:var(--accent); }
.asst-row b{
  display:block;
  font-weight:700;
  font-size:13px;
  color:var(--ink);
}
.asst-row span{
  color:var(--muted);
  font-size:12.5px;
}
.asst-hr{
  height:1px;
  background:var(--line);
}
.asst-platforms{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.asst-platform{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 11px;
  font-size:12.5px;
  font-weight:650;
  color:var(--ink);
}
.asst-platform input{ accent-color:var(--accent); }
.asst-platform:has(input:checked){
  border-color:color-mix(in srgb,var(--accent) 65%,transparent);
  background:color-mix(in srgb,var(--accent) 16%,transparent);
}
.asst-platform.is-disconnected{ opacity:.55; }

/* n 1174 - Comptes de publication a la creation (assistant et formulaire
   classique) : un bloc par reseau, ses comptes a cocher dessous. */
#assistant-platforms.asst-platforms{ flex-direction:column; align-items:stretch; gap:10px; }
.auto-publish-provider{ display:grid; gap:4px; min-width:0; }
.auto-publish-provider-head{ display:flex; align-items:center; gap:8px; color:var(--ink); font-size:12.5px; font-weight:650; }
.auto-publish-provider .publication-account-choices{ margin-top:2px; padding-left:4px; }
.auto-publish-provider .publication-account-choice{ font-size:12.5px; font-weight:500; }
.auto-publish-provider .publication-account-choice input{ accent-color:var(--accent); }
.auto-publish-none{ color:var(--muted); font-size:12px; font-weight:500; }
.auto-publish-visibility{ display:block; padding-left:4px; }
.auto-publish-visibility select{ font-size:12.5px; padding:4px 8px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--ink); }

/* ---- Vue Recents ---- */
.asst-recents-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.asst-recents-head h2{
  margin:0;
  font:700 clamp(24px,3.4vw,34px) Manrope,Inter,sans-serif;
  letter-spacing:-.03em;
  color:var(--ink);
}
#view-recents .asst-hint{ margin-top:14px; }

/* ---- Telephone : la vue doit tenir a 390 px de large ----
   La barre d'onglets du bas existe deja dans styles.css a partir de 600 px et
   reserve sa place sous .main ; il n'y a donc rien a refaire ici, seulement a
   ramener les grilles sur une colonne. */
@media(max-width:1100px){
  .asst-work{ grid-template-columns:minmax(0,1fr); }
  .asst-side{ order:-1; }
}
@media(max-width:760px){
  .asst-tiles,
  .asst-tiles[data-columns="2"]{ grid-template-columns:minmax(0,1fr); }
  .asst-stepper{ grid-template-columns:minmax(0,1fr); }
  .asst-step small{ white-space:normal; }
}
/* ---- n 1134 - L'assistant ouvert sur un projet existant ----
   La case « Garder la miniature et les visuels du clip du projet » et son
   resume. Le resume reprend la boite de `.asst-recall` : meme bord, meme fond,
   c'est deja la forme d'un rappel de ce qui est acquis. */
.asst-stack{
  display:flex;
  flex-direction:column;
  gap:22px;
  min-width:0;
}
.asst-project-visuals{ gap:14px; }
.asst-keep{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--bg);
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.asst-keep img{
  width:176px;
  max-width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--line);
  flex:none;
}
.asst-keep-body{
  flex:1;
  min-width:200px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.asst-keep-body b{
  font-size:13.5px;
  color:var(--ink);
}

@media(max-width:600px){
  .asst-card{
    border-radius:18px;
    padding:16px;
  }
  .asst-head,
  .asst-recents-head{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
  .asst-foot{
    flex-direction:column;
    align-items:stretch;
  }
  .asst-btns{ justify-content:space-between; }
  .asst-btns button{ flex:1 1 auto; justify-content:center; }
  .asst-file b{ font-size:12.5px; }
}

/* ---- n 1152 - Reprendre un audio du projet, et Remix / Cover ----
   La liste deroulante suit les champs texte de la carte. L'ecart des paroles
   est un avertissement, pas une erreur : un bord de la couleur du theme, sans fond rouge, avec le
   geste pour revenir aux paroles de la version. Un choix de melodie
   impossible (cover d'un fichier envoye) reste visible mais eteint. */
.asst-card select{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  color:var(--ink);
  font:inherit;
}
.asst-ecart{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 12px;
  border-left:3px solid var(--accent);
  padding:4px 0 4px 12px;
}
.asst-ecart .asst-hint{ color:var(--ink); }
.asst-remix textarea[readonly]{
  min-height:96px;
  color:var(--muted);
  background:color-mix(in srgb,var(--ink) 4%,var(--bg));
}
.asst-seg button:disabled{
  opacity:.45;
  cursor:not-allowed;
}