/* Page /reco-zone — module Reco zone (préfixe md-reco-zone-, s'appuie sur pages.css).
 * Téléphone en héro, six facteurs avec leur texte réel, maquette du PDF.
 */
.md-reco-zone-shot { position: relative; justify-self: center; width: min(280px, 76%); margin: 0; }
.md-reco-zone-shot::before { content: ""; position: absolute; inset: 10% -10% 8%; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .5;
  background: radial-gradient(circle, rgba(52,211,153,.35), rgba(79,195,247,.2) 50%, transparent 70%); }
.md-reco-zone-shot img { display: block; width: 100%; height: auto; filter: drop-shadow(0 34px 54px rgba(0,0,0,.55));
  transform: perspective(1200px) rotateY(-10deg) rotateX(3deg); }

/* ── Six facteurs ── */
.md-reco-zone-factors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.md-reco-zone-factors .pg-card { display: flex; flex-direction: column; gap: 10px; }
.md-reco-zone-factors .n { font: 800 13px 'JetBrains Mono', ui-monospace, monospace; color: var(--c2); }
.md-reco-zone-factors h3 { margin: 0; }
.md-reco-zone-factors pre { flex: 1; margin: 0; padding: 10px 12px; border-radius: 10px; background: #0a0f18; border: 1px solid #1f2d45;
  font: 12px/1.6 'JetBrains Mono', ui-monospace, monospace; color: #c9d6e8; white-space: pre-wrap; }
.md-reco-zone-factors .pg-chip { align-self: flex-start; }

/* ── Maquette PDF ── */
.md-reco-zone-pdfwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: center; margin-top: 18px; }
.md-reco-zone-paper { position: relative; aspect-ratio: 210 / 297; max-width: 400px; width: 100%; justify-self: center; padding: 6% 6.5%; border-radius: 6px;
  background: #fbfaf7; color: #1b2433; box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  transform: rotate(-2deg); transition: transform .4s ease; font-family: Inter, sans-serif; overflow: hidden; }
.md-reco-zone-paper:hover { transform: rotate(0) scale(1.02); }
.md-reco-zone-paper .hd { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 2px solid #ff6b35; }
.md-reco-zone-paper .logo { width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #ff5a3c, #f24cc0); color: #fff;
  font: 800 9px/22px Inter, sans-serif; text-align: center; }
.md-reco-zone-paper .hd b { font-size: 9.5px; letter-spacing: .08em; }
.md-reco-zone-paper .hd small { display: block; font-size: 7.5px; color: #5b6678; letter-spacing: 0; }
.md-reco-zone-paper .hd time { margin-left: auto; font-size: 7.5px; color: #5b6678; }
.md-reco-zone-paper .ctx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 8px 0; }
.md-reco-zone-paper .ctx span { padding: 4px 5px; border-radius: 4px; background: #eef1f6; font-size: 6.8px; color: #445066; line-height: 1.3; }
.md-reco-zone-paper .ctx span b { display: block; font-size: 8px; color: #1b2433; }
.md-reco-zone-paper .ctx .ifm { background: #ffe4d6; }
.md-reco-zone-paper .f { margin: 5px 0; padding: 5px 6px; border-radius: 4px; border: 1px solid #e3e7ee; }
.md-reco-zone-paper .f i { font-style: normal; font-weight: 800; font-size: 7.5px; color: #1b2433; }
.md-reco-zone-paper .f .a { margin-top: 3px; height: 5px; border-radius: 2px; background: #e8ebf0; width: 92%; }
.md-reco-zone-paper .f .a + .a { width: 70%; }
.md-reco-zone-paper .f .m { margin-top: 3px; padding-left: 5px; border-left: 2px solid #ff6b35; font-size: 6.5px; color: #6a7384; }
.md-reco-zone-paper .sig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin-top: 8px; }
.md-reco-zone-paper .sig span { height: 28px; border: 1px dashed #b9c1ce; border-radius: 4px; font-size: 6.5px; color: #6a7384; padding: 3px 4px; }
.md-reco-zone-paper .ft { position: absolute; left: 6.5%; right: 6.5%; bottom: 3%; display: flex; justify-content: space-between; font-size: 6px; color: #7a8394; }

@media (max-width: 1000px) {
  .md-reco-zone-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-reco-zone-pdfwrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .md-reco-zone-shot { width: min(230px, 66%); }
  .md-reco-zone-factors { grid-template-columns: minmax(0, 1fr); }
  .md-reco-zone-paper { max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) { .md-reco-zone-paper, .md-reco-zone-paper:hover { transform: none; transition: none; } }
/* La colonne de contenu ne doit pas s'élargir à la largeur d'un tableau ou d'un bloc préformaté */
.md-reco-zone .pg-layout > div { min-width: 0; }

/* H1 orienté requête ; la phrase narrative passe en sous-titre juste dessous (oct. 2026). */
.kd-h1s { font-size: clamp(21px, 2.7vw, 30px); line-height: 1.2; letter-spacing: -.015em; font-weight: 700; color: #e6edf6;
  margin: -4px 0 18px; max-width: 680px; text-wrap: balance; }

/* Maillage interne en pied de page : termes du glossaire et autres modules (modules/_liens.php). */
.kd-rel { display: grid; gap: 10px; margin-top: 22px; }
.kd-rel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.kd-rel-row > b { font: 700 12px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim, #6f809b); }
.kd-rel-row .pg-meta { margin-top: 0; gap: 6px; }
.kd-rel-row .pg-meta a { padding: 5px 10px; font-size: 12.5px; }