/* pages.css : la feuille des autres pages (famille pb), celle de la base (Website, HEAD 35437e4, apps/web/src/hugo/pages.css),
   règle pour règle, passée aux jetons de /assets/charte.css (spec site-astro, REQ-3, Q-5) : ses variables sont devenues
   les jetons de la charte, définis une fois ; les boutons prennent leur forme et leurs couleurs dans les jetons --bouton-*.
   Émise sous /_astro/ (src/components/Tete.astro). Son en-tête d'origine suit. */

/* ==========================================================================
   pages.css — feuille partagee des pages VITRINE secondaires de peerdby.com
   (experts, mentions-legales, cgu, confidentialite, 404).

   La home (index.html) utilise ses propres classes namespacees .hp-* dans
   assets/styles.css (ex-module CSS buildé, désormais statique éditable dans le
   repo — renommé narrative-module__ohWcJG__ → hp- le 2026-07-06). Ces pages
   reprennent volontairement les MEMES tokens (hex, fonts, shadows, ease) et le
   meme langage visuel (topbar, footer, boutons, cartes) via des classes
   namespacees .pb-* — pour une continuite de marque parfaite.

   Namespace : toutes les classes prefixees .pb-  (aucune collision possible
   avec le module home).
   ========================================================================== */

.pb-page {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

.pb-page a { color: inherit; text-decoration: none; }
/* Boutons pleins : texte blanc garanti. `.pb-page a` (spécificité 0,1,1) écrase
   sinon le `color:var(--white)` des classes bouton (0,1,0) → texte ink illisible sur teal.
   Sélecteur composé de même spécificité déclaré APRÈS, et attribut [class*] pour
   couvrir toute la famille pb-btn* (pas de liste manuelle à maintenir). */
.pb-page a[class*="pb-btn"],
.pb-page a.pb-cta,
.pb-page a.pb-floatbtn { color: var(--bouton-plein-texte); }
/* Le ghost (contour) garde le texte ink → il ré-affirme sa couleur. */
.pb-page a.pb-btn-ghost { color: var(--bouton-contour-texte); }
.pb-page a.pb-btn-ghost:hover { color: var(--bouton-contour-accent); }

/* Focus visible — correctif a11y (la home n'en a pas). */
.pb-page a:focus-visible,
.pb-page button:focus-visible,
.pb-page summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Topbar (clone de la home) ────────────────────────────────────────── */
.pb-topbar {
  z-index: 400;
  height: 80px;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2rem 0;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(var(--cream) 60%, var(--cream-0));
}

.pb-logo { flex-shrink: 0; align-items: center; display: inline-flex; }
.pb-logo img { width: auto; height: 38px; display: block; }

.pb-nav { align-items: center; gap: .5rem; display: flex; }

.pb-link {
  color: var(--ink-70);
  padding: .55rem 1rem;
  font-size: .88rem;
  white-space: nowrap;
  transition: color .2s;
}
.pb-link:hover { color: var(--ink); }

.pb-ghost {
  color: var(--bouton-contour-texte);
  border: 1.5px solid var(--bouton-contour-bordure);
  transition: all .25s var(--ease);
  border-radius: var(--bouton-rayon);
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.6rem;
  font-size: .88rem;
  font-weight: 500;
  display: inline-flex;
}
.pb-ghost:hover { color: var(--bouton-contour-accent); border-color: var(--bouton-contour-accent); transform: translateY(-2px); }

.pb-cta {
  background: var(--bouton-plein-fond);
  color: var(--bouton-plein-texte);
  transition: all .25s var(--ease);
  border-radius: var(--bouton-rayon);
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.6rem;
  font-size: .88rem;
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 4px 16px var(--teal-20);
}
.pb-cta:hover { background: var(--teal-dark); transform: translateY(-2px); box-shadow: 0 8px 24px var(--teal-30); }

/* ─── Boutons ──────────────────────────────────────────────────────────── */
.pb-btn-big {
  background: var(--bouton-plein-fond);
  color: var(--bouton-plein-texte);
  transition: all .25s var(--ease);
  border-radius: var(--bouton-rayon);
  align-items: center;
  gap: .6rem;
  padding: 1rem 2.4rem;
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 6px 24px var(--teal-30);
  /* Reset natif <button> : sans ça, la bordure système entoure le CTA quand la
     classe est portée par un <button> (formulaire contact) et non un <a>. */
  border: none;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.pb-btn-big:hover { background: var(--teal-dark); transform: translateY(-2px); box-shadow: 0 10px 32px var(--teal-40); }

.pb-btn-ghost {
  color: var(--bouton-contour-texte);
  border: 1.5px solid var(--bouton-contour-bordure);
  transition: all .25s var(--ease);
  border-radius: var(--bouton-rayon);
  align-items: center;
  gap: .5rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  display: inline-flex;
}
.pb-btn-ghost:hover { color: var(--bouton-contour-accent); border-color: var(--bouton-contour-accent); transform: translateY(-2px); }

/* ─── Layout general ───────────────────────────────────────────────────── */
.pb-main { padding-top: 80px; }

.pb-container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 2rem; }

.pb-section { padding: 3rem 0; }
.pb-section-tight { padding: 2.25rem 0; }

.pb-eyebrow {
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.pb-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 1.2rem;
}
.pb-h1 em { color: var(--teal); font-style: italic; }

.pb-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  line-height: 1.2;
  margin: 0 0 1rem;
}
.pb-h2 em { color: var(--teal); font-style: italic; }

.pb-h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0 0 .5rem;
}

.pb-lead {
  color: var(--ink-70);
  font-size: 1.12rem;
  max-width: 640px;
  margin: 0 0 2rem;
}

.pb-p { color: var(--ink-70); margin: 0 0 1rem; }

/* ─── Hero (experts) ────────────────────────────────────────────── */
.pb-hero {
  text-align: center;
  padding: 8rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.pb-hero:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(var(--teal-10) 0%, var(--transparent) 65%);
  width: min(1000px, 140vw);
  height: 600px;
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
}
.pb-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.pb-hero .pb-lead { margin-left: auto; margin-right: auto; }

.pb-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: .5rem; }
.pb-cta-row-left { justify-content: flex-start; }

/* Badges de confiance (verifications) */
.pb-badges { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 2.2rem; }
.pb-badge {
  background: var(--white);
  border: 1px solid var(--ink-10);
  box-shadow: var(--shadow-sm);
  color: var(--ink-70);
  border-radius: 50px;
  padding: .4rem 1rem;
  font-size: .82rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.pb-badge b { color: var(--teal); font-weight: 700; }

/* ─── Grille de cartes (piliers / benefices) ───────────────────────────── */
.pb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.pb-cards-2 { grid-template-columns: repeat(2, 1fr); }

.pb-card {
  background: var(--white);
  border: 1px solid var(--ink-10);
  box-shadow: var(--shadow-sm);
  border-radius: 18px;
  padding: 1.8rem;
  transition: all .25s var(--ease);
}
.pb-card:hover { border-color: var(--teal); box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.pb-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--teal-light);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.pb-card p { color: var(--ink-70); font-size: .95rem; margin: 0; }

/* ─── Timeline "comment ca marche" (repris de .howTimeline) ────────────── */
.pb-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  counter-reset: step;
}
.pb-step { position: relative; padding-top: 3.2rem; }
.pb-step:before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-mono);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pb-step h4 { font-family: var(--font-serif); font-weight: 400; font-size: 1.05rem; margin: 0 0 .3rem; }
.pb-step p { color: var(--ink-70); font-size: .88rem; margin: 0; }

/* ─── "Ce que vous signez" — encart teal-light ─────────────────────────── */
.pb-panel {
  background: var(--teal-light);
  border: 1px solid var(--teal-10);
  border-radius: 22px;
  padding: 2.6rem;
}
.pb-panel-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; }
.pb-checklist { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.pb-checklist li { position: relative; padding-left: 1.8rem; margin-bottom: .7rem; color: var(--ink); font-size: .95rem; }
.pb-checklist li:before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }

/* ─── FAQ (details/summary natif — zero JS) ────────────────────────────── */
.pb-faq { max-width: 760px; margin: 0 auto; }
.pb-faq details {
  background: var(--white);
  border: 1px solid var(--ink-10);
  border-radius: 14px;
  margin-bottom: .8rem;
  overflow: hidden;
  transition: border-color .2s;
}
.pb-faq details[open] { border-color: var(--teal); }
.pb-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.4rem;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.pb-faq summary::-webkit-details-marker { display: none; }
.pb-faq summary:after { content: "+"; color: var(--teal); font-size: 1.4rem; font-weight: 400; line-height: 1; transition: transform .2s; }
.pb-faq details[open] summary:after { transform: rotate(45deg); }
.pb-faq details > p { color: var(--ink-70); margin: 0; padding: 0 1.4rem 1.3rem; font-size: .95rem; }

/* ─── Separateur (repris de .sep) ──────────────────────────────────────── */
/* Séparateur discret : un petit point teal centré entre deux traits fins. */
.pb-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 2rem 0;
}
.pb-sep:before, .pb-sep:after {
  content: "";
  height: 1px;
  width: 48px;
  background: var(--ink-10);
}
.pb-sep i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  opacity: .5;
  display: block;
}

/* ─── Bloc CTA final ───────────────────────────────────────────────────── */
.pb-cta-block { text-align: center; padding: 5rem 0; }
.pb-cta-block .pb-lead { margin-left: auto; margin-right: auto; }

/* ─── Pages LEGALES ────────────────────────────────────────────────────── */
.pb-legal { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; padding: 3rem 0 5rem; align-items: start; }

.pb-legal-head { grid-column: 1 / -1; margin-bottom: 1rem; }
.pb-legal-head .pb-h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: .6rem; }
.pb-updated { color: var(--ink-40); font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; }

.pb-toc { position: sticky; top: 100px; font-size: .88rem; }
.pb-toc-title { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); margin: 0 0 .8rem; }
.pb-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.pb-toc li { counter-increment: toc; margin-bottom: .55rem; }
.pb-toc a { color: var(--ink-70); transition: color .15s; display: block; }
.pb-toc a:before { content: counter(toc) ". "; color: var(--ink-40); }
.pb-toc a:hover { color: var(--teal); }

.pb-prose { max-width: 720px; font-size: 1rem; line-height: 1.8; }
.pb-prose h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.6rem;
  margin: 2.6rem 0 .9rem;
  scroll-margin-top: 100px;
  padding-top: .4rem;
}
.pb-prose h2:first-of-type { margin-top: 0; }
.pb-prose h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.2rem; margin: 1.8rem 0 .6rem; }
.pb-prose p, .pb-prose li { color: var(--ink-70); }
.pb-prose p { margin: 0 0 1rem; }
.pb-prose ul, .pb-prose ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.pb-prose li { margin-bottom: .5rem; }
.pb-prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.pb-prose strong { color: var(--ink); font-weight: 600; }
.pb-prose .pb-placeholder {
  background: var(--amber-light);
  color: var(--amber);
  border-radius: 4px;
  padding: 0 .35em;
  font-family: var(--font-mono);
  font-size: .85em;
  font-weight: 500;
}
.pb-disclaimer {
  background: var(--cream-2);
  border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
  margin: 0 0 2rem;
  color: var(--ink-70);
  font-size: .9rem;
}
.pb-legal-toc-mobile { display: none; }

/* ─── Page 404 ─────────────────────────────────────────────────────────── */
.pb-404 {
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
}
.pb-404:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(var(--teal-08) 0%, var(--transparent) 65%);
  width: min(900px, 140vw);
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pb-404-inner { position: relative; z-index: 1; max-width: 560px; }
.pb-404-code {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 18vw, 9rem);
  line-height: 1;
  color: var(--teal);
  margin: 0 0 1rem;
}
.pb-404-links { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-top: 2rem; font-size: .92rem; }
.pb-404-links a { color: var(--ink-70); transition: color .15s; }
.pb-404-links a:hover { color: var(--teal); }

/* ======================================================================== */
/*  UPGRADE /experts — niveau home (hero split, démos, stats, JS)     */
/* ======================================================================== */

/* ─── Reveal au scroll (piloté par pages.js) ───────────────────────────── */
.pb-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.pb-reveal.pb-in { opacity: 1; transform: none; }

/* ─── Progress bar + floatCta + topbar auto-hide ───────────────────────── */
.pb-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 399; }
.pb-progress-fill { height: 100%; width: 0; background: var(--teal); }
.pb-topbar { transition: transform .8s var(--ease), opacity .8s var(--ease); }
.pb-topbar-hidden { opacity: 0; pointer-events: none; transform: translateY(-100%); }
.pb-floatcta { position: fixed; right: 2rem; bottom: 2rem; z-index: 300; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.pb-floatcta-show { opacity: 1; transform: none; pointer-events: auto; }
.pb-floatbtn { background: var(--bouton-plein-fond); color: var(--bouton-plein-texte); border-radius: var(--bouton-rayon); padding: .85rem 1.8rem; font-size: .88rem; font-weight: 600; box-shadow: 0 8px 32px var(--teal-40); display: inline-flex; align-items: center; gap: .5rem; transition: all .25s var(--ease); }
.pb-floatbtn:hover { background: var(--teal-mid); transform: translateY(-2px); }

/* ─── Hero deux colonnes (texte gauche + pile de cartes expert droite) ─── */
.pb-hero-split {
  display: flex;
  align-items: center;
  padding: 5.5rem 0 4rem;
  text-align: left;
}
.pb-hero-split:before {
  background: radial-gradient(var(--teal-15) 0%, var(--transparent) 62%);
  width: min(1100px, 150vw); height: 720px; top: -8%;
}
.pb-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; position: relative; z-index: 1; }
.pb-hero-copy { max-width: 560px; }
.pb-hero-copy .pb-h1 { letter-spacing: -.03em; margin-bottom: 1.5rem; }
.pb-hero-copy .pb-lead { font-size: 1.05rem; font-weight: 300; line-height: 1.85; margin: 0 0 1.8rem; }
.pb-hero-copy .pb-cta-row { justify-content: flex-start; }

/* Texte secondaire sous les CTA (renvoi éditeurs vers l'accueil) — texte, pas bouton */
.pb-cta-aside { margin-top: 1.3rem; font-size: .9rem; color: var(--ink-70); }
.pb-cta-aside a { color: var(--teal-dark); font-weight: 600; border-bottom: 1px solid var(--teal-20); transition: border-color .2s, color .2s; }
.pb-cta-aside a:hover { color: var(--teal); border-bottom-color: var(--teal); }

/* Highlight animé sur les mots-clés du titre/lead (repris de .aHl) */
.pb-hl { border-radius: 2px; padding: 0 3px; border-bottom: 2px solid var(--transparent); transition: background .4s var(--ease) .2s, border-color .4s var(--ease) .2s, color .4s var(--ease) .2s; }
.pb-hl-on { border-bottom-color: var(--teal); background: var(--teal-10); color: var(--teal-dark); }

/* Pile de cartes expert (légèrement décalées, façon éventail) */
.pb-hero-stack { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
.pb-hecard {
  background: var(--white);
  border: 1px solid var(--ink-10);
  box-shadow: var(--shadow-sm);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.1rem 1.3rem;
  transition: all .25s var(--ease);
}
.pb-hecard:hover { border-color: var(--teal); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.pb-hecard-off1 { margin-left: 2.2rem; }
.pb-hecard-off2 { margin-left: 1.1rem; }
.pb-heav { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--ink-10); }
.pb-hename { color: var(--ink); font-size: .9rem; font-weight: 600; }
.pb-herole { color: var(--ink-40); font-size: .68rem; margin-bottom: .3rem; }
.pb-heproof { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.pb-hebadge { background: var(--teal-light); color: var(--teal-dark); border-radius: 50px; padding: .14rem .55rem; font-family: var(--font-mono); font-size: .6rem; font-weight: 500; }
.pb-hedomain { background: var(--ink); color: var(--white); border-radius: 50px; padding: .14rem .55rem; font-size: .6rem; letter-spacing: .02em; display: inline-flex; align-items: center; gap: .25rem; }

/* ─── Bloc bigstats (chiffres marquants) ───────────────────────────────── */
.pb-bigstats { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1rem; max-width: 1000px; margin: 0 auto; align-items: start; }
.pb-bigstat { text-align: center; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; }
.pb-bs-val {
  font-family: var(--font-serif); color: var(--teal);
  font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1.05;
  margin-bottom: .8rem; white-space: nowrap;
  min-height: calc(3.8rem * 1.05); display: flex; align-items: center; justify-content: center;
}
.pb-bs-val sup { font-size: .42em; vertical-align: baseline; position: relative; top: -0.85em; margin-right: .18em; }
.pb-bs-label { color: var(--ink-70); max-width: 250px; margin: 0 auto; font-size: .95rem; font-weight: 300; line-height: 1.55; }
.pb-bs-source { font-family: var(--font-mono); color: var(--ink-40); font-size: .62rem; letter-spacing: .02em; max-width: 250px; margin: .7rem auto 0; }

/* ─── Lignes de démo (texte + visuel alternés) ─────────────────────────── */
.pb-demo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.pb-demo-row + .pb-demo-row { margin-top: 4.5rem; }
.pb-demo-reverse .pb-demo-text { order: 2; }
.pb-demo-vis { display: flex; justify-content: center; }
.pb-demo { transition: transform .3s var(--ease); }

/* Démo A — avant / après */
.pb-demo-ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; width: 100%; }
.pb-ba-col { background: var(--white); border: 1px solid var(--ink-10); border-radius: 16px; padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm); }
.pb-ba-before { border-color: var(--amber-18); }
.pb-ba-after { border-color: var(--teal-light); }
.pb-ba-col p { margin: .7rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--ink-70); }
.pb-ba-flag { font-family: var(--font-mono); font-size: .55rem; letter-spacing: .04em; border-radius: 100px; padding: .2rem .55rem; font-weight: 600; display: inline-block; }
.pb-ba-flag-warn { color: var(--amber); background: var(--amber-10); }
.pb-ba-flag-ok { color: var(--teal-dark); background: var(--teal-light); }
.pb-mark-warn { background: var(--amber-12); border-bottom: 2px solid var(--amber); border-radius: 2px; padding: 0 2px; }
.pb-mark-ok { background: var(--teal-10); border-bottom: 2px solid var(--teal); border-radius: 2px; padding: 0 2px; }
.pb-ba-arrow { color: var(--teal); font-size: 1.5rem; text-align: center; }
.pb-ba-sign { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--ink-10); font-size: .76rem; color: var(--ink-70); }
.pb-ba-sign img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.pb-ba-sign b { color: var(--ink); }
.pb-ba-sign em { font-family: var(--font-mono); font-size: .56rem; color: var(--teal-dark); font-style: normal; background: var(--teal-light); border-radius: 100px; padding: .1rem .4rem; }

/* Démo B — carte-signature expert + score d'autorité */
.pb-expert-card { width: 320px; max-width: 100%; background: var(--white); border: 1px solid var(--ink-10); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 1.5rem; }
.pb-ec-head { display: flex; gap: .9rem; align-items: center; }
.pb-ec-av { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--ink-10); }
.pb-ec-name { font-weight: 600; font-size: .95rem; }
.pb-ec-role { color: var(--ink-40); font-size: .74rem; margin-bottom: .35rem; }
.pb-ec-verifs { display: flex; gap: .3rem; }
.pb-ec-badge { font-family: var(--font-mono); font-size: .54rem; font-weight: 600; color: var(--teal-dark); background: var(--teal-light); border-radius: 100px; padding: .12rem .45rem; }
.pb-ec-verifline { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.pb-ec-verifitem { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--ink-70); }
.pb-ec-check { color: var(--teal); font-weight: 700; flex-shrink: 0; }
.pb-ec-stat { margin-top: 1.1rem; padding-top: .8rem; border-top: 1px solid var(--ink-10); font-size: .76rem; color: var(--ink-40); }
.pb-ec-stat span { color: var(--ink); font-weight: 600; }

/* Démo C — mini transparency log (objet sombre) */
.pb-tlog { width: 370px; max-width: 100%; background: var(--ink); color: var(--white); border-radius: 16px; padding: 1.3rem 1.4rem; box-shadow: var(--shadow-lg); }
.pb-tlog-head { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; color: var(--white-70); display: flex; align-items: center; gap: .45rem; margin-bottom: 1rem; }
.pb-tlog-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-mid); box-shadow: 0 0 0 3px var(--teal-mid-20); }
.pb-tlog-list { list-style: none; margin: 0; padding: 0; }
.pb-tlog-list li { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--white-08); font-size: .72rem; }
.pb-tlog-list code { font-family: var(--font-mono); font-size: .62rem; color: var(--teal-mid); }
.pb-tlog-list em { font-style: normal; color: var(--white-80); flex: 1; }
.pb-tlog-list time { font-family: var(--font-mono); font-size: .56rem; color: var(--white-50); }
.pb-tlog-check { margin-top: 1rem; font-family: var(--font-mono); font-size: .58rem; color: var(--white-60); }
.pb-tlog-check code { color: var(--teal-mid); }

/* ─── Timeline "comment ça marche" (ligne dégradée + SVG + pastille) ───── */
.pb-timeline { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); position: relative; max-width: 1000px; margin: 3rem auto 0; padding: 0 1rem; }
.pb-timeline:before { content: ""; position: absolute; top: 28px; left: calc(60% / var(--cols, 5)); right: calc(60% / var(--cols, 5)); height: 2px; background: linear-gradient(90deg, var(--teal-light), var(--teal), var(--teal-light)); z-index: 0; }
.pb-tl-step { text-align: center; position: relative; z-index: 1; padding: 0 .8rem; }
.pb-tl-num { width: 56px; height: 56px; margin: 0 auto 1.2rem; border-radius: 50%; background: var(--white); border: 2px solid var(--teal); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pb-tl-step:hover .pb-tl-num { transform: translateY(-3px); box-shadow: 0 8px 24px var(--teal-15); }
.pb-tl-inner { width: 26px; height: 26px; border-radius: 50%; background: var(--teal); display: flex; align-items: center; justify-content: center; }
.pb-tl-inner svg { width: 13px; height: 13px; stroke: var(--white); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pb-tl-n { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--white); font-family: var(--font-mono); font-size: .62rem; display: flex; align-items: center; justify-content: center; }
.pb-tl-title { font-family: var(--font-serif); font-size: 1.05rem; margin-bottom: .4rem; }
.pb-tl-desc { color: var(--ink-70); font-size: .84rem; font-weight: 300; line-height: 1.55; max-width: 190px; margin: 0 auto; }

/* Icône de carte en SVG (remplace les emojis) */
.pb-card-icon svg { width: 22px; height: 22px; stroke: var(--teal); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ─── "Pour qui" — nuage de spécialités à visage humain (chip + mini-avatar) ─
   Ouvre à TOUTES les expertises : le nombre de chips montre l'ouverture, les
   visages (photos réutilisées + initiales sur dégradé) incarnent la diversité. */
.pb-speccloud { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; max-width: 860px; margin-left: auto; margin-right: auto; }
.pb-spec {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--white); border: 1px solid var(--ink-10); box-shadow: var(--shadow-sm);
  color: var(--ink); border-radius: 50px; padding: .35rem .95rem .35rem .4rem;
  font-size: .92rem; font-weight: 500; transition: all .25s var(--ease);
}
.pb-spec:hover { border-color: var(--teal); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.pb-spec-ic {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal-light);
}
.pb-spec-ic svg { width: 16px; height: 16px; stroke: var(--teal); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pb-spec-more { background: var(--teal-light); border-color: var(--teal-10); padding: .35rem 1.1rem; font-weight: 600; }
.pb-spec-more a { color: var(--teal-dark); }
.pb-spec-more:hover a { color: var(--teal); }
/* Reveal en cascade (.pb-in vient de pages.js, aucun JS à modifier). */
.pb-speccloud.pb-reveal .pb-spec { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.pb-speccloud.pb-in .pb-spec { opacity: 1; transform: none; }
.pb-speccloud.pb-in .pb-spec:nth-child(1) { transition-delay: .02s }
.pb-speccloud.pb-in .pb-spec:nth-child(2) { transition-delay: .05s }
.pb-speccloud.pb-in .pb-spec:nth-child(3) { transition-delay: .08s }
.pb-speccloud.pb-in .pb-spec:nth-child(4) { transition-delay: .11s }
.pb-speccloud.pb-in .pb-spec:nth-child(5) { transition-delay: .14s }
.pb-speccloud.pb-in .pb-spec:nth-child(6) { transition-delay: .17s }
.pb-speccloud.pb-in .pb-spec:nth-child(7) { transition-delay: .20s }
.pb-speccloud.pb-in .pb-spec:nth-child(8) { transition-delay: .23s }
.pb-speccloud.pb-in .pb-spec:nth-child(9) { transition-delay: .26s }
.pb-speccloud.pb-in .pb-spec:nth-child(10) { transition-delay: .29s }
.pb-speccloud.pb-in .pb-spec:nth-child(n+11) { transition-delay: .32s }

/* ─── Footer (clone de la home) ────────────────────────────────────────── */
.pb-footer {
  background: var(--cream);
  border-top: 1px solid var(--ink-10);
  text-align: center;
  padding: 3rem 2rem 2rem;
}
.pb-footer .pb-flogo { display: inline-block; }
.pb-footer .pb-flogo img { width: auto; height: 30px; margin: 0 auto; display: block; }
.pb-fdesc { color: var(--ink-40); margin: .4rem 0 1.5rem; font-size: .82rem; font-weight: 300; }
.pb-flinks { flex-wrap: wrap; justify-content: center; gap: 2rem; margin-bottom: 1.5rem; display: flex; }
.pb-flinks a { color: var(--ink-40); font-size: .82rem; transition: color .15s; }
.pb-flinks a:hover { color: var(--ink); }
.pb-fcopy { color: var(--ink-40); font-size: .78rem; }

/* Masque en mobile (identique .pb-cta-full de la home) */
.pb-cta-full { display: inline; }

/* ─── Formulaire de contact (contact.html) ─────────────────────────────────
   Aucune classe form n'existait : on aligne le look sur .pb-card (fond blanc,
   bordure --ink-10, radius 18px, --shadow-sm) et sur le focus teal de la charte. */
.pb-form {
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--ink-10);
  box-shadow: var(--shadow-sm);
  border-radius: 18px;
  padding: 2.2rem;
}

.pb-field { margin-bottom: 1.3rem; }

.pb-label {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--font-sans);
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
}
.pb-label-opt { margin-left: .35rem; font-weight: 400; font-size: .78rem; color: var(--ink-40); }

.pb-input,
.pb-textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--ink-20);
  border-radius: 12px;
  padding: .7rem .9rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.pb-input::placeholder,
.pb-textarea::placeholder { color: var(--ink-40); }
.pb-input:hover,
.pb-textarea:hover { border-color: var(--ink-40); }

/* Focus par border+box-shadow (pas outline) pour rester dans la carte ;
   le :focus-visible global clavier reste actif en filet a11y. */
.pb-input:focus,
.pb-textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-15);
}

.pb-textarea { min-height: 140px; resize: vertical; }

.pb-form-actions { display: flex; justify-content: center; margin-top: 1.6rem; }

/* Page contact : resserre l'écart entre son en-tête et le bloc qui suit (les paddings de
   .pb-hero, .pb-section-tight et .pb-section se cumulaient). Scopé pour ne pas toucher
   les autres pages vitrine. Le formulaire garde le rythme d'une section (.pb-section) ;
   son titre facultatif est centré au-dessus de la carte (spec bloc-integration, DI-8). */
.pb-contact-hero { padding-top: 3.5rem; padding-bottom: 1rem; }
.pb-contact-form-section .pb-h2 { text-align: center; }

/* Zone de retour succès/erreur, masquée tant que vide. */
.pb-form-msg { margin-top: 1.2rem; padding: .8rem 1rem; border-radius: 12px; font-size: .9rem; line-height: 1.5; }
.pb-form-msg:empty { display: none; }
.pb-form-msg--ok { background: var(--teal-light); border: 1px solid var(--teal-10); color: var(--teal-dark); }
/* Rouge charte-compatible (désaturé, chaud) — seul rouge hardcodé : la palette
   n'en contient pas. À tokeniser si un rouge de marque est défini. */
.pb-form-msg--err { background: var(--red-light); border: 1px solid var(--red-vif-20); color: var(--red); }

.pb-form-legal { margin-top: 1.4rem; font-size: .78rem; line-height: 1.5; color: var(--ink-40); }
.pb-form-legal a { color: var(--teal); text-decoration: underline; }

/* Honeypot : hors flux, invisible, hors tabulation (rejet côté route si rempli). */
.pb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* D-88 et D-89 (11/10/2026) : sous 1 100 px, seul le premier lien de la barre reste ; sous 900 px, dans sa partie visible
   en mobile. Trois liens de 60 caractères en tout tiennent sur une ligne à partir de 1 100 px (mesuré : 67 à 74). */
@media (max-width: 1099px) {
  .pb-nav-plus { display: none; }
}

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pb-topbar { height: 56px; padding: .6rem 1.2rem 0; }
  .pb-logo img { height: 30px; }
  .pb-main { padding-top: 56px; }
  .pb-link { padding: .5rem .6rem; font-size: .82rem; }
  .pb-ghost, .pb-cta { padding: .5rem 1rem; font-size: .82rem; }
  .pb-cta-full { display: none; }

  .pb-cards, .pb-cards-2 { grid-template-columns: 1fr; }
  .pb-speccloud { justify-content: flex-start; gap: .5rem; }
  .pb-spec { font-size: .85rem; padding: .3rem .8rem .3rem .35rem; }
  .pb-spec-ic { width: 24px; height: 24px; }
  .pb-spec-ic svg { width: 14px; height: 14px; }
  .pb-steps { grid-template-columns: 1fr; gap: 1.6rem; }
  .pb-step { padding-top: 0; padding-left: 3.4rem; }
  .pb-step:before { width: 36px; height: 36px; }
  .pb-panel-grid { grid-template-columns: 1fr; }
  .pb-panel { padding: 1.8rem; }

  .pb-legal { grid-template-columns: 1fr; gap: 0; }
  .pb-toc { display: none; }
  .pb-legal-toc-mobile { display: block; margin-bottom: 2rem; }
  .pb-legal-toc-mobile summary { cursor: pointer; font-weight: 600; padding: .8rem 0; }
  .pb-prose { max-width: none; }

  /* Hero deux colonnes → colonne unique, cartes sous le texte */
  .pb-hero-split { padding: 4.5rem 0 3rem; text-align: center; }
  .pb-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .pb-hero-copy { max-width: none; margin: 0 auto; }
  .pb-hero-copy .pb-cta-row { justify-content: center; }
  .pb-hero-stack { order: 2; max-width: 420px; margin: 0 auto; width: 100%; }
  .pb-hecard-off1, .pb-hecard-off2 { margin-left: 0; }

  /* Démos / stats / timeline empilées */
  .pb-bigstats { grid-template-columns: 1fr; }
  .pb-demo-row, .pb-demo-reverse { grid-template-columns: 1fr; gap: 1.8rem; }
  .pb-demo-reverse .pb-demo-text { order: 0; }
  .pb-timeline { grid-template-columns: 1fr; gap: 2rem; }
  .pb-timeline:before { display: none; }
  .pb-floatcta { right: 1rem; bottom: 1rem; }
}

@media (max-width: 640px) {
  .pb-demo-ba { grid-template-columns: 1fr; }
  .pb-ba-arrow { transform: rotate(90deg); }

  .pb-form { max-width: none; padding: 1.6rem; }
  .pb-form-actions { justify-content: stretch; }
  .pb-form-actions .pb-btn-big { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .pb-container { padding: 0 1.2rem; }
  .pb-section { padding: 3.5rem 0; }
  .pb-hero { padding: 6rem 0 3rem; }
  .pb-cta-row { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pb-speccloud .pb-spec { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ─── Bloc d'intégration tierce (spec bloc-integration, 2026-10-10 ; apps/web/src/blocs/pb/Integration.astro) ───
   Centré, comme .pb-cta-block (DI-7, 2026-10-20) : le titre, le texte (640 px au plus), puis, au clic, le bouton de la
   famille (.pb-btn-big) seul, sans cadre (la façade reste au gabarit, sans règle), qui ouvre la fenêtre modale ci-dessous ;
   chargement immédiat : l'iframe seule, en bloc, sur toute la largeur. Hauteur fixée par l'attribut height (200 à
   2 000 px). Le texte du bouton (80 caractères au plus) revient à la ligne, en lignes équilibrées, et reste centré ;
   sous 560 px, sa marge intérieure latérale passe à 1,2rem, sans quoi un libellé long déborde à 375 px. */
.pb-integration { text-align: center; }
.pb-integration-text { color: var(--ink-70); font-size: 1.05rem; max-width: 640px; margin: 0 auto 1.4rem; text-wrap: balance; }
.pb-integration-btn { max-width: 100%; min-width: 0; text-align: center; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }
.pb-integration-iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 16px;
  background: var(--white);
}

/* Fenêtre modale de la façade (DI-6, 2026-10-20 ; revue le 24/10/2026 à la demande de Fabien : « je vois les ascenseurs de
   chaque côté de la modale ») : le <dialog> que crée /assets/facade-integration.js, dans le cadre .pb-page du bouton, dont il
   hérite les jetons. Une seule surface de défilement, le document tiers dans l'iframe, et seulement si l'écran est trop bas :
   la fenêtre ne défile jamais (overflow: hidden) ; sa largeur est celle des trois colonnes du booker de cal.com (1 180 px, ou
   l'écran moins 2rem) ; sa hauteur, celle du contenu (`hauteur` du contenu, que le script pose en --pb-integration-contenu)
   plus sa tête, bornée à l'écran moins 2rem ; l'iframe emplit tout sous la tête (flex: 1 1 auto, sans attribut height : il
   ne sert qu'au chargement immédiat). Charte : fond cream (aucun blanc derrière l'iframe le temps qu'elle charge), tête fine
   de 56 px, le titre en serif (.pb-h3) et le bouton de fermeture en icône (cible de 44 px, son libellé pour les lecteurs
   d'écran seulement), voile ink-40 flouté de 4 px (le voile de la plateforme, Modal.tsx), ombre shadow-lg, rayon 16 px, entrée en fondu avec une légère translation
   (180 ms), coupée par prefers-reduced-motion ; color-scheme: light, le site n'ayant pas de mode sombre. Sous 560 px, la
   rupture « téléphone » des pages : plein écran, sans rayon ni ombre. Le flex n'est posé que sur la fenêtre ouverte : sur le
   <dialog> fermé, il l'afficherait. La page ne défile pas tant qu'elle est ouverte. */
.pb-integration-fenetre {
  --pb-integration-tete: 56px;
  width: min(1180px, 100vw - 2rem);
  height: min(calc(var(--pb-integration-contenu, 720px) + var(--pb-integration-tete)), 100dvh - 2rem);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  color-scheme: light;
  background: var(--cream);
  border: 0;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}
.pb-integration-fenetre[open] { display: flex; flex-direction: column; animation: pb-integration-entree .18s var(--ease); }
.pb-integration-fenetre::backdrop { background: var(--ink-40); backdrop-filter: blur(4px); animation: pb-integration-voile .18s var(--ease); }
:root:has(.pb-integration-fenetre[open]) { overflow: hidden; }
@keyframes pb-integration-entree { from { opacity: 0; transform: translateY(12px); } }
@keyframes pb-integration-voile { from { opacity: 0; } }
.pb-integration-fenetre-tete {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-sizing: border-box;
  min-height: var(--pb-integration-tete);
  padding: 0 .375rem 0 1.25rem;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.pb-integration-fenetre-titre { margin: 0; min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }
.pb-integration-fermer {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  color: var(--ink-70);
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.pb-integration-fermer:hover { color: var(--ink); background: var(--ink-08); }
.pb-integration-fermer:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pb-integration-fermer svg { display: block; width: 20px; height: 20px; }
/* Le libellé du bouton, pour les lecteurs d'écran seulement : réduit à un point, hors du rendu, sans sortir de la fenêtre. */
.pb-integration-fermer-libelle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pb-integration-fenetre .pb-integration-iframe { flex: 1 1 auto; min-height: 0; height: auto; border-radius: 0; background: var(--cream); }

@media (max-width: 560px) {
  .pb-integration-btn { padding-left: 1.2rem; padding-right: 1.2rem; }
  .pb-integration-fenetre { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-integration-fenetre[open], .pb-integration-fenetre::backdrop { animation: none; }
}

/* Le bouton FR/EN de la barre (src/components/chrome/BoutonDeLangue.astro ; spec site-astro, REQ-6 ; D-17 du 23/10) : le lien
   texte de la barre (.pb-link : même police, couleur et survol), en petit, dernier contrôle après l'appel ; cible de 44 px
   (WCAG 2.5.5). Ses deux classes (0,2,0) l'emportent sur ce que .pb-link (0,1,0) reçoit plus bas : il garde son retrait sous
   900 px et reste visible sous 360 px, où le lien de retour s'efface. */
.pb-link.pb-langue { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 .75rem; font-size: .82rem; display: inline-flex; }

/* La barre en mobile avec le bouton FR/EN (tâche 2.1 ; correctif du 22/10/2026). Ses 44 px et son écart ont pris la place
   que la barre de la base laissait libre : sous 900 px, logo, « ← accueil », EN et « Certifier → » dépassaient la boîte de
   contenu dès 375 px (mesuré : 18 px), et flex repliait le libellé du bouton plein, seul élément rétrécissable, sur deux
   lignes. Le libellé ne se replie plus (comme .pb-link) ; le lien de retour perd son retrait horizontal (son texte n'a ni
   fond ni bordure, les écarts de la barre l'espacent) ; le bouton plein prend le retrait du petit bouton de la charte
   (§3, 12 px). Sous 360 px, rien n'y suffit (73 px manquent à 320 px) : le lien de retour s'efface, comme les liens de
   la barre de l'accueil sous 1 100 px ; le logo mène déjà à l'accueil. */
.pb-cta { white-space: nowrap; }
@media (max-width: 900px) {
  .pb-link { padding-left: 0; padding-right: 0; }
  .pb-cta { padding-left: .8rem; padding-right: .8rem; }
}
@media (max-width: 359px) {
  .pb-link { display: none; }
}