/* =====================================================
   PrivateSource — blog.css
   Styles des pages du cocon /blog/ (articles PHP statiques).
   Chargé avec tokens.css + base.css — jamais avec landing.css.
   Le bloc formulaire est copié de landing.css (2e surface :
   Rule of Three CLAUDE.md — factoriser dans base.css si une
   3e surface apparaît).
   ===================================================== */

/* ----- Layout de lecture ----- */
.post-main {
  background: var(--ps-bg-card);
  /* Garde-fou : 100vw (cf. .post-figure--wide) inclut la largeur de la
     scrollbar verticale — sans ce clip, un débord peut créer un scroll
     horizontal. `clip` plutôt que `hidden` : ne crée pas de conteneur de
     défilement, donc n'altère pas le saut aux ancres du sommaire. */
  overflow-x: clip;
}
.post {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}

/* ----- Fil d'Ariane ----- */
.post-breadcrumb {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 0;
}
.post-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--ps-text-secondary);
}
.post-breadcrumb li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--ps-border);
}
.post-breadcrumb a {
  color: var(--ps-text-secondary);
  text-decoration: none;
}
.post-breadcrumb a:hover,
.post-breadcrumb a:focus-visible {
  color: var(--ps-text);
  text-decoration: underline;
}

/* ----- En-tête d'article ----- */
.post-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-primary);
  margin-bottom: 18px;
}
.post h1 {
  font-family: var(--font-sans);
  font-weight: 650;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ps-text);
  margin: 0 0 18px;
}
.post h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ps-primary);
}
.post-byline {
  font-size: var(--fs-small);
  color: var(--ps-text-secondary);
  margin-bottom: 36px;
}
.post-byline a {
  color: inherit;
}

/* ----- Réponse directe (couche GEO) ----- */
.post-answer {
  border-left: 3px solid var(--ps-primary);
  background: var(--ps-primary-light);
  border-radius: 0 var(--ps-radius-md) var(--ps-radius-md) 0;
  padding: 18px 22px;
  margin: 0 0 36px;
}
.post-answer p {
  margin: 0;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ps-text-body);
}

/* ----- Corps de texte ----- */
.post h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ps-text);
  margin: 48px 0 16px;
}
.post h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ps-text);
  margin: 32px 0 10px;
}
.post p,
.post li {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ps-text-body);
}
.post p { margin: 0 0 18px; }
.post ul,
.post ol { margin: 0 0 18px; padding-left: 24px; }
.post li { margin-bottom: 8px; }
.post a {
  color: var(--ps-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post a:hover,
.post a:focus-visible {
  color: var(--ps-primary-dark);
}
.post strong { color: var(--ps-text); }

/* ----- Tableaux comparatifs ----- */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 24px;
  border: 1px solid var(--ps-border-light);
  border-radius: var(--ps-radius-md);
  box-shadow: var(--ps-shadow-ring);
}
.post table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: var(--fs-small);
}
.post caption {
  caption-side: top;
  text-align: left;
  padding: 12px 14px;
  font-size: var(--fs-small);
  /* --ps-text-muted : contraste 7:1 sur --ps-bg-hover (WCAG AA exige 4,5:1 ;
     --ps-text-secondary n'atteignait que 4,44:1) */
  color: var(--ps-text-muted);
  background: var(--ps-bg-hover);
  border-bottom: 1px solid var(--ps-border-light);
}
.post th,
.post td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ps-border-light);
  vertical-align: top;
}
.post thead th {
  background: var(--ps-bg-hover);
  font-weight: 600;
  color: var(--ps-text);
  white-space: nowrap;
}
.post tbody tr:last-child th,
.post tbody tr:last-child td {
  border-bottom: none;
}
.post tbody th[scope="row"] {
  font-weight: 600;
  color: var(--ps-text);
}

/* ----- FAQ d'article ----- */
.post-faq {
  margin-top: 48px;
}
.post-faq .faq-item {
  border-top: 1px solid var(--ps-border-light);
  padding: 22px 0;
}
.post-faq .faq-item:last-child {
  border-bottom: 1px solid var(--ps-border-light);
}
.post-faq h3 {
  margin: 0 0 10px;
}
.post-faq p {
  margin: 0;
}

/* ----- Encadré CTA e-mail ----- */
.post-cta {
  margin-top: 56px;
  padding: 36px 28px;
  background: var(--ps-bg-app);
  border: 1px solid var(--ps-border-light);
  border-radius: var(--ps-radius-lg);
}
.post-cta h2 {
  margin: 0 0 12px;
}
.post-cta > p {
  margin-bottom: 22px;
}

/* ----- Conclusion / maillage sortant ----- */
.post-outro {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--ps-border-light);
}

/* ----- Formulaire e-mail (copie landing.css L93-158) ----- */
.form-c {
  margin: 0 auto;
  max-width: 560px;
  text-align: left;
}
.form-c .form-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.form-c input[type="email"] {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 16px 18px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-md);
  background: var(--ps-bg-card);
  color: var(--ps-text);
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.form-c input[type="email"]::placeholder {
  color: var(--ps-text-secondary);
}
.form-c input[type="email"]:focus {
  outline: none;
  border-color: var(--ps-primary);
  box-shadow: 0 0 0 3px rgba(var(--ps-primary-rgb), 0.15);
}
.form-c .btn-primary {
  white-space: nowrap;
}
.form-reassure {
  margin-top: 18px;
  font-size: var(--fs-small);
  color: var(--ps-text-secondary);
  text-align: center;
}
.form-rgpd-notice {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ps-text-muted);
  text-align: center;
}
.form-rgpd-notice a {
  color: var(--ps-text-muted);
  text-decoration: underline;
}
.form-rgpd-notice a:hover { color: var(--ps-text); }

/* ----- Liste d'articles (/blog/) ----- */
.post-list {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
}
.post-list li {
  border-top: 1px solid var(--ps-border-light);
  padding: 26px 0;
}
.post-list li:last-child {
  border-bottom: 1px solid var(--ps-border-light);
}
.post-list h2 {
  margin: 0 0 8px;
  font-size: var(--fs-h3);
}
.post-list h2 a {
  color: var(--ps-text);
  text-decoration: none;
}
.post-list h2 a:hover,
.post-list h2 a:focus-visible {
  color: var(--ps-primary);
  text-decoration: underline;
}
.post-list p {
  margin: 0;
}
.post-list .post-byline {
  margin: 8px 0 0;
}

/* =====================================================
   Composants de confort de lecture (ajout 2026-07-09)
   Enrichissent les articles longs : illustration, encadrés,
   note du fondateur, étapes numérotées, citation en exergue.
   100 % basés sur tokens.css — aucune couleur en dur.
   ===================================================== */

/* ----- Images & figures ----- */
.post img {
  max-width: 100%;
  height: auto;
}
.post-figure {
  margin: 36px 0;
}
.post-figure img {
  display: block;
  width: 100%;
  border: 1px solid var(--ps-border-light);
  border-radius: var(--ps-radius-lg);
  box-shadow: var(--ps-shadow-ring);
}
/* Schéma SVG fait maison (concepts) — même cadre que les images */
.post-diagram {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ps-border-light);
  border-radius: var(--ps-radius-lg);
  background: var(--ps-bg-card);
}
.post-figure figcaption {
  margin-top: 12px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ps-text-muted); /* AA sur fond blanc et fond clair (>7:1) */
  text-align: center;
}
/* Illustration élargie : déborde la colonne de lecture (720 px) pour occuper
   75 % de la fenêtre — ces schémas portent du texte fin, illisible à la
   largeur d'une colonne de lecture. Même technique de débord que
   .problem-figure sur la landing. Neutralisée sous 860 px (cf. Responsive).
   clamp() : jamais plus étroite que la colonne, jamais au-delà de 1500 px
   (les sources font 1491 à 1693 px de large — au-delà, on agrandirait un
   pixel au-delà de sa définition, donc on floute). */
.post-figure--wide {
  width: clamp(100%, 75vw, 1500px);
  margin-left: 50%;
  transform: translateX(-50%);
}
.post-figure--wide img {
  box-shadow: var(--ps-shadow-lift);
}
/* Au-delà de ~70 caractères par ligne l'œil perd la ligne suivante : la
   légende garde une longueur lisible même sous une image de 1040 px. */
.post-figure--wide figcaption {
  max-width: 68ch;
  margin-inline: auto;
}
/* Agrandissement : l'image est un lien vers le fichier pleine résolution.
   Le visualiseur natif du navigateur assure le zoom (pinch tactile, clavier)
   sans une ligne de JavaScript ; le focus vient de base.css. */
/* `.post a` est plus spécifique (0-1-1) que `.post-figure-zoom` seul :
   le sélecteur doit le rejoindre pour annuler le soulignement. */
.post a.post-figure-zoom {
  display: block;
  position: relative;
  cursor: zoom-in;
  text-decoration: none;
}
.post-figure-zoom img {
  transition: box-shadow 160ms ease;
}
.post-figure-zoom:hover img {
  box-shadow: var(--ps-shadow-lift-hover);
}
/* Pastille loupe : rend l'agrandissement découvrable là où le curseur ne dit
   rien (tactile). Discrète au repos, franche au survol et au focus clavier. */
.post-figure-zoom::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94) center / 20px 20px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212529' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.8-3.8M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E");
  box-shadow: var(--ps-shadow-lift);
  opacity: 0.55;
  transition: opacity 160ms ease;
}
.post-figure-zoom:hover::after,
.post-figure-zoom:focus-visible::after {
  opacity: 1;
}

/* ----- Modale d'agrandissement (élément <dialog> natif) -----
   Créée par post-lightbox.js. Sans JavaScript, les liens conservent leur
   comportement : ouverture du fichier image dans un nouvel onglet. */
.post-lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 24px;
  border: 0;
  /* Fond porté par le dialog lui-même, pas seulement par ::backdrop : la
     couverture est ainsi garantie même là où le backdrop n'est pas peint
     (anciens moteurs, captures automatisées). */
  background: rgba(13, 17, 23, 0.94);
  overflow: hidden;
}
/* `display` porté par [open] : sans cela, la valeur flex écraserait le
   `display: none` que le navigateur applique à un dialog fermé. */
.post-lightbox[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.post-lightbox::backdrop {
  background: rgba(13, 17, 23, 0.9);
}
/* Surface d'affichage : occupe la hauteur restante et laisse parcourir
   l'illustration quand elle dépasse (cf. média requête plus bas). */
.post-lightbox-canvas {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  overflow: auto;
  overscroll-behavior: contain;
}
/* L'illustration s'affiche à sa définition d'origine — c'est le maximum
   utile, au-delà on agrandirait un pixel au-delà de sa définition. Contenue
   dans l'écran, elle finirait plus petite que dans l'article sur un portable
   large et peu haut : l'agrandissement rétrécirait l'image. Quand elle
   dépasse, on la parcourt. */
.post-lightbox-img {
  /* `margin: auto` plutôt que justify/align-items : en contexte flex
     défilant, le centrage par le conteneur rend le débord gauche et haut
     inatteignable. */
  margin: auto;
  border-radius: var(--ps-radius-md);
}
.post-lightbox-caption {
  margin: 0;
  max-width: 68ch;
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88); /* >7:1 sur le fond de la modale */
}
.post-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px; /* cible tactile confortable */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: var(--ps-text);
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.post-lightbox-close:hover {
  background: #fff;
}
/* Bloque le défilement de la page derrière la modale. */
body:has(.post-lightbox[open]) {
  overflow: hidden;
}

/* ----- Encadrés (callouts) ----- */
.post-callout {
  margin: 28px 0;
  padding: 18px 22px;
  border-left: 3px solid var(--ps-border);
  border-radius: 0 var(--ps-radius-md) var(--ps-radius-md) 0;
  background: var(--ps-bg-hover);
}
.post-callout > :last-child { margin-bottom: 0; }
.post-callout-label {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  /* libellé texte + bord coloré = jamais de sens par la couleur seule (WCAG 1.4.1) */
  color: var(--ps-text-muted);
}
.post-callout--tip {
  border-left-color: var(--ps-success);
  background: var(--ps-success-light);
}
.post-callout--tip .post-callout-label { color: var(--ps-success-dark); }
.post-callout--warning {
  border-left-color: var(--ps-error);
  background: rgba(var(--ps-error-rgb), 0.05);
}
.post-callout--warning .post-callout-label { color: var(--ps-text); }
.post-callout--info {
  border-left-color: var(--ps-primary);
  background: var(--ps-primary-light);
}
.post-callout--info .post-callout-label { color: var(--ps-primary-dark); }

/* ----- Note du fondateur (voix + visage) ----- */
.post-founder {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 32px 0;
  padding: 22px;
  background: var(--ps-primary-light);
  border: 1px solid var(--ps-primary-border);
  border-radius: var(--ps-radius-lg);
}
.post-founder-avatar {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--ps-radius-pill);
  object-fit: cover;
  border: 2px solid var(--ps-bg-card);
  box-shadow: var(--ps-shadow-ring);
}
.post-founder-body > p { margin: 0 0 10px; }
.post-founder-body > :last-child { margin-bottom: 0; }
.post-founder-sign {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--ps-text-muted); /* AA sur fond bleu clair */
}

/* ----- Étapes / stratégies numérotées ----- */
.post-steps {
  counter-reset: post-step;
  margin: 24px 0;
}
.post-step {
  position: relative;
  padding-left: 60px;
  margin: 0 0 28px;
}
.post-step:last-child { margin-bottom: 0; }
.post-step::before {
  counter-increment: post-step;
  content: counter(post-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  color: var(--ps-primary);
  background: var(--ps-primary-light);
  border: 1px solid var(--ps-primary-border);
  border-radius: var(--ps-radius-pill);
}
.post-step h3 {
  margin: 6px 0 8px; /* aligne le titre sur le centre du badge */
}
.post-step p { margin: 0; }

/* ----- Citation mise en exergue ----- */
.post-pullquote {
  margin: 32px 0;
  padding: 6px 0 6px 26px;
  border-left: 3px solid var(--ps-primary);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--ps-text);
}
.post-pullquote p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* ----- Responsive ----- */
/* Sous ~860 px il n'y a plus de place pour un débord utile : l'illustration
   revient dans la colonne de lecture, en pleine largeur. */
@media (max-width: 860px) {
  .post-figure--wide {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
  .post-lightbox {
    padding: 12px;
  }
}
@media (max-width: 640px) {
  .post { padding: 32px 18px 60px; }
  /* Rythme resserré sans tasser : 28 px au lieu de 36 px. */
  .post-figure { margin: 28px 0; }
  .form-c .form-row { flex-direction: column; }
  .form-c .btn-primary { width: 100%; justify-content: center; }
  .post-cta { padding: 28px 18px; }
  .post-founder { flex-direction: column; gap: 12px; }
  .post-step { padding-left: 52px; }
}