/* DATAtourisme — describe.php styles */
/* Généré automatiquement — ne pas éditer directement */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #f7f5f0;
    --surface:   #ffffff;
    --border:    #e8e3da;
    --text:      #1a1814;
    --text-muted:#7a7368;
    --accent:    #c0392b;
    --accent-2:  #2c5f8a;
    --tag-bg:    #eef4fa;
    --tag-color: #2c5f8a;
    --mono:      'DM Mono', monospace;
    --serif:     'DM Serif Display', serif;
    --sans:      'DM Sans', sans-serif;

    /* Charte MyDatas — pour la nav et les éléments communs DATAtourisme */
    --mydatas-bg-header: #f2f9fd;
    --mydatas-title:     #4b4b4b;
    --mydatas-text:      #202020;
    --mydatas-border:    #bfbfbf;
    --mydatas-exploreur: #006b9e;
    --mydatas-accent:    #c2001a;
    --mydatas-dashboard: #7fcbf1;
}

/* ─── Bouton retour haut de page ─── */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 40px;
    height: 40px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--mydatas-exploreur);
    color: #fff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    z-index: 90;
    transition: background .15s, transform .15s;
}
.back-to-top.visible { display: flex; }
.back-to-top:hover { background: #005280; transform: translateY(-2px); }

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.65;
    min-height: 100vh;
}

/* Nav */
.nav {
    background: var(--mydatas-bg-header);
    color: var(--mydatas-text);
    padding: 10px 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--mydatas-border);
}
.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--mydatas-text);
    line-height: 1;
}
.nav-logo-mark {
    width: 38px;
    height: auto;
    flex-shrink: 0;
}
.nav-logo-text {
    font-family: var(--serif);
    font-size: 20px;
    color: var(--mydatas-text);
    letter-spacing: 0.01em;
    font-weight: 400;
}
.nav-logo-text strong {
    font-weight: 700;
}
.nav-sep { opacity: 0.4; color: var(--mydatas-title); }
.nav-sub {
    font-size: 13px;
    font-weight: 400;
    color: var(--mydatas-title);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* describe-nav fixée sous la nav principale */
.describe-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: sticky;
    top: 55px; /* hauteur approximative de .nav */
    z-index: 95;
    background: var(--bg);
    padding: 10px 0 10px;
    margin: 0 -8px 20px;
    padding-left: 8px;
    padding-right: 8px;
    border-bottom: 1px solid var(--border);
}

/* Layout */
.page-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

/* Header de la ressource */
.describe-header {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 32px 36px;
    margin-bottom: 24px;
    position: relative;
}
.describe-uri-badge {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 10px;
    display: inline-block;
    margin-bottom: 14px;
}
.describe-title {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    margin-bottom: 14px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.describe-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.type-badge {
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 500;
}
.type-badge a { color: inherit; text-decoration: none; }
.type-badge a:hover { text-decoration: underline; }

.describe-full-uri {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
}
.uri-label {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}
.describe-full-uri code {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text);
    word-break: break-all;
    flex: 1;
}
.uri-copy {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 13px;
    padding: 2px 7px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
    line-height: 1.4;
}
.uri-copy:hover  { background: var(--bg); color: var(--text); border-color: var(--accent-2); }
.uri-copy.copied { color: #2e7d32; border-color: #2e7d32; }

/* Section propriétés */
.prop-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 28px 36px;
    margin-bottom: 20px;
}
.prop-section h2 {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Table des propriétés */
.prop-table {
    width: 100%;
    border-collapse: collapse;
}
.prop-table tr {
    border-bottom: 1px solid var(--border);
}
.prop-table tr:last-child { border-bottom: none; }
.prop-table th {
    text-align: left;
    font-weight: 400;
    font-size: 13px;
    color: var(--text-muted);
    padding: 12px 16px 12px 0;
    vertical-align: top;
    width: 220px;
    min-width: 180px;
}
.prop-table th .prop-uri {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--border);
    margin-top: 2px;
}
.prop-table td {
    padding: 12px 0;
    vertical-align: top;
    font-size: 14px;
}
.val-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Grille multilingue */
.lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px 16px;
}
.lang-item { font-size: 14px; }
.lang-flag {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 3px;
    padding: 1px 5px;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
}
.lang-tag, .datatype-tag {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
}

/* Liens URI */
a.uri-link {
    color: var(--accent-2);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 13px;
}
a.uri-link:hover { text-decoration: underline; color: var(--accent); }
a.uri-link.local { color: var(--accent-2); }
a.uri-link.external { color: var(--text-muted); }

/* Turtle brut */
.turtle-section {}
.toggle-turtle {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
    color: var(--text-muted);
}
.toggle-turtle:hover { background: var(--border); color: var(--text); }
.turtle-raw {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.7;
    background: #1a1814;
    color: #e8e3da;
    border-radius: 6px;
    padding: 20px 24px;
    margin-top: 16px;
    /* Préserve les retours ligne du Turtle source ET autorise le wrap
       automatique des longues URIs/littéraux pour éviter le scroll horizontal.
       overflow-wrap: anywhere permet de couper n'importe où (URIs sans espace). */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ── Bandeau de redirection canonique ────────────────────────────────────── */
/* Affiché en haut de page quand l'utilisateur a été redirigé depuis une URI
   externe équivalente (ex: schema:Place → core:Place via owl:equivalentClass).
   Informatif et discret, ne gêne pas la lecture de la page principale. */
.describe-redirect-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--tag-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-2);
    border-radius: 5px;
    font-size: 13px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.describe-redirect-icon {
    font-size: 14px;
    color: var(--accent-2);
    font-weight: 600;
}
.describe-redirect-text {
    flex: 1 1 auto;
}
.describe-redirect-text code {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text);
}
.describe-redirect-link {
    color: var(--accent-2);
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: border-color .15s, background .15s;
}
.describe-redirect-link:hover {
    border-color: var(--accent-2);
    background: #fff;
}

/* ── Footer de la page describe ──────────────────────────────────────────── */
/* Pied de page : signature discrète d'ancrage vers la racine de l'ontologie.
   Le lien vers le dépôt GitLab se trouve désormais dans .describe-shortcuts
   (en haut de page), plus visible et cohérent avec les raccourcis de graphes. */
.describe-footer {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.describe-footer-signature {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
}
.describe-footer-link {
    color: var(--accent-2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
}
.describe-footer-link:hover {
    border-bottom-color: var(--accent-2);
}

/* Catalog — listing individus */
.catalog-section h2 { align-items: baseline; }
.catalog-count {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}
.catalog-group { margin-bottom: 24px; }
.catalog-group:last-child { margin-bottom: 0; }
.catalog-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
.catalog-group-count {
    font-family: var(--mono);
    font-size: 11px;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 10px;
    padding: 1px 8px;
}
.catalog-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
}
.catalog-item {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    text-decoration: none;
    color: var(--text);
    font-size: 13px;
    transition: border-color .15s, background .15s;
}
.catalog-item:hover {
    border-color: var(--accent-2);
    background: var(--tag-bg);
}
.catalog-item-uri {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Item de catalogue avec compteur d'instances (vue racine resource/core) :
   pastille numérique en haut à droite indiquant le nombre d'individus que
   porte cette classe dans le thésaurus. Positionnement relatif pour que la
   pastille flotte sur le coin sans empiéter sur les textes. */
.catalog-item-with-count {
    position: relative;
    padding-right: 50px;
}
.catalog-item-count {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-2);
    background: var(--tag-bg);
    border-radius: 10px;
    padding: 2px 9px;
    min-width: 22px;
    text-align: center;
}
.catalog-item-with-count:hover .catalog-item-count {
    background: #fff;
}

/* Titre de groupe interne (pseudo-URI comme __classes_thesaurus__) :
   simple libellé textuel puisqu'il n'y a pas d'URI réelle à rendre. */
.catalog-group-title {
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

/* Erreur */
.error-box {
    background: #fff5f5;
    border: 1px solid #fcc;
    border-radius: 8px;
    padding: 32px;
}
.error-box h2 { color: var(--accent); margin-bottom: 8px; }

@media (max-width: 600px) {
    .prop-table { display: block; }
    .prop-table tr { display: block; border-bottom: 1px solid var(--border); padding: 12px 0; }
    .prop-table th { display: block; width: 100%; padding-bottom: 4px; }
    .prop-table td { display: block; padding-top: 0; }
    .describe-header { padding: 24px 20px; }
    .prop-section { padding: 20px; }
}

/* ============================================================ */
/* Hiérarchie                                                    */
/* ============================================================ */
.hier-section h2,
.data-examples-section h2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.section-icon { font-size: 16px; }

.hier-tree {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--mono);
    font-size: 13px;
}
.hier-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    padding-left: calc(8px + var(--depth) * 20px);
    line-height: 1.4;
}
.hier-row.hier-ancestor { color: var(--text-muted); }
.hier-row.hier-current  {
    background: var(--tag-bg);
    border: 1px solid var(--accent-2);
    font-weight: 500;
    color: var(--text);
}
.hier-row.hier-child { color: var(--text); }
.hier-connector     { color: var(--border); user-select: none; }
.hier-bullet        { color: var(--accent-2); font-size: 10px; }
.hier-label         { text-decoration: none; color: inherit; }
.hier-label:hover   { text-decoration: underline; color: var(--accent-2); }
.hier-label-current { font-weight: 600; color: var(--accent-2); }
.hier-label-ancestor{ color: var(--text-muted); }
.hier-label-child   { color: var(--text); }
.hier-count {
    font-family: var(--mono);
    font-size: 11px;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: 4px;
}
.usage-count { background: #e8f5e9; color: #2e7d32; }

/* ============================================================ */
/* Propriétés applicables — bloc supprimé (remplacé par le      */
/* schéma triplet dans la section "Position dans l'ontologie"). */
/* Seuls .prop-range et .prop-comment sont conservés car        */
/* réutilisés par d'autres sections (hier-section, examples).   */
/* ============================================================ */
.prop-range { font-size: 13px; color: var(--text-muted); margin-left: 6px; }
.prop-comment {
    font-size: 12px;
    color: var(--text-muted);
    margin: 3px 0 0;
    font-family: var(--sans);
    font-style: italic;
    line-height: 1.4;
}

/* ============================================================ */
/* Données réelles + SPARQL                                     */
/* ============================================================ */
.examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}
.example-card {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s, background .15s;
}
.example-card:hover   { border-color: var(--accent-2); background: var(--tag-bg); }
.example-label        { font-size: 13px; font-weight: 500; }
.example-uri          {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sparql-snippet-wrap   {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.sparql-snippet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg);
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.btn-copy-sparql, .btn-open-sparql {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    text-decoration: none;
    transition: background .15s;
}
.btn-copy-sparql:hover, .btn-open-sparql:hover {
    background: var(--border);
    color: var(--text);
}
.sparql-snippet {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.7;
    background: #1a1814;
    color: #e8e3da;
    padding: 16px 20px;
    margin: 0;
    overflow-x: auto;
    white-space: pre;
}

/* ============================================================ */
/* Tiroir de navigation ontologie                               */
/* ============================================================ */
:root {
    --drawer-w:          300px;
    --drawer-top:        0px;   /* mis à jour par JS = offsetTop de .describe-header */
    --drawer-transition: 0.25s ease;
}

/* Overlay (mobile) */
.nav-overlay {
    display: none;
    position: fixed;
    top: var(--drawer-top);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.35);
    z-index: 199;
    opacity: 0;
    transition: opacity var(--drawer-transition);
}
.nav-overlay.visible {
    display: block;
    opacity: 1;
}

/* Tiroir — part du niveau describe-header */
.ont-drawer {
    position: fixed;
    top: var(--drawer-top);
    left: 0;
    bottom: 0;
    width: var(--drawer-w);
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    transform: translateX(calc(-1 * var(--drawer-w)));
    transition: transform var(--drawer-transition);
    overflow: hidden;
    box-shadow: 2px 2px 12px rgba(0,0,0,0.06);
}
.ont-drawer.open { transform: translateX(0); }

/* Tab flottant — aligné avec describe-header, suit le tiroir */
.drawer-tab {
    position: fixed;
    top: var(--drawer-top);
    left: 0;
    z-index: 201;
    transform: translateX(0);
    transition: transform var(--drawer-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Quand le tiroir est ouvert, le tab se déplace à droite du tiroir */
body.drawer-open .drawer-tab {
    transform: translateX(var(--drawer-w));
}
.drawer-tab-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 6px 6px 0;
    padding: 10px 10px 10px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    transition: background .15s, color .15s;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.06);
}
.drawer-tab-btn:hover    { background: var(--tag-bg); color: var(--accent-2); }
body.drawer-open .drawer-tab-btn { color: var(--accent-2); }
.drawer-tab-icon   { font-size: 16px; line-height: 1; }
.drawer-tab-label  {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    writing-mode: vertical-rl;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: inherit;
}

/* En-tête du tiroir */
.drawer-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--surface);
}
.drawer-title {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--text);
    margin: 0;
}
.drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
}
.drawer-close:hover { background: var(--bg); color: var(--text); }

/* Barre de recherche */
.drawer-search-wrap {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.drawer-search {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--sans);
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg);
    color: var(--text);
    outline: none;
}
.drawer-search:focus { border-color: var(--accent-2); }

/* Corps scrollable */
.drawer-body {
    overflow-y: auto;
    flex: 1;
    padding: 8px 0 24px;
    scroll-behavior: smooth;
}
.drawer-body a {
    text-decoration: none;
    color: inherit;
}
.drawer-body a:hover { text-decoration: none; }

/* Racines sémantiques */
.drawer-root {
    border-bottom: 1px solid var(--border);
}
.drawer-root-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
    transition: background .12s;
}
.drawer-root-header:hover { background: var(--border); }
.drawer-root-icon { font-size: 15px; flex-shrink: 0; }
.drawer-root-label { flex: 1; }
.drawer-root-arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform .2s;
    flex-shrink: 0;
}
.drawer-root.expanded .drawer-root-arrow { transform: rotate(90deg); }
.drawer-root-children { display: none; }
.drawer-root.expanded .drawer-root-children { display: block; }

/* Nœuds de l'arbre */
.tree-node {
    display: block;
    padding: 5px 14px 5px calc(14px + var(--node-depth, 0) * 14px);
    font-size: 12px;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background .1s;
    line-height: 1.35;
}
.tree-node:hover { background: var(--tag-bg); }
.tree-node.active {
    background: var(--tag-bg);
    color: var(--accent-2);
    font-weight: 600;
    border-left: 2px solid var(--accent-2);
}
.tree-node-label {
    flex: 1;
    text-decoration: none;
    color: inherit;
}
.tree-node-label:hover { text-decoration: none; }
.tree-node-toggle {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 9px;
    flex-shrink: 0;
    border-radius: 2px;
    transition: transform .15s;
}
.tree-node-toggle.open { transform: rotate(90deg); }
.tree-node-children { display: none; }
.tree-node-children.open { display: block; }
.tree-node-count {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--border);
    flex-shrink: 0;
}

/* Chargement */
.drawer-loading {
    padding: 24px 16px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

/* Résultats de recherche */
.drawer-search-results { padding: 4px 0; }
.search-result-item {
    display: flex;
    flex-direction: column;
    padding: 7px 14px;
    text-decoration: none;
    color: var(--text);
    font-size: 12px;
    border-bottom: 1px solid var(--border);
    transition: background .1s;
}
.search-result-item:hover { background: var(--tag-bg); }
.search-result-item.active { background: var(--tag-bg); color: var(--accent-2); font-weight: 600; }
.search-result-label {
    font-weight: 500;
    text-decoration: none;
}
.search-result-uri { font-family: var(--mono); font-size: 10px; color: var(--text-muted); margin-top: 1px; }

/* ── Centrage horizontal grand écran ── */
/* --drawer-left est calculé par JS : max(0, (vw - drawer_w - 24 - 900) / 2) */
:root { --drawer-left: 0px; --content-max: 900px; --content-gap: 24px; }

@media (min-width: 1200px) {
    /* Tiroir centré */
    .ont-drawer { left: var(--drawer-left); }
    /* Tab suit le tiroir */
    .drawer-tab { left: var(--drawer-left); }

    /* Contenu : décalé de drawer_left + drawer_w + gap, max-width fixé */
    body.drawer-open .page-wrap {
        margin-left: calc(var(--drawer-left) + var(--drawer-w) + var(--content-gap));
        max-width: var(--content-max);
        margin-right: 0;
        transition: margin-left var(--drawer-transition);
    }
    body:not(.drawer-open) .page-wrap {
        /* Sans tiroir : contenu recentré normalement */
        margin-left: auto;
        margin-right: auto;
        transition: margin-left var(--drawer-transition);
    }
    body.drawer-open .nav-overlay { display: none !important; }
}

@media (max-width: 600px) {
    :root { --drawer-w: 85vw; }
}

/* ── Lang switcher ── */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0 12px;
    flex-wrap: wrap;
}
/* Variante : lang-switcher placé dans la .nav principale (aligné à droite) */
.nav .lang-switcher {
    margin-left: auto;
    padding: 0;
}
.lang-switcher-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-right: 4px;
}
.lang-btn {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    letter-spacing: 0.04em;
}
.lang-btn:hover      { background: var(--bg); color: var(--text); }
.lang-btn.active     { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }

/* Filtrage des grilles multilingues selon la langue active */
.lang-item { display: flex; align-items: baseline; gap: 4px; }
html[data-lang] .lang-item                     { display: none; }
html[data-lang="fr"] .lang-item[data-lang="fr"],
html[data-lang="en"] .lang-item[data-lang="en"],
html[data-lang="de"] .lang-item[data-lang="de"],
html[data-lang="es"] .lang-item[data-lang="es"],
html[data-lang="it"] .lang-item[data-lang="it"],
html[data-lang="nl"] .lang-item[data-lang="nl"],
html[data-lang="pt"] .lang-item[data-lang="pt"] { display: flex; }

/* ── Labels multilingues ─────────────────────────────────────────────────── */
/* Défaut : afficher FR */
.ml-label { display: none; }
.ml-label[data-lang="fr"] { display: inline; }

/* Quand une langue est sélectionnée */
html[data-lang]     .ml-label                   { display: none; }
html[data-lang="fr"] .ml-label[data-lang="fr"]  { display: inline; }
html[data-lang="en"] .ml-label[data-lang="en"]  { display: inline; }
html[data-lang="de"] .ml-label[data-lang="de"]  { display: inline; }
html[data-lang="es"] .ml-label[data-lang="es"]  { display: inline; }
html[data-lang="it"] .ml-label[data-lang="it"]  { display: inline; }
html[data-lang="nl"] .ml-label[data-lang="nl"]  { display: inline; }
html[data-lang="pt"] .ml-label[data-lang="pt"]  { display: inline; }

/* Idem pour les blocs (comment, prop-label en bloc) */
.ml-block { display: none; }
.ml-block[data-lang="fr"] { display: block; }
html[data-lang]     .ml-block                   { display: none; }
html[data-lang="fr"] .ml-block[data-lang="fr"]  { display: block; }
html[data-lang="en"] .ml-block[data-lang="en"]  { display: block; }
html[data-lang="de"] .ml-block[data-lang="de"]  { display: block; }
html[data-lang="es"] .ml-block[data-lang="es"]  { display: block; }
html[data-lang="it"] .ml-block[data-lang="it"]  { display: block; }
html[data-lang="nl"] .ml-block[data-lang="nl"]  { display: block; }
html[data-lang="pt"] .ml-block[data-lang="pt"]  { display: block; }

/* Comment sous le titre */
.describe-comment {
    font-size: 14px;
    color: var(--text-muted);
    font-style: italic;
    margin: 10px 0 16px;
    line-height: 1.6;
}

/* Label humain dans les tables de propriétés */
.prop-label-ml {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 2px;
}

/* ── Badge occurrences ───────────────────────────────────────────────────── */
.usage-badge {
    display: inline-flex;
    align-items: center;
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
    border-radius: 12px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    margin-left: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Badge type dans les résultats de recherche (obj / data) */
.search-result-kind {
    display: inline-block;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    background: #e8f4fd;
    color: #1565c0;
    border-radius: 3px;
    padding: 0 5px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Individus du thésaurus ──────────────────────────────────────────────── */
.individuals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
}
.individual-card {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s, background .15s;
}
.individual-card:hover  { border-color: var(--accent-2); background: var(--tag-bg); }
.individual-label       { font-size: 13px; font-weight: 500; }
.individual-uri {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Individus frères (page d'un individu) ───────────────────────────────── */
/* En-tête de la grille des autres individus de la même classe. Rappelle
   à l'utilisateur la classe de rattachement avec un lien direct pour
   remonter, et compte les frères à droite façon badge. */
.siblings-heading {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 400;
    color: var(--text);
    margin: 28px 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.siblings-parent-link {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-2);
    text-decoration: none;
    padding: 2px 10px;
    background: var(--tag-bg);
    border: 1px solid transparent;
    border-radius: 12px;
    transition: border-color .15s, background .15s;
}
.siblings-parent-link:hover {
    border-color: var(--accent-2);
    text-decoration: underline;
}

/* ── Utilisée via (hier-section) ─────────────────────────────────────────── */
.used-by-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.used-by-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.used-by-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    flex-wrap: wrap;
}
.used-by-domain {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Éléments dépréciés ──────────────────────────────────────────────────── */
.deprecated-badge {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    background: #fdecea;
    color: #c62828;
    border: 1px solid #f5c6c6;
    border-radius: 4px;
    padding: 2px 8px;
}
tr.prop-deprecated {
    background: #fff8f8;
}
tr.prop-deprecated th,
tr.prop-deprecated td {
    color: #b71c1c;
    opacity: 0.75;
}
tr.prop-deprecated .prop-uri {
    color: #e57373;
}

/* Badge deprecated inline dans les lignes de propriétés */
.deprecated-badge-inline {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    background: #fdecea;
    color: #c62828;
    border: 1px solid #f5c6c6;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── Bloc API DATAtourisme ───────────────────────────────────────────────── */
.api-snippet-wrap {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg);
}
.api-snippet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--tag-bg);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 8px;
}
.api-snippet-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.api-snippet-links {
    display: flex;
    gap: 8px;
}
.api-link-btn {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    background: var(--bg);
    transition: background .15s;
}
.api-link-btn:hover    { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.api-link-key          { border-color: #2e7d32; color: #2e7d32; }
.api-link-key:hover    { background: #2e7d32; color: #fff; }
.api-url-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.api-method {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #1565c0;
    border-radius: 3px;
    padding: 2px 7px;
    flex-shrink: 0;
}
.api-url {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text);
    word-break: break-all;
    flex: 1;
}
.api-copy-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 7px;
    font-size: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.api-copy-btn:hover { background: var(--tag-bg); }
.api-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
}
.api-tab {
    font-family: var(--mono);
    font-size: 12px;
    padding: 6px 16px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: color .15s;
}
.api-tab:hover  { color: var(--text); }
.api-tab.active { color: var(--accent-2); border-bottom-color: var(--accent-2); font-weight: 600; }
.api-code {
    margin: 0;
    padding: 14px 16px;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.7;
    color: var(--text);
    background: #1e1e1e;
    color: #d4d4d4;
    overflow-x: auto;
    white-space: pre;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONNECTEURS ARBORESCENTS ├─ SUR LA SECTION PRINCIPALE DES PROPRIÉTÉS
   Rattache visuellement chaque propriété à la ressource décrite.
   Cible uniquement .prop-section.props-main-section (le listing des triplets
   réels), pas les sections hiérarchie / applicable / catalog.
   ═══════════════════════════════════════════════════════════════════════════ */

.props-main-section {
    position: relative;
    padding-left: 28px;
    margin-left: 12px;
}
.props-main-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: var(--border);
    border-radius: 1px;
}
.props-main-section h2 {
    position: relative;
}
.props-main-section h2::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    width: 22px;
    height: 2px;
    background: var(--border);
}
.props-main-section .prop-table {
    position: relative;
}
.props-main-section .prop-table tr > th {
    position: relative;
}
.props-main-section .prop-table tr > th::before {
    content: '├─';
    position: absolute;
    left: -30px;
    top: 10px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1;
    letter-spacing: -1px;
    opacity: 0.55;
    pointer-events: none;
}
.props-main-section .prop-table tr:last-child > th::before {
    content: '└─';
}

@media (max-width: 600px) {
    .props-main-section {
        padding-left: 18px;
        margin-left: 6px;
    }
    .props-main-section h2::before { left: -18px; width: 14px; }
    .props-main-section .prop-table tr > th::before { left: -20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHÉMA TRIPLET S → P → O DANS "UTILISÉE VIA"
   Couleurs par typologie RDF :
     • type-class      → bleu   (owl:Class)
     • type-objprop    → violet (owl:ObjectProperty)
     • type-dataprop   → rose   (owl:DatatypeProperty / AnnotationProperty)
     • type-individual → olive  (owl:NamedIndividual / thésaurus kb:)
     • type-datatype   → gris   (xsd:*)
   La ressource courante reçoit .triplet-current → bordure noire.
   ═══════════════════════════════════════════════════════════════════════════ */

.triplet-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
}
.triplet-row + .triplet-row {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.triplet-node {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    text-decoration: none;
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    box-sizing: border-box;
    /* overflow: hidden sur le conteneur pour que les enfants en ellipsis
       respectent la largeur fixe du nœud (sinon flex-child déborde). */
    overflow: hidden;
    transition: background .15s, border-color .15s, transform .15s;
}
a.triplet-node:hover { transform: translateY(-1px); }

.triplet-label {
    font-size: 13px;
    line-height: 1.3;
    /* Le label humain peut s'étaler sur 2 lignes (labels multilingues longs
       comme "a pour illustration principale"), mais pas plus : au-delà on
       tronque avec ellipsis. -webkit-line-clamp est supporté par tous les
       navigateurs modernes (la propriété standard line-clamp est en cours). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.triplet-uri {
    font-size: 10px;
    font-family: var(--mono);
    margin-top: 2px;
    opacity: 0.85;
    /* Troncature propre : les URI longues (ex: core:hasCommunicationContact)
       sont tronquées avec ellipsis pour préserver l'alignement des nœuds.
       L'URI complète reste accessible via le title natif et la ligne label
       au-dessus affiche le libellé humain. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.triplet-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 18px;
    font-weight: 400;
    user-select: none;
    padding: 0 2px;
    opacity: 0.5;
}

/* ── Couleurs par typologie ──────────────────────────────────────────────── */
.triplet-node.type-class {
    background: #eef4fa;
    border-color: #b8cde0;
}
.triplet-node.type-class .triplet-label { color: #1e4567; font-weight: 500; }
.triplet-node.type-class .triplet-uri   { color: #5881a6; }
a.triplet-node.type-class:hover { background: #dfebf5; border-color: #8eaecb; }

.triplet-node.type-objprop {
    background: #f3ecfa;
    border-color: #d4b8f0;
}
.triplet-node.type-objprop .triplet-label { color: #5b2989; font-style: italic; font-weight: 500; }
.triplet-node.type-objprop .triplet-uri   { color: #8b65b5; }
a.triplet-node.type-objprop:hover { background: #e9dcf5; border-color: #b896dd; }

.triplet-node.type-dataprop {
    background: #fbecf2;
    border-color: #f0b8d0;
}
.triplet-node.type-dataprop .triplet-label { color: #8b2555; font-style: italic; font-weight: 500; }
.triplet-node.type-dataprop .triplet-uri   { color: #b56590; }
a.triplet-node.type-dataprop:hover { background: #f7dce7; border-color: #e899b8; }

.triplet-node.type-individual {
    background: #f0f5e1;
    border-color: #c5d693;
}
.triplet-node.type-individual .triplet-label { color: #4a5e18; font-weight: 500; }
.triplet-node.type-individual .triplet-uri   { color: #7a8c45; }
a.triplet-node.type-individual:hover { background: #e4eccb; border-color: #a8bd6f; }

.triplet-node.type-datatype {
    background: #f0f0f0;
    border-color: #ccc;
}
.triplet-node.type-datatype .triplet-label {
    color: #555;
    font-family: var(--mono);
    font-size: 12px;
}
.triplet-node.type-datatype .triplet-uri { color: #888; }

/* Prédicats structurels RDF (rdfs:subClassOf, rdf:type, etc.) — gris discret */
.triplet-node.type-meta {
    background: #f5f2ec;
    border-color: #d8d2c4;
}
.triplet-node.type-meta .triplet-label {
    color: var(--text-muted);
    font-style: italic;
    font-size: 12px;
}
.triplet-node.type-meta .triplet-uri {
    color: var(--text-muted);
    opacity: 0.7;
}

.triplet-node.triplet-anon {
    background: var(--bg);
    border-color: var(--border);
    border-style: dashed;
}
.triplet-node.triplet-anon .triplet-label { color: var(--text-muted); font-style: italic; }
.triplet-node.triplet-anon .triplet-uri   { color: var(--text-muted); opacity: 0.6; }

/* ── Mise en évidence de la ressource courante ───────────────────────────
   Même règle pour le nœud Objet dans "Utilisée via" et la ligne "current"
   dans l'arborescence "Position dans l'ontologie".                         */
.triplet-node.triplet-current,
.hier-row.hier-current {
    border: 2px solid var(--text) !important;
    box-shadow: 0 0 0 1px var(--text), 0 3px 8px rgba(0, 0, 0, 0.14);
}

/* ── Layout groupé : sujet factorisé à gauche, arcs à droite ──────────────
   Utilisé pour la section "Propriétés propres" afin de ne pas répéter
   le nœud courant sur chaque ligne.                                        */
.triplet-group {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-top: 4px;
}
.triplet-group-anchor {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.triplet-group-anchor > .triplet-node {
    align-self: stretch;
    justify-content: flex-start;
}
.triplet-group-arcs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.triplet-arc {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex-wrap: wrap;
}
.triplet-arc.triplet-deprecated {
    opacity: 0.55;
}
.triplet-arc.triplet-deprecated::after {
    content: 'deprecated';
    font-size: 10px;
    font-family: var(--mono);
    color: #c62828;
    background: #fdecea;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 4px;
}

/* ── Cheminement en L (depth=2) : row 1 linéaire, row 2 subordonnée ── */
/* Paire indivisible flèche+nœud : reste sur la même ligne au wrap du parent */
.triplet-step {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
}
/* Row 2 : subordonnée à row 1 (le mid est la "racine" de cette sous-branche).
   Marge gauche + bordure verticale pour signaler la hiérarchie. */
.triplet-arc-sub {
    margin-left: 210px;
    padding-left: 14px;
    padding-top: 4px;
    border-left: 2px solid var(--border);
    align-items: flex-end;
    flex-direction: column;
    width: fit-content;
}
/* Flèche verticale ↓ : couleur neutre */
.triplet-arrow-down {
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .triplet-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .triplet-arrow {
        transform: rotate(90deg);
        margin-left: 24px;
        padding: 2px 0;
    }
    .triplet-node {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
    .triplet-group {
        flex-direction: column;
        gap: 6px;
    }
    .triplet-arc {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* ── Légende colorimétrique des typologies RDF ──────────────────────────── */
.triplet-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}
.triplet-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.triplet-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid transparent;
    flex-shrink: 0;
}
.triplet-legend-swatch.type-class      { background: #eef4fa; border-color: #b8cde0; }
.triplet-legend-swatch.type-objprop    { background: #f3ecfa; border-color: #d4b8f0; }
.triplet-legend-swatch.type-dataprop   { background: #fbecf2; border-color: #f0b8d0; }
.triplet-legend-swatch.type-individual { background: #f0f5e1; border-color: #c5d693; }
.triplet-legend-swatch.type-datatype   { background: #f0f0f0; border-color: #ccc;    }
.triplet-legend-swatch.type-meta       { background: #f5f2ec; border-color: #d8d2c4; }
.triplet-legend-swatch.is-current {
    background: var(--surface);
    border: 2px solid var(--text);
    width: 12px;
    height: 12px;
}
.triplet-legend-item code {
    font-family: var(--mono);
    font-size: 10px;
    opacity: 0.75;
    padding: 0 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MENU DE NAVIGATION INTERNE
   Placé sous .describe-header, liste les sections présentes sur la page.
   ═══════════════════════════════════════════════════════════════════════════ */
.describe-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.describe-nav-link:hover {
    background: var(--tag-bg);
    border-color: var(--accent-2);
    color: var(--accent-2);
    transform: translateY(-1px);
}
.describe-nav-icon {
    font-size: 13px;
    line-height: 1;
}
.describe-nav-label {
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESCRIBE-SHORTCUTS — Barre de raccourcis inter-ressources, tout en haut.
   Navigue vers les 4 racines DATAtourisme (ontologie, ressources, thésaurus,
   reviews). Visuellement détachée de .describe-nav qui sert la navigation
   intra-page (scroll vers les sections).
   ═══════════════════════════════════════════════════════════════════════════ */
.describe-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.describe-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.describe-shortcut:hover {
    background: var(--tag-bg);
    border-color: var(--accent-2);
    color: var(--accent-2);
    transform: translateY(-1px);
}
.describe-shortcut-icon {
    font-size: 13px;
    line-height: 1;
}
.describe-shortcut-label {
    white-space: nowrap;
    font-weight: 500;
}
/* Préfixe technique (core: / kb:) — en police mono, petit, discret.
   Sert d'ancrage pour les utilisateurs techniques qui lisent du TTL. */
.describe-shortcut-prefix {
    font-family: var(--mono);
    font-size: 11px;
    opacity: 0.7;
    padding-left: 2px;
}
/* Bouton de la racine courante — rappel de contexte, cliquable pour retour.
   Fond accentué + bordure pleine pour marquer visuellement l'ancrage. */
.describe-shortcut-current {
    background: var(--accent-2);
    border-color: var(--accent-2);
    color: #fff;
}
.describe-shortcut-current:hover {
    /* Hover discret : on reste sur l'accent mais on signale l'interactivité
       avec une légère élévation. Garde la lisibilité du contraste blanc. */
    background: var(--accent-2);
    border-color: var(--accent-2);
    color: #fff;
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.describe-shortcut-current .describe-shortcut-prefix {
    opacity: 0.85;
}
/* Lien externe (dépôt GitLab) — poussé à droite via margin-left:auto pour
   équilibrer la nav. Fond neutre pour se distinguer des raccourcis graphes. */
.describe-shortcut-external {
    margin-left: auto;
    background: var(--tag-bg);
}
.describe-shortcut-external:hover {
    background: #fff;
    border-color: var(--accent-2);
    color: var(--accent-2);
    transform: translateY(-1px);
}
.describe-shortcut-external .describe-shortcut-prefix {
    font-family: var(--sans);
    font-size: 11px;
    opacity: 0.75;
}
@media (max-width: 600px) {
    /* Sur mobile, le lien externe passe sous les raccourcis (wrap naturel) */
    .describe-shortcut-external {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 600px) {
    .describe-shortcut {
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* Offset pour que le scroll-to-anchor passe sous nav + describe-nav stackées */
[id^="sec-"] {
    scroll-margin-top: 130px;
}

@media (max-width: 600px) {
    .describe-nav {
        gap: 5px;
    }
    .describe-nav-link {
        padding: 4px 9px;
        font-size: 11px;
    }
    .describe-nav-label {
        white-space: normal;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   EXEMPLES POI (section "Dans les données")
   Chaque POI est présenté comme un schéma triplet (POI → type/loc/… → valeur)
   ═══════════════════════════════════════════════════════════════════════════ */
.example-poi {
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.example-poi-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.example-poi-title {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--text);
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}
.example-poi-official {
    font-size: 11px;
    font-family: var(--mono);
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.example-poi-official:hover {
    color: var(--accent-2);
}
.example-poi-satellite-badge {
    font-size: 10px;
    font-family: var(--mono);
    font-weight: 600;
    color: #4a5e18;
    background: #f0f5e1;
    border: 1px solid #c5d693;
    border-radius: 10px;
    padding: 1px 8px;
    white-space: nowrap;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
.example-triplets {
    /* Le used-by-wrap par défaut a border-top + padding-top — pas utile ici */
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.example-poi-comment {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
}