/* assets/rates.css — stylesheet for the « argent » pages: the price shown plainly
   (combien-ca-coute.html) and the stated limits (pas-pour-vous.html).

   No hard-coded colors: everything uses the variables in assets/style.css, so
   dark mode works without a single extra rule. Wide tables scroll
   inside their own box: the page body never scrolls sideways.

   Pricing rules live HERE, not in a page <style> tag: a
   rule written in a page escapes class checks and gets copied to the
   page suivante. */

/* Table scroll box (required on small screens). */
.cc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; }
.cc-scroll .compo-table { min-width: 34rem; }

/* The price, in large type, in the table's right-hand column. */
.cc-prix {
  font-weight: 800;
  color: var(--navy);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cc-prix small { font-weight: 600; font-size: 0.72rem; color: var(--slate); letter-spacing: 0; }
.cc-prix-gratuit { color: var(--ok); }

/* Reminder strip under a table (legal note, reading clarification). */
.cc-note {
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--slate);
  font-size: 0.86rem;
  line-height: 1.7;
}
.cc-note strong { color: var(--navy); font-weight: 700; }

/* Two columns, « ce dont le prix dépend / ce dont il ne dépend pas ». */
.cc-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.cc-duo > div {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.cc-duo h3 { font-size: 0.95rem; font-weight: 700; color: var(--navy); margin: 0 0 0.75rem; }
/* No native bullet: the + / − marker below IS the bullet. Two bullets
   side by side read as « • + Le profil… ». */
.cc-duo ul { margin: 0; padding: 0; list-style: none; color: var(--slate); font-size: 0.88rem; line-height: 1.7; }
.cc-duo li { margin-bottom: 0.55rem; padding-left: 1.15rem; text-indent: -1.15rem; }
.cc-duo li:last-child { margin-bottom: 0; }

/* List markers. These are typographic signs, not images. */
.cc-marque { font-weight: 800; margin-right: 0.4rem; display: inline-block; width: 0.75rem; }
.cc-marque-oui { color: var(--ok); }
.cc-marque-non { color: var(--danger); }

/* One table row = one audience, and each audience uses the brand shade that
   is already its own on its page (--pub-*, declared only once in
   assets/style.css). A thin line on the left is enough to identify the row: recoloring the
   entire row would make the price less readable, and the price is what people come to see. */
.cc-pub th[scope="row"] { box-shadow: inset 3px 0 0 0 var(--cc-teinte, var(--border2)); }
.cc-pub-ecoles       { --cc-teinte: var(--pub-ecoles); }
.cc-pub-independant  { --cc-teinte: var(--pub-independant); }
.cc-pub-association  { --cc-teinte: var(--pub-associations); }
.cc-pub-entreprise   { --cc-teinte: var(--pub-entreprises); }
.cc-pub-collectivite { --cc-teinte: var(--pub-collectivites); }
.cc-pub-particulier  { --cc-teinte: var(--pub-particuliers); }

/* Option that is not available for subscription: the note replaces the price.
   There is deliberately NO number — stating the price of an option that we do not
   yet know how to sell means making two promises. */
.cc-avenir {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--border2);
  border-radius: var(--r-pill);
  color: var(--slate);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}

/* The sum laid out plainly: the package, what is added to it, and the total. On a small
   screen each line goes below the previous one without ever overflowing. */
.cc-calcul {
  margin: 1.5rem 0;
  padding: 1.35rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.cc-calcul h3 { font-size: 0.95rem; font-weight: 700; color: var(--navy); margin: 0 0 0.9rem; }
.cc-calcul dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0.55rem 1rem; align-items: baseline; }
.cc-calcul dt { color: var(--slate); font-size: 0.88rem; line-height: 1.5; }
.cc-calcul dd { margin: 0; text-align: right; color: var(--navy); font-weight: 700; font-size: 0.92rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-calcul .cc-calcul-total { border-top: 1px solid var(--border); padding-top: 0.7rem; margin-top: 0.15rem; }
.cc-calcul dt.cc-calcul-total { color: var(--navy); font-weight: 700; }
.cc-calcul dd.cc-calcul-total { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }

/* The « si vous êtes dans ce cas, passez votre chemin » card. */
.cc-limite { margin-top: 1rem; }
.cc-limite h2 { font-size: 1rem; }
.cc-limite .cc-alors {
  display: block;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.6;
}