/* LA POLICE EST HEBERGEE DANS LE MODULE, PLUS CHEZ GOOGLE — 23/09/2026.
   Regle de Mirko : le module doit fonctionner sans Internet. Cette ligne
   etait un `@import` vers fonts.googleapis.com, et une ligne coupee
   faisait perdre sa typographie a tous les ecrans.
   Les @font-face vivent dans `polices.css`, a cote de ce fichier : voir
   l'explication en tete de ce fichier-la pour la raison du regroupement. */
@import url("polices.css");

@charset "UTF-8";
/* =====================================================================
   MP-Sanit — MP-Gestion
   Feuille de style unique. Aucun style en ligne dans les pages.

   LES COULEURS CITEES EN TETE ETAIENT CELLES D'AVANT L'ALIGNEMENT SUR LE
   SHOP, et elles n'existent plus nulle part : ce commentaire annoncait un
   vert #52A66E et un bleu #33B1E1 que la charte a remplaces. Un
   en-tete qui decrit l'ancien etat est pire qu'un en-tete absent — c'est
   celui-la qui m'a fait ecrire `var(--bleu, #33B1E1)` le 22/09/2026, une
   variable qui n'existe pas, et le module a porte pendant des heures un
   bleu qui n'etait pas le sien. La charte en vigueur est ci-dessous.
   ===================================================================== */

/* =====================================================================
   LA CHARTE, ALIGNEE SUR CELLE DU SHOP MP-SANIT.

   Les couleurs ne sont plus choisies ici : elles viennent des variables
   que shop.mp-sanit.be declare dans inc/params.css, sous les noms
   « --client-* ». Le module et la boutique montrent donc le meme vert,
   le meme orange d'avertissement, le meme rouge de refus.

   Correspondance, pour qu'on puisse la reverifier :
       --vert        <- --client-brand          #5a9e74
       --vert-fonce  <- --client-brand-dark     #3f7959
       --vert-clair  <- --client-surface-soft   #eef5f1
       --orange      <- --client-warning        #db9319
       --rouge       <- --client-danger         #b9001e
       --petrole     <- --client-accent         #15a078
       --gris-fond   <- --client-bg             #f8faf9
       --gris-bord   <- --client-border         #d9dada
       --texte       <- --client-ink            #2e3349
       --texte-doux  <- --client-ink-muted      #707173

   COMPLETE LE 22/09/2026, sur la consigne de Mirko : « tu ne dois faire
   plus que 1 avec le shop.mp-sanit.be ». La reference est la copie du
   site dans C:\Mes Sites Web, et son coeur est
   shop.mp-sanit.be\shop.mp-sanit.be\inc\params.css — 66 variables.

   Ce qui restait different, et qui ne l'est plus :
       --rayon       <- --cb-radius             6px   (etait 4px)
       --rayon-large <- --cb-radius-lg          8px   (nouveau)
       --rayon-petit <- --cb-radius-sm          4px   (nouveau)
       --texte-corps <- --client-ink-soft       #4f5568 (nouveau)
       --ombre       <- --cb-shadow-sm          teinte encre et non verte
       --ombre-haute <- --cb-shadow                    (nouveau)
       --anneau      <- --cb-focus-ring         rgba(90,158,116,.24)
       --hauteur-champ <- --cb-control-height   38px  (nouveau)
       --bleu-clair  <- --cb-info               #007494

   LE BLEU DU MODULE EST L'INFO DU SHOP, et c'est une confirmation
   heureuse : la couleur choisie pour distinguer un ecran de consultation
   se trouvait deja la-bas, au meme code hexadecimal.

   Les noms francais du module sont conserves : les changer aurait oblige
   a reprendre les neuf cents lignes qui les emploient, sans rien gagner.
   ===================================================================== */
:root {
    --vert:          #5A9E74;
    --vert-fonce:    #3F7959;
    --vert-clair:    #EEF5F1;
    --orange:        #DB9319;
    --orange-fonce:  #B87914;
    --orange-clair:  #FBF1DE;
    --petrole:       #15A078;
    --petrole-fonce: #0F7A5B;
    --bleu-clair:    #007494;
    --rouge:         #B9001E;
    --rouge-clair:   #FBE9EC;
    --gris-fond:     #F8FAF9;
    --gris-carte:    #FFFFFF;
    --gris-bord:     #D9DADA;
    --gris-ligne:    #F6F9F7;
    --texte:         #2E3349;
    --texte-doux:    #707173;
    /* LE TEXTE COURANT DU SHOP EST PLUS DOUX QUE SON TITRE : #4f5568
       contre #2e3349. Le module ecrivait tout en encre forte, ce qui
       fatigue sur un tableau de cinquante lignes. */
    --texte-corps:   #4F5568;

    /* LES ARRONDIS DU SHOP, AU PIXEL PRES. Le module etait a 4px partout,
       le shop est a 6px pour les elements courants, 8px pour les grands
       blocs et 4px pour les petits. Des coins plus doux d'un cote et plus
       secs de l'autre suffisent a faire sentir qu'on a change de maison. */
    --rayon:         6px;
    --rayon-large:   8px;
    --rayon-petit:   4px;

    /* L'OMBRE EST TEINTEE ENCRE, ET NON VERTE. Le module tirait sa teinte
       du vert de la marque ; le shop la tire de son encre (#2e3349). Une
       ombre verte sur fond blanc verdit legerement tout l'ecran, et c'est
       exactement ce qui faisait que les deux ne se ressemblaient pas tout
       a fait sans qu'on sache dire pourquoi. */
    --ombre:         0 4px 12px rgba(46, 51, 73, .08);
    --ombre-haute:   0 8px 24px rgba(46, 51, 73, .12);

    /* L'ANNEAU DE MISE AU POINT et la hauteur des champs : le shop les
       declare, le module ne les avait pas. Un champ de 38px a cote d'un
       champ de 24px se voit tout de suite. */
    --anneau:        rgba(90, 158, 116, .24);
    --hauteur-champ: 38px;

    /* LES SEPT METIERS ET LEUR COULEUR, telles que le shop les declare
       (classes .catcha, .catsan, … de params.css). C'est ainsi que le
       CLIENT les distingue sur la page d'accueil de la boutique : le jour
       ou le module colore quoi que ce soit par metier — une ligne
       d'article, un onglet, un graphique —, ce sont ces valeurs-la et pas
       d'autres. Les inventer ferait apparaitre un chauffage d'une couleur
       que le client ne connait pas.

       DEUX SE RECOUPENT AVEC LA CHARTE GENERALE, et il faut le savoir
       avant de conclure : l'orange du chauffage EST --orange
       (--client-warning), le rouge de l'outillage EST --rouge
       (--client-danger). Une ligne orange peut donc dire « chauffage »
       aussi bien qu'« attention » — le contexte tranche, pas la couleur.

       Declarees ici et pas encore employees : c'est deliberé. Mieux vaut
       qu'elles existent avant qu'on en ait besoin que de les voir
       reinventees au jugé dans un coin d'ecran. */
    --metier-chauffage:     #DB9319;
    --metier-sanitaire:     #007494;
    --metier-ventilation:   #51A27E;
    --metier-climatisation: #6B9FBE;
    --metier-electricite:   #B79D00;
    --metier-installation:  #707173;
    --metier-outillage:     #B9001E;

    /* --- LA NAVIGATION GROUPÉE, 23/09/2026 --------------------------
       Six valeurs venues de la maquette validée
       (`docs/maquettes/maquette-navigation-groupee.source.html`) et qui
       n'existaient nulle part ici. Déclarées UNE SEULE FOIS, comme Mirko
       l'a demandé.

       DEUX AUTRES ÉTAIENT DÉJÀ LÀ et sont réemployées telles quelles :
       la teinte du groupe CATALOGUE est `--vert-clair` (#EEF5F1), celle
       de VENTES et PRIX & PROMOS est `--orange-clair` (#FBF1DE). Les
       redéclarer aurait donné deux noms à une même couleur. */
    --teinte-petrole:  #E8F6F1;   /* pastille des groupes Stock, Finances */
    --teinte-bleue:    #E5F1F4;   /* pastille des groupes Achats, Pilotage */
    --teinte-grise:    #F0F1F1;   /* pastille du groupe Administration */
    --gris-eteint:     #EEF0EF;   /* fond de la pastille « À VENIR », et
                                     séparateur de ligne dans un panneau */
    --encre-eteinte:   #9A9C9E;   /* chevrons, et encre d'un écran à venir */
    --icone-eteinte:   #B4B6B8;   /* l'icône d'un écran à venir */

    /* LA LARGEUR UNIQUE, validée par Mirko le 23/09/2026. Le bandeau était
       à 1280 et la page à 1460 : le panneau d'un groupe ne pouvait donc pas
       s'aligner sur la marge de la page. Une seule valeur, et les trois
       s'alignent. Fluide en dessous. */
    --largeur: 1460px;
}

/* --- Base ---------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--gris-fond);
    color: var(--texte);
    font-family: "Roboto Condensed", "Segoe UI Semibold", "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

a { color: var(--bleu-clair); text-decoration: none; }
a:hover { color: var(--petrole); text-decoration: underline; }

h1, h2, h3 {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .04em;
    margin: 0 0 12px 0;
}
h1 { font-size: 19px; color: var(--petrole); }
h2 { font-size: 15px; color: var(--petrole); }
h3 { font-size: 13px; color: var(--texte-doux); }

/* --- Bandeau ------------------------------------------------------- */

.bandeau {
    background: #FFFFFF;
    border-bottom: 3px solid var(--vert);
    box-shadow: var(--ombre);
}
.bandeau-interieur {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.bandeau-logo img { display: block; height: 46px; width: auto; }
.bandeau-titre {
    border-left: 1px solid var(--gris-bord);
    padding-left: 22px;
}
.bandeau-titre .appli {
    display: block;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    color: var(--petrole);
}
.bandeau-titre .sous {
    display: block;
    font-size: 11.5px;
    color: var(--texte-doux);
}
.bandeau-espace { flex: 1 1 auto; }

.menu { display: flex; gap: 4px; flex-wrap: wrap; }
.menu a {
    display: block;
    padding: 7px 14px;
    border-radius: var(--rayon);
    text-transform: uppercase;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--texte-doux);
}
.menu a:hover { background: var(--gris-fond); color: var(--petrole); text-decoration: none; }
.menu a.actif { background: var(--petrole); color: #FFFFFF; }

/* --- Onglets ------------------------------------------------------- */

.menu-onglets {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--gris-bord);
}
.onglet {
    display: block;
    padding: 8px 18px;
    border: 1px solid var(--gris-bord);
    border-bottom: none;
    border-radius: var(--rayon) var(--rayon) 0 0;
    margin-bottom: -2px;
    background: var(--gris-ligne);
    color: var(--texte-doux);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-decoration: none;
}
.onglet:hover { background: #FFFFFF; color: var(--petrole); text-decoration: none; }
.onglet.actif {
    background: #FFFFFF;
    color: var(--petrole);
    border-color: var(--gris-bord);
    border-bottom: 2px solid #FFFFFF;
}

/* --- Structure ----------------------------------------------------- */

.page { max-width: var(--largeur); margin: 0 auto; padding: 20px; }

.grille { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.col { flex: 1 1 360px; min-width: 0; }
.col-etroite { flex: 0 1 258px; min-width: 0; }

.carte {
    background: var(--gris-carte);
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    margin-bottom: 18px;
}
.carte-titre {
    background: var(--petrole);
    color: #FFFFFF;
    padding: 8px 14px;
    border-radius: calc(var(--rayon) - 1px) calc(var(--rayon) - 1px) 0 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
}
/* LE BANDEAU VERT DE LA LOGISTIQUE.
   Les cartes de la fiche article portent toutes le bandeau pétrole ; la
   logistique, elle, est verte. Ce n'est pas de la décoration : poids,
   encombrement, emballage et code marchandises ne servent pas à vendre
   mais à EXPEDIER, et on doit les retrouver d'un coup d'oeil sans lire
   les titres. Le vert est celui de la charte du shop. */
.carte-logistique > .carte-titre { background: var(--vert-fonce); }
.carte-logistique { border-color: var(--vert); }

/* L'année qui coiffe un groupe de classeurs F2. Discrète : c'est un
   repère, pas un titre — le titre est celui de la carte. */
tbody.annee-f2 > tr > th {
    background: var(--gris-fond);
    color: var(--texte-doux);
    font-size: 11px;
    letter-spacing: .06em;
    text-align: left;
    padding: 5px 10px;
    border-top: 1px solid var(--gris-bord);
}

/* Le lien vers la page du produit chez le fabricant : un lien, pas un
   bouton, parce que ce n'est pas un fichier qu'on ouvre mais un site
   qu'on quitte. */
.lien-fabricant {
    color: var(--petrole);
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
}
.lien-fabricant:hover { text-decoration: underline; }

/* Un intertitre à l'intérieur d'un corps de carte, quand une carte
   regroupe deux choses. */
.etiquette-bloc {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texte-doux);
}

/* Un petit tableau de valeurs figées à l'intérieur d'un champ de
   formulaire : ce que le fabricant publie, qu'on lit sans le modifier. */
table.tbl-fiche { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl-fiche td { padding: 4px 0; vertical-align: top; border-bottom: 1px solid var(--gris-bord); }
table.tbl-fiche tr:last-child td { border-bottom: none; }
table.tbl-fiche td:first-child { color: var(--texte-doux); width: 42%; }
table.tbl-fiche .sous-libelle { max-width: none; }

.carte-corps { padding: 14px; }
.carte-corps > :last-child { margin-bottom: 0; }

/* --- Formulaires --------------------------------------------------- */

.champ { margin-bottom: 12px; }
.champ label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texte-doux);
    margin-bottom: 4px;
}
/* LES CHAMPS DE DATE ENTRENT DANS LA LISTE, et ce n'est pas cosmetique :
   depuis le 22/09/2026 les dates se choisissent au calendrier
   (`type="date"`), et sans ce selecteur elles n'auraient ni la bordure, ni
   l'arrondi, ni la hauteur des autres champs — une case etrangere au
   milieu d'un formulaire. */
input[type=text], input[type=number], input[type=date], select {
    width: 100%;
    min-height: var(--hauteur-champ);
    padding: 7px 9px;
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon);
    font-family: inherit;
    font-size: 14px;
    color: var(--texte);
    background: #FFFFFF;
}
/* L'ANNEAU DE MISE AU POINT EST VERT, comme celui du shop.
   Il etait ecrit en dur en rgba(51,177,225,.16) — le bleu clair de
   l'ANCIENNE charte, disparu de :root depuis l'alignement. Personne ne
   pouvait le voir sans comparer les deux sites cote a cote, et c'est
   exactement le genre d'ecart qui fait dire « ca ne se ressemble pas tout
   a fait » sans qu'on sache pourquoi. */
input[type=text]:focus, input[type=number]:focus, input[type=date]:focus, select:focus {
    outline: none;
    border-color: var(--vert);
    box-shadow: 0 0 0 3px var(--anneau);
}
.aide { font-size: 11px; color: var(--texte-doux); margin-top: 4px; }

/* Champ de date : cliquable sur toute sa surface, parce qu'un gestionnaire
   de mots de passe peut recouvrir le petit bouton du calendrier. */
.champ-date { cursor: pointer; }
.champ-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
.champ-date:hover::-webkit-calendar-picker-indicator { opacity: 1; }

.bouton {
    display: inline-block;
    padding: 9px 22px;
    border: none;
    border-radius: var(--rayon);
    background: var(--orange);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
}
.bouton:hover { background: var(--orange-fonce); text-decoration: none; color: #FFFFFF; }
.bouton-vert { background: var(--vert); }
.bouton-vert:hover { background: var(--vert-fonce); }
.bouton-doux {
    background: #FFFFFF;
    color: var(--petrole);
    border: 1px solid var(--gris-bord);
}
.bouton-doux:hover { background: var(--gris-fond); color: var(--petrole); }

/* --- Tableaux denses ----------------------------------------------- */

.tableau-enveloppe { overflow-x: auto; }

table.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
table.tbl th {
    background: var(--petrole);
    color: #FFFFFF;
    text-align: left;
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 7px 9px;
    white-space: nowrap;
}
table.tbl td {
    padding: 6px 9px;
    border-bottom: 1px solid var(--gris-bord);
    vertical-align: top;
}
table.tbl tbody tr:nth-child(even) { background: var(--gris-ligne); }
table.tbl tbody tr:hover { background: var(--vert-clair); }
table.tbl td.num, table.tbl th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tbl td.code { font-family: Consolas, "Courier New", monospace; white-space: nowrap; }
table.tbl tr.ligne-eteinte td { color: var(--texte-doux); }
table.tbl tr.ligne-retenue { background: var(--vert-clair) !important; }
table.tbl tr.ligne-retenue td { font-weight: 700; }

/* Definitions cle / valeur */
table.def { width: 100%; border-collapse: collapse; font-size: 13px; }
table.def th {
    text-align: left;
    font-weight: 400;
    color: var(--texte-doux);
    padding: 5px 10px 5px 0;
    width: 42%;
    white-space: nowrap;
}
table.def td { padding: 5px 0; text-align: right; font-variant-numeric: tabular-nums; }
table.def tr + tr th, table.def tr + tr td { border-top: 1px solid var(--gris-bord); }
table.def td.fort { font-weight: 700; }

/* --- Prix mis en avant --------------------------------------------- */

.prix-vedette {
    padding: 14px;
    border-radius: var(--rayon);
    background: var(--vert-clair);
    border: 1px solid var(--vert);
    margin-bottom: 14px;
}
.prix-vedette .etiquette {
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--vert-fonce);
}
.prix-vedette .valeur {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--vert-fonce);
    font-variant-numeric: tabular-nums;
}
.prix-vedette .detail { font-size: 12px; color: var(--texte-doux); }
.prix-vedette.est-alerte { background: var(--orange-clair); border-color: var(--orange); }
.prix-vedette.est-alerte .etiquette, .prix-vedette.est-alerte .valeur { color: var(--orange-fonce); }
.prix-vedette.est-bloque { background: var(--rouge-clair); border-color: var(--rouge); }
.prix-vedette.est-bloque .etiquette, .prix-vedette.est-bloque .valeur { color: var(--rouge); }
.prix-vedette.est-inconnu { background: var(--gris-fond); border-color: var(--gris-bord); }
.prix-vedette.est-inconnu .etiquette, .prix-vedette.est-inconnu .valeur { color: var(--texte-doux); }

/* --- Pastilles de statut ------------------------------------------- */

.pastille {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}
.pastille-ok       { background: var(--vert);      color: #FFFFFF; }
.pastille-alerte   { background: var(--orange);    color: #FFFFFF; }
.pastille-bloque   { background: var(--rouge);     color: #FFFFFF; }
.pastille-inconnu  { background: #8D9BA3;          color: #FFFFFF; }
.pastille-neutre   { background: var(--gris-fond); color: var(--texte-doux); border: 1px solid var(--gris-bord); }
.pastille-mode     { background: var(--petrole);   color: #FFFFFF; }

/* --- Messages ------------------------------------------------------ */

.message {
    padding: 10px 14px;
    border-radius: var(--rayon);
    border-left: 4px solid var(--bleu-clair);
    background: #FFFFFF;
    border-top: 1px solid var(--gris-bord);
    border-right: 1px solid var(--gris-bord);
    border-bottom: 1px solid var(--gris-bord);
    margin-bottom: 14px;
    font-size: 13px;
}
.message-erreur  { border-left-color: var(--rouge);  background: var(--rouge-clair); }
.message-alerte  { border-left-color: var(--orange); background: var(--orange-clair); }
.message-ok      { border-left-color: var(--vert);   background: var(--vert-clair); }
.message strong { text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; }

/* --- Pile des listes de remises ------------------------------------ */
/* Reprend la lecture de l'écran Mercator : le haut prime sur le bas.   */

.pile { display: flex; flex-direction: column; gap: 2px; }

.pile-element {
    display: flex;
    gap: 9px;
    align-items: baseline;
    padding: 7px 9px;
    border-radius: var(--rayon);
    border-left: 3px solid transparent;
    color: var(--texte);
    text-decoration: none;
}
.pile-element:hover { background: var(--gris-ligne); text-decoration: none; color: var(--texte); }
.pile-element.actif {
    background: var(--vert-clair);
    border-left-color: var(--vert);
}
.pile-element.eteint .pile-titre,
.pile-element.eteint .pile-detail { color: var(--texte-doux); font-weight: 400; }

.pile-rang {
    flex: 0 0 auto;
    min-width: 20px;
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    color: var(--texte-doux);
    font-variant-numeric: tabular-nums;
}
.pile-corps { flex: 1 1 auto; min-width: 0; }
.pile-titre {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--texte);
    text-decoration: none;
}
.pile-titre:hover { color: var(--petrole); text-decoration: underline; }
.pile-element .actions { margin-top: 5px; }
.pile-detail {
    display: block;
    font-size: 10.5px;
    color: var(--texte-doux);
}

/* --- Signaux dans le tableau des lignes ---------------------------- */

table.tbl tr.ligne-danger { background: var(--rouge-clair) !important; }
table.tbl tr.ligne-danger td { border-bottom-color: #F0C9C2; }

.compteur {
    display: inline-block;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}
.compteur-bloque { color: var(--rouge); }
.compteur-alerte { color: var(--orange-fonce); }

.pagination {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gris-bord);
}
.pagination-nav { display: flex; align-items: center; gap: 12px; }
.pagination-info { font-size: 11.5px; color: var(--texte-doux); }

/* --- Bandeau d'en-tête d'une liste --------------------------------- */

.entete-liste {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.entete-bloc { display: flex; flex-direction: column; gap: 2px; }
.entete-etiquette {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texte-doux);
}
.entete-valeur { font-size: 14px; font-weight: 700; color: var(--texte); }
.entete-sur { font-weight: 400; color: var(--texte-doux); font-size: 12px; }
.entete-actions { margin-left: auto; display: flex; gap: 8px; }

/* --- Saisie directe dans la grille --------------------------------- */

.carte-corps.sans-marge { padding: 0; }
.carte-corps.sans-marge .pagination,
.carte-corps.sans-marge > .aide { margin: 0; padding: 12px 14px; border-top: 1px solid var(--gris-bord); }

table.tbl-saisie td { vertical-align: middle; }
table.tbl-saisie th.c-groupe {
    text-align: center;
    background: var(--petrole-fonce);
    border-left: 1px solid rgba(255, 255, 255, .22);
    border-right: 1px solid rgba(255, 255, 255, .22);
}
table.tbl-saisie th.c-calcule { background: var(--petrole-fonce); }
table.tbl-saisie td.c-calcule { background: rgba(30, 122, 158, .045); }
table.tbl-saisie tr:hover td.c-calcule { background: rgba(82, 166, 110, .10); }

table.tbl-saisie .c-rang   { width: 30px; }
table.tbl-saisie .c-cible  { min-width: 96px; }
table.tbl-saisie .c-article { min-width: 172px; }
table.tbl-saisie .c-portee { min-width: 104px; }
table.tbl-saisie .c-mode   { min-width: 118px; }
table.tbl-saisie .c-prix   { min-width: 86px; white-space: nowrap; }
/* Une carte qui se lit d'abord et ne se saisit que sur demande : les deux
   états cohabitent dans le HTML, seul l'un des deux s'affiche. */
.carte .bloc-edition            { display: none; }
.carte.en-edition .bloc-lecture { display: none; }
.carte.en-edition span.bloc-edition { display: inline; }
.carte.en-edition p.bloc-edition    { display: block; }

/* Aperçu d'import : ce qui remplace quoi, champ par champ. L'ancienne
   valeur s'efface, la nouvelle s'affirme. */
table.tbl-diff td.c-champ { font-size: 12px; color: var(--texte-doux); white-space: nowrap; }
table.tbl-diff td.avant   { color: var(--texte-doux); text-decoration: line-through; }
table.tbl-diff td.apres   { font-weight: 700; color: var(--vert-fonce); }
table.tbl-diff tr.debut-article td { border-top: 2px solid var(--gris-bord); }

/* Grille des fournisseurs d'un article : dense, et saisissable en place. */
.saisie-fou {
    width: 100%;
    min-width: 54px;
    padding: 4px 6px;
    font-size: 13px;
    border: 1px solid var(--gris-bord);
    border-radius: 3px;
}
.saisie-fou.num, .saisie-fou.saisie-pct { text-align: right; }
.saisie-pct { min-width: 44px; }
table.tbl-saisie .c-princ { width: 46px; text-align: center; }

/* Fiche article : forme du tarif fournisseur, et prix net calculé sous
   les yeux pendant la saisie. */
.choix-tarif { margin: 0; line-height: 1.9; font-size: 14px; }
.choix-tarif input { margin-right: 6px; }
.calcul-net {
    margin: 0;
    padding: 10px 12px;
    background: var(--vert-clair);
    border-left: 3px solid var(--vert);
    border-radius: var(--rayon);
    font-size: 14px;
}

/* Une valeur qu'on montre sans pouvoir la changer : elle doit se lire
   comme une donnée, pas comme un champ désactivé. */
.valeur-figee {
    margin: 0;
    padding: 7px 10px;
    background: var(--gris-fond);
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon);
    font-size: 15px;
}

/* Catalogue articles : neuf colonnes étroites qui doivent tenir ensemble. */
table.tbl-saisie .c-code        { min-width: 78px; white-space: nowrap; }
table.tbl-saisie .c-ref         { min-width: 92px; }
table.tbl-saisie .c-designation { min-width: 150px; }
table.tbl-saisie .c-classe      { min-width: 84px; font-size: 12px; }
table.tbl-saisie td.c-classe    { color: var(--texte-doux); }
table.tbl-saisie .c-ref .sous-libelle { max-width: 130px; }

/* Seuils de marge réglables dans le tableau de l'accueil. */
.saisie-seuil {
    width: 58px;
    padding: 3px 6px;
    text-align: right;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid var(--gris-bord);
    border-radius: 3px;
}
.saisie-seuil:focus { outline: 2px solid var(--vert); outline-offset: 0; }

/* La ligne entière ouvre la modification : le curseur doit le dire. */
table.tbl-saisie tr[data-modif] { cursor: pointer; }
table.tbl-saisie tr[data-modif] .poignee { cursor: grab; }
/* La mention sous le prix se replie, le prix lui-même jamais. */
table.tbl-saisie td.c-prix .sous-libelle { max-width: 118px; margin-left: auto; white-space: normal; }
table.tbl-saisie th, table.tbl-saisie td { padding-left: 6px; padding-right: 6px; }

table.tbl-saisie select,
table.tbl-saisie input[type=text] {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 7px;
    font-family: inherit;
    font-size: 12px;
    color: var(--texte);
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon);
    background: #FFFFFF;
}
table.tbl-saisie select:focus,
table.tbl-saisie input[type=text]:focus {
    outline: none;
    border-color: var(--bleu-clair);
    box-shadow: 0 0 0 2px var(--anneau);
}
table.tbl-saisie select + input[type=text] { margin-top: 4px; }
table.tbl-saisie input.etroit { text-align: right; }
table.tbl-saisie input:disabled,
table.tbl-saisie select:disabled {
    background: var(--gris-fond);
    border-style: dashed;
    color: var(--texte-doux);
}
table.tbl-saisie input::placeholder { color: #A9B6BD; }

tr.ligne-saisie    { background: var(--orange-clair) !important; }
tr.ligne-saisie td { border-bottom: 2px solid var(--orange); padding-top: 9px; padding-bottom: 9px; }
tr.ligne-saisie td.c-calcule { background: rgba(240, 138, 36, .10); }
tr.ligne-edition    { background: var(--vert-clair) !important; }
tr.ligne-edition td { border-bottom: 2px solid var(--vert); padding-top: 9px; padding-bottom: 9px; }
tr.ligne-edition td.c-calcule { background: rgba(82, 166, 110, .12); }

.bouton-mini { padding: 6px 14px; font-size: 11px; letter-spacing: .04em; }

.forcer { font-size: 11px; white-space: nowrap; color: var(--rouge); font-weight: 700; }

.fige { font-size: 11.5px; font-style: italic; color: var(--texte-doux); }

.mono { font-family: Consolas, "Courier New", monospace; font-weight: 700; }

/* Désignation de l'article sous son code : informative, jamais modifiable. */
.sous-libelle {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--texte-doux);
    max-width: 168px;
}
.sous-libelle.manquant { font-style: italic; color: #A9B6BD; }
/* Un maxi au-dessus de la place du rayon : la fiche se contredit, et elle
   le dit là où on la corrige. */
.sous-libelle.manque-place { color: var(--rouge); font-weight: 600; }

/* Un article qu'on ne réapprovisionne plus : la carte le dit avant qu'on
   lise les cases. */
.carte.carte-etat-arrete { border-color: var(--orange); }
.carte.carte-etat-arrete > .carte-titre { background: var(--orange); }

.etiquette-type {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texte-doux);
    background: var(--gris-fond);
    border: 1px solid var(--gris-bord);
    border-radius: 3px;
    padding: 0 4px;
    vertical-align: middle;
}

/* --- Actions dans les tableaux et la pile -------------------------- */

.ligne-action { display: inline; margin: 0; }

.lien-bouton {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 11.5px;
    color: var(--bleu-clair);
    cursor: pointer;
    text-decoration: none;
}
.lien-bouton:hover { color: var(--petrole); text-decoration: underline; }

.actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.actions a, .actions .lien-bouton { font-size: 11.5px; }

/* --- Glisser-déposer ----------------------------------------------- */

.poignee {
    display: inline-block;
    padding: 0 4px;
    color: var(--texte-doux);
    font-size: 13px;
    line-height: 1;
    letter-spacing: -2px;
    cursor: grab;
    user-select: none;
}
.poignee:active { cursor: grabbing; }
.pile-element .poignee { align-self: center; }

tr.ligne-triable, .pile-triable { cursor: default; }
.en-deplacement { opacity: .45; }
tr.cible-depot td { box-shadow: inset 0 -3px 0 var(--vert); }
.pile-triable.cible-depot { box-shadow: inset 0 -3px 0 var(--vert); }

/* --- Palier de quantité mal placé ---------------------------------- */

.alerte-palier {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--orange);
    color: #FFFFFF;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
tr.ligne-masquee td { background: rgba(240, 138, 36, .07); }

.alerte-doublon {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 9px;
    background: #8D9BA3;
    color: #FFFFFF;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
tr.ligne-doublon td { color: var(--texte-doux); background: var(--gris-ligne); }
tr.ligne-doublon td.c-cible { text-decoration: line-through; }

.fleche {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon);
    background: #FFFFFF;
    color: var(--petrole);
    font-size: 11px;
    text-decoration: none;
}
.fleche:hover { background: var(--vert-clair); border-color: var(--vert); text-decoration: none; }
.fleche.inerte { color: var(--gris-bord); background: var(--gris-ligne); cursor: default; }

.barre-outils {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
}

.lien-discret { font-size: 11px; color: var(--texte-doux); }
.lien-discret:hover { color: var(--petrole); }

/* --- Bloc technique (réponse API) ---------------------------------- */

pre {
    margin: 0;
    padding: 10px 12px;
    background: #F4F6F7;
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon);
    font-family: Consolas, "Courier New", monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--texte);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* --- Pied ---------------------------------------------------------- */

.pied {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 14px 20px 30px 20px;
    font-size: 11px;
    color: var(--texte-doux);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* --- Accueil ------------------------------------------------------- */

/* Même règle que pour les tuiles de santé, et pour la même raison : des
   cartes côte à côte de tailles différentes se lisent mal. Voir le
   commentaire complet sur `.tuiles-sante`. */
.tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.tuile {
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid var(--gris-bord);
    border-top: 3px solid var(--orange);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 16px;
}
.tuile.dispo { border-top-color: var(--vert); }
.tuile h2 { margin-bottom: 6px; }
.tuile p { margin: 0 0 12px 0; color: var(--texte-doux); font-size: 12.5px; }
.tuile .etat {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texte-doux);
}

/* Les écrans d'un groupe, listés dans sa tuile. Des liens empilés plutôt
   qu'un bouton unique : on voit ce qu'il y a dans la famille avant d'y
   entrer, et on va droit à l'écran voulu sans passer par un intermédiaire. */
.tuile-liens { margin: 0 !important; display: flex; flex-direction: column; gap: 1px; }
.tuile-liens a {
    display: block;
    padding: 6px 9px;
    border-radius: var(--rayon);
    font-size: 13px;
    font-weight: 600;
    color: var(--texte);
}
.tuile-liens a:hover {
    background: var(--vert-clair);
    color: var(--vert-fonce);
    text-decoration: none;
}
/* La tuile entière réagit au survol : elle se comporte comme un bloc
   cliquable, ce que sa forme promet. */
.tuile { transition: box-shadow .12s ease, border-color .12s ease; }
.tuile:hover { box-shadow: 0 3px 10px rgba(21, 160, 120, .14); }

/* --- La santé du stock, en haut de l'écran Articles -----------------
   Cinq chiffres cliquables. Le chiffre est gros parce que c'est lui qu'on
   vient chercher ; le reste l'explique. Aucune couleur nouvelle : le vert
   de la charte pour ce qui va, l'orange pour ce qui attend, le rouge pour
   ce qui coûte. */
/* TOUTES LES TUILES D'UNE RANGÉE ONT LA MÊME TAILLE. RÈGLE ABSOLUE.

   Mirko, le 23/09/2026 : « tous les tableaux, j'aime qu'ils fassent la même
   taille, ça me dérange — exemple ici : "à commencer", "en préparation",
   "prêts à partir" doivent avoir la même taille. ULTRA IMPORTANT. »

   POURQUOI ELLES NE L'ÉTAIENT PAS. En `flex: 1 1 178px`, un élément flexible
   garde `min-width: auto` : il ne peut pas devenir plus étroit que son propre
   texte. La tuile « prêts à partir / ils n'ont pas bougé d'ici » réclamait
   donc plus de place que « en préparation », et la rangée partait de travers.
   Un `flex-basis` identique n'y change rien — c'est le contenu qui décide.

   POURQUOI UNE GRILLE ET NON UN FLEX CORRIGÉ. On pourrait écrire
   `flex: 1 1 0; min-width: 0` : les tuiles seraient égales, tant qu'elles
   tiennent sur une ligne. Dès que la rangée passe à la ligne, les dernières
   s'étirent pour combler le vide et redeviennent plus grandes que les
   autres. `repeat(auto-fit, minmax(…, 1fr))` donne des colonnes égales sur
   TOUTES les lignes, y compris la dernière.

   Et `align-items: stretch`, qui est le défaut d'une grille, leur donne la
   même HAUTEUR : une tuile qui porte un sous-libellé ne dépasse plus ses
   voisines. */
.tuiles-sante {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.tuile-sante {
    min-width: 0;          /* sans ça, un long libellé élargit sa colonne */
    display: block;
    padding: 13px 15px;
    background: #FFFFFF;
    border: 1px solid var(--gris-bord);
    border-left: 4px solid var(--vert);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    color: var(--texte);
    text-decoration: none;
    transition: box-shadow .12s ease;
}
.tuile-sante:hover { text-decoration: none; box-shadow: 0 3px 10px rgba(21, 160, 120, .16); }
.tuile-sante.actif { background: var(--vert-clair); }
.tuile-sante.alerte { border-left-color: var(--orange); }
.tuile-sante.alerte.actif { background: var(--orange-clair); }
.tuile-sante.danger { border-left-color: var(--rouge); }
.tuile-sante.danger.actif { background: var(--rouge-clair); }
.tuile-sante .chiffre {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--petrole);
}
.tuile-sante.danger .chiffre { color: var(--rouge); }
.tuile-sante.alerte .chiffre { color: var(--orange-fonce); }
.tuile-sante .quoi {
    display: block;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--texte);
}
.tuile-sante .euros {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--texte-doux);
}
.tuile-sante .sous-libelle { max-width: none; }

kbd {
    display: inline-block;
    padding: 1px 6px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--texte);
    background: var(--gris-fond);
    border: 1px solid var(--gris-bord);
    border-bottom-width: 2px;
    border-radius: 3px;
}

@media (max-width: 720px) {
    .bandeau-titre { border-left: none; padding-left: 0; }
    .page { padding: 14px; }
}

/* --- Base de donnees injoignable ------------------------------------ */
/* Le module lit ses donnees commerciales dans SQL Anywhere. Quand le
   moteur est arrete, l'ecran doit le dire fort : sans ce bandeau, une
   liste vide se lirait comme « il n'y a rien », et non « je ne sais
   pas ». */
.bandeau-base {
    background: var(--rouge);
    color: #FFFFFF;
    padding: 9px 18px;
    font-size: 13px;
}
.bandeau-base strong { letter-spacing: .02em; }
.bandeau-base-detail {
    display: block;
    font-size: 11px;
    opacity: .85;
    margin-top: 2px;
}

/* --- Mode d'emploi des API (api-doc.asp) --------------------------- */
/* Une page qu'on lit longtemps : le texte respire, le code se detache. */

.api-section {
    margin: 32px 0 4px;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--vert);
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: .04em;
}
.api-section-intro { margin: 0 0 14px; color: #555; }

.carte-action { margin-bottom: 14px; }

/* Le nom de l'action, en tete de carte : c'est ce qu'on cherche des yeux. */
.api-action {
    display: inline-block;
    background: var(--bleu-clair);
    color: #fff;
    padding: 2px 9px;
    border-radius: 3px;
    margin-right: 9px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.api-url {
    background: #f2f5f3;
    border-left: 4px solid var(--bleu-clair);
    padding: 9px 12px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    word-break: break-all;
}

/* La clef se lit pour etre recopiee : grande, isolee, selectionnable. */
.api-cle {
    background: #fff8ec;
    border: 1px dashed var(--orange);
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 700;
    user-select: all;
    word-break: break-all;
}

.api-essai {
    width: 100%;
    box-sizing: border-box;
    padding: 3px 6px;
    border: 1px solid #c8d0cb;
    border-radius: 3px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}
.api-essai:focus { border-color: var(--bleu-clair); outline: none; }

.api-apercu {
    margin-left: 10px;
    color: #777;
    font-size: 12px;
    word-break: break-all;
}

.api-reponse {
    margin: 10px 0 0;
    max-height: 340px;
    overflow: auto;
    background: #1f2a24;
    color: #d7e6dc;
    padding: 12px 14px;
    border-radius: 4px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.api-reponse.en-erreur { background: #3a1f1f; color: #f3d6d6; }
/* --- Pour joindre un client ou un fournisseur ---------------------- */
/* Une fois la fiche creee et sa remise posee, ce qu'on cherche dans une
   liste c'est un numero ou une adresse e-mail. Ils doivent se voir, et
   se cliquer. Les conditions commerciales, elles, sont dans la fiche. */

.sous-libelle.joindre { color: var(--bleu-clair); font-weight: 600; }
.sous-libelle.joindre a { color: var(--bleu-clair); text-decoration: none; }
.sous-libelle.joindre a:hover { text-decoration: underline; }

.c-contact { width: 230px; font-size: 12px; line-height: 1.55; }
.c-contact a { color: var(--bleu-clair); text-decoration: none; }
.c-contact a:hover { text-decoration: underline; }
/* Le compte d'articles du referentiel : un chiffre qu'on peut ouvrir. */
.compte-cible {
    color: var(--bleu-clair);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dotted var(--bleu-clair);
}
.compte-cible:hover { color: var(--orange); border-bottom-color: var(--orange); }
/* Le memo du groupement : du texte brut, recu tel quel, qu'on lit. */
.memo-groupement {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #c8d0cb;
    border-radius: 3px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.6;
    resize: vertical;
}
.memo-groupement:focus { border-color: var(--bleu-clair); outline: none; }
/* Le devis colle : du texte brut, plusieurs lignes, en chasse fixe pour
   qu'un code mal recopie se voie. */
.saisie-devis {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #c8d0cb;
    border-radius: 3px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.7;
    resize: vertical;
}
.saisie-devis:focus { border-color: var(--bleu-clair); outline: none; }
/* La comparaison avec le devis du concurrent : vert quand on est moins
   cher, orange quand on ne l'est pas. Rouge reste reserve au statut
   BLOQUE, on ne le prend pas pour un ecart de prix. */
.ecart-favorable   { color: #2f7d4b; font-weight: 700; }
.ecart-defavorable { color: #C06A10; font-weight: 700; }
/* La photo du fabricant sur la fiche article.
   Bornee en hauteur : une image de 1500 px pousserait tout le reste de la
   fiche hors de l'ecran, alors qu'on veut la reconnaitre d'un coup d'oeil
   sans quitter les champs de saisie. Elle s'ouvre en grand au clic. */
/* LA PHOTO DE LA FICHE ARTICLE, DANS UNE BOITE DE TAILLE FIXE.
   Mirko, le 20/09/2026 : « que la taille photo reste la meme pour tous
   pour eviter d'avoir des photos geantes ». Les fabricants publient de
   tout - une vignette de 90 pixels a cote d'un cliche de 3000 - et avec
   un simple max-height la carte changeait de hauteur d'un article a
   l'autre. La boite est donc fixe et l'image s'y loge sans se deformer :
   `contain` la reduit jusqu'a tenir, sans jamais la rogner ni l'etirer.
   Une petite image n'est pas agrandie, elle reste centree. */
.photo-article {
    display: block;
    width: 220px;
    height: 220px;
    object-fit: contain;
    object-position: center;
    border: 1px solid var(--gris-bord);
    background: #FFFFFF;
    padding: 6px;
    box-sizing: border-box;
    max-width: 100%;
}
/* Le trait qui separe deux temps a l'interieur d'une meme carte : dans
   « Corriger le catalogue », ce qui se fait a la main en haut, ce qui se
   fait en masse en dessous. Discret a dessein - c'est une respiration,
   pas une frontiere ; deux cartes separees diraient ca. */
.separateur-bloc {
    border: 0;
    border-top: 1px solid var(--gris-bord);
    margin: 18px 0 16px 0;
}

/* LA VIGNETTE DANS UNE LISTE D'ARTICLES.

   Mirko, le 20/09/2026 : « les photos doivent etre de taille egale, des
   petites photos ; le tableau doit etre moins large ; genre j'aurais fait
   un carre, comme si c'etait 3 lignes de designation en hauteur ».

   D'ou trois choix.

   Puis, le meme jour, apres avoir vu le resultat : « les photos doivent
   etre toutes petites, un carre » et « je parle en taille, le tableau doit
   etre le plus fin possible ».

   CARRE FIXE DE 28 PIXELS, ET LE CHIFFRE COMPTE. Une ligne de ces tableaux
   mesure environ 44 pixels - une ligne de libelle, un sous-libelle, les
   marges. Tant que la vignette reste EN DESSOUS de cette hauteur, elle ne
   pousse rien : le tableau garde exactement la finesse qu'il avait avant.
   A 54 pixels, chaque ligne s'epaississait de dix pixels et la page
   entiere s'allongeait d'un quart - c'est ce que Mirko a vu.

   Elles font toutes la meme taille, et c'est l'autre moitie de sa demande.
   Avec de simples maximums, une photo large donnait 28x11 et une photo
   haute 11x28 : les lignes n'avaient plus la meme allure et la colonne
   partait en accordeon. Ici la boite est fixe et `contain` loge l'image
   dedans sans la deformer ni la rogner.

   ELLE FLOTTE DANS LA CELLULE DESIGNATION, elle n'a pas sa colonne. Une
   colonne de plus elargit le tableau - ce que Mirko ne veut pas - alors
   qu'un flottant se glisse dans une cellule qui occupe deja plusieurs
   lignes. Visuellement elle se trouve bien entre le code et le libelle,
   ce qu'il demandait, sans rien couter en largeur. */
.vignette-liste {
    float: left;
    width: 28px;
    height: 28px;
    object-fit: contain;
    object-position: center;
    margin: 0 7px 0 0;
    background: #FFFFFF;
    border: 1px solid var(--gris-bord);
    box-sizing: border-box;
}
/* Pas besoin d'un `overflow: hidden` pour contenir ce flottant : une
   cellule de tableau etablit deja son propre contexte de formatage, donc
   elle enveloppe ses flottants et la ligne prend la hauteur de la vignette.
   Le forcer risquerait au contraire de rogner une designation longue. */
/* L'apercu d'une piece jointe qui est une image, dans le tableau des
   pieces jointes de la fiche article. Petit a dessein : la ligne doit
   rester une ligne de tableau, pas devenir une galerie. */
.vignette-piece {
    max-width: 90px;
    max-height: 70px;
    margin-top: 4px;
    border: 1px solid var(--gris-bord);
    background: #FFFFFF;
    padding: 3px;
}
/* La ligne du chapitre ou l'on se trouve, dans la liste de gauche. */
tr.ligne-active > td {
    background: var(--vert-clair);
    border-left: 3px solid var(--vert);
    font-weight: 600;
}
/* --- Le hit-parade ---------------------------------------------------
   Les barres sont du SVG EN LIGNE, sans aucune bibliotheque : le module
   n'a pas de dependance externe et n'en aura pas. Un graphique qui exige
   un CDN ne s'affiche plus le jour ou le poste n'a pas Internet. */
.barre {
    vertical-align: middle;
    margin-right: 4px;
}
/* Un bouton de reglage fin, pour les selecteurs de profondeur : il ne doit
   pas peser autant qu'un bouton d'action. */
.bouton-petit {
    padding: 2px 8px;
    font-size: 0.85em;
}
/* Le rouge est RESERVE a la perte, dans tout le module : le voir signifie
   toujours qu'on vend sous le prix de revient. */
.perte { color: var(--rouge); }

/* --- L'assistant -----------------------------------------------------
   La reponse et le contexte s'affichent en <pre> : le modele rend du texte
   avec des retours a la ligne et des listes, et les ecraser en paragraphe
   rendrait une bouillie. On garde donc sa mise en forme, mais on autorise
   le retour a la ligne pour ne pas imposer de defilement horizontal -
   regle du projet. */
.reponse-ia, .contexte-ia {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.88em;
    line-height: 1.45;
    background: var(--gris-fond);
    border: 1px solid var(--gris-bord);
    border-radius: 3px;
    padding: 10px 12px;
    margin: 0 0 10px 0;
}
/* La reponse se lit, le contexte se verifie : celui-ci est plus discret et
   borne en hauteur, pour ne pas noyer la page. */
.reponse-ia { background: #FFFFFF; font-size: 0.95em; }
.contexte-ia { max-height: 420px; overflow-y: auto; color: var(--texte-doux); }
.champ-large { width: 100%; box-sizing: border-box; }

/* La ligne des paliers de quantite, sous une ligne de fournisseur de la
   fiche article. Elle n'est pas une ligne de saisie : fond neutre, pas
   de bordure du haut, pour qu'elle se lise comme un prolongement de la
   ligne au-dessus et non comme un second fournisseur. */
.tbl-saisie tr.ligne-paliers > td { border-top: 0; padding-top: 0; background: var(--gris-fond); }
.tbl-saisie tr.ligne-paliers .sous-libelle { display: block; margin-top: 4px; }

/* =====================================================================
   LA NAVIGATION GROUPÉE — phase 2, 23/09/2026
   =====================================================================

   Spécification : docs/MP-GESTION-navigation-groupee-SPEC.md, validée par
   Mirko le 23/09/2026. Valeurs reprises de la maquette validée.

   TOUTES LES CLASSES SONT PRÉFIXÉES `.nav-groupee-*`, `.bandeau-*` ou
   `.barre-*` : aucune ne peut toucher un écran existant. La barre
   classique garde ses classes `.menu a`, inchangées.

   CHARTE ÉCRAN UNIQUEMENT : Roboto Condensed, palette écran, ombre
   teintée encre. Jamais Montserrat ni les couleurs du catalogue papier.
   ===================================================================== */

/* --- Le bandeau : les blocs ajoutés ---------------------------------- */

.bandeau-magasin {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon);
}
.bandeau-magasin span { display: flex; flex-direction: column; line-height: 1.2; }
.bandeau-magasin-titre { font-size: 11px; color: var(--texte-doux); }
.bandeau-magasin-nom   { font-size: 13px; font-weight: 600; color: var(--texte); }

.bandeau-mode { display: flex; align-items: center; gap: 8px; }
.bandeau-mode-titre { font-size: 12px; color: var(--texte-doux); }

/* Le contrôle segmenté. Deux VRAIS LIENS et non deux boutons : ils
   fonctionnent sans JavaScript, ce qui rend le retour à la barre
   classique possible même si le script de la page ne s'exécute pas. */
.segment {
    display: flex;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon);
    background: var(--gris-ligne);
}
.segment-choix {
    display: block;
    height: 32px;
    line-height: 32px;
    padding: 0 14px;
    border-radius: var(--rayon-petit);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--texte-corps);
    text-decoration: none;
    white-space: nowrap;
}
.segment-choix:hover { color: var(--petrole); }
.segment-choix.actif { background: var(--petrole); color: #FFFFFF; }
.segment-choix.actif:hover { color: #FFFFFF; }

/* --- La rangée sous le bandeau, commune aux deux modes --------------- */

.barre-interieur {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 0 20px;
}
.barre-classique {
    background: #FFFFFF;
    border-bottom: 1px solid var(--gris-bord);
}
/* La barre classique garde EXACTEMENT son style : `.menu a` n'est pas
   touché. On ne lui ajoute qu'un peu d'air vertical, comme la maquette. */
.barre-classique .menu { padding: 9px 0; }

/* --- La barre groupée ------------------------------------------------ */

.nav-groupee {
    position: relative;
    background: #FFFFFF;
    border-bottom: 1px solid var(--gris-bord);
}
.nav-groupee-barre {
    display: flex;
    align-items: stretch;
    gap: 4px;
    /* ELLE DOIT TENIR SUR UNE LIGNE À 1366 px — § 4.2. D'où
       `white-space: nowrap` sur chaque entrée et un padding serré : la
       consigne est de réduire le padding AVANT de toucher aux libellés. */
    flex-wrap: nowrap;
    overflow: visible;
}
.nav-groupee-entree {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 52px;
    padding: 0 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--texte-corps);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.nav-groupee-entree:hover { background: var(--gris-ligne); color: var(--texte); }
/* Le groupe qui contient l'écran courant : souligné de 3 px, en pétrole. */
.nav-groupee-entree.actif {
    border-bottom-color: var(--petrole);
    color: var(--petrole);
}
/* Un groupe OUVERT prend le fond gris et le soulignement de SA couleur —
   `--accent`, posé en ligne parce qu'il suit le groupe et non la classe. */
.nav-groupee-entree.ouvert {
    background: var(--gris-ligne);
    border-bottom-color: var(--accent);
    color: var(--texte);
}
.nav-groupee-chevron { transition: transform .12s ease; }
.nav-groupee-entree.ouvert .nav-groupee-chevron { transform: rotate(180deg); }

/* --- Le panneau d'un groupe ------------------------------------------ */

.nav-groupee-panneau {
    position: absolute;
    top: 100%;
    /* ALIGNÉ SUR LA MARGE DE LA PAGE — § 4.3. C'est ce calcul qui exigeait
       que le bandeau, la barre et la page partagent `--largeur` : sans
       cela, le panneau flottait à côté du contenu. */
    left: max(20px, calc((100vw - var(--largeur)) / 2 + 20px));
    width: min(1040px, calc(100vw - 40px));
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid var(--gris-bord);
    border-top: 0;
    border-radius: 0 0 var(--rayon-large) var(--rayon-large);
    box-shadow: var(--ombre-haute);
    padding: 14px 16px 16px;
    z-index: 40;
}
.nav-groupee-panneau-tete {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 12px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--gris-eteint);
}
.nav-groupee-panneau-nom {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--petrole);
}
.nav-groupee-panneau-sous { font-size: 12.5px; color: var(--texte-doux); }

/* Trois colonnes, et elles se resserrent avant de déborder. AUCUN
   DÉFILEMENT HORIZONTAL, nulle part. */
.nav-groupee-grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px 8px;
}
@media (max-width: 1100px) { .nav-groupee-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .nav-groupee-grille { grid-template-columns: minmax(0, 1fr); } }

/* --- Une ligne d'écran dans un panneau ------------------------------- */

.nav-groupee-ecran {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--rayon);
    color: var(--texte);
    text-decoration: none;
    min-width: 0;
}
a.nav-groupee-ecran:hover { background: var(--gris-ligne); }
/* UN ÉCRAN À VENIR N'EST PAS UN LIEN MORT : c'est un `<span>` qui ne
   réagit pas. Un lien qui ne mène nulle part se clique quand même, et on
   croit à une panne. */
.nav-groupee-ecran.a-venir { cursor: default; }
.nav-groupee-ecran.a-venir .nav-groupee-nom { color: var(--texte-doux); }
.nav-groupee-ecran.a-venir .nav-groupee-pastille svg { color: var(--icone-eteinte); }

.nav-groupee-pastille {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--rayon);
    flex-shrink: 0;
}
.nav-groupee-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-groupee-nom {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--texte);
}
.nav-groupee-aide { font-size: 12.5px; line-height: 1.35; color: var(--texte-doux); }

.pastille-a-venir {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--gris-eteint);
    color: var(--texte-corps);
    white-space: nowrap;
}

/* --- LE CONTOUR DE MISE AU POINT AU CLAVIER --------------------------
   Il vient de la maquette, et le module ne l'avait pas. Quelqu'un qui
   parcourt la barre à la touche de tabulation doit voir où il est. */
.nav-groupee-entree:focus-visible,
.nav-groupee-ecran:focus-visible,
.segment-choix:focus-visible {
    outline: 2px solid var(--petrole);
    outline-offset: 2px;
}

/* =====================================================================
   LA RECHERCHE « QUE VOULEZ-VOUS FAIRE ? » — phase 3, 23/09/2026
   =====================================================================

   Spécification § 4.1 et § 7. Elle prend toute la place restante du
   bandeau, entre le bloc titre et le sélecteur de mode.

   Classes préfixées `.nav-recherche-*` : aucune ne peut toucher un écran
   existant. La pastille d'icône réutilise `.nav-groupee-pastille`, pour
   que les résultats et les panneaux ne puissent pas se mettre à diverger.
   ===================================================================== */

.nav-recherche {
    position: relative;
    /* `flex: 1` prend la place restante ; `min-width: 0` l'autorise à
       rétrécir au lieu de pousser les blocs de droite hors du bandeau. */
    flex: 1;
    min-width: 0;
    max-width: 460px;
    margin: 0 8px;
}

.nav-recherche-boite {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon);
    background: #FFFFFF;
    cursor: text;
}
.nav-recherche-boite:focus-within {
    border-color: var(--petrole);
    box-shadow: 0 0 0 3px var(--teinte-petrole);
}
.nav-recherche-boite svg { flex-shrink: 0; }

.nav-recherche-champ {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--texte);
}
.nav-recherche-champ::placeholder { color: var(--texte-doux); }

/* LE RACCOURCI EST ÉCRIT SUR LE CHAMP, et ce n'est pas décoratif : un
   raccourci que personne ne connaît n'existe pas. Il disparaît sur écran
   étroit, où il n'y a pas de clavier. */
.nav-recherche-raccourci {
    flex-shrink: 0;
    padding: 2px 6px;
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon-petit);
    background: var(--gris-ligne);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--texte-doux);
    white-space: nowrap;
}

/* --- Le panneau des résultats --------------------------------------- */

.nav-recherche-panneau {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    /* Il peut être plus large que le champ : six lignes avec leur phrase
       d'aide ne tiennent pas dans 460 px sans se replier trois fois. */
    min-width: 420px;
    box-sizing: border-box;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    background: #FFFFFF;
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon-large);
    box-shadow: var(--ombre-haute);
    z-index: 60;
}

.nav-recherche-ligne {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 10px;
    border-radius: var(--rayon);
    color: var(--texte);
    text-decoration: none;
}
a.nav-recherche-ligne:hover,
.nav-recherche-ligne.survol { background: var(--gris-ligne); }
.nav-recherche-ligne.a-venir { cursor: default; }
.nav-recherche-ligne.a-venir .nav-recherche-nom { color: var(--texte-doux); }
.nav-recherche-ligne.a-venir .nav-groupee-pastille svg { color: var(--icone-eteinte); }

.nav-recherche-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-recherche-nom {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--texte);
}
/* Le groupe, à côté du nom : il dit OÙ l'on va atterrir, ce qui évite
   d'ouvrir un écran pour comprendre qu'on s'est trompé de famille. */
.nav-recherche-groupe {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--texte-doux);
}
.nav-recherche-aide {
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--texte-doux);
}
.nav-recherche-vide {
    padding: 14px 12px;
    font-size: 13px;
    color: var(--texte-doux);
}

.nav-recherche-champ:focus-visible { outline: none; }
.nav-recherche-ligne:focus-visible {
    outline: 2px solid var(--petrole);
    outline-offset: 2px;
}

/* Sur écran étroit, le champ garde la priorité mais rend le raccourci. */
@media (max-width: 1200px) {
    .nav-recherche-raccourci { display: none; }
    .nav-recherche { max-width: 320px; }
}
@media (max-width: 860px) {
    .nav-recherche { max-width: none; }
    .nav-recherche-panneau { min-width: 0; }
}

/* =====================================================================
   LE NOUVEL ACCUEIL — phase 4, 23/09/2026
   =====================================================================

   Spécification § 4.5, § 10 et § 11.

   LA RÈGLE QUI COMMANDE TOUT CE BLOC : des cartes posées côte à côte ont
   TOUTES la même taille. Mirko l'a qualifiée d'ultra importante, et c'est
   pour elle qu'on emploie CSS Grid partout ici et JAMAIS Flexbox pour les
   rangées de cartes. En flex, une carte qui contient six écrans étire sa
   voisine qui en contient trois — ou ne l'étire pas, selon le navigateur.
   `repeat(N, minmax(0, 1fr))` donne la même largeur, et `stretch` par
   défaut sur la grille donne la même hauteur.

   Classes préfixées `.accueil-*` : aucune ne peut toucher un autre écran.
   ===================================================================== */

.accueil-tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.accueil-titre {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--petrole);
}
.accueil-legende {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--texte-doux);
}

/* --- La rangée de deux cartes égales -------------------------------- */

.accueil-rangee {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.accueil-carte,
.accueil-groupe {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon-large);
    box-shadow: var(--ombre);
    overflow: hidden;
}

/* LE FILET SUPÉRIEUR DE 4 PX À LA COULEUR DU GROUPE — § 4.5. Il est posé
   en `border-top` et non en pseudo-élément : un bord fait partie de la
   boîte, donc il ne peut pas se désaligner du coin arrondi. */
.accueil-groupe { border-top: 4px solid var(--accent); }
.accueil-carte-rapides { border-top: 4px solid var(--orange); }
.accueil-carte-recents { border-top: 4px solid var(--bleu-clair); }

.accueil-carte-tete,
.accueil-groupe-tete {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--gris-eteint);
}
.accueil-pastille-titre {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--rayon);
    flex-shrink: 0;
}
.accueil-carte-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.accueil-carte-titre,
.accueil-groupe-titre {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--texte);
}
.accueil-carte-sous {
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--texte-doux);
}

/* `flex: 1` sur le corps : c'est lui qui absorbe la différence de hauteur
   entre deux cartes voisines, pour que le filet du haut et le bord du bas
   restent alignés d'une carte à l'autre. */
.accueil-carte-corps,
.accueil-groupe-corps {
    flex: 1;
    padding: 7px;
}

.accueil-vide {
    margin: 0;
    padding: 12px 8px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--texte-doux);
}

/* --- Une ligne d'accès rapide ou d'accès récent --------------------- */

.accueil-rapide {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border-radius: var(--rayon);
    color: var(--texte);
    text-decoration: none;
    min-width: 0;
}
.accueil-rapide:hover { background: var(--orange-clair); }
.accueil-carte-recents .accueil-rapide:hover { background: var(--gris-ligne); }

.accueil-ligne-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.accueil-ligne-nom {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--texte);
}
.accueil-ligne-groupe {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--texte-doux);
}
.accueil-ligne-aide {
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--texte-doux);
}
/* Le chevron reste discret et ne bouge pas au survol : une flèche qui
   glisse attire l'œil sur elle au lieu du nom qu'on vient lire. */
.accueil-chevron { flex-shrink: 0; color: var(--gris-bord); }
.accueil-rapide:hover .accueil-chevron,
.accueil-ecran:hover .accueil-chevron { color: var(--texte-doux); }

/* --- La grille des huit cartes de groupe ---------------------------- */

.accueil-grille {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.accueil-ecran {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 9px;
    border-radius: var(--rayon);
    color: var(--texte);
    text-decoration: none;
    min-width: 0;
}
a.accueil-ecran:hover { background: var(--gris-ligne); }
/* UN ÉCRAN À VENIR N'EST PAS UN LIEN — § 6. C'est un `<span>` qui ne
   réagit pas, et sans chevron : le chevron promet qu'il se passe quelque
   chose au clic. */
.accueil-ecran.a-venir { cursor: default; }
.accueil-ecran.a-venir .accueil-ligne-nom { color: var(--texte-doux); }
.accueil-ecran.a-venir .accueil-ecran-pastille svg { color: var(--icone-eteinte); }

.accueil-ecran-pastille {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--rayon-petit);
    flex-shrink: 0;
    margin-top: 1px;
}

.accueil-pied {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--gris-eteint);
    font-size: 12px;
    color: var(--texte-doux);
}

.accueil-rapide:focus-visible,
.accueil-ecran:focus-visible {
    outline: 2px solid var(--petrole);
    outline-offset: 2px;
}

/* --- Les écrans étroits, SANS JAMAIS DE DEFILEMENT HORIZONTAL -------
   Quatre colonnes tiennent à 1366 px ; en dessous on passe à deux, puis à
   une. Les cartes d'une même rangée gardent la même hauteur à chaque
   palier, puisque c'est la grille qui la fixe et non leur contenu. */
@media (max-width: 1280px) {
    .accueil-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .accueil-grille,
    .accueil-rangee { grid-template-columns: minmax(0, 1fr); }
}