/* Le backoffice reprend l'identité de l'application : un fond calme, et une couleur par rubrique
   (bleu des bons, brique du stock, vert des clients, violet du planning, rose de l'activité). */
:root {
    --fond: #f5f3ee; --carte: #ffffff; --texte: #1d1d1f; --discret: #6e6e73; --trait: #e6e2d9;
    --bons: #34599b; --stock: #c4622e; --clients: #2f8a63; --planning: #7b5ca8; --activite: #b94f7a; --ardoise: #4a5361;
    --soleil: #edc25a;
    --rouge: #c0392b; --vert: #1e7d46; --orange: #b56a00;
    --teinte: var(--bons);
    --arrondi: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
    :root { --fond: #131417; --carte: #1d1e22; --texte: #f3f3f5; --discret: #9d9da6; --trait: #2e2f36;
            --bons: #4a74bd; --stock: #d0733f; --clients: #3c9b72; --planning: #8e6fbd; --activite: #c9618b; --ardoise: #66707f;
            --rouge: #ff7466; --vert: #62cf8d; --orange: #f0a84a; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 15px/1.45 -apple-system, "Segoe UI", system-ui, sans-serif; background: var(--fond); color: var(--texte); }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--teinte) 60%, transparent); outline-offset: 2px; }

/* Les quatre blocs de l'accueil de l'application, en miniature */
.sigle { display: inline-grid; flex: none; grid-template-columns: repeat(2, 11px); gap: 3px; margin-right: 10px; }
.sigle i { height: 11px; border-radius: 3.5px; }
.sigle i:nth-child(1) { background: var(--bons); } .sigle i:nth-child(2) { background: var(--stock); }
.sigle i:nth-child(3) { background: var(--clients); } .sigle i:nth-child(4) { background: var(--planning); }

.accueil { min-height: 100vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; padding: 16px; }
.accueil h1 { margin: 0; font: 700 34px/1.1 var(--arrondi); display: flex; align-items: center; }
.accueil h1 .sigle { grid-template-columns: repeat(2, 15px); gap: 4px; margin-right: 14px; }
.accueil h1 .sigle i { height: 15px; border-radius: 5px; }
/* Bouton fourni par Apple : il place lui-même son texte et suppose un alignement à gauche ; il lui faut aussi un contour sur fond sombre. */
.apple-auth-button { text-align: left; line-height: normal; border-radius: 99px !important; border-color: color-mix(in srgb, var(--texte) 30%, transparent) !important; margin: 0 auto; }
#apple-sign-in-button { margin-top: 10px; }
.accueil p { margin: 0 0 8px; max-width: 46ch; color: var(--discret); }

#application { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
aside { padding: 24px 16px 20px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marque { font: 700 19px/1 var(--arrondi); padding: 0 14px; display: flex; align-items: center; }
.societes { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
/* Fond blanc dans les deux thèmes : un logo est dessiné pour du papier clair. */
.societe { height: 62px; padding: 9px 12px; border-radius: 16px; border: 0; background: #fff; color: #1d1d1f; font-weight: 650;
           display: grid; place-items: center; box-shadow: 0 1px 0 var(--trait); opacity: .55; }
.societe img { max-width: 100%; max-height: 44px; object-fit: contain; display: block; }
.societe:hover { opacity: .85; }
.societe[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 3px var(--fond), 0 0 0 5px var(--ardoise); }
.societe:only-child { box-shadow: 0 1px 0 var(--trait); }
nav { display: grid; gap: 4px; }
.lien { text-align: left; border: 0; background: none; padding: 9px 14px; border-radius: 12px; }
.lien:hover { background: color-mix(in srgb, var(--teinte) 10%, transparent); }
.lien[aria-current="page"] { background: color-mix(in srgb, var(--teinte) 16%, transparent); color: var(--teinte); font-weight: 650; }
@media (prefers-color-scheme: dark) { .lien[aria-current="page"] { color: color-mix(in srgb, var(--teinte) 55%, white); } }
.tuiles-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.tuile-nav { border: 0; border-radius: 18px; padding: 14px 14px 12px; text-align: left; color: #fff; background: var(--teinte);
             display: grid; gap: 2px; transition: transform .12s; }
.tuile-nav b { font: 700 27px/1 var(--arrondi); font-variant-numeric: tabular-nums; }
.tuile-nav span { font-weight: 600; font-size: 14px; }
.tuile-nav:hover { transform: translateY(-1px); }
.tuile-nav[aria-current="page"] { box-shadow: 0 0 0 3px var(--fond), 0 0 0 6px var(--teinte); }
.pied { margin-top: auto; display: grid; gap: 8px; font-size: 13px; color: var(--discret); }
.pied button { border: 1px solid var(--trait); background: var(--carte); padding: 8px 12px; border-radius: 12px; }
.pied #etat { text-align: center; }
.pied .apple-auth-button { width: 100% !important; }

main { padding: 16px 28px 40px 12px; }
.bande { background: var(--teinte); color: #fff; border-radius: 24px; padding: 22px 28px; margin-bottom: 16px;
         display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: center; justify-content: space-between; }
.bande h2 { margin: 0; font: 700 28px/1.1 var(--arrondi); }
.chiffres { display: flex; gap: 34px; align-items: center; }
.chiffres button { border: 0; background: rgba(255, 255, 255, .22); color: #fff; padding: 8px 16px; border-radius: 99px; font-weight: 600; }
.chiffres button:hover { background: rgba(255, 255, 255, .32); }
.chiffres b { display: block; font: 700 26px/1 var(--arrondi); font-variant-numeric: tabular-nums; }
.chiffres span { font-size: 13.5px; opacity: .88; }

.outils { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.outils input[type=search], .outils select {
    height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--trait); background: var(--carte); }
.outils input[type=search] { flex: 1 1 160px; max-width: 320px; }
.outils select { max-width: 200px; }
.outils select.actif { background: var(--teinte); border-color: var(--teinte); color: #fff; font-weight: 600; }
.outils .nombre { margin-left: auto; color: var(--discret); font-variant-numeric: tabular-nums; }

.cadre { background: var(--carte); border-radius: 20px; overflow-x: auto; box-shadow: 0 1px 0 var(--trait); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--trait); vertical-align: middle; }
td.fixe, td.nombre { white-space: nowrap; }
th { font-size: 13px; color: var(--discret); white-space: nowrap; }
th button { border: 0; background: none; padding: 0; font-weight: 600; color: inherit; }
th button:hover { color: var(--texte); }
tbody tr:hover { background: color-mix(in srgb, var(--teinte) 7%, transparent); }
tbody tr[tabindex] { cursor: pointer; }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.vide { padding: 44px; text-align: center; color: var(--discret); font-weight: 400 !important; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 650; white-space: nowrap;
         background: color-mix(in srgb, currentColor 14%, transparent); }
.vert { color: var(--vert); } .rouge { color: var(--rouge); } .orange { color: var(--orange); } .gris { color: var(--discret); }

/* Tableau de bord : la phrase du jour, comme sur l'accueil de l'application */
.jour { color: var(--discret); margin: 10px 0 2px; }
.phrase { margin: 0 0 22px; font: 700 clamp(30px, 4vw, 44px)/1.08 var(--arrondi); letter-spacing: -.01em; }
.deux { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.bloc { background: var(--carte); border-radius: 20px; padding: 18px 20px; box-shadow: 0 1px 0 var(--trait); }
.bloc h3 { margin: 0 0 8px; font: 700 17px/1.2 var(--arrondi); }
.afaire { display: grid; }
.afaire button { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center; text-align: left;
                 border: 0; border-top: 1px solid var(--trait); background: none; padding: 11px 0; }
.afaire button:first-child { border-top: 0; }
.afaire button:hover b { text-decoration: underline; }
.afaire i { width: 12px; height: 12px; border-radius: 4px; background: var(--teinte); }
.afaire b { display: block; font-weight: 600; }
.afaire span { color: var(--discret); font-size: 13.5px; }
.barres { display: flex; align-items: flex-end; gap: 10px; height: 132px; }
.barres div { flex: 1; display: grid; gap: 4px; text-align: center; font-size: 12.5px; color: var(--discret); align-content: end; height: 100%; }
.barres i { display: block; background: var(--activite); border-radius: 7px; min-height: 3px; opacity: .45; }
.barres div:last-child i { opacity: 1; }
.valeur { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--trait); display: flex; justify-content: space-between; color: var(--discret); }
.valeur b { color: var(--texte); font-variant-numeric: tabular-nums; }

.fiche { position: fixed; inset: 0 0 0 auto; width: min(540px, 100vw); background: var(--carte); overflow-y: auto;
         box-shadow: -18px 0 48px rgba(20, 20, 30, .16); animation: glisser .18s ease-out; }
@keyframes glisser { from { transform: translateX(28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fiche { animation: none; } .tuile-nav { transition: none; } }
.fiche header { background: var(--teinte); color: #fff; padding: 22px 24px; display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.fiche h3 { margin: 0; font: 700 22px/1.15 var(--arrondi); overflow-wrap: anywhere; }
.fiche header button { border: 0; background: rgba(255, 255, 255, .22); color: #fff; padding: 7px 14px; border-radius: 99px; font-weight: 600; }
.fiche .corps { padding: 8px 24px 32px; }
.fiche h4 { margin: 22px 0 8px; font: 700 15px/1.2 var(--arrondi); color: var(--teinte); }
@media (prefers-color-scheme: dark) { .fiche h4 { color: color-mix(in srgb, var(--teinte) 55%, white); } }
.fiche dl { display: grid; grid-template-columns: 140px 1fr; gap: 7px 14px; margin: 0; }
.fiche dt { color: var(--discret); } .fiche dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fiche ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.fiche a { color: inherit; text-decoration-color: var(--teinte); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.photos { display: flex; flex-wrap: wrap; gap: 8px; }
.photos img { width: 116px; height: 116px; object-fit: cover; border-radius: 14px; }

@media (max-width: 820px) {
    #application { grid-template-columns: 1fr; }
    aside { position: static; height: auto; }
    main { padding: 0 14px 32px; }
    .deux { grid-template-columns: 1fr; }
    .chiffres { gap: 22px; }
}

/* Saisie */
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.actions button, .formulaire button { border: 1px solid var(--trait); background: var(--carte); padding: 8px 15px; border-radius: 99px; font-weight: 600; }
.actions button:hover { border-color: var(--teinte); }
.actions button.plein, .formulaire button.plein { background: var(--teinte); border-color: var(--teinte); color: #fff; }
.actions button.danger { color: var(--rouge); }
.actions button:disabled { opacity: .6; cursor: default; }
td .actions { margin: 0; }
td .actions button { padding: 5px 12px; font-size: 13.5px; white-space: nowrap; }
.chiffres button.plein { background: #fff; color: var(--teinte); }
.chiffres button.plein:hover { background: rgba(255, 255, 255, .88); }
.note { color: var(--discret); font-size: 13.5px; margin: 8px 0 0; }
.formulaire { display: grid; gap: 14px; padding-top: 14px; }
.champ { display: grid; gap: 5px; }
.champ label { font-weight: 600; font-size: 14px; }
.champ small { color: var(--discret); }
.champ input, .champ select, .champ textarea {
    width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--trait); background: var(--fond); font: inherit; color: inherit; }
.champ textarea { resize: vertical; min-height: 76px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 3px solid color-mix(in srgb, var(--teinte) 45%, transparent); border-color: var(--teinte); }
.erreur { margin: 0; padding: 10px 12px; border-radius: 12px; color: var(--rouge); background: color-mix(in srgb, var(--rouge) 12%, transparent); font-weight: 600; }
.suite { border: 1px solid var(--trait); background: var(--carte); padding: 8px 16px; border-radius: 99px; font-weight: 600; }
#partout { width: 100%; height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--trait); background: var(--carte); }
.resultats { margin-bottom: 14px; max-width: 760px; }