/* =============================================================
   Page GEOPOL (VITRINE-S12, 25/09/2026) : feuille propre à la page, reprise de la proposition validée
   (_propositions/insta-geopol/claude/claude-v4/ig.css). Seuls ajouts au système E. Aucune animation sans le
   script du site ; transform et opacity seulement ; rien n'apparaît au défilement.
   ============================================================= */

/* [K-2] Texte sombre sur l'accent : 5,42:1 (comme les pages Méthode et INSTA). */
.d-page .btn-primary { color: var(--bg); }

/* [V-2] Titres de maquette : passage à la ligne plutôt que points de suspension. */
.d-page .screen-bar { flex-wrap: wrap; row-gap: 6px; }
.d-page .screen-bar .t { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---------- Calques qui s'allument à tour de rôle (opacité seule) ---------- */
.gp-lit { position: relative; }
.gp-lit::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(10, 132, 255, 0.75); background: rgba(10, 132, 255, 0.10); opacity: 0; pointer-events: none; }
@keyframes gp-hit { 0%, 3% { opacity: 0; } 7%, 24% { opacity: 1; } 30%, 100% { opacity: 0; } }

/* ---------- Pastilles de cote (A1…C3) ---------- */
.gp-grade { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 6px; border-radius: 6px;
  font: 600 13px/1 'JetBrains Mono', monospace; border: 1px solid var(--border-strong); color: var(--text); background: rgba(255, 255, 255, 0.04); }
.gp-grade.a { color: var(--ok); border-color: rgba(74, 222, 128, 0.5); background: rgba(74, 222, 128, 0.08); }
.gp-grade.b { color: var(--blue-soft); border-color: rgba(124, 192, 255, 0.5); background: rgba(124, 192, 255, 0.08); }
.gp-grade.c { color: var(--warn); border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.08); }

/* =============================================================
   EN-TÊTE : le schéma de Codex (des canaux au brief), animé
   ============================================================= */
.gp-hero-fig { aspect-ratio: auto; }
.gp-hero-fig .screen { border: 0; border-radius: 0; }
.gp-flow { gap: 0; padding: clamp(14px, 2vw, 22px); background: radial-gradient(ellipse at 50% 0, var(--accent-soft), transparent 65%); font-family: 'Inter', sans-serif; }
.gp-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gp-channel { position: relative; min-width: 0; display: grid; justify-items: center; gap: 4px; padding: 12px 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: #101116; text-align: center; }
.gp-channel strong { font: 600 14px/1.3 'JetBrains Mono', monospace; color: var(--text); }
.gp-channel > span { font-size: 12px; line-height: 1.35; color: var(--text-muted); }
.gp-mark { position: relative; width: 24px; height: 24px; margin-bottom: 2px; border: 1px solid var(--blue-soft); border-radius: 50%; }
.gp-mark::before { content: ''; position: absolute; inset: 5px; border: 1px solid var(--blue-soft); border-radius: 50%; }
.gp-channel:nth-child(2) .gp-mark { border-radius: 5px; }
.gp-channel:nth-child(2) .gp-mark::before { border-radius: 0; border-width: 1px 0; inset: 6px 4px; }
.gp-channel:nth-child(3) .gp-mark::before { inset: 7px; background: var(--blue-soft); }
/* Le tuyau : trois gouttes partent des trois canaux et convergent vers les articles */
.gp-pipe { position: relative; display: grid; justify-items: center; align-content: center; height: 46px; font-size: 12px; color: var(--text-muted); }
.gp-pipe::before { content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(var(--border-strong), var(--blue-soft)); opacity: 0.7; }
.gp-pipe > span { position: relative; z-index: 1; padding: 2px 8px; border-radius: 999px; background: #0d0d11; }
.gp-drop { display: none; }
.d-js:not(.d-still) .gp-drop { display: block; position: absolute; inset: 0; pointer-events: none; animation: gp-drop 3s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: calc(var(--i) * 0.45s); animation-fill-mode: backwards; }
.gp-drop::before { content: ''; position: absolute; left: calc(50% - 3px); top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-soft); box-shadow: 0 0 10px 2px rgba(124, 192, 255, 0.7); }
@keyframes gp-drop { 0% { transform: translate(var(--dx, 0), 0); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(0, 100%); opacity: 0; } }
/* Les articles arrivent un à un, puis reçoivent leur cote */
.gp-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gp-article { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px 8px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #101116; }
.gp-article .gp-grade { grid-row: span 2; }
.gp-article .sk { height: 7px; }
.d-js:not(.d-still) .gp-article { animation: gp-land 9s ease-out infinite backwards; animation-delay: calc(0.6s + var(--i) * 0.5s); }
.d-js:not(.d-still) .gp-article .gp-grade { animation: gp-stamp 9s ease-out infinite backwards; animation-delay: calc(1s + var(--i) * 0.5s); }
@keyframes gp-land { 0% { opacity: 0.2; transform: translateY(-10px); } 7%, 92% { opacity: 1; transform: none; } 100% { opacity: 0.2; transform: translateY(-10px); } }
@keyframes gp-stamp { 0% { opacity: 0; transform: scale(1.6); } 6%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.6); } }
/* Le brief s'assemble : ses trois rubriques s'allument, dans l'ordre */
.gp-brief { position: relative; border: 1px solid var(--blue-soft); border-radius: var(--radius); background: #101116; overflow: hidden; }
.gp-brief-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.gp-brief-head strong { font-size: 14px; font-weight: 600; }
.gp-paper { position: relative; flex: 0 0 auto; width: 18px; height: 23px; border: 1px solid var(--blue-soft); border-radius: 3px; }
.gp-paper::after { content: ''; position: absolute; inset: 6px 4px; border-top: 1px solid var(--blue-soft); border-bottom: 1px solid var(--blue-soft); }
.gp-brief-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gp-brief-parts > div { display: grid; gap: 4px; align-content: start; padding: 11px 12px; }
.gp-brief-parts > div + div { border-left: 1px solid var(--border); }
.gp-brief-parts b { font-size: 13px; font-weight: 600; color: var(--text); }
.gp-brief-parts span { font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.gp-brief-parts > div::after { border-radius: 0; }
.d-js:not(.d-still) .gp-brief-parts > div::after { animation: gp-hit 9s infinite backwards; animation-delay: calc(3.2s + var(--i) * 0.7s); }
/* les canaux s'allument quand leur goutte part */
.d-js:not(.d-still) .gp-channel.gp-lit::after { animation: gp-glow 3s infinite backwards; animation-delay: calc(var(--i) * 0.45s); }
@keyframes gp-glow { 0%, 4% { opacity: 0; } 12%, 30% { opacity: 1; } 45%, 100% { opacity: 0; } }   /* même cycle que les gouttes */
@media (max-width: 900px) { .d-hero .gp-hero-fig { order: 0; } }   /* [V-1] titre d'abord sur téléphone */
@media (max-width: 600px) {
  .gp-article { grid-template-columns: 1fr; justify-items: center; padding: 9px 5px; text-align: center; }
  .gp-article .gp-grade { grid-row: auto; }
  .gp-brief-parts { grid-template-columns: 1fr; }
  .gp-brief-parts > div + div { border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 420px) { .gp-channels, .gp-articles { gap: 7px; } }

/* =============================================================
   PARCOURS — une animation par étape, fidèle à ce que fait le code (rapport de vérification du 25/09)
   ============================================================= */
.gp-collect .screen-body, .gp-dedup .screen-body, .gp-rate .screen-body, .gp-enrich .screen-body, .gp-draft .screen-body { gap: 12px; font-family: 'Inter', sans-serif; }

/* 01 · Collecter : la question, l'aiguillage (une famille l'emporte), trois couloirs chronométrés */
.gp-question { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: #0b0c10; }
.gp-question .sk { flex: 1; }
.gp-caret { width: 2px; height: 16px; background: var(--blue-soft); }
.d-js:not(.d-still) .gp-caret { animation: gp-blink 1.1s steps(2, start) infinite; }
@keyframes gp-blink { to { opacity: 0; } }
.gp-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 12px/1.3 'JetBrains Mono', monospace; color: var(--text-muted); }
.gp-route > span:first-child { margin-right: 4px; letter-spacing: 0.06em; text-transform: uppercase; }
.gp-winner { position: relative; }
.gp-winner::after { content: ''; position: absolute; inset: -4px; border-radius: 999px; border: 1px solid rgba(74, 222, 128, 0.7); opacity: 0; pointer-events: none; }
.d-js:not(.d-still) .gp-winner::after { animation: gp-ring 4s ease-out infinite; }
@keyframes gp-ring { 0%, 50% { opacity: 0; transform: scale(0.92); } 60% { opacity: 1; transform: scale(1); } 85%, 100% { opacity: 0; transform: scale(1.1); } }
.gp-lanes { display: grid; gap: 8px; }
.gp-lane { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) minmax(0, 0.9fr) 3em; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; background: rgba(255, 255, 255, 0.03); font-size: 12.5px; color: var(--text-muted); }
.gp-lane strong { font: 600 13px 'JetBrains Mono', monospace; color: var(--text); }
.gp-lane b { font: 600 12px 'JetBrains Mono', monospace; color: var(--text); text-align: right; }
.gp-lane-note { min-width: 0; }
.gp-pips { display: flex; gap: 5px; }
.gp-pips i { width: 10px; height: 10px; border-radius: 3px; background: var(--blue-soft); opacity: 0.9; }
.gp-timer { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.gp-timer i { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--blue-soft)); transform-origin: left; }
/* avec le script : les cinq recherches web s'allument l'une après l'autre ; chaque couloir remplit son délai */
.d-js:not(.d-still) .gp-pips i { animation: gp-pip 5s infinite backwards; animation-delay: calc(var(--k) * 0.5s); }
@keyframes gp-pip { 0% { opacity: 0.2; transform: scale(0.7); } 8%, 85% { opacity: 0.9; transform: none; } 100% { opacity: 0.2; transform: scale(0.7); } }
.d-js:not(.d-still) .gp-timer i { animation: gp-fill 5s ease-in-out infinite backwards; animation-delay: calc(var(--i) * 0.25s); }
@keyframes gp-fill { 0% { transform: scaleX(0); } 70%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* 02 · Dédoublonner : le jumeau glisse sur l'original, s'estompe et devient « relais » */
.gp-row { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: rgba(255, 255, 255, 0.03); }
.gp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.gp-twin { opacity: 0.45; border-style: dashed; }
.gp-twin .gp-dot { background: var(--text-faint); }
.gp-strike { position: absolute; left: 30px; right: 90px; top: 50%; height: 1px; background: var(--text-muted); transform-origin: left; }
.gp-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding-top: 6px; border-top: 1px solid var(--border); font: 500 12px/1.4 'JetBrains Mono', monospace; color: var(--text-muted); }
.gp-legend b { color: var(--ok); font-weight: 600; }
.d-js:not(.d-still) .gp-twin { animation: gp-twin 6s ease-in-out infinite backwards; }
.d-js:not(.d-still) .gp-twin .gp-strike { animation: gp-strike 6s ease-in-out infinite backwards; }
@keyframes gp-twin { 0% { opacity: 1; transform: translateY(-44px); } 18% { opacity: 1; transform: translateY(-44px); } 38% { opacity: 1; transform: none; } 52%, 92% { opacity: 0.45; transform: none; } 100% { opacity: 1; transform: translateY(-44px); } }
@keyframes gp-strike { 0%, 45% { transform: scaleX(0); } 58%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* 03 · Coter : la jauge 50 / 30 / 20 se remplit ; des cartes tombent dans les couloirs A, B, C */
.gp-bars { display: grid; gap: 9px; }
.gp-bar { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 3.4em; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
.gp-bar b { font: 600 12px 'JetBrains Mono', monospace; color: var(--text); text-align: right; }
.gp-track { position: relative; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.gp-track i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 4px; background: var(--accent); transform-origin: left; }
.gp-bins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.gp-bin { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 104px; padding: 8px 6px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.02); }
.gp-bin small { font-size: 12px; color: var(--text-muted); }
.gp-card { display: block; width: 72%; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); }
.d-js:not(.d-still) .gp-bar .gp-track i { animation: gp-fill 7s ease-in-out infinite backwards; animation-delay: calc(var(--i) * 0.3s); }
.d-js:not(.d-still) .gp-card { animation: gp-fall 7s cubic-bezier(.3, .8, .4, 1) infinite backwards; animation-delay: calc(1.6s + var(--i) * 0.6s); }
@keyframes gp-fall { 0% { opacity: 0; transform: translateY(-40px); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* 04 · Enrichir : la chronologie se range, puis les deux origines de désaccord */
.gp-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; display: grid; gap: 8px; }
.gp-timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--border-strong); }
.gp-timeline li { position: relative; display: grid; grid-template-columns: 3.4em minmax(0, 1fr); align-items: center; gap: 10px; }
.gp-timeline li::before { content: ''; position: absolute; left: -17px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--blue-soft); }
.gp-timeline b { font: 600 12px 'JetBrains Mono', monospace; color: var(--text); }
.gp-div { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.gp-div-row { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); align-items: center; gap: 10px; }
.gp-div-row .chip { justify-self: start; }
.gp-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.gp-vs em { font: 600 14px 'JetBrains Mono', monospace; font-style: normal; color: var(--warn); }
.d-js:not(.d-still) .gp-timeline li { animation: gp-land 8s ease-out infinite backwards; animation-delay: calc(var(--i) * 0.45s); }
.d-js:not(.d-still) .gp-vs em { animation: gp-pulse 2.4s ease-in-out infinite; }
@keyframes gp-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.7; } }

/* 05 · Synthétiser : les rubriques hors gabarit sont barrées puis s'effacent ; la note se remplit */
.gp-sec { position: relative; display: grid; grid-template-columns: 9.6em minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: rgba(255, 255, 255, 0.03); font: 500 12px 'JetBrains Mono', monospace; color: var(--text); }
.gp-sec.is-ghost { opacity: 0.35; border-style: dashed; color: var(--text-muted); }
.gp-sec.is-ghost .gp-strike { left: 10px; right: 10px; background: var(--warn); }
.gp-sec b.chip { font-weight: 500; }
.gp-sec.is-kept { border-color: rgba(74, 222, 128, 0.35); }
.gp-score { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--border); font: 500 12px 'JetBrains Mono', monospace; color: var(--text-muted); }
.gp-score b { color: var(--text); }
.d-js:not(.d-still) .gp-sec.is-ghost { animation: gp-ghost 7s ease-in-out infinite backwards; animation-delay: calc(var(--i) * 0.35s); }
.d-js:not(.d-still) .gp-sec.is-ghost .gp-strike { animation: gp-strike 7s ease-in-out infinite backwards; animation-delay: calc(var(--i) * 0.35s); }
.d-js:not(.d-still) .gp-score .gp-track i { animation: gp-fill 7s ease-in-out infinite backwards; animation-delay: 2.6s; }
@keyframes gp-ghost { 0%, 30% { opacity: 1; } 55%, 92% { opacity: 0.35; } 100% { opacity: 1; } }
@media (max-width: 480px) {
  .gp-lane { grid-template-columns: 3.6em minmax(0, 1fr) 2.8em; }
  .gp-lane .gp-pips, .gp-lane .gp-lane-note { grid-column: 2; grid-row: 1; }
  .gp-lane .gp-timer { grid-column: 2; grid-row: 2; }
  .gp-lane b { grid-column: 3; grid-row: 1 / span 2; }
  .gp-lane strong { grid-row: 1 / span 2; }
  .gp-bar { grid-template-columns: minmax(0, 1fr) 3.2em; }
  .gp-bar .gp-track { grid-column: 1 / -1; grid-row: 2; }
  .gp-sec { grid-template-columns: minmax(0, 1fr) auto; }
  .gp-sec .sk { display: none; }
  .gp-div-row { grid-template-columns: 1fr; }
}

/* =============================================================
   LA LECTURE CRITIQUE : trois rôles
   ============================================================= */
.gp-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gp-role { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); padding: 18px 20px; display: grid; gap: 8px; align-content: start; }
.gp-role .who { font: 500 12px 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-soft); }
.gp-role h3 { margin: 2px 0 0; font-size: 21px; line-height: 1.3; font-weight: 600; }
.gp-role p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.gp-role.is-human { border-color: rgba(74, 222, 128, 0.35); }
.gp-role.is-human .who { color: var(--ok); }
@media (max-width: 900px) { .gp-roles { grid-template-columns: 1fr; } }
@media (max-width: 720px) { 
/* Impression : aucun décor en mouvement */
@media print {
  .gp-lit::after, .gp-drop, .gp-article, .gp-article .gp-grade, .gp-caret, .gp-winner::after, .gp-pips i, .gp-timer i, .gp-twin, .gp-strike,
  .gp-track i, .gp-card, .gp-timeline li, .gp-vs em, .gp-sec.is-ghost { animation: none !important; }
  .gp-drop { display: none !important; }
}