/* ==========================================================================
   INVESTORAMA GROUP — Base
   Reset, document defaults, typography, layout primitives.
   Consumes tokens.css only — no raw values.
   All directional properties are LOGICAL so [dir="rtl"] flips for free.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--ivr-header-h) + var(--ivr-space-6));
}

/* Scoping scroll-behavior:smooth à :focus-within évite que Chrome anime la
   restauration de scroll au rechargement (impression de « la page défile du
   bas vers le haut »). Les clics d'ancrage — qui déplacent le focus dans la
   page — bénéficient toujours du smooth-scroll. */
html:focus-within {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
}

/* FOUT smoothing.
   Le JS ajoute .fonts-loading avant que Plus Jakarta soit prête, puis
   .fonts-loaded une fois `document.fonts.ready` résolu (safety timeout : 800 ms
   pour ne jamais bloquer). Sans JS, .fonts-loading n'est jamais posé, donc le
   texte reste visible en fallback système — aucune régression progressive. */
.fonts-loading body { opacity: 0; }
body { transition: opacity 220ms var(--ivr-ease, ease); }

body {
  min-block-size: 100vh;
  font-family: var(--ivr-font-body);
  font-size: var(--ivr-text-base);
  line-height: var(--ivr-leading-normal);
  font-weight: var(--ivr-weight-regular);
  color: var(--ivr-text);
  background-color: var(--ivr-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding-inline-start: 0;
}

table {
  border-collapse: collapse;
  inline-size: 100%;
}

hr {
  border: 0;
  border-block-start: var(--ivr-rule) solid var(--ivr-border);
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ivr-font-heading);
  font-weight: var(--ivr-weight-semibold);
  line-height: var(--ivr-leading-tight);
  letter-spacing: var(--ivr-tracking-tight);
  color: var(--ivr-text);
  text-wrap: balance;
}

h1 { font-size: var(--ivr-text-3xl); letter-spacing: var(--ivr-tracking-tighter); }
h2 { font-size: var(--ivr-text-2xl); }
h3 { font-size: var(--ivr-text-xl); }
h4 { font-size: var(--ivr-text-lg); line-height: var(--ivr-leading-snug); }
h5 { font-size: var(--ivr-text-md); line-height: var(--ivr-leading-snug); }
h6 { font-size: var(--ivr-text-base); line-height: var(--ivr-leading-snug); }

p {
  text-wrap: pretty;
}

a {
  color: var(--ivr-text-brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--ivr-duration-fast) var(--ivr-ease);
}

a:hover {
  color: var(--ivr-accent-hover);
}

strong,
b {
  font-weight: var(--ivr-weight-semibold);
}

small {
  font-size: var(--ivr-text-sm);
}

/* accessible focus — visible on both light and dark surfaces */
:focus-visible {
  outline: 2px solid var(--ivr-focus-ring);
  outline-offset: 3px;
  border-radius: var(--ivr-radius-sm);
}

::selection {
  background-color: var(--ivr-blue-600);
  color: var(--ivr-gray-0);
}

/* --------------------------------------------------------------------------
   3. TYPE UTILITIES
   -------------------------------------------------------------------------- */
/* Surtitre de section : pastille teintee + puce carree.
   Les trois couleurs passent par des variables locales, ce qui permet aux
   contextes sombres (hero photo, section inversee, bandeau ambition) de
   repointer la pastille entiere au lieu de ne corriger que la couleur du
   texte — sinon le fond clair resterait et le contraste s'effondrerait. */
.ivr-overline {
  --ivr-overline-bg: var(--ivr-blue-100);
  --ivr-overline-dot: var(--ivr-blue-400);
  --ivr-overline-fg: var(--ivr-blue-900);

  display: inline-flex;
  align-items: center;
  gap: var(--ivr-space-2);
  /* fit-content plutot que align-self : marche aussi bien dans un parent flex
     (ou `stretch` etirerait la pastille sur toute la largeur) que dans une
     grille, sans avoir a corriger chaque contexte d'appel */
  inline-size: fit-content;
  max-inline-size: 100%;
  padding: var(--ivr-space-1) var(--ivr-space-3);
  border-radius: var(--ivr-radius-md);
  background-color: var(--ivr-overline-bg);
  font-size: var(--ivr-text-2xs);
  font-weight: var(--ivr-weight-medium);
  letter-spacing: var(--ivr-tracking-widest);
  text-transform: uppercase;
  color: var(--ivr-overline-fg);
}

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

/* l'interlettrage pousse un blanc parasite avant le bord de fin */
.ivr-overline { padding-inline-end: calc(var(--ivr-space-3) - 0.12em); }

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

.ivr-measure { max-inline-size: var(--ivr-measure); }
.ivr-measure-narrow { max-inline-size: var(--ivr-measure-narrow); }

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

/* screen-reader only */
.ivr-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* skip link */
.ivr-skip-link {
  position: absolute;
  inset-block-start: var(--ivr-space-2);
  inset-inline-start: var(--ivr-space-2);
  z-index: var(--ivr-z-toast);
  padding: var(--ivr-space-3) var(--ivr-space-5);
  background-color: var(--ivr-surface);
  color: var(--ivr-text-brand);
  font-weight: var(--ivr-weight-medium);
  border-radius: var(--ivr-radius-md);
  box-shadow: var(--ivr-shadow-lg);
  transform: translateY(-200%);
  transition: transform var(--ivr-duration) var(--ivr-ease-out);
}

.ivr-skip-link:focus-visible {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.ivr-container {
  inline-size: 100%;
  max-inline-size: var(--ivr-container);
  margin-inline: auto;
  padding-inline: var(--ivr-gutter);
}

.ivr-container--narrow { max-inline-size: var(--ivr-container-narrow); }
.ivr-container--wide { max-inline-size: var(--ivr-container-wide); }

.ivr-section {
  padding-block: var(--ivr-section-y);
}

.ivr-section--lg { padding-block: var(--ivr-section-y-lg); }
.ivr-section--flush-top { padding-block-start: 0; }
.ivr-section--flush-bottom { padding-block-end: 0; }

.ivr-section--subtle { background-color: var(--ivr-surface-subtle); }
.ivr-section--muted { background-color: var(--ivr-surface-muted); }

.ivr-section--inverse {
  background-color: var(--ivr-surface-inverse);
  color: var(--ivr-text-inverse);
}

.ivr-section--inverse h1,
.ivr-section--inverse h2,
.ivr-section--inverse h3,
.ivr-section--inverse h4 {
  color: var(--ivr-text-inverse);
}

.ivr-section--inverse .ivr-lead,
.ivr-section--inverse .ivr-text-muted {
  color: var(--ivr-text-inverse-muted);
}

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

/* section header block: overline + title + lead */
.ivr-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--ivr-space-4);
  margin-block-end: var(--ivr-space-12);
  max-inline-size: var(--ivr-measure);
}

.ivr-section-head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

/* grids */
.ivr-grid {
  display: grid;
  gap: var(--ivr-grid-gap);
}

.ivr-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.ivr-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.ivr-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* two-column split: media + text */
.ivr-split {
  display: grid;
  gap: clamp(var(--ivr-space-8), 5vw, var(--ivr-space-20));
  align-items: center;
}

@media (min-width: 60rem) {
  .ivr-split { grid-template-columns: 1fr 1fr; }
  .ivr-split--media-end > :first-child { order: 2; }
}

.ivr-stack > * + * { margin-block-start: var(--ivr-space-4); }
.ivr-stack--lg > * + * { margin-block-start: var(--ivr-space-8); }

/* --------------------------------------------------------------------------
   5. RTL — only what logical properties cannot express
   -------------------------------------------------------------------------- */
[dir="rtl"] .ivr-icon-inline {
  transform: scaleX(-1); /* arrows, chevrons */
}

/* ==========================================================================
   TRANSITION DE PAGE — View Transitions natives, sans JS ni dependance.

   Le navigateur maintient la page courante a l'ecran, charge la suivante, et
   ne joue l'animation qu'une fois celle-ci prete a peindre : sur connexion
   rapide l'echange tient en quelques images et passe inapercu, sur connexion
   lente le visiteur continue de voir la page d'ou il vient au lieu d'un ecran
   blanc. L'effet est donc pilote par le CONTENU, pas par un minuteur.

   Non supporte (Firefox a ce jour) : navigation normale, rien ne casse.
   ========================================================================== */
@view-transition { navigation: auto; }

/* Elements PERSISTANTS. Sans nom, l'en-tete, la barre sombre et le pied de
   page glisseraient avec le reste : le glissement se lirait comme un defaut
   d'affichage et non comme une intention. Nommes, le navigateur les reconnait
   d'un document a l'autre et les laisse en place. */
.ivr-header { view-transition-name: ivr-header; }
.ivr-subnav { view-transition-name: ivr-subnav; }
.ivr-footer3 { view-transition-name: ivr-footer; }

/* Glissement court — 26px, pas une pleine hauteur d'ecran : une longue course
   retarde la lecture et c'est elle qui provoque l'inconfort. */
@keyframes ivr-page-out {
  to { opacity: 0; transform: translateY(-26px); }
}

@keyframes ivr-page-in {
  from { opacity: 0; transform: translateY(26px); }
}

::view-transition-old(root) {
  animation: ivr-page-out 240ms var(--ivr-ease) both;
}

::view-transition-new(root) {
  animation: ivr-page-in 360ms var(--ivr-ease-out) both;
}

/* Mouvement reduit : plus aucune animation, l'echange reste instantane. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}