/*
 * Mise en forme des articles produits par Content Lab v2, côté public.
 *
 * Le plugin produit du balisage riche — bloc « À retenir », encadrés,
 * tableaux — et ne livrait AUCUNE feuille pour l'habiller : le lecteur voyait
 * une liste à puces ordinaire là où il devait voir un encadré, et un tableau
 * sans bordures. Le contenu était bon, la forme absente.
 *
 * Tout est écrit en variables CSS avec un repli : un thème qui définit ses
 * propres couleurs les impose, et un thème qui n'en définit aucune obtient une
 * version sobre qui ne jure avec rien. On ne peut pas deviner la palette d'un
 * site client, on peut lui laisser la main.
 *
 * Aucune règle ne cible une balise nue (p, ul, table sans classe) : cette
 * feuille se charge sur les articles du plugin, elle n'a pas à réécrire le
 * thème autour.
 */

.cl-takeaway,
.entry-content .cl-takeaway {
    --cl-accent: var(--clv2-accent, currentColor);

    margin: 2em 0;
    padding: 1.25em 1.5em;
    border-left: 4px solid var(--cl-accent);
    border-radius: 0 4px 4px 0;
    background: var(--clv2-takeaway-bg, rgba(0, 0, 0, .035));
}

.cl-takeaway > p:first-child {
    margin: 0 0 .6em;
    font-size: .8em;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cl-takeaway ul {
    margin: 0;
    padding-left: 1.2em;
}

.cl-takeaway li + li {
    margin-top: .45em;
}

/* Encadrés : un conseil et un avertissement doivent se distinguer d'un coup
   d'oeil, sans dépendre de la couleur seule — le liseré et le libellé portent
   l'information pour un lecteur daltonien. */
.callout,
.entry-content blockquote.callout {
    margin: 2em 0;
    padding: 1em 1.25em;
    border: 1px solid var(--clv2-callout-border, rgba(0, 0, 0, .12));
    border-left-width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--clv2-callout-bg, rgba(0, 0, 0, .02));
    font-style: normal;
}

.callout > :first-child { margin-top: 0; }
.callout > :last-child  { margin-bottom: 0; }

.callout::before {
    display: block;
    margin-bottom: .4em;
    font-size: .75em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.callout-tip {
    border-left-color: var(--clv2-tip, #2d7a4f);
}

.callout-tip::before {
    content: "Conseil";
    color: var(--clv2-tip, #2d7a4f);
}

.callout-warning {
    border-left-color: var(--clv2-warning, #a8500f);
}

.callout-warning::before {
    content: "À savoir";
    color: var(--clv2-warning, #a8500f);
}

/* Tableaux : des bordures, un en-tête lisible, et un défilement propre sur
   mobile. Un tableau large qui déborde casse la page entière ; ici il défile
   dans sa propre boîte. */
.entry-content table,
.cl-article table {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin: 2em 0;
    border-collapse: collapse;
    font-size: .95em;
}

.entry-content table thead th,
.cl-article table thead th {
    border-bottom: 2px solid var(--clv2-table-rule, rgba(0, 0, 0, .25));
    text-align: left;
    font-weight: 700;
}

.entry-content table th,
.entry-content table td,
.cl-article table th,
.cl-article table td {
    padding: .6em .8em;
    border-bottom: 1px solid var(--clv2-table-rule-light, rgba(0, 0, 0, .1));
    vertical-align: top;
}

.entry-content table tbody tr:last-child th,
.entry-content table tbody tr:last-child td {
    border-bottom: 0;
}

/* Citation hors encadré : un filet, pas un fond, pour ne pas la confondre avec
   un encadré de conseil. */
.entry-content blockquote:not(.callout) {
    margin: 2em 0;
    padding-left: 1.25em;
    border-left: 3px solid var(--clv2-quote-rule, rgba(0, 0, 0, .18));
    font-style: italic;
}

@media (prefers-color-scheme: dark) {
    .cl-takeaway  { background: var(--clv2-takeaway-bg, rgba(255, 255, 255, .06)); }
    .callout      { background: var(--clv2-callout-bg, rgba(255, 255, 255, .04)); border-color: var(--clv2-callout-border, rgba(255, 255, 255, .16)); }
}