/* Improvibes — design tokens, palette et familles actualisées le 28/10/2026.
   Source unique des valeurs utilisées par le brand board et la maquette Accueil.
   Les polices sont chargées depuis les fichiers fournis par Loïc. */

@font-face {
  font-family: "Instrument Sans";
  src: url("Fonts/Instrument_Sans/InstrumentSans-VariableFont_wdth,wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("Fonts/Instrument_Sans/InstrumentSans-Italic-VariableFont_wdth,wght.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Lemon Funky";
  src: url("Fonts/lemon_funky/Lemon Funky.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Accents confirmés par Loïc le 28/10/2026 : proposition plus vive validée, blanc du JPEG exclu. Fonds conservés. */
  --iv-black: #000000;
  --iv-dark: #14100d;
  --iv-ink: #1a120d;
  --iv-paper: #f2ede6;
  --iv-white: #ffffff;
  --iv-red: #F51F2A;
  --iv-orange: #FF641F;
  --iv-yellow: #FFCA28;
  --iv-orange-ink: var(--iv-ink); /* Petit texte : encre neutre. */
  --iv-ink-soft: #635a53;
  --iv-on-dark-muted: #c8c0b9;
  --iv-on-dark-soft: #a9a099;
  --iv-paper-muted: #d0c7bd;
  --iv-line-paper: #d7cfc5;
  --iv-line-dark: #35302c;
  --iv-line-dark-strong: #55504c;
  --iv-surface-dark-raised: #211d1a;
  --iv-focus: #FFCA28;

  /* Familles et niveaux. Lemon Funky est une voix d'affichage, pas une police de lecture. */
  --iv-font-display: "Lemon Funky", "Instrument Sans", sans-serif;
  --iv-font-text: "Instrument Sans", Arial, sans-serif;
  --iv-type-brand: clamp(2.75rem, 12vw, 11.5rem);
  --iv-type-h1: clamp(3.75rem, 8vw, 7.5rem);
  --iv-type-h2: clamp(2.5rem, 4.6vw, 4.5rem);
  --iv-type-h3: clamp(1.5rem, 2.15vw, 2rem);
  --iv-type-lead: clamp(1.15rem, 1.65vw, 1.4rem);
  --iv-type-body: 1rem;
  --iv-type-small: .875rem;
  --iv-type-label: .75rem;
  --iv-leading-display: .86;
  --iv-leading-heading: 1.04;
  --iv-leading-body: 1.55;

  /* Échelle 4/8 : garder ces pas, éviter les valeurs ad hoc. */
  --iv-space-1: .25rem;  /* 4 */
  --iv-space-2: .5rem;   /* 8 */
  --iv-space-3: .75rem;  /* 12 */
  --iv-space-4: 1rem;    /* 16 */
  --iv-space-5: 1.5rem;  /* 24 */
  --iv-space-6: 2rem;    /* 32 */
  --iv-space-7: 3rem;    /* 48 */
  --iv-space-8: 4rem;    /* 64 */
  --iv-space-9: 6rem;    /* 96 */
  --iv-space-10: 8rem;   /* 128 */

  /* Géométrie */
  --iv-radius-sm: .5rem;
  --iv-radius-button: .75rem;
  --iv-radius-card: 1rem;
  --iv-radius-panel: 1.375rem; /* 22 : proportion de la référence Vaultly */
  --iv-radius-pill: 999px;
  --iv-stroke: 1px;
  --iv-shell-gap: .375rem;
  --iv-container: 90rem;
  --iv-reading-width: 68ch;
  --iv-gutter: clamp(1rem, 3.2vw, 3rem);
  --iv-section-space: clamp(4rem, 8vw, 8rem);
  --iv-grid-gap: clamp(1rem, 1.8vw, 1.5rem);

  /* Contrôles : mêmes proportions et états sur toutes les pages. */
  --iv-control-height: 3rem;         /* 48 px */
  --iv-control-height-compact: 2.75rem; /* 44 px, navigation seulement */
  --iv-control-height-hero: 3.375rem;   /* 54 px, trois accès du hero */
  --iv-control-padding-inline: 1.125rem; /* 18 px */
  --iv-control-lift: 2px;

  /* Mouvement : une seule idée animée à la fois, jamais la lecture. */
  --iv-ease: cubic-bezier(.22, 1, .36, 1);
  --iv-duration-fast: 180ms;
  --iv-duration-base: 360ms;
  --iv-duration-reveal: 680ms;

  /* Grain : noir #000 + noise monochrome très fin. La tuile SVG est recréée ;
     le déplacement saccadé reprend le rythme et l'amplitude de la référence. */
  --iv-grain-opacity: .15;
  --iv-grain-opacity-card: .12;
  --iv-grain-opacity-media: .10;
  --iv-grain-tile: 32px;
  --iv-grain-cycle: 1s;
  --iv-grain-overscan: 100px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--iv-font-text); }
::selection { color: var(--iv-black); background: var(--iv-focus); }
:focus-visible { outline: 3px solid var(--iv-focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--iv-ink); }

.iv-button {
  display: inline-flex;
  min-height: var(--iv-control-height);
  align-items: center;
  justify-content: center;
  gap: var(--iv-space-3);
  padding: .75rem var(--iv-control-padding-inline);
  border: var(--iv-stroke) solid currentColor;
  border-radius: var(--iv-radius-button);
  font: 700 .875rem/1.2 var(--iv-font-text);
  text-align: center;
  text-decoration: none;
  transition: transform var(--iv-duration-fast) var(--iv-ease), background-color var(--iv-duration-fast), color var(--iv-duration-fast), border-color var(--iv-duration-fast);
}
.iv-button:is(a, button) { cursor: pointer; }
.iv-button:is(a, button):hover { transform: translateY(calc(0px - var(--iv-control-lift))); }
.iv-button:is(a, button):active { transform: translateY(0); }
.iv-button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.iv-button--compact { min-height: var(--iv-control-height-compact); }
.iv-button--orange { background: var(--iv-orange); border-color: var(--iv-orange); color: var(--iv-ink); }
.iv-button--ink { background: var(--iv-black); border-color: var(--iv-black); color: var(--iv-paper); }
.iv-button--paper { background: var(--iv-paper); border-color: var(--iv-paper); color: var(--iv-ink); }
.iv-button--outline-paper { background: transparent; border-color: var(--iv-paper); color: var(--iv-paper); }
.iv-button--outline-paper:is(a, button):hover { background: var(--iv-paper); color: var(--iv-ink); }
.iv-button--glass { background: rgba(0, 0, 0, .42); border-color: rgba(242, 237, 230, .82); color: var(--iv-paper); backdrop-filter: blur(8px); }
.iv-button--glass:is(a, button):hover { background: var(--iv-orange); border-color: var(--iv-orange); color: var(--iv-ink); }

.iv-grain { position: relative; isolation: isolate; overflow: hidden; overflow: clip; background-color: var(--iv-black); }
.iv-grain::after {
  content: "";
  position: absolute;
  inset: calc(0px - var(--iv-grain-overscan));
  z-index: 0;
  pointer-events: none;
  opacity: var(--iv-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='32' height='32' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: var(--iv-grain-tile) var(--iv-grain-tile);
  background-repeat: repeat;
  background-position: center;
  will-change: transform;
  animation: iv-grain-jitter var(--iv-grain-cycle) steps(2, end) infinite;
}
.iv-grain > * { position: relative; z-index: 1; }

@keyframes iv-grain-jitter {
  0%   { transform: translateY(47px); }
  10%  { transform: translate(-83px, 12px); }
  20%  { transform: translate(29px, -91px); }
  30%  { transform: translate(-57px, 68px); }
  40%  { transform: translate(74px, -36px); }
  50%  { transform: translate(-42px, -78px); }
  60%  { transform: translate(61px, 53px); }
  70%  { transform: translate(-19px, -65px); }
  80%  { transform: translate(88px, 24px); }
  90%  { transform: translate(-71px, -44px); }
  100% { transform: translate(35px, -17px); }
}

@media (hover: none) and (pointer: coarse) {
  .iv-grain::after { opacity: calc(var(--iv-grain-opacity) * .5); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .iv-grain::after { inset: 0; animation: none !important; transform: none; will-change: auto; }
}