/* Decanta — le premier lancement : l'assistant, la première analyse, et la
 * carte des premiers pas du tableau de bord.
 *
 * Même langage que la console (console.css) : fond crème, cartes blanches à
 * filet et rayon 14, Geist, boutons noirs pour ce qui engage. Les jetons de
 * couleur viennent de console.css ; rien n'est redéfini ici.
 */

/* ---- le cadre ---- */
.in-appli{min-height:100vh;display:flex;flex-direction:column}
.in-haut{gap:14px}
.in-serveur{display:flex;align-items:center;gap:8px;white-space:nowrap}
.in-serveur:before{content:"";width:7px;height:7px;border-radius:50%;background:#3E9B6E}
.in-mode{color:var(--doux);font-weight:500;padding-left:14px;border-left:1px solid var(--filet);height:22px;
  display:flex;align-items:center}
.in-bande{background:var(--carte);border-bottom:1px solid var(--filet)}
.in-main{width:100%;max-width:960px;margin:0 auto;padding:32px 28px 48px}

/* ---- la barre d'étapes ---- */
.in-etapes{list-style:none;margin:0 auto;padding:0 28px;max-width:960px;height:60px;display:flex;align-items:center;gap:12px}
.in-etapes li{display:flex;align-items:center;gap:10px;color:var(--pale);font-weight:500;white-space:nowrap}
.in-etapes li.in-sep{flex:1;min-width:16px;height:1px;background:var(--filet)}
.in-n{width:24px;height:24px;border-radius:50%;border:1px solid var(--filet);display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;font-variant-numeric:tabular-nums;color:var(--pale);background:var(--carte);flex:none}
.in-etapes li.on{color:var(--encre)}
.in-etapes li.on .in-n{background:var(--encre);border-color:var(--encre);color:#fff}
.in-etapes li.fait{color:var(--doux)}
.in-etapes li.fait .in-n{background:var(--a4);border-color:var(--a4);color:#fff}
.in-etapes li em{font-style:normal;font-size:12px;color:var(--pale);margin-left:-2px}

/* ---- la carte d'une étape ---- */
.in-carte{padding:0;overflow:hidden}
.in-t{display:flex;align-items:baseline;gap:12px;padding:22px 28px 18px;border-bottom:1px solid var(--filet2)}
.in-t h1{font-size:20px;font-weight:600;letter-spacing:-.015em}
.in-tag{font-size:12px;color:var(--doux);background:var(--fond);border-radius:10px;padding:2px 9px;font-weight:500}
.in-pos{margin-left:auto;color:var(--doux);font-size:13px}
.in-corps{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:300px}
.in-champs{padding:24px 28px;display:flex;flex-direction:column;gap:18px}
.in-champs label{display:flex;flex-direction:column;gap:7px;font-size:13px}
.in-champs label>span{color:var(--doux);font-weight:500}
.in-champs input,.in-champs select{height:40px;padding:0 12px;background:#fff;border:1px solid var(--filet);border-radius:8px;
  font:14px var(--texte);color:var(--encre);width:100%;min-width:0}
.in-champs input:focus,.in-champs select:focus{outline:none;border-color:var(--a3);box-shadow:0 0 0 3px var(--vert-pale)}
.in-champs input::placeholder{color:var(--pale)}
.in-ligne{display:flex;gap:8px}
.in-ligne input{flex:1}
.in-ligne .btn{height:40px}
.in-rappel{margin-top:auto;padding-top:14px;border-top:1px solid var(--filet2)}
.in-rappel .t-paire b.t-mono{max-width:70%}

.in-valeurs{background:var(--fond);border-left:1px solid var(--filet2);padding:20px 24px;min-width:0}
.in-valeurs h3,.in-recap h3,.in-mesures h3{font-size:12px;font-weight:600;color:var(--doux);margin:0 0 6px}
.in-valeurs h3+*{margin-top:0}
.in-valeurs * + h3{margin-top:18px}
.in-valeurs .t-paire b.t-mono,.in-recap .t-paire b.t-mono{max-width:62%;font-family:var(--mono);font-size:12.5px}

/* les critères du mot de passe : visibles avant la saisie, cochés pendant */
.in-crit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--doux)}
.in-crit li{display:flex;align-items:center;gap:9px}
.in-crit i{width:16px;height:16px;border-radius:50%;border:1px solid #CFCBC2;background:#fff;display:inline-flex;
  align-items:center;justify-content:center;color:#fff;flex:none}
.in-crit li.ok{color:var(--encre)}
.in-crit li.ok i{background:var(--a4);border-color:var(--a4)}

/* le pied : Précédent à gauche, l'erreur, puis Passer et le bouton qui avance */
.in-pied{display:flex;align-items:center;gap:12px;padding:16px 28px;border-top:1px solid var(--filet2);background:var(--carte)}
.in-pied .btn{height:38px;padding:0 18px}
.in-pied .btn:disabled{background:#E9E7E1;border-color:#E9E7E1;color:var(--pale);cursor:default}
.in-pied .btn:not(.noir):disabled{background:var(--carte);border-color:var(--filet2)}
.in-e{flex:1;color:var(--rouge);font-size:13px;min-width:0}
.in-passer{color:var(--doux);font-weight:500;cursor:pointer;padding:0 6px;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--filet)}
.in-passer:hover{color:var(--encre)}

/* ---- étape 4 : trois cas, un par ligne ---- */
.in-choix{display:flex;flex-direction:column;border:1px solid var(--filet);border-radius:10px;overflow:hidden}
.in-champs .in-opt{position:relative;display:flex;flex-direction:row;align-items:center;gap:12px;height:46px;
  padding:0 16px 0 44px;cursor:pointer;background:#fff}
.in-opt+.in-opt{border-top:1px solid var(--filet2)}
.in-champs .in-opt input{position:absolute;left:16px;top:50%;transform:translateY(-50%);margin:0;width:15px;height:15px;
  padding:0;border:0;box-shadow:none;accent-color:var(--encre)}
.in-opt b{font-weight:500;font-size:13.5px}
.in-opt span{margin-left:auto;font-size:12.5px;color:var(--doux)}
.in-opt.on{background:var(--vert-pale)}
.in-opt.on b{font-weight:600}
/* les options trouvées sur la machine : le nom, le chemin dessous */
.in-champs .in-props .in-opt{height:auto;min-height:54px;padding-top:8px;padding-bottom:8px}
.in-opt span.in-prop-t{display:flex;flex-direction:column;gap:2px;min-width:0;margin-left:0;font-size:inherit;color:inherit}
/* un chemin se coupe par le début : c'est la fin qui le fait reconnaître */
.in-prop-t code{font-size:12px;color:var(--doux);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
.in-props .in-opt>span.num{flex:none;white-space:nowrap}
.in-props+label{margin-top:4px}

/* ---- le récapitulatif ---- */
.in-recap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 36px;padding:24px 28px 26px}
.in-recap>div{min-width:0}
.in-recap h3{padding-bottom:6px;border-bottom:1px solid var(--filet2);margin-bottom:4px}

/* ---- la première analyse ---- */
.in-etat{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:12px;font-size:12.5px;
  font-weight:500;background:var(--fond);color:var(--doux)}
.in-etat:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pale)}
.in-etat-ok{background:var(--vert-pale);color:var(--a4)} .in-etat-ok:before{background:var(--a3)}
.in-etat-todo{background:var(--or-pale);color:var(--or-fonce)} .in-etat-todo:before{background:var(--or)}
.in-etat-rgpd{background:var(--rouge-pale);color:var(--rouge)} .in-etat-rgpd:before{background:var(--rouge)}
.in-phases{list-style:none;margin:0;padding:22px 28px 4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.in-phases li{display:flex;flex-direction:column;gap:9px;font-weight:500;color:var(--pale);font-size:13px}
.in-phases li.on{color:var(--encre)}
.in-phases li.fait{color:var(--doux)}
.in-phases i{display:block;height:6px;border-radius:3px;background:var(--filet2);overflow:hidden}
.in-phases b{display:block;height:100%;background:var(--a4);border-radius:3px;transition:width .6s linear}
.in-phases li.fait b{width:100% !important;background:var(--a2)}
.in-mesures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:18px 28px 0;border:1px solid var(--filet2);border-radius:10px}
.in-mesures>div{padding:16px 18px 14px;min-width:0}
.in-mesures>div+div{border-left:1px solid var(--filet2)}
.in-v{font-size:32px;font-weight:500;letter-spacing:-.04em;line-height:1;margin:10px 0 6px;white-space:nowrap}
.in-v small{font-size:13px;letter-spacing:0;color:var(--doux);margin-left:5px;font-weight:500}
.in-mesures p{font-size:12.5px;color:var(--doux);min-height:17px}
.in-suivi{grid-template-columns:minmax(0,1fr);padding-top:14px}
.in-suivi .t-paire b.t-mono{max-width:78%}
.in-analyse .in-pied{justify-content:flex-end}

@media (max-width:1100px){
  .in-corps{grid-template-columns:minmax(0,1fr) 300px}
}

/* ---- les premiers pas, en tête du tableau de bord ---- */
.pp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;padding:14px 16px 14px 22px;margin-bottom:16px}
.pp-t{display:flex;align-items:center;gap:12px;min-width:0}
.pp-t h2{font-size:13px;font-weight:600;white-space:nowrap}
.pp-t span{font-size:12.5px;color:var(--doux);white-space:nowrap}
.pp-segs{display:flex;gap:3px}
.pp-segs i{width:18px;height:4px;border-radius:2px;background:var(--filet)}
.pp-segs i.on{background:var(--a4)}
.pp-l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-width:0}
.pp-l a{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:1px solid var(--filet2);border-radius:8px;
  color:var(--encre);text-decoration:none;font-weight:500;font-size:13px;min-width:0;background:var(--carte)}
.pp-l a:hover{border-color:#CFCBC2;background:var(--survol)}
.pp-l a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pp-l a i{width:18px;height:18px;border-radius:50%;border:1px solid #CFCBC2;flex:none;display:inline-flex;align-items:center;
  justify-content:center;color:#fff;background:#fff}
.pp-l a svg.pp-f{margin-left:auto;flex:none;color:var(--pale)}
.pp-l a.fait{color:var(--doux);background:var(--fond);border-color:var(--fond)}
.pp-l a.fait i{background:var(--a4);border-color:var(--a4)}
.pp-l a.fait svg.pp-f{display:none}
.pp-x{height:32px;padding:0 12px}
@media (max-width:1380px){
  .pp{grid-template-columns:minmax(0,1fr) auto;row-gap:12px}
  .pp-l{grid-column:1/-1;grid-row:2}
}


/* ---- la barre du haut : aucun compte, donc aucun cloisonnement ---- */
.x-cloison{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:13px;
  background:var(--rouge-pale);color:var(--rouge);font-size:12.5px;font-weight:500;white-space:nowrap}
.x-cloison:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rouge)}
@media (max-width:1380px){
  .x-cloison{padding:0 8px;gap:0}
  .x-cloison:before{display:none}
}