/* =====================================================================
   Refonte 2026 - chantier « argus » (piste 1 « Clarte »)
   Pages : /argus/ (formulaire), /argus/<departement>/ (hub,
   argus-dept-hub.php) et /argus/<secteur>/<departement>/ (page-argus.php :
   apercu gratuit + offre payante, ou rapport debloque).
   Charge apres base.css, en mode refonte et sur les pages Argus seulement
   (enfile par includes/refonte.php, retire ailleurs par
   includes/refonte-argus.php).

   page-argus.php garde son bloc <style> d'origine (mode normal) : les regles
   ci-dessous le surchargent par la specificite (prefixe html.cd26). Les
   rares !important ne battent que des attributs style des gabarits ou des
   !important de ce bloc d'origine.

   Mise en page : classes posees sur .argus-wrap par includes/refonte-argus.php
   - .cd-ar--accueil : presentation et formulaire a gauche, contenu du
                       rapport a droite ;
   - .cd-ar--offre   : apercu gratuit a gauche, offre 49 EUR a droite
                       (collante si l'ecran est assez haut) ;
   - .cd-ar--hub     : tableau des activites a gauche, contexte a droite ;
   - .cd-ar--rapport : rapport complet sur toute la largeur ;
   - .cd-ar--alerte  : une seule colonne.
   Colonne laterale a partir de 1100 px ; en dessous, une seule colonne dans
   l'ordre du HTML. Aucun chiffre ni texte n'est modifie.
   ===================================================================== */

/* ---------- Jetons : les variables --ar-* du gabarit suivent la charte ---------- */
html.cd26 .argus-wrap {
  --ar-encre: var(--cd-ink);
  --ar-encre-2: var(--cd-ink-2);
  --ar-carte: var(--cd-bg);
  --ar-framboise: var(--cd-prune);
  --ar-prune: var(--cd-prune-700);
  --ar-surface: var(--cd-prune-50);
  --ar-ligne: var(--cd-line);
  --ar-vert: var(--cd-ok);
  --ar-aside: 380px;   /* colonne laterale (offre, contexte) */
  --ar-gap: 40px;      /* entre la colonne principale et la colonne laterale */
  --ar-bloc-pad: 28px;
  /* #main (Avada) a deja 55 px en haut et 30 px sur les cotes : le contenu
     s'aligne sur l'en-tete (gouttieres --cd-gutter) par des marges
     negatives tant que .fusion-row n'atteint pas sa largeur maximale. */
  --ar-main-pad: 30px;
  box-sizing: border-box;
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  margin: 0 calc(var(--cd-gutter) - var(--ar-main-pad));
  padding: 0 0 40px;
  color: var(--cd-ink);
  font-size: 16px;
  line-height: 1.6;
}
html.cd26 .argus-wrap :is(h1, h2, h3) { color: var(--cd-ink); font-family: var(--cd-font); }
html.cd26 .argus-wrap :is(td, th, .argus-kpi, .argus-valeur, .argus-ctx-valeur, .argus-mult-valeur, .argus-borne, .argus-bornes-liste) { font-variant-numeric: tabular-nums; }
/* exposants (1er, 3e quartile) sans agrandir la ligne */
html.cd26 .argus-wrap sup { font-size: .68em; line-height: 0; vertical-align: .45em; }

/* Liens du texte courant : soulignes (la couleur seule ne suffit pas). */
html.cd26 .argus-wrap :is(p:not(.argus-nav-haut), li, .argus-flash) a:not([class]) {
  color: var(--cd-prune-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
html.cd26 .argus-wrap :is(p:not(.argus-nav-haut), li, .argus-flash) a:not([class]):hover { text-decoration-thickness: 2px; }

/* ---------- En-tete de page ---------- */
html.cd26 .argus-hero { margin: 0 0 28px; }
html.cd26 .argus-hero .argus-eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 12px;
  border-radius: var(--cd-r-pill);
  background-color: var(--cd-prune-50);
  color: var(--cd-prune-700);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Titres longs (« Prix de vente d'une boulangerie dans le Rhone (2026) ») :
   un cran sous l'echelle des H1 du site. */
html.cd26 .argus-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 1.3rem + 2vw, 2.75rem);   /* 32 -> 44 */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
}
/* Accueil : titre court, a l'echelle des H1 du site */
html.cd26 .cd-ar--accueil .argus-hero h1 { font-size: var(--cd-fs-h1); line-height: 1.08; }
html.cd26 .argus-hero p.chapo {
  max-width: 64ch;
  margin: 0;
  color: var(--cd-ink-2);
  font-size: var(--cd-fs-lead);
  line-height: 1.6;
}
html.cd26 .argus-hero p.chapo strong { color: var(--cd-ink); }

/* Sur-titres a l'interieur des blocs (« Exemples... », « Methode et limites ») */
html.cd26 .argus-eyebrow {
  margin: 0 0 10px;
  color: var(--cd-prune-700);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------- Formulaire secteur x departement ---------- */
html.cd26 .argus-form {
  margin: 0 0 28px;
  padding: 16px;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-r);
  background-color: #fff;
  box-shadow: var(--cd-sh-2);
}
/* .row recoit les marges negatives (-15 px) de la grille d'Avada */
html.cd26 .argus-form .row { gap: 12px; margin: 0; }
html.cd26 .argus-form .champ { flex: 1 1 220px; }
/* une colonne (rapport, alerte) : formulaire secondaire, largeur contenue */
html.cd26 :is(.cd-ar--rapport, .cd-ar--alerte) .argus-form { max-width: 920px; }
html.cd26 .argus-form label {
  margin: 0 0 6px 2px;
  color: var(--cd-ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
html.cd26 .argus-form select {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 40px 0 14px;
  border: 1px solid var(--cd-line-2);
  border-radius: var(--cd-r-sm);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5363' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  color: var(--cd-ink);
  font: 500 16px/1.2 var(--cd-font);
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
html.cd26 .argus-form select:hover { border-color: var(--cd-prune-200); }
html.cd26 .argus-form select:focus { border-color: var(--cd-prune); box-shadow: 0 0 0 3px var(--cd-prune-100); }
html.cd26 .argus-form button {
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--cd-r-sm);
  background-color: var(--cd-prune);
  box-shadow: 0 8px 18px -10px rgba(154, 56, 117, .7);
  color: #fff;
  font: 600 16px/1.2 var(--cd-font);
  transition: background-color .15s;
}
html.cd26 .argus-form button:hover,
html.cd26 .argus-form button:focus { background-color: var(--cd-prune-700); }

/* Liens « Toutes les ventes... · Tous les secteurs... » : puces ; le point
   median de separation (texte nu, element flexible anonyme) est masque par
   font-size: 0 ; ecart horizontal en marge des liens pour qu'il ne decale
   pas la puce renvoyee a la ligne. */
html.cd26 p.argus-nav-haut {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  max-width: none;
  font-size: 0;
  line-height: 0;
}

/* ---------- Puces de liens (maillage, exemples) ---------- */
html.cd26 :is(.argus-exemples, .argus-deps-liens) { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
html.cd26 :is(.argus-exemples, .argus-deps-liens) a,
html.cd26 p.argus-nav-haut a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--cd-line-2);
  border-radius: var(--cd-r-pill);
  background-color: #fff;
  color: var(--cd-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color .15s, background-color .15s, color .15s;
}
html.cd26 :is(.argus-exemples, .argus-deps-liens) a:hover,
html.cd26 p.argus-nav-haut a:hover {
  border-color: var(--cd-prune-200);
  background-color: var(--cd-prune-50);
  color: var(--cd-prune-700);
}
html.cd26 p.argus-nav-haut a { margin-right: 8px; color: var(--cd-prune-700); font-weight: 600; }
html.cd26 p.argus-nav-haut a::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A2A5E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 14px;
}
/* nombre de ventes dans la puce (masque en mobile par le bloc d'origine) */
html.cd26 :is(.argus-exemples, .argus-deps-liens) .argus-cp {
  display: inline;
  color: var(--cd-ink-3);
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- Blocs ---------- */
html.cd26 .argus-bloc {
  box-sizing: border-box;
  min-width: 0;
  margin: 0 0 20px;
  padding: var(--ar-bloc-pad);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-r);
  background-color: #fff;
  box-shadow: var(--cd-sh-1);
}
html.cd26 .argus-bloc h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
}
html.cd26 .argus-bloc h3 { font-weight: 700; letter-spacing: -.01em; }
html.cd26 .argus-wrap .argus-bloc > :last-child { margin-bottom: 0; }
html.cd26 .argus-bloc h2 + :is(.argus-deps-liens, .argus-ctx-grille) { margin-top: 16px; }
html.cd26 .argus-sous {
  max-width: 75ch;
  margin: 0 0 20px;
  color: var(--cd-ink-2);
  font-size: 15px;
  line-height: 1.6;
}

/* Chiffres cles (« Votre marche local en un coup d'oeil ») */
html.cd26 .argus-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
html.cd26 .argus-kpi {
  padding: 14px 16px;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-r-sm);
  background-color: var(--cd-bg-2);
}
html.cd26 .argus-kpi .n { color: var(--cd-ink); font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
html.cd26 .argus-kpi .n .u { color: var(--cd-ink); font-size: 16px; font-weight: 700; letter-spacing: 0; }
html.cd26 .argus-kpi .l { margin-top: 4px; color: var(--cd-ink-2); font-size: 13.5px; line-height: 1.4; }

/* ---------- Fourchette : valeur mediane et jauge ---------- */
html.cd26 .argus-valeur {
  color: var(--cd-prune);
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem);   /* 40 -> 52 */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
}
/* Montants masques de l'apercu : flou teinte plutot que pave gris. */
html.cd26 .argus-floute {
  padding: 0 .06em;
  border-radius: .2em;
  background-color: var(--cd-prune-50);
  color: transparent;
  text-shadow: 0 0 .32em rgba(154, 56, 117, .75);
  -webkit-user-select: none;
  user-select: none;
}
html.cd26 .argus-masque .argus-floute { letter-spacing: .02em; }
html.cd26 span.argus-masque { white-space: nowrap; }
/* Apercu : jauge decorative (reperes fixes 25/50/75 %, aucune donnee). */
html.cd26 .argus-valeur.argus-masque::after {
  content: "";
  display: block;
  height: 30px;
  margin: 22px 0 4px;
  background:
    linear-gradient(var(--cd-ink-2), var(--cd-ink-2)) 25% 50% / 4px 22px no-repeat,
    linear-gradient(var(--cd-prune-700), var(--cd-prune-700)) 50% 50% / 6px 30px no-repeat,
    linear-gradient(var(--cd-ink-2), var(--cd-ink-2)) 75% 50% / 4px 22px no-repeat,
    linear-gradient(90deg, #C77CA8, var(--cd-prune) 50%, #C77CA8) 50% 50% / 50% 10px no-repeat,
    linear-gradient(var(--cd-prune-100), var(--cd-prune-100)) 50% 50% / 100% 10px no-repeat;
}

/* Rapport : jauge p25 / mediane / p75 (limopro_argus_echelle_html). Les
   reperes traversent la piste ; libelles en clair dessous. */
html.cd26 .argus-echelle { margin: 30px 4px 4px; }
html.cd26 .argus-piste { height: 10px; border-radius: 5px; background-color: var(--cd-prune-100); }
html.cd26 .argus-fourchette { border-radius: 5px; background: linear-gradient(90deg, #C77CA8, var(--cd-prune) 50%, #C77CA8); }
html.cd26 .argus-bornes { min-height: 80px; margin-top: -16px; }
html.cd26 .argus-borne .tiret {
  width: 4px;
  height: 22px;
  margin: 0 auto 8px;
  border-radius: 2px;
  background-color: var(--cd-ink-2);
  box-shadow: 0 0 0 2px #fff;
}
html.cd26 .argus-borne.med .tiret { width: 6px; height: 30px; margin: -4px auto 4px; background-color: var(--cd-prune-700); }
html.cd26 .argus-borne small {
  color: var(--cd-ink-3);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
html.cd26 .argus-borne b { color: var(--cd-ink); font-size: 16px; font-weight: 700; }
html.cd26 .argus-borne.med b { color: var(--cd-prune); font-size: 18px; font-weight: 800; }
html.cd26 .argus-bornes-liste { margin: 18px 0 0; }
html.cd26 .argus-bornes-liste li { padding: 12px 0; border-bottom-color: var(--cd-line); }
html.cd26 .argus-bornes-liste .k { color: var(--cd-ink-2); font-size: 14.5px; }
html.cd26 .argus-bornes-liste .v { color: var(--cd-ink); font-size: 17px; }
html.cd26 .argus-bornes-liste li.med .k { color: var(--cd-ink); font-weight: 600; }
html.cd26 .argus-bornes-liste li.med .v { color: var(--cd-prune); font-size: 19px; font-weight: 800; }

html.cd26 .argus-lecture {
  margin-top: 24px;
  padding: 16px 20px;
  border: 1px solid var(--cd-prune-100);
  border-radius: var(--cd-r-sm);
  background-color: var(--cd-prune-50);
  color: var(--cd-ink);
  font-size: 15.5px;
  line-height: 1.65;
}

/* ---------- Offre 49 EUR (paywall) ---------- */
html.cd26 .argus-paywall {
  box-sizing: border-box;
  min-width: 0;
  margin: 0 0 20px;
  padding: 24px;
  border: 2px solid var(--cd-prune);
  border-radius: var(--cd-r-lg);
  background: linear-gradient(180deg, var(--cd-prune-50), #fff 40%);
  box-shadow: var(--cd-sh-3);
  text-align: left;
}
html.cd26 .argus-paywall h2 { margin: 0 0 12px; font-size: 21px; line-height: 1.25; }
html.cd26 .argus-paywall .prix {
  margin: 0;
  color: var(--cd-ink);
  font-size: 42px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
}
html.cd26 .argus-paywall .mention { margin: 6px 0 0; color: var(--cd-ink-2); font-size: 14px; line-height: 1.5; }
/* Avantages : liste compacte a coches (2 colonnes quand l'offre est dans le flux) */
html.cd26 .argus-liste {
  display: grid;
  gap: 7px;
  max-width: none;
  margin: 18px 0 22px;
  padding: 16px 0 0;
  border-top: 1px solid var(--cd-line);
  list-style: none;
  text-align: left;
}
html.cd26 .argus-liste li {
  position: relative;
  margin: 0;
  padding: 0 0 0 28px;
  color: var(--cd-ink-2);
  font-size: 14.5px;
  line-height: 1.4;
}
html.cd26 .argus-liste li strong { color: var(--cd-ink); }
html.cd26 .argus-liste li::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #E5F2EC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 12px;
}
html.cd26 .argus-paywall .argus-btn { display: flex; width: 100%; min-height: 52px; font-size: 17px; }
/* « Paiement securise par Stripe... » sous le bouton, avec un cadenas */
html.cd26 .argus-paywall .argus-btn ~ .mention {
  position: relative;
  margin: 14px 0 0;
  padding-left: 22px;
  color: var(--cd-ink-3);
  font-size: 13px;
}
html.cd26 .argus-paywall .argus-btn ~ .mention::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6372' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") no-repeat center / 15px;
}

/* ---------- Boutons ---------- */
html.cd26 .argus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--cd-r-sm);
  background-color: var(--cd-prune);
  box-shadow: 0 8px 18px -10px rgba(154, 56, 117, .7);
  font: 600 16px/1.2 var(--cd-font);
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
html.cd26 .argus-btn:hover,
html.cd26 .argus-btn:focus { background-color: var(--cd-prune-700); }
html.cd26 .argus-btn[disabled] { cursor: progress; opacity: .75; }
html.cd26 .argus-btn.secondaire {
  border-color: var(--cd-line-2);
  background-color: #fff;
  box-shadow: none;
  color: var(--cd-prune-700) !important;
}
html.cd26 .argus-btn.secondaire:hover,
html.cd26 .argus-btn.secondaire:focus {
  border-color: var(--cd-prune);
  background-color: var(--cd-prune-50);
  color: var(--cd-prune-700) !important;
}

/* ---------- Accueil /argus/ : « Ce que contient le rapport » ---------- */
html.cd26 .argus-prix-landing { margin: 12px 0 0; color: var(--cd-ink-2); font-size: 16px; line-height: 1.5; }
html.cd26 .argus-prix-landing strong {
  margin-right: 4px;
  color: var(--cd-prune);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.02em;
  vertical-align: -2px;
}

/* ---------- Abonnement ---------- */
html.cd26 .argus-abo { gap: 16px 32px; background-color: var(--cd-bg-2); }
html.cd26 .argus-abo h2 { font-size: 20px; }
html.cd26 .argus-abo .argus-sous { margin: 0; }

/* ---------- Sante du secteur, contexte, murs, multiples ---------- */
html.cd26 .argus-risk-phrase {
  max-width: none;
  margin: 0 0 12px;
  padding: 14px 18px;
  border: 1px solid var(--cd-line);
  border-left: 3px solid var(--cd-prune-200);
  border-radius: var(--cd-r-sm);
  background-color: var(--cd-bg-2);
  color: var(--cd-ink);
  font-size: 15px;
  line-height: 1.6;
}
/* la phrase « dynamisme » porte un fond bleu en attribut style */
html.cd26 .argus-risk-phrase[style] {
  border-color: var(--cd-line) !important;
  border-left-color: var(--cd-prune-200) !important;
  background-color: var(--cd-bg-2) !important;
}
html.cd26 .argus-risk-phrase + .argus-table-wrap,
html.cd26 .argus-risk-phrase + .argus-risk-phrase { margin-top: 0; }
html.cd26 .argus-risk-phrase ~ .argus-table-wrap { margin-top: 18px; }

html.cd26 .argus-ctx-grille { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
html.cd26 .argus-ctx-carte {
  padding: 14px 16px;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-r-sm);
  background-color: var(--cd-bg-2);
}
/* carte mediane (murs, marge d'EBE) : bordure prune en attribut style */
html.cd26 .argus-ctx-carte[style] { border-color: var(--cd-prune-200) !important; background-color: var(--cd-prune-50); }
html.cd26 .argus-ctx-valeur {
  color: var(--cd-ink);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
}
html.cd26 .argus-ctx-carte[style] .argus-ctx-valeur { color: var(--cd-prune-700); }
html.cd26 .argus-ctx-legende { margin-top: 4px; color: var(--cd-ink-2); font-size: 13.5px; line-height: 1.45; }

html.cd26 .argus-mult-carte {
  gap: 12px 24px;
  padding: 18px 22px;
  border: 1px solid var(--cd-prune-100);
  border-radius: var(--cd-r);
  background-color: var(--cd-prune-50);
}
html.cd26 .argus-mult-valeur { color: var(--cd-prune); font-size: 36px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
html.cd26 .argus-mult-texte { max-width: 72ch; color: var(--cd-ink); font-size: 15px; line-height: 1.6; }

/* ---------- Graphique (SVG rendu cote serveur, couleurs en attributs) ---------- */
html.cd26 .argus-graph-large { max-width: 920px; }
html.cd26 .argus-graph svg line { stroke: var(--cd-line-2); }
html.cd26 .argus-graph svg text { fill: var(--cd-ink-3); font-family: var(--cd-font); font-variant-numeric: tabular-nums; }
html.cd26 .argus-graph svg path { fill: var(--cd-prune); }
html.cd26 .argus-graph svg polyline { stroke: var(--cd-prune); }
html.cd26 .argus-graph svg circle { fill: var(--cd-prune); }
html.cd26 .argus-note-partielle { color: var(--cd-ink-3); font-size: 13px; }

/* ---------- Tableaux ---------- */
html.cd26 .argus-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-r);
  background-color: #fff;
}
html.cd26 .argus-table { margin: 0; color: var(--cd-ink); font-size: 15px; line-height: 1.45; }
html.cd26 .argus-table th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--cd-line-2);
  background-color: var(--cd-bg-2);
  color: var(--cd-ink-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
html.cd26 .argus-table td { padding: 12px 16px; border-bottom: 1px solid var(--cd-line); vertical-align: top; }
html.cd26 .argus-table tbody tr:last-child td { border-bottom: 0; }
html.cd26 .argus-table tbody tr:hover td { background-color: var(--cd-prune-50); }
html.cd26 .argus-table td.prix { color: var(--cd-ink); font-weight: 700; }
html.cd26 .argus-table td.date { color: var(--cd-ink-2); }
html.cd26 .argus-table td a { color: var(--cd-prune-700); font-weight: 600; text-decoration: none; }
html.cd26 .argus-table td a:hover { text-decoration: underline; text-underline-offset: .18em; }
/* Hub : ucfirst() du gabarit laisse « epiceries » en minuscule (multioctet) */
html.cd26 .cd-ar--hub .argus-table td:first-child a { display: inline-block; }
html.cd26 .cd-ar--hub .argus-table td:first-child a::first-letter { text-transform: uppercase; }
html.cd26 .argus-cp { color: var(--cd-ink-3); font-size: 13px; }
html.cd26 .argus-vendeur-infos { margin-top: 2px; color: var(--cd-ink-3); font-size: 12.5px; }

/* ---------- Methode et limites ---------- */
html.cd26 .argus-methode { color: var(--cd-ink-2); font-size: 14px; line-height: 1.65; }
html.cd26 .argus-methode-grille { display: block; margin-top: 6px; columns: 3 300px; column-gap: 14px; }
html.cd26 .argus-methode-grille p {
  display: inline-block;   /* une note ne se coupe pas entre deux colonnes */
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-r-sm);
  background-color: var(--cd-bg-2);
  break-inside: avoid;
}
html.cd26 .argus-methode b { color: var(--cd-ink); }

/* ---------- Alertes et messages ---------- */
html.cd26 .argus-alerte {
  margin: 0 0 20px;
  padding: 22px 24px;
  border: 1px solid #EFDCAE;
  border-radius: var(--cd-r);
  background-color: #FFF8EA;
  color: var(--cd-ink);
}
html.cd26 .argus-alerte h3 { color: var(--cd-ink); font-size: 19px; line-height: 1.3; }
html.cd26 .argus-flash { margin: 0 0 20px; padding: 14px 18px; border-radius: var(--cd-r-sm); font-size: 15px; }
html.cd26 .argus-flash.ok { border-color: #C5E4D3; background-color: #EAF5EF; color: #17573D; }
html.cd26 .argus-flash.wait { border-color: #EFDCAE; background-color: #FFF8EA; color: #6B4E00; }
html.cd26 .argus-flash.annule,
html.cd26 .argus-flash.admin { border-color: var(--cd-line-2); background-color: var(--cd-bg-2); color: var(--cd-ink-2); }
html.cd26 .argus-flash a:not([class]) { color: inherit; font-weight: 600; }

/* =====================================================================
   Mise en page en deux colonnes (>= 1100 px)
   ===================================================================== */
@media (min-width: 1100px) {
  html.cd26 :is(.cd-ar--accueil, .cd-ar--offre) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ar-aside);
    column-gap: var(--ar-gap);
    align-items: start;
  }
  html.cd26 :is(.cd-ar--accueil, .cd-ar--offre) > * { grid-column: 1; min-width: 0; }

  /* Offre : colonne laterale sur toute la hauteur (span large : les rangees
     en trop sont vides et ne prennent aucune place, pas d'ecart de rangee). */
  html.cd26 .cd-ar--offre > .argus-paywall { grid-column: 2; grid-row: 1 / span 20; margin: 0; }

  /* Accueil : presentation et formulaire en haut a gauche, contenu du
     rapport a droite (la rangee 1fr absorbe la difference de hauteur).
     /argus/?naf=XX.XXX (bouton des fiches /activite/*, sans departement)
     ajoute le maillage « autres departements » : rangee 4, sous les deux
     colonnes, comme sur le hub. */
  html.cd26 .cd-ar--accueil { grid-template-rows: auto auto 1fr auto; column-gap: 56px; }
  html.cd26 .cd-ar--accueil > .argus-hero { grid-row: 1; }
  html.cd26 .cd-ar--accueil > .argus-form { grid-row: 2; margin-bottom: 0; }
  html.cd26 .cd-ar--accueil > .argus-bloc:not(.argus-autres-deps) {
    grid-column: 2;
    grid-row: 1 / 4;
    margin: 0;
    border-radius: var(--cd-r-lg);
    box-shadow: var(--cd-sh-3);
  }
  html.cd26 .cd-ar--accueil > .argus-autres-deps { grid-column: 1 / -1; grid-row: 4; margin-top: 28px; }
  html.cd26 .cd-ar--accueil { --ar-aside: 440px; }

  /* Hub : tableau des activites a gauche, contexte du departement a droite. */
  html.cd26 .cd-ar--hub:has(> .argus-bloc .argus-ctx-grille) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto auto 1fr auto;
    column-gap: var(--ar-gap);
    align-items: start;
  }
  html.cd26 .cd-ar--hub:has(> .argus-bloc .argus-ctx-grille) > * { grid-column: 1; min-width: 0; }
  html.cd26 .cd-ar--hub:has(> .argus-bloc .argus-ctx-grille) > .argus-hero { grid-row: 1; }
  html.cd26 .cd-ar--hub > .argus-bloc:has(.argus-ctx-grille) { grid-column: 2; grid-row: 1 / 4; }
  html.cd26 .cd-ar--hub > .argus-bloc:has(.argus-ctx-grille) .argus-ctx-grille { grid-template-columns: 1fr; }
  html.cd26 .cd-ar--hub:has(> .argus-bloc .argus-ctx-grille) > .argus-bloc:has(.argus-table) { grid-row: 2; }
  html.cd26 .cd-ar--hub:has(> .argus-bloc .argus-ctx-grille) > .argus-autres-deps { grid-column: 1 / -1; grid-row: 4; }
}
/* Colonne laterale collante si l'ecran est assez haut pour la montrer entiere
   (a partir de 1280 px : plus etroite, l'offre est trop haute). */
@media (min-width: 1280px) and (min-height: 900px) {
  html.cd26 .cd-ar--offre > .argus-paywall,
  html.cd26 .cd-ar--hub > .argus-bloc:has(.argus-ctx-grille) {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--cd-hd-h) + 24px);
  }
  html.cd26 body.admin-bar .cd-ar--offre > .argus-paywall,
  html.cd26 body.admin-bar .cd-ar--hub > .argus-bloc:has(.argus-ctx-grille) { top: calc(var(--cd-hd-h) + 56px); }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  html.cd26 .argus-wrap { --ar-aside: 340px; --ar-gap: 32px; }
  html.cd26 .cd-ar--accueil { --ar-aside: 400px; }
}
/* Offre dans le flux (tablette) : avantages sur deux colonnes compactes. */
@media (min-width: 641px) and (max-width: 1099px) {
  html.cd26 .argus-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  html.cd26 .argus-paywall .argus-btn { display: inline-flex; width: auto; }
}
@media (min-width: 641px) {
  /* Accueil sous 1100 px : les 5 points du rapport sur deux colonnes aussi */
  html.cd26 .cd-ar--accueil .argus-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (min-width: 1100px) {
  html.cd26 .cd-ar--accueil .argus-liste { grid-template-columns: 1fr; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1099px) {
  /* Contexte du hub (4 cartes) : 2 x 2 plutot qu'une carte seule en bas */
  html.cd26 .argus-ctx-grille:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1321px) {
  /* .fusion-row a atteint sa largeur maximale (1260 px), comme l'en-tete */
  html.cd26 .argus-wrap { margin-left: 0; margin-right: 0; }
}
@media (max-width: 900px) {
  html.cd26 .argus-table :is(th, td) { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 640px) {
  html.cd26 .argus-wrap { --ar-bloc-pad: 20px 16px; margin-top: -23px; padding-bottom: 24px; }
  html.cd26 .argus-hero { margin-bottom: 22px; }
  html.cd26 .argus-hero .argus-eyebrow { margin-bottom: 12px; font-size: 12px; }
  html.cd26 .argus-form { padding: 12px; }
  html.cd26 .argus-bloc h2 { font-size: 19px; }
  html.cd26 .argus-paywall { padding: 22px 18px; }
  html.cd26 .argus-paywall h2 { font-size: 20px; }
  html.cd26 .argus-paywall .prix { font-size: 40px; }
  html.cd26 .argus-kpis { grid-template-columns: 1fr; gap: 8px; }
  html.cd26 .argus-kpi { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; }
  html.cd26 .argus-kpi .n { flex: none; min-width: 96px; font-size: 22px; }
  html.cd26 .argus-kpi .l { margin: 0; }
  html.cd26 .argus-mult-valeur { font-size: 30px; }
  html.cd26 .argus-mult-carte { padding: 16px; }
  html.cd26 .argus-abo .argus-btn { width: 100%; }
  html.cd26 .argus-methode-grille { columns: 1; }
  html.cd26 .argus-alerte { padding: 18px 16px; }
}
@media (max-width: 600px) {
  /* formulaire en colonne (bloc d'origine) : la base flexible de 220 px
     deviendrait une hauteur */
  html.cd26 .argus-form .champ { flex: 0 0 auto; }
  /* Jauge : les reperes restent sur la piste, les libelles passent dans la
     liste (le bloc d'origine masque .argus-bornes sous 600 px). */
  html.cd26 .argus-bornes { display: block; min-height: 16px; }
  html.cd26 .argus-borne small,
  html.cd26 .argus-borne b { display: none; }
  /* Tableaux sans defilement : pas de cadre, cellules serrees. */
  html.cd26 .argus-table-wrap { border: 0; border-radius: 0; }
  html.cd26 .argus-table { font-size: 13.5px; }
  html.cd26 .argus-table th { padding: 10px 5px; background-color: transparent; white-space: normal; }
  html.cd26 .argus-table td { padding: 10px 5px; }
  html.cd26 .argus-table td.date { font-size: 12.5px; }
  /* Hub : « Voir la fourchette » double le lien de l'activite (meme URL) et
     prendrait trois lignes par rangee */
  html.cd26 .cd-ar--hub .argus-table :is(th, td):nth-child(3) { display: none; }
  html.cd26 .argus-table :is(th, td):first-child { padding-left: 0; }
  html.cd26 .argus-table :is(th, td):last-child { padding-right: 0; }
  html.cd26 .argus-table tbody tr:hover td { background-color: transparent; }
}
@media (max-width: 480px) {
  html.cd26 .argus-ctx-grille:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  /* 320 px : blocs et cellules encore plus serres (le tableau defile sinon) */
  html.cd26 .argus-wrap { --ar-bloc-pad: 18px 12px; }
  html.cd26 .argus-table { font-size: 12.5px; }
  html.cd26 .argus-table th { font-size: 11.5px; }
  html.cd26 .argus-table :is(th, td) { padding-left: 3px; padding-right: 3px; }
  html.cd26 .argus-table td.date { font-size: 12px; }
  html.cd26 .argus-vendeur-infos { font-size: 11.5px; }
}

/* =====================================================================
   Impression (rapport en PDF) : une colonne, sans ombres
   ===================================================================== */
@media print {
  html.cd26 .argus-wrap { display: block !important; max-width: none; padding: 0; }
  html.cd26 .argus-bloc { box-shadow: none; border-color: #ddd; }
  /* le PDF garde le rapport, pas la navigation */
  html.cd26 .argus-form,
  html.cd26 .argus-nav-haut,
  html.cd26 .argus-autres-deps { display: none !important; }
  /* colonnes CSS mal fragmentees entre deux pages : grille, comme l'origine */
  html.cd26 .argus-methode-grille { display: block; columns: auto; }
  html.cd26 .argus-methode-grille p { display: block; margin: 0 0 8px; break-inside: avoid; }
  /* bloc plus haut qu'une page : sans cela, son titre restait seul en bas de
     page et les notes partaient sur la suivante */
  html.cd26 .argus-bloc.argus-methode { break-inside: auto; }
  html.cd26 .argus-methode .argus-eyebrow { break-after: avoid; }
  html.cd26 .argus-fourchette,
  html.cd26 .argus-piste,
  html.cd26 .argus-borne .tiret,
  html.cd26 .argus-lecture,
  html.cd26 .argus-ctx-carte,
  html.cd26 .argus-kpi {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
