/* =============================================================
   Page Méthode — v3 (Claude, 25/09/2026) : la v2, plus les retours d'Alexandre sur les deux v2 :
   l'en-tête de Claude, animé ; une infographie pour les canaris et le cas GEOPOL en chiffres (idées de Codex) ;
   les pictogrammes de l'accueil sur les quatre principes ; la relation « votre métier + mon regard » (idée de Codex).
   Seuls ajouts au système E. Robustesse de la v2 gardée (audits K-1, K-4) :
   - tout le contenu est visible sans script, même si main.js manque ;
   - chaque mouvement n'existe que si le bouton Pause existe (classe .d-js, posée par extra.js) et s'arrête avec lui
     ou avec la préférence système « réduire les animations » (classe .d-still) ;
   - aucune apparition au défilement ni compteur animé : essayés (animation-timeline), retirés le 25/09, car ils
     sont réversibles (page remontée, le bas redevient transparent, les compteurs retombent à 0 : trous en capture pleine
     page, à l'impression, et peut-être pour un moteur de recherche). Le mouvement vit dans l'en-tête et le canari.
   ============================================================= */

/* [K-2] Texte sombre sur l'accent : 5,42:1 (blanc : 3,65:1). À GÉNÉRALISER à tout le site le jour du bloc contraste. */
.d-page .btn-primary { color: var(--bg); }

/* [V-1] Sur mobile, le titre passe avant le panneau. */
@media (max-width: 900px) { .d-hero .m-hero-gate { order: 0; } }

/* ---------- En-tête : le panneau .gate de JYFUS ----------
   Par défaut : état final, figé et lisible. Avec le bouton Pause : les contrôles passent au vert l'un après l'autre,
   l'essai automatique échoue puis passe « CORRIGÉ » (images clés gate-ok, dot-ok, verdict, gate-fix… d'extra.css). */
.m-hero-gate .gate { border: 0; border-radius: 0; background: transparent; padding: clamp(16px, 2.4vw, 26px); }
.m-hero-gate .gate-row { min-height: 40px; font-size: 14px; color: var(--text); }
.m-hero-gate .gate-row i { background: var(--ok); }
.m-hero-gate .gate-row b { color: var(--ok); }
.m-hero-gate .gate-foot { color: var(--text); }
.gate .v-valid::before { content: 'VALIDE'; }
.d-js:not(.d-still) .m-hero-gate .gate-row { animation: gate-ok 12s infinite; animation-delay: calc(var(--i) * 0.35s); }
.d-js:not(.d-still) .m-hero-gate .gate-row i { animation: dot-ok 12s infinite; animation-delay: calc(var(--i) * 0.35s); }
.d-js:not(.d-still) .m-hero-gate .gate-row b { animation: verdict 12s infinite; animation-delay: calc(var(--i) * 0.35s); }
.d-js:not(.d-still) .m-hero-gate .gate-row.fix { animation-name: gate-fix; }
.d-js:not(.d-still) .m-hero-gate .gate-row.fix i { animation-name: dot-fix; }
.d-js:not(.d-still) .m-hero-gate .gate-row.fix b { animation-name: verdict-fix; }

/* ---------- Avec vous : votre métier + mon regard technique = un outil utile (idée de Codex) ---------- */
.m-relation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.m-rel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); padding: 18px 20px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.m-rel strong { font-size: 16px; font-weight: 600; line-height: 1.3; }
.m-rel span:last-child { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.m-rel.is-result { border-color: rgba(74, 222, 128, 0.35); background: linear-gradient(135deg, rgba(74, 222, 128, 0.07), transparent 70%), var(--bg-elevated); }
.m-rel.is-result .pillar-icon { color: var(--ok); background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.3); }
.m-op { align-self: center; justify-self: center; font: 500 24px/1 'JetBrains Mono', monospace; color: var(--blue-soft); }
.m-sub { margin: 26px 0 12px; font: 500 12px 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 760px) { .m-relation { grid-template-columns: 1fr; } .m-op { padding-block: 2px; } }

/* ---------- Cartes ---------- */
.m-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.m-card {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated);
  padding: 20px 20px 18px; display: grid; gap: 8px; align-content: start; min-width: 0;
}
.m-card h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.m-card p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.m-card.is-human { border-color: rgba(74, 222, 128, 0.35); }
@media (max-width: 900px) { .m-cards { grid-template-columns: 1fr; } }

/* ---------- Les quatre principes : pictogrammes de l'accueil (.pillar-icon), titre simple, terme de l'accueil ---------- */
.m-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.m-principle { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 22px; }
.m-principle > div { display: grid; gap: 8px; min-width: 0; }
.m-principle .m-term { font: 500 12px 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-soft); }
@media (max-width: 620px) { .m-principles { grid-template-columns: 1fr; } }
/* Arrivée depuis un principe de l'accueil (methode.html#blocs-atomiques…) : la carte s'arrête sous l'en-tête collant
   et se distingue des trois autres. */
.m-principle { scroll-margin-top: 96px; }
.m-principle:target { border-color: rgba(124, 192, 255, 0.6); box-shadow: 0 0 0 1px rgba(124, 192, 255, 0.35), 0 12px 32px -18px rgba(10, 132, 255, 0.6); }

/* ---------- Canaris : le chant (infographie) et le regard humain ; à côté, le cas GEOPOL en chiffres ---------- */
.m-evidence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.m-evidence-text { display: grid; gap: 16px; min-width: 0; }
.m-evidence-text .d-lead { margin: 0; }
@media (max-width: 900px) { .m-evidence { grid-template-columns: 1fr; } }

.m-song { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #0d0d11; padding: 16px 18px; display: grid; gap: 12px; }
.m-song-head { display: flex; justify-content: space-between; gap: 10px; font: 500 12px 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.m-song-head b { font-weight: 500; color: var(--ok); }
.m-wave { display: flex; align-items: center; gap: 4px; height: 52px; }
.m-wave i { flex: 1 1 0; min-width: 0; height: calc(var(--h) * 100%); border-radius: 2px; background: var(--ok); opacity: 0.85; transform-origin: center; }
.m-wave i.is-quiet { height: 2px; background: var(--warn); opacity: 1; }
.m-song-foot { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; line-height: 1.4; }
.m-song-foot .ok { color: var(--ok); }
.m-song-foot .warn { color: var(--warn); }
.d-js:not(.d-still) .m-wave i:not(.is-quiet) { animation: m-sing 1.8s ease-in-out infinite; animation-delay: calc(var(--d) * -1s); }
@keyframes m-sing { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.4); } }

.m-human { border: 1px solid rgba(74, 222, 128, 0.35); border-radius: var(--radius-lg); background: var(--bg-elevated); padding: 16px 18px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.m-human .pillar-icon { color: var(--ok); background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.3); }
.m-human strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.m-human span { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.m-quote { margin: 0; padding-left: 18px; border-left: 2px solid var(--blue-soft); font-size: 17px; line-height: 1.55; color: #cfe6ff; }
.m-quote strong { color: var(--text); font-weight: 600; }

.m-case { border: 1px solid rgba(251, 191, 36, 0.3); border-radius: var(--radius-lg); padding: clamp(20px, 2.6vw, 30px); background: radial-gradient(ellipse at 100% 0, rgba(251, 191, 36, 0.07), transparent 70%), #111115; display: grid; gap: 14px; min-width: 0; }
.m-case-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 500 12px 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.m-case-meta span:last-child { color: var(--warn); }
.m-case h3 { margin: 0; font-size: clamp(20px, 2vw, 25px); font-weight: 600; line-height: 1.25; }
.m-metrics { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; padding-block: 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.m-metrics strong { display: block; font: 600 clamp(30px, 3.4vw, 44px)/1 'JetBrains Mono', monospace; letter-spacing: -0.04em; color: var(--ok); }
.m-metrics strong small { font-size: 0.55em; letter-spacing: 0; }
.m-metrics .is-bad strong { color: var(--warn); }
.m-metrics span { display: block; margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.m-metrics .m-ne { font: 500 26px/1 'JetBrains Mono', monospace; color: var(--text-muted); }
.m-case p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.m-case .rule { color: var(--text); }
.m-case .rule b { color: var(--warn); font-weight: 600; }
.m-evidence + .count-wall { margin-top: 26px; }

/* ---------- Impression : état final, immobile ---------- */
@media print { .m-hero-gate *, .m-wave i { animation: none !important; } }

/* ---------- Clôture ---------- */
.m-close-title { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.m-close-lead { margin: 0; max-width: 56ch; color: var(--text-muted); font-size: 17px; line-height: 1.6; }