797 lines
27 KiB
Vue
797 lines
27 KiB
Vue
<template>
|
||
<div class="outils-page">
|
||
|
||
<!-- ══════════════════════ EN-TÊTE PAGE ══════════════════════ -->
|
||
<header class="outils-header">
|
||
<div class="outils-header__inner">
|
||
<div class="outils-header__icon-wrap" aria-hidden="true">
|
||
<img src="/icons/outils-wrench.svg" alt="" class="outils-header__icon" />
|
||
</div>
|
||
<div>
|
||
<h1 class="outils-header__title">Outils</h1>
|
||
<p class="outils-header__intro">
|
||
En tant qu'architecte, on jongle avec une multitude d'outils — simulation, dessin,
|
||
calcul, recherche, partage. Les mutualiser, se conseiller dessus, savoir lequel
|
||
utiliser quand : c'est une forme d'entraide concrète. Voici ceux que je propose
|
||
dans un premier temps. Chacun peut contribuer pour enrichir cette boîte à outils
|
||
commune.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="outils-main">
|
||
|
||
<!-- ══════════════ SECTION 1 — Simulateurs métier ══════════════ -->
|
||
<section class="outils-section outils-section--simulateurs" aria-labelledby="sec-simulateurs">
|
||
<h2 id="sec-simulateurs" class="outils-section__title">
|
||
<span aria-hidden="true">🧮</span> Simulateurs métier
|
||
</h2>
|
||
<p class="outils-section__subtitle">Créés par AEP — outils de calcul situés.</p>
|
||
|
||
<div class="simu-grid">
|
||
<SimulateurFeature
|
||
v-for="s in outils?.simulateurs"
|
||
:key="s.id"
|
||
:icon="s.icon"
|
||
:titre="s.titre"
|
||
:url="s.url"
|
||
:description="s.description"
|
||
:cta="s.cta"
|
||
:tag="s.tag"
|
||
/>
|
||
</div>
|
||
|
||
<!-- Inspirations -->
|
||
<div v-if="outils?.simulateurs_inspirations?.length" class="simu-inspirations">
|
||
<p class="simu-inspirations__label">Inspiration externe</p>
|
||
<div class="outil-cards-grid">
|
||
<OutilCard
|
||
v-for="s in outils.simulateurs_inspirations"
|
||
:key="s.id"
|
||
:icon="s.icon"
|
||
:titre="s.titre"
|
||
:url="s.url"
|
||
:description="s.description"
|
||
:tag="s.tag"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ SECTION 2 — Open source recommandés ══════════════ -->
|
||
<section class="outils-section outils-section--opensource" aria-labelledby="sec-opensource">
|
||
<h2 id="sec-opensource" class="outils-section__title">
|
||
<span aria-hidden="true">🔧</span> Outils tech open source
|
||
</h2>
|
||
<p class="outils-section__subtitle">Quelques recommandations directes. Le cœur de l'onglet, c'est la section FMHY plus bas.</p>
|
||
|
||
<div class="outil-cards-grid">
|
||
<OutilCard
|
||
v-for="outil in outils?.opensource"
|
||
:key="outil.id"
|
||
:icon="outil.icon"
|
||
:titre="outil.titre"
|
||
:url="outil.url"
|
||
:description="outil.description"
|
||
:tag="outil.tag"
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ SECTION 3 — Bifurcation ══════════════ -->
|
||
<section class="outils-section" aria-labelledby="sec-bifurcation">
|
||
<h2 id="sec-bifurcation" class="outils-section__title">
|
||
<span aria-hidden="true">🌿</span> Bifurcation post-études d'archi
|
||
</h2>
|
||
<p class="outils-section__desc">
|
||
{{ outils?.bifurcation?.intro }}
|
||
</p>
|
||
|
||
<!-- 3.1 Vidéos OFQA -->
|
||
<div class="bifurcation-block">
|
||
<h3 class="bifurcation-block__title">Série vidéo OFQA / ENSA-PB</h3>
|
||
<ul class="ofqa-list">
|
||
<li
|
||
v-for="ep in outils?.bifurcation?.videos_ofqa"
|
||
:key="ep.ep"
|
||
class="ofqa-list__item"
|
||
>
|
||
<component
|
||
:is="ep.url ? 'a' : 'span'"
|
||
v-bind="ep.url ? { href: ep.url, target: '_blank', rel: 'noopener noreferrer' } : {}"
|
||
class="ofqa-list__link"
|
||
:class="{ 'ofqa-list__link--disabled': !ep.url }"
|
||
>
|
||
<span class="ofqa-list__ep">EP/{{ ep.ep }}</span>
|
||
<span class="ofqa-list__titre">{{ ep.titre }}</span>
|
||
<span class="ofqa-list__personnes">— {{ ep.personnes }}</span>
|
||
<span v-if="ep.note" class="ofqa-list__note">({{ ep.note }})</span>
|
||
</component>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 3.2 Coalition -->
|
||
<div v-if="outils?.bifurcation?.coalition_ensa_pb" class="bifurcation-block bifurcation-block--coalition">
|
||
<h3 class="bifurcation-block__title">{{ outils.bifurcation.coalition_ensa_pb.titre }}</h3>
|
||
<p class="bifurcation-block__desc">{{ outils.bifurcation.coalition_ensa_pb.description }}</p>
|
||
</div>
|
||
|
||
<!-- 3.3 Ressources externes -->
|
||
<div v-if="outils?.bifurcation?.ressources_externes?.length" class="bifurcation-block">
|
||
<h3 class="bifurcation-block__title">Ressources externes</h3>
|
||
<div class="outil-cards-grid">
|
||
<OutilCard
|
||
v-for="r in outils.bifurcation.ressources_externes"
|
||
:key="r.id"
|
||
:icon="r.icon"
|
||
:titre="r.titre"
|
||
:url="r.url"
|
||
:description="r.description"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ SECTION 4 — FMHY (cœur de la page) ══════════════ -->
|
||
<section class="outils-section outils-section--fmhy" aria-labelledby="sec-fmhy">
|
||
<h2 id="sec-fmhy" class="outils-section__title">
|
||
<span aria-hidden="true">🌳</span> Annuaire du web libre — la cartographie FMHY
|
||
</h2>
|
||
<p class="outils-section__desc">
|
||
FMHY (FreeMediaHeckYeah) est le plus grand index communautaire de ressources
|
||
gratuites du web : des milliers de liens classés et vérifiés par des centaines
|
||
de contributeurs bénévoles, mis à jour en continu. C'est une forme de
|
||
résistance numérique — accéder librement au savoir, à la culture et aux
|
||
outils, hors des catalogues marchands. J'en ai traduit et organisé les
|
||
entrées phares <strong>par usage</strong>, pour aller droit au but.
|
||
</p>
|
||
|
||
<!-- Note détaillée par usage -->
|
||
<div v-for="g in fmhyGuide" :key="g.id" class="fmhy-usage">
|
||
<h3 class="fmhy-usage__title">{{ g.titre }}</h3>
|
||
<p v-if="g.note" class="fmhy-usage__note">{{ g.note }}</p>
|
||
<ul class="fmhy-usage__list">
|
||
<li v-for="l in g.liens" :key="l.url" class="fmhy-usage__item">
|
||
<a
|
||
:href="l.url"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="fmhy-usage__link"
|
||
>{{ l.nom }}</a>
|
||
<span class="fmhy-usage__desc">— {{ l.desc }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Avertissement légal -->
|
||
<div class="fmhy-warning">
|
||
<h3 class="fmhy-warning__title">Avertissement</h3>
|
||
<p class="fmhy-warning__text">
|
||
Une partie des ressources indexées par FMHY relève du partage de contenus
|
||
protégés : la légalité dépend de ton pays et de l'usage que tu en fais.
|
||
Renseigne-toi avant d'utiliser ces liens. FMHY maintient une
|
||
<a href="https://fmhy.net/unsafe" target="_blank" rel="noopener noreferrer">liste des sites dangereux</a>
|
||
(malwares, arnaques) : consulte-la. En cas de doute, privilégie les sources
|
||
libres de droits (Project Gutenberg, Gallica, domaine public).
|
||
</p>
|
||
</div>
|
||
|
||
<p class="fmhy-snapshot">
|
||
Cartographie établie d'après un snapshot du 25 août 2026 — l'index fmhy
|
||
évolue en continu, voir
|
||
<a href="https://fmhy.net/" target="_blank" rel="noopener noreferrer">fmhy.net</a>.
|
||
</p>
|
||
|
||
<!-- Arbre curé interactif (sélection AEP) -->
|
||
<p class="fmhy-tree-label">Sélection interactive — clique sur les branches pour déplier</p>
|
||
<div class="fmhy-tree-wrap">
|
||
<div v-if="fmhyPending" class="fmhy-loading" aria-label="Chargement…">
|
||
<span>Chargement…</span>
|
||
</div>
|
||
<div v-else-if="fmhyError" class="fmhy-error">
|
||
Impossible de charger les ressources. <a href="https://fmhy.net/" target="_blank" rel="noopener noreferrer">Explorer fmhy.net →</a>
|
||
</div>
|
||
<TreeASCII v-else-if="fmhyData" :tree="fmhyData" :depth="0" />
|
||
</div>
|
||
|
||
<div class="fmhy-footer">
|
||
<a href="https://fmhy.net/" target="_blank" rel="noopener noreferrer" class="fmhy-footer__link">
|
||
Explorer tout l'arbre → fmhy.net
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ SECTION 5 — Placeholder login ══════════════ -->
|
||
<section class="outils-section outils-section--placeholder" aria-labelledby="sec-logiciels">
|
||
<div class="placeholder-block">
|
||
<span class="placeholder-block__badge">Bientôt — nécessite un compte</span>
|
||
<h2 id="sec-logiciels" class="placeholder-block__title">{{ outils?.section_5_placeholder?.titre }}</h2>
|
||
<p class="placeholder-block__desc">{{ outils?.section_5_placeholder?.description }}</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ FOOTER CONTRIBUTION ══════════════ -->
|
||
<footer class="outils-footer">
|
||
<p class="outils-footer__text">
|
||
{{ outils?.footer_contribution }}
|
||
</p>
|
||
</footer>
|
||
|
||
</main>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
// Chargement des données
|
||
const { data: outils } = await useFetch('/data/outils.json')
|
||
const { data: fmhyData, pending: fmhyPending, error: fmhyError } = await useFetch('/data/fmhy-curated.json')
|
||
|
||
// Note détaillée FMHY — cartographie traduite et organisée par usage
|
||
// (entrées ★ « starred » de fmhy.net, snapshot du 25 août 2026)
|
||
const fmhyGuide = [
|
||
{
|
||
id: 'vie-privee',
|
||
titre: 'Vie privée & adblocking — les bases',
|
||
note: 'Le premier réflexe du guide débutant fmhy : un bon bloqueur de pubs rend la moitié du web à nouveau respirable.',
|
||
liens: [
|
||
{ nom: 'uBlock Origin', url: 'https://github.com/gorhill/uBlock', desc: 'bloqueur de pubs de référence, léger et open source' },
|
||
{ nom: 'SponsorBlock', url: 'https://sponsor.ajay.app/', desc: 'saute automatiquement les segments sponsorisés de YouTube' },
|
||
{ nom: 'LibreWolf', url: 'https://librewolf.net/', desc: 'Firefox durci vie privée, pré-configuré' },
|
||
{ nom: 'Proton VPN', url: 'https://protonvpn.com', desc: 'VPN suisse, offre gratuite illimitée' },
|
||
{ nom: 'Bitwarden', url: 'https://bitwarden.com/', desc: 'gestionnaire de mots de passe open source' },
|
||
{ nom: 'Cryptomator', url: 'https://cryptomator.org/', desc: 'chiffrement de tes fichiers avant envoi dans le cloud' },
|
||
{ nom: 'Tor Browser', url: 'https://www.torproject.org/', desc: 'navigation anonyme via le réseau Tor' },
|
||
{ nom: 'KeePassXC', url: 'https://keepassxc.org/', desc: 'coffre de mots de passe 100% local' }
|
||
]
|
||
},
|
||
{
|
||
id: 'livres',
|
||
titre: 'Trouver un livre / ebook',
|
||
liens: [
|
||
{ nom: "Anna's Archive", url: 'https://annas-archive.gl/', desc: 'la plus grosse bibliothèque du web : livres, BD, articles, thèses' },
|
||
{ nom: 'Z-Library', url: 'https://z-lib.gd/', desc: 'catalogue immense, interface soignée' },
|
||
{ nom: 'Library Genesis', url: 'https://libgen.li/', desc: 'référence pour les livres techniques et académiques' },
|
||
{ nom: 'Mobilism', url: 'https://forum.mobilism.org', desc: 'ebooks, audiobooks, magazines (forum)' },
|
||
{ nom: 'Project Gutenberg', url: 'https://www.gutenberg.org/', desc: '70 000+ classiques du domaine public, 100% légal' },
|
||
{ nom: 'Sci-Hub', url: 'https://sci-hub.se/', desc: 'accès libre aux articles scientifiques derrière paywall' },
|
||
{ nom: 'Calibre', url: 'https://calibre-ebook.com/', desc: 'gestion et conversion de bibliothèque numérique' },
|
||
{ nom: 'KOReader', url: 'https://koreader.rocks/', desc: 'lecteur ebook open source pour liseuses' }
|
||
]
|
||
},
|
||
{
|
||
id: 'films',
|
||
titre: 'Films, séries & anime',
|
||
liens: [
|
||
{ nom: 'Rive', url: 'https://www.rivestream.app/', desc: 'streaming films / séries / anime, auto-next' },
|
||
{ nom: 'Cineby', url: 'https://cineby.at/', desc: 'streaming films / séries / anime' },
|
||
{ nom: 'Flixer', url: 'https://flixer.gd', desc: 'streaming films / séries / anime' },
|
||
{ nom: 'Tubi', url: 'https://tubitv.com', desc: 'streaming légal et gratuit (financé par la pub)' },
|
||
{ nom: 'Stremio', url: 'https://www.stremio.com/', desc: 'centre multimédia extensible par extensions' },
|
||
{ nom: 'Miruro', url: 'https://www.miruro.com/', desc: 'anime en streaming' },
|
||
{ nom: 'Simkl', url: 'https://simkl.com/', desc: 'suivi de films, séries et anime déjà vus' }
|
||
]
|
||
},
|
||
{
|
||
id: 'musique',
|
||
titre: 'Musique & podcasts',
|
||
liens: [
|
||
{ nom: 'Monochrome', url: 'https://monochrome.tf/', desc: 'streaming musique dans le navigateur' },
|
||
{ nom: 'lucida', url: 'https://lucida.to/', desc: 'téléchargement de musiques' },
|
||
{ nom: 'SpotX', url: 'https://github.com/SpotX-Official/SpotX', desc: 'Spotify desktop sans pub (patch client)' },
|
||
{ nom: 'NTS Radio', url: 'https://www.nts.live/', desc: 'shows de DJ indépendants, archives immenses' },
|
||
{ nom: 'SomaFM', url: 'https://somafm.com/', desc: '30+ radios internet indépendantes' },
|
||
{ nom: 'Radio Garden', url: 'https://radio.garden/', desc: 'explorer les radios du monde entier sur un globe' },
|
||
{ nom: 'Pocket Casts', url: 'https://play.pocketcasts.com/', desc: 'lecteur de podcasts libre et complet, aussi dans le navigateur' }
|
||
]
|
||
},
|
||
{
|
||
id: 'logiciels',
|
||
titre: 'Logiciels & jeux vidéo',
|
||
liens: [
|
||
{ nom: 'qBittorrent', url: 'https://www.qbittorrent.org/', desc: 'client torrent libre, sans pub — la référence' },
|
||
{ nom: 'FitGirl Repacks', url: 'https://fitgirl-repacks.site/', desc: 'repacks de jeux ultra-compressés' },
|
||
{ nom: 'SteamRIP', url: 'https://steamrip.com/', desc: 'jeux pré-installés' },
|
||
{ nom: '1337x', url: 'https://1337x.to/', desc: 'annuaire torrents généraliste' }
|
||
]
|
||
},
|
||
{
|
||
id: 'mobile',
|
||
titre: 'Android / iOS',
|
||
liens: [
|
||
{ nom: 'Aurora Store', url: 'https://auroraoss.com/', desc: 'Google Play alternatif, sans compte Google' },
|
||
{ nom: 'Droid-ify', url: 'https://droidify.app/', desc: 'client F-Droid moderne — applications libres' },
|
||
{ nom: 'APKMirror', url: 'https://www.apkmirror.com/', desc: 'archives APK vérifiées' },
|
||
{ nom: 'Fossify', url: 'https://github.com/FossifyOrg', desc: 'suite d’apps Android simples et libres (galerie, agenda, fichiers…)' },
|
||
{ nom: 'Obtainium', url: 'https://obtainium.imranr.dev/', desc: 'installe et met à jour tes APKs depuis les sources officielles' }
|
||
]
|
||
},
|
||
{
|
||
id: 'education',
|
||
titre: 'Éducation, cours & recherche',
|
||
liens: [
|
||
{ nom: 'MIT OpenCourseWare', url: 'https://ocw.mit.edu/', desc: 'les cours du MIT en accès libre complet' },
|
||
{ nom: 'edX', url: 'https://www.edx.org/', desc: 'MOOCs de grandes universités' },
|
||
{ nom: 'Khan Academy', url: 'https://www.khanacademy.org/', desc: 'maths, sciences, économie — gratuit, du collège au supérieur' },
|
||
{ nom: 'Class Central', url: 'https://www.classcentral.com/', desc: 'moteur de recherche de cours en ligne' },
|
||
{ nom: 'WolframAlpha', url: 'https://www.wolframalpha.com/', desc: 'moteur de calcul et base de connaissances' },
|
||
{ nom: 'PhET', url: 'https://phet.colorado.edu/', desc: 'simulations interactives physique / chimie / maths' }
|
||
]
|
||
},
|
||
{
|
||
id: 'ia',
|
||
titre: 'Intelligence artificielle gratuite',
|
||
liens: [
|
||
{ nom: 'DeepSeek', url: 'https://chat.deepseek.com/', desc: 'modèle de pointe, usage illimité gratuit' },
|
||
{ nom: 'Qwen Studio', url: 'https://chat.qwen.ai/', desc: 'chat IA (Qwen) illimité gratuit' },
|
||
{ nom: 'Google AI Studio', url: 'https://aistudio.google.com/', desc: 'Gemini en accès généreux gratuit' },
|
||
{ nom: 'Mistral Le Chat', url: 'https://chat.mistral.ai/', desc: 'LLM français, souverain, gratuit' },
|
||
{ nom: 'LM Studio', url: 'https://lmstudio.ai/', desc: 'faire tourner des modèles en local, sans cloud' },
|
||
{ nom: 'Jan', url: 'https://jan.ai/', desc: 'application desktop libre pour IA locale' },
|
||
{ nom: 'Open WebUI', url: 'https://openwebui.com/', desc: 'interface web auto-hébergeable pour modèles locaux' }
|
||
]
|
||
},
|
||
{
|
||
id: 'francophone',
|
||
titre: 'Contenus francophones',
|
||
liens: [
|
||
{ nom: 'Gallica', url: 'https://gallica.bnf.fr/', desc: 'millions de documents numérisés de la BnF, domaine public' },
|
||
{ nom: 'Nos Livres', url: 'https://noslivres.net/', desc: 'classiques français du domaine public, formats propres' },
|
||
{ nom: 'Audiocite', url: 'https://www.audiocite.net/', desc: 'livres audio francophones du domaine public' },
|
||
{ nom: 'Littérature audio', url: 'https://www.litteratureaudio.com/', desc: 'autre grande bibliothèque audio francophone libre' },
|
||
{ nom: 'zone-ebook', url: 'https://zone-ebook.com/', desc: 'ebooks, magazines et journaux en français' },
|
||
{ nom: 'Dealabs', url: 'https://www.dealabs.com/', desc: 'bons plans et gratuités débusqués par la communauté' }
|
||
]
|
||
}
|
||
]
|
||
|
||
useSeoMeta({
|
||
title: 'Outils — AEP',
|
||
description: 'Outils partagés entre architectes : simulateurs, open source, ressources libres FMHY, bifurcation post-études.'
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* ── Layout global ──────────────────────────────────────────── */
|
||
.outils-page {
|
||
max-width: 860px;
|
||
margin: 0 auto;
|
||
padding: 2rem 1.5rem 4rem;
|
||
color: var(--nav-text);
|
||
}
|
||
|
||
/* ── Header ─────────────────────────────────────────────────── */
|
||
.outils-header {
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
.outils-header__inner {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.outils-header__icon-wrap {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
border-radius: 10px;
|
||
background: var(--nav-bg-alt);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
padding: 0.6rem;
|
||
}
|
||
|
||
.outils-header__icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
opacity: 0.75;
|
||
}
|
||
|
||
.outils-header__title {
|
||
font-size: 1.75rem;
|
||
font-weight: 700;
|
||
margin: 0 0 0.5rem;
|
||
color: var(--nav-text);
|
||
}
|
||
|
||
.outils-header__intro {
|
||
font-size: 0.9rem;
|
||
color: var(--nav-text-muted);
|
||
line-height: 1.65;
|
||
margin: 0;
|
||
max-width: 70ch;
|
||
}
|
||
|
||
/* ── Sections ───────────────────────────────────────────────── */
|
||
.outils-main {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3rem;
|
||
}
|
||
|
||
.outils-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.outils-section__title {
|
||
font-size: 1.15rem;
|
||
font-weight: 700;
|
||
margin: 0;
|
||
color: var(--nav-text);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding-bottom: 0.5rem;
|
||
border-bottom: 1.5px solid var(--nav-bg-alt);
|
||
}
|
||
|
||
.outils-section__subtitle {
|
||
font-size: 0.82rem;
|
||
color: var(--nav-text-muted);
|
||
margin: -0.5rem 0 0;
|
||
font-style: italic;
|
||
}
|
||
|
||
.outils-section__desc {
|
||
font-size: 0.88rem;
|
||
color: var(--nav-text-muted);
|
||
line-height: 1.65;
|
||
margin: 0;
|
||
max-width: 72ch;
|
||
}
|
||
|
||
/* ── Simulateurs ────────────────────────────────────────────── */
|
||
.outils-section--simulateurs {
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.simu-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.simu-inspirations {
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.simu-inspirations__label {
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--nav-text-muted);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
/* ── Cards grid ─────────────────────────────────────────────── */
|
||
.outil-cards-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
/* ── Section FMHY ───────────────────────────────────────────── */
|
||
.outils-section--fmhy {
|
||
background: var(--nav-bg-alt);
|
||
border-radius: 14px;
|
||
padding: 1.75rem;
|
||
gap: 1.25rem;
|
||
margin: 0 -0.25rem;
|
||
}
|
||
|
||
.fmhy-tree-wrap {
|
||
background: var(--nav-surface);
|
||
border: 1px solid var(--nav-bg-alt);
|
||
border-radius: 10px;
|
||
padding: 1.25rem 1.5rem;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.fmhy-loading,
|
||
.fmhy-error {
|
||
font-size: 0.85rem;
|
||
color: var(--nav-text-muted);
|
||
padding: 0.5rem 0;
|
||
}
|
||
|
||
.fmhy-error a {
|
||
color: var(--nav-primary-solid);
|
||
}
|
||
|
||
.fmhy-footer {
|
||
text-align: right;
|
||
}
|
||
|
||
.fmhy-footer__link {
|
||
font-size: 0.82rem;
|
||
font-weight: 600;
|
||
color: var(--nav-primary-solid);
|
||
text-decoration: none;
|
||
transition: opacity 0.15s;
|
||
}
|
||
|
||
.fmhy-footer__link:hover {
|
||
opacity: 0.75;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* ── Bifurcation ────────────────────────────────────────────── */
|
||
.bifurcation-block {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.6rem;
|
||
}
|
||
|
||
.bifurcation-block__title {
|
||
font-size: 0.92rem;
|
||
font-weight: 600;
|
||
color: var(--nav-text);
|
||
margin: 0;
|
||
}
|
||
|
||
.bifurcation-block__desc {
|
||
font-size: 0.84rem;
|
||
color: var(--nav-text-muted);
|
||
margin: 0;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.bifurcation-block--coalition {
|
||
background: var(--nav-bg-alt);
|
||
border-radius: 8px;
|
||
padding: 0.875rem 1rem;
|
||
}
|
||
|
||
/* ── Liste OFQA ─────────────────────────────────────────────── */
|
||
.ofqa-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
}
|
||
|
||
.ofqa-list__item {
|
||
display: flex;
|
||
}
|
||
|
||
.ofqa-list__link {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 0.4rem;
|
||
flex-wrap: wrap;
|
||
padding: 3px 6px;
|
||
border-radius: 5px;
|
||
font-size: 0.84rem;
|
||
text-decoration: none;
|
||
color: var(--nav-text);
|
||
transition: background 0.1s;
|
||
}
|
||
|
||
.ofqa-list__link:not(.ofqa-list__link--disabled):hover {
|
||
background: var(--nav-bg-alt);
|
||
color: var(--nav-primary-solid);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.ofqa-list__link--disabled {
|
||
color: var(--nav-text-muted);
|
||
cursor: default;
|
||
}
|
||
|
||
.ofqa-list__ep {
|
||
font-family: 'JetBrains Mono', 'Courier New', monospace;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
color: var(--nav-text-muted);
|
||
flex-shrink: 0;
|
||
min-width: 4.5rem;
|
||
}
|
||
|
||
.ofqa-list__titre {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.ofqa-list__personnes {
|
||
color: var(--nav-text-muted);
|
||
font-size: 0.82rem;
|
||
}
|
||
|
||
.ofqa-list__note {
|
||
color: var(--nav-text-muted);
|
||
font-size: 0.78rem;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ── Section 5 placeholder ──────────────────────────────────── */
|
||
.outils-section--placeholder {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.placeholder-block {
|
||
border: 1.5px dashed var(--nav-bg-alt);
|
||
border-radius: 12px;
|
||
padding: 1.25rem 1.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
.placeholder-block__badge {
|
||
font-size: 0.68rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--nav-text-muted);
|
||
}
|
||
|
||
.placeholder-block__title {
|
||
font-size: 0.95rem;
|
||
font-weight: 600;
|
||
color: var(--nav-text);
|
||
margin: 0;
|
||
}
|
||
|
||
.placeholder-block__desc {
|
||
font-size: 0.84rem;
|
||
color: var(--nav-text-muted);
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ── Footer ─────────────────────────────────────────────────── */
|
||
.outils-footer {
|
||
padding-top: 1rem;
|
||
border-top: 1px solid var(--nav-bg-alt);
|
||
text-align: center;
|
||
}
|
||
|
||
.outils-footer__text {
|
||
font-size: 0.84rem;
|
||
color: var(--nav-text-muted);
|
||
margin: 0;
|
||
}
|
||
|
||
/* ── Mobile ─────────────────────────────────────────────────── */
|
||
@media (max-width: 640px) {
|
||
.outils-page {
|
||
padding: 1.25rem 1rem 4rem;
|
||
}
|
||
|
||
.outils-header__inner {
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.outils-header__title {
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
.outil-cards-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.outils-section--fmhy {
|
||
padding: 1.25rem 1rem;
|
||
margin: 0 -0.5rem;
|
||
}
|
||
|
||
/* ── Note FMHY détaillée (par usage) ────────────────────────── */
|
||
.fmhy-usage {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
.fmhy-usage__title {
|
||
font-size: 0.92rem;
|
||
font-weight: 650;
|
||
color: var(--nav-text);
|
||
margin: 0;
|
||
}
|
||
|
||
.fmhy-usage__note {
|
||
font-size: 0.8rem;
|
||
color: var(--nav-text-muted);
|
||
font-style: italic;
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.fmhy-usage__list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.fmhy-usage__item {
|
||
font-size: 0.84rem;
|
||
line-height: 1.5;
|
||
padding: 2px 6px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.fmhy-usage__item:hover {
|
||
background: var(--nav-surface);
|
||
}
|
||
|
||
.fmhy-usage__link {
|
||
color: var(--nav-primary-solid);
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.fmhy-usage__link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.fmhy-usage__desc {
|
||
color: var(--nav-text-muted);
|
||
}
|
||
|
||
.fmhy-warning {
|
||
background: var(--nav-surface);
|
||
border: 1px solid var(--nav-bg-alt);
|
||
border-left: 3px solid var(--nav-primary-solid);
|
||
border-radius: 8px;
|
||
padding: 0.875rem 1rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
.fmhy-warning__title {
|
||
font-size: 0.85rem;
|
||
font-weight: 650;
|
||
color: var(--nav-text);
|
||
margin: 0;
|
||
}
|
||
|
||
.fmhy-warning__text {
|
||
font-size: 0.82rem;
|
||
color: var(--nav-text-muted);
|
||
line-height: 1.6;
|
||
margin: 0;
|
||
}
|
||
|
||
.fmhy-warning__text a {
|
||
color: var(--nav-primary-solid);
|
||
}
|
||
|
||
.fmhy-snapshot {
|
||
font-size: 0.78rem;
|
||
color: var(--nav-text-muted);
|
||
font-style: italic;
|
||
margin: 0;
|
||
}
|
||
|
||
.fmhy-snapshot a {
|
||
color: var(--nav-primary-solid);
|
||
}
|
||
|
||
.fmhy-tree-label {
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--nav-text-muted);
|
||
margin: 0.5rem 0 -0.5rem;
|
||
}
|
||
|
||
.fmhy-tree-wrap {
|
||
padding: 0.875rem 0.75rem;
|
||
}
|
||
}
|
||
</style>
|