/* =========================================================================
   Aktory : styles propres à la page Méthode.
   Les composants partagés avec l'accueil (chaîne, principes, file) sont
   repris à l'identique : chaque page garde sa feuille, seul commun.css
   est mutualisé.
   ========================================================================= */

/* ── Héros sobre : le texte seul, sans image ── */
.m-heros{padding:170px 0 60px}
.m-heros .heros-texte{max-width:700px}
.m-heros h1{font-size:clamp(40px,4.8vw,60px)}
.m-heros .heros-sous{max-width:620px}
.bande.plate{margin-top:0}

/* ── Chapo de section ── */
.m-chapo{margin:-8px 0 30px;font-size:16.5px;line-height:1.66;color:var(--gris-encre);max-width:44em}
.m-chapo b{color:var(--charbon);font-weight:600}

/* ── La chaîne de vérification (reprise de l'accueil) ── */
.chaine{position:relative;padding:22px 22px 18px;border-radius:18px;
  border:1px solid var(--trait);background:rgba(255,255,255,.6);
  backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 18px 44px -34px rgba(43,34,58,.7);overflow:hidden}
.chaine::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(43,34,58,.045) 1px, transparent 1px),linear-gradient(90deg, rgba(43,34,58,.045) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg, black, transparent 78%);-webkit-mask-image:linear-gradient(180deg, black, transparent 78%)}
.chaine-titre{position:relative;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--texte-3);display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.chaine-titre .etat{display:inline-flex;align-items:center;gap:7px;color:var(--corail-fonce)}
.chaine-titre .etat i{width:5px;height:5px;border-radius:50%;background:var(--corail);box-shadow:0 0 8px var(--corail);
  animation:pouls 2.2s ease-in-out infinite;font-style:normal}
.rail{position:relative;height:1px;margin:0 6px 14px;background:var(--trait-fort);overflow:visible}
.rail::after{content:"";position:absolute;top:-1px;left:0;width:34%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--corail),transparent);filter:blur(.4px);
  animation:parcours 5.25s cubic-bezier(.55,0,.45,1) infinite}
@keyframes parcours{0%{left:-34%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.etapes{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.etape{position:relative;text-align:left}
.etape .noeud{position:absolute;top:-21px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--ivoire);border:1.5px solid var(--trait-fort);transition:all .3s}
.etape.actif .noeud{border-color:var(--corail);background:var(--corail);box-shadow:0 0 0 4px rgba(255,122,89,.16), 0 0 12px rgba(255,122,89,.75)}
.etape b{display:block;font-size:12.5px;font-weight:600;letter-spacing:-.01em;transition:color .3s}
.etape span{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--texte-3);margin-top:4px}

/* ── Les quatre étapes détaillées ── */
.jalons{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.jalon{position:relative;border:1px solid var(--trait);border-radius:16px;background:var(--blanc);box-shadow:var(--ombre);
  padding:20px 22px;overflow:hidden;transition:transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s}
.jalon::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--corail);box-shadow:0 0 12px rgba(255,122,89,.6)}
.jalon:hover{transform:translateY(-3px);border-color:rgba(255,122,89,.45);box-shadow:var(--ombre-survol)}
.jalon .num{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--corail-fonce);display:block;margin-bottom:10px}
.jalon h3{font-family:'Satoshi',sans-serif;font-weight:700;font-size:16px;letter-spacing:-.012em;margin-bottom:8px}
.jalon p{font-size:13px;line-height:1.65;color:var(--gris-encre)}

/* ── Les sources : acceptées, écartées ── */
.sources{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.source-carte{position:relative;border:1px solid var(--trait);border-radius:17px;background:var(--blanc);box-shadow:var(--ombre);
  padding:24px 26px;overflow:hidden}
.source-carte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--corail);box-shadow:0 0 12px rgba(255,122,89,.6)}
.source-carte.refus::before{background:var(--trait-fort);box-shadow:none}
.source-carte h3{font-family:'Satoshi',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.014em;margin-bottom:16px}
.source-carte ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.source-carte li{position:relative;padding-left:27px;font-size:13px;line-height:1.55;color:var(--gris-encre)}
.source-carte li::before{content:"✓";position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:6px;
  display:grid;place-items:center;font-size:10px;font-weight:700;
  color:var(--corail-fonce);background:var(--corail-doux);border:1px solid rgba(255,122,89,.3)}
.source-carte.refus li::before{content:"✕";color:var(--texte-3);background:rgba(43,34,58,.05);border-color:var(--trait)}
.source-carte li b{display:block;color:var(--charbon);font-weight:600;font-size:14px;margin-bottom:2px}

/* ── Les principes en cartes (repris de l'accueil) ── */
.principes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.principe{position:relative;border:1px solid var(--trait);border-radius:17px;background:var(--blanc);box-shadow:var(--ombre);padding:22px 24px;overflow:hidden;transition:transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s}
.principe::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--corail);box-shadow:0 0 12px rgba(255,122,89,.6)}
.principe:hover{transform:translateY(-3px);border-color:rgba(255,122,89,.45);box-shadow:var(--ombre-survol)}
.principe .num{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--corail-fonce);display:block;margin-bottom:10px}
.principe h3{font-family:'Satoshi',sans-serif;font-weight:700;font-size:17px;letter-spacing:-.012em;margin-bottom:8px}
.principe p{font-size:13.5px;line-height:1.65;color:var(--gris-encre)}

/* ── La file de vérification (reprise de l'accueil) ── */
.file-mini{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.file-mini .etiquette{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-3)}
.pion{display:inline-flex;align-items:center;gap:8px;border:1px dashed var(--trait-fort);border-radius:10px;padding:7px 13px;font-size:12.5px;font-weight:500;color:var(--gris-encre);text-decoration:none;transition:all .18s}
.pion:hover{border-color:rgba(255,122,89,.55);color:var(--charbon)}

/* ── Le bandeau final ── */
.methode.m-cta{margin-top:70px;justify-content:space-between;flex-wrap:wrap;gap:20px}
.methode.m-cta p{max-width:44em;font-size:14.5px}
.methode.m-cta .btn{flex-shrink:0}

/* ── Réactif ── */
@media (max-width:1040px){
  .jalons{grid-template-columns:1fr 1fr}
  .principes{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .m-heros{padding-top:140px}
  .jalons{grid-template-columns:1fr}
  .sources{grid-template-columns:1fr}
  .principes{grid-template-columns:1fr}
}