/* Onfacture — identité « la conversation » (option C) : bulle « on ? » bleue + réponse cochée verte */
/* Bricolage Grotesque auto-hébergée (pas de CDN Google : RGPD) */
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --titres: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
    --marine: #0e1b3d;
    --accent-clair: #7c93ff;
    --fond: #f4f6fb;
    --carte: #ffffff;
    --encre: #16233a;
    --sourdine: #64708a;
    --bord: #e0e5ef;
    --accent: #2f57ff;          /* bleu principal */
    --accent-fonce: #1c3fd6;
    --vert: #12b46c;            /* vert « on » / validé / payé */
    --vert-fonce: #0e9459;
    --ok: #12b46c;
    --erreur: #d64545;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fond);
    color: var(--encre);
    line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

header.bandeau {
    background: var(--carte);
    border-bottom: 1px solid var(--bord);
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.marque { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--titres); font-weight: 800; font-size: 1.25rem; color: var(--encre); letter-spacing: -0.02em; }
.marque img { height: 1.6rem; width: auto; display: block; }
.marque .txt span { color: var(--accent); }
.marque .txt { color: var(--encre); }
.bandeau .logo-societe { height: 1.8rem; max-width: 130px; object-fit: contain; display: block;
    margin-left: 0.25rem; padding-left: 0.75rem; border-left: 1px solid var(--bord); }
nav.principale { display: flex; gap: 1rem; flex-wrap: wrap; }
nav.principale a { color: var(--sourdine); font-weight: 500; }
nav.principale a.actif { color: var(--accent); }
.bandeau .droite { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; color: var(--sourdine); font-size: 0.9rem; }

main { max-width: 960px; margin: 1.5rem auto; padding: 0 1rem; }
.carte {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
h1 { font-family: var(--titres); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 1rem; }
h2 { font-family: var(--titres); font-size: 1.1rem; font-weight: 700; }

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.tuile { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 1rem; }
.tuile .chiffre { font-size: 1.8rem; font-weight: 700; }
.tuile .libelle { color: var(--sourdine); font-size: 0.9rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--bord); font-size: 0.95rem; }
th { color: var(--sourdine); font-weight: 600; font-size: 0.85rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.bouton {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.bouton:hover { background: var(--accent-fonce); text-decoration: none; }
.bouton:disabled, .bouton:disabled:hover { background: var(--bord); color: var(--sourdine); cursor: not-allowed; }
.bouton.secondaire { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.bouton.discret { background: transparent; color: var(--sourdine); border: 1px solid var(--bord); }
.bouton.valider { background: var(--vert); }
.bouton.valider:hover { background: var(--vert-fonce); }

label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--sourdine); margin-bottom: 0.2rem; }
input, select, textarea {
    width: 100%;
    font-family: inherit;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--bord);
    border-radius: 8px;
    font-size: 0.95rem;
    background: #fff;
    color: var(--encre);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.champ { margin-bottom: 0.9rem; }
.grille { display: grid; gap: 0.9rem 1rem; }
.grille.deux { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.alerte { border-radius: 8px; padding: 0.7rem 1rem; margin-bottom: 1rem; }
.alerte.succes { background: #e7f6ee; color: var(--ok); border: 1px solid #bfe6d1; }
.alerte.erreur { background: #fdeceb; color: var(--erreur); border: 1px solid #f3c4bf; }
.alerte.attention { background: #fff3d9; color: #8a6100; border: 1px solid #f0dcae; }

.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.badge.facture { background: #e5edff; color: var(--accent-fonce); }
.badge.devis { background: #fff3d9; color: #8a6100; }
.badge.avoir { background: #fdeceb; color: var(--erreur); }
.badge.rappel { background: #fdeceb; color: var(--erreur); }
.badge.pas-de-pa { background: #eef1f6; color: var(--sourdine); white-space: nowrap; }
.badge.transmis-comptable { background: #e0e7ff; color: #3730a3; white-space: nowrap; }
.badge.bientot { background: #fff3d9; color: #8a6100; }

.page-login { display: flex; min-height: 100vh; align-items: center; justify-content: center;
    background: radial-gradient(1200px 600px at 50% -10%, #e8edff 0%, var(--fond) 55%); }
.page-login .carte { width: 100%; max-width: 380px; box-shadow: 0 12px 40px rgba(22,35,58,0.10); border-color: #e6ebf5; }
.page-login .bouton { background: var(--vert); }
.page-login .bouton:hover { background: var(--vert-fonce); }

.lignes-doc td { vertical-align: top; }
.lignes-doc input, .lignes-doc textarea { min-width: 0; }
.lignes-doc textarea { resize: vertical; min-height: 4.8rem; field-sizing: content; line-height: 1.4; }
.lignes-doc td:nth-child(2) input { width: 6rem; }
.lignes-doc td:nth-child(3) input { width: 7.5rem; }
.entete-page { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.entete-page h1 { margin: 0; }
.entete-lignes { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.aide-gras { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--sourdine); margin-top: 0.3rem; }
.bouton.bouton-gras { padding: 0.2rem 0.65rem; font-size: 0.95rem; }
.actions-bas { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; align-items: center; }

.pied { max-width: 960px; margin: 2rem auto 1.5rem; padding: 1rem; color: var(--sourdine); font-size: 0.85rem; text-align: center; border-top: 1px solid var(--bord); }
.pied a { color: var(--sourdine); }
.pied .marque-pied { font-family: var(--titres); font-weight: 800; color: var(--encre); }
.pied .marque-pied span { color: var(--accent); }

/* Connexion — écran en deux panneaux, accroche « Alors, on facture ? » */
body:has(.page-split) main { max-width: none; margin: 0; padding: 0; }
.page-split { display: flex; min-height: 100vh; }
.panneau-marque { width: 42%; min-width: 320px; background: var(--marine); color: #fff; padding: 2.75rem 2.5rem; display: flex; flex-direction: column; box-sizing: border-box; }
.panneau-marque .marque-visuel { display: inline-flex; align-items: center; gap: 0.65rem; font-family: var(--titres); font-weight: 800; font-size: 1.55rem; letter-spacing: -0.02em; color: #fff; }
.panneau-marque .marque-visuel img { height: 2.1rem; width: auto; }
.panneau-marque .marque-visuel span span { color: var(--accent-clair); }
.panneau-marque .accroche { margin-top: 4.5rem; }
.panneau-marque .accroche .titre { font-family: var(--titres); font-size: 2.9rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 1rem; }
.panneau-marque .accroche p { color: #b7c3e2; font-size: 1rem; line-height: 1.6; max-width: 21rem; margin: 0; }
.panneau-marque .arguments { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-direction: column; gap: 0.85rem; }
.panneau-marque .arguments li { display: flex; align-items: center; gap: 0.6rem; color: #dbe3f5; font-size: 0.9rem; }
.panneau-marque .arguments svg { flex: none; }
.zone-form { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1.5rem;
    background: radial-gradient(900px 500px at 50% -10%, #e8edff 0%, var(--fond) 55%); }
.zone-form .carte { width: 100%; max-width: 380px; box-shadow: 0 12px 40px rgba(22,35,58,0.10); border-color: #e6ebf5; margin-bottom: 0; }
.zone-form .carte .bouton { background: var(--vert); }
.zone-form .carte .bouton:hover { background: var(--vert-fonce); }
.zone-form .sous-carte { margin-top: 1.3rem; font-size: 0.85rem; color: var(--sourdine); }
@media (max-width: 800px) {
    .page-split { flex-direction: column; }
    .panneau-marque { width: 100%; min-width: 0; padding: 2rem 1.5rem; }
    .panneau-marque .accroche { margin-top: 2rem; }
    .panneau-marque .accroche .titre { font-size: 2.2rem; }
    .panneau-marque .arguments { margin-top: 1.75rem; }
}

/* ===== Responsive (2026-09-15) — même programme que letilt : desktop
   inchangé, la partie mobile devient une vraie interface. ===== */

/* Tuiles d'accueil cliquables (navigation, comme l'accueil letilt) */
a.tuile { display: block; color: inherit; transition: border-color 0.1s, box-shadow 0.1s, transform 0.1s; }
a.tuile:hover { text-decoration: none; border-color: var(--accent); box-shadow: 0 6px 18px rgba(22,35,58,0.10); }
a.tuile:active { transform: scale(0.98); }
a.tuile .chiffre { color: var(--encre); }
.carte h3 { font-size: 0.95rem; margin: 1.25rem 0 0.5rem; color: var(--sourdine); }
a.tuile.vide .chiffre { color: var(--sourdine); font-weight: 400; }
.tuile .libelle small { font-size: 0.8rem; opacity: 0.8; }

/* Icônes du bandeau (mêmes codes que letilt) : roue crantée Ma société
   toujours visible, power déconnexion réservé au mobile */
.icone-mobile, .icone-bandeau { display: none; background: none; border: none; padding: 0; cursor: pointer; color: var(--sourdine); align-items: center; }
.icone-bandeau { display: inline-flex; }
.icone-mobile:hover, .icone-bandeau:hover, .icone-bandeau.actif { color: var(--encre); text-decoration: none; }
.btn-deco-icone, .btn-deco-icone:hover { color: var(--erreur); }

@media (max-width: 700px) {
    /* Bandeau compact : marque + icônes sur la première ligne,
       navigation défilable sur toute la largeur en dessous */
    .icone-mobile { display: inline-flex; }
    .btn-deco-texte { display: none; }
    header.bandeau { padding: 0.5rem 0.75rem; gap: 0.4rem 0.75rem; }
    .bandeau .droite span { display: none; } /* « société — utilisateur » : pas la place */
    nav.principale { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 1rem; padding-bottom: 0.15rem; -webkit-overflow-scrolling: touch; }
    nav.principale a { white-space: nowrap; }
    .bandeau .logo-societe { max-width: 90px; }

    main { margin-top: 1rem; }
    .carte { padding: 1rem; }

    /* Tables des listes -> cartes empilées (une fiche par ligne).
       Réservé aux tables de LISTE (classe table-cartes sur le wrapper) :
       les tables à totaux (détail document) gardent le défilement. */
    .table-cartes { overflow-x: visible; }
    .table-cartes table, .table-cartes tbody, .table-cartes tr, .table-cartes td { display: block; width: 100%; }
    .table-cartes thead, .table-cartes td:empty { display: none; }
    .table-cartes tr { border: 1px solid var(--bord); border-radius: 10px; padding: 0.6rem 0.75rem; margin-bottom: 0.75rem; background: var(--carte); box-shadow: 0 2px 6px rgba(22,35,58,0.06); }
    .table-cartes tr:last-child { margin-bottom: 0; }
    .table-cartes td { border: none; padding: 0.12rem 0; font-size: 0.92rem; }
    .table-cartes td.num { text-align: left; }
    .table-cartes td[data-libelle]::before { content: attr(data-libelle) " : "; color: var(--sourdine); font-weight: 600; font-size: 0.82rem; }
}

/* Mode test (super admin) : prix unitaires saisis floutés, nets au focus */
.mode-test input[name$="[pu_ht]"]:not(:focus), .mode-test input[name="montant_ht"]:not(:focus),
.mode-test input[name="prix_ht"]:not(:focus), .mode-test input[name="prix_ttc"]:not(:focus),
.mode-test input[name="prix_carton_ht"]:not(:focus), .mode-test input[name="prix_carton_ttc"]:not(:focus), .mode-test .prix-catalogue { filter: blur(5px); }

/* Coches des panneaux de marque (connexion, accueil vignerons) */
.panneau-marque .arguments svg { color: #26e08a; }

/* ===== Habillage « vin » (2026-10-09) : sous-domaine vignerons et sociétés
   au profil vigneron. Bordeaux, rosé et or ; ni bleu ni vert. ===== */
.theme-vin {
    --marine: #3a0d1c;          /* lie-de-vin (panneaux sombres) */
    --accent: #7b1e3a;          /* bordeaux principal */
    --accent-fonce: #5c1229;
    --accent-clair: #e8b4c4;    /* rosé */
    --vert: #8c2443;            /* boutons « valider » : bordeaux */
    --vert-fonce: #6d1a33;
    --ok: #8a5a12;              /* succès : or bruni */
    --fond: #faf6f3;            /* crème */
    --encre: #2b1a1f;
    --sourdine: #7a6468;
    --bord: #ecdfe0;
}
.theme-vin .alerte.succes { background: #fbf3e2; color: #7a5410; border-color: #ecd9ae; }
.theme-vin .badge.facture { background: #f6e4ea; color: var(--accent-fonce); }
.theme-vin .badge.pas-de-pa { background: #f3ecec; }
.theme-vin .badge.transmis-comptable { background: #f3e3d3; color: #7a4515; }
.theme-vin .page-login, .theme-vin .zone-form { background: radial-gradient(900px 500px at 50% -10%, #f5e3e8 0%, var(--fond) 55%); }
.theme-vin .page-login .carte, .theme-vin .zone-form .carte { border-color: #efe0e3; box-shadow: 0 12px 40px rgba(58,13,28,0.12); }
.theme-vin .panneau-marque { background: radial-gradient(700px 500px at 0% 100%, #5a1730 0%, var(--marine) 60%); }
.theme-vin .panneau-marque .accroche p { color: #e3c3cc; }
.theme-vin .panneau-marque .arguments li { color: #f1dde2; }
.theme-vin .panneau-marque .arguments svg { color: #d9b45a; }   /* or */
.theme-vin .marque .txt span, .theme-vin .pied .marque-pied span { color: var(--accent); }
.theme-vin .panneau-marque .marque-visuel span span { color: var(--accent-clair); }

/* Grappe de raisin de l'accueil vignerons */
.panneau-marque .grappe { margin: 2rem 0 0; width: 150px; max-width: 40%; opacity: 0.95; }
@media (max-width: 800px) { .panneau-marque .grappe { width: 96px; margin-top: 1.25rem; } }