/* =============================================================
   Pages du 30/09/2026 : /tarifs, /cas-usage/*, /confidentialite (et EN).
   Chargée seulement par les pages qui déclarent css=True dans build-content-pages.py.
   Mêmes jetons que style.css (chargée avant) : rien n'est redéfini, on ajoute.
   ============================================================= */

/* marqueurs de brouillon : visibles, impossibles à rater, à retirer avant la mise en ligne */
.todo { display: inline; padding: 1px 6px; border-radius: 6px; border: 1px dashed rgba(255,159,10,.75); background: rgba(255,159,10,.14); color: #ffb340; font-family: var(--font-mono); font-size: .8em; letter-spacing: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* tarifs : les deux cartes de la landing, reprises dans l'en-tête de page */
.pg-hero .pr-grid { margin-top: 34px; max-width: none; }
.pg-hero .pr-test { max-width: none; margin-top: 12px; grid-template-columns: 44px minmax(0,1fr); }
.prose .pr-list { padding: 18px 0 0; margin: 20px 0 0; }
.prose .pr-list li { margin: 0; padding: 0; }

/* compris / pas compris : deux colonnes sobres */
.pg-duo { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 22px; }
.pg-duo > div { padding: 20px 22px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }
.pg-duo > div.on { border-color: rgba(230,192,104,.3); background: linear-gradient(160deg, rgba(230,192,104,.07), rgba(255,255,255,.015)); }
.pg-duo b { display: block; color: var(--fg); font-weight: 600; font-size: 15.5px; }
.prose .pg-duo ul { list-style: none; padding: 0; margin: 10px 0 0; }
.prose .pg-duo li { position: relative; margin: 8px 0 0; padding: 0 0 0 24px; font-size: 15.5px; line-height: 1.55; }
.pg-duo li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 12px; height: 2px; border-radius: 2px; background: var(--fg-dim); }
.pg-duo .on li::before { top: .38em; width: 6px; height: 11px; border: solid var(--accent); border-width: 0 2px 2px 0; background: none; border-radius: 0; transform: rotate(45deg); left: 5px; }

/* variante sans coches : deux listes de même rang (par boutique / pour tout le parc) */
.pg-duo.plain .on li::before { top: .68em; left: 6px; width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--accent); transform: none; }

/* figures : captures de l'interface et visuels de démonstration */
.prose .pg-cap { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--fg-muted); }
.prose .pg-cap + p { margin-top: 20px; }
.pg-fig { margin: 26px 0 0; }
.pg-fig img { display: block; width: auto; max-width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--border-hi); background: var(--bg-elev); box-shadow: 0 24px 60px -30px rgba(0,0,0,.8); }
.pg-fig figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--fg-muted); }

/* photo fournisseur → fiche → mise en scène */
.pg-trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; list-style: none; margin: 26px 0 0 !important; padding: 0 !important; }
.prose .pg-trio li { margin: 0; padding: 0; }
.pg-trio img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--border-hi); }
.pg-trio span { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--fg-muted); }
.pg-trio li:first-child span { color: var(--fg-dim); }
.pg-trio li:last-child span { color: var(--accent); }

/* tableaux simples de la confidentialité (.pg-data, posée sur <table>) ; le comparatif a son propre bloc .pg-table plus bas */
.pg-data { width: 100%; margin-top: 22px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; font-size: 15px; line-height: 1.55; }
.pg-data th, .pg-data td { padding: 13px 16px; text-align: left; vertical-align: top; }
.pg-data thead th { font-size: 12px; font-family: var(--font-mono); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); background: var(--surface); }
.pg-data tbody tr + tr > * , .pg-data tbody tr:first-child > * { border-top: 1px solid var(--border); }
.pg-data tbody th { color: var(--fg); font-weight: 600; }
.pg-data td.n { white-space: nowrap; color: var(--fg-muted); }

@media (max-width: 640px) {
  .pg-duo { grid-template-columns: minmax(0,1fr); }
  .pg-trio { gap: 8px; }
  .pg-trio span { font-size: 11px; }
  /* tableaux empilés : une carte par ligne, l'intitulé de colonne devant chaque valeur */
  .pg-data, .pg-data tbody, .pg-data tr, .pg-data th, .pg-data td { display: block; }
  .pg-data thead { display: none; }
  .pg-data tbody tr { padding: 12px 16px; }
  .pg-data tbody tr + tr, .pg-data tbody tr:first-child { border-top: 1px solid var(--border); }
  .pg-data tbody tr:first-child { border-top: 0; }
  .pg-data tbody tr > * { border-top: 0 !important; padding: 2px 0; }
  .pg-data td[data-l]::before { content: attr(data-l) " · "; color: var(--fg-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
  .pg-data td.n { white-space: normal; }
}
.prose .pg-data + p { margin-top: 16px; }

   /* ---------- pages de fond : tableau comparatif (/comparatif, /en/comparison) ----------
      Vrai <table> pour les moteurs (IA comprises) ; en cartes sous 640 px, chaque cellule reprend son en-tête
      depuis data-label. Le cadre défile horizontalement si besoin, jamais la page (html est en overflow-x: clip). */
   .pg-table { margin-top: 22px; border: 1px solid var(--border); border-radius: var(--r-lg); overflow-x: auto; background: var(--surface); }
   .pg-table:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
   .pg-table table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
   .pg-table caption { caption-side: bottom; text-align: left; padding: 12px 16px 14px; color: var(--fg-dim); font-size: 12.5px; border-top: 1px solid var(--border); }
   .pg-table th, .pg-table td { padding: 12px 14px; text-align: left; vertical-align: top; }
   .pg-table tbody tr { border-top: 1px solid var(--border); }
   .pg-table thead th { color: var(--fg-muted); font-weight: 500; font-size: 12px; font-family: var(--font-mono); letter-spacing: .02em; background: var(--surface-2); }
   .pg-table tbody th { color: var(--fg); font-weight: 600; width: 17%; }
   .pg-table tr.on > * { background: var(--accent-soft); }
   .pg-table tr.on th { color: var(--accent-hi); }
   @media (min-width: 1180px) { .pg-table { margin-inline: -110px; } }
   @media (max-width: 640px) {
     .pg-table { border: 0; border-radius: 0; background: none; overflow: visible; }
     .pg-table table { min-width: 0; font-size: 15px; }
     .pg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
     .pg-table table, .pg-table tbody, .pg-table tr, .pg-table th, .pg-table td, .pg-table caption { display: block; }
     .pg-table tbody tr { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); margin-top: 12px; overflow: hidden; }
     .pg-table tbody th { width: auto; padding: 14px 16px 10px; font-size: 16px; }
     .pg-table td { padding: 10px 16px; border-top: 1px solid var(--border); }
     .pg-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--fg-dim); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; }
     .pg-table caption { border-top: 0; padding: 12px 2px 0; }
   }