/* -------------------------------------------------------------------------
   La Console - feuille de style unique.
   -------------------------------------------------------------------------

   Le parti pris tient en une phrase : ce n est pas un back-office, c est une
   console d exploitation. Des filets fins la ou PrestaShop pose des panneaux
   gris, de la densite, un seul accent, et la couleur reservee a l ETAT - jamais
   a la decoration. Une couleur qui decore est une couleur qu on ne croit plus
   quand elle alerte.

   Aucune police distante : la politique de contenu n admet que 'self', et une
   police qui ne charge pas remplace la mise en page par une autre, en silence.
   Piles systeme, donc.

   Tous les tons passent par des jetons. Les redefinir sous
   prefers-color-scheme suffit a tenir les deux themes : aucune couleur n est
   ecrite en dur ailleurs que dans :root.
   ------------------------------------------------------------------------- */

:root {
    color-scheme: light dark;

    --fond:        #F4F5F3;
    --surface:     #FFFFFF;
    --encre:       #191F1D;
    --encre-douce: #5C6864;
    --filet:       #DEE2DE;
    --filet-fort:  #C4CAC5;

    --accent:      #0F5C52;
    --accent-doux: #E4EFEC;

    --ok:          #1B6F44;
    --ok-doux:     #E3F1E8;
    --attention:   #8A5A0B;
    --attention-doux: #F7EEDC;
    --alerte:      #9E2A24;
    --alerte-doux: #F6E4E2;

    --texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --chiffres: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --pas: 4px;
    --large: 1120px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fond:        #131817;
        --surface:     #1B2220;
        --encre:       #E5EAE8;
        --encre-douce: #96A29E;
        --filet:       #2B3432;
        --filet-fort:  #3C4644;

        --accent:      #55B7A6;
        --accent-doux: #14302C;

        --ok:          #63BC8C;
        --ok-doux:     #142C20;
        --attention:   #D2A054;
        --attention-doux: #2E2617;
        --alerte:      #E08880;
        --alerte-doux: #331B1A;
    }
}

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

body {
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font: 15px/1.5 var(--texte);
    -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

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

/* ------------------------------------------------------------ la barre */

.c-barre {
    display: flex;
    align-items: center;
    gap: calc(var(--pas) * 6);
    padding: 0 calc(var(--pas) * 5);
    background: var(--surface);
    border-bottom: 1px solid var(--filet);
    /* Un filet, pas une ombre portee : l ombre est le tic visuel de tous les
       back-offices, et elle ne dit rien. */
}

.c-marque {
    display: flex;
    align-items: baseline;
    gap: calc(var(--pas) * 2);
    padding: calc(var(--pas) * 4) 0;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--encre);
    text-decoration: none;
    white-space: nowrap;
}
.c-marque span {
    font: 500 11px/1 var(--texte);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
    border-left: 1px solid var(--filet-fort);
    padding-left: calc(var(--pas) * 2);
}

.c-nav { display: flex; gap: calc(var(--pas) * 5); margin-right: auto; flex-wrap: wrap; }
.c-nav a {
    display: block;
    padding: calc(var(--pas) * 4) 0;
    color: var(--encre-douce);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.c-nav a:hover { color: var(--encre); }
.c-nav a.est-courant { color: var(--encre); border-bottom-color: var(--accent); font-weight: 500; }

.c-sortie { display: flex; align-items: center; gap: calc(var(--pas) * 3); margin: 0; }
.c-qui { color: var(--encre-douce); white-space: nowrap; }

.c-lien-bouton {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ------------------------------------------------------------- le corps */

.c-corps {
    max-width: var(--large);
    margin: 0 auto;
    padding: calc(var(--pas) * 8) calc(var(--pas) * 5) calc(var(--pas) * 16);
}

body.c-nu { display: grid; place-items: center; min-height: 100vh; padding: calc(var(--pas) * 5); }
.c-corps--seule { padding: 0; width: 100%; }

h1 { font: 600 24px/1.25 var(--texte); letter-spacing: -0.015em; margin: 0 0 calc(var(--pas) * 2); }
h2 {
    font: 600 12px/1 var(--texte);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--encre-douce);
    margin: calc(var(--pas) * 10) 0 calc(var(--pas) * 3);
}
h2:first-child { margin-top: 0; }

.c-doux { color: var(--encre-douce); }
.c-fin { font-size: 13px; margin-bottom: 0; }

/* -------------------------------------------------------------- la carte */

.c-carte {
    background: var(--surface);
    border: 1px solid var(--filet);
    border-radius: 3px;
    padding: calc(var(--pas) * 7);
}
.c-carte--seule { width: min(420px, 100%); }

/* ------------------------------------------------------------ les blocs */

/* LE BLOC POSE SA MARGE INTERIEURE, et les deux enfants « pleine largeur » la
   reprennent a leur compte.

   Il n en avait aucune, parce qu il enveloppe aussi bien un tableau - qui porte
   la sienne dans ses cellules - qu un formulaire, qui n en a pas du tout. Le
   resultat se voyait sur les fiches : les champs collaient au bord du panneau,
   et le bouton touchait le coin. Aucun banc ne pouvait le dire ; il a fallu
   regarder une capture.

   Le sens de la regle compte : c est le CAS COURANT qui est confortable, et les
   deux exceptions qui se declarent. L inverse - un bloc nu et chaque formulaire
   qui pense a se marger - est exactement le genre de convention qu on oublie au
   prochain ecran. */
.c-bloc {
    background: var(--surface);
    border: 1px solid var(--filet);
    border-radius: 3px;
    overflow: hidden;
    padding: calc(var(--pas) * 5);
}

.c-bloc > .c-table-cadre,
.c-bloc > .c-vide { margin: calc(var(--pas) * -5); }

/* Suivi de quelque chose - un avertissement sous un tableau - il rend l espace
   du bas, sinon sa marge negative fait remonter le voisin par-dessus lui. */
.c-bloc > .c-table-cadre:not(:last-child),
.c-bloc > .c-vide:not(:last-child) { margin-bottom: 0; }

/* Le formulaire pousse 24px au-dessus de lui pour respirer quand il est seul au
   milieu de l ecran de connexion. Dans un bloc deja marge, cela en fait 44. */
.c-bloc > .c-formulaire { margin-top: 0; }

/* Le dernier enfant ne laisse pas trainer sa marge du bas - SAUF les deux
   pleine largeur, dont la marge NEGATIVE est ce qui les colle au bord.
   Sans le :not(), cette regle les annulait a specificite egale, et un vide
   de vingt pixels apparaissait sous chaque tableau. */
.c-bloc > *:last-child:not(.c-table-cadre):not(.c-vide) { margin-bottom: 0; }

/* Et symetriquement en haut : un <p> ou un <ul> en tete de bloc ajoutait sa
   marge propre a celle du bloc. Le meme :not() qu au-dessus, et pour la meme
   raison exactement - sans lui, la regle annulerait la marge NEGATIVE qui colle
   les deux enfants pleine largeur au bord, et un vide apparaitrait au-dessus de
   chaque tableau. */
.c-bloc > *:first-child:not(.c-table-cadre):not(.c-vide) { margin-top: 0; }
.c-bloc + .c-bloc { margin-top: calc(var(--pas) * 4); }

.c-colonnes {
    display: grid;
    gap: calc(var(--pas) * 4);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ------------------------------------------------------------ les chiffres */

.c-chiffres { display: flex; flex-wrap: wrap; gap: 1px; background: var(--filet); border: 1px solid var(--filet); border-radius: 3px; }
.c-chiffre { flex: 1 1 150px; background: var(--surface); padding: calc(var(--pas) * 5); }
.c-chiffre b {
    display: block;
    font: 600 30px/1 var(--chiffres);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.c-chiffre span {
    display: block;
    margin-top: calc(var(--pas) * 2);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre-douce);
}
.c-chiffre--alerte b { color: var(--alerte); }
.c-chiffre--attention b { color: var(--attention); }

/* UN CHIFFRE QUI MENE QUELQUE PART RESTE UN CHIFFRE. Sans ces deux lignes, la
   regle des liens (couleur d accent, souligne) ecraserait la couleur d etat -
   et c est elle qui porte l information : un impaye doit rester rouge. Le
   survol le dit autrement, sur le libelle. */
a.c-chiffre { color: inherit; text-decoration: none; }
a.c-chiffre:hover span { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------ les tables */

.c-table-cadre { overflow-x: auto; }

table.c-table { width: 100%; border-collapse: collapse; font-size: 14px; }

/* UNE LEGENDE DE TABLEAU, ET PAS UN PARAGRAPHE AU-DESSUS. Un <p> place avant
   .c-table-cadre passerait SOUS lui : le cadre porte une marge negative pour
   coller aux bords du bloc, et cette marge remonte par-dessus son voisin. La
   legende, elle, est dans le tableau - elle ne peut pas se faire recouvrir. */
.c-table caption {
    text-align: left;
    padding: calc(var(--pas) * 3) calc(var(--pas) * 4) 0;
    border-bottom: 0;
}
.c-table th {
    text-align: left;
    font: 500 11px/1 var(--texte);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--encre-douce);
    padding: calc(var(--pas) * 3) calc(var(--pas) * 4);
    border-bottom: 1px solid var(--filet-fort);
    white-space: nowrap;
}
.c-table td {
    padding: calc(var(--pas) * 3) calc(var(--pas) * 4);
    border-bottom: 1px solid var(--filet);
    vertical-align: baseline;
}
.c-table tr:last-child td { border-bottom: 0; }
.c-table .c-nombre { text-align: right; font-family: var(--chiffres); font-variant-numeric: tabular-nums; }
.c-table .c-code { font-family: var(--chiffres); font-size: 13px; color: var(--encre-douce); }

/* --------------------------------------------------------- les etiquettes */

.c-etat {
    display: inline-block;
    padding: 2px calc(var(--pas) * 2);
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.c-etat--ok        { background: var(--ok-doux);        color: var(--ok); }
.c-etat--attention { background: var(--attention-doux); color: var(--attention); }
.c-etat--alerte    { background: var(--alerte-doux);    color: var(--alerte); }
.c-etat--neutre    { background: var(--accent-doux);    color: var(--accent); }

/* ------------------------------------------------------------ les messages */

.c-message {
    margin: 0 0 calc(var(--pas) * 5);
    padding: calc(var(--pas) * 3) calc(var(--pas) * 4);
    border-left: 3px solid var(--filet-fort);
    border-radius: 0 2px 2px 0;
    font-size: 14px;
}
.c-message--alerte    { border-left-color: var(--alerte);    background: var(--alerte-doux); }
.c-message--attention { border-left-color: var(--attention); background: var(--attention-doux); }
.c-message--ok        { border-left-color: var(--ok);        background: var(--ok-doux); }
.c-message--info      { border-left-color: var(--accent);    background: var(--accent-doux); }

/* ------------------------------------------------------------ le vide */

/* L ECRAN VIDE EST LE PREMIER ECRAN. Le jour de la mise en service, tout est
   vide : une page blanche y est un echec, pas un cas limite. */
.c-vide {
    padding: calc(var(--pas) * 10) calc(var(--pas) * 6);
    text-align: center;
    color: var(--encre-douce);
}
.c-vide strong { display: block; color: var(--encre); font-weight: 600; margin-bottom: calc(var(--pas) * 2); }

/* --------------------------------------------------------- les formulaires */

.c-formulaire { display: flex; flex-direction: column; gap: calc(var(--pas) * 2); margin-top: calc(var(--pas) * 6); }
.c-formulaire label {
    font: 500 12px/1 var(--texte);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--encre-douce);
    margin-top: calc(var(--pas) * 3);
}
.c-formulaire input {
    font: 15px/1.4 var(--texte);
    color: var(--encre);
    background: var(--fond);
    border: 1px solid var(--filet-fort);
    border-radius: 3px;
    padding: calc(var(--pas) * 3);
    width: 100%;
}
.c-formulaire input:focus { border-color: var(--accent); }

.c-bouton {
    margin-top: calc(var(--pas) * 6);
    font: 500 15px/1 var(--texte);
    color: var(--surface);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: calc(var(--pas) * 3) calc(var(--pas) * 5);
    cursor: pointer;
}
.c-bouton:hover { filter: brightness(1.12); }

/* Un code a six chiffres se lit et se tape autrement qu un mot : gros, espace,
   a chasse fixe. */
.c-code-saisie {
    font: 600 28px/1 var(--chiffres) !important;
    letter-spacing: 0.35em;
    text-align: center;
}

.c-secret {
    display: block;
    margin: calc(var(--pas) * 3) 0;
    padding: calc(var(--pas) * 4);
    background: var(--fond);
    border: 1px dashed var(--filet-fort);
    border-radius: 3px;
    font: 600 16px/1.6 var(--chiffres);
    letter-spacing: 0.12em;
    text-align: center;
    word-break: break-all;
}

/* Utilitaires d espacement.
   Ils existent parce que la politique de contenu interdit les styles en ligne :
   un attribut style= ne s applique pas, sans erreur ni message. La contrainte
   est voulue - c est elle qui neutralise une injection de balise - et elle se
   paie par ces quelques classes. */
.c-espace-avant { margin-top: calc(var(--pas) * 6); }
.c-espace-apres { margin-bottom: calc(var(--pas) * 6); }

/* Le code-barres. Fond blanc en dur dans le SVG lui-meme : la console suit le
   theme du visiteur, et un code pose sur un fond sombre ne se lit pas. */
.c-code-barres {
    display: flex;
    justify-content: center;
    margin: calc(var(--pas) * 5) 0 calc(var(--pas) * 3);
}
.c-code-barres svg {
    width: min(240px, 100%);
    height: auto;
    border: 1px solid var(--filet);
    border-radius: 3px;
}

.c-repli {
    margin-top: calc(var(--pas) * 4);
    border-top: 1px solid var(--filet);
    padding-top: calc(var(--pas) * 3);
}
.c-repli summary {
    cursor: pointer;
    color: var(--accent);
    font-size: 14px;
}

/* ==========================================================================
   LES ECRANS D EXPLOITATION - listes, fiches, formulaires.
   ========================================================================== */

/* Un titre et son bouton d action sur la meme ligne, qui passent l un sous
   l autre quand la place manque. */
.c-titre {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: calc(var(--pas) * 3);
    margin-bottom: calc(var(--pas) * 4);
}
.c-titre h1 { margin: 0; margin-right: auto; }

/* Le fil de retour. Discret : on y revient, on ne le cherche pas. */
.c-fil { margin: 0 0 calc(var(--pas) * 3); font-size: 13px; }
.c-fil a { color: var(--encre-douce); text-decoration: none; }
.c-fil a:hover { color: var(--accent); }

.c-bloc--etroit { max-width: 560px; }

/* --------------------------------------------------- boutons et actions */

/* La variante « en ligne » : celle qui vit a cote d un titre ou dans une
   barre de filtres, et qui ne doit donc pas pousser 24 pixels de marge
   au-dessus d elle comme le fait .c-bouton en bas d un formulaire. */
.c-bouton--ligne {
    margin-top: 0;
    padding: calc(var(--pas) * 2) calc(var(--pas) * 4);
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}

/* Le rouge est reserve a ce dont on ne revient pas. S en servir pour un
   « enregistrer » le viderait de son sens au moment ou il compte. */
.c-bouton--danger {
    background: var(--alerte);
    border-color: var(--alerte);
    margin-top: calc(var(--pas) * 3);
}

.c-lien-doux { color: var(--encre-douce); font-size: 14px; text-decoration: none; }
.c-lien-doux:hover { color: var(--accent); text-decoration: underline; }

.c-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--pas) * 4);
    margin-top: calc(var(--pas) * 6);
}
.c-actions--pile { margin-top: calc(var(--pas) * 3); }
.c-actions form { margin: 0; }

/* ------------------------------------------------------- les formulaires */

/* Le back-office de PrestaShop imposait ses styles aux champs ; ici la chaine
   est a nous, mais les valeurs par defaut du navigateur, elles, restent - un
   select et un textarea n heritent PAS de la police du corps. Il faut le
   redire, sinon le formulaire melange deux typographies. */
.c-formulaire select,
.c-formulaire textarea {
    font: 15px/1.4 var(--texte);
    color: var(--encre);
    background: var(--fond);
    border: 1px solid var(--filet-fort);
    border-radius: 3px;
    padding: calc(var(--pas) * 3);
    width: 100%;
}
.c-formulaire textarea { resize: vertical; min-height: calc(var(--pas) * 20); }
.c-formulaire select:focus,
.c-formulaire textarea:focus { border-color: var(--accent); }

/* Serre : deux formulaires dans deux colonnes n ont pas la place de respirer
   comme un formulaire de connexion seul au milieu de l ecran. */
.c-formulaire--serre { margin-top: 0; }
.c-formulaire--serre label { margin-top: calc(var(--pas) * 2); }

/* Le message d erreur est SOUS SON CHAMP, pas en haut de page : c est la que
   le regard est deja, et c est ce qui evite de chercher lequel des huit
   champs est en cause. */
.c-erreur {
    color: var(--alerte);
    font-size: 13px;
    line-height: 1.4;
}
.c-aide {
    color: var(--encre-douce);
    font-size: 12.5px;
    line-height: 1.45;
}

/* La case a cocher est le seul champ dont l etiquette se met a DROITE et sur
   la meme ligne. Sans ces trois declarations elle herite du label vertical en
   majuscules du reste du formulaire, et devient illisible. */
.c-formulaire .c-case {
    display: flex;
    align-items: center;
    gap: calc(var(--pas) * 2);
    text-transform: none;
    letter-spacing: 0;
    font: 15px/1.4 var(--texte);
    color: var(--encre);
    margin-top: calc(var(--pas) * 4);
}
.c-formulaire .c-case input { width: auto; }

/* ---------------------------------------------------------- les filtres */

.c-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: calc(var(--pas) * 3);
    margin-bottom: calc(var(--pas) * 4);
    padding: calc(var(--pas) * 4);
    background: var(--surface);
    border: 1px solid var(--filet);
    border-radius: 4px;
}
.c-filtres > div { display: flex; flex-direction: column; gap: calc(var(--pas) * 1); }
.c-filtres label {
    font: 500 11px/1 var(--texte);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--encre-douce);
}
.c-filtres input,
.c-filtres select {
    font: 14px/1.3 var(--texte);
    color: var(--encre);
    background: var(--fond);
    border: 1px solid var(--filet-fort);
    border-radius: 3px;
    padding: calc(var(--pas) * 2) calc(var(--pas) * 3);
    min-width: 150px;
}
.c-filtres input:focus, .c-filtres select:focus { border-color: var(--accent); }
.c-filtres-actions { flex-direction: row !important; align-items: center; gap: calc(var(--pas) * 3); }

/* La recherche porte une indication longue ; 150px la tronquent. */
.c-filtres input[type="search"] { min-width: 230px; }

/* Une date coupee en deux lignes se lit mal dans un tableau qu on balaie.
   Elle ne depasse jamais dix-neuf caracteres : l insecable est sans risque. */
.c-table .c-quand { white-space: nowrap; }

/* ------------------------------------------------------------ les fiches */

.c-detail { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: calc(var(--pas) * 2) calc(var(--pas) * 5); }
.c-detail dt {
    font: 500 11px/1.6 var(--texte);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre-douce);
}
.c-detail dd { margin: 0; font-size: 14px; }
.c-detail dd.c-code { font-family: var(--chiffres); font-size: 13px; }

/* Le detail d une ligne de journal : dense, parce qu il y en a cinquante par
   page et qu on les balaie plus qu on ne les lit. */
.c-details { margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.6; }
.c-details .c-code { font-family: var(--chiffres); color: var(--encre); }
.c-details .c-doux::after { content: " : "; }

.c-pages {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--pas) * 4);
    margin-top: calc(var(--pas) * 4);
    font-size: 14px;
}

@media (max-width: 720px) {
    .c-detail { grid-template-columns: 1fr; gap: 0 0; }
    .c-detail dd { margin-bottom: calc(var(--pas) * 3); }
    .c-filtres input, .c-filtres select { min-width: 0; width: 100%; }
    .c-filtres > div { width: 100%; }
}

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