/*
  Atelier d'ambiances - feuille unique.

  Le fond est un gris volontairement neutre, sans derive chaude ni froide.
  Ce n'est pas un parti pris esthetique : on juge ici des interieurs beiges
  et ambres, et un fond teinte fausse la lecture des couleurs. Les tables
  lumineuses et les logiciels de derushage sont gris pour cette raison.

  La couleur est reservee aux statuts. Rien d'autre n'a le droit d'etre
  colore, sinon l'oeil quitte l'image.
*/

:root {
    /* Neutres, du plus sombre au plus clair. */
    --fond:        #1a1a1a;
    --surface:     #232323;
    --surface-2:   #2c2c2c;
    --bord:        #383838;
    --bord-vif:    #4a4a4a;

    --texte:       #e6e6e6;
    --texte-doux:  #9a9a9a;
    --texte-faible:#6b6b6b;

    /* Statuts. Desatures pour ne pas concurrencer les images. */
    --gris:   #7a7a7a;
    --bleu:   #5b8bb0;
    --ambre:  #c9963f;
    --vert:   #6f9b5f;
    --orange: #c0703c;
    --rouge:  #b5544c;

    --focus:  #c9963f;

    --pas:    0.5rem;
    --rayon:  3px;

    --ui:   'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font: 400 14px/1.5 var(--ui);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

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

/* ── Ossature ─────────────────────────────────────────────── */

.barre {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 46px;
    padding: 0 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--bord);
    position: sticky;
    top: 0;
    z-index: 20;
}

.marque {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--texte-doux);
    white-space: nowrap;
}

.nav { display: flex; gap: 0.25rem; }

.nav a {
    padding: 0.35rem 0.7rem;
    border-radius: var(--rayon);
    color: var(--texte-doux);
    font-size: 13px;
}

.nav a:hover { background: var(--surface-2); color: var(--texte); }
.nav a[aria-current="page"] { background: var(--surface-2); color: var(--texte); }

.barre-fin { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }

.page { padding: 1rem; }
.page-large { max-width: 1600px; margin: 0 auto; }

/* ── Filtres de statut ────────────────────────────────────── */

.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bord);
    background: var(--fond);
    position: sticky;
    top: 46px;
    z-index: 15;
}

.filtre {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    background: transparent;
    color: var(--texte-doux);
    font-size: 13px;
    cursor: pointer;
}

.filtre:hover { border-color: var(--bord-vif); color: var(--texte); }

.filtre[aria-current="page"] {
    background: var(--surface-2);
    border-color: var(--bord-vif);
    color: var(--texte);
}

.filtre .n {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--texte-faible);
}

.filtre[aria-current="page"] .n { color: var(--texte-doux); }

/* ── Planche contact ──────────────────────────────────────── */

.planche {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
}

.tuile { display: block; position: relative; }

.tuile-image {
    position: relative;
    aspect-ratio: 1;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    overflow: hidden;
}

.tuile:hover .tuile-image { border-color: var(--bord-vif); }
.tuile:focus-visible .tuile-image { border-color: var(--focus); }

.tuile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Le fond blanc apparait au survol : verification d'un coup d'oeil. */
.tuile-image .source {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: #fff;
    object-fit: contain;
    transition: opacity 90ms linear;
}

.tuile:hover .tuile-image .source { opacity: 1; }

.tuile-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--texte-faible);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tuile-pied {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    font-size: 12px;
}

.tuile-ref {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--texte);
    letter-spacing: 0.02em;
}

.tuile-nom {
    color: var(--texte-faible);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tuile-version {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--texte-faible);
}

/* ── Pastilles de statut ──────────────────────────────────── */

.pastille {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 12px;
    color: var(--texte-doux);
    white-space: nowrap;
}

.pastille::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gris);
    flex: none;
}

.pastille.gris::before   { background: var(--gris); }
.pastille.bleu::before   { background: var(--bleu); }
.pastille.ambre::before  { background: var(--ambre); }
.pastille.vert::before   { background: var(--vert); }
.pastille.orange::before { background: var(--orange); }
.pastille.rouge::before  { background: var(--rouge); }

/* Repere d'angle sur la planche, lisible sans lire. */
.coin {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
}

.coin.gris   { background: var(--gris); }
.coin.bleu   { background: var(--bleu); }
.coin.ambre  { background: var(--ambre); }
.coin.vert   { background: var(--vert); }
.coin.orange { background: var(--orange); }
.coin.rouge  { background: var(--rouge); }

/* ── Fiche de scene ───────────────────────────────────────── */

.fiche {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1rem;
    padding: 1rem;
    align-items: start;
}

.scene-cadre {
    position: relative;
    aspect-ratio: 1;
    max-height: calc(100vh - 8rem);
    margin-inline: auto;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    overflow: hidden;
}

.scene-cadre img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Le fond blanc, revele par la touche espace ou le bouton A/B. */
.scene-cadre .source {
    background: #fff;
    opacity: 0;
    pointer-events: none;
}

.scene-cadre.montre-source .source { opacity: 1; }

.scene-indice {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--rayon);
    background: rgba(0, 0, 0, 0.65);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texte-doux);
}

.scene-cadre.montre-source .scene-indice { color: var(--ambre); }

/* ── Volet lateral ────────────────────────────────────────── */

.volet { display: flex; flex-direction: column; gap: 1rem; }

.bloc {
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 0.85rem;
}

.bloc-titre {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--texte-faible);
    margin: 0 0 0.6rem;
}

.donnees { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; font-size: 13px; }
.donnees dt { color: var(--texte-faible); }
.donnees dd { margin: 0; color: var(--texte); }
.donnees dd.mono { font-family: var(--mono); font-size: 12px; }

.sources { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.source-vignette {
    width: 64px;
    height: 64px;
    background: #fff;
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    object-fit: contain;
    cursor: zoom-in;
}

.source-vignette:hover { border-color: var(--ambre); }

/* ── Actions ──────────────────────────────────────────────── */

.actions { display: flex; gap: 0.5rem; }

.bouton {
    flex: 1;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--bord-vif);
    border-radius: var(--rayon);
    background: var(--surface-2);
    color: var(--texte);
    font: 500 13px var(--ui);
    cursor: pointer;
    text-align: center;
}

.bouton:hover { background: #343434; border-color: #5a5a5a; }

.bouton-vert { border-color: #4a6b40; background: #2f4229; color: #cfe4c6; }
.bouton-vert:hover { background: #3a5232; border-color: #5d8250; }

.bouton-orange { border-color: #7a4a28; background: #45301f; color: #eccbb0; }
.bouton-orange:hover { background: #573c27; border-color: #96603a; }

.bouton-discret { flex: none; background: transparent; border-color: var(--bord); color: var(--texte-doux); }
.bouton-discret:hover { background: var(--surface-2); color: var(--texte); }

.raccourci {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--texte-faible);
    margin-left: 0.35rem;
}

/* ── Formulaires ──────────────────────────────────────────── */

.champ { display: block; margin-bottom: 0.75rem; }

.champ > span {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 12px;
    color: var(--texte-doux);
}

input[type="text"], input[type="password"], input[type="search"], input[type="date"], input[type="number"], select, textarea {
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: var(--fond);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    color: var(--texte);
    font: 400 13px var(--ui);
}

input.mono, textarea.mono { font-family: var(--mono); }

input:focus, select:focus, textarea:focus { border-color: var(--bord-vif); outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

textarea { resize: vertical; min-height: 76px; }

/* ── Tableaux ─────────────────────────────────────────────── */

.tableau { width: 100%; border-collapse: collapse; font-size: 13px; }

.tableau th {
    text-align: left;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--bord);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texte-faible);
}

.tableau td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--surface-2); }
.tableau tr:hover td { background: var(--surface); }
.tableau .nombre { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Messages ─────────────────────────────────────────────── */

.avis {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--bord);
    border-left-width: 3px;
    border-radius: var(--rayon);
    background: var(--surface);
    font-size: 13px;
    margin-bottom: 1rem;
}

.avis-bon    { border-left-color: var(--vert); }
.avis-alerte { border-left-color: var(--ambre); }
.avis-erreur { border-left-color: var(--rouge); }

.vide {
    padding: 4rem 1rem;
    text-align: center;
    color: var(--texte-faible);
}

.vide p { margin: 0 0 1rem; }

/* ── Divers ───────────────────────────────────────────────── */

.titre-page {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0 0 1rem;
    font-size: 17px;
    font-weight: 600;
}

.titre-page .ref { font-family: var(--mono); color: var(--texte-doux); font-weight: 400; }

.discret { color: var(--texte-faible); font-size: 12px; }

.pagination { display: flex; gap: 0.5rem; justify-content: center; padding: 1.5rem 0; }

@media (max-width: 900px) {
    .fiche { grid-template-columns: 1fr; }
    .scene-cadre { max-height: 60vh; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Ecrans d'entree ──────────────────────────────────────── */

.entree {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.entree-boite {
    width: 100%;
    max-width: 340px;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 1.75rem;
}

.entree-marque {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--texte-faible);
    margin: 0 0 0.35rem;
}

.entree-titre { margin: 0 0 1.5rem; font-size: 19px; font-weight: 600; }

/* ── Deux colonnes catalogue / facturation ────────────────── */

.colonnes {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 1.25rem;
    align-items: start;
}

.aside { position: sticky; top: 62px; }

.liste-liens { display: flex; flex-direction: column; gap: 1px; }

.liste-liens a {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--rayon);
    color: var(--texte-doux);
    font-size: 13px;
}

.liste-liens a:hover { background: var(--surface-2); color: var(--texte); }
.liste-liens a[aria-current="page"] { background: var(--surface-2); color: var(--texte); }
.liste-liens .n { font-family: var(--mono); font-size: 11px; color: var(--texte-faible); }

.barre-outils {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.barre-outils .champ { margin: 0; }
.barre-outils input[type="search"] { min-width: 220px; }

.selection {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    padding: 0.75rem;
    margin-top: 1rem;
    background: var(--surface);
    border: 1px solid var(--bord-vif);
    border-radius: var(--rayon);
}

.selection .compte { font-family: var(--mono); font-size: 13px; }

.grille-produits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
}

.produit { position: relative; }

.produit input { position: absolute; top: 8px; left: 8px; z-index: 2; accent-color: var(--ambre); }

.produit label {
    display: block;
    cursor: pointer;
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--surface);
}

.produit input:checked + label { border-color: var(--ambre); }

.produit label img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    display: block;
}

.produit-info { padding: 0.4rem 0.5rem; font-size: 12px; }
.produit-info .ptr { font-family: var(--mono); }
.produit-info .nom { color: var(--texte-faible); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chiffre-cle { font-family: var(--mono); font-size: 26px; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .colonnes { grid-template-columns: 1fr; }
    .aside { position: static; }
}