@charset "UTF-8";
/* =============================================================
   Trusty Food — feuille de styles unique (public + back-office)
   Mobile-first, thèmes clair et sombre.
   ============================================================= */

/* ---------- Jetons ---------- */
:root {
  --brand: #0f766e;
  /* Variante utilisée pour le TEXTE : en thème sombre, la couleur de marque
     est éclaircie afin de conserver un contraste suffisant sur fond foncé. */
  --brand-text: var(--brand);

  --bg:          #f6f7f9;
  --surface:     #ffffff;
  --surface-alt: #f2f4f7;
  --surface-sunk:#eceff3;
  --border:      #e2e5ea;
  --border-strong:#cfd4dc;

  --text:        #16181d;
  --text-soft:   #565d69;
  --text-faint:  #858c98;

  --ok:    #0f7a4d;
  --ok-bg: #e6f5ed;
  --ko:    #b02a2a;
  --ko-bg: #fdeaea;
  --warn:  #9a6206;
  --warn-bg:#fdf3e2;
  --info:  #1d4f91;
  --info-bg:#e9f1fc;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(16, 20, 28, .06);
  --shadow:    0 2px 8px rgba(16, 20, 28, .07), 0 1px 2px rgba(16, 20, 28, .05);
  --shadow-lg: 0 12px 32px rgba(16, 20, 28, .12);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --wrap: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-text: color-mix(in srgb, var(--brand) 45%, #ffffff);

    --bg:          #0f1115;
    --surface:     #171a20;
    --surface-alt: #1e222a;
    --surface-sunk:#13161b;
    --border:      #2a2f39;
    --border-strong:#3a414e;

    --text:      #e8eaee;
    --text-soft: #a3aab7;
    --text-faint:#7b8391;

    --ok:    #5fd39b;
    --ok-bg: #13291f;
    --ko:    #f98a8a;
    --ko-bg: #2c1717;
    --warn:  #e9b45c;
    --warn-bg:#2a2013;
    --info:  #8fb8f0;
    --info-bg:#151f2e;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow:    0 2px 10px rgba(0, 0, 0, .45);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --brand-text: color-mix(in srgb, var(--brand) 45%, #ffffff);
  --bg: #0f1115; --surface: #171a20; --surface-alt: #1e222a; --surface-sunk:#13161b;
  --border: #2a2f39; --border-strong:#3a414e;
  --text: #e8eaee; --text-soft: #a3aab7; --text-faint:#7b8391;
  --ok:#5fd39b; --ok-bg:#13291f; --ko:#f98a8a; --ko-bg:#2c1717;
  --warn:#e9b45c; --warn-bg:#2a2013; --info:#8fb8f0; --info-bg:#151f2e;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.011em; }
h1 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem); }
h2 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1em; text-align: justify; text-justify: inter-word; }
p:last-child { margin-bottom: 0; }

/* La justification suppose des lignes assez longues pour que le navigateur
   ait de quoi répartir. Dans une colonne étroite il n'a plus que quelques
   espaces à étirer : mesuré jusqu'à 19,7 px par espace contre 5,1 px à
   l'état normal, soit des rivières blanches verticales en travers du
   paragraphe. Aucun mot n'est coupé par ces règles : c'est la
   justification qu'on lève, pas la coupure qu'on ajoute.

   1. Sur petit écran, toute la page devient une colonne étroite. */
@media (max-width: 619px) {
  p { text-align: left; }
}

/* 2. Les colonnes qui restent étroites quelle que soit la fenêtre, parce
      que la mise en page les met en grille : à 1024 px, le texte d'une
      étape ne fait que 30 caractères de large. Liste établie en mesurant
      chaque paragraphe de chaque page à six largeurs de fenêtre, puis en
      ne retenant que ceux qui tombaient sous 45 caractères. */
.lp-step__text, .lp-step__text p,
.lp-famille__text,
.conso-point p, .conso-point .rich p,
.conso-acces__carte p, .conso-acces__carte .rich p,
.mac-format figcaption p,
.site-footer__meta p {
  text-align: left;
}

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

img, svg { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 640px) { .wrap { width: min(100% - 3rem, var(--wrap)); } }

.muted     { color: var(--text-soft); }
.faint     { color: var(--text-faint); }
.small     { font-size: .875rem; }
.tiny      { font-size: .8rem; }
.mono      { font-family: var(--mono); font-size: .9em; }
.nowrap    { white-space: nowrap; }
.center    { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: 0; left: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: .6rem 1rem;
  border-radius: 0 0 var(--radius) 0;
  transform: translateY(-120%);
  transition: transform .15s;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- En-tête / pied ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: saturate(180%) blur(8px);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 60px; flex-wrap: wrap;
}
.site-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.site-brand__mark {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; background: var(--brand); color: #fff; flex: none;
}
.site-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.site-brand__text strong { font-size: 1rem; letter-spacing: -.01em; }
.site-brand__text small { font-size: .74rem; color: var(--text-soft); }
.site-header__nav a { font-size: .9rem; font-weight: 500; text-decoration: none; }
.site-header__nav a:hover { text-decoration: underline; }

.site-footer {
  margin-top: 4rem; padding: 2.5rem 0;
  background: var(--surface); border-top: 1px solid var(--border);
}
.site-footer__inner { display: grid; gap: 1.5rem; }
@media (min-width: 760px) {
  .site-footer__inner { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .site-footer__meta { text-align: right; }
}
.site-footer__title { font-weight: 650; margin-bottom: .35rem; }
.site-footer p { font-size: .85rem; margin-bottom: .4rem; }
/* Liens obligatoires : discrets mais pas illisibles. Un gris trop clair
   sur une mention légale est une façon polie de la cacher. */
.site-footer__legal a { color: var(--text-soft); text-decoration: underline; }
.site-footer__legal a:hover { color: var(--brand-text); }
.site-footer__legal span { color: var(--text-faint); margin: 0 .35rem; }

/* ---------- Boutons ---------- */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .55rem 1rem; min-height: 40px;
  font: inherit; font-size: .9rem; font-weight: 550; line-height: 1.2;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: filter .15s, background-color .15s, border-color .15s, transform .05s;
}
.btn:hover { filter: brightness(.97); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn--primary { --btn-bg: var(--brand); --btn-fg: #fff; --btn-bd: transparent; }
.btn--danger  { --btn-bg: transparent; --btn-fg: var(--ko); --btn-bd: var(--ko); }
.btn--ghost   { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--text-soft); }
.btn--sm      { min-height: 32px; padding: .3rem .65rem; font-size: .82rem; }
.btn--block   { width: 100%; }
.btn svg { flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; line-height: 1.5;
  background: var(--surface-alt); color: var(--text-soft);
  border: 1px solid transparent; white-space: nowrap;
}
.badge--ok      { background: var(--ok-bg);   color: var(--ok); }
.badge--ko      { background: var(--ko-bg);   color: var(--ko); }
.badge--warn    { background: var(--warn-bg); color: var(--warn); }
.badge--info    { background: var(--info-bg); color: var(--info); }
.badge--neutral { background: var(--surface-alt); color: var(--text-soft); }
.badge--bio     { background: var(--ok-bg); color: var(--ok); }
.badge--outline { background: transparent; border-color: var(--border-strong); color: var(--text-soft); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- Cartes ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card__body { padding: 1.25rem; }
.card__head {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.card__head h2, .card__head h3 { margin: 0; }
@media (min-width: 640px) { .card__body { padding: 1.5rem; } }

/* =============================================================
   PAGES PUBLIQUES
   ============================================================= */

/* ---------- Accueil ---------- */
.home-hero { padding: 3rem 0 2rem; }
.home-hero h1 { max-width: 20ch; }
.home-hero p  { max-width: 60ch; font-size: 1.05rem; color: var(--text-soft); }

.company-grid {
  display: grid; gap: 1rem; padding-bottom: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.company-tile {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.25rem; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.company-tile:hover { border-color: var(--brand-text); box-shadow: var(--shadow); transform: translateY(-2px); }
.company-tile__name { font-weight: 650; font-size: 1.05rem; }

/* ---------- Bandeau société ---------- */
.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0 1.5rem;
}
.hero__inner { display: grid; gap: 1.25rem; }
.hero__identity { display: flex; align-items: flex-start; gap: 1rem; }
.hero__logo {
  width: 56px; height: 56px; flex: none; border-radius: 12px; object-fit: contain;
  background: var(--surface-alt); border: 1px solid var(--border); padding: 4px;
}
.hero__logo--placeholder {
  display: grid; place-items: center;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 1.35rem;
  border-color: transparent;
}
.hero h1 { margin-bottom: .25rem; }
.hero__sub { color: var(--text-soft); font-size: .95rem; margin: 0; }
.hero__desc { max-width: 68ch; color: var(--text-soft); margin-top: .75rem; }

.stat-grid {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat {
  padding: .85rem 1rem; border-radius: var(--radius);
  background: var(--surface-alt); border: 1px solid var(--border);
}
.stat__value { font-size: 1.5rem; font-weight: 680; line-height: 1.15; letter-spacing: -.02em; }
.stat__label { font-size: .78rem; color: var(--text-soft); margin-top: .1rem; }

/* ---------- Barre de filtres ---------- */
.filters {
  position: sticky; top: 60px; z-index: 20;
  background: var(--bg); padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.filters__form { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .filters__form { grid-template-columns: 2fr 1fr 1fr 1fr auto; align-items: end; }
}
.filters .field { margin: 0; }
.filters__count { font-size: .85rem; color: var(--text-soft); padding-top: .75rem; }

/* ---------- Liste d'analyses ---------- */
.analyses { padding: 1.5rem 0 0; display: grid; gap: .85rem; }

.analysis-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 1rem 1.15rem;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.analysis-card:hover,
.analysis-card:focus-visible {
  border-color: var(--brand-text); box-shadow: var(--shadow); transform: translateY(-1px);
}
.analysis-card__top {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: .5rem .75rem; margin-bottom: .5rem;
}
/* Le bloc de titre peut rétrécir ; le badge, insécable, passe à la ligne
   plutôt que d'élargir la carte au-delà de la fenêtre. */
.analysis-card__top > div { flex: 1 1 58%; min-width: 0; }
.analysis-card__top > .badge { flex: 0 0 auto; }
.analysis-card__title {
  font-size: 1.08rem; font-weight: 650; margin: 0; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.analysis-card__sub { font-size: .84rem; color: var(--text-faint); margin: .1rem 0 0; }

.analysis-card__meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; min-width: 0;
  font-size: .86rem; color: var(--text-soft); margin: .5rem 0;
}
.analysis-card__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.analysis-card__meta svg { flex: none; opacity: .65; }

.analysis-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }

.analysis-card__highlights {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--border);
}
.chip {
  font-size: .78rem; padding: .25rem .55rem; border-radius: var(--radius-sm);
  background: var(--surface-alt); color: var(--text-soft);
  overflow-wrap: anywhere;
}
.chip strong { color: var(--text); font-weight: 620; }

.analysis-card__cta {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .85rem; font-weight: 550; color: var(--brand-text); margin-top: .7rem;
}

/* ---------- Détail d'analyse ---------- */
.breadcrumb { padding: 1rem 0 0; font-size: .85rem; color: var(--text-soft); }
.breadcrumb a { color: inherit; }

.report-head { padding: 1rem 0 1.5rem; }
.report-head__top {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 1rem;
}
.report-head h1 { margin-bottom: .3rem; }
.report-head__ref { font-family: var(--mono); font-size: .82rem; color: var(--text-faint); }

.verdict {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: var(--radius); font-weight: 600; font-size: .9rem;
}
.verdict--ok      { background: var(--ok-bg);   color: var(--ok); }
.verdict--ko      { background: var(--ko-bg);   color: var(--ko); }
.verdict--warn    { background: var(--warn-bg); color: var(--warn); }
.verdict--neutral { background: var(--surface-alt); color: var(--text-soft); }

.summary-box {
  margin-top: 1rem; padding: 1rem 1.15rem;
  background: var(--info-bg); border-left: 3px solid var(--info);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.summary-box p { margin: 0; font-size: .95rem; }

/* Grille d'informations clés.
   Les séparateurs sont portés par les cellules (box-shadow) et non par le fond
   du conteneur : une ligne incomplète ne laisse donc aucune zone grise vide. */
.facts {
  display: grid; gap: 1px; margin: 1.5rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.fact {
  background: var(--surface); padding: .9rem 1.1rem;
  box-shadow: 0 0 0 1px var(--border);
}
.fact__label {
  font-size: .73rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); font-weight: 600; margin-bottom: .2rem;
}
.fact__value { font-size: .95rem; font-weight: 550; }
.fact__value--lg { font-size: 1.05rem; }

/* Sommaire des familles */
.toc { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.toc a {
  font-size: .84rem; padding: .35rem .75rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-soft); text-decoration: none;
}
.toc a:hover { border-color: var(--brand-text); color: var(--brand-text); }

/* Section par famille */
.family { margin-bottom: 1.25rem; }
.family__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.25rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); list-style: none;
}
.family__head::-webkit-details-marker { display: none; }
.family[open] .family__head { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; }
.family__title { display: flex; align-items: center; gap: .65rem; font-weight: 650; font-size: 1rem; }
.family__icon {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 9px; background: var(--surface-alt); font-size: 1rem;
}
.family__count { font-size: .8rem; color: var(--text-faint); font-weight: 500; }
.family__chevron { transition: transform .2s; color: var(--text-faint); }
.family[open] .family__chevron { transform: rotate(180deg); }
.family__body {
  background: var(--surface); border: 1px solid var(--border); border-top: 1px dashed var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden;
}
.family__note {
  padding: .75rem 1.25rem; font-size: .85rem; color: var(--text-soft);
  background: var(--surface-sunk); border-bottom: 1px solid var(--border);
}

/* Table de résultats.
   Sous 760px la ligne devient une carte : le nom et sa description occupent
   toute la largeur, puis la valeur et le statut partagent une seconde ligne. */
.results { width: 100%; border-collapse: collapse; font-size: .92rem; }
.results thead { display: none; }
.results tbody tr {
  display: grid; gap: .35rem .75rem; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.results tbody tr:last-child { border-bottom: 0; }
.results td { padding: 0; border: 0; min-width: 0; }

.results .r-name {
  grid-column: 1 / -1; font-weight: 600; line-height: 1.4;
}
.results .r-name small {
  display: block; font-weight: 400; color: var(--text-faint);
  font-size: .81rem; line-height: 1.45; margin-top: .15rem;
}
.results .r-value {
  grid-column: 1; text-align: left;
  font-variant-numeric: tabular-nums; font-weight: 650; font-size: 1.02rem;
}
.results .r-status { grid-column: 2; text-align: right; align-self: start; }
.results .r-extra  {
  grid-column: 1 / -1; font-size: .81rem; color: var(--text-faint);
  padding-top: .15rem;
}
.results .r-method { font-family: var(--mono); font-size: .78rem; }

@media (min-width: 760px) {
  .results thead { display: table-header-group; }
  .results thead th {
    text-align: left; padding: .65rem 1.25rem; font-size: .75rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint);
    font-weight: 600; background: var(--surface-sunk); border-bottom: 1px solid var(--border);
  }
  .results thead th.num { text-align: right; }
  .results tbody tr { display: table-row; }
  .results td { display: table-cell; padding: .8rem 1.25rem; vertical-align: top; }
  .results .r-name { font-weight: 600; }
  .results .r-value {
    text-align: right; font-size: .95rem; white-space: nowrap;
  }
  .results .r-status { text-align: right; }
  .results .r-extra { color: var(--text-faint); max-width: 22rem; }
}

/* Jauge apport de référence */
.meter {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .35rem; font-size: .78rem; color: var(--text-soft);
}
.meter__track {
  flex: 1; max-width: 140px; height: 5px; border-radius: 3px;
  background: var(--surface-sunk); overflow: hidden;
}
.meter__fill { height: 100%; border-radius: 3px; background: var(--brand); }
.meter__fill--high { background: var(--ok); }

/* Additifs */
.additive-list { display: grid; gap: .6rem; padding: 1rem 1.25rem; }
.additive {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem .9rem; border-radius: var(--radius);
  background: var(--surface-alt); border: 1px solid var(--border);
}
.additive__code {
  font-family: var(--mono); font-weight: 700; font-size: .85rem;
  padding: .2rem .45rem; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border-strong); flex: none;
}
.additive__name { font-weight: 600; font-size: .92rem; }
.additive__desc { font-size: .82rem; color: var(--text-soft); margin-top: .15rem; }

/* Blocs d'information secondaires */
.info-cards { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 760px) { .info-cards { grid-template-columns: 1fr 1fr; } }

.dl { display: grid; gap: .55rem; margin: 0; font-size: .9rem; }
.dl > div { display: flex; justify-content: space-between; gap: 1rem; }
.dl dt { color: var(--text-soft); }
.dl dd { margin: 0; text-align: right; font-weight: 550; }

.disclaimer {
  margin-top: 2rem; padding: 1rem 1.15rem; font-size: .84rem;
  color: var(--text-soft); background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: var(--radius);
}

/* ---------- États vides ---------- */
.empty {
  padding: 3rem 1.5rem; text-align: center;
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg); color: var(--text-soft);
}
.empty h2 { color: var(--text); }

/* =============================================================
   FORMULAIRES
   ============================================================= */
.field { display: block; margin-bottom: 1rem; }
.field > label,
.field__label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--text-soft); margin-bottom: .3rem;
}
.field__hint { font-size: .78rem; color: var(--text-faint); margin-top: .25rem; }
.field__error { font-size: .8rem; color: var(--ko); margin-top: .25rem; font-weight: 500; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="url"], input[type="search"],
input[type="tel"], select, textarea {
  width: 100%; padding: .55rem .7rem; min-height: 40px;
  font: inherit; font-size: .92rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--ko); }
textarea { min-height: 90px; resize: vertical; line-height: 1.55; }
select {
  appearance: none; padding-right: 2rem; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23858c98' d='M1 1.5 6 6.5l5-5'/></svg>");
  background-repeat: no-repeat; background-position: right .7rem center;
}
input[type="color"] { padding: 2px; height: 40px; cursor: pointer; }
input[type="file"] { padding: .4rem; font-size: .85rem; }

.check { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; cursor: pointer; }
.check input { width: auto; min-height: 0; margin-top: .25rem; accent-color: var(--brand); flex: none; }

.form-grid { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 680px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .form-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .form-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .span-2 { grid-column: span 2; }
  .span-full { grid-column: 1 / -1; }
}

fieldset {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.25rem; margin: 0 0 1.25rem;
}
legend {
  padding: 0 .5rem; font-weight: 650; font-size: .95rem;
}

/* =============================================================
   BACK-OFFICE
   ============================================================= */
.admin-shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 900px) { .admin-shell { grid-template-columns: 240px 1fr; } }

.sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 1rem; padding: 1rem;
}
@media (min-width: 900px) { .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }

.sidebar__brand { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem 1rem; }
.sidebar__brand span { font-weight: 700; letter-spacing: -.015em; }
.sidebar nav { display: grid; gap: .15rem; }
.sidebar nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border-radius: var(--radius);
  font-size: .9rem; font-weight: 500; color: var(--text-soft); text-decoration: none;
}
.sidebar nav a:hover { background: var(--surface-alt); color: var(--text); }
.sidebar nav a.is-active { background: var(--brand); color: #fff; }
.sidebar nav a svg { flex: none; opacity: .85; }
.sidebar__group {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint); font-weight: 650; padding: .9rem .7rem .25rem;
}
.sidebar__foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .82rem; }

.admin-main { min-width: 0; padding: 1.25rem; }
@media (min-width: 900px) { .admin-main { padding: 2rem; } }

.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem;
}
.page-head h1 { margin: 0; }
.page-head p { margin: .25rem 0 0; color: var(--text-soft); font-size: .9rem; }

.flash { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.alert {
  padding: .75rem 1rem; border-radius: var(--radius); font-size: .9rem;
  border: 1px solid transparent;
}
.alert--success { background: var(--ok-bg);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.alert--error   { background: var(--ko-bg);   color: var(--ko);   border-color: color-mix(in srgb, var(--ko) 30%, transparent); }
.alert--warning { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.alert--info    { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }

/* Avertissement de configuration (base_path incohérent) */
.cfg-warning {
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  border-radius: var(--radius);
  padding: .85rem 1rem; margin-bottom: 1.25rem; font-size: .88rem;
}
.cfg-warning strong { display: block; margin-bottom: .35rem; }
.cfg-warning p { margin: .35rem 0 0; line-height: 1.5; }
.cfg-warning code {
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  padding: .05em .35em; border-radius: 4px; font-size: .95em;
  overflow-wrap: anywhere;
}

/* Tableaux d'administration */
.table-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
  text-align: left; padding: .7rem 1rem; white-space: nowrap;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); font-weight: 650;
  background: var(--surface-sunk); border-bottom: 1px solid var(--border);
}
.table td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-alt); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { text-align: right; white-space: nowrap; }
/* La liste des sociétés porte cinq actions depuis l'ajout du lien vers la
   carte, et la colonne n'en logeait que deux par rang — trois rangs, 137 px
   par ligne de tableau. Élargir la colonne aurait poussé la table au-delà de
   son conteneur sur un écran de 1 280 px, donc fait apparaître un
   défilement horizontal sur le bouton de suppression. On resserre plutôt
   les boutons dans cette seule colonne : trois par rang, deux rangs, et la
   table garde exactement la largeur qu'elle avait. */
.table--societes .actions .btn-row { gap: .3rem; }
.table--societes .actions .btn--sm { padding-left: .45rem; padding-right: .45rem; }
.table__primary { font-weight: 600; }
.table__sub { font-size: .8rem; color: var(--text-faint); }

.toolbar {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: end;
  padding: 1rem; border-bottom: 1px solid var(--border); background: var(--surface-sunk);
}
.toolbar .field { margin: 0; min-width: 160px; }
.toolbar__grow { flex: 1 1 220px; }

/* Cartes statistiques admin */
.kpi-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1.5rem; }
.kpi {
  padding: 1rem 1.15rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.kpi__value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.kpi__label { font-size: .8rem; color: var(--text-soft); margin-top: .15rem; }
.kpi__hint { font-size: .75rem; color: var(--text-faint); margin-top: .35rem; }

/* Histogramme simple */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-top: .75rem; }
.spark__bar { flex: 1; background: var(--brand); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }

/* Saisie dynamique des résultats */
.result-rows { display: grid; gap: .6rem; }
.result-row {
  display: grid; gap: .5rem; padding: .85rem;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius);
  grid-template-columns: 1fr;
}
.result-row .field { margin: 0; }
.result-row__head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.result-row__index {
  font-size: .75rem; font-weight: 650; color: var(--text-faint);
  font-family: var(--mono);
}
.result-row__grid { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 680px) {
  .result-row__grid { grid-template-columns: 1.6fr 1fr .8fr .8fr 1fr; }
  .result-row__grid--wide { grid-template-columns: 1fr 1fr 1fr; }
}
.result-row__extra { display: none; gap: .5rem; grid-template-columns: 1fr; }
.result-row.is-expanded .result-row__extra { display: grid; }
@media (min-width: 680px) { .result-row.is-expanded .result-row__extra { grid-template-columns: repeat(3, 1fr); } }

.drag-handle { cursor: grab; color: var(--text-faint); user-select: none; padding: 0 .25rem; }

.family-block { margin-bottom: 1.25rem; }
.family-block__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .6rem; padding-bottom: .4rem;
  border-bottom: 2px solid var(--border);
}
.family-block__title { font-weight: 650; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }

/* Panneau QR code */
.qr-layout { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .qr-layout { grid-template-columns: 340px 1fr; align-items: start; } }

.qr-preview {
  display: grid; place-items: center; gap: 1rem; padding: 1.5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.qr-preview img { width: 100%; max-width: 260px; border-radius: var(--radius); }
.qr-url {
  font-family: var(--mono); font-size: .8rem; word-break: break-all;
  padding: .6rem .75rem; background: var(--surface-sunk);
  border: 1px solid var(--border); border-radius: var(--radius); width: 100%;
}

/* Affiche prête à imprimer */
.poster {
  background: #fff; color: #111827; padding: 2.5rem 2rem; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  max-width: 420px; margin-inline: auto;
}
.poster__title { font-size: 1.35rem; font-weight: 700; margin: 0 0 .35rem; }
.poster__sub { font-size: .92rem; color: #4b5563; margin: 0 0 1.25rem; }
.poster__qr { width: 220px; margin: 0 auto 1.25rem; display: block; }
.poster__steps { font-size: .85rem; color: #4b5563; text-align: left; display: grid; gap: .4rem; }
.poster__foot { margin-top: 1.25rem; font-size: .75rem; color: #6b7280; }

@media print {
  .site-header, .site-footer, .sidebar, .page-head, .toolbar,
  .btn, .filters, .no-print { display: none !important; }
  body { background: #fff; }
  .admin-main { padding: 0; }
  .poster { border: 0; max-width: none; }
  .family__body { display: block !important; }
  .family[open] .family__head { border-bottom: 1px solid #ddd; }
  a[href]::after { content: ""; }
}

/* Utilitaires d'espacement */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.wrap-flex { flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================
   PAGE D'ACCUEIL (trusty-food.com)
   Reprend le dégradé des stickers pour que le site, le macaron
   et les fiches d'analyse forment un même ensemble.
   ============================================================= */

:root {
  --lp-deep:  #053B2F;
  --lp-mid:   #0F766E;
  --lp-light: #11836C;
}

.page-home .site-header { border-bottom-color: transparent; }

/* ---------- Bandeau ---------- */
.lp-hero {
  background: linear-gradient(135deg, var(--lp-deep) 0%, var(--lp-mid) 55%, var(--lp-light) 100%);
  color: #fff;
  padding: clamp(3rem, 2rem + 7vw, 6.5rem) 0 clamp(2.75rem, 2rem + 5vw, 5rem);
}
.lp-hero__inner { max-width: 54rem; }
.lp-kicker {
  font-size: .8rem; font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; margin: 0 0 1rem; color: #fff; opacity: .88;
}
.lp-hero__title {
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.4rem);
  line-height: 1.12; letter-spacing: -.022em; margin: 0 0 1.15rem;
  font-weight: 700; color: #fff; text-wrap: balance;
}
.lp-hero__text {
  font-size: clamp(1.02rem, .97rem + .35vw, 1.22rem);
  line-height: 1.6;
  margin: 0 0 2rem;
  /* max-width: 46ch;  */
  color: #fff;
  opacity: .94;
  text-align: justify; text-justify: inter-word;
}
.lp-hero__actions { gap: .75rem; }

.btn--lg { min-height: 50px; padding: .8rem 1.5rem; font-size: .98rem; }
.lp-hero .btn--primary {
  --btn-bg: #fff; --btn-fg: var(--lp-deep); --btn-bd: transparent;
  font-weight: 650;
}
.btn--ghost-line {
  --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .5);
}
.btn--ghost-line:hover { --btn-bd: #fff; filter: none; background: rgba(255, 255, 255, .1); }

/* ---------- Sections ---------- */
.lp-section { padding: clamp(2.75rem, 2rem + 4vw, 4.5rem) 0; }
.lp-section--alt { background: var(--surface); border-block: 1px solid var(--border); }
.lp-section--dark {
  background: var(--lp-deep); color: #fff;
}
.lp-section--dark h2 { color: #fff; }

.lp-head { max-width: 52rem; margin-bottom: 2.25rem; }
.lp-head--center { margin-inline: auto; text-align: center; }
.lp-head h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  letter-spacing: -.018em; margin: 0 0 .7rem; text-wrap: balance;
}
.lp-head__text {
  font-size: 1.02rem; line-height: 1.65; color: var(--text-soft); margin: 0; max-width: 58ch;
}
.lp-head--center .lp-head__text { margin-inline: auto; }
.lp-section--dark .lp-head__text { color: rgba(255, 255, 255, .88); }

/* ---------- Les quatre étapes ---------- */
.lp-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.5rem 1.75rem;
  grid-template-columns: 1fr;
  counter-reset: etape;
}
@media (min-width: 620px) { .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .lp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lp-step { position: relative; padding-top: 3.1rem; }
.lp-step__num {
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border-radius: 50%; background: var(--lp-mid); color: #fff;
  font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.lp-step__title { font-size: 1.05rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
.lp-step__text { font-size: .93rem; line-height: 1.6; color: var(--text-soft); margin: 0; }

/* ---------- Familles de paramètres ---------- */
.lp-familles {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.lp-famille {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem 1.1rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.lp-famille__icon {
  font-size: 1.3rem; line-height: 1.2; flex: none;
}
.lp-famille__title { font-size: .96rem; margin: 0 0 .2rem; }
.lp-famille__text { font-size: .84rem; line-height: 1.5; color: var(--text-soft); margin: 0; }

/* ---------- Deux parcours ---------- */
.lp-parcours { display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .lp-parcours { grid-template-columns: 1fr 1fr; } }

.lp-parcours__card {
  padding: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: flex-start;
}
.lp-parcours__card--alt { background: var(--surface-alt); }
.lp-parcours__badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .76rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-text); margin-bottom: .85rem;
}
.lp-parcours__title {
  font-size: 1.22rem; margin: 0 0 .6rem; letter-spacing: -.012em; text-wrap: balance;
}
.lp-parcours__text {
  font-size: .95rem; line-height: 1.62; color: var(--text-soft); margin: 0 0 1.4rem;
}
.lp-parcours__card .btn { margin-top: auto; }

/* ---------- Ce que Trusty Food n'est pas ---------- */
.lp-limites {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
  max-width: 62rem; margin-inline: auto;
}
@media (min-width: 860px) { .lp-limites { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lp-limite {
  position: relative;
  padding: 1.15rem 1.25rem 1.15rem 1.25rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  font-size: .92rem; line-height: 1.6; color: rgba(255, 255, 255, .93);
}

/* ---------- Association ---------- */
.lp-asso {
  display: flex; gap: 1.5rem; align-items: flex-start;
  flex-wrap: wrap;
}
.lp-asso__mark {
  flex: none; display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 20px;
  background: var(--bg); border: 1px solid var(--border); color: var(--lp-mid);
}
.lp-asso__title { font-size: 1.35rem; margin: 0 0 .55rem; letter-spacing: -.014em; }
.lp-asso__text {
  font-size: .98rem; line-height: 1.65; color: var(--text-soft);
  margin: 0 0 1.25rem; max-width: 58ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-famille { background: var(--surface-alt); }
}

/* Navigation d'ancres de la page d'accueil */
.site-nav { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.site-nav a {
  font-size: .89rem; font-weight: 550; color: var(--text-soft); text-decoration: none;
}
.site-nav a:hover { color: var(--brand-text); text-decoration: underline; }
/* Le repli sur petit écran est traité plus bas, par le bloc du menu
   déroulant. Masquer la navigation ici la rendait inaccessible lorsque le
   JavaScript ne s'exécute pas, puisque le bouton n'apparaît alors pas. */

/* =========================================================
   Page « Les macarons »
   ========================================================= */
.mac-hero__inner {
  display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: center;
}
.mac-hero__visuel img {
  width: min(260px, 34vw); height: auto; display: block;
  border-radius: 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

.mac-formats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem;
}
.mac-format {
  margin: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px); padding: 1.6rem; text-align: center;
}
.mac-format img {
  width: min(280px, 72%); height: auto; border-radius: 20px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
}
.mac-format figcaption { margin-top: 1.2rem; text-align: left; }
.mac-format h3 { margin: 0 0 .4rem; font-size: 1.02rem; }
.mac-format p { margin: 0; color: var(--text-soft); font-size: .92rem; line-height: 1.55; }

.mac-couleurs { display: grid; gap: 1.1rem; }
.mac-couleur {
  display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 5px solid var(--mac-teinte, var(--brand));
  border-radius: var(--radius-lg, 16px); padding: 1.4rem 1.5rem;
}
.mac-couleur--vert   { --mac-teinte: #0F766E; }
.mac-couleur--violet { --mac-teinte: #8555A5; }
.mac-couleur--orange { --mac-teinte: #B14A07; }
.mac-couleur__img {
  width: 132px; height: auto; border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
}
.mac-couleur__nom {
  margin: 0 0 .15rem; font-size: .73rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--mac-teinte);
}
.mac-couleur__titre { margin: 0 0 .5rem; font-size: 1.1rem; }
.mac-couleur__texte { margin: 0; color: var(--text-soft); line-height: 1.6; }

.mac-familles {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; padding: 0; list-style: none;
}
.mac-familles li {
  font-size: .82rem; font-weight: 550; padding: .3rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--mac-teinte) 12%, transparent);
  color: var(--mac-teinte);
}

.mac-reserve {
  margin: .9rem 0 0; padding-left: .85rem; border-left: 2px solid var(--border);
  font-size: .86rem; line-height: 1.55; color: var(--text-faint, var(--text-soft));
}

.mac-choix {
  margin-top: 1.6rem; padding: 1.3rem 1.5rem; border-radius: var(--radius-lg, 16px);
  background: var(--surface-alt, #f4f7f5); border: 1px solid var(--border);
}
.mac-choix h3 { margin: 0 0 .35rem; font-size: 1rem; }
.mac-choix p { margin: 0; color: var(--text-soft); font-size: .93rem; }

@media (max-width: 860px) {
  .mac-hero__inner { grid-template-columns: 1fr; }
  .mac-hero__visuel { order: -1; }
  .mac-hero__visuel img { width: min(200px, 46vw); }
}
@media (max-width: 620px) {
  .mac-couleur { grid-template-columns: 1fr; gap: 1.1rem; }
  .mac-couleur__img { width: 116px; }
}

/* Variante à trois colonnes de .lp-steps — « Pourquoi l'afficher ».
   Règle purement additive : la version à quatre colonnes de la page
   d'accueil n'est pas touchée. Même spécificité, mais déclarée plus loin
   dans le fichier, donc c'est elle qui l'emporte sur les éléments qui
   portent le modificateur. */
@media (min-width: 980px) {
  .lp-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Chapô plus large — pour les paragraphes qui perdent une ligne à cause de
   la mesure par défaut. Règle additive : `.lp-head__text` n'est pas touchée,
   seuls les éléments portant le modificateur changent de comportement.
   72ch reste dans la plage de lecture confortable ; au-delà, c'est le
   conteneur `.lp-head` (52 rem) qui limite de toute façon. */
.lp-head__text--large { max-width: 72ch; }

/* =========================================================
   Annuaire des partenaires
   ========================================================= */
.part-tete .lp-head { margin-bottom: 1.6rem; }

.part-filtres {
  display: grid; gap: .85rem 1rem; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.1rem 1.2rem;
}
.part-filtres__champ--large { grid-column: span 2; }
.part-filtres__champ { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.part-filtres__champ label {
  font-size: .78rem; font-weight: 600; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .03em;
}
.part-filtres__champ input,
.part-filtres__champ select {
  width: 100%; min-height: 40px; padding: .45rem .7rem;
  font: inherit; font-size: .92rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.part-filtres__champ input:focus-visible,
.part-filtres__champ select:focus-visible { border-color: var(--brand); }
.part-filtres__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.part-compte { margin: 1.1rem 0 0; font-size: .95rem; color: var(--text-soft); }
.part-compte strong { color: var(--text); font-size: 1.05rem; }

@media (max-width: 620px) {
  .part-filtres__champ--large { grid-column: span 1; }
}

/* =========================================================
   Pages Consommateurs et Professionnels
   ========================================================= */
.conso-points {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.conso-point {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.3rem 1.4rem;
}
.conso-point h3 { margin: 0 0 .45rem; font-size: 1.02rem; }
.conso-point p { margin: 0; color: var(--text-soft); line-height: 1.6; }

.conso-acces { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.conso-acces__carte {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.3rem;
  align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.4rem 1.5rem;
}
.conso-acces__num {
  position: absolute; top: -.8rem; left: 1.3rem;
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: 50%; background: var(--lp-mid, var(--brand)); color: #fff;
  font-size: .86rem; font-weight: 700;
}
.conso-acces__visuel { margin: 0; flex: none; }
.conso-acces__visuel img {
  width: 112px; height: auto; border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
}
.conso-acces__visuel--recherche {
  display: grid; place-items: center; width: 112px; height: 112px;
  border-radius: 14px; background: var(--surface-alt);
  border: 1px dashed var(--border-strong); color: var(--brand-text);
}
.conso-acces__carte h3 { margin: 0 0 .4rem; font-size: 1.02rem; }
.conso-acces__carte p { margin: 0; color: var(--text-soft); line-height: 1.6; }

/* Le coût à la charge du professionnel n'est pas un avertissement mais une
   règle du jeu, et c'est elle qui garantit l'indépendance des résultats. Le
   orange d'alerte, ici, donnait au bloc l'air d'une mise en garde : on garde
   la mise en avant, on change le registre. */
.pro-cout {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 5px solid var(--brand); border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem;
}
.pro-cout__marque { color: var(--brand-text); flex: none; line-height: 0; margin-top: .2rem; }
.pro-cout h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.pro-cout p { margin: 0; color: var(--text-soft); line-height: 1.65; max-width: 72ch; }

.pro-exemples { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pro-exemple {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .9rem 1.1rem;
  color: var(--text-soft); line-height: 1.6;
}
.pro-exemple__puce { color: var(--ok); line-height: 0; margin-top: .25rem; }

@media (max-width: 620px) {
  .conso-acces__carte, .pro-cout { grid-template-columns: 1fr; }
  .conso-acces__visuel img, .conso-acces__visuel--recherche { width: 92px; height: auto; }
  .conso-acces__visuel--recherche { height: 92px; }
}

/* =========================================================
   En-tête : navigation et aiguillage de parcours
   ========================================================= */
.site-header__droite {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}

/* « Vous êtes » + les deux portes d'entrée. Ce n'est pas une rubrique du
   site mais une question posée au visiteur : le traitement visuel les
   sépare donc nettement de la navigation. */
.site-audience {
  display: flex; align-items: center; gap: .45rem;
  padding-left: 1.5rem; border-left: 1px solid var(--border);
}
.site-audience__intro {
  font-size: .8rem; color: var(--text-faint); white-space: nowrap;
  margin-right: .1rem;
}
.site-audience__btn {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: .3rem .75rem; border-radius: 999px;
  font-size: .84rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  color: var(--brand-text); text-decoration: none;
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  transition: background-color .15s, border-color .15s, color .15s;
}
.site-audience__btn:hover {
  background: var(--brand); border-color: var(--brand); color: #fff;
  text-decoration: none;
}
.site-audience__btn.is-active {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

/* Sur mobile, la navigation s'efface mais l'aiguillage reste : c'est la
   porte d'entrée du site, pas un supplément. Il passe sous la marque. */
@media (max-width: 720px) {
  .site-header__inner { gap: .65rem; }
  .site-header__droite { gap: .8rem; width: 100%; }
  .site-audience {
    padding-left: 0; border-left: 0; width: 100%;
    /* La marge basse est désormais portée par .site-header__inner : la
       garder ici la doublerait, pour 11 px d'en-tête en plus sans raison. */
    flex-wrap: wrap;
  }
}
@media (max-width: 420px) {
  .site-audience__intro { width: 100%; margin-bottom: .1rem; }
}

/* =========================================================
   Menu déroulant sur petit écran

   En dessous de 720 px, l'en-tête collant occupait 156 px de haut — plus
   d'un cinquième de l'écran d'un téléphone, en permanence. Les rubriques
   passent donc sous un bouton, et l'aiguillage « Vous êtes » reste
   visible : c'est la porte d'entrée du site, elle ne se range pas.

   Le bouton n'existe que lorsque la classe `js` est posée sur <html>.
   Sans JavaScript, il reste masqué et la navigation s'affiche dépliée —
   personne ne se retrouve devant un bouton inerte.
   ========================================================= */
.site-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  padding: 0; border-radius: var(--radius);
  background: transparent; border: 1px solid var(--border);
  color: var(--text-soft); cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.site-burger:hover { background: var(--surface-alt); color: var(--text); }
.site-burger[aria-expanded="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.site-burger__fermer { display: none; line-height: 0; }
.site-burger__ouvrir { line-height: 0; }
.site-burger[aria-expanded="true"] .site-burger__fermer { display: block; }
.site-burger[aria-expanded="true"] .site-burger__ouvrir { display: none; }

@media (max-width: 720px) {
  /* L'ordre visuel : marque, bouton, puis l'aiguillage en dessous. */
  .site-header__inner {
    flex-wrap: wrap;
    /* Le min-height de 60 px suffisait à aérer tant que tout tenait sur une
       ligne ; dès que le contenu passe à la ligne il le dépasse, et la
       marque comme le bouton se retrouvent collés au bord supérieur —
       mesuré à 0 px. On pose donc une marge explicite.

       env() ajoute la zone réservée aux encoches et barres système. La
       valeur vaut zéro sur un écran ordinaire, et la page déclarant
       viewport-fit=cover, sans elle le contenu peut glisser sous
       l'interface du téléphone. Le second argument garde la règle valide
       sur les navigateurs qui ignorent env(). */
    padding-top: calc(.8rem + env(safe-area-inset-top, 0px));
    padding-bottom: .55rem;
  }
  .site-header__droite {
    display: contents;
  }
  .js .site-burger { display: inline-flex; order: 1; }

  .js .site-nav {
    display: none;
    order: 3; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0 0 .25rem;
    border-top: 1px solid var(--border);
  }
  .js .site-nav[data-ouvert] { display: flex; }
  /* Sans JavaScript, la navigation reste en ligne comme avant. */
  .site-nav { order: 3; width: 100%; }

  .js .site-nav a {
    display: flex; align-items: center; min-height: 48px;
    padding: .25rem .25rem; font-size: .95rem;
    border-bottom: 1px solid var(--border);
  }
  .js .site-nav a:last-child { border-bottom: 0; }
  .js .site-nav a[aria-current="page"] { color: var(--brand-text); font-weight: 650; }

  .site-audience { order: 2; }
}

/* Au-delà du point de rupture, le bouton n'a pas lieu d'être et la
   navigation reprend sa disposition en ligne, dépliée quoi qu'il arrive. */
@media (min-width: 721px) {
  .site-burger { display: none !important; }
  .site-nav { display: flex !important; }
}

/* =========================================================
   Histogramme mensuel des consultations (back-office)

   Variante légendée de .spark : ici le lecteur doit pouvoir lire une
   valeur et un mois sans survol, parce que la page sert à être
   comparée d'un mois sur l'autre, pas seulement regardée.
   ========================================================= */
.histo {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 4px; align-items: end; min-height: 160px; margin-top: .5rem;
}
.histo__col {
  display: grid; grid-template-rows: auto 1fr auto; gap: .3rem;
  align-items: end; justify-items: center; height: 100%; min-width: 0;
}
.histo__valeur {
  font-size: .72rem; font-variant-numeric: tabular-nums;
  /* --text-faint tombe à 3,4:1 en thème clair sur ce fond : sous le seuil
     WCAG AA pour du petit texte. Des chiffres qu'on doit deviner ne servent
     à rien, autant les rendre lisibles. */
  color: var(--text-soft); line-height: 1;
}
.histo__bar {
  width: 100%; max-width: 38px; align-self: end;
  background: var(--brand); border-radius: 3px 3px 0 0; min-height: 2px;
}
.histo__mois {
  font-size: .68rem; letter-spacing: .04em; color: var(--text-soft);
  line-height: 1; white-space: nowrap;
}

@media (max-width: 720px) {
  .histo { gap: 2px; min-height: 130px; }
  .histo__valeur { font-size: .64rem; }
  .histo__mois { font-size: .6rem; }
}

/* =========================================================
   Pages de texte long (mentions légales, confidentialité)

   Une colonne mesurée : au-delà d'environ 70 caractères par ligne,
   l'œil perd le début de la ligne suivante. Ces pages ne sont pas
   faites pour être belles mais pour être lues jusqu'au bout.
   ========================================================= */
.prose { max-width: 70ch; }
.prose h2 {
  margin: 2.2rem 0 .6rem; font-size: 1.1rem; line-height: 1.35;
  color: var(--text);
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 .9rem; color: var(--text-soft); line-height: 1.7; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--brand-text); }

/* =========================================================
   Texte enrichi des blocs éditables

   Le conteneur porte la classe de style du bloc (.lp-head__text,
   .mac-couleur__texte…) : taille, couleur et interligne descendent par
   héritage dans les paragraphes produits. Seules les marges sont à
   reprendre, sinon le `p { margin-bottom: 1em }` de base viendrait
   s'ajouter à la marge propre du bloc.
   ========================================================= */
.rich > :first-child { margin-top: 0; }
.rich > :last-child  { margin-bottom: 0; }
.rich > p { margin: 0 0 .9em; }
.rich > ul, .rich > ol { margin: .4em 0 .9em; padding-left: 1.3em; }
.rich > ul { list-style: disc; }
.rich > ol { list-style: decimal; }
.rich li { margin-bottom: .35em; }
.rich li::marker { color: var(--brand-text); }
.rich strong { font-weight: 650; color: var(--text); }
.rich em { font-style: italic; }
.rich a { color: var(--brand-text); text-decoration: underline; }

/* Mise en avant d'une phrase : un cran au-dessus du texte courant, sans
   usurper la taille d'un titre — em, donc relatif au bloc qui l'héberge. */
.rich-lead {
  font-size: 1.12em; font-weight: 600; line-height: 1.45;
  color: var(--text);
}

/* Sur fond sombre, le texte du bloc est déjà clair : le gras et la mise en
   avant doivent suivre, sinon ils deviennent plus sombres que leur
   entourage et ressortent en creux. */
.lp-hero .rich strong, .lp-hero .rich .rich-lead,
.lp-section--dark .rich strong, .lp-section--dark .rich .rich-lead {
  color: #fff;
}
.lp-hero .rich a, .lp-section--dark .rich a { color: #fff; }
.lp-hero .rich li::marker, .lp-section--dark .rich li::marker {
  color: rgba(255, 255, 255, .7);
}

/* Dans les pages de texte long, les paragraphes produits reprennent la
   mesure et la couleur de .prose. */
.prose .rich > p, .prose > p { margin: 0 0 .9rem; }

/* =========================================================
   Mémo de mise en forme, back-office
   ========================================================= */
.aide {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 1.5rem;
}
.aide > summary {
  cursor: pointer; padding: .8rem 1.1rem; font-weight: 600; font-size: .92rem;
  color: var(--brand-text); list-style-position: inside;
}
.aide > summary:hover { background: var(--surface-alt); }
.aide__corps { padding: 0 1.1rem 1.1rem; }
.aide__table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: .6rem 0 .9rem; }
.aide__table th {
  text-align: left; font-weight: 600; color: var(--text);
  padding: .4rem .8rem .4rem 0; white-space: nowrap;
  vertical-align: top; border-bottom: 1px solid var(--border);
}
.aide__table td {
  padding: .4rem 0; color: var(--text-soft); border-bottom: 1px solid var(--border);
}
.aide__table tr:last-child th, .aide__table tr:last-child td { border-bottom: 0; }
.aide__table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: 4px; padding: .1rem .35rem;
  color: var(--text);
}

@media (max-width: 560px) {
  .aide__table th { white-space: normal; }
  .aide__table, .aide__table tbody, .aide__table tr { display: block; }
  .aide__table th { display: block; border-bottom: 0; padding-bottom: .1rem; }
  .aide__table td { display: block; padding-top: 0; }
}

/* ======================================================================
   Accueil — introduction, points et volets
   ====================================================================== */

/* L'introduction se lit d'une traite : une seule colonne, un corps plus
   grand que le texte courant, et rien autour qui détourne l'œil. */
.lp-intro__text {
  max-width: 46rem;
  font-size: clamp(1.02rem, .98rem + .3vw, 1.16rem);
  line-height: 1.68;
  color: var(--text-soft);
}
.lp-intro__text p { margin: 0 0 1rem; }
.lp-intro__text p:last-child { margin-bottom: 0; }
.lp-intro__text .rich-lead { color: var(--text); }

/* Trois points, chacun introduit par une coche. La puce est posée en
   dehors du flux du titre pour que les lignes de texte restent alignées
   quelle que soit la longueur du titre. */
.lp-points {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.6rem 1.9rem;
}
@media (min-width: 720px) { .lp-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lp-point { position: relative; padding-left: 1.9rem; }
.lp-point__mark {
  position: absolute; left: 0; top: .08rem;
  display: inline-flex; color: var(--brand);
}
.lp-point__title {
  font-size: 1.02rem; margin: 0 0 .4rem;
  letter-spacing: -.012em; line-height: 1.3;
}
.lp-point__text, .lp-point__text p {
  font-size: .93rem; line-height: 1.6; color: var(--text-soft); margin: 0;
}

/* Les trois volets du programme. Carte bordée plutôt que fond coloré :
   la section voisine porte déjà un aplat, deux surfaces teintées de suite
   rendraient la page bruyante. */
.lp-offres { display: grid; gap: 1.1rem; }
@media (min-width: 760px) { .lp-offres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lp-offre {
  display: flex; flex-direction: column;
  padding: 1.5rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.lp-offre__title {
  font-size: 1.08rem; margin: 0 0 .35rem; letter-spacing: -.014em;
}
.lp-offre__accroche {
  font-size: .92rem; line-height: 1.45; margin: 0 0 .75rem;
  color: var(--brand); font-weight: 600;
}
.lp-offre__text, .lp-offre__text p {
  font-size: .91rem; line-height: 1.62; color: var(--text-soft); margin: 0;
}
.lp-offres__actions { margin-top: 1.7rem; }

/* Colonnes étroites : la justification y creuse des rivières blanches.
   Même raison que pour les blocs listés plus haut dans ce fichier. */
.lp-point__text p, .lp-point p,
.lp-offre__text p, .lp-offre__accroche {
  text-align: left;
}

/* ======================================================================
   Administration — sélecteur de page de contenu
   ====================================================================== */

/* Les sept pages éditables restent sous la main pendant la saisie. Sur
   écran étroit la rangée défile horizontalement plutôt que de se replier
   sur quatre lignes, qui repousseraient le formulaire hors de vue. */
.content-tabs {
  display: flex; gap: .35rem; margin: 0 0 1.25rem;
  padding-bottom: .4rem; overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}
.content-tabs__item {
  flex: 0 0 auto; padding: .42rem .8rem;
  font-size: .85rem; font-weight: 550; line-height: 1.2;
  color: var(--text-soft); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: 999px;
}
.content-tabs__item:hover {
  color: var(--text); background: var(--surface-alt);
  border-color: var(--border); text-decoration: none;
}
.content-tabs__item.is-active {
  color: #fff; background: var(--brand); border-color: var(--brand);
}
.content-tabs__item.is-active:hover { color: #fff; background: var(--brand); }

/* ======================================================================
   Page consommateurs — volets d'information
   ====================================================================== */

/* Les trois volets portent désormais un h2 et un symbole. Le sélecteur
   d'origine ne visait que h3 : sans cette ligne, le titre reprenait la
   taille par défaut d'un h2 et écrasait la carte. */
.conso-point h2 {
  margin: 0 0 .45rem; font-size: 1.05rem;
  letter-spacing: -.012em; line-height: 1.32;
}
.conso-point__mark {
  display: inline-flex; margin-bottom: .7rem;
  padding: .45rem; border-radius: 10px;
  background: var(--surface-alt); color: var(--brand);
}
.conso-point .rich p { margin: 0 0 .7rem; }
.conso-point .rich p:last-child { margin-bottom: 0; }

/* Bloc de clôture en fond sombre.

   Par défaut le texte est centré comme son titre. La justification, héritée
   de la règle générale sur les paragraphes, n'a rien à faire dans une
   colonne centrée : elle y creuse des rivières blanches.

   Le fer à gauche n'est bon que pour un bloc assez long pour remplir ses
   lignes — trois paragraphes, par exemple. Appliqué à une phrase unique, il
   la colle au bord gauche d'une colonne centrée, soit 137 px à gauche du
   titre sur un écran de 1280 px. D'où le modificateur, posé au cas par cas
   plutôt qu'une règle valable pour tous les blocs sombres. */
.lp-section--dark .lp-head--center .lp-head__text { max-width: 44rem; }
.lp-section--dark .lp-head--center .lp-head__text p { text-align: center; }
.lp-section--dark .lp-head--center .lp-head__text p + p { margin-top: .9rem; }

/* Le modificateur doit peser autant que la règle qu'il annule : écrit
   seul, il valait (0,1,1) contre (0,3,1) et restait sans effet — la classe
   était bien posée dans le gabarit, le texte restait centré. On le décline
   donc aussi dans la portée exacte de la règle par défaut. */
.lp-head__text--fer-gauche p { text-align: left; }
.lp-section--dark .lp-head--center .lp-head__text--fer-gauche p { text-align: left; }

/* Le paragraphe de réserve qui suit la liste d'exemples : la marge de .9rem
   de .mac-reserve colle au bloc précédent quand celui-ci est une suite de
   cartes. On rétablit l'écart qu'avait le gabarit avant que ce texte ne
   devienne éditable. Le sélecteur vise aussi le cas où la liste est vide,
   la réserve devenant alors le premier élément après le chapô. */
.pro-exemples + .mac-reserve { margin-top: 1.4rem; }
.mac-reserve p { margin: 0 0 .6rem; }
.mac-reserve p:last-child { margin-bottom: 0; }

/* Paragraphe de conclusion placé sous une grille de blocs : il reprend la
   largeur de lecture du chapô de section plutôt que celle de la grille,
   sans quoi il s'étirerait sur toute la page. */
.lp-apres {
  max-width: 52rem; margin-top: 1.6rem;
  color: var(--text-soft); line-height: 1.65;
}
.lp-apres p { margin: 0 0 .8rem; }
.lp-apres p:last-child { margin-bottom: 0; }

/* Les blocs d'argument contiennent désormais du texte mis en forme, donc
   des <p> et non un paragraphe unique : on rétablit les marges internes. */
.conso-point .rich p { margin: 0 0 .7rem; }
.conso-point .rich p:last-child { margin-bottom: 0; }
.lp-step__text.rich p { margin: 0 0 .6rem; }
.lp-step__text.rich p:last-child { margin-bottom: 0; }

/* ======================================================================
   Statut de relation et adresse
   ====================================================================== */

/* Une pastille, pas un bandeau : le statut est une information de contexte
   et ne doit pas concurrencer le nom de la société. */
.statut {
  display: inline-block; padding: .16rem .55rem;
  border-radius: 999px; border: 1px solid transparent;
  font-size: .74rem; font-weight: 600; line-height: 1.35;
  white-space: nowrap;
}
.statut--adherent {
  background: color-mix(in srgb, var(--ok, #0F766E) 12%, transparent);
  border-color: color-mix(in srgb, var(--ok, #0F766E) 32%, transparent);
  color: var(--brand-text, #0B5C56);
}
.statut--attente {
  background: var(--surface-alt); border-color: var(--border-strong, var(--border));
  color: var(--text-soft);
}
.statut--neutre {
  background: transparent; border-color: var(--border);
  color: var(--text-faint, var(--text-soft));
}

.company-tile__adresse {
  display: block; font-size: .78rem; line-height: 1.45;
  color: var(--text-faint, var(--text-soft));
}

.hero__adresse {
  display: flex; align-items: center; gap: .35rem;
  margin: .35rem 0 0; font-size: .88rem; opacity: .92;
}
.hero__statut { margin: .6rem 0 0; }

/* Dans l'administration, la pastille s'aligne sur la hauteur de ligne du
   tableau sans l'élargir. */
.table .statut { font-size: .72rem; }

/* Choix de rôle : une étiquette cliquable par ligne, le bouton radio aligné
   sur la première ligne de texte et non centré sur le bloc. */
.choix {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem;
  align-items: start; padding: .75rem .9rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
}
.choix + .choix { margin-top: .5rem; }
.choix:hover { border-color: var(--border-strong, var(--brand)); }
.choix input { margin-top: .2rem; }
.choix:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}

/* ======================================================================
   La carte d'un établissement
   ----------------------------------------------------------------------
   Pensée pour un téléphone tenu à une main, au-dessus d'une table : une
   seule colonne, des photos qui n'écrasent pas le texte, et les allergènes
   lisibles sans avoir à déplier quoi que ce soit — quelqu'un qui les cherche
   a une bonne raison de les chercher.
   ====================================================================== */

.carte-hero {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  padding: 2.2rem 0 1.8rem;
  text-align: center;
}
.carte-hero__inner { display: grid; justify-items: center; gap: .5rem; }
.carte-hero h1 { margin: 0; font-size: clamp(1.5rem, 4.2vw, 2rem); }
.carte-hero__sub { margin: 0; color: var(--text-soft); font-weight: 600; }
.carte-hero__adresse { margin: 0; color: var(--text-soft); font-size: .9rem; }
.carte-hero__adresse svg { vertical-align: -2px; }
.carte-hero__logo {
  width: 68px; height: 68px; object-fit: contain;
  border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); padding: .35rem;
}
.carte-hero__logo--placeholder {
  display: grid; place-items: center;
  font-size: 1.7rem; font-weight: 700; color: var(--brand-text);
}

/* Barre de rubriques : collante, pour rester accessible en faisant défiler
   une longue carte. Défilement horizontal plutôt que retour à la ligne, afin
   que la hauteur ne varie pas d'une carte à l'autre. */
.carte-nav {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.carte-nav__inner {
  display: flex; gap: .4rem; overflow-x: auto;
  padding: .6rem 0; scrollbar-width: thin;
}
.carte-nav a {
  flex: 0 0 auto; padding: .35rem .8rem; border-radius: 999px;
  background: var(--surface-alt); color: var(--text-soft);
  font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.carte-nav a:hover, .carte-nav a:focus-visible { color: var(--brand-text); }

.carte-rubrique { padding: 1.8rem 0 .4rem; }
.carte-rubrique__titre {
  margin: 0 0 1rem; font-size: 1.25rem;
  padding-bottom: .5rem; border-bottom: 2px solid var(--border);
}

.carte-plats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.carte-plat {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .9rem;
}
.carte-plat__photo {
  width: 92px; height: 92px; flex: 0 0 auto;
  object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-alt);
}
.carte-plat__corps { min-width: 0; flex: 1 1 auto; }

.carte-plat__entete {
  display: flex; gap: .8rem; align-items: baseline; justify-content: space-between;
}
.carte-plat__nom { margin: 0; font-size: 1.02rem; }
.carte-plat__prix { flex: 0 0 auto; font-weight: 700; color: var(--brand-text); }

.carte-plat__texte { margin: .35rem 0 0; color: var(--text-soft); line-height: 1.55; }
.carte-plat__ingredients {
  margin: .45rem 0 0; font-size: .86rem; color: var(--text-soft); line-height: 1.5;
}
.carte-plat__intitule {
  display: inline-block; margin-right: .35rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: .72rem; color: var(--text-faint);
}

.carte-plat__mentions { margin: .55rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.carte-plat__allergenes { align-items: center; margin-top: .4rem; }
.carte-plat__allergenes .carte-plat__intitule { margin-right: .1rem; }
.pastille {
  display: inline-flex; align-items: center;
  padding: .18rem .55rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; line-height: 1.5;
  background: var(--surface-alt); color: var(--text-soft);
}
/* Les allergènes se distinguent des mentions marketing : ce ne sont pas des
   arguments de vente, et les confondre serait une faute de lecture. */
.pastille--allergene {
  background: var(--warn-bg); color: var(--warn);
}

.carte-plat__analyse {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .6rem; padding: .35rem .7rem;
  border: 1px solid var(--brand); border-radius: 999px;
  color: var(--brand-text); font-size: .83rem; font-weight: 600; text-decoration: none;
}
.carte-plat__analyse:hover, .carte-plat__analyse:focus-visible {
  background: var(--brand); color: #fff;
}
.carte-plat__analyse svg { flex: 0 0 auto; }

/* --- Valeurs nutritionnelles, repliées sous l'article ------------------
   Un <details> natif : pas de JavaScript, donc il s'ouvre même si le script
   ne charge pas, et la recherche du navigateur y trouve son contenu.
   Volontairement sobre : c'est une annexe, elle ne doit pas peser plus que
   le nom du plat et son prix. */
.plat-nutri {
  margin-top: .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.plat-nutri__tete {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem; cursor: pointer; list-style: none;
  font-size: .83rem; font-weight: 600; color: var(--brand-text);
}
.plat-nutri__tete::-webkit-details-marker { display: none; }
.plat-nutri__tete:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.plat-nutri__titre { display: inline-flex; align-items: center; gap: .4rem; }
.plat-nutri__titre svg { flex: 0 0 auto; }
.plat-nutri__compte {
  margin-left: auto; font-weight: 500; font-size: .76rem; color: var(--text-faint);
}
.plat-nutri__chevron { display: inline-flex; color: var(--text-faint); transition: transform .2s; }
.plat-nutri[open] .plat-nutri__chevron { transform: rotate(180deg); }

.plat-nutri__corps {
  padding: .1rem .7rem .7rem;
  border-top: 1px dashed var(--border);
}
.plat-nutri__source {
  margin: .55rem 0 0; font-size: .78rem; color: var(--text-faint); line-height: 1.45;
}
.plat-nutri__famille {
  margin: .75rem 0 .3rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint);
}
.plat-nutri__liste { list-style: none; margin: 0; padding: 0; }
/* Deux colonnes, et non un enchaînement souple : le nom s'étale sur
   plusieurs lignes si besoin pendant que la valeur et le pourcentage
   restent alignés à droite, l'un sous l'autre. Un nom long ne pousse donc
   jamais le chiffre à la ligne, et l'œil descend une colonne de nombres au
   lieu de les chercher. */
.plat-nutri__liste li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 .75rem; align-items: baseline;
  padding: .35rem 0; border-bottom: 1px solid var(--border);
  font-size: .84rem; line-height: 1.4;
}
.plat-nutri__liste li:last-child { border-bottom: 0; }
.plat-nutri__nom {
  grid-column: 1; grid-row: 1 / span 2; min-width: 0; color: var(--text-soft);
}
.plat-nutri__valeur {
  grid-column: 2; grid-row: 1; text-align: right;
  font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.plat-nutri__ajr {
  grid-column: 2; grid-row: 2; text-align: right;
  font-size: .76rem; color: var(--text-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.plat-nutri__note {
  margin: .6rem 0 0; font-size: .74rem; color: var(--text-faint); line-height: 1.45;
}
.plat-nutri__lien {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem;
  font-size: .83rem; font-weight: 600; color: var(--brand-text); text-decoration: none;
}
.plat-nutri__lien:hover, .plat-nutri__lien:focus-visible { text-decoration: underline; }

.carte-vide { padding: 2.5rem 0; text-align: center; }
.carte-pied { padding: 1.8rem 0 2.6rem; }
.hero__carte { margin: 1rem 0 0; }

@media (max-width: 520px) {
  .carte-plat { gap: .75rem; padding: .75rem; }
  .carte-plat__photo { width: 72px; height: 72px; }
  .carte-plat__entete { flex-wrap: wrap; gap: .25rem; }
}

/* --- Côté administration --------------------------------------------- */
.allergenes-grille {
  display: grid; gap: .4rem .9rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.allergene-case { display: flex; align-items: center; gap: .45rem; font-size: .92rem; }
.badge--allergene { background: var(--warn-bg); color: var(--warn); }

.rubrique-ligne {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  min-width: 0; margin: 0;
}
.rubrique-ligne input[type="text"] { flex: 1 1 10rem; min-width: 0; }
/* `input[type="number"]` l'emporte sur une simple classe : sans remonter la
   spécificité ici, la règle générale `width: 100%` des champs s'applique, le
   champ réclame toute la largeur, et chaque rubrique occupe trois lignes au
   lieu d'une. Douze rubriques faisaient alors une page entière à dérouler. */
.rubrique-ligne input.rubrique-ligne__ordre { flex: 0 0 5rem; width: 5rem; }
.rubrique-ligne .muted { flex: 0 0 auto; white-space: nowrap; }

/* Sur un écran large, la rubrique tient sur une seule ligne, bouton de
   suppression compris. En dessous, on laisse les deux formulaires
   s'empiler : les forcer côte à côte débordait de 71 px sur un téléphone,
   mesuré. */
@media (min-width: 760px) {
  .rubrique-cellule { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
  .rubrique-cellule .rubrique-ligne { flex: 1 1 22rem; }
}
.inline { display: inline; }
.d-block { display: block; }
.is-muted td { opacity: .6; }
.qr-apercu { margin: .6rem 0; }
.qr-apercu img { background: #fff; padding: .4rem; border-radius: var(--radius-sm); }
.apercu-image img { border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* Liste des sociétés : les filtres du back-office reprennent ceux de
   l'annuaire public.
   On met en avant les lignes du commercial plutôt que d'estomper les autres :
   il suit souvent une poignée de sociétés sur plusieurs dizaines, et griser
   le reste couvrirait la table entière de gris. Marquer le petit nombre se
   lit mieux que marquer le grand. */
.table-wrap .part-filtres { margin-bottom: .9rem; }
.table tr.is-mienne td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.table tr.is-lecture td.actions { color: var(--text-faint); }