/* DA 2027 (#364) : liste des commercialisateurs. Chargé seulement quand `da27` est actif (gabarit commercializer_list_da27.html). Propriétés logiques : même CSS en RTL. */
html.da27 .cm27 { padding-block: 24px var(--da-section); display: grid; gap: clamp(28px, 4vw, 48px); }
html.da27 .cm27 > section, html.da27 .cm27 > nav, html.da27 .cm27 > aside { min-width: 0; }

/* Chiffres clés */
html.da27 .cm27-kpi__n { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--c-brand); }
html.da27 .cm27-kpi__l { display: block; margin-block-start: 6px; font-size: .875rem; color: var(--c-text-2); }
html.da27 .cm27-kpi .da-chiffres { margin: 0; padding: 0; list-style: none; }
html.da27 .cm27-kpi .da-chiffres > li { padding: 16px 18px; }
@media (max-width: 639px) { html.da27 .cm27-kpi .da-chiffres { display: grid; grid-template-columns: 1fr 1fr; } html.da27 .cm27-kpi__l { font-size: .8125rem; } }

/* Barre de recherche et filtres */
html.da27 .cm27-barre { display: grid; gap: 14px; padding: 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); margin-block-end: 24px; }
html.da27 .cm27-barre__q { display: flex; gap: 10px; }
html.da27 .cm27-barre__q .ui-search { flex: 1; min-width: 0; }
html.da27 .cm27-barre .ui-input { border-radius: var(--r-full); }
html.da27 .cm27-barre__f { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
html.da27 .cm27-champ { display: grid; gap: 4px; min-width: 0; }
html.da27 .cm27-champ label { font-family: var(--font-display); font-weight: 700; font-size: .75rem; color: var(--c-text-2); padding-inline: 14px; }
html.da27 .cm27-champ select { width: 100%; text-overflow: ellipsis; }
html.da27 .cm27-barre__n { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
html.da27 .cm27-compte { margin: 0; font-size: .9375rem; color: var(--c-text-2); }
@media (min-width: 640px) { html.da27 .cm27-barre__f { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { html.da27 .cm27-barre { padding: 16px 20px; } html.da27 .cm27-barre__f { grid-template-columns: repeat(5, 1fr); } }

/* Grille de cartes homogènes */
html.da27 .cm27-grille { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 640px) { html.da27 .cm27-grille { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1024px) { html.da27 .cm27-grille { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (min-width: 1360px) { html.da27 .cm27-grille { grid-template-columns: repeat(4, 1fr); } }
html.da27 .cm27-carte { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; transition: transform .2s, box-shadow .2s; }
html.da27 .cm27-carte:hover, html.da27 .cm27-carte:focus-within { transform: translateY(-3px); box-shadow: var(--sh-2); }
@media (prefers-reduced-motion: reduce) { html.da27 .cm27-carte { transition: none; } html.da27 .cm27-carte:hover { transform: none; } }
html.da27 .cm27-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; height: 112px; background: var(--brand-100); }
html.da27 .cm27-vue { display: grid; place-items: center; min-width: 0; overflow: hidden; background: linear-gradient(135deg, var(--brand-100), var(--brand-200)); color: var(--c-brand); }
html.da27 .cm27-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.da27 .cm27-vue--vide .ui-icon { opacity: .55; }
html.da27 .cm27-logo { position: absolute; inset-block-start: 80px; inset-inline-start: 16px; width: 64px; height: 64px; display: grid; place-items: center; padding: 8px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--sh-1); z-index: 1; }
html.da27 .cm27-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
html.da27 .cm27-logo--sombre { background: var(--c-nuit); }
html.da27 .cm27-logo--mono { background: linear-gradient(135deg, var(--c-brand), var(--brand-700)); border-color: transparent; }
html.da27 .cm27-logo--mono span { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: .02em; color: #fff; }
html.da27 .cm27-corps { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 44px 18px 16px; }
html.da27 .cm27-type { margin: 0; align-self: flex-start; padding: 2px 10px; border-radius: var(--r-full); background: var(--brand-100); color: var(--c-brand-soft-ink); font-size: .75rem; font-weight: 600; }
html.da27 .cm27-type:empty { display: none; }
html.da27 .cm27-nom { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem; line-height: 1.25; min-height: 2.5em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.da27 .cm27-nom a { color: var(--c-text); text-decoration: none; }
html.da27 .cm27-nom a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
html.da27 .cm27-nom a:hover { color: var(--c-brand); }
html.da27 .cm27-chiffres { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; font-size: .875rem; color: var(--c-text-2); }
html.da27 .cm27-chiffres a { position: relative; z-index: 2; color: inherit; text-decoration: none; }
html.da27 .cm27-chiffres strong { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; color: var(--c-brand); font-variant-numeric: tabular-nums; }
html.da27 .cm27-chiffres span strong { color: var(--c-text); font-size: 1.125rem; }
html.da27 .cm27-puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; align-content: flex-start; }
html.da27 .cm27-puces li { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding-inline: 10px; border-radius: var(--r-full); background: var(--brand-50); border: 1px solid var(--brand-100); font-size: .75rem; color: var(--c-text); }
html.da27 .cm27-puces .ui-icon { color: var(--c-brand); }
html.da27 .cm27-offres { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; min-height: 3 * 48px; flex: 1; }
html.da27 .cm27-offres li { border-block-start: 1px solid var(--c-border); }
html.da27 .cm27-offres a { position: relative; z-index: 2; display: grid; padding-block: 7px; color: inherit; text-decoration: none; }
html.da27 .cm27-offres__t { font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.da27 .cm27-offres a:hover .cm27-offres__t { color: var(--c-brand); }
html.da27 .cm27-offres__m { font-size: .8125rem; color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.da27 .cm27-lieu { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: .8125rem; color: var(--c-text-2); }
html.da27 .cm27-lieu .ui-icon { flex: none; margin-block-start: 2px; color: var(--c-brand); }
html.da27 .cm27-contact { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .8125rem; }
html.da27 .cm27-contact a { display: inline-flex; gap: 6px; align-items: center; color: var(--c-action); overflow-wrap: anywhere; }
html.da27 .cm27-maj { margin: 0; font-size: .75rem; color: var(--c-text-2); }
html.da27 .cm27-vide { grid-column: 1 / -1; padding: 40px 20px; text-align: center; background: var(--c-surface); border: 1px dashed var(--c-border); border-radius: var(--r-lg); }
html.da27 .cm27-plus { display: flex; justify-content: center; margin-block-start: 28px; }
html.da27 .cm27-plus:empty { display: none; }
html.da27 .cm27-resultats.is-loading { opacity: .55; transition: opacity .15s; }
html.da27 .cm27-connexion { margin-block-start: 24px; border-radius: var(--r-lg); }
@media (max-width: 639px) {
  html.da27 .cm27-media { height: 84px; }
  html.da27 .cm27-logo { inset-block-start: 56px; width: 56px; height: 56px; }
  html.da27 .cm27-corps { padding: 40px 14px 14px; gap: 8px; }
  html.da27 .cm27-offres { min-height: 2 * 48px; }
  html.da27 .cm27-offres li:nth-child(n+3) { display: none; }
  html.da27 .cm27-nom { min-height: 0; -webkit-line-clamp: 1; }
}

/* Graphiques */
html.da27 .cm27-graphes { display: grid; gap: 20px; }
html.da27 .cm27-graphes__grille { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { html.da27 .cm27-graphes__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
html.da27 .cm27-bloc { margin: 0; padding: 20px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); min-width: 0; }
html.da27 .cm27-anneau svg { display: block; width: 100%; max-width: 220px; margin: 8px auto; }
html.da27 .cm27-anneau circle { fill: none; stroke-width: 4.2; }
html.da27 .cm27-anneau .cc-anneau__fond { stroke: var(--c-border); }
html.da27 .cm27-anneau text { text-anchor: middle; fill: var(--c-text); font-family: var(--font-display); }
html.da27 .cm27-anneau .cc-anneau__n { font-size: 7px; font-weight: 800; }
html.da27 .cm27-anneau .cc-anneau__u { font-size: 2.6px; fill: var(--c-text-2); }
html.da27 .cm27 .cc-seg--bureaux { stroke: var(--c-brand); background: var(--c-brand); }
html.da27 .cm27 .cc-seg--activites { stroke: var(--c-multi-2); background: var(--c-multi-2); }
html.da27 .cm27 .cc-seg--entrepots { stroke: var(--c-accent); background: var(--c-accent); }
html.da27 .cm27 .cc-seg--commerces { stroke: var(--c-multi-3); background: var(--c-multi-3); }
html.da27 .cm27 .cc-seg--terrains { stroke: var(--c-multi-5); background: var(--c-multi-5); }
html.da27 .cm27 .cc-seg--autres { stroke: var(--c-text-2); background: var(--c-text-2); }
html.da27 .cm27 .cc-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-inline-end: 8px; vertical-align: -1px; }
html.da27 .cm27-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .875rem; }
html.da27 .cm27-note { margin: 8px 0 0; font-size: .8125rem; color: var(--c-text-2); }
html.da27 .cm27-barres ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
html.da27 .cm27-barres li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: .875rem; align-items: baseline; }
html.da27 .cm27-barres a { color: var(--c-text); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.da27 .cm27-barres a:hover { color: var(--c-brand); }
html.da27 .cm27-barre-v { grid-column: 1 / -1; grid-row: 2; height: 8px; border-radius: var(--r-full); background: var(--brand-100); position: relative; overflow: hidden; }
html.da27 .cm27-barre-v::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); background: var(--c-brand); border-radius: inherit; }
html.da27 .cm27-barres strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Carte, collectivités, appels */
html.da27 .cm27-agences { display: grid; gap: 12px; }
html.da27 .cm27-agences > p { margin: 0; max-width: 70ch; }
html.da27 .cm27-collec { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { html.da27 .cm27-collec { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { html.da27 .cm27-collec { grid-template-columns: repeat(3, 1fr); } }
html.da27 .cm27-collec a { display: grid; gap: 4px; height: 100%; padding: 16px 18px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); color: var(--c-text); text-decoration: none; transition: box-shadow .2s, transform .2s; }
html.da27 .cm27-collec a:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
html.da27 .cm27-collec__n { font-family: var(--font-display); font-weight: 800; color: var(--c-brand); overflow-wrap: anywhere; }
html.da27 .cm27-collec__t { font-size: .8125rem; color: var(--c-text-2); }
html.da27 .cm27-collec strong { font-size: .875rem; }
html.da27 .cm27-rejoindre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--c-nuit), #2E465B); color: #fff; }
html.da27 .cm27-rejoindre p { margin: 0; max-width: 62ch; }
html.da27 .cm27-voir ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }