/* Page d'entrée « S'implanter » (#288) : cinq tuiles d'étape, chiffres clés, contact. Jetons du socle uniquement (frontend/socle/jetons.css). */
.hub { padding-block: var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: var(--s-6); }
.hub-etapes__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.hub-etapes__tete .ui-h2 { margin: 0; }
.hub-recherche { flex: 0 1 420px; min-width: min(100%, 260px); }
.hub-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); counter-reset: etape; }
@media (min-width: 720px) { .hub-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
    .hub-grille { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .hub-tuile { grid-column: span 2; }
    .hub-tuile:nth-child(n+4) { grid-column: span 3; }
}
.hub-tuile { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
    box-shadow: var(--sh-1); transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.hub-tuile:hover, .hub-tuile:focus-within { box-shadow: var(--sh-2); transform: translateY(-2px); }
.hub-tuile[hidden] { display: none; }
.hub-tuile__media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--c-nuit), var(--c-nuit-2)); overflow: hidden; }
.hub-tuile__media .ui-figure { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.hub-tuile__media .ui-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-tuile__media .ui-figure__credit { left: auto; right: 0; bottom: 0; max-width: 100%; }
.hub-tuile__picto { position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
    border-radius: var(--r-md); background: var(--c-brand); color: #fff; box-shadow: var(--sh-2); }
.hub-tuile__corps { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); flex: 1; }
.hub-tuile__etape { margin: 0; font: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--c-brand); }
.hub-tuile__titre { margin: 0; font: var(--t-h2); color: var(--c-text); overflow-wrap: anywhere; }
.hub-tuile__phrase { margin: 0; font: var(--t-corps); color: var(--c-text-2); }
.hub-tuile__liens { list-style: none; margin: var(--s-2) 0 0; padding: 0; border-top: 1px solid var(--c-border); }
.hub-tuile__liens li { border-bottom: 1px solid var(--c-border); }
.hub-tuile__liens li:last-child { border-bottom: 0; }
.hub-tuile__liens li[hidden] { display: none; }
.hub-tuile__liens a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--tap); padding: var(--s-2) 0; color: var(--c-action);
    font: var(--t-compact); font-weight: 600; text-decoration: none; }
.hub-tuile__liens a:hover { color: var(--c-action-hover); text-decoration: underline; }
.hub-tuile__liens a:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; border-radius: var(--r-sm); }
.hub-tuile__liens svg { flex: 0 0 auto; }
.hub-chiffres { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5) var(--s-4); }
.hub-chiffres .ui-h2 { margin-top: 0; }
.hub-contact__lien { margin: var(--s-3) 0 0; }
@media (prefers-reduced-motion: reduce) { .hub-tuile { transition: none; } .hub-tuile:hover, .hub-tuile:focus-within { transform: none; } }