/* ============================================================
   VARIABLES & COLOR PALETTE
   ============================================================ */

:root {
  /* --- Primary & Secondary Colors --- */
  --ink: #0D1F2D;
  --teal: #2B898A;
  --teal-light: #3DBDBE;
  --azure: #4BAED4;
  --azure-pale: #B8E4F5;
  --sky: #E0F5FC;
  --sky-deep: #C5EDFB;
  --warm: #F0A868;
  --warm-pale: #FDE8D0;

  /* --- Legacy / Compatibility --- */
  --navy: #0D1F2D;
  --navy-d: #0D1F2D;
  --teal-l: #3DBDBE;
  --teal-pale: #B8E4F5;

  /* --- Sky Palette (updated) --- */
  --sky0: #4BAED4;
  --sky1: #B8E4F5;
  --sky2: #C5EDFB;
  --sky3: #E0F5FC;
  --sky-dark: #3B98C5;

  /* --- Neutral --- */
  --white: #FFFFFF;

  /* --- Accent Colors --- */
  --coral: #F0A868;
  --coral-s: #F5B87F;
  --green: #52B788;

  /* --- Typography --- */
  --txt: #0D1F2D;
  --txt2: #3D6170;
  --txt3: #7AA8B8;
  --txt-secondary: #3D6170;

  /* --- Shadows --- */
  --card-shadow: 0 8px 32px rgba(13,31,45,.12);
  --float-shadow: 0 24px 64px rgba(13,31,45,.22);

  /* --- Clay Morphism Effects --- */
  --clay-teal: inset 3px 3px 9px rgb(110,195,197), inset -3px -3px 9px rgb(20,64,65), 0 8px 28px rgba(43,137,138,.45);
  --clay-teal-hover: inset 3px 3px 9px rgb(110,195,197), inset -3px -3px 9px rgb(20,64,65), 0 14px 36px rgba(43,137,138,.52);

  --clay-navy: inset 3px 3px 9px rgb(100,140,155), inset -3px -3px 9px rgb(5,15,22), 0 8px 28px rgba(13,31,45,.45);
  --clay-navy-hover: inset 3px 3px 9px rgb(100,140,155), inset -3px -3px 9px rgb(5,15,22), 0 14px 36px rgba(13,31,45,.52);

  --clay-white: inset 3px 3px 9px rgb(244,251,254), inset -3px -3px 9px rgb(166,174,178), 0 8px 28px rgba(142,149,152,.3);
  --clay-white-hover: inset 3px 3px 9px rgb(244,251,254), inset -3px -3px 9px rgb(166,174,178), 0 16px 40px rgba(142,149,152,.38);

  --clay-pure: inset 3px 3px 9px rgb(255,255,255), inset -3px -3px 9px rgb(179,179,179), 0 8px 28px rgba(153,153,153,.28);
  --clay-pure-hover: inset 3px 3px 9px rgb(255,255,255), inset -3px -3px 9px rgb(179,179,179), 0 16px 40px rgba(153,153,153,.36);

  --clay-coral: inset 3px 3px 9px rgb(245,200,160), inset -3px -3px 9px rgb(200,140,80), 0 8px 28px rgba(240,168,104,.4);
  --clay-green: inset 3px 3px 9px rgb(151,212,184), inset -3px -3px 9px rgb(57,128,95), 0 8px 28px rgba(49,110,82,.4);
  --clay-float: inset 2px 2px 6px rgb(255,255,255), inset -2px -2px 6px rgb(179,179,179), 0 10px 30px rgba(13,31,45,.18);

  /* --- Claymorphism Card (établissements) --- */
  --muvr-bg: #F5F1EE;
  --shadow-light: #FFFFFF;
  --shadow-dark: #BEB8B3;
  --clay-inner-light: rgba(255,255,255,0.9);
  --clay-inner-dark: rgba(190,184,179,0.6);
}

/* ============================================================
   RESET & BASE STYLES
   ============================================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Nunito', sans-serif;
  background: var(--sky3);
  color: var(--txt);
  overflow-x: hidden;
}

#page-part {
  overflow-x: hidden;
  width: 100%;
}