/* ------------------------------------------------------------------
   hub.css — pages d'accueil EMET (racine, spécialité)

   Reprend les jetons de couleur de /core/css/ui.css. C'est la première
   chose que le praticien voit en ouvrant l'iPad au début de la
   consultation : un sommaire, mais un sommaire qui donne envie de
   l'ouvrir. Deux contraintes qui expliquent la plupart des choix :
   les cibles tactiles priment sur la densité, et le thème clair reste
   le défaut quelle que soit la préférence du système.
------------------------------------------------------------------ */

/* Jetons propres aux accueils. Le socle (ui.css) reste sur ses neutres froids,
   qui conviennent à une maquette 3D où rien ne doit concurrencer l'anatomie ;
   l'accueil, lui, n'a pas d'anatomie à ménager et assume les deux couleurs de
   la marque. Comme dans ui.css, un seul thème : clair. */
:root {
  --hub-page:  #ffffff;        /* la page, tout simplement */
  --hub-top-1: #0a5f6d;        /* bandeau, bord gauche */
  --hub-top-2: #128fa0;        /* bandeau, bord droit */
  --hub-on-top: #ffffff;       /* texte et icônes posés sur le bandeau */
  /* Fond des vignettes 3D : un souffle de turquoise, pas un aplat. Assez
     pâle pour que l'os clair du modèle s'y détache, assez présent pour que
     la carte ne se confonde pas avec la page. */
  --hub-vis-1: #f2f9fa;
  --hub-vis-2: #e4f1f3;
}

/* ui.css verrouille le défilement (body { overflow: hidden }) : c'est ce que
   veut une maquette plein écran, jamais une page qui s'allonge à mesure que
   le catalogue grossit. */
html, body { height: auto; }
body {
  margin: 0;
  /* L'avertissement suit les cartes et ne descend PAS au bas de l'écran :
     ancré en bas, il ouvrait un grand vide sous le catalogue sur les écrans
     hauts — le blanc se voit moins après le trait qu'avant lui. */
  min-height: 100dvh;
  /* overflow-x: clip et non hidden : hidden ferait du corps un conteneur de
     défilement et décrocherait le bandeau collant. */
  overflow: visible; overflow-x: clip;
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  /* La page est blanche, franchement. Tout dégradé d'un bord à l'autre
     repassait, à un moment ou à un autre, par un gris pâle — c'est le
     mélange qui le fabrique, quelles que soient les deux couleurs de
     départ, et c'est ce lavis qui rendait l'accueil terne. La couleur tient
     donc entièrement au bandeau et aux accents ; le fond ne s'en mêle plus.
     Le souligné orange de la barre suffit à trancher sur le blanc. */
  background: var(--hub-page);
}

/* ---------- bandeau : marque à gauche, langue et thème à droite ---------- */
/* Le bandeau porte le bleu en aplat, et l'orange en souligné : les deux
   couleurs de la marque sont posées dès la première ligne de la page. */
.hub-top {
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(100deg, var(--hub-top-1), var(--hub-top-2));
  border-bottom: 3px solid var(--brand-2);
  color: var(--hub-on-top);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--hub-top-1) 24%, transparent);
}
.hub-top-in {
  max-width: 1040px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
}

.hub-brand {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;                    /* cible tactile, y compris au doigt */
  text-decoration: none; color: inherit; min-width: 0;
}
/* La marque : deux profils de visage décalés — la personne réelle en blanc,
   son jumeau numérique en orange. Haute et étroite (1:3), elle tient la
   hauteur des deux lignes de texte qu'elle précède. */
.hub-brand-mark {
  flex: none; width: auto; height: 46px; margin-right: 5px;
}
.hub-brand-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.hub-brand-name {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-size: 20px; font-weight: 600; letter-spacing: .1em;
  color: var(--hub-on-top);
}
.hub-brand-full {
  font-size: 10.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
  color: color-mix(in srgb, var(--hub-on-top) 72%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* sélecteur de langue, en haut à droite */
.hub-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hub-lang { position: relative; }
.hub-lang-btn {
  display: flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 11px 0 12px;
  background: color-mix(in srgb, var(--hub-on-top) 16%, transparent);
  color: var(--hub-on-top);
  border: 1px solid color-mix(in srgb, var(--hub-on-top) 32%, transparent);
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.hub-lang-btn:hover,
.hub-lang-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--hub-on-top) 26%, transparent);
  border-color: color-mix(in srgb, var(--hub-on-top) 52%, transparent);
}
.hub-lang-btn svg { width: 13px; height: 13px; color: currentColor; transition: transform .18s ease; }
.hub-lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Le drapeau est un émoji : pas d'image à charger, et il suit la police du
   système. Taille forcée — il pèse le tiers de la lisibilité du bouton. */
.hub-flag {
  font-size: 20px; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.hub-lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  min-width: 196px; padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 15px;
  box-shadow: var(--shadow);
}
.hub-lang-menu button {
  display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: 44px; padding: 8px 11px;
  background: none; border: 0; border-radius: 10px;
  color: var(--ink-2); font: inherit; font-size: 14.5px; text-align: left;
  cursor: pointer;
}
.hub-lang-menu button:hover { background: var(--surface-2); color: var(--ink); }
.hub-lang-menu button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.hub-check { margin-left: auto; display: grid; place-items: center; color: var(--accent); }
.hub-check svg { width: 15px; height: 15px; }

/* ---------- corps ---------- */
/* La page occupe la hauteur de l'écran sans étirer son contenu : l'accueil
   tient en une page sur un iPad posé sur le bureau, et l'avertissement se
   pose en bas plutôt que de flotter sous un grand vide. */
.hub-wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px 36px; }

/* ---------- entrée en matière ---------- */
/* Deux colonnes : ce qu'on demande au praticien à gauche, ce qu'il va
   ouvrir à droite. Le visuel est un rendu de la maquette elle-même, détouré
   sur fond transparent — ni photo ni illustration d'atlas. */
.hub-intro {
  position: relative;
  display: grid; align-items: center; gap: 12px 28px;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
  padding: 22px 0 6px;
}
.hub-intro.is-plain { display: block; padding-top: 30px; }
.hub-intro-txt { position: relative; z-index: 1; min-width: 0; }

.hub-hello {
  margin: 0 0 8px;
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.hub-ask {
  margin: 0 0 12px;
  font-size: clamp(27px, 4.2vw, 40px); font-weight: 600; line-height: 1.1;
  letter-spacing: -.024em;
}
.hub-tagline { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* Le halo turquoise remplace le cadre : il pose le modèle sans l'enfermer
   dans une boîte, et laisse l'épaule déborder légèrement du bloc de texte. */
/* Le visuel déborde légèrement de sa rangée (marges négatives) : il gagne en
   présence sans repousser les cartes vers le bas de l'écran. */
.hub-intro-vis {
  position: relative; justify-self: end;
  width: 100%; max-width: 300px; aspect-ratio: 1 / 1.06;
  margin: -14px 0 -18px 0;
}
.hub-intro-vis::before {
  content: ""; position: absolute; inset: 2% -4% -4% -2%;
  border-radius: 48% 52% 46% 54%;
  background:
    radial-gradient(58% 58% at 52% 44%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%),
    radial-gradient(42% 42% at 26% 82%, color-mix(in srgb, var(--brand-2) 14%, transparent), transparent 70%);
}
.hub-intro-img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  filter: drop-shadow(0 16px 28px color-mix(in srgb, var(--accent) 22%, transparent));
}

/* ---------- sommaire ---------- */
.hub-specialty { margin-top: 26px; }
/* Réapparaît le jour où une deuxième spécialité ouvre : tant qu'il n'y en a
   qu'une, le nom de spécialité n'oriente personne (cf. catalog-hub.js). */
.hub-specialty-title {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 4px;
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.hub-specialty-title::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px;
  background: var(--brand-2);
}

/* Titre de région : la vignette anatomique d'abord — sur un sommaire qui
   grandira région par région, c'est elle qu'on repère, pas le mot. */
.hub-region-title {
  display: flex; align-items: center; gap: 13px;
  margin: 0 0 6px;
  font-size: 21px; font-weight: 600; letter-spacing: -.012em; color: var(--ink);
}
.hub-region-badge {
  flex: none; width: 42px; height: 42px; border-radius: 13px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* filet qui court jusqu'au bord : pose la section sans ajouter de trait net */
.hub-region-title::after {
  content: ""; flex: 1 1 auto; height: 1px; min-width: 20px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--brand-2) 60%, transparent) 62%,
    transparent);
}
.hub-region-sub {
  margin: 0 0 16px 55px;                 /* aligné sur le mot, pas sur la vignette */
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
}

.hub-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

/* ---------- cartes ---------- */
.hub-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--surface);
  /* Carte blanche sur page blanche : c'est le liseré coloré, le trait et
     l'ombre portée qui la découpent — pas un fond teinté, qui ramènerait
     le gris par la fenêtre. */
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border)); border-radius: 18px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 10%, transparent),
              0 10px 24px color-mix(in srgb, var(--accent) 8%, transparent);
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* liseré de couleur : repère visuel de la spécialité, lisible d'un coup d'œil.
   Il part du turquoise et finit dans l'orange — les deux couleurs de la
   marque, en toutes lettres, en haut de chaque carte. */
.hub-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2;
  background: linear-gradient(90deg,
    var(--card-accent, var(--accent)) 0%,
    color-mix(in srgb, var(--card-accent, var(--accent)) 45%, var(--brand-2)) 50%,
    var(--brand-2) 100%);
}
.hub-card:hover, .hub-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 55%, var(--border));
  box-shadow: var(--shadow);
}
/* Au clavier, un trait franc plutôt qu'un halo : la carte est grande, son
   contour doit se voir d'un bout à l'autre de la grille, dans les deux
   thèmes. */
.hub-card:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; }

/* Le rendu 3D de la maquette, posé sur un fond très pâle aux couleurs de la
   marque. Hauteur fixe pour que les trois cartes s'alignent quelles que
   soient les proportions des images. */
.hub-card-vis {
  position: relative; display: block; height: 172px;
  background:
    radial-gradient(120% 90% at 78% 8%, color-mix(in srgb, var(--brand-2) 9%, transparent), transparent 62%),
    linear-gradient(162deg, var(--hub-vis-1), var(--hub-vis-2));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
}
.hub-card-img {
  position: absolute; inset: 10px 14px 6px; margin: auto;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--accent) 22%, transparent));
  transition: transform .22s ease;
}
/* Maquette sans vignette : la carte retombe sur son texte seul, sans laisser
   une icône d'image cassée. */
.hub-card-vis.is-empty { display: none; }

.hub-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 15px 19px 17px; }
.hub-card-title { margin: 0 0 6px; font-size: 17.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.012em; }
.hub-card-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* « Commencer → » : l'action est écrite. La pastille est orange, et elle
   l'est d'emblée — répétée sur chaque carte, c'est elle qui installe la
   couleur secondaire dans le corps de la page. */
.hub-card-go {
  margin-top: auto; padding-top: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.hub-card-cta {
  font-size: 13.5px; font-weight: 600; letter-spacing: .005em;
  color: var(--accent);
}
.hub-card-arrow {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand-2) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-2) 38%, transparent);
  color: var(--brand-2);
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.hub-card-arrow svg { width: 15px; height: 15px; }

/* Survol : la carte se soulève, le modèle pivote d'un degré et demi — juste
   assez pour rappeler qu'il est en trois dimensions, pas assez pour agiter
   une page qui en compte trois. */
.hub-card:hover .hub-card-img,
.hub-card:focus-visible .hub-card-img { transform: scale(1.05) rotate(-1.5deg); }
.hub-card:hover .hub-card-arrow,
.hub-card:focus-visible .hub-card-arrow {
  transform: translateX(4px);
  background: var(--brand-2);
  border-color: var(--brand-2);
  color: var(--brand-2-ink);
}

/* Carte à deux gestes (praticien connecté) : l'image et le titre restent
   le lien d'aperçu, la rangée du bas porte « Nouvelle consultation » et
   « Aperçu ». Le survol de la carte entière est conservé. */
.hub-card.has-actions { cursor: default; }
.hub-card.has-actions:focus-within { border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 55%, var(--border)); }
.hub-card-main {
  display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;
  text-decoration: none; color: inherit; border-radius: 18px 18px 0 0;
}
.hub-card-main:focus-visible { outline: 2.5px solid var(--focus); outline-offset: -3px; }
.hub-card-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 19px 17px;
}
.hub-card.has-actions:hover .hub-card-img { transform: none; }

/* ---------- boutons de l'accueil ---------- */
/* Cibles tactiles d'abord : 40 px de haut, un praticien qui tient un iPad
   d'une main doit pouvoir viser sans regarder deux fois. */
.hub-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.hub-btn:hover { border-color: var(--accent); color: var(--accent); }
.hub-btn:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.hub-btn:active { transform: translateY(1px); }
.hub-btn-primary { background: var(--brand-2); border-color: var(--brand-2); color: var(--brand-2-ink); }
.hub-btn-primary:hover { background: color-mix(in srgb, var(--brand-2) 88%, black); border-color: color-mix(in srgb, var(--brand-2) 88%, black); color: var(--brand-2-ink); }
.hub-btn-ghost { background: transparent; border-color: transparent; color: var(--accent); padding: 0 10px; }
.hub-btn-ghost:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: transparent; }
.hub-btn-icon { width: 40px; padding: 0; color: var(--ink-2); }
.hub-btn-icon svg { width: 20px; height: 20px; fill: currentColor; }
.hub-btn[disabled], .hub-btn.is-busy { opacity: .6; cursor: progress; }
.hub-btn.is-error { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); }

/* ---------- consultations récentes ---------- */
.hub-recent { margin-top: 28px; }
.hub-recent-title {
  display: flex; align-items: center; gap: 13px;
  margin: 0 0 12px;
  font-size: 21px; font-weight: 600; letter-spacing: -.012em; color: var(--ink);
}
.hub-recent-title::after {
  content: ""; flex: 1 1 auto; height: 1px; min-width: 20px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brand-2) 60%, transparent),
    color-mix(in srgb, var(--accent) 55%, transparent) 62%,
    transparent);
}
.hub-recent-empty { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.hub-consult-list { display: flex; flex-direction: column; gap: 10px; }
.hub-consult {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border)); border-radius: 14px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 8%, transparent);
}
.hub-consult.is-completed { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.hub-consult-main { flex: 1 1 auto; min-width: 0; }
.hub-consult-title { margin: 0 0 3px; font-size: 16px; font-weight: 600; line-height: 1.25; }
.hub-consult-meta {
  margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
}
.hub-consult-views { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); }
.hub-status {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
}
.hub-consult.is-completed .hub-status { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.hub-consult-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.hub-menu { position: relative; }
.hub-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 170px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow);
}
.hub-menu-list button {
  display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.hub-menu-list button:hover { background: var(--surface-2); }

/* Invitation à se connecter, à la place de la liste */
.hub-hint {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 14px;
}
.hub-hint p { margin: 0; flex: 1 1 260px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* ---------- compte, dans le bandeau ---------- */
.hub-signin {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--hub-on-top) 45%, transparent); border-radius: 999px;
  color: var(--hub-on-top); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.hub-signin:hover { background: color-mix(in srgb, var(--hub-on-top) 14%, transparent); }
.hub-account { position: relative; }
.hub-account-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 2px 8px 2px 2px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hub-on-top) 35%, transparent);
  background: transparent; color: var(--hub-on-top); cursor: pointer; font: inherit;
}
.hub-account-btn:hover, .hub-account-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--hub-on-top) 14%, transparent); }
.hub-account-btn svg { width: 13px; height: 13px; transition: transform .18s ease; }
.hub-account-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.hub-avatar {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-2); color: var(--brand-2-ink);
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
.hub-account-menu { min-width: 230px; }
.hub-account-who {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.hub-account-who strong { font-size: 14px; color: var(--ink); }
.hub-account-who span { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.hub-account-menu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--ink); font-size: 14px; text-decoration: none;
}
.hub-account-menu a:hover { background: var(--surface-2); }

/* maquette annoncée mais pas encore ouverte */
.hub-card.is-soon { opacity: .55; pointer-events: none; }
.hub-badge {
  display: inline-block; margin-top: 14px; padding: 3px 10px;
  border-radius: 999px; background: var(--surface-3); color: var(--ink-3);
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}

/* ---------- pied de page ---------- */
.hub-foot {
  margin-top: 46px; padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
/* Petit, mais pas pâle : l'avertissement est discret par sa taille et sa
   place, jamais par un gris qu'on ne lit plus (--ink-3 tombe sous le
   contraste minimal sur fond blanc). */
.hub-disclaimer {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0; max-width: 92ch;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
}
.hub-disclaimer-ico { flex: none; display: grid; place-items: center; margin-top: 1px; color: var(--ink-3); }
.hub-disclaimer-ico svg { width: 15px; height: 15px; }
.hub-error { color: var(--danger); }

/* ---------- tablette ---------- */
@media (max-width: 860px) {
  .hub-intro { grid-template-columns: minmax(0, 1fr) minmax(170px, 232px); gap: 10px 20px; padding-top: 18px; }
  .hub-intro-vis { max-width: 232px; margin: -10px 0 -14px 0; }
  .hub-tagline { font-size: 15px; }
  .hub-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 15px; }
  .hub-card-vis { height: 150px; }
}

/* ---------- téléphone ---------- */
/* Une seule colonne, et le rendu 3D passe DERRIÈRE le texte, en filigrane :
   à cette largeur, le mettre à côté le réduirait à une tache, et le mettre
   au-dessus repousserait les cartes hors de l'écran. */
@media (max-width: 620px) {
  .hub-top-in { padding: 10px 16px; gap: 10px; }
  .hub-brand-full { display: none; }
  .hub-wrap { padding: 0 16px 24px; }

  .hub-intro { display: block; overflow: hidden; padding: 22px 0 6px; }
  .hub-intro-vis {
    position: absolute; top: -6px; right: -18px; z-index: 0;
    width: 58%; max-width: 230px; margin: 0;
    opacity: .16; pointer-events: none;
  }
  .hub-intro-vis::before { display: none; }
  .hub-intro-img { filter: none; }
  .hub-tagline { max-width: none; }

  .hub-region-sub { margin-left: 0; }
  .hub-grid { grid-template-columns: 1fr; }
  .hub-card-vis { height: 158px; }

  .hub-consult { flex-direction: column; align-items: stretch; gap: 10px; }
  .hub-consult-actions { justify-content: flex-end; }
  .hub-consult-actions .hub-btn-primary { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-card, .hub-card-img, .hub-card-arrow { transition: none; }
  .hub-card:hover, .hub-card:focus-visible { transform: none; }
  .hub-card:hover .hub-card-img, .hub-card:focus-visible .hub-card-img { transform: none; }
  .hub-card:hover .hub-card-arrow, .hub-card:focus-visible .hub-card-arrow { transform: none; }
}