/* ==========================================================================
   INVESTORAMA GROUP — Page MÉTIERS
   Blocs propres a la page. Tout ce qui sert ailleurs va dans components-v2.css
   (voir .ivr-phero / .ivr-subnav).
   Ordre de chargement : tokens → base → components-v2 → sections → pages/metiers
   ========================================================================== */

/* Arrivee sur une ancre : base.css ne degage que l'en-tete, cette page porte
   en plus une sous-navigation collante. Sans ce cumul, un titre vise par un
   lien profond se retrouve derriere la barre. */
/* Jalon d'ancre : element de hauteur nulle pose dans le flux juste avant
   chaque section. Le fragment vise ce jalon, pas la section — une cible
   `position: sticky` est mesuree a sa position EPINGLEE, si bien qu'une fois
   figee le navigateur la croit deja en place et ne defile presque pas
   (ancres inoperantes depuis le bas de page, et arrivee depuis une autre page
   decalee de la hauteur de la sous-navigation). */
.ivr-anchor {
  display: block;
  block-size: 0;
  overflow: hidden;
}

html {
  /* Point d'ancrage unique : en-tete reduit + sous-navigation. C'est a la fois
     l'endroit ou une section vient se figer (--mx-pin) et celui ou un lien
     d'ancre doit la deposer. Une seule variable pour les deux — separes, ils
     avaient deja diverge de 32px et l'ancre laissait un vide sous la barre. */
  --mx-pin-base: calc(var(--ivr-header-h-scrolled) + var(--ivr-subnav-h));
  scroll-padding-block-start: var(--mx-pin-base);
}

/* ==========================================================================
   SECTION MIXTE — image pleine hauteur en bord de page, contenu aligne
   sur le conteneur. Prototype pose sur le pole Industrie ; les trois autres
   poles restent sur l'ancienne mise en page tant que celle-ci n'est pas
   validee.
   ========================================================================== */
.ivr-mx {
  display: grid;
  /* la section est pleine largeur : l'image part du bord de l'ecran */
  grid-template-columns: 1fr;
  /* gris tres clair : les cartes restent blanches et s'en detachent sans
     avoir besoin d'un filet */
  background-color: color-mix(in srgb, var(--ivr-gray-100) 60%, var(--ivr-surface));
  /* Filet en HAUT seulement : deux sections empilees partageraient sinon un
     bord bas + un bord haut, soit 2px la ou on en veut 1. Le dernier bloc de
     la serie referme la serie avec son propre filet bas. */
  border-block-start: var(--ivr-rule) solid var(--ivr-border-subtle);
}

/* Seul le DERNIER d'une suite referme la serie. `:last-of-type` ne
   conviendrait pas : il raisonne sur le TYPE d'element, donc des qu'une
   section d'un autre genre termine la page, la suite reste ouverte. */
.ivr-mx:not(:has(+ .ivr-mx)) {
  border-block-end: var(--ivr-rule) solid var(--ivr-border-subtle);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .ivr-mx {
    background-color: #f6f7f8;
  }
}

/* ---- media ----
   `block-size: 100%` sur l'image serait une dependance circulaire (la piste
   est dimensionnee par la colonne de texte) et retomberait a `auto` en
   silence. Le positionnement absolu dans un parent `relative` donne une
   hauteur definie sans rien calculer. */
.ivr-mx__media {
  position: relative;
  min-block-size: 18rem;
}

.ivr-mx__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ---- contenu ---- */
.ivr-mx__body {
  display: grid;
  gap: var(--ivr-space-5);
  justify-items: start;
  align-content: center;
  padding: var(--ivr-section-y) var(--ivr-gutter);
}

.ivr-mx__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);
}

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

@media (min-width: 62rem) {
  .ivr-mx {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* ---- empilement au defilement ----
     Chaque section s'epingle sous l'en-tete et la sous-navigation ; la
     suivante monte par-dessus. Le bloc de defilement reste `main`, donc les
     sections deja epinglees le restent : c'est ce qui forme la pile.
     Aucun z-index : deux elements positionnes se peignent dans l'ordre du DOM,
     la derniere section passe donc naturellement au-dessus. */
  .ivr-mx {
    /* --mx-pin-base est herite de :root — voir en tete de fichier */
    /* surcharge par initStack pour les sections plus hautes que l'ecran */
    --mx-pin: var(--mx-pin-base);
    position: sticky;
    inset-block-start: var(--mx-pin);
    min-block-size: calc(100svh - var(--mx-pin-base));
  }

  /* Le recul se joue en LUMIERE, pas en echelle. Une mise a l'echelle d'une
     section pleine largeur la retrecit aussi horizontalement et ouvre deux
     bandes de fond de page sur ses cotes — ce qui se lit comme un defaut de
     rendu, pas comme de la profondeur.

     Voile en ::after plutot qu'un filter: brightness() — un filtre cree un
     contexte de superposition et impose une passe de rendu sur toute la
     section, image comprise. */
  .ivr-mx::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-color: rgb(2 18 42 / calc(0.16 * var(--mx-p, 0)));
  }

  @media (prefers-reduced-motion: reduce) {
    .ivr-mx {
      scale: 1;
      transition: none;
    }

    .ivr-mx::after {
      background-color: transparent;
    }
  }

  /* Le bord de fin du texte doit retomber exactement sur celui du conteneur.
     Le retrait est porte par la SECTION, pas par la colonne : dans un element
     de grille, `100%` se resout contre la colonne et non contre la section —
     au-dela de 1440px le calcul partait donc sur la moitie de la largeur et le
     texte debordait du conteneur de l'exact decalage de centrage.
     Pose ici, il reduit la boite de contenu avant le partage en colonnes, donc
     le resultat ne depend pas du ratio des colonnes.
     `100%` et non `100vw` : vw inclut la barre de defilement. */
  /* La coupure image / contenu doit tomber a 50 % EXACTEMENT, et sur toutes
     les sections : empilees, deux coupures differentes se voient aussitot.
     Le retrait qui aligne le texte sur le conteneur est donc porte par la
     COLONNE, pas par la section — pose sur la section il decalait la coupure
     elle-meme (jusqu'a 280px d'ecart entre deux sections a 1920px).

     `200%` et non `100%` : dans un element de grille, un pourcentage se resout
     contre la colonne. La colonne valant ici exactement la moitie de la
     section, 200 % redonne la largeur de section. Ce facteur suit donc le
     partage 50/50 ci-dessus — les deux vont ensemble. */
  .ivr-mx {
    --mx-edge: calc(max(0px, (200% - var(--ivr-container)) / 2) + var(--ivr-gutter));
    --mx-gap: clamp(2.5rem, 1rem + 4vw, 5rem);
  }

  .ivr-mx__body {
    padding-inline: var(--mx-gap) var(--mx-edge);
  }

  /* Alternance : l'image passe de l'autre cote, le retrait du texte suit. */
  .ivr-mx--flip .ivr-mx__media {
    grid-area: 1 / 2;
  }

  .ivr-mx--flip .ivr-mx__body {
    grid-area: 1 / 1;
    padding-inline: var(--mx-edge) var(--mx-gap);
  }
}

/* --------------------------------------------------------------------------
   ACCORDEON DES FILIALES
   Reprend les crochets attendus par initSubnav/initAccordion — `[data-accordion]`,
   `.ivr-acc__item`, `.ivr-acc__trigger`, `.ivr-acc__panel`, `.is-open` — pour
   etre pilote par le meme module que la page Groupe, sans JS supplementaire.
   L'habillage, lui, est propre a cette page : ni rail ni pastille ici.
   -------------------------------------------------------------------------- */
.ivr-acc {
  display: grid;
  gap: var(--ivr-space-3);
  inline-size: 100%;
  margin-block-start: var(--ivr-space-6);
}

.ivr-acc__item {
  background-color: var(--ivr-surface);
  border-radius: var(--ivr-radius-card);
  padding-inline: var(--ivr-space-6);
  transition: box-shadow var(--ivr-duration) var(--ivr-ease);
}

.ivr-acc__item:hover {
  box-shadow: var(--ivr-shadow-xs);
}

.ivr-acc__item.is-open {
  box-shadow: var(--ivr-shadow-sm);
}

.ivr-acc__head {
  margin: 0;
}

/* ---- carte statique : pole a filiale unique ----
   Pas de bouton, donc pas de chevron ni de panneau. Elle reprend l'aspect de
   l'element ouvert pour que les quatre poles se ressemblent. */
.ivr-acc__item--static {
  display: grid;
  gap: var(--ivr-space-6);
  padding-block: var(--ivr-space-6) var(--ivr-space-8);
  box-shadow: var(--ivr-shadow-sm);
}

.ivr-acc__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--ivr-space-4) var(--ivr-space-5);
}

.ivr-acc__item--static .ivr-acc__logo {
  filter: grayscale(0);
  opacity: 1;
}

.ivr-acc__item--static .ivr-acc__text {
  padding-block: 0;
}

.ivr-acc__item--static .ivr-acc__cta {
  margin-block-end: 0;
  justify-self: start;
}


/* le panneau ouvert n'est plus actionnable : le curseur ne doit plus le
   promettre, et le chevron cesse de reagir au survol */
.ivr-acc__trigger[aria-disabled="true"] {
  cursor: default;
}

.ivr-acc__trigger[aria-disabled="true"]:hover .ivr-acc__icon {
  border-color: var(--ivr-blue-600);
  color: var(--ivr-gray-0);
}

.ivr-acc__trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ivr-space-4) var(--ivr-space-5);
  inline-size: 100%;
  padding-block: var(--ivr-space-5);
  text-align: start;
}


/* Borne sur les DEUX axes : les marques vont d'un ratio 0.96 (Cicolab, carre)
   a 4.43 (IBG, tres large). Une contrainte de hauteur seule rendrait les
   logos carres minuscules. Valeurs absolues, jamais un pourcentage. */
.ivr-acc__logo {
  display: block;
  max-inline-size: 11rem;
  max-block-size: 3.75rem;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  /* Logos filiales toujours en couleur (demande client). Léger relief au
     survol via un scale, sans jamais désaturer. */
  filter: none;
  opacity: 1;
  transition: transform var(--ivr-duration) var(--ivr-ease-out);
}

.ivr-acc__item:hover .ivr-acc__logo,
.ivr-acc__trigger:hover .ivr-acc__logo,
.ivr-acc__item.is-open .ivr-acc__logo {
  transform: scale(1.03);
}

/* Le nom coiffe le logo : petite capitale grise, comme les intitules de
   section ailleurs sur le site. C'est le logo qui porte l'identite visuelle,
   le nom ne fait que le nommer. */
.ivr-acc__meta {
  display: grid;
  gap: var(--ivr-space-2);
  justify-items: end;
  justify-self: end;
}

.ivr-acc__name {
  margin: 0;
  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-acc__trigger:hover .ivr-acc__name,
.ivr-acc__item.is-open .ivr-acc__name {
  color: var(--ivr-blue-700);
}

/* Cale sur le bord de fin. La forme vient de .ivr-overline, portee dans le
   markup ; seules les trois couleurs sont repointees, pour que la pastille
   suive le meme cycle que le nom et le logo : grise au repos, coloree au
   survol ou a l'ouverture. */
.ivr-acc__pct {
  --ivr-overline-bg: var(--ivr-surface-muted);
  --ivr-overline-fg: var(--ivr-text-muted);
  justify-self: end;
  white-space: nowrap;
  transition:
    background-color var(--ivr-duration) var(--ivr-ease),
    color var(--ivr-duration) var(--ivr-ease);
}

/* la puce carree appartient au surtitre de section, pas a une donnee chiffree */
.ivr-acc__pct::before {
  display: none;
}

.ivr-acc__pct-value {
  font-variant-numeric: tabular-nums;
}

.ivr-acc__trigger:hover .ivr-acc__pct,
.ivr-acc__item.is-open .ivr-acc__pct,
.ivr-acc__item--static .ivr-acc__pct {
  --ivr-overline-bg: var(--ivr-blue-100);
  --ivr-overline-fg: var(--ivr-blue-900);
}

/* Sous 46rem la pastille passe sous le nom : alignee, elle ecraserait le nom.
   Declare APRES le badge : a specificite egale c'est l'ordre qui tranche, et
   le `justify-self: end` ci-dessus annulait sinon l'alignement mobile. */
/* Sous 46rem tout s'empile sur le bord de la carte. En grille, la pastille et
   le nom demarraient apres la colonne du logo — dont la largeur varie d'une
   marque a l'autre — donc chaque carte s'indentait differemment. En colonne
   flex, les trois elements partagent la meme origine. Le chevron sort du flux
   pour rester ancre en haut. */
@media (max-width: 45.999rem) {

  .ivr-acc__trigger,
  .ivr-acc__row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ivr-space-3);
    padding-inline-end: 3rem;
  }

  .ivr-acc__icon {
    position: absolute;
    inset-block-start: var(--ivr-space-5);
    inset-inline-end: 0;
  }

  .ivr-acc__meta {
    justify-items: start;
    justify-self: start;
    gap: var(--ivr-space-3);
  }

  .ivr-acc__pct {
    justify-self: start;
  }
}

.ivr-acc__icon {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--ivr-radius-full);
  border: var(--ivr-rule) solid var(--ivr-border);
  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);
}

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

.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__icon .ivr-icon {
  transition: rotate var(--ivr-duration-slow) var(--ivr-ease-out);
}

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

/* 0fr -> 1fr : seul moyen d'animer vers une hauteur inconnue sans mesure JS.
   `height: auto` n'est pas interpolable et un max-height arbitraire coupe les
   textes longs. L'enfant doit porter min-block-size: 0, sinon la piste 0fr ne
   peut pas comprimer son contenu. */
.ivr-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--ivr-duration-slow) var(--ivr-ease-out),
    opacity var(--ivr-duration) var(--ivr-ease);
}

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

.ivr-acc__inner {
  overflow: hidden;
  min-block-size: 0;
}

.ivr-acc__text {
  max-inline-size: 52ch;
  padding-block-start: var(--ivr-space-2);
  padding-block-end: var(--ivr-space-6);
  font-size: var(--ivr-text-sm);
  line-height: var(--ivr-leading-relaxed);
  color: var(--ivr-text-muted);
}

/* Lien, plus bouton : meme roulement de libelle que les liens du pied de page
   (.ivr-roll), double d'un decalage de la fleche. */
.ivr-acc__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ivr-space-2);
  margin-block-end: var(--ivr-space-6);
  font-size: var(--ivr-text-sm);
  font-weight: var(--ivr-weight-medium);
  color: var(--ivr-blue-600);
  text-decoration: none;
  transition: color var(--ivr-duration-fast) var(--ivr-ease);
}

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

.ivr-acc__cta .ivr-icon {
  transition: transform var(--ivr-duration) var(--ivr-ease);
}

.ivr-acc__cta:hover .ivr-icon {
  transform: translate(2px, -2px);
}

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

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

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