/*
 * Couleurs Irium Software, reprises de la charte des applications mobiles.
 *
 * Poppins est la police de la charte. Elle n'est pas embarquée : la politique de sécurité de
 * contenu du service interdit les ressources externes, et vendre un fichier de police dans le
 * dépôt pour un outil interne à deux pages n'en vaut pas le poids. Elle s'affiche donc si elle
 * est installée sur le poste, et la pile de secours prend le relais sinon.
 */
:root {
    --primaire: #073637;
    --primaire-clair: #204a4b;
    --secondaire: #56b9a3;
    --secondaire-fond: #e6f4f0;

    --fond: #f4f5f8;
    --fond-carte: #ffffff;
    --bordure: #dfdfdf;
    --texte: #323232;
    --texte-doux: #92949c;
    --texte-inverse: #ffffff;

    --accent: var(--primaire);
    --accent-doux: var(--secondaire-fond);
    --succes: #3d8b7a;
    --erreur: #ce113a;
    --erreur-doux: #fbe7eb;

    /*
     * Le bouton principal a ses propres jetons plutôt que de suivre la couleur primaire.
     * En thème sombre, la primaire et le fond des cartes sont deux verts sombres très
     * proches : le bouton s’y fondait alors qu’il porte l’action principale des deux pages.
     */
    --bouton-fond: var(--primaire);
    --bouton-fond-survol: var(--primaire-clair);
    --bouton-texte: #ffffff;

    --rayon: 8px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primaire: #0d4a4b;
        --primaire-clair: #2a6d6c;
        --secondaire: #56b9a3;
        --secondaire-fond: #10302c;

        --fond: #141b1b;
        --fond-carte: #1c2626;
        --bordure: #2e3d3c;
        --texte: #e4ecea;
        --texte-doux: #8fa3a0;
        --texte-inverse: #ffffff;

        --accent: var(--secondaire);
        --accent-doux: var(--secondaire-fond);
        --succes: #56b9a3;
        --erreur: #f2778f;
        --erreur-doux: #3a1c23;

        /* La menthe sur fond sombre, comme l’onglet actif : c’est ce qui ressort ici. */
        --bouton-fond: var(--secondaire);
        --bouton-fond-survol: #67c0ac;
        --bouton-texte: #08201f;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

/* La barre reprend la couleur primaire, comme la barre d'outils des applications. */
header {
    background: var(--primaire);
    color: var(--texte-inverse);
    padding: 0 24px;
}

.barre {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0 auto;
    max-width: 1100px;
    min-height: 62px;
}

.identite {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 11px;
}

.marque {
    display: block;
}

.titre-site {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .2px;
    margin: 0;
}

nav {
    display: flex;
    gap: 8px;
}

nav a {
    border-radius: var(--rayon);
    color: rgba(255, 255, 255, .72);
    padding: 6px 12px;
    text-decoration: none;
}

nav a:hover {
    background: rgba(255, 255, 255, .12);
    color: var(--texte-inverse);
}

nav a.actif {
    background: var(--secondaire);
    color: var(--primaire);
    font-weight: 600;
}

main {
    margin: 0 auto;
    max-width: 1100px;
    padding: 32px 24px 64px;
}

h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px;
}

.sous-titre {
    color: var(--texte-doux);
    margin: 0 0 24px;
}

.carte {
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 24px;
}

/* ----- Zone de dépôt ----- */

.zone-depot {
    align-items: center;
    background: var(--fond-carte);
    border: 2px dashed var(--bordure);
    border-radius: var(--rayon);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    min-height: 220px;
    padding: 32px;
    text-align: center;
    transition: border-color .15s, background .15s;
}

.zone-depot:hover,
.zone-depot.survol {
    background: var(--accent-doux);
    border-color: var(--secondaire);
}

.zone-depot p {
    color: var(--texte-doux);
    margin: 0;
}

input[type="file"] {
    display: none;
}

button {
    background: var(--bouton-fond);
    border: 0;
    border-radius: var(--rayon);
    color: var(--bouton-texte);
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    padding: 9px 18px;
}

button:hover {
    background: var(--bouton-fond-survol);
}

button.discret {
    background: transparent;
    border: 1px solid var(--bordure);
    color: var(--texte);
}

button.discret:hover {
    background: var(--accent-doux);
    border-color: var(--secondaire);
}

/* Bordure transparente : le rouge signale déjà assez l’action, et un cadre en ferait le
   point d’appel de la ligne alors qu’on vient d’abord y chercher une image. Transparente et
   non absente, pour que la mise en page ne bouge pas au survol. */
button.danger {
    background: transparent;
    border: 1px solid transparent;
    color: var(--erreur);
    padding: 5px 12px;
}

button.danger:hover {
    background: var(--erreur-doux);
    border-color: var(--erreur);
}

/* ----- Progression ----- */

.progression {
    margin-top: 24px;
}

.jauge {
    background: var(--bordure);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.jauge span {
    background: var(--secondaire);
    display: block;
    height: 100%;
    transition: width .2s;
    width: 0;
}

.progression p {
    color: var(--texte-doux);
    margin: 8px 0 0;
}

/* ----- Résultat ----- */

.resultat {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 24px;
}

/*
 * Le QR code et l'URL en clair forment un bloc : l'URL se lit directement sous l'image, et
 * les deux se vérifient d'un même coup d'œil avant l'envoi au client.
 */
.bloc-qr {
    flex: 0 0 320px;
    max-width: 320px;
}

.bloc-qr img {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    display: block;
    padding: 8px;
    width: 100%;
}

/* Le bouton prend toute la largeur du QR code, juste dessous : c'est le geste qui porte
   sur cette image, il se tient avec elle. */
.bloc-qr button {
    margin-top: 12px;
    width: 100%;
}

.details .etiquette {
    margin-top: 20px;
}

.details .url-claire {
    margin-bottom: 20px;
}

.details {
    flex: 1;
    min-width: 280px;
}

.etiquette {
    color: var(--texte-doux);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.url-claire {
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    font-family: Consolas, "Courier New", monospace;
    font-size: 13.5px;
    overflow-wrap: anywhere;
    padding: 10px 12px;
    user-select: all;
}

dl {
    display: grid;
    gap: 6px 16px;
    grid-template-columns: auto 1fr;
    margin: 0 0 20px;
}

dt {
    color: var(--texte-doux);
}

dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.apres-resultat {
    margin-top: 20px;
}

/* ----- Messages ----- */

.message {
    border-radius: var(--rayon);
    margin-top: 24px;
    padding: 12px 16px;
}

.message.erreur {
    background: var(--erreur-doux);
    color: var(--erreur);
}

.cache {
    display: none;
}

/* ----- Inventaire ----- */

.occupation {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 24px;
}

.occupation div {
    min-width: 140px;
}

.occupation .valeur {
    color: var(--accent);
    font-size: 22px;
    font-weight: 600;
}

/*
 * Le tableau défile horizontalement plutôt que de comprimer ses colonnes : l'URL de
 * téléchargement doit rester lisible d'un trait, c'est elle que l'on relit avant d'envoyer
 * un QR code à un client.
 */
.table-conteneur {
    overflow-x: auto;
}

table {
    border-collapse: collapse;
    min-width: 860px;
    width: 100%;
}

th,
td {
    border-bottom: 1px solid var(--bordure);
    padding: 12px 10px;
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--texte-doux);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}

th.triable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.triable:hover {
    color: var(--accent);
}

th.tri-actif {
    color: var(--accent);
}

/* Largeur réservée en permanence : sans elle, l'apparition de la flèche décale l'en-tête
   à chaque changement de colonne de tri. */
.fleche {
    display: inline-block;
    font-size: 10px;
    width: 10px;
}

td.url {
    min-width: 300px;
}

td.actions-ligne {
    white-space: nowrap;
}

td.actions-ligne button {
    font-size: 13px;
    margin-left: 6px;
    padding: 5px 12px;
}

td.qr {
    width: 132px;
}

/* Hauteur libre : l'image porte sa légende sous le QR code, elle n'est donc pas carrée. */
td.qr img {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 4px;
    display: block;
    height: auto;
    padding: 4px;
    width: 132px;
}

/* Le bouton s'aligne sur la largeur du QR code, juste dessous. */
td.qr button {
    font-size: 12.5px;
    margin-top: 8px;
    padding: 5px 8px;
    width: 132px;
}

td .lien-fichier {
    color: var(--accent);
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.vide {
    color: var(--texte-doux);
    padding: 32px 0;
    text-align: center;
}

/* Les liens dans le contenu prennent la couleur d’accent : le bleu par défaut du navigateur
   est hors charte. La navigation, elle, a son propre style dans l’en-tête. */
main a {
    color: var(--accent);
    text-underline-offset: 2px;
}

/* ----- Page d'aide ----- */

/*
 * Colonne plus étroite que les autres pages : celle-ci se lit en continu, et une ligne de
 * texte trop longue se suit mal. Les pages d'outil, elles, ont besoin de toute la largeur.
 */
main.aide {
    max-width: 780px;
}

main.aide p {
    max-width: 68ch;
}

.intro {
    font-size: 16.5px;
}

.sans-marge {
    margin-bottom: 0;
}

.chapeau {
    margin: 0 0 16px;
}

.titre-section {
    border-bottom: 1px solid var(--bordure);
    font-size: 17px;
    font-weight: 600;
    margin: 40px 0 20px;
    padding-bottom: 8px;
}

main.aide code {
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: 4px;
    font-family: Consolas, "Courier New", monospace;
    font-size: .9em;
    padding: 1px 5px;
}

/* Reprend l'aspect d'un bouton de l'interface, pour qu'on le reconnaisse dans le texte. */
.touche {
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: 5px;
    font-size: 13.5px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* Le dépôt est une vraie séquence : la numérotation porte donc une information. */
.etapes {
    counter-reset: etape;
    display: flex;
    flex-direction: column;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.etapes > li {
    counter-increment: etape;
    display: grid;
    gap: 2px 16px;
    grid-template-columns: 34px 1fr;
}

.etapes > li::before {
    align-items: center;
    background: var(--accent-doux);
    border-radius: 50%;
    color: var(--accent);
    content: counter(etape);
    display: flex;
    font-size: 15px;
    font-weight: 600;
    grid-row: span 2;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.etapes h4,
.etapes p {
    grid-column: 2;
    margin: 0;
}

.etapes h4 {
    font-size: 15.5px;
    font-weight: 600;
}

.encadre {
    border-radius: var(--rayon);
    padding: 16px 20px;
}

.encadre + .encadre {
    margin-top: 14px;
}

.encadre h4 {
    font-size: 15.5px;
    font-weight: 600;
    margin: 0 0 4px;
}

.encadre p {
    margin: 0;
}

.encadre.regle {
    background: var(--accent-doux);
}

.encadre.regle h4 {
    color: var(--accent);
}

.encadre.danger {
    background: var(--erreur-doux);
}

.encadre.danger h4 {
    color: var(--erreur);
}

.modele h4 {
    font-size: 15.5px;
    font-weight: 600;
    margin: 0 0 10px;
}

.modele ol {
    margin: 0;
    padding-left: 20px;
}

.modele li {
    margin-bottom: 6px;
}

.modele .fin {
    border-top: 1px dashed var(--bordure);
    color: var(--texte-doux);
    font-style: italic;
    margin: 16px 0 0;
    padding-top: 14px;
}

/* La règle globale `dl` pose une grille à deux colonnes, pour les métadonnées de la page de
   dépôt. Ici chaque panne est une ligne à part entière : on repart d'un bloc. */
.pannes {
    display: block;
    margin: 0;
}

.pannes > div {
    border-bottom: 1px solid var(--bordure);
    display: grid;
    gap: 2px 24px;
    grid-template-columns: minmax(0, 36%) 1fr;
    padding: 13px 0;
}

.pannes > div:first-child {
    padding-top: 0;
}

.pannes > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.pannes dt {
    color: var(--texte);
    font-weight: 600;
}

/* Les messages repris mot pour mot de l'interface sont en chasse fixe : on les retrouve
   ainsi à l'identique quand on les cherche depuis l'écran d'erreur. */
.pannes dt.message-outil {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13.5px;
    font-weight: 400;
}

.pannes dd {
    color: var(--texte-doux);
    margin: 0;
}

@media (max-width: 620px) {
    .pannes > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}