/* Administration : Concert de Noël 2026.
   Poste de travail : dense, lisible, calme. CSS artisanal, aucun fichier
   distant : le serveur est à Conakry, tout est servi en local.

   Refonte visuelle d'août 2026, direction artistique commune : palette du
   logo (CHARTE.md section 3), EB Garamond sur les titres, DM Sans pour le
   courant, un seul filet d'or par écran (sous le titre de page), rayon
   discret réservé aux surfaces interactives, chiffres à chasse fixe.

   Contrastes mesurés (WCAG) : encre 15,1 : 1 sur le papier ; encre-douce
   5,7 ; encre-legere 5,3 ; accent 12,2 ; blanc sur bleu nuit 16,6 ; liens
   de barre 10,9 ; textes d'état sur leurs fonds pâles : vert 5,6, ambre
   5,5, rouge 5,8. Les contours de champ tiennent les 3 : 1 des éléments
   d'interface (3,6 sur le blanc, 3,4 sur le papier). */

@font-face {
    font-family: "EB Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fontes/eb-garamond-600.woff2") format("woff2");
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fontes/dm-sans-400.woff2") format("woff2");
}

@font-face {
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fontes/dm-sans-400-italique.woff2") format("woff2");
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fontes/dm-sans-700.woff2") format("woff2");
}

:root {
    --encre: #1A2233;         /* bleu-noir, pas un gris neutre */
    --encre-douce: #5A6478;
    --encre-legere: #5F6879;  /* 5,3 : 1 sur le papier, 5,6 sur le blanc */
    --fond: #FAF9F6;          /* papier : blanc cassé chaud */
    --carte: #FFFFFF;
    --bord: #E6E3DC;
    /* --bord sert aux filets de tableau et aux bords de carte : c'est de
       l'ornement. Le contour d'un champ de saisie, lui, est la seule chose
       qui dit où l'on doit écrire : il lui faut les 3 : 1 des éléments
       d'interface. Mesuré : 3,6 sur le blanc du champ, 3,4 sur le papier. */
    --bord-champ: #7F8794;
    /* Même raisonnement pour le contour d'une commande : le bouton
       secondaire ne se détache de la page que par lui. */
    --bord-commande: #7F8794;
    --accent: #042F6E;        /* bleu marine du logo, CHARTE.md section 3 */
    --accent-fonce: #021D45;  /* bleu nuit : la barre, les survols */
    --or: #BC8D2A;            /* LE filet sous le titre, rien d'autre */
    /* Les états, distincts de l'or. La teinte porte le filet ou le fond ;
       le texte posé sur fond pâle prend la variante foncée, mesurée. */
    --ok: #2E7D4F;
    --ok-texte: #256B42;      /* 5,6 : 1 sur --ok-fond */
    --ok-fond: #E7F1EA;
    --absent-fond: #F0EFEA;
    --erreur: #A8322A;        /* 5,8 : 1 sur --erreur-fond */
    --erreur-fond: #F9ECEA;
    --attention: #A96A14;
    --attention-texte: #835711; /* 5,5 : 1 sur --attention-fond */
    --attention-fond: #F7EFDF;
    --rayon: 6px;             /* réservé aux surfaces interactives */
    --sortie: cubic-bezier(0.23, 1, 0.32, 1);
    --serif: "EB Garamond", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "DM Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--encre);
    background: var(--fond);
}

/* Le titre d'écran en Garamond, et sous lui LE filet d'or : une fois par
   écran, jamais ailleurs. C'est la signature de la maison, héritée du
   filet à fleur de lys du logo. */
h1 {
    font-size: 1.55rem;
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: 0.005em;
    margin: 0 0 0.35rem;
    color: var(--accent);
}

h1::after {
    content: "";
    display: block;
    width: 2.75rem;
    height: 2px;
    margin-top: 0.5rem;
    background: var(--or);
}

h2 {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

a { color: var(--accent); }

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Les chiffres s'alignent partout où ils se comparent. */
table, .tabulaire { font-variant-numeric: tabular-nums; }

/* --- Structure ------------------------------------------------------- */

/* La barre : bleu nuit, la couleur d'apparat de la chorale. Le monogramme
   y vit dans une pastille blanche (charte, section 4 : jamais le dessin
   posé sur un aplat bleu, c'est sa propre couleur, il s'y noie). */
.entete {
    background: var(--accent-fonce);
}

.entete-interieur {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0.6rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.marque {
    font-weight: 700;
    text-decoration: none;
    color: #FFFFFF;              /* 16,6 : 1 sur le bleu nuit */
    white-space: nowrap;
}

.marque span {
    font-weight: 400;
    color: #B9C4DA;              /* 9,5 : 1 */
}

.entete a:focus-visible,
.entete button:focus-visible {
    outline-color: #FFFFFF;
}

.contenu {
    max-width: 68rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.page-entete { margin-bottom: 1.25rem; }

.sous-titre {
    margin: 0;
    color: var(--encre-douce);
    font-size: 0.92rem;
}

.fil-ariane {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.fil-ariane a { text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }

.message-statut {
    margin: 0 0 1.25rem;
    padding: 0.6rem 0.9rem;
    background: var(--ok-fond);
    color: var(--ok-texte);
    border: 1px solid var(--bord);
    border-left: 3px solid var(--ok);
    font-size: 0.92rem;
}

.erreur {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    background: var(--erreur-fond);
    color: var(--erreur);
    border: 1px solid var(--bord);
    border-left: 3px solid var(--erreur);
    font-size: 0.92rem;
}

.erreur p { margin: 0; }

/* --- Boutons ---------------------------------------------------------
   Un seul bouton plein par écran : l'action qui engage. Le reste se
   contente d'un contour ou d'un texte nu. */

.bouton {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border: 1px solid transparent;
    border-radius: var(--rayon);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 160ms var(--sortie), background-color 160ms ease, border-color 160ms ease;
}

.bouton:active { transform: scale(0.97); }

.bouton-principal {
    width: 100%;
    background: var(--accent);
    color: #fff;
}

.bouton-secondaire {
    background: var(--carte);
    color: var(--encre);
    border-color: var(--bord-commande);
}

.bouton-discret {
    background: transparent;
    color: var(--encre-douce);
    border-color: transparent;
}

/* Le « Se déconnecter » vit dans la barre bleu nuit : il y prend une encre
   claire, mesurée sur ce fond (10,9 : 1, blanc au survol). */
.entete .bouton-discret { color: #C6D2E8; }

@media (hover: hover) and (pointer: fine) {
    .bouton-principal:hover { background: var(--accent-fonce); }
    .bouton-secondaire:hover { border-color: var(--encre-legere); }
    .bouton-discret:hover { color: var(--encre); }
    .entete .bouton-discret:hover { color: #FFFFFF; }
}

/* --- Connexion ------------------------------------------------------- */

.carte-connexion {
    max-width: 22rem;
    margin: 4rem auto 0;
    padding: 1.75rem;
    background: var(--carte);
    border: 1px solid var(--bord);
}

.carte-connexion .sous-titre { margin-bottom: 1.5rem; }

.champ { margin-bottom: 1rem; }

.champ label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--encre-douce);
}

.champ input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--bord-champ);
    border-radius: var(--rayon);
    font: inherit;
    background: var(--carte);
    transition: border-color 160ms ease;
}

.champ input:focus {
    border-color: var(--accent);
    outline: none;
}

/* L'œil « afficher le mot de passe » (connexion). Le bouton vit DANS le
   champ, à droite ; il naît avec l'attribut hidden et c'est le script de
   la page qui le révèle : sans JavaScript, pas de commande morte. La barre
   traversant l'œil ne se montre que quand le mot de passe est visible. */

.champ-mdp { position: relative; }

.champ-mdp input { padding-right: 2.75rem; }

.oeil {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0 var(--rayon) var(--rayon) 0;
    background: transparent;
    color: var(--encre-douce);
    cursor: pointer;
}

.oeil:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
    .oeil:hover { color: var(--encre); }
}

.oeil .oeil-barre { display: none; }

.oeil[aria-pressed="true"] .oeil-barre { display: inline; }

/* --- Liste des chants ------------------------------------------------ */

/* position: relative, sinon un élément en position absolue posé dans le
   tableau (l'étiquette .visuellement-cache de la colonne Actions) s'ancre
   sur la page entière : depuis une colonne défilée hors champ, il élargit
   la page de quatre cents pixels sur un écran de 360. Mesuré. */
.tableau-defilant {
    position: relative;
    overflow-x: auto;
}

.tableau-chants {
    width: 100%;
    border-collapse: collapse;
    background: var(--carte);
    border: 1px solid var(--bord);
    font-size: 0.92rem;
}

.tableau-chants th {
    text-align: left;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--encre-douce);
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--bord);
    white-space: nowrap;
}

.tableau-chants td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bord);
    vertical-align: top;
}

.tableau-chants tbody tr:last-child td { border-bottom: none; }

.col-numero {
    width: 2.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--encre-douce);
}

.col-bloc {
    color: var(--encre-douce);
    white-space: nowrap;
}

.col-pupitre {
    text-align: center;
    white-space: nowrap;
}

.lien-chant {
    text-decoration: none;
    font-weight: 700;
    color: var(--encre);
}

.lien-chant:hover { color: var(--accent); }

.compositeur {
    display: block;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--encre-legere);
}

.ligne-retiree .lien-chant { color: var(--encre-legere); }

.etiquette-retire {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.4rem;
    font-size: 0.75rem;
    color: var(--encre-douce);
    background: var(--absent-fond);
    border-radius: 4px;
}

/* Publié ou manquant : la couleur seule ne suffit pas. Un vert pâle et un
   gris pâle se ressemblent dès qu'on distingue mal le rouge du vert. Le
   plein marque le présent, le pointillé marque le manque : la forme se lit
   en couleur, en noir et blanc et sur papier. */
.pastille {
    display: inline-block;
    min-width: 1.4rem;
    padding: 0.05rem 0.25rem;
    margin: 0 0.1rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.pastille-ok { background: var(--ok-fond); color: var(--ok-texte); }

.pastille-absente {
    background: var(--absent-fond);
    color: var(--encre-legere);
    border-color: var(--encre-legere);
    border-style: dashed;
}

/* --- Fiche chant ----------------------------------------------------- */

.numero-chant {
    color: var(--encre-legere);
    font-weight: 400;
    margin-right: 0.25rem;
}

.section-medias {
    margin-top: 1.75rem;
    padding: 1.25rem;
    background: var(--carte);
    border: 1px solid var(--bord);
}

/* ---------- Les cinq guides d'un coup ----------
   Constat du responsable, 30 aout 2026 : le televersement se faisait
   emplacement par emplacement, cinq formulaires et cinq allers-retours par
   chant. Ce bloc les reunit ; les emplacements a l'unite restent en dessous
   pour remplacer ou supprimer un seul fichier.

   La grille se replie a une colonne sous 640 px : la console
   d'administration s'ouvre aussi depuis un telephone, quand le responsable
   n'est pas a son bureau. */
.lot-guides {
    margin: 0 0 1.4rem;
    padding: 1rem 1.1rem 1.15rem;
    background: var(--fond-2, #f6f7f9);
    border: 1px solid var(--trait, #dcdfe5);
    border-radius: 8px;
}

.lot-mot {
    margin: 0 0 0.9rem;
    line-height: 1.5;
}

.lot-champs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem 1.1rem;
    margin-bottom: 1rem;
}

.lot-champ {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.94rem;
}

.lot-champ span { font-weight: 600; }

.lot-champ input[type="file"] {
    font: inherit;
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .lot-champs { grid-template-columns: 1fr; }
}

.liste-emplacements {
    list-style: none;
    margin: 0;
    padding: 0;
}

.emplacement {
    display: grid;
    grid-template-columns: 11rem 1fr auto;
    gap: 0.75rem 1rem;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bord);
}

.emplacement:last-child { border-bottom: none; }

.emplacement-titre {
    font-weight: 700;
    font-size: 0.92rem;
}

.emplacement-etat { min-width: 0; }

.fichier-nom {
    display: block;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.fichier-details {
    display: block;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--encre-legere);
}

.fichier-absent {
    font-size: 0.9rem;
    color: var(--encre-legere);
    font-style: italic;
}

.emplacement-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.emplacement-actions form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.champ-fichier input[type="file"] {
    font-size: 0.85rem;
    max-width: 14rem;
    color: var(--encre-douce);
}

@media (max-width: 44rem) {
    .emplacement { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* --- Documents (lot 11) ---------------------------------------------- */

.entete-lien {
    margin-right: auto;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    color: #C6D2E8;              /* 10,9 : 1 sur le bleu nuit */
    padding: 0.15rem 0;
}

.entete-lien:hover { color: #FFFFFF; text-decoration: underline; }

/* La page ouverte : blanche, soulignée d'un trait plein. L'œil ne dépend
   pas d'une couleur, aria-current le dit aussi au lecteur d'écran. */
.entete-lien[aria-current="page"] {
    color: #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
}

.formulaire-document {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.formulaire-document .champ { margin-bottom: 0; }

.formulaire-document .champ:first-child { flex: 1 1 16rem; }

.formulaire-document .champ select {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--bord-champ);
    border-radius: var(--rayon);
    font: inherit;
    background: var(--carte);
    transition: border-color 160ms ease;
}

.formulaire-document .champ select:focus {
    border-color: var(--accent);
    outline: none;
}

.formulaire-document .champ input[type="file"] {
    font-size: 0.85rem;
    max-width: 16rem;
    color: var(--encre-douce);
}

.formulaire-renommage {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.formulaire-renommage input[type="text"] {
    flex: 1 1 auto;
    min-width: 10rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--bord-champ);
    border-radius: var(--rayon);
    font: inherit;
    font-size: 0.9rem;
    background: var(--carte);
    transition: border-color 160ms ease;
}

.formulaire-renommage input[type="text"]:focus {
    border-color: var(--accent);
    outline: none;
}

.col-actions { white-space: nowrap; }

.col-actions form {
    display: inline-block;
    margin: 0 0.25rem 0 0;
}

.ligne-retiree .formulaire-renommage input[type="text"] { color: var(--encre-legere); }

@media (prefers-reduced-motion: reduce) {
    .bouton { transition: background-color 160ms ease, border-color 160ms ease; }
    .bouton:active { transform: none; }
}

/* Compléments : repères nommés des guides vocaux (fiche chant) */
.marqueurs {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    padding: 0.35rem 0 0.35rem 0.85rem;
    border-left: 3px solid var(--bord);
}

.marqueurs-titre {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--encre-legere);
}

.marqueur,
.marqueur-ajout {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

.marqueur-libelle { font-size: 0.85rem; }

.marqueur-ajout input[type="text"] {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--bord-champ);
    border-radius: var(--rayon);
    font: inherit;
    font-size: 0.85rem;
    background: var(--carte);
    transition: border-color 160ms ease;
}

.marqueur-ajout input[type="text"]:focus {
    border-color: var(--accent);
    outline: none;
}

/* Compléments : liste de matériel (champs en ligne dans le tableau) */
.champ-ligne {
    width: 100%;
    min-width: 8rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--bord-champ);
    border-radius: var(--rayon);
    font: inherit;
    font-size: 0.9rem;
    background: var(--carte);
    transition: border-color 160ms ease;
}

.champ-ligne:focus {
    border-color: var(--accent);
    outline: none;
}

.select-statut {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--bord-champ);
    border-radius: var(--rayon);
    font: inherit;
    font-size: 0.9rem;
    background: var(--carte);
    transition: border-color 160ms ease;
}

.select-statut:focus {
    border-color: var(--accent);
    outline: none;
}

/* Gestion du programme : total alloué, réordonnancement, fiche chant */

.total-alloue {
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    color: var(--encre-douce);
}

.avertissement {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.9rem;
    background: var(--attention-fond);
    color: var(--attention-texte);
    border: 1px solid var(--bord);
    border-left: 3px solid var(--attention);
    font-size: 0.92rem;
}

/* Le bandeau du chronogramme d'essai, en tête de chaque écran tant qu'un
   essai est posé. Même avertissement, mêmes jetons d'état : rien de
   nouveau dans la palette, seule la place change. Le lien de retour prend
   le bleu marine des liens, qui tient 11 : 1 sur l'ambre pâle. */
.avertissement-bandeau {
    margin: 0 0 1.25rem;
}

.avertissement-bandeau a {
    color: var(--accent);
}

.actions-entete {
    margin: 0.9rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.actions-entete .bouton { text-decoration: none; }

/* Le filtre ouvert (adhésions) : un contour d'accent, pas un aplat. Il
   marque un état, pas une action ; aria-current le dit aussi au lecteur
   d'écran. */
.actions-entete .bouton[aria-current="page"] {
    padding: calc(0.45rem - 1px) calc(0.9rem - 1px);
    border: 2px solid var(--accent);
    color: var(--accent);
    background: var(--carte);
}

.formulaire-en-ligne { margin: 0; }

.col-ordre {
    width: 3.4rem;
    white-space: nowrap;
}

.col-ordre form {
    display: inline-block;
    margin: 0;
}

.bouton-fleche {
    padding: 0.1rem 0.4rem;
    font-size: 0.95rem;
    line-height: 1.2;
}

.bouton-fleche:disabled {
    opacity: 0.25;
    cursor: default;
}

.lien-discret {
    font-size: 0.9rem;
    color: var(--encre-douce);
}

.lien-discret:hover { color: var(--accent); }

.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.formulaire-chant {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 1.5rem;
}

.formulaire-chant .champ { margin-bottom: 0.75rem; }

.formulaire-chant .champ-large { grid-column: 1 / -1; }

.formulaire-chant .indication {
    font-weight: 400;
    color: var(--encre-legere);
}

.formulaire-chant select {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--bord-champ);
    border-radius: var(--rayon);
    font: inherit;
    background: var(--carte);
    transition: border-color 160ms ease;
}

.formulaire-chant select:focus {
    border-color: var(--accent);
    outline: none;
}

@media (max-width: 44rem) {
    .formulaire-chant { grid-template-columns: 1fr; }
}

/* --- Identité de la chorale ------------------------------------------
   Charte du logo, sections 4 et 7. Deux tailles seulement :
   - le monogramme CSE dans la barre du haut, qui tient jusqu'à 16 px ;
   - le médaillon à 64 px sur la carte de connexion, sa taille plancher.
   Le logo complet demande 300 px de large : ni la barre ni la carte n'en
   ont la place. Ni ombre, ni contour, ni rotation : la charte les
   interdit.

   La barre est bleu nuit : le monogramme, majoritairement bleu marine,
   s'y noierait (c'est sa propre couleur : la charte, section 5, mesure
   1,3 : 1 pour ce genre d'attelage). D'où la pastille blanche, prévue par
   la charte section 4 pour tous les fonds de couleur soutenue. La carte
   de connexion, elle, reste blanche : le médaillon y donne 12,8 : 1, la
   pastille n'aurait rien à y protéger. */

.marque-icone {
    box-sizing: content-box;
    width: 22px;
    height: 22px;
    padding: 5px;
    margin-right: 0.55rem;
    background: #FFFFFF;
    border-radius: 50%;
    vertical-align: middle;
}

.medaillon-connexion {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 0 0.75rem;
}

/* --- Livret des partitions -------------------------------------------
   Encadré posé sur l'écran du programme : c'est là qu'on périme le
   livret, donc là qu'il faut le voir. Aucune couleur nouvelle. */

.livret {
    margin: 1.5rem 0 2rem;
    padding: 1rem 1.15rem 1.15rem;
    background: var(--carte);
    border: 1px solid var(--bord);
}

.livret-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.livret h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

/* Le repère de l'état courant, à côté du titre : c'est lui qu'on compare
   avec celui imprimé sur la couverture d'un exemplaire papier. */
.livret-repere {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    background: var(--fond);
    border: 1px solid var(--bord);
    padding: 0.1rem 0.45rem;
}

.livret-resume {
    margin: 0.35rem 0 0.5rem;
    font-size: 0.94rem;
    line-height: 1.55;
}

.livret-note {
    color: var(--encre-legere);
    font-size: 0.88rem;
}

.livret-etat {
    margin: 0.75rem 0;
    padding: 0.6rem 0.75rem;
    font-size: 0.92rem;
    line-height: 1.55;
    border-left: 3px solid transparent;
}

.livret-etat-ok { background: var(--ok-fond); border-left-color: var(--ok); color: var(--ok-texte); }
.livret-etat-perime { background: var(--attention-fond); border-left-color: var(--attention); color: var(--attention-texte); }
.livret-etat-absent { background: var(--absent-fond); border-left-color: var(--encre-legere); }

.livret-panne {
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.75rem;
    background: var(--absent-fond);
    font-size: 0.92rem;
}

.livret-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.livret-actions form { margin: 0; }
.livret-actions .bouton { text-decoration: none; }

.livret-options,
.livret-historique {
    margin-top: 0.9rem;
    font-size: 0.92rem;
}

.livret-options summary,
.livret-historique summary {
    cursor: pointer;
    color: var(--encre-douce);
}

.livret-formulaire {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.7rem;
    padding: 0.8rem;
    background: var(--fond);
}

.livret-formulaire select {
    display: block;
    margin-top: 0.25rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--bord-champ);
    border-radius: var(--rayon);
    font: inherit;
    background: var(--carte);
}

.livret-formulaire button { justify-self: start; }

.livret-case {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    line-height: 1.5;
}

.livret-tableau {
    width: 100%;
    margin-top: 0.6rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.livret-tableau th,
.livret-tableau td {
    padding: 0.35rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--bord);
    vertical-align: baseline;
}

.livret-tableau th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--encre-legere);
}

.livret-tableau form { margin: 0; }