/* ==========================================================================
   INVESTORAMA GROUP — Page GROUPE
   Page-specific blocks only. Anything reused by another page belongs in
   components-v2.css instead (see .ivr-phero / .ivr-subnav).
   Load order: tokens → base → components-v2 → sections → pages/groupe
   ========================================================================== */

/* Anchor landing offset. base.css clears the header alone; this page also
   carries a sticky sub-nav under it, so both heights must be cleared or a
   deep-linked section title lands behind the sub-nav. */
html {
  /* Exactement en-tete + sous-navigation, rien de plus : le supplement
     laissait un vide sous la barre. Valeurs derivees des tokens — la hauteur
     de la sous-nav etait ici figee a 3.75rem alors qu'elle vaut 4rem depuis
     son passage en fond sombre, d'ou 27px de decalage. */
  scroll-padding-block-start: calc(var(--ivr-header-h-scrolled) + var(--ivr-subnav-h));
}

/* --------------------------------------------------------------------------
   1 · QUI SOMMES-NOUS + ORGANIGRAMME
   Une seule section : en-tete sur deux colonnes (surtitre + titre a gauche,
   texte + boutons a droite), puis l'organigramme dessous.
   -------------------------------------------------------------------------- */
.ivr-intro {
  display: grid;
  gap: var(--ivr-space-8);
  align-items: start;
}

@media (min-width: 62rem) {
  .ivr-intro {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--ivr-space-16);
  }
}

.ivr-intro__head {
  display: grid;
  gap: var(--ivr-space-4);
  justify-items: start;
}

.ivr-intro__title {
  font-size: var(--ivr-text-2xl);
  font-weight: var(--ivr-weight-semibold);
  line-height: var(--ivr-leading-tight);
  letter-spacing: var(--ivr-tracking-tight);
  text-wrap: balance;
}

.ivr-intro__body {
  display: grid;
  gap: var(--ivr-space-8);
  justify-items: start;
}

.ivr-intro__text {
  max-inline-size: var(--ivr-measure);
  font-size: var(--ivr-text-md);
  line-height: var(--ivr-leading-relaxed);
  color: var(--ivr-text-muted);
}

.ivr-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ivr-space-4);
}

/* --------------------------------------------------------------------------
   ORGANIGRAMME — racine, bus horizontal, 4 poles, filiales.
   -------------------------------------------------------------------------- */
.ivr-chart {
  --chart-line: var(--ivr-blue-200);
  --chart-gap: var(--ivr-grid-gap);
  --chart-stem: 2.5rem;
  --chart-w: 2px;
  margin-block-start: clamp(3.5rem, 2rem + 6vw, 7rem);
}

/* ---- racine ---- */
.ivr-chart__root {
  position: relative;
  display: flex;
  justify-content: center;
  /* en pile (mobile/tablette) il n'y a pas de tronc pour ecarter la racine du
     premier pole : c'est la marge qui fait ce travail. Le palier desktop la
     remplace par la hauteur exacte du tronc. */
  margin-block-end: var(--ivr-space-12);
}

.ivr-chart__rootbox {
  display: grid;
  place-items: center;
  padding: var(--ivr-space-6) clamp(1.5rem, 1rem + 3vw, 3rem);
  background-color: var(--ivr-surface);
  border: var(--ivr-rule) solid var(--ivr-border-subtle);
  border-radius: var(--ivr-radius-card);
  box-shadow: var(--ivr-shadow-md);
}

.ivr-chart__rootbox img {
  block-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  inline-size: auto;
}

.ivr-chart__poles {
  display: grid;
  gap: var(--ivr-space-16);
  grid-template-columns: 1fr;
  /* sans ceci, chaque colonne s'etire sur la hauteur de la plus haute
     (Industrie, 3 filiales) et le bandeau de pole devient un pave geant */
  align-items: start;
}

.ivr-chart__pole {
  position: relative;
  display: grid;
  gap: var(--ivr-space-5);
  align-content: start;
}

.ivr-chart__pole-head {
  display: flex;
  align-items: center;
  gap: var(--ivr-space-3);
  padding: var(--ivr-space-4) var(--ivr-space-5);
  background-color: var(--ivr-blue-50);
  border: var(--ivr-rule) solid var(--ivr-blue-100);
  border-radius: var(--ivr-radius-chip);
  color: var(--ivr-blue-800);
}

/* l'icone garde le bleu de marque, le libelle passe en bleu profond :
   #013374 sur #f0f6ff reste tres au-dessus du seuil AA */
.ivr-chart__pole-head .ivr-icon {
  color: var(--ivr-blue-600);
}

.ivr-chart__pole-name {
  font-size: var(--ivr-text-base);
  font-weight: var(--ivr-weight-semibold);
  letter-spacing: var(--ivr-tracking-snug);
}

.ivr-chart__subs {
  display: grid;
  gap: var(--ivr-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- carte filiale ---- */
.ivr-chart__sub {
  position: relative;
  display: grid;
  gap: var(--ivr-space-3);
  padding: var(--ivr-space-4);
  background-color: var(--ivr-surface);
  border: var(--ivr-rule) solid var(--ivr-border-subtle);
  border-radius: var(--ivr-radius-card);
  box-shadow: var(--ivr-shadow-card);
  transition:
    border-color var(--ivr-duration) var(--ivr-ease),
    box-shadow var(--ivr-duration) var(--ivr-ease),
    transform var(--ivr-duration) var(--ivr-ease-out);
}

.ivr-chart__sub:hover {
  border-color: var(--ivr-blue-200);
  box-shadow: var(--ivr-shadow-card-hover);
  transform: translateY(-4px);
}

/* La plaque a une hauteur FIXE ; le logo est borne sur SES DEUX axes.
   Une seule contrainte de hauteur ne suffit pas : les 7 marques vont de 0.96
   (Cicolab, carre) a 4.43 (IBG, tres large). Borne uniquement en hauteur, un
   logo carre se retrouve minuscule a cote d'un logo large. En bornant les deux
   axes, les carres butent sur la hauteur et les larges sur la largeur — tous
   occupent alors une surface optique comparable. */
.ivr-chart__plate {
  /* la hauteur utile est la source de verite ; la plaque en derive */
  --plate-h: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: calc(var(--plate-h) + var(--ivr-space-4) * 2);
  padding: var(--ivr-space-4);
  overflow: hidden;
}

/* max-block-size en VALEUR ABSOLUE, jamais en %. Un pourcentage se resout
   contre une piste auto-dimensionnee : dependance circulaire, la contrainte
   retombe a `none` en silence et les logos debordent de leur plaque. */
.ivr-chart__logo {
  display: block;
  max-inline-size: 100%;
  max-block-size: var(--plate-h);
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}

.ivr-chart__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ivr-space-3);
  padding-inline: var(--ivr-space-2);
}

/* Lien vers le site de la filiale. Le ::after etire la zone cliquable a toute
   la carte : une cible de 12px de haut serait inutilisable au doigt. */
.ivr-chart__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ivr-space-2);
  margin-inline: var(--ivr-space-2);
  padding-block-start: var(--ivr-space-3);
  border-block-start: var(--ivr-rule) solid var(--ivr-border-subtle);
  font-size: var(--ivr-text-xs);
  font-weight: var(--ivr-weight-medium);
  color: var(--ivr-blue-600);
  text-decoration: none;
  transition: color var(--ivr-duration-fast) var(--ivr-ease);
}

.ivr-chart__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ivr-chart__sub:hover .ivr-chart__link {
  color: var(--ivr-blue-700);
}

.ivr-chart__link .ivr-icon {
  margin-inline-start: auto;
  transition: transform var(--ivr-duration) var(--ivr-ease);
}

/* translate est physique : la fleche doit partir vers l'autre bord en RTL */
.ivr-chart__sub:hover .ivr-chart__link .ivr-icon {
  transform: translate(2px, -2px);
}

[dir="rtl"] .ivr-chart__sub:hover .ivr-chart__link .ivr-icon {
  transform: translate(-2px, -2px) scaleX(-1);
}

/* la carte entiere reagit au focus clavier du lien */
.ivr-chart__sub:has(.ivr-chart__link:focus-visible) {
  outline: 2px solid var(--ivr-focus-ring);
  outline-offset: 2px;
}

.ivr-chart__name {
  font-size: var(--ivr-text-sm);
  font-weight: var(--ivr-weight-medium);
  letter-spacing: var(--ivr-tracking-snug);
  color: var(--ivr-text);
}

.ivr-chart__pct {
  flex: none;
  padding: var(--ivr-space-1) var(--ivr-space-3);
  font-size: var(--ivr-text-2xs);
  font-weight: var(--ivr-weight-semibold);
  letter-spacing: var(--ivr-tracking-wide);
  color: var(--ivr-blue-700);
  background-color: var(--ivr-blue-50);
  border-radius: var(--ivr-radius-pill);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- traits de liaison : seulement quand les 4 poles sont sur une ligne ----
   Le bus est dessine par segment DANS chaque colonne, debordant de la moitie
   de la gouttiere de chaque cote. C'est exact quelle que soit la gouttiere,
   contrairement a un `inset-inline: 12.5%` qui ignore les gaps. */
@media (min-width: 68rem) {
  .ivr-chart__poles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--chart-gap);
  }

  .ivr-chart__root {
    margin-block-end: var(--chart-stem);
  }

  .ivr-chart__root::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    block-size: var(--chart-stem);
    inline-size: var(--chart-w);
    inset-inline-start: calc(50% - var(--chart-w) / 2);
    background-color: var(--chart-line);
  }

  .ivr-chart__pole {
    padding-block-start: var(--chart-stem);
  }

  /* segment horizontal du bus */
  .ivr-chart__pole::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: calc(var(--chart-gap) / -2);
    block-size: var(--chart-w);
    background-color: var(--chart-line);
  }

  /* le bus s'arrete au centre du premier et du dernier pole */
  .ivr-chart__pole:first-child::before {
    inset-inline-start: calc(50% - var(--chart-w) / 2);
  }

  .ivr-chart__pole:last-child::before {
    inset-inline-end: calc(50% - var(--chart-w) / 2);
  }

  /* descente verticale vers le pole */
  .ivr-chart__pole::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    block-size: var(--chart-stem);
    inline-size: var(--chart-w);
    inset-inline-start: calc(50% - var(--chart-w) / 2);
    background-color: var(--chart-line);
  }
}

/* ---- en pile (< 68rem) : le bus horizontal n'a plus de sens, l'arbre bascule
   sur un rail vertical a gauche avec une antenne vers chaque pole. Le rail est
   dessine PAR POLE et deborde de la gouttiere, faute de quoi il se briserait a
   chaque intervalle ; le dernier pole n'en trace que jusqu'a son antenne. ---- */
@media (max-width: 67.999rem) {
  .ivr-chart {
    --rail-x: 1.5rem;
    --rail-indent: 3rem;
    --pole-tick: 2.25rem;
  }

  .ivr-chart__root {
    justify-content: stretch;
    margin-block-end: var(--ivr-space-10);
  }

  /* en pile, la racine se cale a gauche comme le reste de l'arbre */
  .ivr-chart__rootbox {
    inline-size: 100%;
    place-items: center start;
    padding-inline: var(--ivr-space-6);
  }

  /* tronc : du bas de la racine jusqu'au rail */
  .ivr-chart__root::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    block-size: var(--ivr-space-10);
    inline-size: var(--chart-w);
    inset-inline-start: var(--rail-x);
    background-color: var(--chart-line);
  }

  .ivr-chart__poles {
    padding-inline-start: var(--rail-indent);
  }

  /* segment de rail : deborde dans la gouttiere pour rester continu */
  .ivr-chart__pole::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    block-size: calc(100% + var(--ivr-space-16));
    inline-size: var(--chart-w);
    inset-inline-start: calc(var(--rail-x) - var(--rail-indent));
    background-color: var(--chart-line);
  }

  /* le dernier pole arrete le rail au niveau de son antenne */
  .ivr-chart__pole:last-child::before {
    block-size: var(--pole-tick);
  }

  /* antenne horizontale vers le bandeau de pole */
  .ivr-chart__pole::after {
    content: "";
    position: absolute;
    inset-block-start: var(--pole-tick);
    inset-inline-start: calc(var(--rail-x) - var(--rail-indent));
    inline-size: calc(var(--rail-indent) - var(--rail-x));
    block-size: var(--chart-w);
    background-color: var(--chart-line);
  }
}

@media (min-width: 46rem) and (max-width: 67.999rem) {
  .ivr-chart__poles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ivr-space-12);
  }

  /* deux colonnes : le rail vertical ne correspond plus a l'empilement */
  .ivr-chart__pole::before,
  .ivr-chart__pole::after,
  .ivr-chart__root::after {
    display: none;
  }

  .ivr-chart__poles {
    padding-inline-start: 0;
  }
}

/* --------------------------------------------------------------------------
   2 · VALEURS & PRINCIPES
   En-tete de section a gauche, les deux groupes empiles a droite.
   -------------------------------------------------------------------------- */
.ivr-vp {
  display: grid;
  gap: var(--ivr-space-12);
  align-items: start;
}

@media (min-width: 62rem) {
  .ivr-vp {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.4fr);
    gap: clamp(4rem, 1rem + 8vw, 9rem);
  }

  /* l'en-tete accompagne la lecture des deux accordeons ; l'offset degage
     l'en-tete de page et la sous-navigation, toutes deux collantes */
  .ivr-vp__aside {
    position: sticky;
    inset-block-start: calc(var(--ivr-header-h-scrolled) + var(--ivr-subnav-h) + var(--ivr-space-10));
  }
}

.ivr-vp__aside {
  display: grid;
  gap: var(--ivr-space-5);
  justify-items: start;
}

.ivr-vp__heading {
  font-size: var(--ivr-text-2xl);
  font-weight: var(--ivr-weight-semibold);
  line-height: var(--ivr-leading-tight);
  letter-spacing: var(--ivr-tracking-tight);
  text-wrap: balance;
}

.ivr-vp__main {
  /* la gouttiere du rail est declaree ici pour que le titre de groupe et
     l'accordeon partagent le meme alignement de colonne */
  --acc-gutter: var(--ivr-space-8);
  display: grid;
  gap: clamp(3rem, 1.5rem + 6vw, 5.5rem);
}

.ivr-vp__group {
  display: grid;
  gap: var(--ivr-space-4);
}

/* Deux h3 en gros corps entraient en concurrence avec le h2 de gauche et
   flottaient au-dessus du rail sans s'aligner sur rien. Ramenes au rang
   d'intertitre — petite capitale, filet qui file jusqu'au bord — ils calent
   sur la colonne de contenu et rendent la hierarchie lisible. */
.ivr-vp__title {
  display: flex;
  align-items: center;
  gap: var(--ivr-space-4);
  font-size: var(--ivr-text-2xs);
  font-weight: var(--ivr-weight-semibold);
  letter-spacing: var(--ivr-tracking-widest);
  text-transform: uppercase;
  color: var(--ivr-text-subtle);
}

.ivr-vp__title {
  padding-inline-start: var(--acc-gutter);
}

.ivr-vp__title::after {
  content: "";
  flex: 1;
  block-size: var(--ivr-rule);
  background-color: var(--ivr-border);
}

/* --------------------------------------------------------------------------
   ACCORDEON
   Deux colonnes : une gouttiere qui porte le rail et la pastille, puis le
   contenu. Le filet de separation appartient a la colonne de CONTENU, jamais
   a l'element entier — pose sur l'element il traversait le rail vertical.
   -------------------------------------------------------------------------- */
.ivr-acc {
  --acc-rail: 1px;
  --acc-dot: 0.625rem;
  --acc-dot-top: var(--ivr-space-6);
}

.ivr-acc__item {
  display: grid;
  grid-template-columns: var(--acc-gutter) minmax(0, 1fr);
}

/* ---- rail + pastille ---- */
.ivr-acc__marker {
  position: relative;
}

/* le trait part du centre de la pastille et descend jusqu'au bas de
   l'element — y compris sur le dernier, pour que la serie reste homogene */
.ivr-acc__marker::before {
  content: "";
  position: absolute;
  inset-block: calc(var(--acc-dot-top) + var(--acc-dot) / 2) 0;
  inset-inline-start: calc(var(--acc-dot) / 2 - var(--acc-rail) / 2);
  inline-size: var(--acc-rail);
  background-color: var(--ivr-border);
}

.ivr-acc__marker::after {
  content: "";
  position: absolute;
  inset-block-start: var(--acc-dot-top);
  inset-inline-start: 0;
  inline-size: var(--acc-dot);
  block-size: var(--acc-dot);
  border-radius: var(--ivr-radius-full);
  border: 1.5px solid var(--ivr-border-strong);
  /* opaque : la pastille masque le trait qui passe derriere elle. Suit le fond
     de la section, desormais teinte — un blanc fixe formerait une tache. */
  background-color: var(--ivr-surface-muted);
  transition:
    background-color var(--ivr-duration) var(--ivr-ease),
    border-color var(--ivr-duration) var(--ivr-ease),
    box-shadow var(--ivr-duration) var(--ivr-ease);
}

.ivr-acc__item.is-open .ivr-acc__marker::after {
  background-color: var(--ivr-blue-600);
  border-color: var(--ivr-blue-600);
  box-shadow: 0 0 0 4px var(--ivr-blue-50);
}

/* ---- contenu ---- */
.ivr-acc__body {
  border-block-end: var(--ivr-rule) solid var(--ivr-border-subtle);
}

.ivr-acc__head {
  margin: 0;
}

.ivr-acc__trigger {
  display: flex;
  align-items: center;
  gap: var(--ivr-space-4);
  inline-size: 100%;
  padding-block: var(--ivr-space-5);
  text-align: start;
  color: var(--ivr-text-subtle);
  transition: color var(--ivr-duration) var(--ivr-ease);
}

.ivr-acc__trigger:hover {
  color: var(--ivr-blue-700);
}

.ivr-acc__item.is-open .ivr-acc__trigger {
  color: var(--ivr-text);
}

.ivr-acc__num {
  flex: none;
  font-size: var(--ivr-text-xs);
  font-weight: var(--ivr-weight-semibold);
  letter-spacing: var(--ivr-tracking-wide);
  font-variant-numeric: tabular-nums;
  color: var(--ivr-gray-400);
  transition: color var(--ivr-duration) var(--ivr-ease);
}

.ivr-acc__item.is-open .ivr-acc__num {
  color: var(--ivr-blue-500);
}

.ivr-acc__label {
  flex: 1;
  font-size: var(--ivr-text-lg);
  font-weight: var(--ivr-weight-semibold);
  letter-spacing: var(--ivr-tracking-snug);
}

.ivr-acc__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--ivr-radius-full);
  background-color: var(--ivr-surface);
  border: var(--ivr-rule) solid var(--ivr-surface);
  color: var(--ivr-text-muted);
  transition:
    background-color var(--ivr-duration) var(--ivr-ease),
    border-color var(--ivr-duration) var(--ivr-ease),
    color var(--ivr-duration) var(--ivr-ease),
    transform var(--ivr-duration) var(--ivr-ease-out);
}

.ivr-acc__trigger:hover .ivr-acc__icon {
  border-color: var(--ivr-blue-200);
  color: var(--ivr-blue-600);
  transform: scale(1.06);
}

.ivr-acc__icon .ivr-icon {
  transition: rotate var(--ivr-duration-slow) var(--ivr-ease-out);
}

.ivr-acc__item.is-open .ivr-acc__icon {
  background-color: var(--ivr-blue-600);
  border-color: var(--ivr-blue-600);
  color: var(--ivr-gray-0);
}

.ivr-acc__item.is-open .ivr-acc__icon .ivr-icon {
  rotate: -180deg;
}

/* Ouverture par grid-template-rows 0fr -> 1fr : c'est le seul moyen d'animer
   vers une hauteur *inconnue* sans mesurer en JS. `height: auto` n'est pas
   interpolable, et un max-height arbitraire donne une fin de course molle sur
   les textes courts et coupe les longs. */
.ivr-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition:
    grid-template-rows var(--ivr-duration-slow) var(--ivr-ease-out),
    opacity var(--ivr-duration) var(--ivr-ease);
  opacity: 0;
}

.ivr-acc__item.is-open .ivr-acc__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* l'enfant doit avoir min-block-size: 0, sinon la piste 0fr ne peut pas
   comprimer son contenu et le panneau reste ouvert */
.ivr-acc__inner {
  overflow: hidden;
  min-block-size: 0;
}

.ivr-acc__text {
  padding-block-end: var(--ivr-space-6);
  padding-inline-end: var(--ivr-space-12);
  font-size: var(--ivr-text-sm);
  line-height: var(--ivr-leading-relaxed);
  color: var(--ivr-text-muted);
  translate: 0 -0.5rem;
  transition: translate var(--ivr-duration-slow) var(--ivr-ease-out);
}

.ivr-acc__item.is-open .ivr-acc__text {
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {

  .ivr-acc__panel,
  .ivr-acc__text,
  .ivr-acc__icon .ivr-icon {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   3 · GOUVERNANCE
   Pas de cartes, pas de portraits : une mise en page typographique.
   Chaque ligne associe une FONCTION a la ou les personnes qui l'occupent —
   c'est la structure exacte du document source, ou les six administrateurs
   sont listes sans intitule individuel.
   -------------------------------------------------------------------------- */
.ivr-gov {
  display: grid;
  gap: var(--ivr-space-12);
  align-items: start;
}

@media (min-width: 62rem) {
  .ivr-gov {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.4fr);
    gap: clamp(4rem, 1rem + 8vw, 9rem);
  }

  .ivr-gov__aside {
    position: sticky;
    inset-block-start: calc(var(--ivr-header-h-scrolled) + var(--ivr-subnav-h) + var(--ivr-space-10));
  }
}

.ivr-gov__aside {
  display: grid;
  gap: var(--ivr-space-5);
  justify-items: start;
}

.ivr-gov__heading {
  font-size: var(--ivr-text-2xl);
  font-weight: var(--ivr-weight-semibold);
  line-height: var(--ivr-leading-tight);
  letter-spacing: var(--ivr-tracking-tight);
  text-wrap: balance;
}

.ivr-gov__main {
  display: grid;
  gap: clamp(3rem, 1.5rem + 6vw, 5.5rem);
}

.ivr-gov__block {
  display: grid;
  gap: var(--ivr-space-4);
}

.ivr-gov__text {
  max-inline-size: var(--ivr-measure);
  font-size: var(--ivr-text-sm);
  line-height: var(--ivr-leading-relaxed);
  color: var(--ivr-text-muted);
  margin-block-end: var(--ivr-space-2);
}

/* ---- barre d'instance ----------------------------------------------------
   Trois niveaux devaient se distinguer d'un coup d'oeil : l'instance, la
   fonction, la personne. L'instance reprenait le meme petit capitale que les
   fonctions — d'ou l'impression de lire deux fois la meme chose. Elle passe
   donc en gros corps, avec son index au-dessus plutot qu'a cote : le titre
   gagne toute la ligne. Le filet reste un cheveu, amorce d'un segment bleu —
   un trait noir de 2px ecrasait la section entiere.
   -------------------------------------------------------------------------- */
.ivr-gov__bar {
  position: relative;
  display: grid;
  justify-items: start;
  padding-block-end: var(--ivr-space-5);
  border-block-end: var(--ivr-rule) solid var(--ivr-border);
}

.ivr-gov__bar::after {
  content: "";
  position: absolute;
  inset-block-end: calc(var(--ivr-rule) * -1);
  inset-inline-start: 0;
  inline-size: 3rem;
  block-size: var(--ivr-rule);
  background-color: var(--ivr-blue-600);
}

.ivr-gov__title {
  font-size: var(--ivr-text-xl);
  font-weight: var(--ivr-weight-semibold);
  letter-spacing: var(--ivr-tracking-tight);
}

/* ---- registre ---- */
.ivr-roster {
  margin: 0;
}

.ivr-roster__row {
  position: relative;
  display: grid;
  gap: var(--ivr-space-3);
  padding: var(--ivr-space-5) var(--ivr-space-4) var(--ivr-space-5) var(--ivr-space-4);
  border-block-end: var(--ivr-rule) solid var(--ivr-border-subtle);
}

@media (min-width: 46rem) {
  .ivr-roster__row {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--ivr-space-8);
    align-items: baseline;
  }
}

/* Filet d'accent permanent, gris tres clair : il structure la colonne au
   repos. Il vire au bleu — avec le libelle de fonction — des que la LIGNE est
   survolee, pas seulement un nom : viser la zone vide entre fonction et noms
   ne declenchait rien auparavant. Le survol d'un nom garde en plus sa propre
   reponse (tiret qui s'allonge). */
.ivr-roster__row::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 2px;
  background-color: var(--ivr-border-subtle);
  transition: background-color var(--ivr-duration) var(--ivr-ease);
}

.ivr-roster__row:hover::before {
  background-color: var(--ivr-blue-600);
}

.ivr-roster__role {
  font-size: var(--ivr-text-2xs);
  font-weight: var(--ivr-weight-semibold);
  letter-spacing: var(--ivr-tracking-widest);
  text-transform: uppercase;
  color: var(--ivr-text-subtle);
  transition: color var(--ivr-duration) var(--ivr-ease);
}

.ivr-roster__row:hover .ivr-roster__role {
  color: var(--ivr-blue-600);
}

.ivr-roster__people {
  margin: 0;
}

.ivr-roster__people ul {
  display: grid;
  gap: var(--ivr-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Le tiret est un ELEMENT FLEX, pas un decor absolu : en s'allongeant il
   pousse lui-meme le nom. Une seule propriete anime donc a la fois le trait
   et le deplacement du nom, au lieu de deux transitions a synchroniser. */
.ivr-roster__name {
  display: inline-flex;
  align-items: center;
  gap: var(--ivr-space-3);
  font-size: var(--ivr-text-base);
  font-weight: var(--ivr-weight-medium);
  letter-spacing: var(--ivr-tracking-snug);
  color: var(--ivr-text);
  cursor: default;
  transition: color var(--ivr-duration) var(--ivr-ease);
}

.ivr-roster__name::before {
  content: "";
  flex: none;
  inline-size: 0.5rem;
  block-size: 1px;
  background-color: var(--ivr-border-strong);
  transition:
    inline-size var(--ivr-duration) var(--ivr-ease-out),
    background-color var(--ivr-duration) var(--ivr-ease);
}

.ivr-roster__name:hover {
  color: var(--ivr-blue-700);
}

.ivr-roster__name:hover::before {
  inline-size: 1.5rem;
  background-color: var(--ivr-blue-600);
}

@media (prefers-reduced-motion: reduce) {

  .ivr-roster__row::before,
  .ivr-roster__name,
  .ivr-roster__name::before {
    transition: none;
  }
}