/* L'app des closeurs : une colonne, le téléphone d'abord. */
.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1;padding:calc(18px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;background:rgba(10,13,19,.96);backdrop-filter:blur(10px);border-top:1px solid var(--filet);padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.nav button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--doux);cursor:pointer;min-width:58px;padding:4px}
.nav button svg{width:21px;height:21px}
.nav button.on{color:var(--off)}

.entete{display:flex;align-items:center;gap:11px;margin-bottom:2px}
.entete small{display:block;font-size:12px;color:var(--doux)}
.entete b{display:block;font-weight:800;font-size:16px;letter-spacing:-.02em}
.entete .sortir{margin-left:auto;background:none;border:0;color:var(--doux);font-size:12px;cursor:pointer;padding:6px}
.solde{font-weight:800;font-size:50px;line-height:1.05;letter-spacing:-.04em;margin-top:6px}
.etape{display:flex;gap:12px;align-items:flex-start}
.etape .n{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--metal);color:var(--obsidian)}
.etape b{display:block;font-size:14px}
.etape span{font-size:13px;color:var(--doux);line-height:1.4;display:block}
.lead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--filet)}
.lead:last-child{border-bottom:0}
.lead b{font-size:14.5px;display:block}
.lead small{font-size:12px;color:var(--doux)}
.marque{text-align:center;padding:28px 0 8px}
.marque .piece{margin:0 auto 16px}
.marque h1{font-weight:800;font-size:28px;letter-spacing:-.03em}
.marque p{color:var(--doux);margin-top:6px}

/* Sur ordinateur : le menu à gauche, deux colonnes de cartes */
.col{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (min-width:900px){
  .app{max-width:1160px;display:grid;grid-template-columns:210px minmax(0,1fr);gap:40px;padding:0 28px}
  .nav{position:sticky;top:0;grid-column:1;grid-row:1;height:100dvh;flex-direction:column;justify-content:flex-start;gap:4px;background:none;backdrop-filter:none;border:0;border-right:1px solid var(--filet);padding:40px 16px 0 0}
  .nav button{flex-direction:row;gap:12px;font-size:14px;min-width:0;padding:11px 12px;border-radius:12px;justify-content:flex-start}
  .nav button svg{width:19px;height:19px}
  .nav button.on{background:#141920}
  main{grid-column:2;grid-row:1;padding:40px 0 60px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start}
  main > *{min-width:0}
  main > .plein,main > .vide{grid-column:1/-1}
  /* Sans menu (aperçu d'un associé, connexion) : la page prend toute la largeur, centrée */
  .app:has(.nav[hidden]){grid-template-columns:minmax(0,1fr);max-width:1100px}
  .app:has(.nav[hidden]) main{grid-column:1}
  main.etroit{grid-column:1/-1;display:flex;width:100%;max-width:440px;margin:0 auto}
  main .formulaire{max-width:640px}
  .titre{font-size:30px}
  .solde{font-size:60px}
  .toast{bottom:32px}
}

/* Les robots de la Série Atlas : un avatar rond et sa phrase */
.robot-dit{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.robot-dit img{border-radius:50%;flex:none;background:#EDE8DF;object-fit:cover}
.robot-dit small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--doux)}
.robot-dit p{font-size:13.5px;line-height:1.45;margin-top:2px;color:var(--off)}

/* L'argent en trois chiffres (accueil) */
.argent{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;border-top:1px solid var(--filet);padding-top:12px}
.argent small,.gains small,.calcul small{display:block;font-size:11px;color:var(--doux);line-height:1.35}
.argent b{font-size:16px;font-weight:800;letter-spacing:-.02em}
.argent b span,.gains b span{font-size:11px;font-weight:600;color:var(--doux)}
/* Les missions */
.mission-carte{display:block;text-align:left;width:100%;cursor:pointer;color:inherit;font:inherit}
.mission-carte:hover{border-color:var(--filet-fort)}
.gains{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.gains b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.gains.clair{grid-template-columns:1fr;gap:12px}
.gains.clair b{font-size:26px}
.gains.clair small{color:#5B6069;font-size:12.5px}
.bientot{opacity:.55}
.bientot small{font-size:12.5px}
.calcul{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--filet)}
.calcul b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
input[type=range]{padding:0;border:0;background:none;accent-color:#D1D5DB;height:28px}
/* Le coach */
.coach-tete{display:flex;gap:16px;align-items:center}
.coach-tete img{border-radius:50%;background:#EDE8DF;flex:none}
.coach-tete p{font-size:16px;font-weight:600;line-height:1.45;margin-top:4px}
.tips{margin-left:18px;display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.45}
.objection{padding:10px 0;border-bottom:1px solid var(--filet)}
.objection:last-child{border-bottom:0}
.objection b{display:block;font-size:14px}
.objection span{display:block;font-size:13.5px;color:var(--doux);line-height:1.45;margin-top:3px}
/* Les papiers */
.deux{display:grid;grid-template-columns:1fr 1.6fr;gap:10px}
select{appearance:none}