Jules NenyandClaude Opus 5.5
0c8f9fc1bd
Le repère <main> passe à la racine de la page et le panneau d'onglet devient un <div role="tabpanel"> (Lighthouse signalait role=tabpanel sur <main>). FreeCAD, Blender, Inkscape, GIMP, LibreOffice Draw et Joplin sortent de fmhy-curated.json : ils sont désormais dans la sélection open source. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0136n5xMLHuaBDLcPJYCDjRW
763 lines
25 KiB
Vue
763 lines
25 KiB
Vue
<template>
|
|
<main class="outils-page" :class="{ 'outils-page--vue': vueFiches }">
|
|
|
|
<!-- ══════════════════════ 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 class="outils-header__body">
|
|
<h1 class="outils-header__title">Outils</h1>
|
|
<!-- Partir de soi : la vue fiches prend la hauteur, l'en-tête se compacte (les sept mots sont dans le graphe) -->
|
|
<EchelleTete v-if="!vueFiches" echelle="S" :contribuer="false" />
|
|
<p v-if="outils?.intro && !vueFiches" class="outils-header__intro">{{ outils.intro }}</p>
|
|
</div>
|
|
<NuxtLink v-if="vueFiches && outils?.contribution" :to="outils.contribution.lien" class="outils-header__proposer">
|
|
{{ outils.contribution.cta }}
|
|
</NuxtLink>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ══════════════════════ SOUS-ONGLETS (toujours visibles) ══════════════════════ -->
|
|
<div
|
|
ref="tablistRef"
|
|
class="outils-tabs"
|
|
role="tablist"
|
|
aria-label="Rubriques de la page Outils"
|
|
@keydown="onTabKeydown"
|
|
>
|
|
<NuxtLink
|
|
v-for="t in TABS"
|
|
:id="`outils-tab-${t.id}`"
|
|
:key="t.id"
|
|
:to="{ query: { tab: t.id } }"
|
|
replace
|
|
role="tab"
|
|
class="outils-tab"
|
|
:class="{ 'outils-tab--actif': tab === t.id }"
|
|
:aria-selected="tab === t.id ? 'true' : 'false'"
|
|
aria-controls="outils-panneau"
|
|
:tabindex="tab === t.id ? 0 : -1"
|
|
>
|
|
<span class="outils-tab__long">{{ t.libelle }}</span>
|
|
<span class="outils-tab__court" aria-hidden="false">{{ t.court }}</span>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div
|
|
id="outils-panneau"
|
|
class="outils-main"
|
|
:class="{ 'outils-main--vue': vueFiches }"
|
|
role="tabpanel"
|
|
:aria-labelledby="`outils-tab-${tab}`"
|
|
>
|
|
<p v-if="!outils" class="outils-etat">Chargement…</p>
|
|
|
|
<!-- ══════════════ ONGLET 1 — Outils de conception ══════════════ -->
|
|
<template v-else-if="tab === 'conception'">
|
|
<p class="outils-intention">{{ outils.conception.intention }}</p>
|
|
|
|
<section class="outils-section" aria-labelledby="sec-simulateurs">
|
|
<h2 id="sec-simulateurs" class="outils-section__title">Simulateurs</h2>
|
|
<div class="simu-grid">
|
|
<SimulateurFeature
|
|
v-for="s in outils.conception.outils"
|
|
:key="s.id"
|
|
:icon="s.icon"
|
|
:titre="s.titre"
|
|
:url="s.url"
|
|
:description="s.description"
|
|
:cta="s.cta"
|
|
:tag="s.tag"
|
|
:mention="s.mention"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-if="outils.conception.inspirations?.length" class="outils-section" aria-labelledby="sec-inspirations">
|
|
<h2 id="sec-inspirations" class="outils-section__title">Inspiration externe</h2>
|
|
<div class="outil-cards-grid">
|
|
<OutilCard
|
|
v-for="s in outils.conception.inspirations"
|
|
:key="s.id"
|
|
:icon="s.icon"
|
|
:titre="s.titre"
|
|
:url="s.url"
|
|
:description="s.description"
|
|
:tag="s.tag"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<!-- ══════════════ ONGLET 2 — Open source ══════════════ -->
|
|
<template v-else-if="tab === 'open-source'">
|
|
<p class="outils-intention">{{ outils.open_source.intention }}</p>
|
|
|
|
<!-- Sommaire d'ancres : tout est déployé d'office, on saute au bloc voulu -->
|
|
<nav class="os-sommaire" aria-label="Sommaire de l'onglet Open source">
|
|
<ul class="os-sommaire__liste">
|
|
<li v-for="a in sommaire" :key="a.id">
|
|
<a :href="'#' + a.id" class="os-sommaire__lien" @click="allerAncre($event, a.id)">{{ a.libelle }}</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Sélection AEP : outils utiles à un architecte indépendant (B6-M3/M4) -->
|
|
<template v-if="outils.open_source.selection">
|
|
<p class="outils-section__desc">{{ outils.open_source.selection.intention }}</p>
|
|
<section
|
|
v-for="r in outils.open_source.selection.rubriques"
|
|
:key="r.id"
|
|
class="outils-section outils-section--ancre"
|
|
:aria-labelledby="'sel-' + r.id"
|
|
>
|
|
<h2 :id="'sel-' + r.id" class="outils-section__title" tabindex="-1">{{ r.titre }}</h2>
|
|
<p v-if="r.note" class="outils-section__desc">{{ r.note }}</p>
|
|
<ul class="sel-grid">
|
|
<li v-for="l in r.liens" :key="l.url" class="sel-item">
|
|
<a :href="l.url" target="_blank" rel="noopener noreferrer" class="sel-item__nom">{{ l.nom }}</a>
|
|
<p class="sel-item__desc">{{ l.desc }}</p>
|
|
<p class="sel-item__meta">{{ metaSelection(l) }}</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|
|
|
|
<section class="outils-section outils-section--ancre" aria-labelledby="sec-recommandes">
|
|
<h2 id="sec-recommandes" class="outils-section__title" tabindex="-1">Nos recommandations</h2>
|
|
<div class="outil-cards-grid">
|
|
<OutilCard
|
|
v-for="outil in outils.open_source.recommandes"
|
|
:key="outil.id"
|
|
:icon="outil.icon"
|
|
:titre="outil.titre"
|
|
:url="outil.url"
|
|
:description="outil.description"
|
|
:tag="outil.tag"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="outils-section outils-section--fmhy outils-section--ancre" aria-labelledby="sec-fmhy">
|
|
<h2 id="sec-fmhy" class="outils-section__title" tabindex="-1">{{ outils.open_source.fmhy.titre }}</h2>
|
|
<p class="outils-section__desc">{{ outils.open_source.fmhy.texte_intro }}</p>
|
|
|
|
<div v-for="g in outils.open_source.rubriques" :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>
|
|
|
|
<div class="fmhy-warning">
|
|
<h3 class="fmhy-warning__title">Avertissement</h3>
|
|
<p class="fmhy-warning__text">
|
|
{{ outils.open_source.fmhy.avertissement }}
|
|
<a :href="outils.open_source.fmhy.avertissement_lien" target="_blank" rel="noopener noreferrer">{{ outils.open_source.fmhy.avertissement_lien_texte }}</a>
|
|
</p>
|
|
</div>
|
|
|
|
<p class="fmhy-snapshot">
|
|
{{ outils.open_source.fmhy.snapshot_texte }}
|
|
<a :href="outils.open_source.fmhy.url" target="_blank" rel="noopener noreferrer">fmhy.net</a>.
|
|
</p>
|
|
|
|
<p class="fmhy-tree-label">{{ outils.open_source.fmhy.arbre_label }}</p>
|
|
<div class="fmhy-tree-wrap">
|
|
<div v-if="fmhyPending" class="outils-etat"><span>Chargement…</span></div>
|
|
<div v-else-if="fmhyError" class="outils-etat">
|
|
Impossible de charger les ressources.
|
|
<a :href="outils.open_source.fmhy.url" target="_blank" rel="noopener noreferrer">fmhy.net →</a>
|
|
</div>
|
|
<TreeASCII v-else-if="fmhyData" :tree="fmhyData" :depth="0" />
|
|
</div>
|
|
|
|
<div class="fmhy-footer">
|
|
<a :href="outils.open_source.fmhy.url" target="_blank" rel="noopener noreferrer" class="fmhy-footer__link">
|
|
{{ outils.open_source.fmhy.lien_texte }}
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-if="outils.open_source.logiciels_pro" class="outils-section outils-section--placeholder outils-section--ancre" aria-labelledby="sec-logiciels">
|
|
<div class="placeholder-block">
|
|
<span class="placeholder-block__badge">{{ outils.open_source.logiciels_pro.badge }}</span>
|
|
<h2 id="sec-logiciels" class="placeholder-block__title" tabindex="-1">{{ outils.open_source.logiciels_pro.titre }}</h2>
|
|
<p class="placeholder-block__desc">{{ outils.open_source.logiciels_pro.description }}</p>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<!-- ══════════════ ONGLET 3 — Partir de soi : la vue fiches (B6-M2) ══════════════ -->
|
|
<OutilsPartirDeSoi v-else :data="outils.partir_de_soi" />
|
|
|
|
<!-- ══════════════ CONTRIBUTION (onglets 1 et 2 ; sur le 3e, le lien est dans l'en-tête) ══════════════ -->
|
|
<footer v-if="outils?.contribution && !vueFiches" class="outils-contribution">
|
|
<p class="outils-contribution__texte">{{ outils.contribution.texte }}</p>
|
|
<NuxtLink :to="outils.contribution.lien" class="outils-contribution__cta">
|
|
{{ outils.contribution.cta }}
|
|
</NuxtLink>
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type TabId = 'conception' | 'open-source' | 'partir-de-soi'
|
|
|
|
// Libellés d'interface : `court` prend le relais sous 480 px pour que la barre tienne sur une ligne.
|
|
const TABS: { id: TabId; libelle: string; court: string }[] = [
|
|
{ id: 'conception', libelle: 'Outils de conception', court: 'Conception' },
|
|
{ id: 'open-source', libelle: 'Open source', court: 'Open source' },
|
|
{ id: 'partir-de-soi', libelle: 'Partir de soi', court: 'Partir de soi' },
|
|
]
|
|
const TAB_DEFAUT: TabId = 'conception'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
// Lu au SSR et à chaque changement de ?tab= (patron de media.vue).
|
|
const lireTab = (q: unknown): TabId => TABS.find((t) => t.id === q)?.id ?? TAB_DEFAUT
|
|
const tab = ref<TabId>(lireTab(route.query.tab))
|
|
watch(() => route.query.tab, (q) => { tab.value = lireTab(q) })
|
|
|
|
// Données : tout le contenu vient de public/data/outils.json (schéma v2).
|
|
const { data: outils } = await useFetch<any>('/data/outils.json')
|
|
const { data: fmhyData, pending: fmhyPending, error: fmhyError } = await useFetch<any>('/data/fmhy-curated.json')
|
|
|
|
// Partir de soi : la vue fiches remplit la hauteur sous la barre d'onglets (pas de défilement de page).
|
|
const vueFiches = computed(() => tab.value === 'partir-de-soi' && !!outils.value)
|
|
|
|
// Flèches ← → (+ Début / Fin) : on se déplace et on active, comme un tablist à activation automatique.
|
|
const tablistRef = ref<HTMLElement | null>(null)
|
|
function onTabKeydown(e: KeyboardEvent) {
|
|
const i = TABS.findIndex((t) => t.id === tab.value)
|
|
let j = -1
|
|
if (e.key === 'ArrowRight') j = (i + 1) % TABS.length
|
|
else if (e.key === 'ArrowLeft') j = (i - 1 + TABS.length) % TABS.length
|
|
else if (e.key === 'Home') j = 0
|
|
else if (e.key === 'End') j = TABS.length - 1
|
|
if (j < 0) return
|
|
e.preventDefault()
|
|
// Seul `tab` reste dans la query : les paramètres d'un autre onglet ne fuient pas.
|
|
router.replace({ query: { tab: TABS[j].id } })
|
|
nextTick(() => tablistRef.value?.querySelector<HTMLElement>(`#outils-tab-${TABS[j].id}`)?.focus())
|
|
}
|
|
|
|
// Open source : sommaire d'ancres = rubriques de la sélection + les trois autres blocs.
|
|
const sommaire = computed(() => {
|
|
const os = outils.value?.open_source
|
|
if (!os) return []
|
|
return [
|
|
...(os.selection?.rubriques ?? []).map((r: any) => ({ id: `sel-${r.id}`, libelle: r.titre })),
|
|
{ id: 'sec-recommandes', libelle: 'Nos recommandations' },
|
|
{ id: 'sec-fmhy', libelle: 'Annuaire fmhy' },
|
|
...(os.logiciels_pro ? [{ id: 'sec-logiciels', libelle: 'Logiciels pro' }] : []),
|
|
]
|
|
})
|
|
|
|
const metaSelection = (l: any) => [l.licence, (l.plateformes ?? []).join(', ')].filter(Boolean).join(' · ')
|
|
|
|
// Saut vers une ancre : défilement doux sauf préférence « moins d'animations », focus sur le titre
|
|
// (clavier et lecteurs d'écran arrivent au bon endroit). L'URL ne bouge pas (?tab= intact).
|
|
function allerAncre(e: Event, id: string) {
|
|
e.preventDefault()
|
|
const el = document.getElementById(id)
|
|
if (!el) return
|
|
const reduit = window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
|
el.scrollIntoView({ behavior: reduit ? 'auto' : 'smooth', block: 'start' })
|
|
el.focus({ preventScroll: true })
|
|
}
|
|
|
|
useSeoMeta({
|
|
title: () => `Outils — AEP${tab.value !== TAB_DEFAUT ? ' — ' + TABS.find((t) => t.id === tab.value)!.libelle : ''}`,
|
|
description: 'Outils partagés entre architectes : simulateurs, open source, ressources libres pour partir de soi.',
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* ── Layout global ──────────────────────────────────────────── */
|
|
.outils-page {
|
|
max-width: 860px;
|
|
margin: 0 auto;
|
|
padding: var(--space-xl) var(--space-lg) 4rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ── Header ─────────────────────────────────────────────────── */
|
|
.outils-header {
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
|
|
.outils-header__inner {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.outils-header__body {
|
|
min-width: 0;
|
|
}
|
|
|
|
.outils-header__icon-wrap {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: var(--radius-md);
|
|
background: var(--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: var(--fw-bold);
|
|
margin: 0 0 var(--space-xs);
|
|
color: var(--text);
|
|
}
|
|
|
|
.outils-header__intro {
|
|
font-size: 0.9rem;
|
|
color: color-mix(in srgb, var(--text) 78%, transparent);
|
|
line-height: 1.65;
|
|
margin: var(--space-sm) 0 0;
|
|
max-width: 70ch;
|
|
}
|
|
|
|
/* ── Sous-onglets ───────────────────────────────────────────── */
|
|
.outils-tabs {
|
|
display: flex;
|
|
gap: var(--space-xs);
|
|
margin-bottom: var(--space-xl);
|
|
border-bottom: 1px solid var(--border);
|
|
overflow-x: auto; /* défilement interne à la barre, jamais de débordement de la page */
|
|
overscroll-behavior-x: contain;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.outils-tab {
|
|
flex: 0 0 auto;
|
|
padding: var(--space-xs) var(--space-md) var(--space-sm);
|
|
font-size: 0.92rem;
|
|
font-weight: var(--fw-medium);
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
color: color-mix(in srgb, var(--text) 78%, transparent);
|
|
border-bottom: 3px solid transparent;
|
|
margin-bottom: -1px;
|
|
transition: color var(--dur-fast) var(--ease-out);
|
|
}
|
|
|
|
.outils-tab:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.outils-tab:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: -2px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.outils-tab--actif {
|
|
color: var(--text);
|
|
font-weight: var(--fw-semibold);
|
|
border-bottom-color: var(--nav-primary-solid);
|
|
}
|
|
|
|
.outils-tab__court { display: none; }
|
|
|
|
@media (max-width: 480px) {
|
|
.outils-tab { padding: var(--space-xs) var(--space-sm) var(--space-sm); font-size: 0.85rem; }
|
|
.outils-tab__long { display: none; }
|
|
.outils-tab__court { display: inline; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.outils-tab { transition: none; }
|
|
}
|
|
|
|
/* ── Panneau ────────────────────────────────────────────────── */
|
|
.outils-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2.5rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.outils-etat {
|
|
font-size: 0.85rem;
|
|
color: color-mix(in srgb, var(--text) 78%, transparent);
|
|
margin: 0;
|
|
}
|
|
|
|
.outils-etat a { color: var(--nav-primary-solid); }
|
|
|
|
.outils-intention {
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
color: var(--text);
|
|
margin: 0;
|
|
max-width: 70ch;
|
|
}
|
|
|
|
.outils-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
min-width: 0;
|
|
}
|
|
|
|
.outils-section__title {
|
|
font-size: 1.15rem;
|
|
font-weight: var(--fw-bold);
|
|
margin: 0;
|
|
color: var(--text);
|
|
padding-bottom: var(--space-xs);
|
|
border-bottom: 1.5px solid var(--bg-alt);
|
|
}
|
|
|
|
.outils-section__desc {
|
|
font-size: 0.88rem;
|
|
color: color-mix(in srgb, var(--text) 78%, transparent);
|
|
line-height: 1.65;
|
|
margin: 0;
|
|
max-width: 72ch;
|
|
}
|
|
|
|
/* ── Simulateurs & cartes ───────────────────────────────────── */
|
|
.simu-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.outil-cards-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
/* ── Open source : sommaire d'ancres et sélection ───────────── */
|
|
.outils-section--ancre { scroll-margin-top: var(--space-lg); }
|
|
.outils-section--ancre :is(h2):focus { outline: none; }
|
|
.outils-section--ancre :is(h2):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
|
|
|
|
.os-sommaire__liste {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-xs) var(--space-sm);
|
|
}
|
|
.os-sommaire__lien {
|
|
display: inline-block;
|
|
padding: var(--space-xs) var(--space-md);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-alt);
|
|
color: var(--text);
|
|
font-size: 0.85rem;
|
|
font-weight: var(--fw-medium);
|
|
text-decoration: none;
|
|
}
|
|
.os-sommaire__lien:hover { border-color: var(--nav-primary-solid); }
|
|
.os-sommaire__lien:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
|
|
|
|
.sel-grid {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: var(--space-md);
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.sel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
}
|
|
.sel-item {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.3rem;
|
|
padding: var(--space-md);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
}
|
|
.sel-item__nom {
|
|
align-self: flex-start;
|
|
font-size: 0.95rem;
|
|
font-weight: var(--fw-semibold);
|
|
color: var(--nav-primary-solid);
|
|
text-underline-offset: 2px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.sel-item__nom:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
|
|
.sel-item__desc {
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
line-height: 1.55;
|
|
color: var(--text);
|
|
}
|
|
.sel-item__meta {
|
|
margin: auto 0 0;
|
|
padding-top: 0.2rem;
|
|
font-size: 0.78rem;
|
|
color: color-mix(in srgb, var(--text) 78%, transparent);
|
|
}
|
|
|
|
/* ── Section FMHY ───────────────────────────────────────────── */
|
|
.outils-section--fmhy {
|
|
background: var(--bg-alt);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1.75rem;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.fmhy-tree-wrap {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 1.25rem 1.5rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.fmhy-footer { text-align: right; }
|
|
|
|
.fmhy-footer__link {
|
|
font-size: 0.82rem;
|
|
font-weight: var(--fw-semibold);
|
|
color: var(--nav-primary-solid);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.fmhy-footer__link:hover { text-decoration: underline; }
|
|
|
|
.fmhy-usage {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.fmhy-usage__title {
|
|
font-size: 0.92rem;
|
|
font-weight: var(--fw-semibold);
|
|
color: var(--text);
|
|
margin: 0;
|
|
}
|
|
|
|
.fmhy-usage__note {
|
|
font-size: 0.8rem;
|
|
color: color-mix(in srgb, var(--text) 78%, transparent);
|
|
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: var(--radius-sm);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.fmhy-usage__item:hover { background: var(--surface); }
|
|
|
|
.fmhy-usage__link {
|
|
color: var(--nav-primary-solid);
|
|
font-weight: var(--fw-medium);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.fmhy-usage__link:hover { text-decoration: underline; }
|
|
|
|
.fmhy-usage__desc { color: color-mix(in srgb, var(--text) 78%, transparent); }
|
|
|
|
.fmhy-warning {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-left: 3px solid var(--nav-primary-solid);
|
|
border-radius: var(--radius-md);
|
|
padding: 0.875rem 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.fmhy-warning__title {
|
|
font-size: 0.85rem;
|
|
font-weight: var(--fw-semibold);
|
|
color: var(--text);
|
|
margin: 0;
|
|
}
|
|
|
|
.fmhy-warning__text {
|
|
font-size: 0.82rem;
|
|
color: color-mix(in srgb, var(--text) 78%, transparent);
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
|
|
.fmhy-warning__text a,
|
|
.fmhy-snapshot a { color: var(--nav-primary-solid); }
|
|
|
|
.fmhy-snapshot {
|
|
font-size: 0.78rem;
|
|
color: color-mix(in srgb, var(--text) 78%, transparent);
|
|
font-style: italic;
|
|
margin: 0;
|
|
}
|
|
|
|
.fmhy-tree-label {
|
|
font-size: 0.75rem;
|
|
font-weight: var(--fw-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: color-mix(in srgb, var(--text) 78%, transparent);
|
|
margin: 0.5rem 0 -0.5rem;
|
|
}
|
|
|
|
/* ── Logiciels pro (placeholder) ────────────────────────────── */
|
|
.outils-section--placeholder { opacity: 0.8; }
|
|
|
|
.placeholder-block {
|
|
border: 1.5px dashed var(--border-strong);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1.25rem 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.placeholder-block__badge {
|
|
font-size: 0.68rem;
|
|
font-weight: var(--fw-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: color-mix(in srgb, var(--text) 78%, transparent);
|
|
}
|
|
|
|
.placeholder-block__title {
|
|
font-size: 0.95rem;
|
|
font-weight: var(--fw-semibold);
|
|
color: var(--text);
|
|
margin: 0;
|
|
}
|
|
|
|
.placeholder-block__desc {
|
|
font-size: 0.84rem;
|
|
color: color-mix(in srgb, var(--text) 78%, transparent);
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ── Contribution (pied des 3 onglets) ──────────────────────── */
|
|
.outils-contribution {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-md);
|
|
padding: var(--space-lg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.outils-contribution__texte {
|
|
margin: 0;
|
|
font-size: 0.9rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
.outils-contribution__cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.6rem 1.25rem;
|
|
border-radius: var(--radius-md);
|
|
background: var(--nav-primary-solid);
|
|
color: var(--nav-text-on-primary);
|
|
font-size: 0.85rem;
|
|
font-weight: var(--fw-semibold);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.outils-contribution__cta:hover { opacity: 0.88; }
|
|
|
|
.outils-contribution__cta:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ── Partir de soi : la vue fiches remplit la hauteur du conteneur de défilement (app.vue) ── */
|
|
.outils-page--vue {
|
|
max-width: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.outils-page--vue .outils-header {
|
|
flex-shrink: 0;
|
|
margin: 0;
|
|
padding: var(--space-xs) var(--space-md) 0;
|
|
}
|
|
.outils-page--vue .outils-header__inner { align-items: center; }
|
|
.outils-page--vue .outils-header__icon-wrap { width: 2rem; height: 2rem; padding: 0.4rem; }
|
|
.outils-page--vue .outils-header__title { font-size: 1.25rem; margin: 0; }
|
|
.outils-page--vue .outils-header__body { flex: 1 1 auto; }
|
|
.outils-page--vue .outils-tabs { flex-shrink: 0; margin: 0; padding: 0 var(--space-md); }
|
|
.outils-main--vue { flex: 1 1 0; min-height: 0; gap: 0; }
|
|
|
|
.outils-header__proposer {
|
|
flex-shrink: 0;
|
|
font-size: 0.85rem;
|
|
font-weight: var(--fw-semibold);
|
|
color: var(--nav-primary-solid);
|
|
text-underline-offset: 2px;
|
|
}
|
|
.outils-header__proposer:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
|
|
|
|
/* ── Mobile ─────────────────────────────────────────────────── */
|
|
@media (max-width: 640px) {
|
|
.outils-page { padding: var(--space-lg) var(--space-md) 4rem; }
|
|
.outils-header__inner { flex-direction: column; gap: var(--space-sm); }
|
|
.outils-page--vue { padding: 0; }
|
|
.outils-page--vue .outils-header__inner { flex-direction: row; gap: var(--space-sm); }
|
|
.outils-page--vue .outils-header__icon-wrap { display: none; }
|
|
.outils-header__title { font-size: 1.4rem; }
|
|
.outil-cards-grid { grid-template-columns: 1fr; }
|
|
.outils-section--fmhy { padding: 1.25rem 1rem; }
|
|
.fmhy-tree-wrap { padding: 0.875rem 0.75rem; }
|
|
}
|
|
</style>
|