:root {
  --fond: #f5f6f4;
  --surface: #ffffff;
  --texte: #1d2428;
  --doux: #5f6b70;
  --bord: #dde1dc;
  --accent: #0068a9;
  --accent-clair: #e6edf0;
  --vert: #2e7d4f;
  --vert-fond: #e7f4ec;
  --rouge: #b3261e;
  --rouge-fond: #fbeae8;
  --ambre-fond: #fff6e0;
  --rayon: 8px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }
h1 { font-size: 1.45rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .6rem; }

.barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
  padding: .7rem 1.25rem; background: var(--accent); color: #fff;
}
.marque { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.barre nav { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.barre nav a, .barre nav .lien {
  color: #dce6ea; text-decoration: none; padding: .3rem .65rem; border-radius: 6px; font: inherit;
}
.barre nav a:hover, .barre nav .lien:hover { color: #fff; background: rgba(255,255,255,.1); }
.barre nav a.actif { color: #fff; background: rgba(255,255,255,.16); }

main { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.carte {
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 1.25rem; margin-bottom: 1rem;
}
.etroit { max-width: 440px; margin: 3rem auto; }
.moyen { max-width: 760px; }

.message { padding: .7rem 1rem; border-radius: var(--rayon); margin-bottom: 1rem; border: 1px solid transparent; }
.message.succes { background: var(--vert-fond); border-color: #bfe0cb; color: #1f5c39; }
.message.erreur { background: var(--rouge-fond); border-color: #f0c5c1; color: #8a1d17; }
.message.info { background: var(--accent-clair); border-color: #cddbe1; }
.message.alerte { background: var(--ambre-fond); border-color: #f0dfb0; }
.message ul { margin: .4rem 0 0; padding-left: 1.2rem; }

label { display: block; font-weight: 600; margin-bottom: .25rem; font-size: .92rem; }
.aide { color: var(--doux); font-size: .85rem; font-weight: 400; }
input[type=text], input[type=password], input[type=search], input[type=number], select, textarea {
  width: 100%; padding: .5rem .6rem; border: 1px solid #c9cfc8; border-radius: 6px;
  font: inherit; background: #fff; color: var(--texte);
}
input:focus, select:focus, textarea:focus { outline: 2px solid #8fb0c0; outline-offset: 0; border-color: #8fb0c0; }
textarea { min-height: 80px; resize: vertical; }
.champ { margin-bottom: 1rem; }
.grille { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.btn, button.btn {
  display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .95rem; border-radius: 6px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { filter: brightness(1.12); }
.btn.secondaire { background: #fff; color: var(--accent); border-color: #c4ced2; }
.btn.danger { background: #fff; color: var(--rouge); border-color: #e3b5b1; }
.btn.danger:hover { background: var(--rouge-fond); filter: none; }
.btn.petit { padding: .25rem .6rem; font-size: .85rem; font-weight: 500; }
button.lien { background: none; border: 0; cursor: pointer; }
form.inline { display: inline; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.outils { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: 1rem; }
.outils .recherche { flex: 1 1 240px; }
.outils .filtre { flex: 0 1 220px; }
.outils .droite { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.tableau-conteneur { overflow-x: auto; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); }
table { border-collapse: collapse; width: 100%; }
th, td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid #eceeea; vertical-align: top; }
th { background: #f0f2ef; font-size: .85rem; color: #3b464b; white-space: nowrap; }
th a { color: inherit; text-decoration: none; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbf9; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.ref { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .88rem; white-space: nowrap; }
td.case, th.case { width: 1%; }
td.boutons { white-space: nowrap; text-align: right; width: 1%; }
.paliers { display: flex; flex-wrap: wrap; gap: .25rem; }
.palier { background: var(--accent-clair); color: #23404d; border-radius: 4px; padding: 0 .4rem; font-size: .8rem; white-space: nowrap; }
.etiquette { color: var(--doux); font-size: .85rem; }
.vide { padding: 2.5rem 1rem; text-align: center; color: var(--doux); }

.pagination { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: 1rem; }
.pagination a, .pagination span { padding: .3rem .65rem; border-radius: 6px; border: 1px solid var(--bord); background: #fff; text-decoration: none; }
.pagination .courante { background: var(--accent); color: #fff; border-color: var(--accent); }
.compte { color: var(--doux); font-size: .9rem; margin-left: auto; }

.barre-selection { display: none; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.barre-selection.visible { display: flex; }

.lignes-paliers td { padding: .3rem .4rem; border: 0; }
.lignes-paliers input { max-width: 160px; }

.apercu { font-size: .85rem; }
.apercu td { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.apercu tr.entete-choisie td { background: var(--accent-clair); font-weight: 600; }
.correspondances { display: grid; gap: .8rem 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.radios label { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .5rem; }
.radios input { margin-top: .3rem; }
.resume { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.resume div { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .8rem 1.2rem; min-width: 140px; }
.resume strong { display: block; font-size: 1.5rem; }

@media (max-width: 640px) {
  .masquer-mobile { display: none; }
  main { padding: 1rem .75rem 2rem; }
}

/* Sélecteur de langue de la liste */
.langues { display: inline-flex; border: 1px solid #c4ced2; border-radius: 6px; overflow: hidden; align-self: flex-end; }
.langues a { padding: .45rem .7rem; text-decoration: none; color: var(--accent); background: #fff; font-weight: 600; font-size: .9rem; }
.langues a + a { border-left: 1px solid #c4ced2; }
.langues a.actif { background: var(--accent); color: #fff; }

/* Fiche article */
h2.premier { margin-top: 0; }
.sans-bord { border: 0; }
.grille-prix th, .grille-prix td { padding: .35rem .4rem; border-bottom: 0; background: none; }
.grille-prix input { min-width: 90px; }
.grille-prix td:nth-child(2) input { min-width: 180px; }
.grille-prix .ligne-base td { background: #f6f8f5; }
.onglets { display: flex; gap: .25rem; border-bottom: 1px solid var(--bord); margin: -.25rem 0 1rem; }
.onglets button { font: inherit; font-weight: 600; background: none; border: 0; border-bottom: 3px solid transparent;
  padding: .5rem .9rem; color: var(--doux); cursor: pointer; margin-bottom: -1px; }
.onglets button.actif { color: var(--accent); border-bottom-color: var(--accent); }
.fiche .actions { margin-bottom: 2rem; }
td.num .etiquette, td .etiquette + .etiquette { line-height: 1.35; }
h3 { font-size: .95rem; margin: 1.2rem 0 .5rem; color: #3b464b; }
.barre .qui { color: #9fb4bd; font-size: .85rem; padding: 0 .4rem; }
table.droits { width: auto; font-size: .88rem; }
table.droits th, table.droits td { text-align: center; padding: .35rem .7rem; }
table.droits tbody th { text-align: left; background: none; }