/* © 2026 Yoann Crom — Vicious Studio. Logiciel propriétaire, tous droits réservés (LICENSE). Réf. VS-2026-8EFE48 */
/* 🧭 La nouvelle interface (2026-10-14, docs/2026-10-14-interface-simple-design.md) : le menu à gauche, le fil des
   4 étapes, l aide de la première visite. TOUTE règle commence par body.interface-simple : éteinte, rien ne change.
   Un sélecteur avec :has() vit dans SA règle (jamais dans une liste) : un navigateur qui ne le connaît pas jette la
   règle entière, et seulement elle. */

/* ---------- Le menu à gauche (§3.1) ----------
   Fixe à gauche ; la page (bandeaux, barre du haut, onglet) se pousse à sa droite. Translucide : le logo en filigrane
   se voit au travers (acquis « Le logo en fond »). En bas, 84 px de marge (16 + 52 + 16) : la bulle 💬 de l'aide garde
   sa place, aucun bouton du menu n'est dessous (« ⇤ Réduire le menu » se range à sa droite, dans cette bande). Sous les
   toasts (50), le panneau des messages (45) et les fenêtres. */
body.interface-simple { --is-menu: 220px; padding-left: var(--is-menu); }
body.interface-simple.is-menu-reduit { --is-menu: 76px; }
body.interface-simple #is-menu {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; width: var(--is-menu);
  display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 84px;
  background: rgba(20, 16, 19, .6); border-right: 1px solid var(--bord);
}
body.interface-simple #is-menu > .marque { flex: none; padding: 2px 6px 4px; }
body.interface-simple #is-menu .onglets {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
body.interface-simple #onglets-origine { display: none !important; }   /* ↺ : l'ordre est le parcours */

/* les onglets : une ligne chacun ; les noms alignés sur ceux des étapes (sous leur numéro) */
body.interface-simple #is-menu .onglets button[data-vue] {
  display: flex; align-items: center; gap: 8px; flex: none; width: 100%; min-width: 0;
  padding: 7px 10px 7px 42px; border-radius: 10px; text-align: left; white-space: nowrap; cursor: pointer;
  color: var(--doux); font-size: 14px;
}
body.interface-simple #is-menu .onglets button[data-vue]:hover { background: var(--surface-2); color: var(--texte); }
body.interface-simple #is-menu .onglets button[data-vue].actif {
  background: rgba(220,60,128,.14); color: #f4c6da; box-shadow: inset 3px 0 0 var(--accent);
}
body.interface-simple #is-menu .onglets button[data-vue]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
body.interface-simple #is-menu .onglets .compte-taches { margin-left: auto; }
/* Mon studio : plus petits */
body.interface-simple #is-menu .onglets button[data-vue="flotte"], body.interface-simple #is-menu .onglets button[data-vue="contenu"],
body.interface-simple #is-menu .onglets button[data-vue="drive"], body.interface-simple #is-menu .onglets button[data-vue="solde"],
body.interface-simple #is-menu .onglets button[data-vue="tutos"] { padding-top: 5px; padding-bottom: 5px; font-size: 13px; }

/* les 4 étapes : le numéro rond à gauche, le nom, et le sous-titre dessous */
body.interface-simple #is-menu .onglets button[data-vue]:has(> .is-num) {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 5px 10px;
  line-height: 1.3;
}
body.interface-simple #is-menu .onglets button > .is-num {
  grid-row: 1 / span 2; grid-column: 1; display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid var(--bord); border-radius: 50%; background: var(--surface-2); color: var(--texte);
  font-size: 12px; font-weight: 700; line-height: 1;
}
body.interface-simple #is-menu .onglets button > .is-num:empty { visibility: hidden; }
body.interface-simple #is-menu .onglets button.actif > .is-num { background: var(--accent); border-color: var(--accent); color: #1f0010; }
/* les petits textes du menu en --doux (≈ 7:1 sur le fond du menu) : --tres-doux restait sous 4,5:1 */
body.interface-simple #is-menu .onglets button > .is-sous {
  grid-row: 2; grid-column: 2; overflow: hidden; text-overflow: ellipsis;
  color: var(--doux); font-size: 11.5px; font-weight: 400;
}

/* les titres des groupes */
body.interface-simple #is-menu .is-groupe {
  flex: none; margin: 10px 10px 2px; color: var(--doux); font-size: 11px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
}
body.interface-simple #is-menu .is-groupe:first-child { margin-top: 2px; }

/* « ✨ Ton nouveau menu » (la 1re fois) : ses boutons gris (le rose reste à l'action de la page) */
body.interface-simple #is-bienvenue {
  flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px;
  border: 1px solid rgba(220,60,128,.45); border-radius: 12px; background: rgba(220,60,128,.08);
}
body.interface-simple #is-bienvenue p { margin: 0; color: var(--doux); font-size: 12.5px; }
body.interface-simple #is-bienvenue .is-bienvenue-boutons { display: flex; flex-wrap: wrap; gap: 6px; }
/* un écran trop bas pour elle ET le menu entier : elle descend dans la page, sous la barre du haut (majSerre) */
body.interface-simple #is-bienvenue.is-flux {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; max-width: 760px; margin: 10px 18px 0;
}

/* « ⇤ Réduire le menu » : menu ouvert, dans la bande du bas, à droite de la bulle 💬 (52 px à 16 px du bord) ;
   menu réduit, tout en bas de la colonne (au-dessus de la bulle) */
body.interface-simple #is-reduire { flex: none; align-self: stretch; text-align: left; color: var(--doux); }
body.interface-simple:not(.is-menu-reduit) #is-reduire {
  position: absolute; left: 76px; right: 8px; bottom: 28px; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Un écran bas (un portable courant) : le menu se serre pour tenir entier, sans défiler ----------
   La classe is-serre est posée par page/agence-interface.js (majSerre) seulement quand le menu ne tiendrait pas. */
body.interface-simple #is-menu.is-serre { gap: 4px; padding-top: 8px; }
body.interface-simple #is-menu.is-serre > .marque { padding-bottom: 0; }
body.interface-simple #is-menu.is-serre .onglets button[data-vue] { padding-top: 4px; padding-bottom: 4px; }
body.interface-simple #is-menu.is-serre .onglets button[data-vue]:has(> .is-num) { padding-top: 3px; padding-bottom: 3px; }
body.interface-simple #is-menu.is-serre .onglets button > .is-sous { display: none; }
body.interface-simple #is-menu.is-serre .is-groupe { margin: 6px 10px 0; }
body.interface-simple #is-menu.is-serre .is-groupe:first-child { margin-top: 0; }
body.interface-simple #is-menu.is-serre #is-bienvenue { gap: 4px; padding: 8px 10px; }

/* ---------- Le menu réduit : une colonne d'emojis (le nom en info-bulle) ----------
   Le nom reste dans le bouton, poussé hors de sa largeur par l'espacement des mots : seul l'emoji se voit. Même
   spécificité que la règle des étapes, et après elle : elle s'applique aux étapes aussi. */
body.interface-simple.is-menu-reduit #is-menu { padding: 12px 8px 84px; }
body.interface-simple.is-menu-reduit #is-menu > .marque { justify-content: center; gap: 0; padding: 2px 0 4px; font-size: 0; }
body.interface-simple.is-menu-reduit #is-menu .onglets button[data-vue] {
  display: block; position: relative; height: 40px; padding: 0 0 0 18px; overflow: hidden;
  font-size: 18px; line-height: 40px; word-spacing: 100vw;
}
body.interface-simple.is-menu-reduit #is-menu.is-serre .onglets button[data-vue] { height: 32px; line-height: 32px; }
body.interface-simple.is-menu-reduit #is-menu.is-serre .is-groupe { margin: 4px 6px; }
body.interface-simple.is-menu-reduit #is-menu .onglets button > .is-num {
  position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; font-size: 9.5px; word-spacing: normal;
}
body.interface-simple.is-menu-reduit #is-menu .onglets .compte-taches {
  position: absolute; top: 3px; right: 3px; margin: 0; font-size: 9.5px; line-height: 14px; word-spacing: normal;
}
body.interface-simple.is-menu-reduit #is-menu .onglets button > .is-sous,
body.interface-simple.is-menu-reduit #is-bienvenue { display: none; }
body.interface-simple.is-menu-reduit #is-menu .is-groupe { height: 1px; margin: 8px 6px; font-size: 0; background: var(--bord); }
body.interface-simple.is-menu-reduit #is-reduire { text-align: center; }

/* ---------- En haut : le fil des étapes et « Suivant », ou la place de la page (§3.2) ----------
   Le fil prend la place libre : si la barre passe sur deux lignes, le solde et « Connecté » restent calés à droite.
   « Suivant » et « 📱 Publier une vidéo ↓ » sont gris (bordés de rose) : sur chaque étape, le rose reste à l'action
   de la page. */
body.interface-simple header.barre { justify-content: flex-end; }
body.interface-simple #is-fil { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; flex: 1 1 auto; min-width: 0; }
body.interface-simple #is-fil:empty { display: none; }
body.interface-simple #is-fil .is-etapes { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; }
body.interface-simple #is-fil .is-etapes button {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 0; border-radius: 999px;
  background: none; color: var(--doux); font-weight: 600; white-space: nowrap;
}
body.interface-simple #is-fil .is-etapes button:hover { background: var(--surface-2); color: var(--texte); }
body.interface-simple #is-fil .is-etapes button[aria-current="step"] { background: rgba(220,60,128,.14); color: #f4c6da; }
body.interface-simple #is-fil .is-num {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--bord); border-radius: 50%;
  background: var(--surface-2); color: var(--texte); font-size: 11px; font-weight: 700; line-height: 1;
}
body.interface-simple #is-fil [aria-current="step"] .is-num { background: var(--accent); border-color: var(--accent); color: #1f0010; }
body.interface-simple #is-fil .is-sep { color: var(--tres-doux); }
body.interface-simple #is-fil .is-suivant,
body.interface-simple #is-fil .is-publier { white-space: nowrap; border-color: rgba(220,60,128,.55); color: var(--texte); }
body.interface-simple #is-fil .is-suivant:focus-visible,
body.interface-simple #is-fil .is-publier:focus-visible,
body.interface-simple #is-fil .is-etapes button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
body.interface-simple #is-fil .is-but { margin: 0; min-width: 0; color: var(--doux); font-size: 13px; }
/* 🔥 Tendances, le Reel arrivé (is-reel-pret, posé par rendreFil) : le bouton du haut, qui garde le lien, devient gris ;
   le seul rose de l étape est « 🤖 Utiliser en Vidéo IA ». Il reste cliquable. */
body.interface-simple #vue-tendances.is-reel-pret #tendance-chercher {
  background: var(--surface-3); border-color: var(--bord); color: var(--texte); box-shadow: none;
}
body.interface-simple #vue-tendances.is-reel-pret #tendance-chercher:hover { background: #2e2329; border-color: #4a3641; }

/* ---------- La carte « 👋 » de la 1re visite (§3.3) : dans le flux, sous la barre du haut, jamais par-dessus ---------- */
body.interface-simple #is-astuce {
  flex: none; display: flex; align-items: flex-start; gap: 10px; max-width: 760px; margin: 10px 18px 0;
  padding: 10px 12px; border: 1px solid rgba(220,60,128,.45); border-radius: 12px; background: rgba(220,60,128,.08);
}
body.interface-simple #is-astuce .is-coucou { font-size: 20px; line-height: 1.2; }
body.interface-simple #is-astuce .is-astuce-textes { flex: 1; min-width: 0; }
body.interface-simple #is-astuce p { margin: 0; color: var(--texte); font-size: 13px; }
body.interface-simple #is-astuce p + p { margin-top: 2px; color: var(--doux); }
body.interface-simple #is-astuce .bouton { flex: none; align-self: center; }
@media (min-width: 761px) {   /* le panneau des messages ouvert (420 px à droite) : la carte s'arrête avant lui */
  body.interface-simple.msgp-ouvert #is-astuce,
  body.interface-simple.msgp-ouvert #is-bienvenue.is-flux { margin-right: calc(min(420px, 100vw) + 18px); }
}
@media (prefers-reduced-motion: no-preference) {   /* une arrivée courte, jamais quand l'écran préfère le calme */
  body.interface-simple #is-astuce, body.interface-simple #is-bienvenue { animation: is-menu-arrive .16s ease-out; }
}
@keyframes is-menu-arrive { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Sur un téléphone (760 px et moins) : le menu redevient une bande qui défile, en haut ---------- */
@media (max-width: 760px) {
  body.interface-simple, body.interface-simple.is-menu-reduit { padding-left: 0; }
  body.interface-simple #is-menu {
    position: static; z-index: auto; flex: none; flex-direction: row; align-items: center; gap: 8px;
    width: auto; min-width: 0; max-width: 100%; padding: 6px 12px; border-right: 0; border-bottom: 1px solid var(--bord);
  }
  body.interface-simple #is-menu > .marque { gap: 0; padding: 0; font-size: 0; }
  body.interface-simple #is-menu .onglets {
    flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: center; gap: 4px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  }
  body.interface-simple #is-menu .onglets button[data-vue] {
    display: inline-flex; align-items: center; gap: 6px; flex: none; width: auto; padding: 7px 11px; font-size: 14px;
  }
  body.interface-simple #is-menu .onglets button[data-vue]:has(> .is-num) {
    display: inline-flex; align-items: center; gap: 6px; flex: none; width: auto; padding: 7px 11px; font-size: 14px;
  }
  body.interface-simple #is-menu .onglets button[data-vue].actif { box-shadow: inset 0 -3px 0 var(--accent); }
  body.interface-simple #is-menu .onglets button > .is-num { width: 20px; height: 20px; font-size: 11px; }
  body.interface-simple #is-menu .is-groupe, body.interface-simple #is-menu .onglets button > .is-sous,
  body.interface-simple #is-bienvenue, body.interface-simple #is-reduire { display: none; }
  body.interface-simple header.barre { justify-content: flex-start; }
  body.interface-simple #is-fil { flex: 1 1 100%; }
  body.interface-simple #is-fil .is-etapes button:not([aria-current]) { gap: 0; padding: 4px; font-size: 0; }
  body.interface-simple #is-astuce { margin: 8px 12px 0; }
}