body.app .coque{display:block}
.barre{background:var(--gris-clair);border-bottom:1px solid var(--filet);padding:.5rem 1rem .75rem}
.barre ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.barre-entreprise{margin:0;font-weight:600}
.barre-nombre{margin-left:auto;padding:0 .4rem;min-width:1.4rem;text-align:center;border-radius:var(--rayon-etiquette);background:var(--filet);font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
.lignes{list-style:none;margin:0 0 1.5rem;padding:0;border-top:1px solid var(--filet)}
.lignes>li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:.875rem 0;border-bottom:1px solid var(--filet)}
.lignes>li.ajout{display:block}
.lignes p{margin:0}
.lignes .detail{color:var(--gris-texte)}
.lignes form{margin:0}
.a-faire{list-style:none;margin:0 0 2rem;padding:0;border-top:1px solid var(--filet)}
.a-faire li{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;padding:.875rem 0;border-bottom:1px solid var(--filet)}
.a-faire .quand{color:var(--gris-texte);font-variant-numeric:tabular-nums}
.a-faire .prochaine .quand::before{content:"";display:inline-block;width:.5rem;height:.5rem;margin-right:.4rem;border-radius:50%;background:var(--bleu);vertical-align:middle}
.a-faire p{margin:0}
.mise-en-place{margin:0 0 2rem;padding-left:1.5rem}
.mise-en-place li{padding:.5rem 0}
.mise-en-place p{margin:0}
.mise-en-place .detail{color:var(--gris-texte)}
.mise-en-place .fait>div>p:first-child{color:var(--gris-texte)}
.a-faire .detail{color:var(--gris-texte)}
.barre-categorie{margin:.5rem 0 .125rem;font-size:.8125rem;color:var(--gris-texte)}
.barre .barre-compte{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--filet)}
.barre a{display:flex;align-items:center;min-height:2.75rem;padding:0 .625rem;border-radius:var(--rayon);border:1px solid transparent;color:var(--encre);text-decoration:none}
.barre a:hover{background:var(--blanc);border-color:var(--filet)}
.barre a[aria-current="page"]{background:var(--blanc);border-color:var(--filet);font-weight:600}
.ecran-tete{margin:1.25rem 0 1.5rem}
.ecran-categorie{margin:0;font-size:.875rem;color:var(--gris-texte)}
.ecran-titre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin:.125rem 0 1rem}
.ecran-titre h1{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;font-size:1.5rem;line-height:1.25}
.ecran-titre h1 .etat{font-size:.8125rem}
.ecran-titre .bouton{margin:0}
.cases-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));column-gap:1rem}
.onglets{border-bottom:1px solid var(--filet)}
.onglets ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;column-gap:.25rem}
.onglets a{display:flex;align-items:center;min-height:2.75rem;padding:0 .625rem;white-space:nowrap;color:var(--gris-texte);text-decoration:none;border-bottom:2px solid transparent}
.onglets a:hover{color:var(--encre)}
.onglets a[aria-current="page"]{color:var(--encre);border-bottom-color:var(--bleu);font-weight:600}
body.app .entete{position:relative}
.menu-app>summary{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 .875rem;border:1px solid var(--filet);border-radius:var(--rayon);background:var(--blanc);font-weight:600;cursor:pointer;list-style:none}
.menu-app>summary::-webkit-details-marker{display:none}
.menu-app[open]>summary{border-color:var(--encre)}
.menu-app>summary .barre-nombre{margin-left:0}
.barre-tel{position:absolute;left:0;right:0;top:100%;z-index:10}
.barre-tel ul{flex-direction:column;flex-wrap:nowrap}
.barre-tel a{margin-left:-.625rem}
@media (max-width:59.99rem){
.ecran-categorie{display:none}
body.app .entete .etiquette{display:none}
.menu-app{margin-left:auto}
body.app .coque>.barre{display:none}
}
@media (min-width:60rem){
.menu-app{display:none}
}
@media (min-width:60rem){
body.app .entete .enveloppe{max-width:none;padding-left:1.5rem;padding-right:1.5rem}
body.app .coque{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:3rem;padding-right:1.5rem}
body.app .coque>main{margin:0;max-width:var(--mesure)}
.barre{border-bottom:0;border-right:1px solid var(--filet);padding:1.5rem 1rem 1.5rem 1.5rem;min-height:100vh;font-size:.9375rem}
.barre ul{flex-direction:column;flex-wrap:nowrap}
.barre a{margin-left:-.625rem}
.barre-categorie{margin-top:1.25rem}
}
