/* ANAORA — site styles. Tokens from the Anaora design system, then site rules. */
/* colors.css */
/* Anaora palette — "Six tons, pas un de plus." Source: Palette & Typographie (ajusté). */
:root{
  /* Base — the six brand tones */
  --sauge:#87A39A;        /* La signature — le cœur, l'ADN, présent partout. Pont Yin/Yang. */
  --vert-foret:#1E2823;   /* La profondeur — le socle. Le Yin. */
  --argile:#B5887D;       /* La justesse — l'accent rare, Yang chaud. Use sparingly. */
  --gris-clair:#FAFAFA;   /* La présence — la lumière, le papier. Le Yang. */
  --brume:#E4EBE5;        /* Le calme — surface secondaire (light option). */
  --brume-2:#CDD6CD;      /* Le calme — surface secondaire (deeper option). */
  --encre:#343B36;        /* La clarté — le texte. Plus chaud que le noir. */

  /* Derived (functional only — never new brand colours) */
  --sauge-deep:#5E7B71;   /* sage text/links on light (AA on #FAFAFA) */
  --sauge-soft:#B7C8C1;   /* sage tint for dividers on forest */
  --argile-deep:#8E6257;  /* clay text on light (AA) */
  --encre-muted:#5F6862;  /* secondary text */
  --encre-subtle:#8A928C; /* tertiary text, placeholders (large/UI only) */
  --vert-foret-2:#2A3630; /* raised surface on forest */
  --danger:#9C4F45;       /* errors — a clay-family red, never pure red */

  /* Semantic aliases */
  --bg-page:var(--gris-clair);
  --bg-inverse:var(--vert-foret);
  --surface-card:#FFFFFF;
  --surface-muted:var(--brume);
  --surface-muted-2:var(--brume-2);
  --surface-brand:var(--sauge);
  --text-body:var(--encre);
  --text-heading:var(--vert-foret);
  --text-muted:var(--encre-muted);
  --text-subtle:var(--encre-subtle);
  --text-inverse:var(--gris-clair);
  --text-brand:var(--sauge-deep);
  --text-accent:var(--argile-deep);
  --link:var(--sauge-deep);
  --link-hover:var(--vert-foret);
  --border-hairline:var(--brume-2);
  --border-strong:var(--encre);
  --border-inverse:rgba(250,250,250,.18);
  --focus-ring:var(--sauge);
  --action-primary-bg:var(--vert-foret);
  --action-primary-fg:var(--gris-clair);
  --action-primary-bg-hover:var(--vert-foret-2);
  --action-accent:var(--argile);
}

/* typography.css */
/* Trois voix, trois rôles. */
:root{
  --font-identity:"Tenor Sans","Optima","Gill Sans",sans-serif;          /* 01 · Identité & présence — logotype, intertitres, CAPITALES aérées */
  --font-expression:"Playfair Display","Didot","Georgia",serif;          /* 02 · Expression & aplomb — grandes affirmations, italiques couture */
  --font-clarity:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;     /* 03 · Clarté & communication — texte courant */

  --font-display:var(--font-expression);
  --font-heading:var(--font-expression);
  --font-label:var(--font-identity);
  --font-body:var(--font-clarity);

  /* Scale (px) */
  --fs-display-xl:88px;
  --fs-display:64px;
  --fs-h1:48px;
  --fs-h2:36px;
  --fs-h3:26px;
  --fs-h4:20px;
  --fs-lead:20px;
  --fs-body:17px;
  --fs-small:14px;
  --fs-label:12px;
  --fs-micro:11px;

  --lh-tight:1.08; /* @kind other */
  --lh-heading:1.18; /* @kind other */
  --lh-body:1.6; /* @kind other */
  --lh-relaxed:1.75; /* @kind other */

  --fw-light:300; /* @kind other */
  --fw-regular:400; /* @kind other */
  --fw-medium:500; /* @kind other */
  --fw-semibold:600; /* @kind other */

  /* Tenor Sans is always set in spaced capitals */
  --tracking-logo:0.42em; /* @kind other */
  --tracking-eyebrow:0.32em; /* @kind other */
  --tracking-label:0.2em; /* @kind other */
  --tracking-display:-0.01em; /* @kind other */
  --tracking-body:0; /* @kind other */
}

/* spacing.css */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:144px;

  --container-max:1200px; /* @kind spacing */
  --container-text:680px; /* @kind spacing */
  --gutter:clamp(20px,5vw,64px); /* @kind spacing */
  --section-y:clamp(72px,10vw,144px); /* @kind spacing */
}

/* effects.css */
:root{
  /* Corners — couture, near-square. Pills only for tags. */
  --radius-0:0;
  --radius-sm:2px;
  --radius-md:4px;
  --radius-pill:999px;

  --border-w:1px; /* @kind other */

  /* Shadows — rare, soft, green-tinted. Depth comes from tone, not shadow. */
  --shadow-sm:0 1px 2px rgba(30,40,35,.06);
  --shadow-md:0 8px 24px -12px rgba(30,40,35,.18);
  --shadow-lg:0 24px 60px -24px rgba(30,40,35,.28);

  --overlay-scrim:rgba(30,40,35,.55); /* @kind color */

  /* Motion — calm, unhurried fades. No bounce. */
  --ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
  --dur-fast:160ms; /* @kind other */
  --dur-base:260ms; /* @kind other */
  --dur-slow:520ms; /* @kind other */
}

/* base.css */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--bg-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body)}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--link-hover)}
::selection{background:var(--brume-2);color:var(--vert-foret)}
:focus-visible{outline:1px solid var(--focus-ring);outline-offset:3px}

/* Site base */
html{scroll-behavior:smooth}
*{font-synthesis:none}
body{margin:0;background:#FAFAFA;color:#343B36;-webkit-font-smoothing:antialiased}
a{color:#5E7B71;text-decoration:none}
a:hover{color:#1E2823}
a:focus-visible,button:focus-visible{outline:1px solid #87A39A;outline-offset:3px}
[hidden]{display:none !important}
:root{--r-stickyPos:static;--r-screenH:auto;--r-screenFull:auto;--r-secPad:var(--section-y) var(--gutter);--r-colGap:48px;--r-pathDir:column;--r-pathRot:rotate(90deg);--r-boxFlex:none}
@media (min-width:720px){:root{--r-pathDir:row;--r-pathRot:none;--r-boxFlex:0 1 260px}}
@media (min-width:1080px){:root{--r-stickyPos:sticky;--r-screenH:calc(100svh - 133px);--r-screenFull:calc(100svh - 76px);--r-secPad:0 var(--gutter);--r-colGap:0px}}
[data-if="desktop"]{display:none !important}
@media (min-width:1080px){[data-if="desktop"]{display:contents !important}[data-if="mobile"],[data-if="showMobileMenu"]{display:none !important}}
button:disabled{opacity:.4;cursor:default}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}

/* Hover / focus states */
.h1:hover{color: var(--sauge-deep) !important}
.h2:hover{background: var(--vert-foret-2) !important; color: var(--gris-clair) !important}
.h3:hover{transform: translateY(-2px) !important; box-shadow: var(--shadow-md) !important; color: var(--encre) !important}
.h4:hover{color: var(--vert-foret) !important}
.h5:hover{color: var(--sauge-soft) !important}
.h6:hover{background: var(--vert-foret-2) !important; color: var(--gris-clair) !important; transform: translateY(-2px) !important}
.h7:hover{background: var(--brume) !important; color: var(--vert-foret) !important}
.f8:focus{border-bottom-color: var(--vert-foret) !important}
.h9:hover{background: var(--vert-foret-2) !important}
.h10:hover{background: #FFFFFF !important; color: var(--vert-foret) !important}