/* ---------------------------------------------------------------
   AllBookHq - calque de theme pose sur Bootstrap 5.3.
   Charge APRES bootstrap.min.css, jamais avant.

   Bootstrap ne se recolore pas en redefinissant --bs-primary : ses
   composants ecrivent leurs teintes en dur a la compilation, et
   .btn-primary porte litteralement #0d6efd. Ce fichier repose donc
   les variables de composant a partir de --brand, que la classe
   App\Core\Brand derive du reglage « Couleur principale » et injecte
   sur :root dans chaque page.

   Ce qui est surcharge ici a ete releve dans la feuille de Bootstrap,
   non devine : tous les selecteurs qui codent #0d6efd, plus les deux
   etats de focus qui codent #86b7fe.
   --------------------------------------------------------------- */

/* ================================================================
   1. Identite : la marque, puis le reste de la palette
   ================================================================ */

:root {
    /* Repli si Brand n'a pas pose ses variables -- un gabarit oublie,
       une page d'erreur servie avant la configuration. */
    --brand: #4f46e5;
    --brand-hover: #473fce;
    --brand-active: #4139bc;
    --brand-fg: #ffffff;
    --brand-rgb: 79, 70, 229;
    --brand-subtle: #ededfc;
    --brand-border: #cac8f7;
    --brand-subtle-dark: #161440;
    --brand-border-dark: #2b277e;

    /* La maquette d'origine : coins a 10px et une ombre douce plutot que
       les 0.375rem de Bootstrap, plus secs. */
    --bs-border-radius: .625rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .875rem;
    --bs-border-radius-xl: 1.25rem;

    --panel-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px rgba(15, 23, 42, .05);
    --panel-sidebar: 264px;
}

:root,
[data-bs-theme="light"] {
    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-primary-bg-subtle: var(--brand-subtle);
    --bs-primary-border-subtle: var(--brand-border);
    --bs-primary-text-emphasis: var(--brand-active);

    --bs-link-color: var(--brand);
    --bs-link-color-rgb: var(--brand-rgb);
    --bs-link-hover-color: var(--brand-active);
    --bs-link-hover-color-rgb: var(--brand-rgb);

    --bs-focus-ring-color: rgba(var(--brand-rgb), .25);

    /* Les gris ardoise de la maquette, a la place des gris de Bootstrap. */
    --bs-body-color: #334155;
    --bs-body-bg: #f8fafc;
    --bs-emphasis-color: #0f172a;
    --bs-secondary-color: #64748b;
    --bs-border-color: #e2e8f0;
    --bs-heading-color: #0f172a;

    --panel-surface: #ffffff;
    --panel-rail: #ffffff;
    --panel-rail-border: #e2e8f0;
    --panel-code-bg: var(--brand-subtle);
}

[data-bs-theme="dark"] {
    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-primary-bg-subtle: var(--brand-subtle-dark);
    --bs-primary-border-subtle: var(--brand-border-dark);
    --bs-primary-text-emphasis: var(--brand-border);

    /* Le lien reprend la teinte claire de la marque : sur fond sombre, la
       marque elle-meme n'a pas le contraste d'un texte. */
    --bs-link-color: var(--brand-border);
    --bs-link-color-rgb: var(--brand-rgb);
    --bs-link-hover-color: #ffffff;

    --bs-focus-ring-color: rgba(var(--brand-rgb), .4);

    --bs-body-color: #cbd5e1;
    --bs-body-bg: #0b1120;
    --bs-emphasis-color: #f1f5f9;
    --bs-secondary-color: #94a3b8;
    --bs-border-color: #1e293b;
    --bs-heading-color: #f1f5f9;

    --panel-surface: #111c30;
    --panel-rail: #0f172a;
    --panel-rail-border: #1e293b;
    --panel-code-bg: #1e293b;
    --panel-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
}

/* ================================================================
   2. Composants que Bootstrap colore en dur
   ================================================================ */

.btn-primary {
    --bs-btn-color: var(--brand-fg);
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: var(--brand-fg);
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
    --bs-btn-active-color: var(--brand-fg);
    --bs-btn-active-bg: var(--brand-active);
    --bs-btn-active-border-color: var(--brand-active);
    --bs-btn-disabled-color: var(--brand-fg);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: var(--brand-fg);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
    --bs-btn-active-color: var(--brand-fg);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
    --bs-btn-disabled-color: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}

/* .text-bg-primary code son texte en blanc : une marque claire le rendait
   illisible, et c'est precisement ce que --brand-fg sait. */
.text-bg-primary {
    color: var(--brand-fg) !important;
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--brand);
    border-color: var(--brand);
}

.form-range::-webkit-slider-thumb { background-color: var(--brand); }
.form-range::-moz-range-thumb { background-color: var(--brand); }

/* Les deux etats de focus codent #86b7fe et un bleu en rgba(). */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-border);
    box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .form-check-input:focus {
    border-color: var(--brand);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--brand);
    --bs-nav-pills-link-active-color: var(--brand-fg);
}

.nav-underline {
    --bs-nav-underline-link-active-color: var(--brand);
}

.pagination {
    --bs-pagination-color: var(--brand);
    --bs-pagination-hover-color: var(--brand-active);
    --bs-pagination-focus-color: var(--brand-active);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25);
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
    --bs-pagination-active-color: var(--brand-fg);
}

.list-group {
    --bs-list-group-active-bg: var(--brand);
    --bs-list-group-active-border-color: var(--brand);
    --bs-list-group-active-color: var(--brand-fg);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--brand);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--brand);
    --bs-dropdown-link-active-color: var(--brand-fg);
    --bs-dropdown-border-color: var(--bs-border-color);
    box-shadow: var(--panel-shadow);
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25);
    --bs-accordion-active-color: var(--brand-active);
    --bs-accordion-active-bg: var(--brand-subtle);
}

[data-bs-theme="dark"] .accordion {
    --bs-accordion-active-color: var(--brand-border);
    --bs-accordion-active-bg: var(--brand-subtle-dark);
}

/* ================================================================
   3. La coquille des panels
   ================================================================ */

.panel-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.panel-top {
    background: var(--panel-rail);
    border-bottom: 1px solid var(--panel-rail-border);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.panel-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Le rail lateral : fixe a partir de lg, en tiroir en dessous. */
.panel-rail {
    width: var(--panel-sidebar);
    flex: 0 0 var(--panel-sidebar);
    background: var(--panel-rail);
    border-right: 1px solid var(--panel-rail-border);
    padding: 1.25rem 1rem;
}

.panel-main {
    flex: 1;
    min-width: 0;
    padding: 1.75rem 0 4rem;
}

@media (max-width: 991.98px) {
    .panel-rail {
        display: none;
    }
}

/* Navigation du rail : des liens sobres, la marque pour l'element courant. */
.rail-nav {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.rail-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border-radius: var(--bs-border-radius-sm);
    color: var(--bs-body-color);
    font-size: .94rem;
}

.rail-nav .nav-link:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
}

.rail-nav .nav-link.active {
    background: var(--brand-subtle);
    color: var(--brand-active);
    font-weight: 600;
}

[data-bs-theme="dark"] .rail-nav .nav-link.active {
    background: var(--brand-subtle-dark);
    color: var(--brand-border);
}

.rail-nav .nav-link i {
    font-size: 1.05rem;
    width: 1.2em;
    text-align: center;
    flex: 0 0 auto;
}

.rail-heading {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-secondary-color);
    margin: 1.35rem .7rem .4rem;
}

/* ================================================================
   4. Surfaces et titres de page
   ================================================================ */

.panel-card {
    background: var(--panel-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--panel-shadow);
}

.card {
    --bs-card-bg: var(--panel-surface);
    --bs-card-border-color: var(--bs-border-color);
    box-shadow: var(--panel-shadow);
}

/* Un titre de carte s'ecrit partout « card-title h6 », y compris en en-tete
   ou l'espacement du dessous n'a pas lieu d'etre. Sans cette regle, chaque
   en-tete devait penser a mb-0, et trois sur cinq l'oubliaient. */
.card-header .card-title { margin-bottom: 0; }

/* Une barre de titre qui porte autre chose que son titre : un bouton, un
   bilan, un filtre. Le motif etait recopie en six utilitaires a chaque fois,
   et jamais tout a fait les memes. */
.card-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    flex-wrap: wrap;
}

.page-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.page-title h1 {
    font-size: 1.6rem;
    margin: 0;
}

.page-title .eyebrow {
    font-size: .85rem;
    margin: 0 0 .2rem;
}

.page-title .eyebrow a {
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.page-title .eyebrow a:hover {
    color: var(--brand);
}

/* Chiffres du tableau de bord. */
.stat-tile {
    background: var(--panel-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 1rem 1.15rem;
}

.stat-tile .stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-emphasis-color);
}

.stat-tile .stat-label {
    display: block;
    font-size: .82rem;
    color: var(--bs-secondary-color);
    margin-top: .15rem;
}

/* ================================================================
   5. Etats metier
   ================================================================
   Les statuts du domaine -- un chapitre vide ou redige, un projet
   publie, une adresse non confirmee -- ne sont pas les couleurs
   semantiques de Bootstrap : « draft » n'est pas un avertissement.
   Ils gardent donc leurs propres classes, posees sur .badge. */

.badge-draft, .badge-empty { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.badge-ready, .badge-written, .badge-published { background: #d1fae5; color: #065f46; }
.badge-generating, .badge-writing { background: #fef3c7; color: #92400e; }
.badge-alert, .badge-failed { background: #fee2e2; color: #991b1b; }

[data-bs-theme="dark"] .badge-ready,
[data-bs-theme="dark"] .badge-written,
[data-bs-theme="dark"] .badge-published { background: #064e3b; color: #6ee7b7; }
[data-bs-theme="dark"] .badge-generating,
[data-bs-theme="dark"] .badge-writing { background: #78350f; color: #fcd34d; }
[data-bs-theme="dark"] .badge-alert,
[data-bs-theme="dark"] .badge-failed { background: #7f1d1d; color: #fca5a5; }

/* ================================================================
   6. Details
   ================================================================ */

code {
    background: var(--panel-code-bg);
    padding: .1rem .35rem;
    border-radius: .25rem;
    font-size: .85em;
    color: var(--bs-emphasis-color);
}

pre code { background: none; padding: 0; }

.table {
    --bs-table-bg: transparent;
}

/* Une liste de faits : libelle a gauche, valeur a droite. Sert au
   diagnostic, au profil, aux recapitulatifs. */
.fact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fact-list > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: .92rem;
}

.fact-list > li:last-child { border-bottom: none; }

/* Le bouton de bascule clair/sombre : l'icone suit le mode, et c'est le
   CSS qui choisit -- le JavaScript ne pose qu'un attribut. */
.theme-toggle .bi-sun-fill { display: none; }
[data-bs-theme="dark"] .theme-toggle .bi-sun-fill { display: inline-block; }
[data-bs-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: none; }

/* Zone de suppression : la meme intention que l'ancienne .danger-zone. */
.danger-zone {
    background: var(--bs-danger-bg-subtle);
    border: 1px solid var(--bs-danger-border-subtle);
    border-radius: var(--bs-border-radius);
    padding: 1.25rem 1.5rem;
}

.danger-zone h2, .danger-zone h3 {
    color: var(--bs-danger-text-emphasis);
    font-size: 1.05rem;
    margin: 0;
}

/* Le message d'erreur d'un champ, sous le champ, sans classe Bootstrap
   a poser sur chaque input. */
.field-error {
    color: var(--bs-danger-text-emphasis);
    font-size: .85rem;
    margin: .35rem 0 0;
}

.field-hint {
    color: var(--bs-secondary-color);
    font-size: .85rem;
    margin: .35rem 0 0;
}

/* ================================================================
   7. Largeurs de contenu
   ================================================================
   L'espace auteur lit surtout du texte et des formulaires : une
   colonne large fatigue. Le back-office montre des tableaux, qui ont
   besoin de place. Les deux ne peuvent pas partager la meme mesure. */

.panel-container { max-width: 1120px; }
.panel-container-wide { max-width: 1400px; }
.panel-container-narrow { max-width: 760px; }

/* La marque : le mot central prend la couleur d'accent, comme le veut
   brand_html(). */
.panel-brand { color: var(--bs-emphasis-color); }
.panel-brand span { color: var(--brand); }

/* ================================================================
   8. Contrat avec app.js -- a ne pas supprimer
   ================================================================
   Ces classes ne sont pas ecrites dans les gabarits : le JavaScript
   les pose lui-meme, par className ou classList. Les retirer d'ici ne
   casserait donc aucune vue a la relecture, et l'interface perdrait
   silencieusement ses etats -- un message d'erreur sans couleur, un
   chapitre en cours de redaction sans signe.

   Releve dans app.js :
     className = 'ai-message is-error|is-pending|is-success'
     className = 'muted small is-error|is-pending|is-success'
     classList : is-writing, is-failed, is-recovered
   ================================================================ */

/* Bootstrap dit .text-secondary ; le JavaScript, lui, ecrit .muted. */
.muted { color: var(--bs-secondary-color); }

.ai-message {
    font-size: .9rem;
    margin: .5rem 0 0;
    min-height: 1.2em;
    color: var(--bs-secondary-color);
}

.ai-message:empty { margin: 0; min-height: 0; }

.is-success { color: var(--bs-success-text-emphasis); }
.is-error   { color: var(--bs-danger-text-emphasis); }
.is-pending { color: var(--bs-warning-text-emphasis); }

/* Une ligne de chapitre pendant et apres une redaction.

   Le fond dit l'etat ; le lisere gauche le redit la ou le fond passe
   inapercu -- un ecran mal regle, une capture en noir et blanc. C'est une
   ombre interieure et non une bordure : une bordure decalerait le contenu
   de la ligne, et .list-group-flush a deja retire les bords lateraux. */
.chapter-item.is-writing {
    border-color: var(--bs-warning-border-subtle);
    background: var(--bs-warning-bg-subtle);
    box-shadow: inset .1875rem 0 0 var(--bs-warning);
}

.chapter-item.is-failed {
    border-color: var(--bs-danger-border-subtle);
    background: var(--bs-danger-bg-subtle);
    box-shadow: inset .1875rem 0 0 var(--bs-danger);
}

/* Le serveur avait fini malgre la connexion perdue : l'etat se distingue
   d'un echec, sinon l'auteur relance une redaction deja faite. */
.chapter-item.is-recovered {
    border-color: var(--bs-success-border-subtle);
    background: var(--bs-success-bg-subtle);
    box-shadow: inset .1875rem 0 0 var(--bs-success);
}

/* ================================================================
   9. Objets propres a l'application
   ================================================================ */

/* La pastille d'un projet : son initiale sur la couleur tiree au sort a
   la creation. */
.project-cover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--bs-border-radius-sm);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
}

.project-card {
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
}

.project-card:hover {
    transform: translateY(-2px);
    border-color: var(--brand-border);
}

.project-card h3 { color: var(--bs-emphasis-color); }

/* Un libelle et son bouton sur la meme ligne : « Sujet » et « Proposer
   avec l'IA ». */
.label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.label-row .form-label { margin-bottom: 0; }

/* ---- Le plan du livre -------------------------------------------

   Le seul endroit du site ou l'auteur travaille sur vingt lignes a la
   fois. Trois colonnes fixes -- numero, contenu, actions -- pour que le
   regard descende en colonne au lieu de relire chaque ligne entiere.

   Les noms de classes forment un contrat avec partials/chapter-row.php,
   et « .chapter-side .badge » en forme un avec app.js, qui reecrit la
   pastille des qu'un chapitre est ecrit. */

.chapter-tally {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

/* A fleur du bord, sous l'en-tete : la barre appartient a la carte et non
   au contenu. Sans coin arrondi ni hauteur de composant, elle se lit comme
   un trait de remplissage, pas comme un element de formulaire. */
.chapter-progress {
    height: .25rem;
    border-radius: 0;
    background: var(--bs-secondary-bg);
}

.chapter-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    /* Numero et actions se centrent dans la hauteur de la ligne : cales en
       haut, ils flottaient au-dessus d un resume de deux lignes, et les trois
       colonnes ne se lisaient plus comme une meme ligne. */
    align-items: center;
    column-gap: .875rem;
    row-gap: .5rem;
    padding: .75rem 1rem;
    transition: background-color .12s ease;
}

.chapter-item:hover { background: var(--bs-tertiary-bg); }

/* Le numero est le seul element qui tombe a la meme place d'une ligne a
   l'autre : c'est donc lui qui porte la couleur de l'etat, et lui qu'on
   parcourt pour voir ce qui reste a ecrire. Les chiffres tabulaires
   donnent a « 9 » et « 10 » la meme largeur. */
.chapter-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: .125rem .375rem;
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.chapter-item[data-status="written"] .chapter-number {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

/* app.js pose .is-writing et .is-failed sans toucher a data-status -- une
   redaction en cours n'est ecrite en base qu'apres le depart de la
   requete, et une connexion perdue, elle, n'y figure jamais. Les deux
   formes doivent donc teindre, et celles de l'interface viennent en
   dernier pour l'emporter a specificite egale. */
.chapter-item[data-status="writing"] .chapter-number,
.chapter-item.is-writing .chapter-number {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.chapter-item[data-status="failed"] .chapter-number,
.chapter-item.is-failed .chapter-number {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.chapter-title {
    display: block;
    color: var(--bs-emphasis-color);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    /* Un titre est saisi : rien ne garantit qu il contienne un espace. */
    overflow-wrap: anywhere;
}

/* Un lien par ligne et vingt lignes : tous en couleur de marque, la liste
   faisait un damier. La couleur ne vient qu'au survol, ou elle designe le
   chapitre qu'on s'apprete a ouvrir. */
.chapter-title:hover,
.chapter-title:focus-visible {
    color: var(--brand);
    text-decoration: underline;
}

/* Deux lignes au plus. Un resume de trois phrases doublait la hauteur de
   sa ligne et cassait le peigne de la liste. La coupe faite par le serveur
   reste -- elle borne ce qui voyage ; celle-ci borne ce qui s'affiche, a
   n'importe quelle largeur. */
.chapter-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: .125rem 0 0;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    line-height: 1.45;
}

.chapter-side {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
}

.chapter-actions {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex-wrap: nowrap;
}

/* L'icone et le libelle dans le meme bouton : un espacement en flex plutot
   qu'une marge sur l'icone, pour que le texte reste seul dans son element --
   c'est lui que app.js remplace pendant une redaction. */
.chapter-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

/* La suppression se detache des deux actions qui construisent : meme groupe,
   mais on ne la rencontre pas en glissant du bouton voisin. */
.chapter-destroy { margin-left: .375rem; }

/* Le tourniquet de la pastille « redaction en cours », a la taille du
   texte qui l'accompagne : plus grand, il faisait grandir la pastille, et
   la ligne sautait au demarrage de la redaction. */
.chapter-spinner {
    width: .7em;
    height: .7em;
    margin-right: .25rem;
    border-width: .15em;
}

/* Sous 576 px, la pastille et les boutons passent sous le titre. Restes a
   droite, ils ne laissaient au titre qu'une trentaine de pixels : chaque
   ligne se pliait en quatre, et un plan de vingt chapitres ne tenait plus
   sur un ecran de telephone. */
@media (max-width: 575.98px) {
    .chapter-item { grid-template-columns: auto minmax(0, 1fr); }

    .chapter-side {
        grid-column: 2;
        justify-content: flex-start;
        /* Trois libelles ne tiennent pas sur la largeur d'un telephone : ils
           se replient sur une seconde ligne au lieu de deborder. */
        flex-wrap: wrap;
        row-gap: .375rem;
    }

    .chapter-actions { flex-wrap: wrap; row-gap: .375rem; }

    .chapter-destroy { margin-left: 0; }
}

/* Un sous-chapitre : retrait, titre plus discret, et un filet vertical qui
   relie les freres entre eux -- la hierarchie se lit alors sans comparer
   les numeros. La classe est posee par partials/chapter-row.php et attendue
   par ChapterRowsTest.

   Le retrait ne touche plus au fond. Le fond sourd d'avant effacait celui
   des etats de redaction, sa regle venant apres dans ce fichier : un
   sous-chapitre en cours d'ecriture ou en echec ne se signalait pas. */
.chapter-item.is-child {
    padding-left: 2.875rem;
}

.chapter-item.is-child::before {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--bs-border-color);
}

.chapter-item.is-child .chapter-title {
    font-weight: 500;
    font-size: .9375rem;
}

.chapter-item.is-child .chapter-number {
    min-width: 2.5rem;
    font-size: .75rem;
}