/* ==========================================================================
   INVESTORAMA GROUP — Page RSE & ÉTHIQUE
   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/rse
   ========================================================================== */

/* Arrivee sur une ancre : exactement en-tete + sous-navigation, rien de plus.
   Les deux hauteurs viennent des tokens — les recopier a la main les a deja
   fait diverger ailleurs. */
html {
  scroll-padding-block-start: calc(
    var(--ivr-header-h-scrolled) + var(--ivr-subnav-h)
  );
}

/* --------------------------------------------------------------------------
   DECLARATION — grande phrase qui se remplit au defilement.

   Degradation : les mots sont ecrits en pleine couleur dans le HTML. C'est le
   JS qui pose `.is-live` et les eteint avant de les rallumer un a un. Sans JS,
   ou en mouvement reduit, la phrase reste un paragraphe normal, entierement
   lisible — jamais d'opacite nulle par defaut sur du contenu reel.
   -------------------------------------------------------------------------- */
.ivr-statement__text {
  max-inline-size: 40ch;
  font-size: var(--ivr-text-2xl);
  font-weight: var(--ivr-weight-medium);
  line-height: var(--ivr-leading-snug);
  letter-spacing: var(--ivr-tracking-tight);
  text-wrap: pretty;
}

@media (min-width: 62rem) {
  .ivr-statement__text { max-inline-size: 44ch; }
}

.ivr-statement__w {
  color: var(--ivr-text);
  transition: color var(--ivr-duration-slow) var(--ivr-ease);
}

/* etat pilote : tout s'eteint, le defilement rallume */
.ivr-statement__text.is-live .ivr-statement__w { color: var(--ivr-gray-200); }
.ivr-statement__text.is-live .ivr-statement__w.is-lit { color: var(--ivr-text); }

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

/* --------------------------------------------------------------------------
   SPLIT — intitule a gauche (colle au scroll), contenu a droite.
   Meme rythme que les pages Groupe et Metiers.
   -------------------------------------------------------------------------- */
.ivr-split { display: grid; gap: var(--ivr-space-10); align-items: start; }

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

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

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

.ivr-split__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-split__main { display: grid; gap: var(--ivr-space-8); justify-items: start; }

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

.ivr-split__cta { justify-self: start; margin-block-start: var(--ivr-space-2); }

/* --------------------------------------------------------------------------
   Fond du bandeau Gouvernance : bleute tres proche du blanc, comme le pied de
   page. Un degrade et non un aplat — la section est encadree de blanc au-dessus
   et d'un gris teinte en dessous ; en fondant sur ses deux bords elle evite deux
   coutures franches. Le fond de base reste blanc, seul le degrade colore.
   -------------------------------------------------------------------------- */
.ivr-gov-band {
  background-color: var(--ivr-surface);
  background-image: linear-gradient(
    to bottom,
    var(--ivr-surface) 0%,
    color-mix(in srgb, var(--ivr-blue-50) 62%, var(--ivr-surface)) 18%,
    color-mix(in srgb, var(--ivr-blue-50) 62%, var(--ivr-surface)) 82%,
    var(--ivr-surface) 100%
  );
}

/* Repli sans color-mix() : sans lui la declaration entiere serait invalide et
   la section repasserait au fond herite. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .ivr-gov-band {
    background-image: linear-gradient(
      to bottom,
      var(--ivr-surface) 0%,
      #f6faff 18%,
      #f6faff 82%,
      var(--ivr-surface) 100%
    );
  }
}

/* Cartes bleutees, un cran au-dessus du bandeau : c'est le contraste entre les
   deux teintes qui les detache, pas un blanc pur. */
.ivr-gov-band .ivr-pcard {
  background-color: color-mix(in srgb, var(--ivr-blue-100) 55%, var(--ivr-surface));
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .ivr-gov-band .ivr-pcard { background-color: #eaf1fe; }
}

/* --------------------------------------------------------------------------
   BANDEAU PANORAMIQUE — pleine largeur, entre la declaration et la gouvernance.
   Purement illustratif : `aria-hidden` et `alt` vide, il n'apporte aucune
   information que le texte ne porte deja.
   -------------------------------------------------------------------------- */
.ivr-pano {
  position: relative;
  display: block;
  inline-size: 100%;
  /* ratio natif du fichier (2000 x 857) : aucune coupe aux largeurs courantes.
     Le plafond evite qu'il devienne demesure sur les tres grands ecrans — la
     photo recadre alors par le centre. */
  aspect-ratio: 2000 / 857;
  max-block-size: 34rem;
  overflow: hidden;
}

/* L'image est 24% plus haute que son cadre et derive a l'interieur de cette
   marge : le debord est reparti moitie/moitie (`inset-block-start: -12%`),
   la derive va de -12% a +12%, donc le cadre reste couvert aux deux extremes.
   --pano-p vaut 0.5 par defaut : sans JS l'image est simplement centree. */
.ivr-pano img {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -12%;
  inline-size: 100%;
  block-size: 124%;
  object-fit: cover;
  translate: 0 calc((var(--pano-p, 0.5) - 0.5) * 24%);
  will-change: translate;
}

@media (prefers-reduced-motion: reduce) {
  .ivr-pano img { translate: none; will-change: auto; }
}

/* --------------------------------------------------------------------------
   GOUVERNANCE — deux instances, chacune avec son intitule, sa phrase et ses
   personnes en cartes. Pleine largeur : une grille de six cartes n'a pas la
   place de respirer dans la colonne d'un gabarit a deux volets.
   -------------------------------------------------------------------------- */
/* Meme filet que sous les intitules d'instance de la page Groupe : un cheveu
   gris amorce d'un segment bleu. */
.ivr-gov__head {
  position: relative;
  display: grid;
  gap: var(--ivr-space-5);
  justify-items: start;
  padding-block-end: var(--ivr-space-6);
  border-block-end: var(--ivr-rule) solid var(--ivr-border);
  margin-block-end: clamp(3rem, 1.5rem + 5vw, 5rem);
}

.ivr-gov__head::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__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);
}

.ivr-gov { display: grid; gap: clamp(3.5rem, 2rem + 6vw, 6rem); }

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

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

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

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

.ivr-gov__group { display: grid; gap: var(--ivr-space-5); }

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

/* --------------------------------------------------------------------------
   CARTE PERSONNE — nom en grand, fonction en pied. Les administrateurs n'ont
   PAS d'intitule individuel dans le document : leurs cartes ne portent que le
   nom, la fonction commune etant donnee par le libelle du groupe.
   -------------------------------------------------------------------------- */
.ivr-pcards {
  display: grid;
  gap: var(--ivr-grid-gap);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 46rem) { .ivr-pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .ivr-pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Le decalage est dans l'ANIMATION, pas dans la mise en page : les cartes
   entrent l'une apres l'autre puis se posent toutes sur la meme ligne.
   Un decalage porte par `margin` les laisserait en escalier une fois arrivees —
   et, une rangee de grille etirant ses elements, la marge serait en plus prise
   SUR la hauteur des cartes (255 / 223 / 191px au lieu d'une hauteur unique). */
.ivr-pcards > * { align-self: start; --i: 0; }

@media (min-width: 46rem) {
  .ivr-pcards > :nth-child(2n + 2) { --i: 1; }
}

@media (min-width: 68rem) {
  .ivr-pcards > :nth-child(3n + 2) { --i: 1; }
  .ivr-pcards > :nth-child(3n + 3) { --i: 2; }
}

.ivr-pcard {
  /* Retard par carte, derive de la progression commune de la rangee.
     `--pi` rejoue --lift-p decale de --i crans : la carte 0 demarre tout de
     suite, la 1 un cran plus tard, la 2 encore apres — mais toutes atteignent
     1, donc l'etat final est identique et aligne. */
  --stagger: 0.18;
  --pi: clamp(
    0,
    calc((var(--lift-p, 1) - var(--i) * var(--stagger)) / (1 - 2 * var(--stagger))),
    1
  );

  display: grid;
  align-content: space-between;
  gap: var(--ivr-space-8);
  min-block-size: 11rem;
  padding: var(--ivr-card-pad);
  background-color: var(--ivr-surface-muted);
  border-radius: var(--ivr-radius-card);
  /* --lift-p vient de initLift ; 1 par defaut, donc en place sans JS */
  translate: 0 calc((1 - var(--pi)) * 2.5rem);
  opacity: calc(0.12 + 0.88 * var(--pi));
}

.ivr-pcard__name {
  font-size: var(--ivr-text-lg);
  font-weight: var(--ivr-weight-semibold);
  line-height: var(--ivr-leading-snug);
  letter-spacing: var(--ivr-tracking-snug);
  text-wrap: balance;
}

.ivr-pcard__foot {
  display: block;
  padding-block-start: var(--ivr-space-4);
  border-block-start: var(--ivr-rule) solid var(--ivr-border);
}

.ivr-pcard__role {
  display: inline-flex;
  align-items: center;
  gap: var(--ivr-space-2);
  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-muted);
}

.ivr-pcard__role::before {
  content: "";
  inline-size: 0.3125rem;
  block-size: 0.3125rem;
  background-color: var(--ivr-blue-400);
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .ivr-pcard { translate: none; opacity: 1; }
}


/* --------------------------------------------------------------------------
   BANDEAU IMPACT — photo pleine largeur, intitule en haut a gauche,
   accordeon cale en bas a gauche.
   -------------------------------------------------------------------------- */
.ivr-impactband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  min-block-size: clamp(40rem, 30rem + 30vw, 50rem);
  padding-block: clamp(3.5rem, 2rem + 6vw, 6rem);
  background-color: var(--ivr-blue-950);
}

/* Positionnement absolu et non `block-size: 100%` : la piste est
   auto-dimensionnee, un pourcentage y serait une dependance circulaire. */
.ivr-impactband__media {
  position: absolute;
  z-index: -2;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center right;
}

/* Voile pondere vers le bord de DEBUT : la photo est generee avec cette moitie
   volontairement vide, le voile ne fait qu'y garantir le contraste du texte. */
.ivr-impactband__scrim {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgb(8 22 16 / 0.86) 0%,
      rgb(8 22 16 / 0.62) 38%,
      rgb(8 22 16 / 0.18) 72%,
      rgb(8 22 16 / 0.08) 100%
    ),
    linear-gradient(to top, rgb(8 22 16 / 0.55) 0%, rgb(8 22 16 / 0) 45%);
}

/* le degrade lateral est physique : le redeclarer en RTL */
[dir="rtl"] .ivr-impactband__scrim {
  background:
    linear-gradient(
      to left,
      rgb(8 22 16 / 0.86) 0%,
      rgb(8 22 16 / 0.62) 38%,
      rgb(8 22 16 / 0.18) 72%,
      rgb(8 22 16 / 0.08) 100%
    ),
    linear-gradient(to top, rgb(8 22 16 / 0.55) 0%, rgb(8 22 16 / 0) 45%);
}

/* intitule en haut, accordeon en bas : c'est l'espace entre eux qui donne au
   bandeau sa respiration */
.ivr-impactband__inner {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(3rem, 2rem + 6vw, 7rem);
}

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

.ivr-impactband__title {
  max-inline-size: 16ch;
  font-size: var(--ivr-text-3xl);
  font-weight: var(--ivr-weight-semibold);
  line-height: var(--ivr-leading-tight);
  letter-spacing: var(--ivr-tracking-tight);
  text-wrap: balance;
  color: var(--ivr-gray-0);
}

.ivr-impactband .ivr-overline {
  --ivr-overline-bg: rgb(255 255 255 / 0.16);
  --ivr-overline-dot: var(--ivr-blue-300);
  --ivr-overline-fg: var(--ivr-gray-0);
}

/* ---- accordeon sur photo ---- */
.ivr-impactband__acc { inline-size: min(34rem, 100%); }

.ivr-impactband__acc .ivr-acc__item {
  position: relative;
  border-block-end: var(--ivr-rule) solid rgb(255 255 255 / 0.22);
}

/* Trait blanc qui balaie le filet du bord de debut vers la fin.
   `transform-origin` n'accepte aucun mot-cle logique : l'origine doit etre
   inversee explicitement en RTL, sinon le remplissage part du mauvais bord. */
.ivr-impactband__acc .ivr-acc__item::after {
  content: "";
  position: absolute;
  inset-block-end: calc(var(--ivr-rule) * -1);
  inset-inline: 0;
  block-size: var(--ivr-rule);
  background-color: var(--ivr-gray-0);
  scale: 0 1;
  transform-origin: left center;
  transition: scale var(--ivr-duration-slow) var(--ivr-ease-out);
}

[dir="rtl"] .ivr-impactband__acc .ivr-acc__item::after { transform-origin: right center; }

.ivr-impactband__acc .ivr-acc__item:hover::after,
.ivr-impactband__acc .ivr-acc__item.is-open::after { scale: 1 1; }

.ivr-impactband__acc .ivr-acc__head { margin: 0; }

.ivr-impactband__acc .ivr-acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ivr-space-5);
  inline-size: 100%;
  /* padding-inline: 0 explicite — un <button> porte un padding par defaut du
     navigateur, qui decalait le libelle vers l'interieur du filet. */
  padding: var(--ivr-space-5) 0;
  text-align: start;
  color: rgb(255 255 255 / 0.72);
  transition: color var(--ivr-duration) var(--ivr-ease);
}

.ivr-impactband__acc .ivr-acc__trigger:hover { color: var(--ivr-gray-0); }
.ivr-impactband__acc .ivr-acc__item.is-open .ivr-acc__trigger { color: var(--ivr-gray-0); }

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

.ivr-impactband__acc .ivr-acc__icon {
  display: inline-flex;
  flex: none;
  color: rgb(255 255 255 / 0.62);
  transition: color var(--ivr-duration) var(--ivr-ease);
}

.ivr-impactband__acc .ivr-acc__icon .ivr-icon {
  inline-size: var(--ivr-icon-md);
  block-size: var(--ivr-icon-md);
  transition: rotate var(--ivr-duration-slow) var(--ivr-ease-out);
}

/* La fleche pivote au survol : elle previsualise le resultat du clic. Sur une
   ligne fermee elle bascule vers le haut (ce qui va s'ouvrir), sur une ligne
   ouverte elle revient vers le bas (ce qui va se refermer). */
.ivr-impactband__acc .ivr-acc__trigger:hover .ivr-acc__icon { color: var(--ivr-gray-0); }
.ivr-impactband__acc .ivr-acc__trigger:hover .ivr-acc__icon .ivr-icon { rotate: -180deg; }

.ivr-impactband__acc .ivr-acc__item.is-open .ivr-acc__icon { color: var(--ivr-gray-0); }
.ivr-impactband__acc .ivr-acc__item.is-open .ivr-acc__icon .ivr-icon { rotate: -180deg; }
.ivr-impactband__acc .ivr-acc__item.is-open .ivr-acc__trigger:hover .ivr-acc__icon .ivr-icon { rotate: 0deg; }

/* 0fr -> 1fr : seul moyen d'animer vers une hauteur inconnue sans mesure JS.
   L'enfant doit porter min-block-size: 0, sinon la piste ne peut pas
   comprimer son contenu. */
.ivr-impactband__acc .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-impactband__acc .ivr-acc__item.is-open .ivr-acc__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

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

.ivr-impactband__acc .ivr-acc__text {
  padding-block-end: var(--ivr-space-6);
  font-size: var(--ivr-text-sm);
  line-height: var(--ivr-leading-relaxed);
  color: rgb(255 255 255 / 0.78);
}

@media (prefers-reduced-motion: reduce) {
  .ivr-impactband__acc .ivr-acc__panel,
  .ivr-impactband__acc .ivr-acc__item::after,
  .ivr-impactband__acc .ivr-acc__icon,
  .ivr-impactband__acc .ivr-acc__icon .ivr-icon { transition: none; }
}

/* ============================================================
   Réclamation — bloc simple (intro + CTA sécurisé)
   Réutilise .ivr-gov-band pour l'atmosphère (fond, spacing).
   ============================================================ */
.ivr-reclam {
  display: grid;
  gap: var(--ivr-space-8);
  max-inline-size: 60ch;
}

.ivr-reclam__text {
  font-size: var(--ivr-text-lg, 1.125rem);
  line-height: var(--ivr-leading-relaxed);
  color: var(--ivr-text);
}

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

.ivr-reclam__lead {
  margin-inline-end: var(--ivr-space-2);
}