/*
 * Feuille de style unique de l'application.
 *
 * Intention : toute la presentation est definie ici. Aucun style ne doit apparaitre dans les pages,
 * ni en attribut, ni en bloc. Les couleurs, espacements et polices passent par des variables afin
 * de rester coherents d'un ecran a l'autre.
 */

:root {
    --couleur_fond: #f4f5f7;
    --couleur_surface: #ffffff;
    --couleur_texte: #1f2933;
    --couleur_texte_discret: #6b7683;
    --couleur_accent: #1f4e79;
    --couleur_accent_clair: #e8eff6;
    --couleur_bordure: #d7dce2;
    --couleur_succes: #1e7a46;
    --couleur_alerte: #a12b2b;
    /* Employee pour les reperes qui ne jugent rien : les extremes d'un graphique bornent une
       periode, ils n'annoncent pas un defaut. Le rouge d'alerte leur donnerait un sens qu'ils
       n'ont pas. */
    --couleur_repere: #c8791a;

    --espacement_court: 0.5rem;
    --espacement_moyen: 1rem;
    --espacement_long: 2rem;

    --rayon: 4px;
    --police: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--police);
    font-size: 15px;
    color: var(--couleur_texte);
    background: var(--couleur_fond);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* En-tete et navigation */

.bandeau {
    background: var(--couleur_accent);
    color: #ffffff;
    padding: var(--espacement_moyen) var(--espacement_long);
    display: flex;
    align-items: center;
    gap: var(--espacement_long);
}

.bandeau__titre {
    font-weight: 600;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Pictogramme de l'application, a gauche de son nom dans le bandeau. */
.bandeau__logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: block;
}

/*
 * Ecran de connexion : premiere image de l'application.
 *
 * Le fond est coupe en deux tons, accent en haut et fond neutre en bas, et la carte se pose sur la
 * ligne de partage avec une ombre portee : elle flotte, elle ne se fond pas dans la page. Le bloc
 * deborde volontairement de la marge du contenu pour occuper toute la largeur de l'ecran.
 */
/* Le debord en pleine largeur compte l'ascenseur vertical : recadre au niveau de la page entiere,
   sans quoi un ascenseur horizontal apparaitrait. Recadrer le conteneur du contenu couperait le
   fond lui meme. Le titre courant de la page n'a pas sa place ici : la carte se presente elle
   meme. */
html:has(.connexion) {
    overflow-x: clip;
}

.contenu:has(.connexion) .contenu__titre {
    display: none;
}

/* Sur cet ecran, le logo complet de la carte suffit : le nom et le pictogramme du bandeau se
   taisent, le bandeau ne fait plus qu'un avec le fond. */
html:has(.connexion) .bandeau__titre {
    visibility: hidden;
}

.connexion {
    /* Pleine largeur de la fenetre, malgre la largeur bornee du contenu : marges negatives
       calculees depuis le centre. */
    margin: calc(-1 * var(--espacement_long)) calc(50% - 50vw) 0;
    min-height: calc(100vh - 3.9rem);
    padding: 9vh var(--espacement_moyen) var(--espacement_long);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: linear-gradient(180deg, var(--couleur_accent) 0 46%, var(--couleur_fond) 46% 100%);
}

.formulaire--connexion {
    width: 100%;
    max-width: 460px;
}

.connexion__carte {
    border: none;
    border-radius: 14px;
    padding: var(--espacement_long);
    box-shadow: 0 24px 60px rgba(31, 78, 121, 0.28), 0 2px 6px rgba(31, 41, 51, 0.08);
}

.connexion__logo {
    margin: 0 0 var(--espacement_court);
    text-align: center;
}

.connexion__logo img {
    max-width: 100%;
    height: auto;
}

.connexion__accroche {
    margin: 0 0 var(--espacement_long);
    text-align: center;
    color: var(--couleur_texte_discret);
    font-size: 0.95rem;
}

/* Une seule colonne, des champs plus hauts : un ecran que l'on remplit une fois par jour, sans
   se pencher. */
.connexion__champs {
    grid-template-columns: 1fr;
    gap: var(--espacement_moyen);
}

.formulaire--connexion .champ__saisie {
    padding: 0.7rem 0.85rem;
    font-size: 1rem;
}

.formulaire--connexion .champ__saisie:focus {
    outline: 2px solid var(--couleur_accent);
    outline-offset: 1px;
    border-color: var(--couleur_accent);
}

.connexion__actions {
    margin-top: var(--espacement_moyen);
}

/* Defi visuel : l'image et son lien de renouvellement, cote a cote. */
.connexion__captcha {
    display: flex;
    align-items: center;
    gap: var(--espacement_moyen);
    margin: var(--espacement_moyen) 0 var(--espacement_court);
}

.connexion__captcha_image {
    border: 1px solid var(--couleur_bordure);
    border-radius: var(--rayon);
    max-width: 100%;
    height: auto;
}

.connexion__captcha_autre {
    font-size: 0.85rem;
    color: var(--couleur_texte_discret);
}

/* Dans la liste des verrous, la date de fin et son bouton tiennent sur une ligne. */
.verrou__fin {
    display: inline-flex;
    align-items: center;
    gap: var(--espacement_court);
    margin: 0;
}

.verrou__fin_date {
    width: auto;
}

/* Le pied propre a la connexion remplace le pied commun des pages de travail. */
.connexion__pied {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--espacement_moyen);
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--couleur_texte_discret);
}

.connexion {
    position: relative;
}

html:has(.connexion) .pied {
    display: none;
}

.connexion__bouton {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 8px;
}

.navigation {
    display: flex;
    gap: var(--espacement_moyen);
}

.navigation__lien {
    color: #ffffff;
    text-decoration: none;
    padding: var(--espacement_court) var(--espacement_moyen);
    border-radius: var(--rayon);
    opacity: 0.85;
}

.navigation__lien:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
}

.navigation__lien--actif {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

/*
 * Compte connecte, repousse a l'oppose de la navigation : le visa et la deconnexion se trouvent
 * toujours au meme endroit, quel que soit le nombre d'entrees de navigation affichees.
 */
.bandeau__compte {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--espacement_moyen);
}

.bandeau__visa {
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: var(--espacement_court) var(--espacement_moyen);
    border-radius: var(--rayon);
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    text-decoration: none;
}

/* Le visa est un lien vers Mon compte : il le montre au survol, et quand on y est. */
.bandeau__visa:hover,
.bandeau__visa:focus-visible,
.bandeau__visa--actif {
    background: rgba(255, 255, 255, 0.32);
}

/* Le formulaire de deconnexion ne porte qu'un bouton : il ne doit pas occuper de place propre. */
.bandeau__deconnexion {
    margin: 0;
}

/* L'ecran de connexion ne montre qu'un seul bloc : il est centre et de largeur limitee. */
.formulaire--connexion {
    max-width: 26rem;
    margin: 0 auto;
}

/* Contenu */

.contenu {
    flex: 1;
    padding: var(--espacement_long);
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.contenu__titre {
    margin: 0 0 var(--espacement_long) 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.carte {
    background: var(--couleur_surface);
    border: 1px solid var(--couleur_bordure);
    border-radius: var(--rayon);
    padding: var(--espacement_moyen);
    margin-bottom: var(--espacement_moyen);
}

.carte__titre {
    margin: 0 0 var(--espacement_court) 0;
    font-size: 1rem;
    font-weight: 600;
}

/* Nombre d'elements annonce dans le titre d'une carte, discret a cote de l'intitule. */

.carte__compte {
    color: var(--couleur_texte_discret);
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: var(--espacement_court);
}

/*
 * Resume en tete d'un ecran de travail.
 *
 * Intention : donner au technicien ses trois reperes d'un seul coup d'oeil, le client, la reference
 * de l'affaire et l'etat du rapport, avant le detail documentaire. Un filet d'accent sur le bord
 * gauche distingue ce bloc des cartes ordinaires sans introduire de couleur de fond supplementaire.
 */

.resume {
    border-left: 3px solid var(--couleur_accent);
}

.resume__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacement_moyen);
    margin-bottom: var(--espacement_moyen);
}

.resume__intitule {
    margin: 0;
    color: var(--couleur_texte_discret);
    font-size: 0.8rem;
}

/* Le nom du client est l'information la plus cherchee de l'ecran : il porte le plus fort contraste. */
.resume__client {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}

.resume__reference {
    margin: 0.15rem 0 0 0;
    color: var(--couleur_accent);
    font-weight: 600;
}

.resume__etat {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacement_court);
}

/*
 * Jetons d'etat : une information courte et categorielle, lisible sans lire la phrase qui la
 * porterait. Le jeton neutre sert de base, les variantes ne changent que la couleur.
 */

.jeton {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--couleur_bordure);
    border-radius: var(--rayon);
    background: var(--couleur_fond);
    color: var(--couleur_texte_discret);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.jeton--en_cours {
    border-color: var(--couleur_accent);
    background: var(--couleur_accent_clair);
    color: var(--couleur_accent);
}

.jeton--fige {
    border-color: var(--couleur_succes);
    color: var(--couleur_succes);
}

/*
 * Rapport annule et remplace : le document existe toujours et reste consultable, mais il ne fait
 * plus foi. Le texte barre le dit sans ambiguite, la ou une simple couleur pale se confondrait avec
 * un affichage estompe.
 */
.jeton--remplace {
    border-color: var(--couleur_alerte);
    color: var(--couleur_alerte);
    text-decoration: line-through;
}

/*
 * Lien vers le maillon suivant de la chaine des annulations. Discret a cote du jeton d'etat qu'il
 * complete, mais souligne pour rester reconnaissable comme un lien.
 */
.lien_de_chaine {
    font-size: 0.8rem;
    color: var(--couleur_texte_discret);
}

/* Tableaux de listes */

/* Un tableau large defile dans son propre cadre : la page ne part jamais de travers. */
.carte {
    overflow-x: auto;
}

.liste {
    width: 100%;
    border-collapse: collapse;
    background: var(--couleur_surface);
}

.liste th,
.liste td {
    text-align: left;
    padding: var(--espacement_court) var(--espacement_moyen);
    border-bottom: 1px solid var(--couleur_bordure);
}

.liste th {
    background: var(--couleur_accent_clair);
    font-weight: 600;
}

.liste tbody tr:hover {
    background: var(--couleur_accent_clair);
}

/*
 * Valeurs qui perdent leur sens si elles sont coupees : une date, une reference de rapport ou un
 * numero d'affaire se lisent d'un seul tenant. Sans cela, "30 Jan. 26 16:17" s'etale sur trois
 * lignes et une ligne de tableau devient quatre fois trop haute pour ce qu'elle porte.
 */
.liste__cellule--insecable {
    white-space: nowrap;
}

/* Etats */

.etat--succes {
    color: var(--couleur_succes);
    font-weight: 600;
}

.etat--alerte {
    color: var(--couleur_alerte);
    font-weight: 600;
}

/*
 * Etat d'attente : ni acquis, ni fautif.
 *
 * Un rapport en cours ou une masse en stabilisation ne sont pas des anomalies, seulement des etapes
 * non terminees. Les peindre en rouge ferait croire a un probleme, les peindre en vert leur donnerait
 * l'air acheve. Cette troisieme nuance complete donc la paire succes et alerte, avec le meme poids
 * de trait pour rester de la meme famille.
 */
.etat--attente {
    color: var(--couleur_texte_discret);
    font-weight: 600;
}


.message_vide {
    color: var(--couleur_texte_discret);
    font-style: italic;
}

/* Pied de page */

.pied {
    padding: var(--espacement_moyen) var(--espacement_long);
    color: var(--couleur_texte_discret);
    font-size: 0.85rem;
    border-top: 1px solid var(--couleur_bordure);
}

/* Listes : recherche, filtres et tri */

.liste_filtres {
    display: block;
}

.liste_filtres__global {
    display: inline-flex;
    align-items: center;
    gap: var(--espacement_court);
    margin-bottom: var(--espacement_moyen);
}

.liste_filtres__intitule {
    color: var(--couleur_texte_discret);
}

.liste_filtres input[type="search"],
.liste_filtres input[type="text"] {
    font-family: var(--police);
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--couleur_bordure);
    border-radius: var(--rayon);
    background: var(--couleur_surface);
    color: var(--couleur_texte);
}

.liste_filtres__global input[type="search"] {
    min-width: 260px;
}

/*
 * Un filtre en liste deroulante place hors d'un tableau, comme celui de l'accueil, ne doit pas
 * s'etirer sur toute la largeur disponible : la largeur pleine ne vaut que pour une cellule de
 * colonne, ou elle epouse la colonne.
 */
.liste_filtres__global .liste__filtre_choix {
    width: auto;
}

.liste__ligne_de_filtres th {
    background: var(--couleur_surface);
    padding-top: var(--espacement_court);
    padding-bottom: var(--espacement_court);
}

.liste__ligne_de_filtres input[type="text"] {
    width: 100%;
}

.liste__tri {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.liste__tri:hover {
    text-decoration: underline;
}

.liste__tri_sens {
    font-size: 0.7rem;
    color: var(--couleur_accent);
}

.liste__cellule--droite {
    text-align: right;
}

.liste__resume {
    color: var(--couleur_texte_discret);
    font-size: 0.85rem;
    margin-top: var(--espacement_court);
}

/* Pagination des listes : meme barre pour toutes, sous le tableau */

.liste__pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espacement_court);
    margin-top: var(--espacement_court);
}

.liste__pagination_position {
    color: var(--couleur_texte_discret);
    font-size: 0.85rem;
}

/* Boutons */

.bouton {
    font-family: var(--police);
    font-size: 0.9rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--couleur_accent);
    border-radius: var(--rayon);
    background: var(--couleur_accent);
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.bouton:hover {
    filter: brightness(1.1);
}

.bouton--discret {
    background: var(--couleur_surface);
    color: var(--couleur_accent);
}

/*
 * Bouton d'action destructrice. La couleur d'alerte le distingue des actions ordinaires, pour qu'une
 * suppression ne se declenche jamais par un geste machinal a l'endroit ou l'on attendait Enregistrer.
 */
.bouton--danger {
    border-color: var(--couleur_alerte);
    background: var(--couleur_alerte);
    color: #ffffff;
}

/* Bouton sans action possible : visible mais clairement inerte, aux extremites de la pagination */

.bouton--inactif {
    opacity: 0.45;
    cursor: default;
    color: var(--couleur_texte_discret);
    border-color: var(--couleur_texte_discret);
}

.bouton--inactif:hover {
    filter: none;
}

/*
 * Boutons d'action reduits a leur icone.
 *
 * Le libelle n'est pas affiche : il est porte par l'infobulle et par l'annonce vocale. La cible
 * garde donc une taille confortable a la souris, une icone seule ne devant jamais devenir un point
 * difficile a atteindre. Les dimensions sont fixees ici et nulle part ailleurs, si bien que toutes
 * les actions de l'application ont exactement la meme empreinte.
 */

.bouton--icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    vertical-align: middle;
}

/*
 * Sigle affiche a la place d'un dessin, pour le certificat et le constat.
 *
 * Il occupe la meme empreinte qu'une icone, puisqu'il est pose dans le meme bouton : les actions
 * restent alignees entre elles, qu'elles soient dessinees ou ecrites. La graisse et l'espacement
 * des lettres compensent la petite taille, deux capitales devant se lire aussi vite qu'un trace.
 */

.sigle {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
}

/*
 * Trace des icones. Le contour suit currentColor, donc l'icone prend la couleur du bouton qui la
 * porte, sans qu'aucun dessin ait a connaitre le theme.
 */

.icone {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Plusieurs actions sur une meme ligne restent separees et alignees entre elles. */

.actions_de_ligne {
    display: inline-flex;
    align-items: center;
    gap: var(--espacement_court);
    justify-content: flex-end;
}

/* Colonne d'action des listes */

.liste__cellule--action {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Fiches de consultation */

.fiche__titre {
    margin: 0 0 var(--espacement_court) 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.fiche__actions {
    margin-top: var(--espacement_moyen);
    display: flex;
    gap: var(--espacement_court);
}

/*
 * Etat d'emission annonce en tete de fiche.
 *
 * Il suit immediatement le numero du rapport et doit se lire avec lui, d'ou un rapprochement
 * volontaire du titre qui le precede et un ecart normal avec le premier bloc qui le suit.
 */
.fiche__etat {
    margin: 0 0 var(--espacement_moyen) 0;
}

.sous_titre {
    margin: var(--espacement_moyen) 0 var(--espacement_court) 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--couleur_accent);
}

.proprietes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--espacement_court) var(--espacement_moyen);
    margin: 0 0 var(--espacement_moyen) 0;
}

.propriete {
    display: flex;
    flex-direction: column;
}

.propriete__intitule {
    color: var(--couleur_texte_discret);
    font-size: 0.8rem;
}

.propriete__valeur {
    margin: 0;
}

/*
 * Densite et relief des blocs d'une fiche de consultation.
 *
 * Intention : la fiche empile des blocs courts. Avec l'espacement des cartes ordinaires, faites pour
 * porter de longs tableaux, l'ensemble se delayait en hauteur et tous les blocs se ressemblaient. On
 * resserre donc les marges, et on donne au titre de chaque bloc un vrai statut de titre : petites
 * capitales sur un filet de separation, dans la couleur d'accent deja utilisee par les sous titres.
 * La hierarchie devient alors lisible sans ajouter ni couleur ni ornement, ce qui convient a un
 * outil de laboratoire.
 */

.fiche .carte {
    padding: var(--espacement_court) var(--espacement_moyen) var(--espacement_moyen);
    margin-bottom: var(--espacement_court);
}

.fiche .carte__titre {
    margin: 0 0 var(--espacement_court) 0;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--couleur_bordure);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--couleur_accent);
}

/*
 * Les couples intitule et valeur d'une fiche sont plus serres que dans un formulaire : l'intitule
 * est un simple repere, la valeur porte l'information et doit ressortir. La colonne est aussi plus
 * etroite, de facon a tenir plus de couples par ligne sans que la valeur ne se coupe.
 */
.fiche .proprietes {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--espacement_court) var(--espacement_moyen);
    margin: 0;
}

.fiche .propriete__intitule {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fiche .propriete__valeur {
    font-weight: 600;
    line-height: 1.35;
}

/* Un tableau de synthese colle au bord du bloc : la carte porte deja le retrait. */
.fiche .carte .liste {
    margin-bottom: 0;
}

/* Fenetre superposee */

.fenetre {
    position: fixed;
    inset: 0;
    background: rgba(31, 41, 51, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--espacement_long);
    overflow-y: auto;
    z-index: 10;
}

.fenetre[hidden] {
    display: none;
}

.fenetre__panneau {
    position: relative;
    background: var(--couleur_surface);
    border-radius: var(--rayon);
    padding: var(--espacement_long);
    max-width: 1000px;
    width: 100%;
}

/*
 * Un ecran de 15 pouces, courant chez les techniciens, offre bien moins de hauteur qu'un ecran de
 * bureau : la marge exterieure et le padding interieur, penses pour un grand ecran, y mangeaient a
 * eux seuls plusieurs centaines de pixels et poussaient le bas des ecrans riches (mesure, avec ses
 * quatre voyants) hors de vue avant meme d'atteindre la grille de pesees.
 */
@media (max-height: 800px) {
    .fenetre {
        padding: var(--espacement_court);
    }

    .fenetre__panneau {
        padding: var(--espacement_moyen);
    }
}

.fenetre__fermeture {
    position: absolute;
    top: var(--espacement_court);
    right: var(--espacement_court);
    border: none;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--couleur_texte_discret);
}

.fenetre__fermeture:hover {
    color: var(--couleur_texte);
}

.sans_defilement {
    overflow: hidden;
}

/*
 * Documents emis : certificat d'etalonnage et constat de verification.
 *
 * La mise en page vise le format A4 portrait. Les dimensions sont exprimees en millimetres, pour
 * que l'apercu a l'ecran et l'impression coincident.
 */

.corps_document {
    background: #9aa3ad;
    display: block;
}

.document {
    font-family: Calibri, Carlito, var(--police);
    font-size: 9pt;
    color: #000000;
}

.document__page {
    position: relative;
    width: 210mm;
    min-height: 297mm;
    padding: 14mm 14mm 20mm 14mm;
    margin: 0 auto 6mm auto;
    background: #ffffff;
    box-sizing: border-box;
}

.document__laboratoire {
    font-size: 9pt;
    margin-bottom: 8mm;
    display: flex;
    align-items: flex-start;
    gap: 6mm;
}

.document__logo {
    width: 30mm;
    height: auto;
}

/* Apercu du logo dans Config CE/CV : la largeur d'impression, sur un fond qui montre la transparence. */
.logo_des_documents__apercu {
    display: block;
    width: 30mm;
    height: auto;
    margin: var(--espacement_court) 0 var(--espacement_moyen);
    padding: var(--espacement_court);
    border: 1px solid var(--couleur_bordure);
    border-radius: var(--rayon);
    background-color: var(--couleur_surface);
}

.document__laboratoire_texte {
    padding-top: 1mm;
}

/* Le nom du laboratoire est le seul element en gras du bloc adresse. */
.document__laboratoire_nom {
    font-weight: 700;
}

/*
 * Ligne de contact du laboratoire : telephone puis courriel.
 *
 * Les intitules sont alignes a droite et le deux-points occupe une colonne fixe, de sorte que les
 * deux lignes presentent leurs deux-points l'un sous l'autre, comme sur le document de reference.
 */
.document__laboratoire_contact {
    display: flex;
    gap: 1.5mm;
}

.document__laboratoire_contact_intitule {
    width: 18mm;
    text-align: right;
    flex: none;
}

.document__laboratoire_contact_separateur {
    width: 2mm;
    flex: none;
    text-align: center;
}

.document__titre {
    text-align: center;
    margin-bottom: 10mm;
}

/*
 * Le titre du document reprend l'interlettrage normal du document de reference : l'ecartement
 * precedent elargissait le mot bien au dela du modele.
 */
.document__titre_fr {
    font-size: 15pt;
    font-weight: 700;
}

.document__titre_en {
    font-size: 10pt;
    font-style: italic;
}

.document__numero {
    margin-top: 6mm;
    font-size: 13pt;
    font-weight: 400;
}

.document__annule_remplace {
    margin-top: 2mm;
    font-size: 9pt;
    font-style: italic;
}

.document__bloc {
    display: flex;
    gap: 2mm;
    margin-bottom: 3mm;
}

.document__intitule {
    width: 78mm;
    text-align: right;
    flex: none;
}

.document__separateur {
    width: 3mm;
    flex: none;
    text-align: center;
}

.document__intitule_fr {
    display: block;
    font-weight: 700;
}

/*
 * Les intitules de caracteristiques (DESIGNATION, CONSTRUCTEUR, TYPE, N° DE LOT, dates) sont en
 * graisse normale sur le document de reference. Seuls les titres de section et le bloc DELIVRE A
 * restent en gras, d'ou cette exception appliquee aux blocs et non aux sections.
 */
.document__bloc .document__intitule_fr {
    font-weight: 400;
}

.document__bloc--accentue .document__intitule_fr {
    font-weight: 700;
}

.document__intitule_en {
    display: block;
    font-style: italic;
    font-size: 8pt;
}

.document__valeur_en {
    font-style: italic;
    font-size: 8pt;
}

/* Le nom du client est mis en avant sous le libelle DELIVRE A. */
.document__valeur_client {
    font-weight: 700;
}

.document__section {
    font-size: 9pt;
    margin: 8mm 0 3mm 0;
}

.document__section .document__intitule_fr,
.document__section .document__intitule_en {
    text-align: left;
}

/*
 * Les paragraphes sont alignes a gauche, comme sur le document de reference : la justification
 * etirait les espaces et decalait toutes les coupures de ligne par rapport au modele.
 */
.document__paragraphe {
    margin: 0 0 3mm 6mm;
    text-align: left;
}

.document__paragraphe--anglais {
    font-style: italic;
    font-size: 8pt;
}

.document__dates {
    text-align: right;
    margin-top: 12mm;
}

/*
 * Bas de la premiere page : a gauche la pagination annoncee et le bloc COFRAC empiles, a droite le
 * responsable et sa signature. Les deux colonnes sont calees en haut pour que la mention de
 * pagination reste au niveau du nom du signataire, comme sur le document de reference.
 */
.document__signature {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 6mm;
    gap: 6mm;
}

/*
 * Colonne de gauche : mention de pagination puis logo et texte d'accreditation. Le leger retrait
 * a gauche reprend celui du document de reference, ou ce bloc ne touche pas la marge.
 */
.document__mentions {
    display: flex;
    flex-direction: column;
    gap: 2mm;
    padding-left: 4mm;
}

.document__pagination_annoncee {
    font-size: 8.5pt;
}

.document__pagination_annoncee_en {
    font-style: italic;
    font-size: 7.5pt;
}

.document__accreditation {
    display: flex;
    align-items: center;
    gap: 2mm;
}

.document__logo_cofrac {
    width: 18mm;
    height: auto;
}

.document__accreditation_texte {
    font-size: 6pt;
    line-height: 1.2;
}

.document__signataire {
    text-align: right;
}

.document__signataire_nom {
    margin-top: 2mm;
    font-weight: 700;
}

/*
 * Signature manuscrite : elle chevauche la ligne de signature numerique, comme sur le document de
 * reference, ou le paraphe est plus petit et remonte au niveau de cette ligne. Le retrait a droite
 * la ramene vers le centre du bloc plutot que contre la marge.
 */
.document__signature_manuscrite {
    position: relative;
    margin-top: 0;
    min-height: 18mm;
}

.document__signature_manuscrite img {
    position: absolute;
    right: 10mm;
    top: 1mm;
    width: 22mm;
    height: auto;
}

.document__signature_numerique {
    display: block;
    font-size: 7pt;
    font-style: italic;
    padding-top: 0;
    text-align: left;
}

.document__rappel {
    text-align: center;
    font-weight: 700;
    margin-bottom: 8mm;
}

/*
 * Tableau des mesures.
 *
 * La disposition fixe repartit la largeur par colonne au lieu de la laisser au contenu : sur le
 * document de reference les intitules longs reviennent a la ligne dans un en-tete haut, alors que
 * les colonnes de valeurs restent etroites.
 */
.document__tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 8pt;
    table-layout: fixed;
}

.document__tableau th,
.document__tableau td {
    border: 0.2mm solid #000000;
    padding: 1mm 1.2mm;
    text-align: center;
}

/* Les en-tetes se replient sur plusieurs lignes, les valeurs restent sur une seule. */
.document__tableau th {
    font-weight: 700;
    vertical-align: middle;
}

.document__tableau td {
    font-size: 7.5pt;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/*
 * Largeurs de colonnes du tableau du certificat, relevees sur le document de reference : numero de
 * serie, constructeur, type, masse nominale, masse conventionnelle, incertitudes, operations.
 * Les deux dernieres colonnes sont les plus larges car leurs intitules tiennent sur trois lignes.
 */
.document__tableau--certificat th:nth-child(1) { width: 12%; }
.document__tableau--certificat th:nth-child(2) { width: 14%; }
.document__tableau--certificat th:nth-child(3) { width: 12%; }
.document__tableau--certificat th:nth-child(4) { width: 14%; }
.document__tableau--certificat th:nth-child(5) { width: 16%; }
.document__tableau--certificat th:nth-child(6) { width: 13%; }
.document__tableau--certificat th:nth-child(7) { width: 19%; }

/*
 * Largeurs de colonnes du tableau du constat : il publie une conformite a la place de la masse
 * conventionnelle et de l'incertitude, ce qui lui laisse une colonne de moins.
 */
.document__tableau--constat th:nth-child(1) { width: 14%; }
.document__tableau--constat th:nth-child(2) { width: 16%; }
.document__tableau--constat th:nth-child(3) { width: 14%; }
.document__tableau--constat th:nth-child(4) { width: 16%; }
.document__tableau--constat th:nth-child(5) { width: 18%; }
.document__tableau--constat th:nth-child(6) { width: 22%; }

.document__legende_operations {
    position: absolute;
    left: 14mm;
    right: 14mm;
    bottom: 18mm;
    text-align: center;
    font-size: 7.5pt;
    font-style: italic;
}

.document__pied {
    position: absolute;
    left: 14mm;
    right: 14mm;
    bottom: 8mm;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 7pt;
}

.document__pied_centre {
    text-align: center;
    flex: 1;
}

@media print {
    .corps_document {
        background: #ffffff;
    }

    .document__page {
        margin: 0;
        /* Legerement inferieur a la hauteur d'une page, pour eviter qu'un arrondi de rendu ne
           provoque une page blanche supplementaire. */
        height: 296mm;
        min-height: 0;
        page-break-after: always;
    }

    .document__page:last-child {
        page-break-after: auto;
    }

    @page {
        size: A4 portrait;
        margin: 0;
    }
}

/* Constat de verification : caracteristiques sur deux colonnes et regle de decision */

.document__paire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2mm;
}

.document__bloc--etroit .document__intitule {
    width: 52mm;
}

.document__regle {
    margin: 4mm 0;
}

/*
 * Le constat porte plus de contenu que le certificat sur sa premiere page : la regle de decision
 * s'ajoute aux caracteristiques. Les blocs de dates et de signature y sont donc moins espaces,
 * pour que le paraphe reste au dessus du pied de page.
 */
.document__page--constat .document__dates {
    margin-top: 3mm;
}

/* Le bloc du responsable descend d'une ligne : il se detache des dates qui le precedent. */
.document__page--constat .document__signature {
    margin-top: 6mm;
}

/* Le paraphe est un peu plus compact sur le constat, dont la premiere page est plus chargee. */
.document__page--constat .document__signature_manuscrite {
    min-height: 15mm;
}

.document__page--constat .document__signature_manuscrite img {
    width: 19mm;
}

.document__regle .document__paragraphe {
    margin-left: 0;
}

.document__formule {
    font-weight: 700;
    margin: 2mm 0;
}

/* Formulaires et messages */

.message {
    border-left: 3px solid var(--couleur_bordure);
    background: var(--couleur_surface);
    padding: var(--espacement_moyen);
    margin-bottom: var(--espacement_moyen);
}

.message--succes {
    border-left-color: var(--couleur_succes);
}

.message--alerte {
    border-left-color: var(--couleur_alerte);
}

.message--information {
    border-left-color: var(--couleur_accent);
}

.message__titre {
    margin: 0 0 var(--espacement_court) 0;
    font-weight: 600;
}

.message__liste {
    margin: 0;
    padding-left: var(--espacement_long);
}

.formulaire {
    display: flex;
    flex-direction: column;
    gap: var(--espacement_moyen);
}

.formulaire__groupe {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--espacement_moyen);
}

/*
 * Sans cette regle, un groupe masque par l'attribut hidden (via data-affiche_si) restait visible :
 * display: grid, pose par la regle precedente sur la classe, l'emporte sur le display: none impose
 * par le navigateur pour [hidden], les deux ayant la meme specificite et la classe etant une regle
 * auteur alors que [hidden] n'est qu'un defaut de la feuille utilisateur-agent.
 */
.formulaire__groupe[hidden] {
    display: none;
}

/*
 * Description d'une masse : deux colonnes fixes, jamais plus, y compris en fenetre superposee.
 *
 * Ce bloc compte une dizaine de champs courts (masse nominale, classe, identification...), qui se
 * lisent par paires liees (valeur et unite, constructeur et matiere). Sur un panneau de fenetre
 * superposee, la grille auto-fill de .formulaire__groupe en tirait trois ou quatre colonnes trop
 * serrees, chaque champ perdant la largeur necessaire a son intitule et à ses valeurs.
 *
 * !important est necessaire ici : [data-fenetre_contenu] .formulaire__groupe--deux_colonnes a
 * exactement la meme specificite que [data-fenetre_contenu] .formulaire__groupe (un attribut, une
 * classe), et cette derniere est ecrite plus loin dans la feuille, donc l'emporterait sinon a
 * specificite egale.
 */
.formulaire__groupe--deux_colonnes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: none !important;
}

/*
 * Delimite un groupe de champs comme une zone a part, distincte de ses voisins.
 *
 * Plusieurs formulaire__groupe se suivaient en simple flux, separes du seul gap habituel. Un
 * groupe a nombre impair de champs (Classe seule sur sa ligne, par exemple) y laissait une case
 * vide dont rien ne disait qu'elle appartenait a ce groupe et pas au suivant : l'oeil lisait un
 * trou incoherent plutot que deux zones distinctes.
 */
.formulaire__groupe--bloc {
    padding: var(--espacement_moyen);
    background: var(--couleur_fond);
    border-radius: var(--rayon);
    margin-bottom: var(--espacement_moyen);
}

.formulaire__actions {
    display: flex;
    gap: var(--espacement_court);
    align-items: center;
}

.champ {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Meme raison que .formulaire__groupe[hidden] : display: flex l'emporterait sinon sur [hidden]. */
.champ[hidden] {
    display: none;
}

.champ__intitule {
    font-size: 0.82rem;
    color: var(--couleur_texte_discret);
}

.champ__requis {
    color: var(--couleur_alerte);
}

.champ__saisie {
    font-family: var(--police);
    font-size: 0.95rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--couleur_bordure);
    border-radius: var(--rayon);
    background: var(--couleur_surface);
    color: var(--couleur_texte);
}

.champ__saisie:focus {
    outline: 2px solid var(--couleur_accent);
    outline-offset: 1px;
}

.champ__aide {
    font-size: 0.78rem;
    color: var(--couleur_texte_discret);
}

/*
 * Champ a choix multiples, presente en cases a cocher.
 *
 * Sert aux roles d'un utilisateur, qui se cumulent : une liste deroulante ferait croire qu'il faut
 * en choisir un seul. Le cadre du navigateur est retire au profit du meme trait que les autres
 * champs, pour que le bloc ne detonne pas au milieu du formulaire.
 */
.champ_multiple {
    display: flex;
    flex-direction: column;
    gap: var(--espacement_court);
    border: 1px solid var(--couleur_bordure);
    border-radius: var(--rayon);
    padding: var(--espacement_moyen);
    margin: 0;
}

.champ_multiple__option {
    display: flex;
    align-items: center;
    gap: var(--espacement_court);
    font-size: 0.95rem;
}

/* Filtre de colonne par liste déroulante */

/*
 * Filtre en liste deroulante d'une colonne.
 *
 * La largeur des colonnes s'ajuste au contenu, si bien qu'une colonne etroite reduit ce menu a
 * quelques caracteres. Sans place reservee a droite, le navigateur dessine alors sa fleche par
 * dessus le texte de l'option choisie, qui devient illisible. Le retrait a droite lui laisse donc
 * sa place, et une largeur minimale empeche le menu de devenir plus etroit que son propre libelle.
 */
.liste__filtre_choix {
    width: 100%;
    min-width: 6rem;
    font-family: var(--police);
    font-size: 0.85rem;
    padding: 0.25rem 1.5rem 0.25rem 0.25rem;
    border: 1px solid var(--couleur_bordure);
    border-radius: var(--rayon);
    background: var(--couleur_surface);
    color: var(--couleur_texte);
}

/* Saisie de la mise au laboratoire, dans la liste des masses */

.depot {
    display: flex;
    gap: 4px;
    align-items: center;
}

.depot .champ__saisie {
    font-size: 0.8rem;
    padding: 0.2rem 0.3rem;
}

/*
 * Visa de qui a note la mise au laboratoire, en retrait de la date : c'est un complement de
 * tracabilite, il ne doit pas concurrencer l'heure du depot, qui est l'information cherchee.
 */
.depot__auteur {
    color: var(--couleur_texte_discret);
    font-size: 0.8rem;
}

/* Panneau d'état de la mesure */

.voyants {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--espacement_moyen);
    margin-bottom: var(--espacement_long);
}

.voyant {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--espacement_moyen);
    border-radius: var(--rayon);
    color: #ffffff;
}

.voyant--bon {
    background: var(--couleur_succes);
}

.voyant--alerte {
    background: var(--couleur_alerte);
}


.voyant__intitule {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.9;
}

.voyant__valeur {
    font-size: 1.15rem;
    font-weight: 700;
}

.voyant__detail {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Meme raison que le resserrement de la fenetre superposee : sur un ecran de 15 pouces, les quatre
   voyants de l'ecran de mesure prenaient a eux seuls une hauteur qui poussait la grille de pesees
   hors de vue. */
@media (max-height: 800px) {
    .voyants {
        gap: var(--espacement_court);
        margin-bottom: var(--espacement_moyen);
    }

    .voyant {
        padding: var(--espacement_court);
    }
}

/* ------------------------------------------------------------------------- */
/* Module de statistiques                                                    */
/*                                                                           */
/* Les graphiques sont du SVG produit par le serveur : aucune bibliotheque    */
/* exterieure n'est chargee. Les couleurs viennent des variables de theme,    */
/* jamais ecrites en dur, pour qu'un changement de charte porte partout.      */
/* ------------------------------------------------------------------------- */

.statistiques__periode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacement_moyen);
}

.statistiques__champ {
    display: flex;
    align-items: center;
    gap: var(--espacement_court);
    color: var(--couleur_texte_discret);
}

.statistiques__rappel {
    flex-basis: 100%;
    font-size: 0.85rem;
    color: var(--couleur_texte_discret);
}

/* Bandeau des chiffres cles. Les tuiles se repartissent la largeur et
   repassent a la ligne sur un ecran etroit, sans largeur fixe. */
.statistiques__cles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacement_moyen);
    margin-bottom: var(--espacement_moyen);
}

.statistiques__cle {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: var(--espacement_moyen);
    background: var(--couleur_surface);
    border: 1px solid var(--couleur_bordure);
    border-radius: var(--rayon);
}

.statistiques__cle_valeur {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--couleur_accent);
}

.statistiques__cle_libelle {
    font-size: 0.8rem;
    color: var(--couleur_texte_discret);
}

/* Onglets des cinq axes. */
.onglets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacement_court);
    margin-bottom: var(--espacement_moyen);
    border-bottom: 1px solid var(--couleur_bordure);
}

.onglets__lien {
    padding: var(--espacement_court) var(--espacement_moyen);
    color: var(--couleur_texte_discret);
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--rayon) var(--rayon) 0 0;
}

.onglets__lien:hover {
    background: var(--couleur_accent_clair);
    color: var(--couleur_accent);
}

/* L'onglet actif se prolonge dans le contenu : sa bordure basse est masquee
   par un fond de la meme couleur que la surface. */
.onglets__lien--actif {
    background: var(--couleur_surface);
    color: var(--couleur_accent);
    font-weight: 600;
    border-color: var(--couleur_bordure);
    margin-bottom: -1px;
    border-bottom: 1px solid var(--couleur_surface);
}

/* Valeur qui demande une attention : masse non conforme, deriveuse, retard. */
.statistiques__alerte {
    color: var(--couleur_alerte);
    font-weight: 600;
}

/* Graphiques en SVG. La mise a l'echelle se fait par la boite, le dessin
   interne travaille dans un repere fixe. */
.graphique {
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--espacement_moyen);
    overflow: visible;
}

.graphique__barre {
    fill: var(--couleur_accent);
}

.graphique__barre:hover {
    fill: var(--couleur_texte);
}

.graphique__courbe {
    fill: none;
    stroke: var(--couleur_accent);
    stroke-width: 2;
    stroke-linejoin: round;
}

.graphique__point {
    fill: var(--couleur_accent);
}

.graphique__point:hover {
    fill: var(--couleur_alerte);
}

.graphique__grille {
    stroke: var(--couleur_bordure);
    stroke-width: 1;
}

.graphique__graduation,
.graphique__abscisse,
.graphique__libelle_ligne,
.graphique__valeur {
    font-family: var(--police);
    font-size: 12px;
    fill: var(--couleur_texte_discret);
}

.graphique__valeur {
    fill: var(--couleur_texte);
}

/* Barre de filtre d'un tableau court, ajoutee par le script au dessus du tableau.
   Reprend la presentation des filtres des listes principales, pour que le geste soit le meme
   partout, que le filtrage se fasse dans le navigateur ou sur le serveur. */
.filtre_de_tableau {
    display: flex;
    align-items: center;
    gap: var(--espacement_court);
    margin-top: var(--espacement_moyen);
}

.filtre_de_tableau__intitule {
    color: var(--couleur_texte_discret);
}

.filtre_de_tableau input[type="search"] {
    flex: 0 1 320px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--couleur_bordure);
    border-radius: var(--rayon);
    font-family: var(--police);
}

.filtre_de_tableau__resume {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--couleur_texte_discret);
}

/* Courbes multiples : quatre grandeurs sur un meme repere, chacune sur son echelle.
   Les teintes derivent des couleurs du theme et restent distinguables en impression noir et blanc
   grace au trait, plein ou discontinu.

   Le remplissage n'est pose que sur les points : applique a une polyligne, il ferme la courbe et la
   transforme en aplat qui masque les autres series. */
.graphique__serie--1 { stroke: var(--couleur_accent); }
.graphique__serie--2 { stroke: var(--couleur_succes); }
.graphique__serie--3 { stroke: var(--couleur_alerte); }
.graphique__serie--4 { stroke: var(--couleur_texte_discret); }

circle.graphique__serie--1 { fill: var(--couleur_accent); }
circle.graphique__serie--2 { fill: var(--couleur_succes); }
circle.graphique__serie--3 { fill: var(--couleur_alerte); }
circle.graphique__serie--4 { fill: var(--couleur_texte_discret); }

polyline.graphique__serie--1,
polyline.graphique__serie--2,
polyline.graphique__serie--3,
polyline.graphique__serie--4 { fill: none; }

polyline.graphique__serie--2 { stroke-dasharray: 6 3; }
polyline.graphique__serie--3 { stroke-dasharray: 2 3; }
polyline.graphique__serie--4 { stroke-dasharray: 8 2 2 2; }

.graphique__legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacement_moyen);
    margin: var(--espacement_court) 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.graphique__legende_entree {
    display: flex;
    align-items: center;
    gap: var(--espacement_court);
}

.graphique__legende_trait {
    display: inline-block;
    width: 22px;
    height: 3px;
    border-radius: 2px;
}

/* Le trait de legende reprend la couleur de sa serie, portee par la propriete de remplissage. */
.graphique__legende_trait.graphique__serie--1 { background: var(--couleur_accent); }
.graphique__legende_trait.graphique__serie--2 { background: var(--couleur_succes); }
.graphique__legende_trait.graphique__serie--3 { background: var(--couleur_alerte); }
.graphique__legende_trait.graphique__serie--4 { background: var(--couleur_texte_discret); }

.graphique__legende_domaine {
    color: var(--couleur_texte_discret);
}

/* Reperes statistiques de la periode : les deux extremes et la mediane.
   Ils se lisent comme des reperes, jamais comme une courbe : trait fin et discontinu, pose sous
   celle qu'il ne doit pas concurrencer. Les extremes bornent en orange, la mediane situe en vert
   le niveau habituel de la salle. Les tirets different entre les deux roles, de sorte que les
   lignes restent distinctes meme imprimees en noir et blanc. */
.graphique__extreme,
.graphique__mediane {
    stroke-width: 0.75;
    fill: none;
}

.graphique__extreme {
    stroke: var(--couleur_repere);
    stroke-dasharray: 4 3;
}

.graphique__mediane {
    stroke: var(--couleur_succes);
    stroke-dasharray: 2 3;
}

.graphique__extreme_valeur,
.graphique__mediane_valeur {
    font-family: var(--police);
    font-size: 11px;
}

.graphique__extreme_valeur {
    fill: var(--couleur_repere);
}

.graphique__mediane_valeur {
    fill: var(--couleur_succes);
}

/* Reticule de lecture des graphiques sans echelle commune.
   Les quatre grandeurs d'ambiance sont tracees chacune sur sa propre amplitude : sans reticule, la
   forme se voit mais la valeur se devine. La ligne marque le mois survole, le cartouche donne les
   quatre valeurs a la fois, chacune a la couleur de sa courbe. */
.graphique__reticule {
    stroke: var(--couleur_texte_discret);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    pointer-events: none;
}

/* Les zones sensibles couvrent le repere colonne par colonne : elles captent la souris sans jamais
   se voir, et n'arretent pas le survol des points qui portent deja leur propre infobulle. */
.graphique__zone_sensible {
    fill: transparent;
    cursor: crosshair;
}

.graphique__zone_sensible:focus {
    outline: none;
}

/* Le cartouche flotte au dessus des courbes : il ne doit jamais capter la souris, sans quoi il
   fuirait le curseur en clignotant. */
.graphique__lecture {
    pointer-events: none;
}

.graphique__lecture_fond {
    fill: var(--couleur_fond);
    stroke: var(--couleur_bordure);
    stroke-width: 1;
}

.graphique__lecture_texte {
    font-family: var(--police);
    font-size: 12px;
}

.graphique__lecture_periode {
    fill: var(--couleur_texte);
    font-weight: 600;
}

/* Chaque ligne du cartouche reprend la couleur de sa serie : la lecture se rattache a la courbe
   sans avoir a consulter la legende. */
.graphique__lecture_ligne.graphique__serie--1 { fill: var(--couleur_accent); }
.graphique__lecture_ligne.graphique__serie--2 { fill: var(--couleur_succes); }
.graphique__lecture_ligne.graphique__serie--3 { fill: var(--couleur_alerte); }
.graphique__lecture_ligne.graphique__serie--4 { fill: var(--couleur_texte_discret); }

/* Annonce d'un critere de recherche sans colonne, dans le resume d'une liste. */
.liste__critere {
    margin-left: var(--espacement_court);
    padding: 0.1rem 0.5rem;
    background: var(--couleur_accent_clair);
    color: var(--couleur_accent);
    border-radius: var(--rayon);
}

/*
 * Formulaire ouvert dans une fenetre superposee : les champs se suivent de haut en bas.
 *
 * Sur une page entiere, la disposition en colonnes tire parti de la largeur disponible. Dans une
 * fenetre, elle disperse le regard : on remplit un formulaire court en descendant, pas en zigzag.
 * La fenetre est aussi moins large que la page, et deux colonnes y donnent des champs etroits.
 */
[data-fenetre_contenu] .formulaire__groupe {
    grid-template-columns: 1fr;
    max-width: 30rem;
}


/* Saisie qui ne designe aucune entree connue de la liste : le champ le dit avant l'enregistrement. */
.champ__saisie--inconnue {
    border-color: var(--couleur_alerte);
}

/*
 * Creation d'un rapport : le choix de l'affaire a gauche, la composition de la serie a droite.
 *
 * Le choix de l'affaire tient en un champ, la composition demande deux listes cote a cote : la
 * place leur est repartie en consequence. Sur un ecran etroit, les deux zones repassent l'une sous
 * l'autre plutot que de se comprimer.
 */
.creation_de_rapport {
    display: grid;
    grid-template-columns: minmax(240px, 25%) 1fr;
    gap: var(--espacement_moyen);
    align-items: start;
}

@media (max-width: 900px) {
    .creation_de_rapport {
        grid-template-columns: 1fr;
    }
}

/* Les cartes de la colonne de gauche se suivent sans marge propre, la grille les espace deja. */
.creation_de_rapport__affaire .carte:last-child {
    margin-bottom: 0;
}

/*
 * Composition de la serie : le parc du client, les commandes, la serie du rapport.
 *
 * Les deux listes ont la meme largeur, les commandes tiennent au milieu sur ce qu'il leur faut.
 */
.composition {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacement_moyen);
    align-items: start;
    margin-top: var(--espacement_court);
}

@media (max-width: 700px) {
    .composition {
        grid-template-columns: 1fr;
    }
}

.composition__colonne {
    display: flex;
    flex-direction: column;
    gap: var(--espacement_court);
    min-width: 0;
}

.composition__titre {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--couleur_texte_discret);
}

/* Nombre de masses de la liste, annonce a cote de son intitule. */
.composition__compte {
    display: inline-block;
    min-width: 1.6rem;
    padding: 0 0.35rem;
    border-radius: var(--rayon);
    background: var(--couleur_accent_clair);
    color: var(--couleur_accent);
    text-align: center;
}

.composition__liste {
    width: 100%;
    padding: var(--espacement_court);
    border: 1px solid var(--couleur_bordure);
    border-radius: var(--rayon);
    background: var(--couleur_surface);
    font-family: var(--police);
    font-size: 0.9rem;
}

.composition__liste option {
    padding: 0.2rem 0.35rem;
    cursor: pointer;
}


/*
 * En-tete du bloc des masses : l'intitule a gauche, les actions a droite.
 *
 * Les actions sont en tete plutot qu'en pied : la hauteur du bloc depend du parc du client, et
 * chercher le bouton en bas d'une liste de quarante masses n'a pas de sens.
 */
.composition__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacement_moyen);
    margin-bottom: var(--espacement_court);
}

/* Le titre perd sa marge propre : l'en-tete espace deja ses deux cotes. */
.composition__entete .carte__titre {
    margin: 0;
}

.composition__entete .formulaire__actions {
    margin: 0;
}

/* Le bouton de creation rapide respire sous le champ auquel il se rapporte. */
.creation_de_rapport__affaire .formulaire__actions {
    margin-top: var(--espacement_moyen);
}

/* Filtre pose au dessus d'une liste de masses : il masque, il ne retire jamais. */
.composition__filtre {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--couleur_bordure);
    border-radius: var(--rayon);
    font-family: var(--police);
    font-size: 0.9rem;
}

/* Le bouton de bascule occupe toute la largeur de la liste qu'il commande, juste en dessous. */
.composition__colonne .bouton {
    justify-content: center;
    width: 100%;
}

/*
 * Sous la liste du parc, deux gestes se partagent la ligne : decrire une masse absente du parc, et
 * basculer tout ce qui est affiche. Le premier est rare mais bloquant quand il manque, le second est
 * courant : la place leur est repartie en consequence.
 */
.composition__actions {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: var(--espacement_court);
}

/* Client de l'affaire choisie, annonce sous la liste des numeros d'affaire. */
.affaire_choisie {
    display: flex;
    flex-direction: column;
    margin: var(--espacement_court) 0 0;
    padding: var(--espacement_court);
    border-left: 3px solid var(--couleur_accent);
    background: var(--couleur_accent_clair);
    color: var(--couleur_accent);
}

.affaire_choisie__nom {
    font-weight: 600;
}

/*
 * Adresse du client, une partie par ligne comme sur une enveloppe : rue, complement, code postal,
 * ville, pays. Elle est moins appuyee que le nom, qu'elle ne fait que preciser.
 */
.affaire_choisie__adresse {
    display: flex;
    flex-direction: column;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    font-weight: 400;
}

/*
 * Marque d'aide : une infobulle disponible sans occuper de place.
 *
 * Elle porte un curseur d'aide et reste atteignable au clavier, l'infobulle etant sinon reservee a
 * la souris.
 */
.indice_d_aide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: var(--espacement_court);
    border: 1px solid var(--couleur_accent);
    border-radius: 50%;
    color: var(--couleur_accent);
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 700;
    cursor: help;
    vertical-align: middle;
}

/* Le titre de l'ecran est moins detache de son contenu : la moitie de l'espace suffit. */
.contenu__titre {
    margin-bottom: var(--espacement_moyen);
}

/*
 * Champ a saisie assistee : le champ, puis ses propositions posees juste en dessous.
 *
 * La liste est rendue par l'application, une liste native ne se limitant pas en hauteur. Elle
 * s'arrete a dix entrees visibles et defile au dela : au dela, elle couvrirait l'ecran et masquerait
 * le formulaire qu'elle sert.
 */
.champ__suggestions {
    position: relative;
}

.champ__propositions {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    /* Dix entrees d'environ 1,9 rem, bordures comprises. */
    max-height: 19rem;
    margin: 0.15rem 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    background: var(--couleur_surface);
    border: 1px solid var(--couleur_bordure);
    border-radius: var(--rayon);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.champ__proposition {
    padding: 0.35rem var(--espacement_court);
    cursor: pointer;
}

.champ__proposition:hover,
.champ__proposition--active {
    background: var(--couleur_accent_clair);
    color: var(--couleur_accent);
}

/*
 * La carte du choix de l'affaire ne defile pas.
 *
 * Une carte ordinaire fait defiler son contenu quand il deborde, ce qui convient a un tableau large.
 * Ici, la liste des propositions se pose par dessus le formulaire : le defilement de la carte
 * ajoutait un second ascenseur et rognait la liste au lieu de la laisser sortir.
 */
.creation_de_rapport__affaire .carte {
    overflow: visible;
}

/*
 * Rappels du rapport : le client d'un cote, l'affaire de l'autre.
 *
 * Ce sont deux realites distinctes que le technicien verifie avant de mesurer : a qui appartiennent
 * les masses, et sous quelle commande elles sont etalonnees. Les separer evite de les lire comme une
 * seule adresse.
 */
.resume__rappels {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 2fr;
    gap: var(--espacement_court);
}

@media (max-width: 800px) {
    .resume__rappels {
        grid-template-columns: 1fr;
    }
}

/*
 * Chaque rappel s'etire a la hauteur de son voisin (etirement natif de la grille parente), et son
 * bouton « modifier » est pousse en bas, aligne a gauche. Sans cela, le bouton du bloc le plus
 * court remontait juste sous son contenu, quand celui du bloc le plus long restait plus bas : les
 * deux boutons ne se repondaient pas au meme niveau, ce qui se voit au premier coup d'oeil.
 */
.resume__rappel {
    display: flex;
    flex-direction: column;
    padding: var(--espacement_court);
    background: var(--couleur_fond);
    border-radius: var(--rayon);
}

.resume__rappel .actions_de_ligne {
    align-self: flex-start;
    margin-top: auto;
    padding-top: var(--espacement_court);
}

/* Les jetons d'etat suivent les proprietes de l'affaire, sans les detacher. */
.resume__rappel .resume__etat {
    margin-top: var(--espacement_court);
}

.resume__rappel_titre {
    margin: 0 0 var(--espacement_court);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--couleur_texte_discret);
}

/* Adresse du client, une partie par ligne comme sur une enveloppe. */
.resume__adresse {
    display: flex;
    flex-direction: column;
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--couleur_texte_discret);
}

/* La carte de rappel du rapport se lit d'un coup : elle n'a pas a occuper la hauteur d'un ecran. */
.carte.resume {
    padding: var(--espacement_court);
}

.carte.resume .resume__entete {
    margin-bottom: var(--espacement_court);
}

/* Dans un rappel compact, les proprietes n'ont pas a se detacher du bord bas du bloc. */
.resume__rappel .proprietes {
    margin-bottom: 0;
}

/*
 * Le bouton de creation d'une masse est cache tant qu'aucune affaire n'est choisie : le client, donc
 * le parc auquel la masse serait ajoutee, n'est pas encore connu. Cachee, la case ne doit pas rester
 * reservee dans la grille, sinon le bouton voisin ne prendrait pas la place laissee libre.
 */
.composition__actions [hidden] {
    display: none;
}

.composition__actions:has([hidden]) {
    grid-template-columns: 1fr;
}

/*
 * Rapport pret pour l'etape suivante : toute la serie est mesurable, ou toute est mesuree.
 *
 * Il se distingue d'un rapport simplement en cours : rien ne le retient, quelqu'un peut s'en saisir.
 */
.jeton--pret {
    border-color: var(--couleur_succes);
    background: var(--couleur_surface);
    color: var(--couleur_succes);
}

/*
 * Ecran de mesure : deux colonnes cote a cote.
 *
 * A gauche le resume de la masse, les mesures deja enregistrees et les conditions de la mesure en
 * cours. A droite la grille des determinations, qui occupe l'essentiel du travail et demande de la
 * largeur : elle s'etire sur toute la hauteur de la colonne de gauche.
 *
 * Deux colonnes reelles plutot qu'une grille traversante : chaque colonne est une boite qui
 * rassemble ses propres cartes, et le formulaire de saisie enveloppe les deux, les conditions et les
 * pesees devant partir ensemble.
 */
.ecran_de_mesure {
    display: flex;
    align-items: stretch;
    gap: var(--espacement_moyen);
}

/* La colonne de gauche occupe nettement moins du quart, le reste allant a la grille des pesees. */
.ecran_de_mesure__colonne {
    flex: 0 0 23%;
    min-width: 0;
}

/* La colonne de droite prend la place restante. */
.ecran_de_mesure__colonne--droite {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
}

/* La grille des pesees remplit sa colonne, donc la hauteur des blocs de gauche. */
.ecran_de_mesure__pesees {
    flex: 1 1 auto;
    margin-bottom: 0;
}

/* Le formulaire qui enveloppe les deux colonnes ne doit pas ajouter son propre espacement. */
.formulaire--sans_espacement {
    display: block;
}

@media (max-width: 1100px) {
    /* Sur un ecran etroit, les deux colonnes repassent l'une sous l'autre. */
    .ecran_de_mesure {
        flex-direction: column;
    }

    .ecran_de_mesure__colonne,
    .ecran_de_mesure__colonne--droite {
        flex: 0 0 auto;
    }
}

/*
 * Etalon et comparateur prevus, dans le resume de la masse.
 *
 * Ce sont les deux references que le technicien verifie avant de commencer : il doit prendre le bon
 * etalon et travailler sur le bon comparateur. Meme mise en avant que l'affaire choisie a la
 * creation d'un rapport, filet d'accent et fond clair : c'est le meme geste, rappeler ce qui est
 * retenu et sur quoi le travail va porter.
 */
.ecran_de_mesure__colonne .proprietes {
    padding: var(--espacement_court);
    border-left: 3px solid var(--couleur_accent);
    background: var(--couleur_accent_clair);
    color: var(--couleur_accent);

    /*
     * La colonne est etroite et les references sont longues, un code d'etalon suivi de sa valeur
     * conventionnelle. Le texte est reduit d'un dixieme plutot que de laisser apparaitre une barre
     * de defilement horizontale, qui obligerait a faire glisser le bloc pour lire une valeur que
     * l'on ne fait que verifier du regard.
     */
    font-size: 0.9em;
    overflow-wrap: anywhere;
}

.ecran_de_mesure__colonne .propriete__valeur {
    font-weight: 600;
    line-height: 1.35;
}

/*
 * Le resume de la masse se resserre : il n'affiche que trois lignes et la place gagnee profite a la
 * grille des pesees, qui est le vrai lieu de travail.
 */
.ecran_de_mesure__colonne .carte:first-child {
    padding-top: var(--espacement_court);
    padding-bottom: var(--espacement_court);
}

.ecran_de_mesure__colonne .carte:first-child .carte__titre {
    margin-bottom: var(--espacement_court);
}

/*
 * Reperes physiques de la masse, en bande au-dessus de la grille des pesees.
 *
 * Intention : identifier l'objet que l'on a en main. Ils se lisent en une fois, sur une seule ligne
 * tant que la largeur le permet, et reviennent a la ligne sinon plutot que d'etre tronques.
 */
.reperes_de_la_masse {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacement_court) var(--espacement_moyen);
    margin-bottom: var(--espacement_moyen);
}

/* Les actions ferment la bande, poussees a droite par l'espace restant. */
.reperes_de_la_masse__actions {
    margin-left: auto;
}

/* Chaque repere garde son intitule au-dessus de sa valeur, comme dans les fiches. */
.repere {
    display: flex;
    flex-direction: column;
}

.repere__intitule {
    color: var(--couleur_texte_discret);
    font-size: 0.8rem;
}

.repere__valeur {
    font-weight: 600;
    line-height: 1.35;
}

/*
 * Detail d'un voyant : les sauts de ligne du texte sont respectes.
 *
 * La thermalisation annonce deux choses distinctes, la duree exigee et celle deja ecoulee. Sur une
 * seule ligne elles se confondaient, chacune sur la sienne elles se comparent d'un coup d'oeil.
 */
.voyant__detail {
    white-space: pre-line;
}

/*
 * Qui pese et dans quelle unite, en tete de la grille des determinations.
 *
 * Ces deux informations commandent la lecture de toutes les valeurs saisies en dessous, et non un
 * champ en particulier : posees au-dessus du tableau, elles se rattachent a l'ensemble de la
 * grille plutot qu'aux conditions de la salle.
 */
.unite_des_pesees {
    display: flex;
    gap: var(--espacement_moyen);
    margin-bottom: var(--espacement_moyen);
}

/*
 * Largeur des colonnes de la grille des pesees.
 *
 * La colonne du rang se reduit a son contenu, un simple numero. Les quatre colonnes de pesee se
 * partagent a parts egales toute la largeur restante du bloc : elles portent des valeurs de meme
 * nature, rien ne justifie que l'une soit plus large qu'une autre.
 */
.ecran_de_mesure__pesees .liste {
    table-layout: fixed;
    width: 100%;
}

.ecran_de_mesure__pesees .liste th:first-child,
.ecran_de_mesure__pesees .liste td:first-child {
    width: 4rem;
}

.ecran_de_mesure__pesees .liste th:not(:first-child),
.ecran_de_mesure__pesees .liste td:not(:first-child) {
    width: auto;
}

/* Le champ remplit sa colonne, dont la largeur est desormais celle d'une pesee. */
.ecran_de_mesure__pesees .liste .champ__saisie {
    width: 100%;
    box-sizing: border-box;
}

/*
 * Champs du bloc Environnement, dans une colonne etroite.
 *
 * Le groupe de champs ordinaire impose une largeur minimale de 220 pixels par colonne, faite pour
 * un formulaire pleine page. Dans la colonne de gauche de l'ecran de mesure, plus etroite que cela,
 * cette largeur debordait et faisait apparaitre une barre de defilement horizontale. Les champs y
 * occupent donc simplement la place disponible, les uns sous les autres.
 */
.ecran_de_mesure__colonne .formulaire__groupe {
    grid-template-columns: 1fr;
}

/* Le champ ne deborde pas de sa colonne, quelle que soit la largeur de son contenu. */
.ecran_de_mesure__colonne .champ__saisie {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/*
 * Apercu du resultat, sous la grille des pesees.
 *
 * Il reprend l'aspect des voyants du panneau d'etat : c'est la meme nature d'information, un etat
 * lu d'un coup d'oeil. Il se pose la ou le regard arrive apres la derniere pesee saisie.
 */
.apercu_du_resultat {
    margin-top: var(--espacement_moyen);
}

/* La masse conventionnelle estimee se lit en grand : c'est le chiffre que l'on attend. */
.apercu_du_resultat .voyant__valeur {
    font-size: 1.15rem;
}

/*
 * Tableau des mesures enregistrees : douze colonnes, une largeur limitee.
 *
 * Aucune colonne ne peut etre retiree, elles portent toutes une valeur du certificat. Le tableau
 * defile donc horizontalement a l'interieur de son bloc, jamais la page entiere, et les cellules ne
 * cassent pas leur contenu sur plusieurs lignes.
 */
.mesures_enregistrees {
    overflow-x: auto;
}

.mesures_enregistrees .liste {
    width: auto;
    min-width: 100%;
}

.mesures_enregistrees .liste th,
.mesures_enregistrees .liste td {
    white-space: normal;
    overflow-wrap: anywhere;
}

/*
 * Les colonnes gardent une largeur suffisante pour que leur contenu tienne sur deux lignes plutot
 * que de se casser lettre par lettre. Une date, un code d'etalon ou une masse conventionnelle se
 * lisent alors sans defilement.
 */
.mesures_enregistrees .liste th,
.mesures_enregistrees .liste td {
    min-width: 5rem;
}

/*
 * Second tableau des mesures, la suite du premier.
 *
 * Les deux forment un seul ensemble coupe en deux, une mesure occupant la meme position dans
 * chacun. Ils se suivent donc de pres, sans le blanc qui separerait deux listes distinctes.
 */
.mesures_enregistrees--suite {
    margin-top: var(--espacement_court);
}

.mesures_enregistrees .liste th:first-child,
.mesures_enregistrees .liste td:first-child,
.mesures_enregistrees .liste .liste__cellule--action {
    min-width: 0;
}

/*
 * Filigrane des documents non signes.
 *
 * Intention : avant la signature, le certificat et le constat sont consultables pour verifier ce
 * qui sera remis au client. Ils n'engagent pas le laboratoire et ne doivent jamais pouvoir etre
 * pris pour le document officiel, ni a l'ecran ni sur papier.
 *
 * Le filigrane est un element de la page et non une image de fond : les navigateurs n'impriment pas
 * les fonds par defaut, et un brouillon sorti sans sa mention serait exactement ce que ce filigrane
 * sert a empecher. Il est donc pose en couche, avec impression des couleurs forcee.
 */
.document__filigrane {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-size: 46mm;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(161, 43, 43, 0.16);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 10;

    /* Le navigateur doit sortir cette couleur telle quelle, et non la supprimer a l'impression. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/*
 * Apercu de la signature manuscrite deja enregistree, dans la fiche d'un compte.
 *
 * Il montre ce qui sera imprime sur le certificat. La hauteur est bornee : ces images sont scannees
 * et arrivent dans des tailles tres variables, une signature en pleine page n'aiderait personne.
 * Le damier de fond rend la transparence visible, qui est ce que l'on veut verifier avant de poser
 * la signature sur un document.
 */
.signature_manuscrite__apercu {
    display: block;
    max-width: 100%;
    max-height: 6rem;
    margin: var(--espacement_court) 0;
    padding: var(--espacement_court);
    border: 1px solid var(--couleur_bordure);
    border-radius: var(--rayon);
    background-color: var(--couleur_surface);
    background-image:
        linear-gradient(45deg, var(--couleur_fond) 25%, transparent 25%),
        linear-gradient(-45deg, var(--couleur_fond) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--couleur_fond) 75%),
        linear-gradient(-45deg, transparent 75%, var(--couleur_fond) 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}

/*
 * Mise en page des documents emis, certificat comme constat.
 *
 * Les deux partagent la meme forme : meme en-tete de laboratoire, meme bloc de destinataire, memes
 * tailles de titre et de mention normative. Seul leur contenu differe, et ce qui tient a la densite
 * propre a l'un d'eux garde un selecteur qui le designe.
 */

/* Le logo se reduit d'un dixieme : il prenait le pas sur le nom du laboratoire a cote. */
.document__page--emis .document__logo {
    width: 27mm;
}

/* Le logo COFRAC descend aux trois quarts de sa taille : il accompagne la mention d'accreditation. */
.document__page--emis .document__logo_cofrac {
    width: 13.5mm;
}

/* Le nom du laboratoire, en tete du document, gagne une taille sur le reste du bloc adresse. */
.document__page--emis .document__laboratoire_nom {
    font-size: 11pt;
}

/* Telephone et courriel descendent d'une taille : ce sont des mentions de contact, pas d'identite. */
.document__page--emis .document__laboratoire_contact {
    font-size: 8pt;
}

/*
 * Le numero du document se rapproche du titre : l'ecart les separait comme deux blocs distincts,
 * alors que le numero designe precisement le document que le titre nomme.
 */
.document__page--emis .document__numero {
    margin-top: 3mm;
}

/*
 * Bloc du destinataire : le nom du client ferme la ligne de l'intitule, l'adresse suit en dessous.
 *
 * L'intitule occupait une colonne de soixante-dix-huit millimetres alignee a droite, ce qui
 * repoussait le tout au milieu de la page, loin du regard qui cherche l'adresse en marge.
 */
/*
 * Blocs de caracteristiques : l'intitule se termine contre son deux-points.
 *
 * La colonne est ramenee a quarante millimetres, ce qui rapproche les deux-points de la marge, et
 * le texte y est cale a droite : les intitules courts ne laissent plus de blanc entre eux et le
 * deux-points qu'ils annoncent. Les deux-points restent alignes les uns sous les autres.
 */
.document__page--emis .document__bloc .document__intitule {
    width: 40mm;
    text-align: right;
}

/*
 * Bloc du destinataire : trois colonnes lues ligne a ligne.
 *
 * L'intitule occupait une colonne de soixante-dix-huit millimetres alignee a droite, ce qui
 * repoussait le nom et l'adresse au milieu de la page. Il se cale ici a gauche sur la largeur
 * qu'il occupe reellement, et les lignes se repondent : le nom du client en face de l'intitule
 * francais, la premiere ligne d'adresse en face de sa traduction.
 */
.document__page--emis .document__bloc--accentue {
    align-items: flex-start;
}

.document__page--emis .document__bloc--accentue .document__intitule {
    width: 26mm;
    text-align: left;
}

/* Le nom du client gagne une taille : c'est le destinataire, il se lit en premier. */
.document__page--emis .document__bloc--accentue .document__valeur_client {
    font-weight: 700;
    font-size: 10pt;
}

/*
 * Titres de section : ils portent la meme graisse et la meme taille que les intitules de bloc, dont
 * ils ne sont que la version haute. Ils s'en distinguaient sans raison.
 */
.document__page--emis .document__section .document__intitule_fr {
    font-weight: 700;
}

.document__page--emis .document__section .document__intitule_en {
    font-style: italic;
    font-size: 8pt;
    font-weight: 400;
}

/*
 * Traductions anglaises du bloc de l'instrument etalonne : une taille en dessous du francais.
 * Elles accompagnent la lecture sans la doubler.
 */
.document__page--emis .document__valeur_en {
    font-size: 8pt;
}

/*
 * La regle de decision descend de deux tailles : c'est une mention normative, longue et bilingue,
 * que l'on doit pouvoir lire mais qui ne doit pas concurrencer les valeurs mesurees.
 */
.document__page--emis .document__regle {
    font-size: 7pt;
}

.document__page--emis .document__regle .document__paragraphe--anglais {
    font-size: 6pt;
}

/*
 * Conditions de verification et procedure interne : trois tailles en dessous. Ce sont des
 * references de texte reglementaire, citees pour memoire et non lues a chaque fois.
 */
.document__page--emis .document__bloc--reference {
    font-size: 6pt;
}

.document__page--emis .document__bloc--reference .document__intitule_en {
    font-size: 6pt;
}

/*
 * Dates d'intervention et d'emission, en bas de page.
 *
 * Meme lecture que le bloc du destinataire, l'intitule et sa traduction l'un sous l'autre puis la
 * valeur, mais le tout cale a droite de la page. Le bloc entier est pousse a droite plutot que son
 * contenu aligne a droite : les deux colonnes restent ainsi solidaires, quelle que soit la
 * longueur des intitules.
 */
.document__page--emis .document__bloc--date {
    justify-content: flex-end;
    align-items: flex-start;
    margin-bottom: 2mm;
}

.document__page--emis .document__bloc--date .document__intitule {
    width: auto;
    text-align: right;
}

/* Rien n'est en gras dans les dates : ce sont des faits, non des titres. */
.document__page--emis .document__bloc--date .document__intitule_fr,
.document__page--emis .document__bloc--date .document__intitule_en {
    font-weight: 400;
}

/* La valeur ne s'etire pas : elle occupe la place du texte, contre le deux-points. */
.document__page--emis .document__bloc--date .document__valeur {
    flex: 0 0 auto;
    text-align: left;
}

/*
 * Ligne de titre du tableau des mesures, sur le constat.
 *
 * Un fond legerement grise, tire vers l'orange, la detache du corps du tableau sans introduire de
 * couleur franche sur un document en noir et blanc. L'impression des couleurs est forcee : les
 * navigateurs suppriment les fonds par defaut, et la ligne sortirait alors blanche sur papier.
 */
.document__tableau--constat thead th,
.document__tableau--certificat thead th {
    /* La couleur vient du referentiel, portee par le document. La valeur ci-dessous ne sert que
       si aucune n'y est declaree. */
    background: var(--couleur_entete_tableau, #fff5e3);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/*
 * Nom du signataire et mention de signature numerique se lisent a la meme taille : ils forment une
 * seule information, qui a signe et quand. Ils se suivent sans ecart, comme deux lignes d'un meme
 * paragraphe.
 */
.document__page--emis .document__signataire_nom {
    margin-top: 1mm;
    font-size: 8pt;
}

.document__page--emis .document__signature_numerique {
    font-size: 8pt;
}

/* Le titre de rappel des pages suivantes n'est pas en gras : c'est un rappel, non un titre. */
.document__rappel {
    font-weight: 400;
}

/*
 * Fenetre resserree, pour les contenus courts.
 *
 * La fenetre superposee est faite pour des fiches et des listes, qui ont besoin de largeur. Un
 * formulaire de quelques champs y flottait au milieu du vide : le contenu demande lui-meme un
 * panneau de moitie, par un marqueur pose dans la fiche.
 */
.fenetre__panneau:has([data-fenetre_etroite]) {
    max-width: 500px;
}

/* Le marqueur ne se voit pas : il ne sert qu'a signaler ce que le contenu attend. */
[data-fenetre_etroite] {
    display: none;
}

/*
 * Lecteur de document, dans la fenetre superposee.
 *
 * Le cadre laisse la place au lecteur du navigateur, qui porte ses propres commandes dont
 * l'impression. La hauteur suit celle de l'ecran plutot qu'une valeur fixe : un document au format
 * A4 se lit mal dans une bande trop courte.
 */
.lecteur_de_document {
    display: block;
    width: 100%;
    height: 70vh;
    border: 1px solid var(--couleur_bordure);
    border-radius: var(--rayon);
    background: var(--couleur_fond);
}

/*
 * Page de texte d'un certificat : description, mode operatoire et resultats.
 *
 * Elle ne porte ni tableau ni en-tete de laboratoire, seulement des paragraphes qui se lisent d'un
 * bout a l'autre. Tout son contenu gagne donc une taille sur le corps du document, titres et
 * traductions compris, chacun gardant son ecart avec les autres.
 */
.document__page--texte {
    font-size: 10pt;
}

.document__page--texte .document__section .document__intitule_en,
.document__page--texte .document__paragraphe--anglais {
    font-size: 9pt;
}

/*
 * Cellules du tableau des mesures : le contenu se replie sur plusieurs lignes.
 *
 * La derniere colonne porte le marquage puis l'operation, l'un sous l'autre. Sans repli, la ligne
 * s'allongeait au dela de la largeur de la page.
 */
.document__tableau--certificat td,
.document__tableau--constat td {
    white-space: normal;
}

/*
 * Coordonnees du laboratoire, en bas des pages qui ne portent pas son en-tete.
 *
 * Elles tiennent sur une ligne, sous la pagination, et se lisent plus petit que le corps du
 * document : ce sont des references de contact, non du contenu.
 */
.document__coordonnees {
    position: absolute;
    left: 8mm;
    right: 8mm;
    bottom: 5mm;
    font-size: 5.5pt;
    text-align: center;
    color: #000000;

    /*
     * Les coordonnees tiennent sur une seule ligne : coupees en deux, elles laissaient le site
     * internet seul sur la derniere ligne, ce qui se lisait comme une mention a part. La marge est
     * reduite et le corps abaisse jusqu'a ce que l'ensemble passe.
     */
    white-space: nowrap;
}

/*
 * Le pied remonte sur les pages qui portent les coordonnees : les deux occupaient le meme bas de
 * page et se chevauchaient. Les coordonnees ferment la page, le pied se pose juste au-dessus.
 *
 * La premiere page n'en a pas, son pied garde donc sa place : la regle vise les pages qui
 * contiennent effectivement le bloc de coordonnees.
 */
.document__page--emis:has(.document__coordonnees) .document__pied {
    bottom: 11mm;
}


/* Mention secondaire dans une cellule ou une ligne de texte. */
.texte_discret {
    color: var(--couleur_texte_discret);
    font-style: italic;
}