@import url('https://cdn.jsdelivr.net/npm/@fontsource/stack-sans-notch@latest/index.css');

:root {
    --navy: #1a2830;
    --lime: #c8f04a;

    --encre: var(--navy);
    --encre-clair: #64757e;
    --papier: #f1f3f1;
    --carte: #ffffff;

    --accent: var(--lime);
    --accent-pale: #eef9cc;
    --accent-encre: #46590a;
    --accent-trace: #9dc32b;

    --corail: #c9564a;
    --vert: #6b8f16;

    --trait: rgba(26, 40, 48, .13);
    --trait-fort: rgba(26, 40, 48, .3);
    --rayon: 8px;
    --largeur: 1320px;
    --marge: clamp(1rem, 3.5vw, 3rem);

    --st-cours-teinte: #eef9cc;   --st-cours-encre: #46590a;   --st-cours-vif: var(--lime);
    --st-attente-teinte: #fbeed6; --st-attente-encre: #8a5a12; --st-attente-vif: #d9a441;
    --st-fini-teinte: rgba(26, 40, 48, .08);  --st-fini-encre: #3d5058;    --st-fini-vif: #4c626c;
    --st-abandon-teinte: rgba(26, 40, 48, .04); --st-abandon-encre: #8a969b; --st-abandon-vif: #b6bfc3;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: 'Stack Sans Notch', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--encre);
    background: var(--papier);
    font-variant-numeric: tabular-nums;
}

h1, h2 { font-weight: 600; margin: 0; }
h1 { font-size: 1.05rem; }
h2 { font-size: .82rem; color: var(--encre-clair); }

/* ---------- champs ---------- */

input, button, select, textarea {
    font: inherit;
    font-variant-numeric: inherit;
    color: inherit;
    border-radius: var(--rayon);
}

input[type="text"], input[type="password"], input[type="search"], select, textarea {
    width: 100%;
    border: 1px solid var(--trait);
    background: var(--carte);
}

input[type="text"], input[type="password"], input[type="search"], select {
    height: 40px;
    padding: 0 .7rem;
}

select { padding-right: .4rem; }

textarea { padding: .6rem .7rem; line-height: 1.6; resize: vertical; }

textarea[data-auto] { overflow: hidden; }

input:hover, select:hover, textarea:hover { border-color: var(--trait-fort); }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent-trace);
    outline-offset: 2px;
}

::placeholder { color: var(--encre-clair); opacity: .7; }

button {
    height: 40px;
    padding: 0 1.1rem;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--navy);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

button:hover { background: #d4f56a; border-color: #d4f56a; }

button.secondaire { background: transparent; color: var(--encre); border-color: var(--trait-fort); }
button.secondaire:hover { background: rgba(26, 40, 48, .06); }

button.discret {
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--corail);
    font-size: .8rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

button.discret:hover { background: none; color: #a8403a; }

/* ---------- barre supérieure ---------- */

.barre {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    padding: .75rem var(--marge);
    background: rgba(242, 239, 233, .93);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--trait);
}

.barre .pousse { margin-left: auto; }

.titre-barre {
    font-weight: 600;
    font-size: .95rem;
    min-width: 0;
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lien-discret {
    color: var(--encre-clair);
    font-size: .87rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
}

.lien-discret:hover { color: var(--encre); border-bottom-color: var(--trait-fort); }

.filtre {
    width: clamp(140px, 20vw, 260px);
    height: 34px;
    font-size: .87rem;
    padding: 0 .6rem;
}

.bascule {
    display: inline-flex;
    margin: 0;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--carte);
}

.bascule button {
    height: 32px;
    min-width: 40px;
    padding: 0 .6rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--encre-clair);
    font-size: .8rem;
}

.bascule button:hover { background: var(--accent-pale); color: var(--accent-encre); }
.bascule button.actif { background: var(--navy); color: #fff; }

/* ---------- structure ---------- */

.contenu {
    width: 100%;
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 2.25rem var(--marge) 5rem;
}

.contenu.etroit { max-width: 680px; }

.bandeau-ok {
    max-width: var(--largeur);
    margin: 1rem auto -.75rem;
    padding: .5rem 1rem;
    font-size: .85rem;
    background: var(--accent-pale);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--rayon) var(--rayon) 0;
}

.carte {
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: 12px;
    overflow: hidden;
}

.vide { margin: 0; padding: 2.5rem 1.25rem; text-align: center; color: var(--encre-clair); }

/* ---------- identité et totaux ---------- */

.identite {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: .8rem;
    margin-bottom: 1.5rem;
}

.identite input { border-color: transparent; background: transparent; padding-left: 0; }

.identite input:hover, .identite input:focus {
    background: var(--carte);
    border-color: var(--trait);
    padding-left: .7rem;
}

.identite .nom {
    height: 52px;
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -.015em;
}

.totaux {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3.5rem;
    padding-bottom: 1.35rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--trait);
}

.totaux > div { min-width: 8.5rem; }

.totaux span { display: block; font-size: .78rem; color: var(--encre-clair); }

.totaux strong { font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 600; }

.totaux em {
    display: block;
    font-style: normal;
    font-size: .76rem;
    color: var(--encre-clair);
}

.totaux em.positif { color: var(--vert); }
.totaux em.negatif { color: var(--corail); }

/* ---------- colonnes ---------- */

.colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(320px, .9fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

.colonnes > aside { position: sticky; top: 5rem; }

.colonnes h2 { margin-bottom: .6rem; }

aside textarea { min-height: clamp(260px, 45vh, 480px); }

/* ---------- projets ---------- */

.projet {
    padding: 1rem 1.15rem;
    border-top: 1px solid var(--trait);
    border-left: 3px solid transparent;
}

.projet:first-child { border-top: 0; }

.projet[data-statut="en cours"]   { border-left-color: var(--st-cours-vif); }
.projet[data-statut="en attente"] { border-left-color: var(--st-attente-vif); }
.projet[data-statut="terminé"]    { border-left-color: var(--st-fini-vif); }
.projet[data-statut="abandonné"]  { border-left-color: var(--st-abandon-vif); }

.projet[data-statut="terminé"],
.projet[data-statut="abandonné"] { background: rgba(26, 40, 48, .025); }

.projet[data-statut="terminé"] .nom-projet,
.projet[data-statut="abandonné"] .nom-projet { color: var(--encre-clair); }

select.pastille {
    appearance: none;
    -webkit-appearance: none;
    padding-left: .6rem;
    padding-right: 1.5rem;
    font-size: .84rem;
    font-weight: 600;
    border-radius: 999px;
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: 9px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2364757e' stroke-width='1.8'/></svg>");
}

.projet[data-statut="en cours"] select.pastille {
    background-color: var(--st-cours-teinte); color: var(--st-cours-encre); border-color: var(--st-cours-vif);
}
.projet[data-statut="en attente"] select.pastille {
    background-color: var(--st-attente-teinte); color: var(--st-attente-encre); border-color: var(--st-attente-vif);
}
.projet[data-statut="terminé"] select.pastille {
    background-color: var(--st-fini-teinte); color: var(--st-fini-encre); border-color: var(--st-fini-vif);
}
.projet[data-statut="abandonné"] select.pastille {
    background-color: var(--st-abandon-teinte); color: var(--st-abandon-encre); border-color: var(--st-abandon-vif);
}

select.pastille option { background: var(--carte); color: var(--encre); font-weight: 400; }

.projet-ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6rem 5rem 7rem 9.5rem;
    gap: .5rem;
}

.projet-ligne .ajout-temps {
    border: 1px dashed var(--trait-fort);
    color: var(--encre-clair);
}

.projet-ligne .ajout-temps:focus { color: var(--encre); border-style: solid; }
.projet-ligne .ajout-temps:not(:placeholder-shown) { border-color: var(--accent); color: var(--encre); }

.projet-ligne input, .projet-ligne select {
    height: 36px;
    border-color: transparent;
    background: transparent;
    padding-left: .45rem;
}

.projet-ligne input:hover, .projet-ligne input:focus {
    border-color: var(--trait);
    background: var(--papier);
}

.projet-ligne select.pastille:hover { filter: brightness(.96); }

.projet-ligne .nom-projet { font-weight: 600; }
.projet-ligne .chiffre { text-align: right; padding-right: .45rem; }

.projet details { margin-top: .4rem; }

.projet summary {
    display: inline-block;
    font-size: .8rem;
    color: var(--encre-clair);
    cursor: pointer;
    padding: .15rem .45rem;
    border-radius: 4px;
}

.projet summary:hover { background: var(--papier); color: var(--encre); }

.projet details textarea { margin-top: .45rem; min-height: 90px; }

.projet .pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.25rem;
    margin-top: .5rem;
}

.projet .taux { display: flex; flex-wrap: wrap; gap: .9rem; align-items: baseline; }

.projet .taux b { font-weight: 400; font-size: .78rem; color: var(--encre-clair); }
.projet .taux b.positif { color: var(--vert); }
.projet .taux b.negatif { color: var(--corail); }

button.suggestion {
    height: 26px;
    padding: 0 .55rem;
    font-size: .78rem;
    font-weight: 400;
    background: var(--accent-pale);
    border: 1px dashed var(--accent-trace);
    color: var(--accent-encre);
}

button.suggestion:hover { background: var(--accent); border-style: solid; color: var(--navy); }

/* ---------- liste des clients ---------- */

.liste { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; }

a.ligne-client {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--trait);
    border-left: 3px solid transparent;
    color: inherit;
    text-decoration: none;
}

a.ligne-client:first-child { border-top: 0; }
a.ligne-client:hover { background: var(--accent-pale); border-left-color: var(--accent); }

a.ligne-client .nom { font-weight: 600; }

a.ligne-client .meta {
    display: block;
    font-size: .83rem;
    color: var(--encre-clair);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identifiant { min-width: 0; flex: 1; }

.pastilles { display: flex; gap: .3rem; }

.pastille-point {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 .35rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
}

.pastille-point[data-statut="en cours"]   { background: var(--st-cours-teinte); color: var(--st-cours-encre); }
.pastille-point[data-statut="en attente"] { background: var(--st-attente-teinte); color: var(--st-attente-encre); }
.pastille-point[data-statut="terminé"]    { background: var(--st-fini-teinte); color: var(--st-fini-encre); }
.pastille-point[data-statut="abandonné"]  { background: var(--st-abandon-teinte); color: var(--st-abandon-encre); }

.chiffres {
    display: flex;
    gap: 2.25rem;
    font-size: .74rem;
    color: var(--encre-clair);
    white-space: nowrap;
    text-align: right;
}

.chiffres span { min-width: 4.5rem; }

.chiffres b { display: block; font-size: 1rem; color: var(--encre); font-weight: 600; }

.ajout { margin-top: 1rem; }

.ajout .rangee { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.ajout .rangee.trois { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; }

.zone-danger { margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid var(--trait); }

/* ---------- réglages ---------- */

.bloc-reglage { padding: 1.35rem; margin-bottom: 1.25rem; }
.bloc-reglage h2 { margin-bottom: .3rem; }

.aide-champ { margin: 0 0 1.1rem; font-size: .84rem; color: var(--encre-clair); }

.grille-reglage { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }

.grille-reglage label { display: block; font-size: .82rem; color: var(--encre-clair); margin-bottom: .3rem; }

.champ-unite { position: relative; }
.champ-unite input { padding-right: 3rem; }

.champ-unite span {
    position: absolute;
    right: .7rem;
    top: 0;
    line-height: 40px;
    font-size: .84rem;
    color: var(--encre-clair);
    pointer-events: none;
}

.deduit {
    margin: 1.1rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--trait);
    font-size: .9rem;
    color: var(--encre-clair);
}

.deduit strong { color: var(--encre); }

.choix { display: grid; gap: .6rem; }

.choix label { display: flex; align-items: center; gap: .5rem; font-size: .92rem; cursor: pointer; }

.choix input { width: auto; height: auto; accent-color: var(--accent); }

.choix code { font-size: .82rem; background: var(--accent-pale); padding: .1em .4em; border-radius: 4px; }

/* ---------- connexion ---------- */

.ecran-connexion { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem; }

.boite-connexion {
    width: 100%;
    max-width: 360px;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: 14px;
    padding: 2rem 1.75rem;
}

.boite-connexion .sous-titre { margin: .2rem 0 1.75rem; font-size: .85rem; color: var(--encre-clair); }
.boite-connexion label { display: block; font-size: .82rem; color: var(--encre-clair); margin-bottom: .35rem; }
.boite-connexion label + input { margin-bottom: .9rem; }
.boite-connexion button { width: 100%; margin-top: .6rem; }
.boite-connexion .aide { margin: 1.1rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--encre-clair); }
.boite-connexion .aide code { background: rgba(26, 40, 48, .07); padding: .1em .35em; border-radius: 4px; }

.alerte {
    margin: 0 0 1rem;
    padding: .55rem .75rem;
    font-size: .85rem;
    border-radius: var(--rayon);
    background: rgba(201, 86, 74, .12);
    color: #92382e;
}

/* ---------- points de rupture ---------- */

@media (max-width: 1080px) {
    .colonnes { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .colonnes > aside { position: static; }
    aside textarea { min-height: 180px; }
}

@media (max-width: 1000px) {
    .projet-ligne { grid-template-columns: minmax(0, 1fr) 5.5rem 4.5rem 6rem; }
    .projet-ligne select { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .projet-ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .projet-ligne .nom-projet { grid-column: 1 / -1; }
    .achat-ajout { grid-template-columns: minmax(0, 1fr) 6rem; }
    .achat-ajout button { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    body { font-size: 16px; }
    .contenu { padding-top: 1.5rem; }
    .identite { grid-template-columns: minmax(0, 1fr); }
    .totaux { gap: 1.25rem 2.5rem; }
    .totaux > div { min-width: 7rem; }
    .ajout .rangee, .ajout .rangee.trois { grid-template-columns: minmax(0, 1fr); }
    a.ligne-client { flex-direction: column; align-items: stretch; gap: .6rem; }
    .chiffres { gap: 1.5rem; text-align: left; }
    .titre-barre { max-width: 100%; order: 3; width: 100%; }
    .filtre { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- thème sombre ---------- */


/* ---------- modifications en attente ---------- */

body.a-enregistrer button[data-enregistrer] {
    background: var(--corail);
    border-color: var(--corail);
    color: #fff;
}

body.a-enregistrer button[data-enregistrer]:hover { background: #b8493e; border-color: #b8493e; }

body.a-enregistrer button[data-enregistrer]::after { content: ' •'; }

/* ---------- achats ---------- */

.achats { margin-top: .5rem; }

.achat {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--trait);
    font-size: .85rem;
}

.achat span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.achat b { font-weight: 600; white-space: nowrap; }

.croix {
    height: 22px;
    width: 22px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--encre-clair);
    font-size: 1.05rem;
    line-height: 1;
    border-radius: 4px;
}

.croix:hover { background: rgba(201, 86, 74, .14); color: var(--corail); }

.achat-ajout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem auto;
    gap: .4rem;
    margin-top: .6rem;
}

.achat-ajout input { height: 34px; font-size: .85rem; }
.achat-ajout button { height: 34px; font-size: .85rem; padding: 0 .8rem; }

/* ---------- thème sombre ---------- */

@media (prefers-color-scheme: dark) {
    :root {
        --encre: #e7ebe6;
        --encre-clair: #8b9aa1;
        --papier: #101a20;
        --carte: var(--navy);

        --accent-pale: rgba(200, 240, 74, .15);
        --accent-encre: #d9f77e;
        --accent-trace: #c8f04a;

        --corail: #e58175;
        --vert: #b3dd5a;

        --trait: rgba(231, 235, 230, .13);
        --trait-fort: rgba(231, 235, 230, .3);

        --st-cours-teinte: rgba(200, 240, 74, .16);  --st-cours-encre: #d5f486;   --st-cours-vif: var(--lime);
        --st-attente-teinte: rgba(217, 164, 65, .18); --st-attente-encre: #e8c078; --st-attente-vif: #d9a441;
        --st-fini-teinte: rgba(231, 235, 230, .09);  --st-fini-encre: #a6b5bb;    --st-fini-vif: #6d838d;
        --st-abandon-teinte: rgba(231, 235, 230, .045); --st-abandon-encre: #7d8c92; --st-abandon-vif: #4e6069;
    }

    .barre { background: rgba(16, 26, 32, .93); }

    button.secondaire { color: var(--encre); }
    button.secondaire:hover { background: rgba(231, 235, 230, .08); }

    .projet[data-statut="terminé"],
    .projet[data-statut="abandonné"] { background: rgba(231, 235, 230, .03); }

    .alerte { background: rgba(229, 129, 117, .16); color: #f0a89c; }

    .boite-connexion .aide code { background: rgba(231, 235, 230, .1); }

    button.discret:hover { color: #f0a89c; }

    .bascule button.actif { background: var(--lime); color: var(--navy); }

    select.pastille {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238b9aa1' stroke-width='1.8'/></svg>");
    }
}