/* ==========================================================================
   INVESTORAMA GROUP — Section components
   The blocks the home page needs beyond the generic ones in components-v2.css.
   Each maps 1:1 to a future ACF Flexible Content layout.

   Load order: tokens.css → base.css → components-v2.css → sections.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   TIMELINE — "Notre trajectoire"
   Scroll-driven. A tall section provides the scroll distance; the stage inside
   is sticky, so vertical scrolling maps to horizontal progression without ever
   taking the scroll away from the user.

   JS writes two custom properties and three state classes; everything visual
   is derived from them here, so the CSS stays declarative:
     --tl-p   0 → 1   scrubbed progress (drives the rail fill)
     --tl-i   integer active index
     .is-active / .is-past on each item
   -------------------------------------------------------------------------- */
.ivr-timeline {
  --tl-steps: 4;
  --tl-p: 0;
  --tl-dot: 0.875rem;
  --tl-rail: 2px;
  position: relative;
  background-color: var(--ivr-surface);
  /* La piste horizontale (.ivr-timeline__items) fait ~260rem à 12 jalons.
     .ivr-timeline__viewport la clip, MAIS si un ancêtre laisse déborder
     (padding négatif, transform, sticky mal contenu…) la page hérite du
     scroll horizontal. `overflow-x: clip` verrouille au niveau de la
     section sans casser le sticky enfant (contrairement à `hidden`, qui
     crée un contexte de défilement et neutralise position:sticky). */
  overflow-x: clip;
}

/* ---- mobile / tablet : vertical, in normal flow ---- */
.ivr-timeline__stage {
  /* the hero's play button overlaps down into this section by half its height */
  padding-block: calc(var(--ivr-hero-play-size, 5.25rem) / 2 + var(--ivr-space-10)) var(--ivr-section-y);
}

.ivr-timeline__head {
  display: flex;
  flex-direction: column;
  gap: var(--ivr-space-4);
  margin-block-end: var(--ivr-space-12);
  max-inline-size: var(--ivr-measure-narrow);
}

.ivr-timeline__count {
  font-family: var(--ivr-font-mono);
  font-size: var(--ivr-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ivr-text-subtle);
}

.ivr-timeline__count b {
  font-weight: var(--ivr-weight-medium);
  color: var(--ivr-blue-600);
}

.ivr-timeline__viz {
  position: relative;
}

/* Oversized numeral, parked in the empty column beside the heading.
   It lives in the stage rather than inside an item, otherwise each item's
   own positioning context drags it off-canvas and over the labels. */
.ivr-timeline__stage .ivr-container {
  position: relative;
}

.ivr-timeline__ghosts {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: var(--ivr-gutter);
  z-index: 0;
  pointer-events: none;
  display: none;
  user-select: none;
}

.ivr-timeline__ghost {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  font-size: clamp(7rem, 13vw, 11.5rem);
  font-weight: var(--ivr-weight-bold);
  line-height: 0.82;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  color: var(--ivr-blue-100);
  opacity: 0;
  translate: 0 0.12em;
  transition:
    opacity 800ms var(--ivr-ease),
    translate 1000ms var(--ivr-ease-out);
}

.ivr-timeline__ghost.is-on {
  opacity: 1;
  translate: 0 0;
}

.ivr-timeline__items {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--ivr-space-10);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* the rail: a static hairline with a brand fill scrubbed over it */
.ivr-timeline__rail {
  position: absolute;
  z-index: 0;
  background-color: var(--ivr-border);
  /* vertical by default */
  inset-block: calc(var(--tl-dot) / 2);
  inset-inline-start: calc(var(--tl-dot) / 2 - var(--tl-rail) / 2);
  inline-size: var(--tl-rail);
}

.ivr-timeline__fill {
  position: absolute;
  inset: 0;
  background-color: var(--ivr-blue-600);
  transform: scaleY(var(--tl-p));
  transform-origin: top;
  will-change: transform;
}

.ivr-timeline__item {
  position: relative;
  padding-inline-start: calc(var(--tl-dot) + var(--ivr-space-6));
}

/* marker: outlined ring that fills as it activates */
.ivr-timeline__dot {
  position: absolute;
  inset-block-start: 0.3rem;
  inset-inline-start: 0;
  inline-size: var(--tl-dot);
  block-size: var(--tl-dot);
  border-radius: var(--ivr-radius-pill);
  background-color: var(--ivr-surface);
  box-shadow: inset 0 0 0 var(--tl-rail) var(--ivr-border-strong);
  transition:
    box-shadow 500ms var(--ivr-ease),
    scale 600ms var(--ivr-ease-out);
}

.ivr-timeline__item.is-past .ivr-timeline__dot {
  box-shadow: inset 0 0 0 calc(var(--tl-dot) / 2) var(--ivr-blue-600);
}

.ivr-timeline__item.is-active .ivr-timeline__dot {
  box-shadow: inset 0 0 0 var(--tl-rail) var(--ivr-blue-600);
  scale: 1.25;
}

/* halo, active only */
.ivr-timeline__dot::after {
  content: "";
  position: absolute;
  inset: -0.55rem;
  border-radius: inherit;
  border: 1px solid var(--ivr-blue-300);
  opacity: 0;
  scale: 0.6;
  transition: opacity 600ms var(--ivr-ease), scale 700ms var(--ivr-ease-out);
}

.ivr-timeline__item.is-active .ivr-timeline__dot::after {
  opacity: 1;
  scale: 1;
}

/* architectural drop line under the marker */
.ivr-timeline__tick {
  display: none;
  position: absolute;
  inset-block-start: calc(var(--tl-dot) + 0.3rem);
  inset-inline-start: calc(var(--tl-dot) / 2 - 0.5px);
  inline-size: 1px;
  block-size: var(--ivr-space-8);
  background: linear-gradient(to bottom, var(--ivr-border) 0%, transparent 100%);
  transform: scaleY(0.45);
  transform-origin: top;
  transition: transform 700ms var(--ivr-ease-out), background-color 500ms var(--ivr-ease);
}

.ivr-timeline__item.is-active .ivr-timeline__tick,
.ivr-timeline__item.is-past .ivr-timeline__tick {
  transform: scaleY(1);
}

.ivr-timeline__item.is-active .ivr-timeline__tick {
  background: linear-gradient(to bottom, var(--ivr-blue-400) 0%, transparent 100%);
}

/* year — vertical reveal, clipped so it rises out of nothing */
.ivr-timeline__year {
  display: block;
  overflow: hidden;
  font-size: var(--ivr-text-2xl);
  font-weight: var(--ivr-weight-semibold);
  line-height: 1.05;
  letter-spacing: var(--ivr-tracking-tighter);
  font-variant-numeric: tabular-nums;
  color: var(--ivr-gray-300);
  transition: color 600ms var(--ivr-ease);
}

.ivr-timeline__year>span {
  display: block;
  transition:
    translate 800ms var(--ivr-ease-out),
    opacity 700ms var(--ivr-ease);
}

/* Tous les items restent visibles (année + titre + paragraphe) — l'état
   inactif est simplement grisé. L'activation surligne en bleu marque et
   l'année passée reste bien lisible. Ceci remplace l'ancien reveal qui
   masquait entièrement les items non joués. */
.ivr-timeline:not(.is-live) .ivr-timeline__fill {
  transform: none;
}

.ivr-timeline:not(.is-live) .ivr-timeline__year {
  color: var(--ivr-blue-600);
}

.ivr-timeline__year {
  color: var(--ivr-gray-400);
}

.ivr-timeline__item.is-past .ivr-timeline__year {
  color: var(--ivr-blue-500);
}

.ivr-timeline__item.is-active .ivr-timeline__year {
  color: var(--ivr-blue-700);
}

/* title (nouveau format : année, titre, paragraphe) */
.ivr-timeline__title {
  margin-block-start: var(--ivr-space-3);
  font-size: var(--ivr-text-base);
  font-weight: var(--ivr-weight-semibold);
  letter-spacing: var(--ivr-tracking-tight);
  color: var(--ivr-text);
  max-inline-size: 22ch;
  line-height: 1.25;
  text-wrap: balance;
  transition:
    translate 800ms var(--ivr-ease-out),
    opacity 700ms var(--ivr-ease),
    color 600ms var(--ivr-ease);
}

/* description — same reveal, delayed behind the year */
.ivr-timeline__label {
  margin-block-start: var(--ivr-space-2);
  font-size: var(--ivr-text-sm);
  line-height: 1.55;
  letter-spacing: var(--ivr-tracking-snug);
  color: var(--ivr-text-subtle);
  max-inline-size: 26ch;
  transition:
    translate 800ms var(--ivr-ease-out),
    opacity 700ms var(--ivr-ease),
    color 600ms var(--ivr-ease);
}

/* titres : gris au repos, quasi-noir à l'activation, garde une bonne lisibilité en passé */
.ivr-timeline__title {
  color: var(--ivr-gray-400);
}

.ivr-timeline__item.is-past .ivr-timeline__title {
  color: var(--ivr-gray-700);
}

.ivr-timeline__item.is-active .ivr-timeline__title {
  color: var(--ivr-text);
}

/* paragraphes : gris clair au repos, gris intermédiaire au passé, texte plein à l'active */
.ivr-timeline__label {
  color: var(--ivr-gray-300);
}

.ivr-timeline__item.is-past .ivr-timeline__label {
  color: var(--ivr-text-subtle);
}

.ivr-timeline__item.is-active .ivr-timeline__label {
  color: var(--ivr-text);
}

/* ---- desktop : sticky stage, horizontal rail ---- */
@media (min-width: 60rem) {
  .ivr-timeline {
    /* Assez de scroll pour panner les 12 items horizontalement (environ
       une demi-viewport par transition). Réduit par rapport à l'ancien
       ratio 62svh × N conçu pour 4 items. */
    min-block-size: calc(100svh + (var(--tl-steps) - 1) * 22svh);
  }

  .ivr-timeline__stage {
    position: sticky;
    inset-block-start: 0;
    min-block-size: 100svh;
    display: grid;
    align-content: center;
    padding-block: var(--ivr-space-16);
  }

  .ivr-timeline__ghosts {
    display: block;
  }

  /* La piste horizontale porte les 12 items côte à côte, chacun à largeur
     fixe. La piste peut être plus large que la viewport → on la fait défiler
     horizontalement en fonction de la progression du scroll page (--tl-p).
     .ivr-timeline__viewport masque le débordement et applique un masque
     dégradé sur les bords pour éviter que les items soient coupés net. */
  .ivr-timeline__viewport {
    overflow: hidden;
    /* Full-bleed : la piste s'étale sur toute la largeur de la fenêtre,
       pas seulement la largeur du .ivr-container. Sans ça, à écran
       étroit, la bande visible fait ~80 % de la fenêtre et les items
       apparaissent coupés bien avant le bord droit. Ici on casse la
       colonne du parent via un margin négatif calé sur son offset
       (50% - 50vw), technique standard des sliders full-width. */
    /* margin-inline: calc(50% - 50vw); */
    /* fondu latéral (mask) : 2rem de fade à gauche et à droite */
    --tl-fade: 2.5rem;
    -webkit-mask-image:
      linear-gradient(to right,
        transparent 0,
        #000 var(--tl-fade),
        #000 calc(100% - var(--tl-fade)),
        transparent 100%);
    mask-image:
      linear-gradient(to right,
        transparent 0,
        #000 var(--tl-fade),
        #000 calc(100% - var(--tl-fade)),
        transparent 100%);
  }

  .ivr-timeline__items {
    grid-auto-flow: column;
    grid-auto-columns: minmax(16rem, 18rem);
    gap: var(--ivr-space-12);
    padding-block-start: calc(var(--tl-dot) + var(--ivr-space-16));
    /* Marge de sécurité au début et à la fin de la piste : le premier dot
       et le halo du dernier restent visibles hors du masque de fondu. */
    padding-inline: var(--ivr-space-8);
    /* --tl-run est la distance horizontale à parcourir (en px, posée par le
       JS). Si la piste tient dans le viewport, tl-run = 0 → pas de translate. */
    transform: translateX(calc(var(--tl-run, 0px) * var(--tl-p, 0) * -1));
    transition: transform 60ms linear;
    will-change: transform;
  }

  [dir="rtl"] .ivr-timeline__items {
    transform: translateX(calc(var(--tl-run, 0px) * var(--tl-p, 0)));
  }

  .ivr-timeline__rail {
    inset-block: auto;
    inset-block-start: calc(var(--tl-dot) / 2 - var(--tl-rail) / 2);
    inset-inline: 0;
    inline-size: auto;
    block-size: var(--tl-rail);
  }

  .ivr-timeline__fill {
    transform: scaleX(var(--tl-p));
    transform-origin: left;
  }

  [dir="rtl"] .ivr-timeline__fill {
    transform-origin: right;
  }

  .ivr-timeline__item {
    padding-inline-start: 0;
    padding-block-start: calc(var(--ivr-space-16));
  }

  .ivr-timeline__dot {
    inset-block-start: 0;
  }

  .ivr-timeline__tick {
    display: block;
  }
}

/* reduced motion — no scrub, no sticky, everything present and legible */
@media (prefers-reduced-motion: reduce) {
  .ivr-timeline {
    min-block-size: auto;
  }

  .ivr-timeline__stage {
    position: static;
    min-block-size: 0;
  }

  .ivr-timeline__fill {
    transform: none;
  }

  .ivr-timeline__year>span,
  .ivr-timeline__label {
    translate: none;
    opacity: 1;
  }

  .ivr-timeline__year {
    color: var(--ivr-blue-600);
  }

  .ivr-timeline__label {
    color: var(--ivr-text);
  }

  .ivr-timeline__ghosts {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   CHIFFRES CLÉS — sticky heading, vertical figure sequence
   Deliberately unlike the trajectory timeline: no rail, no milestone dots, no
   oversized numerals. Each figure is an editorial row — index, medium numeral,
   label, and a restrained abstract mark keyed to what the figure measures.

   JS toggles .is-active and .is-near; everything else is derived here.
   -------------------------------------------------------------------------- */
/* The tint is painted by a pseudo-element whose opacity is scrubbed on scroll,
   so the section washes in and out instead of butting against the white
   sections above and below with a hard edge. Animating opacity keeps it on the
   compositor — interpolating background-color per frame would not. */
.ivr-figures {
  position: relative;
  isolation: isolate;
  --ivr-figures-tint: #e8f3ff;
  --fg-tint: 0;
}

.ivr-figures::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Feathered top and bottom: a flat fill would still meet the white sections
     as a hard line, just a paler one. The gradient removes the boundary; the
     scrubbed opacity then eases the whole wash in and out. */
  background: linear-gradient(to bottom,
      transparent 0%,
      var(--ivr-figures-tint) 15%,
      var(--ivr-figures-tint) 85%,
      transparent 100%);
  opacity: var(--fg-tint);
  pointer-events: none;
}

/* no JS: keep the tint rather than dropping to a flat white section */
.ivr-figures:not(.is-live)::before {
  opacity: 1;
}

.ivr-figures__grid {
  display: grid;
  gap: clamp(var(--ivr-space-10), 6vw, var(--ivr-space-20));
}

.ivr-figures__aside {
  display: flex;
  flex-direction: column;
  gap: var(--ivr-space-5);
}

.ivr-figures__title {
  max-inline-size: 28ch;
}

/* ---- the sequence ---- */
.ivr-figures__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ivr-figures__item {
  --fg-gap: clamp(2.25rem, 5.5vh, 4rem);
  /* grid rather than flex so the rule can span number, label and icon */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: clamp(var(--ivr-space-6), 3vw, var(--ivr-space-12));
  padding-block-start: var(--fg-gap);
  opacity: 0.16;
  translate: 0 0.75rem;
  transition:
    opacity 700ms var(--ivr-ease),
    translate 800ms var(--ivr-ease-out);
}

/* neighbours stay readable so the sequence reads as continuous */
.ivr-figures__item.is-near {
  opacity: 0.42;
}

.ivr-figures__item.is-active {
  opacity: 1;
  translate: 0 0;
}

.ivr-figures__body {
  min-inline-size: 0;
}

.ivr-figures__idx {
  display: block;
  margin-block-end: var(--ivr-space-5);
  font-family: var(--ivr-font-mono);
  font-size: var(--ivr-text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ivr-tracking-wide);
  color: var(--ivr-text-subtle);
  transition: color 600ms var(--ivr-ease);
}

.ivr-figures__idx b {
  font-weight: var(--ivr-weight-medium);
}

.ivr-figures__item.is-active .ivr-figures__idx b {
  color: var(--ivr-blue-600);
}

/* medium numeral — 64→88px on desktop, never larger */
.ivr-figures__value {
  display: block;
  font-size: clamp(2.75rem, 5vw, 5.5rem);
  font-weight: var(--ivr-weight-semibold);
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--ivr-gray-400);
  transition: color 700ms var(--ivr-ease);
}

.ivr-figures__item.is-active .ivr-figures__value {
  color: var(--ivr-text);
}

.ivr-figures__value em {
  font-style: normal;
  transition: color 700ms var(--ivr-ease);
}

.ivr-figures__item.is-active .ivr-figures__value em {
  color: var(--ivr-blue-600);
}

.ivr-figures__label {
  margin-block-start: var(--ivr-space-5);
  font-size: var(--ivr-text-lg);
  line-height: var(--ivr-leading-snug);
  letter-spacing: var(--ivr-tracking-tight);
  color: var(--ivr-text-muted);
  max-inline-size: 40ch;
  font-weight: 600;
  transition: color 700ms var(--ivr-ease);
}

.ivr-figures__item.is-active .ivr-figures__label {
  color: var(--ivr-text);
}

/* ---- separator + icon ---- */

/* hairline closing each component, so the rules structure the sequence */
.ivr-figures__sep {
  grid-column: 1 / -1;
  display: block;
  block-size: 1px;
  margin-block-start: var(--fg-gap);
  background-color: var(--ivr-border);
  transition: background-color 700ms var(--ivr-ease);
}

.ivr-figures__item.is-active .ivr-figures__sep {
  background-color: var(--ivr-blue-200);
}

/* nothing to divide after the last figure */
.ivr-figures__item:last-child .ivr-figures__sep {
  display: none;
}

.ivr-figures__viz {
  flex: none;
  display: block;
  inline-size: clamp(2.25rem, 3vw, 2.75rem);
  block-size: clamp(2.25rem, 3vw, 2.75rem);
  color: var(--ivr-gray-400);
  transition: color 700ms var(--ivr-ease);
}

.ivr-figures__item.is-active .ivr-figures__viz {
  color: var(--ivr-blue-600);
}

/* CTAs under the sticky heading */
.ivr-figures__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ivr-space-4);
  margin-block-start: var(--ivr-space-8);
}

/* ---- desktop ---- */
@media (min-width: 60rem) {
  .ivr-figures__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .ivr-figures__aside {
    position: sticky;
    inset-block-start: clamp(7rem, 18vh, 11rem);
    align-self: start;
  }

  .ivr-figures__list {
    padding-block: clamp(2rem, 8vh, 6rem);
  }
}

/* the marks are decorative; below this they only add noise */
@media (max-width: 30rem) {
  .ivr-figures__viz {
    display: none;
  }
}

/* Progressive enhancement: without JS every figure reads at full strength. */
.ivr-figures:not(.is-live) .ivr-figures__item {
  opacity: 1;
  translate: 0 0;
}

.ivr-figures:not(.is-live) .ivr-figures__value {
  color: var(--ivr-text);
}

.ivr-figures:not(.is-live) .ivr-figures__label {
  color: var(--ivr-text);
}

.ivr-figures:not(.is-live) .ivr-figures__viz {
  color: var(--ivr-blue-600);
}


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

/* --------------------------------------------------------------------------
   CAROUSEL — "Nos métiers"
   Native scroll-snap: the browser owns the scrolling, so it stays smooth on
   touch, keyboard-reachable, and needs no library. JS only drives the arrows
   and the progress bar.

   The viewport sits inside .ivr-container so its LEFT edge lines up with the
   title, then bleeds past the right edge of the page with a negative margin —
   the half-visible card is what signals that the row scrolls.
   -------------------------------------------------------------------------- */
.ivr-carousel {
  /* mobile-first: a sliver of the next card signals the swipe */
  --car-slides: 1.3;
  /* kept >= --car-pad so the 4th card cannot peek through the
     viewport's trailing padding when exactly 3 are shown */
  --car-gap: clamp(1.25rem, 1.4vw, 1.5rem);
  /* slide width is derived from the CONTAINER, not the bled viewport, so
     exactly 3.5 fit inside the title-aligned area */
  --car-slide: calc((min(100vw, var(--ivr-container)) - (var(--ivr-gutter) * 2) - (var(--car-slides) - 1) * var(--car-gap)) / var(--car-slides));
}

/* ---- head: intro left, secondary CTA right ---- */
.ivr-carousel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ivr-space-8);
  margin-block-end: var(--ivr-space-12);
}

.ivr-carousel__intro {
  display: flex;
  flex-direction: column;
  gap: var(--ivr-space-4);
  max-inline-size: var(--ivr-measure);
}

.ivr-carousel__cta {
  flex: none;
}

/* ---- viewport ---- */
.ivr-carousel__viewport {
  /* The hover shadow reaches ~48px past the card and overflow:hidden clips it,
     so the viewport is padded on every side and pulled back by the same amount
     with negative margins — the slides stay aligned, the shadow gets room. */
  --car-pad: 1.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--car-pad);
  scroll-behavior: smooth;
  padding: var(--car-pad);
  margin-block: calc(var(--car-pad) * -1);
  margin-inline-start: calc(var(--car-pad) * -1);
  /* right-edge bleed: 50% of the container content minus half the viewport */
  margin-inline-end: calc(50% - 50vw);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ivr-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.ivr-carousel__viewport:focus-visible {
  outline: 2px solid var(--ivr-focus-ring);
  outline-offset: 4px;
}

.ivr-carousel__track {
  display: flex;
  gap: var(--car-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ivr-carousel__slide {
  flex: 0 0 auto;
  inline-size: var(--car-slide);
  scroll-snap-align: start;
  /* the track stretches the slides; this passes that height to the card, so
     shorter copy no longer yields a shorter card */
  display: flex;
}

.ivr-carousel__slide>.ivr-cardA {
  inline-size: 100%;
}

/* wider and shorter than the old 4-up grid, scoped so the styleguide keeps
   its original card proportions */
.ivr-carousel .ivr-cardA__media {
  aspect-ratio: 16 / 10;
}

/* the full-size card shadow is built for a grid with room around it */
.ivr-carousel .ivr-cardA:hover {
  box-shadow: 0 2px 4px rgb(4 74 179 / 0.05), 0 10px 20px -12px rgb(4 74 179 / 0.26);
}

.ivr-carousel .ivr-cardA__body {
  padding-block: var(--ivr-space-6) var(--ivr-space-6);
}

/* ---- nav ---- */
.ivr-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ivr-space-8);
  margin-block-start: var(--ivr-space-8);
}

.ivr-carousel__progress {
  position: relative;
  flex: 1 1 auto;
  max-inline-size: 14rem;
  block-size: 2px;
  background-color: var(--ivr-border);
  border-radius: var(--ivr-radius-pill);
  overflow: hidden;
}

.ivr-carousel__progress span {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 25%;
  min-inline-size: 12%;
  background-color: var(--ivr-blue-600);
  border-radius: inherit;
  transition: inline-size 220ms var(--ivr-ease-out);
}

.ivr-carousel__arrows {
  display: flex;
  gap: var(--ivr-space-3);
}

.ivr-carousel__arrow {
  display: grid;
  place-items: center;
  inline-size: 2.875rem;
  block-size: 2.875rem;
  border: var(--ivr-rule) solid var(--ivr-border);
  border-radius: var(--ivr-radius-btn);
  background-color: transparent;
  color: var(--ivr-text);
  cursor: pointer;
  transition:
    border-color var(--ivr-duration-fast) var(--ivr-ease),
    background-color var(--ivr-duration-fast) var(--ivr-ease),
    color var(--ivr-duration-fast) var(--ivr-ease),
    opacity var(--ivr-duration) var(--ivr-ease);
}

.ivr-carousel__arrow:hover:not(:disabled) {
  border-color: var(--ivr-blue-300);
  background-color: var(--ivr-blue-50);
  color: var(--ivr-blue-700);
}

/* no disabled state: the loop means neither arrow is ever a dead end */

/* LTR : le sprite pointe à droite. Le bouton "prev" a `.ivr-carousel__
   arrow-icon` → flip pour pointer à gauche. Le bouton "next" garde le
   sprite tel quel (à droite). */
.ivr-carousel__arrow-icon {
  transform: scaleX(-1);
}

/* RTL : miroir exact du LTR. Prev pointe à DROITE (unflip), next à
   GAUCHE (flip). L'ancienne règle `.ivr-carousel__arrow svg` ciblait
   les DEUX arrows et gagnait en spécificité sur le unflip → les deux
   finissaient à gauche. On cible désormais séparément : `arrow-icon`
   pour prev, `:not(.ivr-carousel__arrow-icon)` pour next. */
[dir="rtl"] .ivr-carousel__arrow-icon {
  transform: none;
}

[dir="rtl"] .ivr-carousel__arrow>svg:not(.ivr-carousel__arrow-icon) {
  transform: scaleX(-1);
}

@media (max-width: 40rem) {
  .ivr-carousel__head {
    margin-block-end: var(--ivr-space-10);
  }
}

@media (min-width: 48rem) {
  .ivr-carousel {
    --car-slides: 2.2;
  }
}

/* Desktop: exactly three cards, contained. The loop is what carries the
   interaction here, so the half-card cue is no longer needed and the row
   closes cleanly on the container's right edge. */
@media (min-width: 64rem) {
  .ivr-carousel {
    --car-slides: 3;
  }

  .ivr-carousel__viewport {
    margin-inline-end: calc(var(--car-pad) * -1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ivr-carousel__viewport {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   ALLIANCE — text left, full-bleed-height image right
   The section carries no vertical padding of its own: the image has to run
   from the top rule to the bottom one, so the padding sits on the text column.
   The row height therefore comes from the text, and the media stretches to it.
   -------------------------------------------------------------------------- */
.ivr-alliance {
  border-block: var(--ivr-rule) solid var(--ivr-border-subtle);
  /* margin, not padding — the rules stay tight to the content and the gap
     sits outside them, before the next section */
  margin-block-end: clamp(4rem, 7vw, 7rem);
}

.ivr-alliance__grid {
  display: grid;
  gap: 0;
}

.ivr-alliance__content {
  display: flex;
  flex-direction: column;
  padding-block: clamp(4.5rem, 9vw, 9rem);
}

.ivr-alliance__title {
  margin-block: var(--ivr-space-4) var(--ivr-space-5);
}

/* Absolute fill rather than block-size:100% — a stretched grid item gives the
   image a definite box to cover without relying on percentage resolution, and
   min-block-size keeps it from collapsing once the columns stack. */
.ivr-alliance__media {
  position: relative;
  min-block-size: 20rem;
}

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

@media (min-width: 60rem) {
  .ivr-alliance__grid {
    /* the image takes the larger share */
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    /* 64 → 96px */
    column-gap: clamp(4rem, 5.5vw, 6rem);
    align-items: stretch;
  }

  /* Placed explicitly rather than reordered in the markup: the text stays
     first in the DOM, so it still reads before the image when the columns
     stack and for anyone using a screen reader. */
  .ivr-alliance__media {
    grid-column: 1;
    grid-row: 1;
    min-block-size: 0;
  }

  .ivr-alliance__content {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   CHECKLIST — "Une alliance pour la croissance"
   Three columns divided by hairlines, icon over text, sitting inside the text
   half of the split. That column is roughly 620px, so the padding and measure
   are kept tight to stop the labels running to four lines.
   -------------------------------------------------------------------------- */
.ivr-checklist {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  margin-block-start: clamp(var(--ivr-space-10), 4vw, var(--ivr-space-12));
  padding: 0;
}

.ivr-checklist__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ivr-space-4);
  /* stacked below the breakpoint, so the rule runs horizontally */
  padding-block: var(--ivr-space-7, 1.75rem);
  border-block-start: var(--ivr-rule) solid var(--ivr-border-subtle);
}

.ivr-checklist__item:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.ivr-checklist__mark {
  display: block;
  color: var(--ivr-blue-600);
  transition: transform var(--ivr-duration-slow) var(--ivr-ease-out);
}

.ivr-checklist__mark .ivr-icon {
  inline-size: 2.25rem;
  block-size: 2.25rem;
}

.ivr-checklist__item:hover .ivr-checklist__mark {
  transform: translateY(-3px);
}

.ivr-checklist__text {
  font-size: var(--ivr-text-base);
  line-height: var(--ivr-leading-snug);
  letter-spacing: var(--ivr-tracking-snug);
  color: var(--ivr-text);
  max-inline-size: 18ch;
}

@media (min-width: 48rem) {
  .ivr-checklist {
    grid-template-columns: repeat(3, 1fr);
  }

  .ivr-checklist__item {
    padding-block: 0;
    padding-inline: clamp(var(--ivr-space-4), 1.6vw, var(--ivr-space-6));
    border-block-start: 0;
    /* the divider turns vertical between columns */
    border-inline-start: var(--ivr-rule) solid var(--ivr-border-subtle);
  }

  .ivr-checklist__item:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

.ivr-section--inverse .ivr-checklist__item {
  border-color: rgb(255 255 255 / 0.14);
}

.ivr-section--inverse .ivr-checklist__text {
  color: var(--ivr-gray-0);
}

.ivr-section--inverse .ivr-checklist__mark {
  color: var(--ivr-blue-300);
}

/* media side of the split */
.ivr-figure {
  border-radius: var(--ivr-radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.ivr-figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ivr-ease-out);
}

.ivr-figure:hover img {
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.ivr-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--ivr-z-header);
  background-color: rgb(255 255 255 / 0.88);
  backdrop-filter: blur(14px);
  border-block-end: var(--ivr-rule) solid transparent;
  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-header.is-scrolled {
  background-color: rgb(255 255 255 / 0.96);
  border-block-end-color: var(--ivr-border-subtle);
  box-shadow: 0 12px 32px -16px rgb(19 24 32 / 0.20),
    0 2px 8px -4px rgb(19 24 32 / 0.06);
}

/* En-tete opaque (sans --over-hero) : filet pleine largeur.
   C'est une vraie bordure et non un pseudo-element : la bordure transparente
   de `.ivr-header` — qui reserve la place du filet du defilement sur l'en-tete
   transparent — est ici simplement coloree, donc plus aucun vide d'1px sous le
   trait. Ne pas retirer la bordure transparente en amont : sur `--over-hero`
   elle evite un saut d'1px a l'apparition du filet. */
.ivr-header:not(.ivr-header--over-hero) {
  border-block-end-color: var(--ivr-border-subtle);
}

/* Overlaying a hero requires taking the header OUT of flow — sticky still
   reserves its height and would push the hero down, leaving a white band. */
.ivr-header--over-hero {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
}

.ivr-header--over-hero:not(.is-scrolled) {
  background-color: transparent;
  backdrop-filter: none;
}

.ivr-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--ivr-space-6);
  block-size: var(--ivr-header-h);
  transition: block-size var(--ivr-duration) var(--ivr-ease);
}

.ivr-header.is-scrolled .ivr-header__inner {
  block-size: var(--ivr-header-h-scrolled);
}

.ivr-header__logo {
  display: block;
  flex: none;
}

.ivr-header__logo img {
  block-size: 2.25rem;
  inline-size: auto;
}

/* Fallback texte : occupe le même slot que l'image logo quand le champ
   ACF Logo est vide. Comportement standard WordPress (bloginfo(name)). */
.ivr-header__wordmark {
  display: inline-flex;
  align-items: center;
  block-size: 2.25rem;
  font-family: var(--ivr-font-display, inherit);
  font-size: var(--ivr-text-lg, 1.125rem);
  font-weight: var(--ivr-weight-semibold, 600);
  letter-spacing: var(--ivr-tracking-tight, -0.01em);
  color: currentColor;
  white-space: nowrap;
}

/* the light logo is only used while the header is transparent on a dark hero */
.ivr-header__logo--light {
  display: none;
}

.ivr-header--over-hero:not(.is-scrolled) .ivr-header__logo--dark {
  display: none;
}

.ivr-header--over-hero:not(.is-scrolled) .ivr-header__logo--light {
  display: block;
}

/* ---- nav ---- */
.ivr-nav {
  display: none;
}

@media (min-width: 76rem) {
  .ivr-nav {
    display: flex;
    align-items: center;
    gap: var(--ivr-space-1);
    justify-self: center;
  }
}

.ivr-nav__item {
  position: relative;
}

.ivr-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ivr-space-2);
  padding: var(--ivr-space-2) var(--ivr-space-4);
  font-size: var(--ivr-text-sm);
  font-weight: var(--ivr-weight-medium);
  letter-spacing: var(--ivr-tracking-snug);
  color: var(--ivr-text);
  text-decoration: none;
  border-radius: var(--ivr-radius-eyebrow);
  transition: color var(--ivr-duration-fast) var(--ivr-ease),
    background-color var(--ivr-duration-fast) var(--ivr-ease);
}

.ivr-nav__link:hover,
.ivr-nav__item.is-open>.ivr-nav__link {
  color: var(--ivr-blue-700);
  background-color: var(--ivr-blue-50);
}

.ivr-nav__link[aria-current="page"] {
  color: var(--ivr-blue-700);
}

.ivr-header--over-hero:not(.is-scrolled) .ivr-nav__link {
  color: var(--ivr-gray-0);
}

.ivr-header--over-hero:not(.is-scrolled) .ivr-nav__link:hover,
.ivr-header--over-hero:not(.is-scrolled) .ivr-nav__item.is-open>.ivr-nav__link {
  color: var(--ivr-gray-0);
  background-color: rgb(255 255 255 / 0.14);
}

.ivr-nav__chevron {
  transition: rotate var(--ivr-duration) var(--ivr-ease);
}

.ivr-nav__item.is-open .ivr-nav__chevron {
  rotate: 180deg;
}

/* ---- dropdown ---- */
.ivr-dropdown {
  position: absolute;
  inset-block-start: calc(100% + var(--ivr-space-3));
  inset-inline-start: 0;
  min-inline-size: 17rem;
  padding: var(--ivr-space-3);
  background-color: var(--ivr-surface);
  border: var(--ivr-rule) solid var(--ivr-border-subtle);
  border-radius: var(--ivr-radius-chip);
  box-shadow: var(--ivr-shadow-lg);
  opacity: 0;
  visibility: hidden;
  translate: 0 -0.5rem;
  transition:
    opacity var(--ivr-duration) var(--ivr-ease),
    translate var(--ivr-duration) var(--ivr-ease-out),
    visibility 0s linear var(--ivr-duration);
}

.ivr-nav__item.is-open>.ivr-dropdown {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}

.ivr-dropdown__link {
  display: block;
  padding: var(--ivr-space-3) var(--ivr-space-4);
  font-size: var(--ivr-text-sm);
  letter-spacing: var(--ivr-tracking-snug);
  color: var(--ivr-text);
  text-decoration: none;
  border-radius: var(--ivr-radius-eyebrow);
  transition: background-color var(--ivr-duration-fast) var(--ivr-ease),
    color var(--ivr-duration-fast) var(--ivr-ease);
}

.ivr-dropdown__link:hover {
  background-color: var(--ivr-blue-50);
  color: var(--ivr-blue-700);
}

.ivr-dropdown__meta {
  display: block;
  margin-block-start: 1px;
  font-size: var(--ivr-text-xs);
  color: var(--ivr-text-subtle);
}

/* ---- header actions ---- */
.ivr-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: var(--ivr-space-3);
}

/* Sous 68rem le burger apparait et le CTA Contact fait doublon : il est repris
   en tete du pied de drawer. Le garder ici serrait le logo contre le burger. */
@media (max-width: 75.999rem) {
  .ivr-header__cta {
    display: none;
  }

  /* Flex, pas la grille 3 colonnes du desktop. `.ivr-nav` passe en
     `display: none` sous 68rem : il ne genere plus de boite, donc le
     placement automatique faisait remonter les actions dans la colonne du
     milieu et les laissait flotter au centre au lieu du bord. */
  .ivr-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: var(--ivr-header-h-mobile);
  }

  .ivr-header.is-scrolled .ivr-header__inner {
    block-size: var(--ivr-header-h-mobile);
  }

  /* Le logo est dimensionne par sa LARGEUR ici, pas par sa hauteur. A hauteur
     fixe il mesurait 225px de large : avec le selecteur de langue et le burger
     on depassait les 348px utiles d'un ecran de 390, et `.ivr-header__logo`
     etant en `flex: none`, rien ne pouvait se resorber — les actions sortaient
     de l'ecran. Une largeur relative garde le ratio et borne l'encombrement. */
  .ivr-header__logo {
    min-inline-size: 0;
  }

  .ivr-header__logo img {
    inline-size: min(15rem, 49vw);
    block-size: auto;
    max-inline-size: 100%;
  }

  /* la gouttiere de 1.5rem heritee de la grille desktop s'applique aussi en
     flex et poussait les actions hors de l'ecran */
  .ivr-header__inner {
    gap: var(--ivr-space-2);
  }

  .ivr-header__actions {
    gap: var(--ivr-space-1);
    flex: none;
  }

  /* chevron decoratif : le globe et le code langue suffisent, et les ~18px
     recuperes reviennent au logo */
  .ivr-lang__toggle {
    padding-inline: var(--ivr-space-1);
    gap: var(--ivr-space-1);
  }

  .ivr-lang__toggle .ivr-nav__chevron {
    display: none;
  }
}

/* l'en-tete doit passer AU-DESSUS du drawer : c'est ce qui permet de garder le
   burger visible et de lui faire jouer son morph pendant l'ouverture */
.ivr-header.is-drawer-open {
  z-index: calc(var(--ivr-z-drawer) + 1);
  background-color: var(--ivr-surface);
  border-block-end-color: var(--ivr-border-subtle);
}



/* language switcher */
.ivr-lang {
  position: relative;
}

.ivr-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ivr-space-2);
  padding: var(--ivr-space-2) var(--ivr-space-3);
  font-size: var(--ivr-text-sm);
  font-weight: var(--ivr-weight-medium);
  color: var(--ivr-text);
  border-radius: var(--ivr-radius-eyebrow);
  transition: background-color var(--ivr-duration-fast) var(--ivr-ease);
}

.ivr-lang__toggle:hover {
  background-color: var(--ivr-blue-50);
}

.ivr-header--over-hero:not(.is-scrolled) .ivr-lang__toggle {
  color: var(--ivr-gray-0);
}

.ivr-header--over-hero:not(.is-scrolled) .ivr-lang__toggle:hover {
  background-color: rgb(255 255 255 / 0.14);
}

.ivr-lang__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--ivr-space-2));
  inset-inline-end: 0;
  min-inline-size: 9rem;
  padding: var(--ivr-space-2);
  background-color: var(--ivr-surface);
  border: var(--ivr-rule) solid var(--ivr-border-subtle);
  border-radius: var(--ivr-radius-chip);
  box-shadow: var(--ivr-shadow-lg);
  opacity: 0;
  visibility: hidden;
  translate: 0 -0.4rem;
  transition:
    opacity var(--ivr-duration) var(--ivr-ease),
    translate var(--ivr-duration) var(--ivr-ease-out),
    visibility 0s linear var(--ivr-duration);
}

.ivr-lang.is-open .ivr-lang__menu {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}

.ivr-lang__option {
  display: block;
  padding: var(--ivr-space-2) var(--ivr-space-3);
  font-size: var(--ivr-text-sm);
  color: var(--ivr-text);
  text-decoration: none;
  border-radius: var(--ivr-radius-sm);
}

.ivr-lang__option:hover {
  background-color: var(--ivr-blue-50);
  color: var(--ivr-blue-700);
}

.ivr-lang__option[aria-current="true"] {
  font-weight: var(--ivr-weight-medium);
  color: var(--ivr-blue-700);
}

/* ---- burger : 3 barres qui se plient en croix ----------------------------
   Un vrai morph, pas un echange d'icones : les barres sont des elements reels
   qu'on translate puis qu'on tourne. Le decalage de 90ms entre translation et
   rotation evite le pivot en diagonale et donne le "pliage".
   -------------------------------------------------------------------------- */
.ivr-burger {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--ivr-radius-eyebrow);
  color: var(--ivr-text);
  transition: background-color var(--ivr-duration-fast) var(--ivr-ease);
}

.ivr-burger:hover {
  background-color: var(--ivr-blue-50);
}

.ivr-burger__box {
  position: relative;
  inline-size: 1.125rem;
  block-size: 0.75rem;
}

.ivr-burger__bar {
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition:
    translate var(--ivr-duration) var(--ivr-ease) 90ms,
    rotate var(--ivr-duration) var(--ivr-ease),
    opacity 120ms linear 90ms,
    inline-size var(--ivr-duration) var(--ivr-ease);
}

.ivr-burger__bar:nth-child(1) {
  inset-block-start: 0;
}

.ivr-burger__bar:nth-child(2) {
  inset-block-start: calc(50% - 1px);
}

.ivr-burger__bar:nth-child(3) {
  inset-block-end: 0;
}

/* etat ouvert : les deux barres extremes se rejoignent au centre puis pivotent,
   la barre du milieu s'efface. L'ordre est inverse a la fermeture (rotation
   d'abord, translation ensuite) grace aux delais ci-dessous. */
.ivr-burger[aria-expanded="true"] .ivr-burger__bar {
  transition:
    translate var(--ivr-duration) var(--ivr-ease),
    rotate var(--ivr-duration) var(--ivr-ease) 90ms,
    opacity 120ms linear,
    inline-size var(--ivr-duration) var(--ivr-ease);
}

.ivr-burger[aria-expanded="true"] .ivr-burger__bar:nth-child(1) {
  translate: 0 calc(0.375rem - 1px);
  rotate: 45deg;
}

.ivr-burger[aria-expanded="true"] .ivr-burger__bar:nth-child(2) {
  opacity: 0;
  inline-size: 0;
}

.ivr-burger[aria-expanded="true"] .ivr-burger__bar:nth-child(3) {
  translate: 0 calc(-0.375rem + 1px);
  rotate: -45deg;
}

.ivr-header--over-hero:not(.is-scrolled) .ivr-burger {
  color: var(--ivr-gray-0);
}

.ivr-header--over-hero:not(.is-scrolled) .ivr-burger:hover {
  background-color: rgb(255 255 255 / 0.14);
}

/* Drawer ouvert : l'en-tete redevient opaque, donc tout ce qui etait blanc pour
   le hero doit repasser en sombre. Declare APRES les regles --over-hero :
   a specificite egale, c'est l'ordre de declaration qui tranche. */
.ivr-header.is-drawer-open .ivr-header__logo--light {
  display: none;
}

.ivr-header.is-drawer-open .ivr-header__logo--dark {
  display: block;
}

.ivr-header--over-hero.is-drawer-open .ivr-burger,
.ivr-header--over-hero.is-drawer-open .ivr-lang__toggle {
  color: var(--ivr-text);
}

.ivr-header--over-hero.is-drawer-open .ivr-burger:hover,
.ivr-header--over-hero.is-drawer-open .ivr-lang__toggle:hover {
  background-color: var(--ivr-blue-50);
}

@media (min-width: 76rem) {
  .ivr-burger {
    display: none;
  }
}

/* ---- drawer : panneau lateral ------------------------------------------
   Il entre par le bord de fin, pas par le haut : un panneau qui tombe du haut
   recouvre l'en-tete et le bouton qui vient d'etre touche. En laterale,
   l'en-tete reste visible et le burger peut se transformer sous les yeux.
   -------------------------------------------------------------------------- */
.ivr-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--ivr-z-drawer);
  visibility: hidden;
  transition: visibility 0s linear var(--ivr-duration-slow);
}

.ivr-drawer.is-open {
  visibility: visible;
  transition-delay: 0s;
}

.ivr-drawer__scrim {
  position: absolute;
  inset: 0;
  background-color: rgb(2 18 42 / 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--ivr-duration-slow) var(--ivr-ease);
}

.ivr-drawer.is-open .ivr-drawer__scrim {
  opacity: 1;
}

.ivr-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--ivr-surface);
  box-shadow: -24px 0 56px rgb(2 18 42 / 0.22);
  /* translate est physique : en RTL le panneau doit sortir par l'autre bord */
  translate: 100% 0;
  transition: translate var(--ivr-duration-slow) var(--ivr-ease-out);
  padding-block-start: var(--ivr-header-h-mobile);
}

[dir="rtl"] .ivr-drawer__panel {
  translate: -100% 0;
  box-shadow: 24px 0 56px rgb(2 18 42 / 0.22);
}

.ivr-drawer.is-open .ivr-drawer__panel {
  translate: 0 0;
}

/* ---- niveaux empiles (drill-down) ---- */
.ivr-drawer__viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.ivr-drawer__level {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: var(--ivr-space-6) var(--ivr-space-6) var(--ivr-space-8);
  translate: 100% 0;
  opacity: 0;
  transition:
    translate var(--ivr-duration-slow) var(--ivr-ease-out),
    opacity var(--ivr-duration) var(--ivr-ease);
}

[dir="rtl"] .ivr-drawer__level {
  translate: -100% 0;
}

.ivr-drawer__level.is-current {
  translate: 0 0;
  opacity: 1;
}

/* le niveau parent glisse vers le bord de debut, pas vers celui d'ou arrive
   l'enfant — sans quoi les deux se croisent dans le meme sens */
.ivr-drawer__level.is-past {
  translate: -100% 0;
  opacity: 0;
}

[dir="rtl"] .ivr-drawer__level.is-past {
  translate: 100% 0;
}

.ivr-drawer__nav {
  display: flex;
  flex-direction: column;
}

.ivr-drawer__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ivr-space-4);
  inline-size: 100%;
  padding: var(--ivr-space-4) var(--ivr-space-2);
  font-size: var(--ivr-text-base);
  font-weight: var(--ivr-weight-medium);
  letter-spacing: var(--ivr-tracking-snug);
  text-align: start;
  color: var(--ivr-text);
  text-decoration: none;
  border-block-end: var(--ivr-rule) solid var(--ivr-border-subtle);
  transition: color var(--ivr-duration-fast) var(--ivr-ease);
}

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

/* le filet separe deux entrees : sous la derniere il ne separe plus rien */
.ivr-drawer__nav> :last-child {
  border-block-end: 0;
}

.ivr-drawer__item .ivr-icon {
  color: var(--ivr-gray-400);
}

[dir="rtl"] .ivr-drawer__item .ivr-icon {
  scale: -1 1;
}

.ivr-drawer__item:hover .ivr-icon {
  color: var(--ivr-blue-600);
}

.ivr-drawer__back {
  display: inline-flex;
  align-items: center;
  gap: var(--ivr-space-2);
  margin-block-end: var(--ivr-space-4);
  padding: var(--ivr-space-2) var(--ivr-space-3) var(--ivr-space-2) var(--ivr-space-2);
  font-size: var(--ivr-text-sm);
  font-weight: var(--ivr-weight-medium);
  color: var(--ivr-blue-600);
  border-radius: var(--ivr-radius-eyebrow);
  background-color: var(--ivr-blue-50);
}

/* le chevron pointe vers l'avant dans le sprite : on le retourne pour "retour" */
.ivr-drawer__back .ivr-icon {
  scale: -1 1;
}

[dir="rtl"] .ivr-drawer__back .ivr-icon {
  scale: 1 1;
}

.ivr-drawer__title {
  margin-block-end: 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-subtle);
}

/* ---- pied du drawer : memes coordonnees que le footer ---- */
.ivr-drawer__foot {
  flex: none;
  display: grid;
  gap: var(--ivr-space-5);
  padding: var(--ivr-space-6);
  background-color: var(--ivr-surface-subtle);
  border-block-start: var(--ivr-rule) solid var(--ivr-border-subtle);
}

.ivr-drawer__cta {
  justify-content: space-between;
}

.ivr-drawer__contact {
  font-style: normal;
  display: grid;
  gap: var(--ivr-space-4);
}

.ivr-drawer__addr {
  font-size: var(--ivr-text-xs);
  line-height: var(--ivr-leading-relaxed);
  color: var(--ivr-text-muted);
}

.ivr-drawer__lines {
  display: grid;
  gap: var(--ivr-space-2);
  margin: 0;
}

.ivr-drawer__lines>div {
  display: flex;
  align-items: baseline;
  gap: var(--ivr-space-3);
  font-size: var(--ivr-text-xs);
}

.ivr-drawer__lines dt {
  flex: none;
  inline-size: 2.75rem;
  color: var(--ivr-text-subtle);
}

.ivr-drawer__lines dd {
  margin: 0;
}

.ivr-drawer__lines a {
  color: var(--ivr-text);
  text-decoration: none;
}

.ivr-drawer__lines a:hover {
  color: var(--ivr-blue-600);
}

.ivr-drawer__social {
  display: inline-flex;
  align-items: center;
  gap: var(--ivr-space-2);
  font-size: var(--ivr-text-xs);
  font-weight: var(--ivr-weight-medium);
  color: var(--ivr-blue-600);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   VIDEO LIGHTBOX
   The iframe src is only written on open, so the embed never loads (and never
   phones home) unless the user actually asks for the video.
   -------------------------------------------------------------------------- */
.ivr-modal {
  position: fixed;
  inset: 0;
  z-index: var(--ivr-z-modal);
  display: grid;
  place-items: center;
  padding: var(--ivr-gutter);
  background-color: var(--ivr-overlay-modal);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--ivr-duration) var(--ivr-ease),
    visibility 0s linear var(--ivr-duration);
}

.ivr-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.ivr-modal__frame {
  position: relative;
  inline-size: min(100%, 68rem);
  aspect-ratio: 16 / 9;
  background-color: var(--ivr-blue-950);
  border-radius: var(--ivr-radius-card);
  overflow: hidden;
  scale: 0.96;
  transition: scale var(--ivr-duration-slow) var(--ivr-ease-out);
}

.ivr-modal.is-open .ivr-modal__frame {
  scale: 1;
}

.ivr-modal__frame iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.ivr-modal__close {
  position: absolute;
  inset-block-start: calc(var(--ivr-space-12) * -1);
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--ivr-radius-pill);
  background-color: rgb(255 255 255 / 0.12);
  color: var(--ivr-gray-0);
  transition: background-color var(--ivr-duration) var(--ivr-ease);
}

.ivr-modal__close:hover {
  background-color: rgb(255 255 255 / 0.24);
}

/* --------------------------------------------------------------------------
   SCROLL REVEAL — opt-in, and a no-op when the user asked for reduced motion
   -------------------------------------------------------------------------- */
.ivr-reveal {
  transition:
    opacity var(--ivr-duration-reveal) var(--ivr-ease),
    translate var(--ivr-duration-reveal) var(--ivr-ease-out);
}

/* Hidden only once JS has marked the document — otherwise a script failure
   would blank out real content. */
.ivr-js .ivr-reveal:not(.is-inview) {
  opacity: 0;
  translate: 0 1.25rem;
}

.ivr-reveal--d1 {
  transition-delay: 100ms;
}

.ivr-reveal--d2 {
  transition-delay: 200ms;
}

.ivr-reveal--d3 {
  transition-delay: 300ms;
}

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

  .ivr-timeline__item {
    opacity: 1;
    translate: 0 0;
  }

  .ivr-timeline__track::after {
    transform: none;
  }
}

/* ==========================================================================
   FOOTER — VERSION C (claire)
   Light ground, dark text, brand blue as the only accent. The header's colour
   logo is reused as-is, which is why the surface has to stay light: the white
   lockup has nothing to sit on here.
   ========================================================================== */
/* Le pied de page part du BLANC en haut et ne prend sa teinte que vers le bas :
   il prolonge la derniere section au lieu de s'en detacher par un aplat.
   Le fond de base reste blanc — c'est le degrade qui apporte la couleur, donc
   la jonction avec la section precedente est invisible. */
.ivr-footer3 {
  position: relative;
  isolation: isolate;
  background-color: var(--ivr-surface);
  border-block-start: var(--ivr-rule) solid var(--ivr-border-subtle);
  color: var(--ivr-text);
  padding-block: clamp(4rem, 7vw, 6.5rem) 0;
  overflow: hidden;
}

.ivr-footer3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
      var(--ivr-surface) 0%,
      var(--ivr-surface) 28%,
      color-mix(in srgb, var(--ivr-blue-50) 55%, var(--ivr-surface)) 68%,
      var(--ivr-blue-50) 100%);
}

/* Repli pour les navigateurs sans color-mix() : meme intention, palier median
   en dur. Sans cela toute la declaration serait invalide et le degrade
   disparaitrait — le pied resterait blanc, ce qui reste lisible mais plat. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .ivr-footer3::before {
    background: linear-gradient(to bottom,
        var(--ivr-surface) 0%,
        var(--ivr-surface) 28%,
        #f7fafe 68%,
        var(--ivr-blue-50) 100%);
  }
}

.ivr-footer3__inner {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

/* ---- brand ---- */
.ivr-footer3__logo {
  block-size: 2.75rem;
  inline-size: auto;
  margin-block-end: var(--ivr-space-6);
}

/* Fallback texte quand aucun logo n'est chargé dans ACF (footer). */
.ivr-footer3__wordmark {
  display: inline-flex;
  align-items: center;
  block-size: 2.75rem;
  font-family: var(--ivr-font-display, inherit);
  font-size: var(--ivr-text-xl, 1.25rem);
  font-weight: var(--ivr-weight-semibold, 600);
  letter-spacing: var(--ivr-tracking-tight, -0.01em);
  color: currentColor;
  white-space: nowrap;
}

.ivr-footer3__statement {
  font-size: var(--ivr-text-sm);
  line-height: 1.65;
  letter-spacing: var(--ivr-tracking-snug);
  color: var(--ivr-text-muted);
  max-inline-size: 34ch;
}

.ivr-footer3__social {
  display: inline-flex;
  align-items: center;
  gap: var(--ivr-space-2);
  margin-block-start: var(--ivr-space-7, 1.75rem);
  padding-block-end: 2px;
  font-size: var(--ivr-text-sm);
  font-weight: var(--ivr-weight-medium);
  color: var(--ivr-blue-700);
  text-decoration: none;
  border-block-end: var(--ivr-rule) solid var(--ivr-blue-200);
  transition: color var(--ivr-duration-fast) var(--ivr-ease),
    border-color var(--ivr-duration-fast) var(--ivr-ease);
}

.ivr-footer3__social:hover {
  color: var(--ivr-blue-800);
  border-block-end-color: var(--ivr-blue-600);
}

/* ---- three columns on the right ---- */
.ivr-footer3__cols {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ivr-footer3__label {
  font-family: var(--ivr-font-mono);
  font-size: var(--ivr-text-2xs);
  letter-spacing: var(--ivr-tracking-widest);
  text-transform: uppercase;
  color: var(--ivr-blue-600);
  margin-block-end: var(--ivr-space-5);
}

.ivr-footer3__group ul {
  display: flex;
  flex-direction: column;
  gap: var(--ivr-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ivr-footer3__group a {
  font-size: var(--ivr-text-sm);
  letter-spacing: var(--ivr-tracking-snug);
  color: var(--ivr-text-muted);
  text-decoration: none;
  transition: color var(--ivr-duration) var(--ivr-ease);
}

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

/* ---- contact column ---- */
.ivr-footer3__contact {
  font-style: normal;
  grid-column: 1 / -1;
  padding-inline-start: clamp(1.25rem, 2vw, 2rem);
  border-inline-start: var(--ivr-rule) solid var(--ivr-blue-150);
}

.ivr-footer3__addr {
  font-size: var(--ivr-text-sm);
  line-height: var(--ivr-leading-relaxed);
  color: var(--ivr-text-muted);
  max-inline-size: 32ch;
}

.ivr-footer3__lines {
  margin: var(--ivr-space-5) 0 0;
  display: grid;
  gap: var(--ivr-space-1);
  font-size: var(--ivr-text-sm);
}

.ivr-footer3__lines>div {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  align-items: baseline;
  gap: var(--ivr-space-3);
}

.ivr-footer3__lines dt {
  font-family: var(--ivr-font-mono);
  font-size: var(--ivr-text-2xs);
  letter-spacing: var(--ivr-tracking-wide);
  text-transform: uppercase;
  color: var(--ivr-text-subtle);
}

.ivr-footer3__lines dd {
  margin: 0;
  color: var(--ivr-text);
}

.ivr-footer3__lines a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ivr-duration) var(--ivr-ease);
}

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

/* ---- legal ---- */
.ivr-footer3__legal {
  display: flex;
  flex-direction: column;
  gap: var(--ivr-space-4);
  margin-block-start: clamp(3rem, 5vw, 4rem);
  padding-block: var(--ivr-space-6);
  border-block-start: var(--ivr-rule) solid var(--ivr-blue-150);
  font-size: var(--ivr-text-2xs);
  letter-spacing: var(--ivr-tracking-wide);
  color: var(--ivr-text-subtle);
}

.ivr-footer3__legal div {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.ivr-footer3__legal a {
  color: inherit;
  text-decoration: none;
}

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

@media (min-width: 60rem) {
  .ivr-footer3__inner {
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    column-gap: clamp(3rem, 6vw, 6rem);
  }

  /* Auto-width and end-justified rather than three equal fractions: the
     columns pull to the right edge and sit closer together, matching the
     dark footer's nav groups. */
  .ivr-footer3__cols {
    grid-template-columns: repeat(3, auto);
    justify-content: end;
    gap: clamp(2rem, 3.5vw, 3.25rem);
  }

  .ivr-footer3__contact {
    grid-column: auto;
    max-inline-size: 19rem;
    margin-inline-start: 2rem;
  }

  .ivr-footer3__legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}


/* ==========================================================================
   ROLL — the label rides up and an identical one arrives from below
   The link is a one-line window with overflow hidden. Inside it, two stacked
   copies of the label; moving that stack by exactly half its height swaps one
   for the other. The second copy is a real element marked aria-hidden rather
   than ::after + attr(), so screen readers do not read every label twice.
   ========================================================================== */
.ivr-roll {
  display: inline-block;
  overflow: hidden;
  block-size: 1.7em;
  line-height: 1.7em;
  vertical-align: bottom;
}

.ivr-roll__i {
  display: block;
  will-change: transform;
  transition: translate 620ms var(--ivr-ease-out);
}

.ivr-roll__l {
  display: block;
}

/* Pointer devices only: on touch a :hover state latches after the tap and the
   label would sit stuck halfway. */
@media (hover: hover) and (pointer: fine) {

  .ivr-roll:hover .ivr-roll__i,
  .ivr-nav__link:hover .ivr-roll__i,
  .ivr-dropdown__link:hover .ivr-roll__i {
    translate: 0 -50%;
  }
}

/* keyboard users get the same feedback */
.ivr-roll:focus-visible .ivr-roll__i {
  translate: 0 -50%;
}

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

  .ivr-roll:hover .ivr-roll__i,
  .ivr-roll:focus-visible .ivr-roll__i {
    translate: 0;
  }
}

/* ==========================================================================
   AMBITION AFRICAINE — VERSION 2
   The map is the subject here, not a texture: denser matrix, dots at real
   opacity, plus reach arcs drawn from Tanger. One radial mask centred on the
   hub is scrubbed by scroll, so 812 dots reveal for a single style recalc.
   ========================================================================== */
.ivr-amb {
  --amb-p: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 5.5vw, 5.5rem);
  background-color: var(--ivr-blue-950);
  color: var(--ivr-gray-0);
}

.ivr-amb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 75% at 72% 42%, rgb(4 74 179 / 0.30) 0%, transparent 62%),
    radial-gradient(80% 60% at 6% 4%, rgb(1 51 116 / 0.40) 0%, transparent 60%);
}

.ivr-amb__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}

@media (min-width: 60rem) {
  .ivr-amb__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* .ivr-overline defaults to blue-600, which lands at 2.19:1 on this navy —
   a contrast failure, not just a dull look. blue-300 gives 9.80:1. */
.ivr-amb .ivr-overline {
  --ivr-overline-bg: rgb(255 255 255 / 0.12);
  --ivr-overline-dot: var(--ivr-blue-300);
  --ivr-overline-fg: var(--ivr-gray-0);
}

.ivr-amb__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ivr-space-6);
}

.ivr-amb__title {
  font-size: var(--ivr-text-3xl);
  font-weight: var(--ivr-weight-semibold);
  letter-spacing: var(--ivr-tracking-tighter);
  color: var(--ivr-gray-0);
  max-inline-size: 16ch;
}

.ivr-amb__quote {
  font-size: var(--ivr-text-md);
  line-height: var(--ivr-leading-relaxed);
  letter-spacing: var(--ivr-tracking-snug);
  color: rgb(255 255 255 / 0.78);
  max-inline-size: 44ch;
}

.ivr-amb__cta {
  margin-block-start: var(--ivr-space-2);
}

/* ---- figure ---- */
.ivr-amb__figure {
  margin: 0;
  justify-self: center;
  inline-size: 100%;
}

.ivr-amb__map {
  inline-size: min(100%, 33rem);
  margin-inline: auto;
  /* --amb-y runs 1 → -1 as the section crosses the viewport, so all three
     keep moving for the section's whole passage rather than stopping when the
     reveal finishes. Individual transform properties, not a transform list,
     so each can be driven independently from one variable. */
  translate: 0 calc(var(--amb-y, 0) * 2.75rem);
  rotate: calc(var(--amb-y, 0) * 3.5deg);
  scale: calc(0.99 - var(--amb-y, 0) * 0.09);
  will-change: transform;
  /* the hub sits at 18% / 3% of the viewBox; 145% clears the farthest dot */
  -webkit-mask-image: radial-gradient(circle at 18% 3%,
      #000 calc(var(--amb-p) * 145%),
      transparent calc(var(--amb-p) * 145% + 10%));
  mask-image: radial-gradient(circle at 18% 3%,
      #000 calc(var(--amb-p) * 145%),
      transparent calc(var(--amb-p) * 145% + 10%));
}

.ivr-amb__svg {
  inline-size: 100%;
  block-size: auto;
  display: block;
  overflow: visible;
}

/* dots carry real weight now rather than sitting at texture level */
.ivr-amb__dots circle {
  fill: var(--ivr-blue-400);
  opacity: 0.9;
}

.ivr-amb__nodes circle {
  fill: var(--ivr-blue-200);
  stroke: rgb(162 195 255 / 0.45);
  stroke-width: 4;
}

.ivr-amb__hub {
  fill: var(--ivr-gray-0);
}

.ivr-amb__ping {
  fill: none;
  stroke: var(--ivr-blue-300);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: ivr-amb-ping 3s var(--ivr-ease-out) infinite;
}

@keyframes ivr-amb-ping {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }

  70% {
    transform: scale(3.4);
    opacity: 0;
  }

  100% {
    transform: scale(3.4);
    opacity: 0;
  }
}

/* pathLength="1" normalises every arc, so one offset value draws them all
   regardless of their real length */
.ivr-amb__arcs path {
  stroke: var(--ivr-blue-300);
  stroke-width: 1.2;
  opacity: 0.5;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--amb-p));
}

@media (prefers-reduced-motion: reduce) {
  .ivr-amb__map {
    -webkit-mask-image: none;
    mask-image: none;
    translate: none;
    rotate: none;
    scale: 1;
  }

  .ivr-amb__arcs path {
    stroke-dashoffset: 0;
  }

  .ivr-amb__ping {
    animation: none;
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   PAGE 404 — introuvable
   Landing minimaliste (headline + lead + retour accueil). Header/footer
   du site présents pour permettre la navigation depuis la page.
   -------------------------------------------------------------------------- */
.ivr-404 {
  /* Occupe la fenêtre entière moins le header (le footer suit ensuite,
     accessible par un scroll léger). `svh` = small viewport height,
     stable au retrait de la barre d'adresse mobile. */
  min-block-size: calc(100svh - var(--ivr-header-h));
  display: grid;
  place-content: center;
  padding-block: var(--ivr-space-16);
}

@media (max-width: 48rem) {
  .ivr-404 {
    min-block-size: calc(100svh - var(--ivr-header-h-mobile));
  }
}

.ivr-404__inner {
  display: grid;
  gap: var(--ivr-space-4);
  justify-items: start;
  max-inline-size: 42rem;
}

.ivr-404__title {
  font-size: var(--ivr-text-3xl);
  font-weight: var(--ivr-weight-semibold);
  letter-spacing: var(--ivr-tracking-tighter);
  line-height: 1.12;
  margin: 0;
}

.ivr-404__lead {
  color: var(--ivr-text-muted);
  margin: 0;
  max-inline-size: 34rem;
}

.ivr-404__cta {
  margin-block-start: var(--ivr-space-3);
}

/* ==========================================================================
   RTL — corrections localisées (arabe)
   Ces règles vivent en fin de fichier pour ne rien casser côté LTR :
   toutes cadenassées à `[dir="rtl"]`.
   ========================================================================== */



/* 2) Numéros de téléphone / fax en RTL
   Les chiffres sont "weak LTR" par défaut, mais leur ponctuation et les
   séparateurs (espaces, +) subissent l'algorithme bidi arabe et le résultat
   se lit à l'envers ("212+ 5 39 …" au lieu de "+212 5 39 …"). On force
   la direction LTR sur le contenu numérique. */
[dir="rtl"] .ivr-footer3__lines dd,
[dir="rtl"] .ivr-footer3__lines dd a,
[dir="rtl"] .ivr-header__meta dd,
[dir="rtl"] .ivr-header__meta a[href^="tel:"],
[dir="rtl"] .ivr-header__meta a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: embed;
  text-align: end;
  /* aligne visuellement avec le libellé arabe */
}

/* 3) Labels du footer (dt et .ivr-footer3__label)
   En LTR : mono (Geist Mono) + text-2xs + uppercase + tracking wide.
   En AR  : la police mono est déjà mappée sur Readex Pro via le token
   dans tokens.css (une seule police partout). On enlève juste
   text-transform (l'arabe n'a pas de casse, uppercase ajoute du bruit CSS
   inutile) et on garde la taille compacte. */
[dir="rtl"] .ivr-footer3__label,
[dir="rtl"] .ivr-footer3__lines dt,
[dir="rtl"] .ivr-timeline__count {
  text-transform: none;
  font-size: var(--ivr-text-xs);
}

/* 4) Typographie arabe — poids et taille allégés partout SAUF les titres
   Le glyphe arabe a une densité visuelle supérieure au latin : un poids
   "medium" (500) qui passe bien en latin apparaît trop appuyé en arabe.
   On repasse le corps de texte + libellés de nav + éléments UI en 400
   (regular). Les H1..H4 gardent leur poids semi-bold/bold pour la même
   hiérarchie visuelle. La taille de la nav baisse d'un cran (sm → xs)
   pour laisser plus d'air dans un header où les mots arabes sont souvent
   plus larges que leurs équivalents français. */
[dir="rtl"] body,
[dir="rtl"] .ivr-nav__link,
[dir="rtl"] .ivr-dropdown__link,
[dir="rtl"] .ivr-drawer__item,
[dir="rtl"] .ivr-drawer__link,
[dir="rtl"] .ivr-footer3__group a,
[dir="rtl"] .ivr-btnv2,
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] dt,
[dir="rtl"] dd {
  font-weight: 400;
}

/* Nav desktop : passe à text-xs en RTL — plus compact, respire mieux */
[dir="rtl"] .ivr-nav__link,
[dir="rtl"] .ivr-dropdown__link {
  font-size: var(--ivr-text-xs);
  letter-spacing: 0;
}

/* Padding horizontal des liens nav légèrement réduit en RTL pour compenser
   la densité visuelle des glyphes et éviter que le nav ne devienne trop
   large sur les moyens desktops (76-88rem). */
[dir="rtl"] .ivr-nav__link {
  padding-inline: var(--ivr-space-3);
}

/* 5) Chiffres clés (accueil) — la VALEUR est une unité numérique, pas du texte
   Le markup est <em>préfixe</em><span>valeur</span><em>suffixe</em>. En RTL,
   l'ordre logique est rendu de droite à gauche : "+2 500" devient "2 500+"
   et "100 %" devient "% 100". Or un nombre et son unité forment un bloc qui
   se lit de gauche à droite dans toutes les langues, arabe compris.

   On isole donc la valeur en LTR (l'ordre préfixe → valeur → suffixe est
   rétabli) tout en la gardant collée au bord droit de la carte, qui reste
   le bord de DÉBUT en RTL. `unicode-bidi: isolate` évite que le fragment
   contamine le calcul bidi du libellé arabe qui suit.

   Même traitement pour les compteurs "01 / 04" (chiffres clés + timeline) :
   c'est une fraction courant/total, elle se lit dans le même sens partout. */
[dir="rtl"] .ivr-figures__value,
[dir="rtl"] .ivr-figures__idx,
[dir="rtl"] .ivr-timeline__count {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}
/* Drawer mobile — entree « pole » sur deux lignes : le nom du pole, puis
   les filiales en dessous. Le .ivr-drawer__item de base est un flex en
   ligne avec space-between (pour la chevron des entrees a sous-menu) ;
   ici on repasse en colonne. `flex-start` suit la direction d'ecriture,
   donc l'alignement bascule tout seul a droite en RTL. */
.ivr-drawer__item--stacked {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

.ivr-drawer__meta {
  font-size: var(--ivr-text-xs);
  font-weight: var(--ivr-weight-regular);
  letter-spacing: 0;
  color: var(--ivr-text-subtle);
}