/* Pages Ressources sans maquette (comparatifs « A vs B » et pages C2PA) :
   même trame que les pages Certificats et Trust List (hero braise, sections papier/braise, FAQ papier,
   appel final .ps-endcta),
   colonnes alignées sur le logo de l'en-tête. Utilisé par c2pa-vs-exif, c2pa-vs-watermarking,
   content-credentials-vs-metadata, test-certificate-vs-trusted-certificate, what-is-c2pa
   et c2pa-signing-certificate. Pas de barre de couleur latérale : la couleur passe par des pastilles. */

/* ---------- Conteneur aligné sur l'en-tête ---------- */

.cp-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ps-container);
  margin: 0 auto;
  padding-right: var(--ps-gutter);
  padding-left: var(--ps-gutter);
}

/* ---------- Hero (fond braise, halo orange à droite) ---------- */

.cp-hero {
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 55% 65% at 78% 45%, rgba(244, 81, 30, 0.26), transparent 66%),
    var(--ps-ember);
}

.cp-hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px 56px;
  padding-top: 56px;
  padding-bottom: 96px;
}

.cp-hero-copy {
  display: flex;
  flex: 1 1 440px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}


.ps-page .cp-h1 {
  max-width: 13em;
  color: #fff;
  font-size: clamp(42px, 5.2vw, 84px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.ps-page .cp-lead {
  max-width: 34em;
  color: var(--ps-muted-dark);
  font-size: 20px;
  line-height: 1.5;
}

.ps-page .cp-note {
  max-width: 36em;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 138, 76, 0.25);
  color: var(--ps-faint-dark);
  font-size: 16px;
  line-height: 1.55;
}

/* Bouton orange et lien souligné sur une même ligne, centrés verticalement. */
.cp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

.ps-page main .cp-hero .ps-btn--primary:hover {
  color: #fff;
}

.cp-scene-col {
  flex: 1 1 500px;
  min-width: 0;
}

/* ---------- Scène « A vs B » : deux fiches face à face ---------- */

.cp-vs {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.cp-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 2px solid var(--ps-ink);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ps-ink);
}

.cp-side--b {
  border-color: rgba(255, 138, 76, 0.55);
  background: #1f130c;
  box-shadow: 10px 10px 0 var(--ps-orange);
  color: #fff;
}

.cp-side-tag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--ps-radius-pill);
  background: rgba(28, 17, 11, 0.08);
  color: var(--ps-ink);
  font-family: var(--ps-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cp-side--b .cp-side-tag {
  background: rgba(255, 138, 76, 0.18);
  color: var(--ps-peach);
}

.cp-side strong {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.ps-page .cp-side p {
  color: var(--ps-muted-light);
  font-size: 15px;
  line-height: 1.5;
}

.ps-page .cp-side--b p {
  color: var(--ps-muted-dark);
}

/* Lignes décoratives : un fichier « lisible » à gauche, une structure signée à droite. */
.cp-lines {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed #e3cfc4;
}

.cp-lines i {
  display: block;
  height: 7px;
  border-radius: 3px;
  background: #e2d0c5;
}

.cp-lines i:nth-child(1) { width: 82%; }
.cp-lines i:nth-child(2) { width: 64%; }
.cp-lines i:nth-child(3) { width: 74%; }

.cp-side--b .cp-lines {
  border-top-color: rgba(255, 138, 76, 0.3);
}

.cp-side--b .cp-lines i {
  background: rgba(255, 138, 76, 0.32);
}

.cp-vs-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--ps-ember);
  border-radius: 50%;
  background: var(--ps-gradient);
  color: #fff;
  font-family: var(--ps-font-mono);
  font-size: 13px;
  transform: translate(-50%, -50%);
}

.cp-vs-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 580px;
  margin: 28px auto 0;
  padding: 16px 20px;
  border: 1px solid rgba(255, 138, 76, 0.25);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.cp-vs-foot strong {
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.ps-page .cp-vs-foot p {
  color: var(--ps-muted-dark);
  font-size: 15px;
}

/* ---------- Titres de section ---------- */

.cp-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ps-page .cp-h2 {
  max-width: 14em;
  color: var(--ps-ink);
  font-size: var(--ps-h2-size);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.ps-page .f-dark .cp-h2 {
  color: #fff;
}

.ps-page .cp-h2--sm {
  font-size: clamp(30px, 3.4vw, 50px);
}

.cp-head--gap {
  margin-top: 56px;
}

/* ---------- Fiches (bord encre, pastille de catégorie) ---------- */

.cp-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.cp-cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cp-cards--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cp-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border: 1.5px solid var(--ps-ink);
  border-radius: 6px;
  background: #fffdf8;
}

.cp-pill {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--ps-radius-pill);
  background: rgba(244, 81, 30, 0.1);
  color: #9a3412;
  font-family: var(--ps-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cp-pill--ink {
  background: var(--ps-ink);
  color: var(--ps-peach);
}

.ps-page .cp-card :is(h3, strong) {
  color: var(--ps-ink);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.ps-page .cp-card p {
  color: var(--ps-muted-light);
  font-size: 19px;
  line-height: 1.55;
}

.cp-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed #e3cfc4;
  list-style: none;
}

.cp-checks li {
  position: relative;
  padding-left: 22px;
  color: var(--ps-muted-light);
  font-size: 19px;
  line-height: 1.55;
}

.cp-checks li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ps-orange);
}

.f-dark .cp-card {
  border: 1px solid rgba(255, 138, 76, 0.25);
  background: rgba(255, 255, 255, 0.03);
}

.ps-page .f-dark .cp-card :is(h3, strong) {
  color: #fff;
}

.ps-page .f-dark .cp-card p {
  color: #d7c3b8;
}

.f-dark .cp-pill {
  background: rgba(255, 138, 76, 0.14);
  color: var(--ps-peach);
}

.f-dark .cp-pill--ink {
  background: var(--ps-peach);
  color: var(--ps-ink);
}

.f-dark .cp-checks {
  border-top-color: rgba(255, 138, 76, 0.25);
}

.f-dark .cp-checks li {
  color: #d7c3b8;
}

/* ---------- Tableau comparatif : cadre arrondi fermé (comme le comparatif de l'accueil) ---------- */

.cp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ps-line-light);
  border-radius: var(--ps-radius-card);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.cp-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  line-height: 1.5;
}

/* En-têtes alignés sur une même ligne : même padding, centrés verticalement. */
.cp-table thead th {
  padding: 20px 22px;
  color: var(--ps-ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: left;
  vertical-align: middle;
}

.cp-table thead th:not(:first-child) {
  width: 38%;
}

.cp-table tbody th,
.cp-table td {
  padding: 16px 22px;
  border-top: 1px solid var(--ps-line-light);
  text-align: left;
  vertical-align: top;
}

.cp-table tbody th {
  color: var(--ps-ink);
  font-weight: 700;
}

.cp-table td {
  color: var(--ps-muted-light);
}

/* Colonne mise en avant (le côté signé), comme la colonne ProvSeal de l'accueil. */
.cp-table .cp-us {
  border-top-color: #f2b99c;
  background: var(--ps-peach-light);
  color: var(--ps-ember);
}

.cp-table thead .cp-us {
  font-weight: 900;
}

.cp-table tbody .cp-us {
  font-weight: 600;
}

/* ---------- Statuts ProvSeal (pastilles teintées) ---------- */

.cp-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 9px 1px 7px;
  border-radius: var(--ps-radius-pill);
  font-size: 0.92em;
  font-weight: 700;
  white-space: nowrap;
}

.cp-status .ps-status-dot {
  width: 7px;
  height: 7px;
  box-shadow: none;
}

.cp-status--trusted { background: rgba(16, 185, 129, 0.14); color: #047857; }
.cp-status--untrusted { background: rgba(245, 158, 11, 0.16); color: #92400e; }
.cp-status--invalid { background: rgba(214, 38, 74, 0.13); color: #a8173a; }
.cp-status--none { background: rgba(100, 116, 139, 0.14); color: #475569; }

.f-dark .cp-status--trusted { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }
.f-dark .cp-status--untrusted { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
.f-dark .cp-status--invalid { background: rgba(214, 38, 74, 0.16); color: #f6a3b3; }
.f-dark .cp-status--none { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }

/* ---------- Guide de décision (deux options et « ou ») ---------- */

.cp-decide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 20px;
}

.cp-decide-or {
  align-self: center;
  color: var(--ps-orange-light);
  font-family: var(--ps-font-mono);
  font-size: 14px;
}

.cp-result {
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 14px;
  border-radius: var(--ps-radius-pill);
  background: rgba(255, 138, 76, 0.16);
  color: var(--ps-peach-light);
  font-size: 14px;
  font-weight: 700;
}

.f-paper .cp-result {
  background: rgba(244, 81, 30, 0.1);
  color: #9a3412;
}

/* ---------- Étapes numérotées ---------- */

.cp-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-flow li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
  border-top: 1.5px solid var(--ps-ink);
}

.cp-flow-num {
  color: var(--ps-orange-dark);
  font-family: var(--ps-font-mono);
  font-size: 13px;
}

.cp-flow strong {
  color: var(--ps-ink);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.ps-page .cp-flow p {
  color: var(--ps-muted-light);
  font-size: 19px;
  line-height: 1.55;
}

.f-dark .cp-flow li {
  border-top-color: rgba(255, 138, 76, 0.3);
}

.f-dark .cp-flow-num {
  color: var(--ps-orange-light);
}

.f-dark .cp-flow strong {
  color: #fff;
}

.ps-page .f-dark .cp-flow p {
  color: #d7c3b8;
}

/* ---------- Encadré (titre, puis texte juste en dessous) ---------- */

.cp-callout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 24px;
  padding-top: 40px;
  border-top: 1.5px solid var(--ps-ink);
}

.cp-callout > div {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ps-page .cp-callout > p {
  max-width: 34em;
  color: var(--ps-muted-light);
  font-size: 19px;
  line-height: 1.55;
}

.f-dark .cp-callout {
  border-top-color: rgba(255, 138, 76, 0.3);
}

.ps-page .f-dark .cp-callout > p {
  color: #d7c3b8;
}

/* ---------- FAQ et sources ---------- */

.cp-faq-head {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 18px;
}

.ps-page .cp-faq-head .cp-h2 {
  font-size: var(--ps-h2-size);
}

.ps-page .cp-faq-head p {
  max-width: 22em;
  color: var(--ps-muted-light);
  font-size: var(--ps-lead-size);
  line-height: 1.55;
}

.ps-page .f-dark .cp-faq-head p {
  color: var(--ps-muted-dark);
}

/* Questions sans numéro : la réponse s'aligne sur la question. */
.ps-page .cp-wrap .f-q p {
  margin-left: 0;
  font-size: 19px;
  line-height: 1.55;
}

.ps-page .f-dark .cp-wrap .f-q p {
  color: #d7c3b8;
}

.cp-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

.cp-sources-label {
  margin-right: 6px;
  color: var(--ps-muted-light);
  font-family: var(--ps-font-mono);
  font-size: 13px;
}

.ps-page main .cp-sources a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--ps-line-light);
  border-radius: var(--ps-radius-pill);
  background: #fff;
  color: var(--ps-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.ps-page main .cp-sources a:hover {
  border-color: var(--ps-orange);
  color: var(--ps-orange-dark);
}

.f-dark .cp-sources-label {
  color: var(--ps-faint-dark);
}

.ps-page main .f-dark .cp-sources a {
  border-color: rgba(255, 211, 189, 0.3);
  background: transparent;
  color: #fff;
}

.ps-page main .f-dark .cp-sources a:hover {
  border-color: var(--ps-orange-light);
  background: var(--ps-hover);
  color: #fff;
}

/* ---------- Mouvement réduit, écrans moyens et mobile ---------- */

@media (prefers-reduced-motion: reduce) {
  .ps-page main .cp-sources a {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .cp-cards--4,
  .cp-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }
}

@media (max-width: 900px) {
  .cp-hero-inner {
    padding-top: 32px;
    padding-bottom: 72px;
  }

  .ps-page .cp-h1 {
    font-size: clamp(38px, 10.5vw, 58px);
  }

  .cp-cards,
  .cp-cards--2,
  .cp-cards--4,
  .cp-decide {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp-decide-or {
    justify-self: center;
  }

  .cp-head--gap {
    margin-top: 40px;
  }
}

@media (max-width: 560px) {
  /* Les deux fiches s'empilent ; le « vs » passe entre elles. */
  .cp-vs {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .cp-vs-badge {
    position: static;
    justify-self: center;
    transform: none;
  }

  .cp-side--b {
    box-shadow: 6px 6px 0 var(--ps-orange);
  }

  .cp-flow {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Compléments de la scène ---------- */

.cp-scene {
  width: 100%;
}

.cp-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}