/* =========================================================================
stz-sitemap.css
Arborescence "plan du site" avec icône page colorée par type de fichier.
CSS pur, aucune dépendance, aucune image externe.
UTILISATION
-----------
- "stz_sitemap" sur le : active l'arborescence.
- "stz_sitemap_xxx" (option) : ajoute un libellé de branche au-dessus.
- "stz_xxx" sur le - : couleur de l'icône (voir TYPES plus bas).
========================================================================= */
:root {
--stz-line: #d7dbe0;
--stz-text: #2b2f36;
--stz-text-hov: #c52915;
--stz-branch: #8a94a3;
}
/* -------------------------------------------------------------------------
LISTE
------------------------------------------------------------------------- */
ul.stz_sitemap {
list-style: none;
margin: 0.3rem 0 1.6rem 0.1rem;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
position: relative;
}
/* Libellé de branche */
ul.stz_sitemap::before {
display: block;
margin-bottom: 0.35rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--stz-branch);
}
/* LIBELLÉS DE BRANCHE — ajoutez vos propres suffixes ici */
ul.stz_sitemap_pages::before { content: "Pages"; }
ul.stz_sitemap_news::before { content: "Actualités"; }
ul.stz_sitemap_blog::before { content: "Blog"; }
ul.stz_sitemap_legal::before { content: "Informations légales"; }
ul.stz_sitemap_docs::before { content: "Documents"; }
ul.stz_sitemap_medias::before { content: "Médias"; }
/* -------------------------------------------------------------------------
ARBORESCENCE : traits portés par les
-
------------------------------------------------------------------------- */
ul.stz_sitemap li {
position: relative;
padding: 0.35rem 0 0.35rem 1.6rem;
line-height: 1.3;
}
/* Trait vertical */
ul.stz_sitemap li::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: var(--stz-line);
}
/* Coude final : le trait s'arrête au niveau du trait horizontal */
ul.stz_sitemap > li:last-child::after {
bottom: auto;
height: 1.05rem;
}
/* Trait horizontal */
ul.stz_sitemap li::before {
content: "";
position: absolute;
left: 2px;
top: 1.05rem;
width: 1rem;
height: 2px;
background: var(--stz-line);
}
/* -------------------------------------------------------------------------
LIEN + ICÔNE
------------------------------------------------------------------------- */
ul.stz_sitemap li a {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--stz-text);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
ul.stz_sitemap li a:hover,
ul.stz_sitemap li a:focus-visible {
color: var(--stz-text-hov);
}
/* Icône page (masque SVG posé littéralement) */
ul.stz_sitemap li a::before {
content: "";
flex: 0 0 auto;
width: 1.05rem;
height: 1.05rem;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6H6zm7 1.5L18.5 9H13V3.5z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6H6zm7 1.5L18.5 9H13V3.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}
ul.stz_sitemap li .stz_sitemap_size {
font-size: 0.8em;
vertical-align: text-top;
color: var(--stz-branch);
}
/* -------------------------------------------------------------------------
TYPES DE FICHIERS — doivent rester APRÈS la règle ci-dessus
------------------------------------------------------------------------- */
li.stz_html a::before { background-color: #2e86ab; }
li.stz_php a::before { background-color: #6f42c1; }
li.stz_pdf a::before { background-color: #d9534f; }
li.stz_doc a::before { background-color: #2b579a; }
li.stz_xls a::before { background-color: #217346; }
li.stz_ppt a::before { background-color: #d24726; }
li.stz_image a::before { background-color: #e0a800; }
li.stz_video a::before { background-color: #8e44ad; }
li.stz_audio a::before { background-color: #16a085; }
li.stz_zip a::before { background-color: #6c757d; }
li.stz_other a::before { background-color: #495057; }
/* Dossier : forme différente */
li.stz_folder a { font-weight: 600; }
li.stz_folder a::before {
background-color: #f0ad4e;
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
}
/* Lien externe : forme différente */
li.stz_external a::before {
background-color: #17a2b8;
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7zM5 5h5V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5h-2v5H5V5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7zM5 5h5V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5h-2v5H5V5z'/%3E%3C/svg%3E");
}
/* -------------------------------------------------------------------------
IMPRESSION
------------------------------------------------------------------------- */
@media print {
ul.stz_sitemap li a::before {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}