/* ==================================================================== */
/* Gabarit « Article Documentation » v2 — série d'articles JSON          */
/* ==================================================================== */
/* Source : Claude Design, projet « Gabarit Article Documentation »      */
/* (2026-09-14). Activé par la classe .tb2-v2 sur .tb2-datamodel : les   */
/* articles non convertis gardent l'habillage de template.css.           */
/*                                                                       */
/* Principes :                                                           */
/*   - la prose est bornée (82ch), les cartes (code, figures) prennent   */
/*     la grille ;                                                       */
/*   - une section = titre numéroté, prose à gauche, colonne de code     */
/*     collante à droite, figure SVG en pleine largeur sous les deux ;   */
/*   - sommaire « Sur cette page » en 3e colonne dès 1400px (construit   */
/*     par template.js), navigation masquée sous 1200px, une colonne     */
/*     sous 900px.                                                       */
/*                                                                       */
/* Markup attendu (inchangé par rapport à template.css, sauf .tb2-v2) :  */
/*   <div class="tb2-datamodel tb2-v2" data-group="…">                   */
/*     <header><span class="tag">…</span><h2>…</h2></header>             */
/*     <div class="tb2-section">  (chapô : .col-12.text > p.tb2-lede)    */
/*     <div class="tb2-section">                                         */
/*       <h3 class="tb2-section-title">Titre sans numéro</h3>            */
/*       <div class="row g-4 align-items-start">                         */
/*         <div class="col-lg-6 text">…</div>                            */
/*         <div class="col-lg-6 code"><p class="tb2-code-label">…</p>    */
/*                                    <pre class="language-…">…</pre>…   */
/*       </div>                                                          */
/*       <div class="row g-4"><div class="col-12 text">                  */
/*         <figure class="tb2-figure-plate">…</figure></div></div>       */
/*     </div>                                                            */
/*     <nav class="pager"><a rel="prev">Titre</a><a rel="next">…</a>     */
/* ==================================================================== */

/* — Grille de page : navigation | article | sommaire ------------------ */
@media (min-width: 1400px) {
    .tb2-main-row.has-toc {
        grid-template-columns: 240px minmax(0, 1fr) 176px;
    }
}
.tb2-toc {
    position: sticky;
    top: calc(var(--tb2-header-offset, 100px) + 1rem);
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding-left: 1rem;
    border-left: 1px solid var(--tb2-border, #E5E7EB);
    font-family: var(--tb2-font-main);
}
@media (max-width: 1399.98px) {
    .tb2-toc { display: none; }
}
.tb2-toc__title {
    margin: 0 0 .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6B7280;
}
.tb2-toc a {
    position: relative;
    display: flex;
    gap: .5rem;
    padding: .25rem 0;
    font-size: .8rem;
    line-height: 1.35;
    color: #6B7280;
    text-decoration: none;
    transition: color .12s;
}
.tb2-toc a::before {
    content: "";
    position: absolute;
    left: calc(-1rem - 1px);
    top: .35rem;
    bottom: .35rem;
    width: 2px;
    border-radius: 2px;
    background: transparent;
}
.tb2-toc a:hover { color: var(--tb2-primary); text-decoration: none; }
.tb2-toc a.is-active { color: var(--tb2-primary); font-weight: 600; }
.tb2-toc a.is-active::before { background: var(--tb2-primary); }
.tb2-toc .tb2-toc__n {
    flex: none;
    font-variant-numeric: tabular-nums;
    color: #9CA3AF;
}
.tb2-toc .tb2-toc__top {
    margin-top: .75rem;
    font-size: .75rem;
}

/* — Article : en-tête -------------------------------------------------- */
.tb2-datamodel.tb2-v2 {
    counter-reset: tb2sec;
}
.tb2-datamodel.tb2-v2 > header {
    max-width: 720px;
    padding-bottom: 0;
    margin-bottom: 1rem;
    border-bottom: none;
}
.tb2-datamodel.tb2-v2 > header .tag {
    border-radius: 999px;
    padding: .2rem .7rem;
    margin-bottom: .9rem;
    font-size: .7rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.tb2-datamodel.tb2-v2 > header > h1,
.tb2-datamodel.tb2-v2 > header > h2 {
    font-size: 1.65rem;
    color: var(--tb2-primary);
    text-wrap: pretty;
}
.tb2-datamodel.tb2-v2 .text > p.tb2-lede {
    max-width: 720px;
    font-size: 1.05rem;
    font-weight: 400;
    color: #4B5563;
    line-height: 1.7;
}
.tb2-datamodel.tb2-v2 .tb2-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .75rem;
    margin: .25rem 0 0;
    font-size: .8rem;
    color: #6B7280;
}
.tb2-datamodel.tb2-v2 .tb2-meta__dot { opacity: .5; }

/* — Sections ------------------------------------------------------------ */
.tb2-datamodel.tb2-v2 .tb2-section {
    padding-bottom: 2.75rem;
}
.tb2-datamodel.tb2-v2 .tb2-section + .tb2-section {
    margin-top: 0;
}
.tb2-datamodel.tb2-v2 .tb2-section-title {
    counter-increment: tb2sec;
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin: 0 0 1rem;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tb2-dark);
    /* En-tête collant du site : l'ancre du sommaire ne se cache pas dessous. */
    scroll-margin-top: calc(var(--tb2-header-offset, 100px) + 1rem);
}
.tb2-datamodel.tb2-v2 .tb2-section-title::before {
    content: counter(tb2sec, decimal-leading-zero);
    flex: none;
    padding: .1rem .5rem;
    border: 1px solid #C7D7F5;
    border-radius: 6px;
    background: var(--tb2-tint, #F0F4FF);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--tb2-primary);
}

/* La rangée Bootstrap devient une grille : prose | code (collant).
   Une rangée sans colonne code (chapô, figure, conclusion) reste en
   colonne unique. */
.tb2-datamodel.tb2-v2 .tb2-section > .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    margin: 0;
}
.tb2-datamodel.tb2-v2 .tb2-section > .row.align-items-start {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 40%);
}
.tb2-datamodel.tb2-v2 .tb2-section > .row > [class*="col-"] {
    flex: none;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    margin: 0;
}
.tb2-datamodel.tb2-v2 .tb2-section > .row > .code {
    position: sticky;
    top: calc(var(--tb2-header-offset, 100px) + 1rem);
}
@media (max-width: 899.98px) {
    .tb2-datamodel.tb2-v2 .tb2-section > .row.align-items-start {
        grid-template-columns: minmax(0, 1fr);
    }
    .tb2-datamodel.tb2-v2 .tb2-section > .row > .code {
        position: static;
    }
}

/* — Prose --------------------------------------------------------------- */
.tb2-datamodel.tb2-v2 .tb2-section .text > p,
.tb2-datamodel.tb2-v2 .tb2-section .text > p:first-child {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    color: #2B2F3D;
    margin: 0 0 1rem;
    text-wrap: pretty;
}
.tb2-datamodel.tb2-v2 .tb2-section .text > ul,
.tb2-datamodel.tb2-v2 .tb2-section .text > ol {
    font-size: 15px;
    line-height: 1.75;
    color: #2B2F3D;
}
.tb2-datamodel.tb2-v2 .text strong {
    font-weight: 600;
    color: var(--tb2-dark);
}

/* — Encadrés (aside) : info par défaut, .warn pour l'avertissement ------ */
.tb2-datamodel.tb2-v2 .text > aside {
    position: relative;
    margin: 1.25rem 0 0;
    padding: .9rem 1.1rem .9rem 2.75rem;
    border: 1px solid #C7D7F5;
    border-radius: 8px;
    background: var(--tb2-tint, #F0F4FF);
    font-size: .86rem;
    line-height: 1.6;
    color: #1E3A8A;
}
.tb2-datamodel.tb2-v2 .text > aside::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230047AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") no-repeat center / contain;
}
.tb2-datamodel.tb2-v2 .text > aside strong {
    font-weight: 700;
    color: var(--tb2-primary);
}
.tb2-datamodel.tb2-v2 .text > aside.warn {
    border-color: #FED7AA;
    background: #FFF7ED;
    color: #7C2D12;
}
.tb2-datamodel.tb2-v2 .text > aside.warn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
.tb2-datamodel.tb2-v2 .text > aside.warn strong { color: #9A3412; }

/* — Cartes de code : thème clair du gabarit ----------------------------- */
/* En-tête (libellé + badge de langage) + bloc Prism sur fond très clair.
   Les couleurs de jetons surchargent le thème sombre de prism-telebib2.css
   pour ces seules cartes. Prism embarqué : json, javascript, python — les
   blocs Shell et C# restent en texte brut (pas de jetons).                 */
.tb2-datamodel.tb2-v2 .code > p.tb2-code-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .5rem .85rem;
    border: 1px solid var(--tb2-border, #E5E7EB);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: #FAFBFD;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6B7280;
}
.tb2-datamodel.tb2-v2 .code > p.tb2-code-label::after {
    flex: none;
    padding: .1rem .4rem;
    border-radius: 4px;
    background: var(--tb2-tint, #F0F4FF);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tb2-primary);
}
.tb2-datamodel.tb2-v2 .code > p.tb2-code-label:has(+ pre.language-json)::after       { content: "JSON"; }
.tb2-datamodel.tb2-v2 .code > p.tb2-code-label:has(+ pre.language-bash)::after       { content: "Shell"; }
.tb2-datamodel.tb2-v2 .code > p.tb2-code-label:has(+ pre.language-python)::after     { content: "Python"; }
.tb2-datamodel.tb2-v2 .code > p.tb2-code-label:has(+ pre.language-csharp)::after     { content: "C#"; }
.tb2-datamodel.tb2-v2 .code > p.tb2-code-label:has(+ pre.language-javascript)::after { content: "JavaScript"; }
.tb2-datamodel.tb2-v2 .code > p.tb2-code-label:has(+ pre.language-edifact)::after    { content: "EDIFACT"; }
.tb2-datamodel.tb2-v2 .code > p.tb2-code-label:has(+ pre.language-output)::after     { content: "Résultat"; }

/* Tout bloc Prism de l'article (colonne code ou flux du texte). */
.tb2-datamodel.tb2-v2 pre[class*="language-"] {
    padding: .85rem 1rem;
    border: 1px solid var(--tb2-border, #E5E7EB);
    border-radius: 10px;
    background: #F8FAFD;
    box-shadow: none;
    color: var(--tb2-dark, #1A1D29);
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.6;
}
.tb2-datamodel.tb2-v2 pre[class*="language-"] > code {
    color: inherit;
    font-weight: 500;
}
/* Sous un libellé : le bloc ferme la carte. */
.tb2-datamodel.tb2-v2 .code > pre[class*="language-"] {
    margin: 0;
    border-radius: 0 0 10px 10px;
}
/* Dans le flux du texte, sans libellé : carte autonome, badge d'angle
   de Prism repris sur la palette claire. */
.tb2-datamodel.tb2-v2 .text > pre[class*="language-"] {
    margin: 1rem 0 1.25rem;
}
.tb2-datamodel.tb2-v2 .text > pre[class*="language-"]::after {
    border-radius: 0 10px 0 6px;
    background: var(--tb2-tint, #F0F4FF);
    color: var(--tb2-primary);
}
/* Le badge d'angle du thème Prism est remplacé par celui de l'en-tête. */
.tb2-datamodel.tb2-v2 .code > p.tb2-code-label + pre[class*="language-"]::after {
    display: none;
}
/* Espacement entre deux cartes seulement : le libellé colle à son bloc. */
.tb2-datamodel.tb2-v2 .code > pre + p.tb2-code-label,
.tb2-datamodel.tb2-v2 .code > pre + pre,
.tb2-datamodel.tb2-v2 .code > pre + figure {
    margin-top: 1rem;
}

/* Jetons, sur la palette du gabarit : clés et mots-clés en bleu, chaînes
   en sarcelle, nombres en orange, ponctuation et commentaires en gris. */
.tb2-datamodel.tb2-v2 .token.comment,
.tb2-datamodel.tb2-v2 .token.prolog,
.tb2-datamodel.tb2-v2 .token.doctype,
.tb2-datamodel.tb2-v2 .token.cdata {
    color: #9CA3AF;
    font-style: normal;
}
.tb2-datamodel.tb2-v2 .token.punctuation,
.tb2-datamodel.tb2-v2 .token.operator {
    color: #6B7280;
}
.tb2-datamodel.tb2-v2 .token.property,
.tb2-datamodel.tb2-v2 .token.tag,
.tb2-datamodel.tb2-v2 .token.symbol,
.tb2-datamodel.tb2-v2 .token.attr-name,
.tb2-datamodel.tb2-v2 .token.keyword,
.tb2-datamodel.tb2-v2 .token.important {
    color: var(--tb2-primary, #0047AB);
}
.tb2-datamodel.tb2-v2 .token.string,
.tb2-datamodel.tb2-v2 .token.char,
.tb2-datamodel.tb2-v2 .token.attr-value,
.tb2-datamodel.tb2-v2 .token.inserted {
    color: #0E7490;
}
.tb2-datamodel.tb2-v2 .token.number,
.tb2-datamodel.tb2-v2 .token.constant,
.tb2-datamodel.tb2-v2 .token.boolean,
.tb2-datamodel.tb2-v2 .token.null,
.tb2-datamodel.tb2-v2 .token.regex,
.tb2-datamodel.tb2-v2 .token.deleted {
    color: #C2410C;
}
.tb2-datamodel.tb2-v2 .token.function,
.tb2-datamodel.tb2-v2 .token.class-name,
.tb2-datamodel.tb2-v2 .token.builtin,
.tb2-datamodel.tb2-v2 .token.variable,
.tb2-datamodel.tb2-v2 .token.parameter {
    color: var(--tb2-dark, #1A1D29);
}

/* — Figures (planches SVG) ---------------------------------------------- */
.tb2-datamodel.tb2-v2 .text > figure.tb2-figure-plate {
    max-width: 80%;
    margin: 1.75rem auto 0;
}
@media (max-width: 899.98px) {
    .tb2-datamodel.tb2-v2 .text > figure.tb2-figure-plate { max-width: 100%; }
}
/* Ombre portée sous la planche ; le SVG porte déjà son cadre et ses coins. */
.tb2-datamodel.tb2-v2 .text > figure.tb2-figure-plate img {
    box-shadow: var(--tb2-shadow, 0 4px 20px rgba(0, 0, 0, .08));
}
.tb2-datamodel.tb2-v2 .text > figure.tb2-figure-plate figcaption {
    margin-top: .6rem;
    padding: 0 .25rem;
    font-size: .82rem;
    font-style: normal;
    text-align: left;
    color: #6B7280;
}

/* — Pagination précédent / suivant en cartes ---------------------------- */
.tb2-datamodel.tb2-v2 .pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--tb2-border, #E5E7EB);
}
.tb2-datamodel.tb2-v2 .pager a {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--tb2-border, #E5E7EB);
    border-radius: 10px;
    background: #fff;
    font-size: .95rem;
    font-weight: 600;
    color: var(--tb2-primary);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.tb2-datamodel.tb2-v2 .pager a::before {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6B7280;
}
.tb2-datamodel.tb2-v2 .pager a[rel="prev"]::before { content: "← Précédent"; }
.tb2-datamodel.tb2-v2 .pager a[rel="next"]::before { content: "Suivant →"; }
.tb2-datamodel.tb2-v2:lang(nl) .pager a[rel="prev"]::before { content: "← Vorige"; }
.tb2-datamodel.tb2-v2:lang(nl) .pager a[rel="next"]::before { content: "Volgende →"; }
.tb2-datamodel.tb2-v2 .pager a[rel="next"] {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
}
.tb2-datamodel.tb2-v2 .pager a:hover {
    border-color: var(--tb2-primary);
    background: var(--tb2-tint, #F0F4FF);
    text-decoration: none;
}
@media (max-width: 599.98px) {
    .tb2-datamodel.tb2-v2 .pager { grid-template-columns: minmax(0, 1fr); }
    .tb2-datamodel.tb2-v2 .pager a[rel="next"] { grid-column: auto; }
}