/* ============================================================
   Singulr — page « Veille de la souveraineté numérique
   européenne » (/veille.html)
   Surcouche additive par-dessus /home.css + /home-ext.css.
   Réutilise tokens, animations et composants existants
   (hero, badge, stats, missions-grid/mission-card, section-head,
   beyond-note, finalcta). N'introduit QUE les composants
   propres à cette page. Aucun token redéfini.
   ============================================================ */

/* ---------- lien contextuel de maillage ---------- */
.ilink{color:var(--accent);transition:opacity .2s var(--ease)}
.ilink:hover{opacity:.78}

/* ---------- entrée de langue non encore traduite (FR = référence) ---------- */
.lang-menu .lang-soon{display:flex;align-items:center;justify-content:space-between;border-radius:12px;padding:.5rem .75rem;font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);cursor:default}
.lang-menu .lang-soon::after{content:"bientôt";font-size:.6rem;letter-spacing:.06em;color:var(--ink-3);opacity:.7;text-transform:none}
.mobile-lang span.soon{color:var(--ink-3);opacity:.5;cursor:default}

/* ============================================================
   SECTION 1 — POURQUOI CETTE VEILLE (intro éditoriale)
   ============================================================ */
.why-lead{margin:1.5rem auto 0;max-width:46rem;font-size:1.08rem;line-height:1.75;color:var(--ink-2)}
.why-lead strong{color:var(--ink);font-weight:600}

/* ============================================================
   SECTION 2 — COMMENT NOUS TRAVAILLONS (pipeline)
   Sources RSS → Filtrage → Résumé IA → Validation humaine → Publication
   Horizontal sur desktop, vertical sur mobile.
   ============================================================ */
.pipe{padding:6rem 2rem}
.pipe-inner{margin:0 auto;max-width:72rem}
.pipe-flow{margin-top:3.5rem;display:flex;flex-direction:column;gap:.75rem;align-items:stretch}
@media(min-width:900px){.pipe-flow{flex-direction:row;align-items:stretch;gap:0}}
.pipe-step{position:relative;flex:1;display:flex;flex-direction:column;gap:.85rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);padding:1.5rem;transition:border-color .4s var(--ease),transform .5s var(--ease),background-color .4s var(--ease)}
.pipe-step:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--surface-2)}
.pipe-step--human{border-color:var(--accent);background:var(--accent-tint)}
.pipe-num{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--ink-3)}
.pipe-step--human .pipe-num{color:var(--accent)}
.pipe-ico{display:flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border-radius:12px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--accent);flex:none}
.pipe-h{font-size:1.05rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.pipe-p{font-size:.9rem;line-height:1.5;color:var(--ink-2)}
/* connecteurs entre étapes */
.pipe-arrow{display:flex;align-items:center;justify-content:center;color:var(--ink-3);flex:none}
.pipe-arrow svg{transform:rotate(90deg)}
@media(min-width:900px){.pipe-arrow{padding:0 .35rem}.pipe-arrow svg{transform:none}}
.pipe-flow .pipe-step:nth-child(3){--d:.06s}
.pipe-flow .pipe-step:nth-child(5){--d:.12s}
.pipe-flow .pipe-step:nth-child(7){--d:.18s}
.pipe-flow .pipe-step:nth-child(9){--d:.24s}

/* bandeau « L'humain dirige, l'IA assiste » */
.human-led{position:relative;overflow:hidden;margin:2.5rem auto 0;max-width:72rem;display:flex;align-items:center;gap:1.25rem;border-radius:var(--radius);border:1px solid var(--line-2);background:var(--bg-2);padding:1.75rem 2rem}
.human-led-dot{position:relative;display:flex;width:9px;height:9px;flex:none}
.human-led-dot span:first-child{position:absolute;inset:0;border-radius:999px;background:var(--accent);opacity:.55;animation:ping 1.8s cubic-bezier(0,0,0.2,1) infinite}
.human-led-dot span:last-child{position:relative;width:9px;height:9px;border-radius:999px;background:var(--accent)}
.human-led-txt{font-size:clamp(1.1rem,2.4vw,1.45rem);font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.3}
.human-led-txt span{color:var(--ink-3);font-weight:400}

/* ============================================================
   SECTION 4 — DERNIÈRES ANALYSES (flux dynamique veille.js)
   ============================================================ */
.vfeed{padding:6rem 2rem}
.vfeed-inner{margin:0 auto;max-width:72rem}
.vfeed-updated{margin-top:1rem;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--ink-3)}
.vfeed-updated::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--accent);box-shadow:0 0 8px rgba(255,210,63,.7);animation:proof-pulse 2.6s ease-in-out infinite}
.vfeed-toolbar{margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.vfeed-search{flex:1;min-width:220px;height:2.9rem;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:0 1rem;font-family:inherit;font-size:.95rem;transition:border-color .3s}
.vfeed-search::placeholder{color:var(--ink-3)}
.vfeed-search:focus{outline:none;border-color:var(--accent)}
.vfeed-select{height:2.9rem;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);padding:0 2.4rem 0 1rem;font-family:inherit;font-size:.9rem;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386858a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;transition:border-color .3s}
.vfeed-select:focus{outline:none;border-color:var(--accent)}
.vfeed-chips{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.5rem}
.vfeed-chip{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:.4rem .85rem;background:transparent;cursor:pointer;transition:border-color .25s,color .25s,background-color .25s}
.vfeed-chip:hover{color:var(--ink);border-color:rgba(255,255,255,.28)}
.vfeed-chip.is-active{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.vfeed-count{margin-top:1.5rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--ink-3)}
.vfeed-grid{margin-top:1.25rem;display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:680px){.vfeed-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.vfeed-grid{grid-template-columns:repeat(3,1fr)}}

.vcard{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);padding:1.5rem;transition:border-color .4s var(--ease),transform .5s var(--ease),background-color .4s var(--ease)}
.vcard:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--surface-2)}
.vcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem}
.vcard-status{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.22rem .6rem;border:1px solid var(--line-2)}
.vcard-status[data-s="signal-faible"]{color:var(--ink-3);border-style:dashed}
.vcard-status[data-s="en-discussion"]{color:var(--ink-2)}
.vcard-status[data-s="confirme"]{color:var(--accent);border-color:var(--accent-soft);background:var(--accent-tint)}
.vcard-status[data-s="acte"]{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.vcard-dom{font-size:.72rem;color:var(--ink-2);border:1px solid var(--line);border-radius:7px;padding:.2rem .5rem}
.vcard-impact{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--ink-3);margin-left:auto}
.vcard-impact i{width:5px;height:11px;border-radius:2px;background:var(--line-2);display:inline-block}
.vcard-impact[data-i="faible"] i:nth-child(1),
.vcard-impact[data-i="moyen"] i:nth-child(1),.vcard-impact[data-i="moyen"] i:nth-child(2),
.vcard-impact[data-i="fort"] i{background:var(--accent)}
.vcard-h{font-size:1.08rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.vcard-h a{transition:color .2s}
.vcard-h a:hover{color:var(--accent)}
.vcard-p{margin-top:.7rem;flex:1;font-size:.92rem;line-height:1.55;color:var(--ink-2)}
.vcard-foot{margin-top:1.25rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-top:1rem;border-top:1px solid var(--line)}
.vcard-src{font-size:.78rem;color:var(--ink-3);display:flex;align-items:center;gap:.45rem;min-width:0}
.vcard-src b{color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcard-lang{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:.12rem .4rem;flex:none}
.vcard-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:500;color:var(--accent);white-space:nowrap;flex:none}
.vcard-link svg{transition:transform .4s var(--ease)}
.vcard-link:hover svg{transform:translate(2px,-2px)}

.vfeed-empty{margin-top:2rem;border-radius:var(--radius);border:1px dashed var(--line-2);background:var(--bg-2);padding:3rem 2rem;text-align:center;color:var(--ink-3);font-size:1rem;line-height:1.6}

/* ============================================================
   SECTION 5 — NIVEAUX DE MATURITÉ
   ============================================================ */
.mat{padding:6rem 2rem}
.mat-inner{margin:0 auto;max-width:72rem}
.mat-scale{margin-top:3rem;display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:560px){.mat-scale{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.mat-scale{grid-template-columns:repeat(4,1fr)}}
.mat-card{position:relative;display:flex;flex-direction:column;gap:.75rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);padding:1.6rem;overflow:hidden}
.mat-bar{display:flex;gap:4px;margin-bottom:.35rem}
.mat-bar i{height:4px;flex:1;border-radius:2px;background:var(--line-2)}
.mat-card[data-level="1"] .mat-bar i:nth-child(1),
.mat-card[data-level="2"] .mat-bar i:nth-child(-n+2),
.mat-card[data-level="3"] .mat-bar i:nth-child(-n+3),
.mat-card[data-level="4"] .mat-bar i{background:var(--accent)}
.mat-name{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.mat-card[data-level="3"] .mat-name,.mat-card[data-level="4"] .mat-name{color:var(--accent)}
.mat-h{font-size:1.15rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.mat-p{font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.mat-note{margin:2.5rem auto 0;max-width:46rem;text-align:center;font-size:1rem;line-height:1.65;color:var(--ink-3)}

/* ============================================================
   SECTION 7 — QUATRE PILIERS (Veille / Observatoire / Forge / Fédération)
   ============================================================ */
.pillars{padding:6rem 2rem}
.pillars-inner{margin:0 auto;max-width:72rem}
.pillars-grid{margin-top:3rem;display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:560px){.pillars-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.pillars-grid{grid-template-columns:repeat(4,1fr)}}
.pillar{display:flex;flex-direction:column;gap:.85rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);padding:1.75rem;transition:border-color .4s var(--ease),transform .5s var(--ease)}
.pillar:hover{border-color:var(--line-2);transform:translateY(-3px)}
.pillar--self{border-color:var(--accent);background:var(--accent-tint)}
.pillar-ico{display:flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border-radius:12px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--accent);flex:none}
.pillar-verb{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.pillar-h{font-size:1.15rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.pillar-h a{transition:color .2s}.pillar-h a:hover{color:var(--accent)}
.pillar-p{font-size:.9rem;line-height:1.55;color:var(--ink-2)}