:root {
    --primary: #0061ff;
    --texte: #1b1f24;
    --texte-discret: #5b6470;
    --fond: #f4f6f9;
    --carte: #ffffff;
    --bordure: #e2e6ec;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--texte);
    background: var(--fond);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.entete {
    background: var(--carte);
    border-bottom: 1px solid var(--bordure);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lien-bouton {
    background: none;
    border: none;
    color: var(--primary);
    font: inherit;
    cursor: pointer;
    padding: 8px 0;
}

.carte-etroite { max-width: 440px; margin: 0 auto; }

.formulaire {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}

.formulaire label { font-weight: 600; }

.formulaire input {
    font: inherit;
    font-size: 1.1rem;
    padding: 12px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
}

.formulaire input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

.bouton {
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--primary);
    border: none;
    border-radius: 8px;
    padding: 12px;
    margin-top: 8px;
    cursor: pointer;
}

.erreur {
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: 8px;
    padding: 10px 12px;
}

.petit { font-size: 0.9rem; }

a { color: var(--primary); }

.onglets {
    display: flex;
    gap: 4px;
    background: var(--carte);
    border-bottom: 1px solid var(--bordure);
    padding: 0 16px;
    overflow-x: auto;
}

.onglets a {
    padding: 12px;
    text-decoration: none;
    color: var(--texte-discret);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.onglets a.actif {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.titre-page { font-size: 1.5rem; margin: 0 0 8px; }

.liste-commerces, .documents {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.documents { list-style: none; padding: 0; }

.commerce h2 { margin: 0; font-size: 1.15rem; }
.commerce p { margin: 4px 0 0; }

.liens-commerce {
    display: flex;
    gap: 16px;
    margin: 12px 0 4px;
    font-weight: 600;
}

.document {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 16px;
}

.document-principal, .document-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.document-details { align-items: flex-end; text-align: right; }

.montant { font-weight: 600; }

.pastille {
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 10px;
}

.pastille-payee { background: #ecfdf3; color: #067647; }
.pastille-attente { background: #fffaeb; color: #b54708; }
.pastille-neutre { background: #f2f4f7; color: #344054; }
.pastille-rupture { background: #fef3f2; color: #b42318; }

.sur-appel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--texte-discret);
    margin-top: 4px;
}

.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 0;
}

.filtres label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 200px;
    font-size: 0.9rem;
    font-weight: 600;
}

.filtres select {
    font: inherit;
    font-weight: 400;
    padding: 10px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: var(--carte);
}

.bouton-lien {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    margin-top: 8px;
}

.bouton-action { margin: 12px 0 0; }

.sous-titre { font-size: 1.1rem; margin: 0 0 12px; }

.formulaire .carte { display: flex; flex-direction: column; gap: 8px; }

.formulaire select, .formulaire textarea {
    font: inherit;
    padding: 10px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: var(--carte);
}

.navigation-semaine {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

fieldset { border: none; padding: 0; margin: 8px 0; }
fieldset legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.jour legend::first-letter { text-transform: uppercase; }

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

.plage input { position: absolute; opacity: 0; }

.plage span {
    display: inline-block;
    min-width: 72px;
    text-align: center;
    padding: 10px 12px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    cursor: pointer;
}

.plage input:checked + span {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}

.plage input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

.case { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: 400; }

.info {
    color: #067647;
    background: #ecfdf3;
    border: 1px solid #abefc6;
    border-radius: 8px;
    padding: 10px 12px;
}

.actions-commerce { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.actions-commerce .bouton-lien { margin: 0; }

.entete-boutique {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.entete-boutique .bouton-lien { margin: 0; white-space: nowrap; }

.recherche { display: flex; gap: 8px; margin: 16px 0; }

.recherche input {
    flex: 1;
    min-width: 0;
    font: inherit;
    padding: 12px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
}

.recherche .bouton { margin: 0; }

.ajout { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

.ajout input {
    width: 64px;
    font: inherit;
    padding: 6px 8px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
}

.total { font-size: 1.1rem; margin: 0 0 8px; }

.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .onglets { padding: 0 8px; gap: 0; }
    .onglets a { padding: 12px 7px; font-size: 0.92rem; }
    .sur-appel { align-items: flex-start; }
    .document-details { align-items: flex-start; text-align: left; }
}

.entete-logo img { height: 36px; display: block; }

.contenu {
    flex: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px;
}

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

.carte h1 { margin: 0 0 12px; font-size: 1.5rem; }

.discret { color: var(--texte-discret); }

.pied {
    text-align: center;
    color: var(--texte-discret);
    font-size: 0.85rem;
    padding: 16px;
}