@media (max-width: 768px) {

	.page {
		grid-template-columns: 100%;
		grid-template-rows: auto auto 1fr auto auto;
		grid-template-areas:
        "header"
        "nav"
        "main"
        "outline"
        "footer";
	}

	.outline {
		max-width: -moz-available;
        max-width: -webkit-fill-available;
        max-width: fill-available;
		border-right: none;
	}

	p-compact-toggle {
        max-width: -moz-available;
        max-width: -webkit-fill-available;
        max-width: fill-available;
		border-top: 1px solid var(--outline-bdcolor);
		border-bottom: none;
	}

	p-compact-toggle[enabled] {
		border-right: none;
	}

	.outline > .otl {
		display: none;
	}
}

@media (max-width: 594px) {
    h1 > .icon {
        padding: 0.25rem!important;
        width: 2rem!important;
        height: 2rem!important;
        border-radius: .5rem!important;
        margin-inline-end: 0.6rem!important;
    }

    .sub.sequence {
        padding: 0.8rem;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sub.sequence > * {
        flex: 100%;
    }

    .sub > .icon.seq {
        flex: unset;
        margin: 0;
    }

    .seqTi {
        flex: 80%!important;
    }

	h1 > .ti {
		margin: .5rem 0;
	}

	p-rendbutton {
		grid-area: more;
		flex-direction: row;
	}

	dialog {
		width: -webkit-fill-available;
		width: -moz-available;
		max-width: none;
		box-shadow: none;
		border-radius: 0;
	}

	main,
	main.activity {
		padding: 1rem;
	}

	nav.program {
	    padding-inline: 0.4rem;
	}

	nav.program .back {
	    margin-inline-start: 0;
	}

	.subPg.seance {
		grid-template-columns: auto;
		grid-template-areas:
			"head"
			"score"
			"rend"
			"body";
	}

	.sub.activity,
	.subPg.activity {
	    display: flex;
	    flex-direction: column;
	    gap: 0.5rem;
/*		grid-template-columns: auto;
		grid-template-areas:
			"head"
			"score"
			"rend"
			"abstract"
			"body";*/
	}

	.seance > .rendList,
	.seance > p-injectinprog > .rendList {
		border-inline-start: 2px solid var(--seq-bdcolor);
		padding-inline-start: 1.2rem;
		margin-inline-start: 1.05rem;
	}

	.rendList > p-rendbutton > .ti {
		max-width: initial;
		white-space: initial;
	}

	.subPgTi {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 0fr 1fr 0fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "ico ti info"
            ". dt dt";
        gap: 2px;
	}

	.subPgTi > .ti {
		margin-inline-start: 0;
		grid-area: ti;
	}

	.subPgTi > .dates {
		display: contents;
	}
    .subPgTi > .dates .dt {
        grid-area: dt;
    }

    p-info {
        grid-area: info;
    }

	.icon {
	    grid-area: ico;
	}

	.sub.activity .abstract .obj .title {
	    font-size: var(--secondaryText-font-size);
	}
	.abstract > .bk > .title {
	    margin-inline-start: 0;
	}

	.rendList {
	    order: 2;
	    justify-content: normal;
	    gap: 0.3rem;
        padding-inline-start: 1.2rem;
        margin-inline-start: 1.05rem;
        border-inline-start: 2px solid var(--seq-bdcolor);
	}
	.rendList > p-rendbutton {
	    padding: 0.4rem;
	    margin: 0;
	}

	.bk {
		margin: .8rem 0;
	}

	.abstract,
	.details {
		padding-block: 0;
	}
	.abstract {
	    order: 3;
	}
    .details {
        order: 4;
    }

	.abstract > .bk {
		margin: 0 0 1rem 0;
	}

	.sub.thematic {
		padding-inline-start: 1rem;
	}

	.sub.thematic > h2,
	.sub.thematic > h3,
	.sub.thematic > h4 {
		margin-left: 1.5rem;
	}

	.sub > .icon.them {
		margin-inline-start: 0;
	}

	.sub.thematic > h2.themTi {
		margin-left: 1.4rem;
	}
}