/* ===========================================================
   Mes applications — habillage
   Charte FORMENERGIE : Righteous pour les titres, Mulish pour
   le reste, orange du logo, aucun pictogramme.
   =========================================================== */
:root{
  --orange:#D86000;
  --orange-clair:#FFF1E3;
  --amber:#FFC000;
  --vert:#187860;
  --bleu:#1F6FB2;
  --rouge:#C0392B;
  --fond:#F2F4F6;
  --carte:#FFFFFF;
  --texte:#1F2A33;
  --texte-doux:#5C6B77;
  --trait:#DDE3E8;
  --sombre:#1F2A33;
}
*{box-sizing:border-box}
html, body{max-width:100%; overflow-x:hidden}
body{
  margin:0; background:var(--fond); color:var(--texte);
  font-family:'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:15px; line-height:1.5;
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
}
h1, h2, h3, .marque-nom, .logo{font-family:'Righteous', 'Mulish', sans-serif; font-weight:400}

.topbar{
  background:var(--sombre); color:#FFF;
  padding:calc(.9rem + env(safe-area-inset-top)) 1.2rem .9rem;
}
.marque{display:flex; align-items:center; gap:.8rem}
.logo{
  width:44px; height:44px; border-radius:12px; background:var(--orange);
  display:grid; place-items:center; font-size:1.05rem; color:#FFF; flex:0 0 auto
}
.marque-nom{font-size:1.25rem}
.marque-sous{font-size:.82rem; color:#A9B6C0}

main{padding:1.2rem; max-width:1180px; margin:0 auto;
  padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))}

.chercher{margin-bottom:1.2rem}
.chercher input{
  width:100%; font-family:inherit; font-size:16px; padding:.85rem 1rem;
  border:1px solid var(--trait); border-radius:14px; background:#FFF; color:var(--texte)
}
.chercher input:focus{outline:2px solid var(--orange-clair); border-color:var(--orange)}
.doux{color:var(--texte-doux); font-size:.85rem}
#compte{margin-top:.4rem}

.groupe{margin-bottom:1.8rem}
.groupe-tete{margin-bottom:.7rem}
.groupe-tete h2{margin:0 0 .1rem; font-size:1.15rem}

.grille{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:.8rem}

.appli{
  background:var(--carte); border:1px solid var(--trait); border-radius:16px;
  padding:1rem; display:flex; flex-direction:column; gap:.5rem;
  text-decoration:none; color:inherit; transition:border-color .15s, transform .15s
}
.appli:hover{border-color:var(--orange); transform:translateY(-1px)}
.appli-nom{font-family:'Righteous', sans-serif; font-size:1.05rem}
.appli-quoi{font-size:.88rem}
.appli-pied{
  display:flex; flex-wrap:wrap; gap:.35rem .8rem; align-items:baseline;
  margin-top:auto; padding-top:.5rem; border-top:1px solid #EDF0F2
}
.appli-adresse{
  font-size:.8rem; color:var(--bleu); word-break:break-all;
  font-variant-numeric:tabular-nums
}
.pastille{
  display:inline-block; padding:.16rem .6rem; border-radius:999px;
  font-size:.74rem; font-weight:600; background:#EEF1F4; color:var(--texte-doux);
  white-space:nowrap
}
.p-orange{background:var(--orange-clair); color:#A24E05}
.p-vert{background:#E4F3EE; color:var(--vert)}
.p-rouge{background:#FBEAE8; color:var(--rouge)}
.note{
  font-size:.8rem; background:#F7F9FA; border-radius:10px; padding:.4rem .6rem;
  color:var(--texte-doux)
}

/* Les trois portes d'une même application */
.portes{
  margin-top:.5rem; border-top:1px solid #EDF0F2; padding-top:.6rem;
  display:flex; flex-direction:column; gap:.55rem
}
.porte{border-left:3px solid var(--orange); padding-left:.7rem}
.porte-lib{font-weight:700; font-size:.88rem}
.porte-adresse{font-size:.78rem; color:var(--bleu); word-break:break-all}
.porte-quoi{font-size:.82rem; color:var(--texte-doux)}

.horsservice{border-color:#E9C4BF; background:#FFFBFA}
.automate{
  background:var(--carte); border:1px solid var(--trait); border-radius:14px;
  padding:.8rem 1rem; display:flex; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; align-items:baseline; margin-bottom:.5rem
}
.pied{
  margin-top:2rem; padding-top:1rem; border-top:1px solid var(--trait);
  font-size:.82rem; color:var(--texte-doux); line-height:1.7
}
.vide{
  background:var(--carte); border:1px dashed var(--trait); border-radius:16px;
  padding:2rem 1rem; text-align:center; color:var(--texte-doux)
}

@media (max-width: 620px){
  main{padding:.9rem}
  .grille{grid-template-columns:1fr; gap:.6rem}
  .marque-nom{font-size:1.1rem}
  .appli{padding:.85rem}
}
@media print{
  .topbar, .chercher{display:none}
  .appli{break-inside:avoid; border-color:#CCC}
  .grille{grid-template-columns:1fr 1fr}
}