:root {
  /* Typogrophy */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-size: 16px;
  --line-height: 1.55;
  
  /* Layout */
  --viewport: 110ch;       /* max-width of viewport */

  /* Colours */
  --accent-main: #C9A24D;  /* Patinated Gold */
  --accent-muted: #A9863F; /* Old Gold */

  --second-main: #3A4656;  /* Slate Ink */
  --second-muted: #6B7686; /* Soft Slate */

  --dark-main: #0E0F10;    /* Ink Black */
  --dark-muted: #3A3D40;   /* Soft Ink */
  --dark-menu: #1E1E1E;    /* Ink Black */

  --light-main: #F6F2EB;   /* Warm Ivory */
  --light-muted: #E2DDD3;  /* Pale Stone */
  --light-menu: #FFFFFF;   /* Pure White */

  --text-main: #0E0F10;    /* Ink Black */
  --text-muted: #3A3D40;   /* Soft Ink */
  --text-alt: #FFFFFF;     /* Pure White */

  --success: #5FAE93;      /* Verdigris */
  --information: #6F93C6;  /* Calm Azure */
  --warning: #E0B45B;      /* Soft Amber */
  --error: #C66B6B;        /* Muted Red */

  --background: var(--light-main);

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
  --border: 1px solid var(--light-muted);
  --hover-focus: color-mix(in srgb, var(--accent-main) 10%, transparent);
  
}

*{ box-sizing: border-box; }
img{ max-width: 100%; height: auto; }
body {margin: 0; background: var(--background); }

/* Accessibilité */
:focus-visible {
  outline: 1px solid var(--accent-main);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Chevron SVG commun */
.chevron {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--ptah-chevron);
  mask-image: var(--ptah-chevron);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.chevron-left {
  transform: rotate(90deg);
}

.chevron-right {
  transform: rotate(-90deg);
}

.chevron-down {
  transform: rotate(0deg);
}

.chevron-up {
  transform: rotate(180deg);
}

/* Alerts */
.alert {
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  font-weight: 500;
}

.alert-success {
  background-color: var(--success);
  color: var(--text-alt);
  border: 1px solid var(--success);
}

.alert-error {
  background-color: var(--error);
  color: var(--text-alt);
  border: 1px solid var(--error);
}