/* ================================================================
   COMPOSIA MANUFACTURE — DESIGN SYSTEM v1.0
   ================================================================

   INDEX
   ─────
   00. Google Fonts import
   01. CSS Tokens — couleurs
   02. CSS Tokens — typographie
   03. CSS Tokens — espacements (base 8 px)
   04. CSS Tokens — grille
   05. CSS Tokens — rayons de bordure
   06. CSS Tokens — ombres
   07. CSS Tokens — animations & easing
   08. Reset & base
   09. Typographie — styles appliqués
   10. Grille responsive
   11. Composant — Boutons
   12. Composant — Cartes
   13. Composant — Formulaires
   14. Composant — Icônes
   15. Composant — Liens
   16. Composant — Badge / Label
   17. Composant — Divider
   18. Animations globales
   19. États utilitaires
   20. Classes utilitaires
   21. Accessibilité & focus

   Convention de nommage
   ─────────────────────
   Tokens      : --{categorie}-{propriete}-{echelle}
                 ex. --color-ink-100, --space-4, --radius-lg
   Blocs BEM   : .c-{bloc}__element--modifier
                 ex. .c-btn--primary, .c-card__title
   États       : .is-{etat}   ex. .is-visible, .is-loading
   Utilitaires : .u-{prop}    ex. .u-text-center

   ================================================================ */


/* ----------------------------------------------------------------
   00. GOOGLE FONTS
   ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');


/* ================================================================
   01. TOKENS — COULEURS
   ================================================================ */
:root {

  /* ── Encre (noir → gris foncé) ────────────────────────────── */
  --color-ink-100 : #111111;   /* Titre principal, fond dark */
  --color-ink-90  : #1E1E1E;
  --color-ink-80  : #2E2E2E;   /* Fond carte dark */
  --color-ink-60  : #555555;   /* Texte corps secondaire */
  --color-ink-40  : #888888;   /* Placeholder, désactivé */
  --color-ink-20  : #BBBBBB;   /* Séparateurs */
  --color-ink-10  : #E2E2E2;   /* Bordures légères */
  --color-ink-5   : #F0F0F0;   /* Fond hover très discret */

  /* ── Papier (blanc → crème) ───────────────────────────────── */
  --color-paper-100: #FFFFFF;
  --color-paper-98 : #F9F9F9;
  --color-paper-95 : #F5F5F5;  /* Fond section alternée */
  --color-paper-90 : #EBEBEB;  /* Fond input dark-inverted */

  /* ── Cuivre (accent principal) ────────────────────────────── */
  --color-copper-100 : #C96E2A;  /* CTA, accent principal */
  --color-copper-120 : #A85820;  /* Hover copper */
  --color-copper-80  : #D4895A;  /* Cuivre intermédiaire */
  --color-copper-60  : #E0A87E;  /* Cuivre clair */
  --color-copper-20  : #F5E4D6;  /* Fond copper très clair */

  /* ── Sémantiques ──────────────────────────────────────────── */
  --color-success   : #2A7D5B;
  --color-success-bg: #EAF5F0;
  --color-error     : #C94040;
  --color-error-bg  : #FAEAEA;
  --color-warning   : #C96E2A;
  --color-warning-bg: #FEF3EA;

  /* ── Aliases sémantiques (usage courant) ──────────────────── */
  --color-bg       : var(--color-paper-100);
  --color-bg-alt   : var(--color-paper-95);
  --color-bg-dark  : var(--color-ink-100);
  --color-text     : var(--color-ink-100);
  --color-text-mute: var(--color-ink-60);
  --color-text-inv : var(--color-paper-100);
  --color-accent   : var(--color-copper-100);
  --color-border   : var(--color-ink-10);
  --color-border-dark: rgba(255,255,255,.1);

}


/* ================================================================
   02. TOKENS — TYPOGRAPHIE
   ================================================================ */
:root {

  /* ── Familles ─────────────────────────────────────────────── */
  --font-display : 'Manrope', 'Inter', system-ui, sans-serif;
  --font-body    : 'Inter', system-ui, sans-serif;
  --font-mono    : 'JetBrains Mono', 'Courier New', monospace;

  /* ── Grammage (weight) ────────────────────────────────────── */
  --fw-light    : 300;
  --fw-regular  : 400;
  --fw-medium   : 500;
  --fw-semibold : 600;
  --fw-bold     : 700;
  --fw-extrabold: 800;

  /* ── Échelle de taille (fluide avec clamp) ────────────────── */
  --text-xs  : 0.75rem;                              /* 12 px */
  --text-sm  : 0.875rem;                             /* 14 px */
  --text-md  : 1rem;                                 /* 16 px */
  --text-lg  : 1.125rem;                             /* 18 px */
  --text-xl  : 1.25rem;                              /* 20 px */
  --text-2xl : 1.5rem;                               /* 24 px */
  --text-3xl : clamp(1.5rem,  2.5vw, 2rem);         /* 24-32 px */
  --text-4xl : clamp(1.75rem, 3vw,   2.5rem);       /* 28-40 px */
  --text-5xl : clamp(2rem,    4vw,   3.25rem);       /* 32-52 px */
  --text-6xl : clamp(2.5rem,  5.5vw, 4.5rem);       /* 40-72 px */
  --text-7xl : clamp(3rem,    7vw,   6rem);          /* 48-96 px */
  --text-8xl : clamp(3.5rem,  9vw,   8rem);          /* 56-128 px */

  /* ── Interlignage (line-height) ───────────────────────────── */
  --lh-tight  : 1.05;   /* Titres display */
  --lh-snug   : 1.2;    /* Titres section */
  --lh-normal : 1.5;    /* Corps compact */
  --lh-relaxed: 1.7;    /* Corps long */
  --lh-loose  : 1.9;    /* Légendes, petits textes */

  /* ── Espacement de lettres (tracking) ────────────────────── */
  --ls-tighter: -0.04em;  /* Titres display */
  --ls-tight  : -0.025em; /* Titres section */
  --ls-normal :  0;
  --ls-wide   :  0.04em;  /* Labels, eyebrows */
  --ls-wider  :  0.1em;   /* Acronymes, uppercase */
  --ls-widest :  0.18em;  /* Très petits labels */

}


/* ================================================================
   03. TOKENS — ESPACEMENTS (base 8 px)
   ================================================================ */
:root {

  --space-0  :  0;
  --space-px :  1px;
  --space-0-5:  0.25rem;  /*  4 px */
  --space-1  :  0.5rem;   /*  8 px  ← base */
  --space-2  :  1rem;     /* 16 px */
  --space-3  :  1.5rem;   /* 24 px */
  --space-4  :  2rem;     /* 32 px */
  --space-5  :  2.5rem;   /* 40 px */
  --space-6  :  3rem;     /* 48 px */
  --space-8  :  4rem;     /* 64 px */
  --space-10 :  5rem;     /* 80 px */
  --space-12 :  6rem;     /* 96 px */
  --space-16 :  8rem;     /* 128 px */
  --space-20 : 10rem;     /* 160 px */
  --space-24 : 12rem;     /* 192 px */

  /* Espacements de sections (fluides) */
  --section-y-sm : clamp(var(--space-8),  8vw, var(--space-16));
  --section-y-md : clamp(var(--space-10), 10vw, var(--space-20));
  --section-y-lg : clamp(var(--space-12), 12vw, var(--space-24));

}


/* ================================================================
   04. TOKENS — GRILLE
   ================================================================ */
:root {

  --grid-cols      : 12;
  --grid-gap-sm    : var(--space-3);    /* 24 px — mobile */
  --grid-gap-md    : var(--space-4);    /* 32 px — tablette */
  --grid-gap-lg    : var(--space-5);    /* 40 px — desktop */
  --grid-gap       : var(--grid-gap-sm);  /* valeur courante, écrasée via media */

  --container-sm   : 640px;
  --container-md   : 768px;
  --container-lg   : 1024px;
  --container-xl   : 1280px;
  --container-2xl  : 1400px;
  --container-max  : var(--container-2xl);

  --gutter         : clamp(1.25rem, 5vw, 4rem);

  /* Breakpoints (référence — ne peuvent pas être utilisés dans clamp) */
  /* --bp-sm: 640px | --bp-md: 768px | --bp-lg: 1024px | --bp-xl: 1280px */

}

@media (min-width: 768px)  { :root { --grid-gap: var(--grid-gap-md); } }
@media (min-width: 1024px) { :root { --grid-gap: var(--grid-gap-lg); } }


/* ================================================================
   05. TOKENS — RAYONS DE BORDURE
   ================================================================ */
:root {

  --radius-none  : 0;
  --radius-xs    : 4px;
  --radius-sm    : 6px;
  --radius-md    : 10px;
  --radius-lg    : 16px;
  --radius-xl    : 24px;
  --radius-2xl   : 32px;
  --radius-3xl   : 48px;
  --radius-full  : 9999px;  /* Pilules, cercles */

}


/* ================================================================
   06. TOKENS — OMBRES (très discrètes, premium)
   ================================================================ */
:root {

  /* Teinte: noire très légère — adaptée au fond blanc/clair */
  --shadow-xs : 0 1px 3px  rgba(17,17,17,.05);
  --shadow-sm : 0 2px 8px  rgba(17,17,17,.07);
  --shadow-md : 0 4px 16px rgba(17,17,17,.09);
  --shadow-lg : 0 8px 32px rgba(17,17,17,.10);
  --shadow-xl : 0 16px 56px rgba(17,17,17,.12);
  --shadow-2xl: 0 24px 80px rgba(17,17,17,.15);

  /* Copper glow (pour boutons CTA uniquement) */
  --shadow-copper-sm: 0 4px 14px rgba(201,110,42,.25);
  --shadow-copper-md: 0 6px 24px rgba(201,110,42,.35);

  /* Focus ring (accessibilité) */
  --ring-focus: 0 0 0 3px rgba(201,110,42,.45);

}


/* ================================================================
   07. TOKENS — ANIMATIONS & EASING
   ================================================================ */
:root {

  /* ── Durées ───────────────────────────────────────────────── */
  --dur-instant : 80ms;
  --dur-fast    : 150ms;
  --dur-base    : 250ms;
  --dur-slow    : 400ms;
  --dur-slower  : 650ms;
  --dur-slowest : 900ms;

  /* ── Courbes de Bézier ────────────────────────────────────── */
  --ease-linear  : linear;
  --ease-in      : cubic-bezier(0.4, 0, 1, 1);
  --ease-out     : cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out  : cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring  : cubic-bezier(0.22, 1, 0.36, 1);  /* Rebond naturel */
  --ease-apple   : cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* Fluide premium */

  /* ── Transitions composées ────────────────────────────────── */
  --transition-color     : color var(--dur-fast) var(--ease-out),
                           background-color var(--dur-fast) var(--ease-out),
                           border-color var(--dur-fast) var(--ease-out);
  --transition-transform : transform var(--dur-base) var(--ease-spring);
  --transition-shadow    : box-shadow var(--dur-base) var(--ease-out);
  --transition-opacity   : opacity var(--dur-slow) var(--ease-out);
  --transition-all       : all var(--dur-base) var(--ease-apple);

}


/* ================================================================
   08. RESET & BASE
   ================================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a    { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }
table { border-collapse: collapse; }


/* ================================================================
   09. TYPOGRAPHIE — STYLES APPLIQUÉS
   ================================================================ */

/* ── H1 — Hero display ────────────────────────────────────── */
.t-h1 {
  font-family    : var(--font-display);
  font-size      : var(--text-8xl);
  font-weight    : var(--fw-extrabold);
  line-height    : var(--lh-tight);
  letter-spacing : var(--ls-tighter);
  color          : var(--color-text);
}

/* ── H2 — Titre de section ────────────────────────────────── */
.t-h2 {
  font-family    : var(--font-display);
  font-size      : var(--text-6xl);
  font-weight    : var(--fw-extrabold);
  line-height    : var(--lh-tight);
  letter-spacing : var(--ls-tight);
}

/* ── H3 — Sous-titre / Nom de carte ──────────────────────── */
.t-h3 {
  font-family    : var(--font-display);
  font-size      : var(--text-2xl);
  font-weight    : var(--fw-bold);
  line-height    : var(--lh-snug);
  letter-spacing : var(--ls-tight);
}

/* ── H4 — Titre tertiaire ─────────────────────────────────── */
.t-h4 {
  font-family    : var(--font-display);
  font-size      : var(--text-xl);
  font-weight    : var(--fw-semibold);
  line-height    : var(--lh-snug);
  letter-spacing : -0.01em;
}

/* ── Lead ─────────────────────────────────────────────────── */
.t-lead {
  font-family    : var(--font-body);
  font-size      : clamp(var(--text-lg), 2vw, var(--text-2xl));
  font-weight    : var(--fw-medium);
  line-height    : var(--lh-normal);
  color          : var(--color-text-mute);
}

/* ── Corps ────────────────────────────────────────────────── */
.t-body {
  font-family : var(--font-body);
  font-size   : var(--text-md);
  line-height : var(--lh-relaxed);
  color       : var(--color-text-mute);
}

/* ── Petit / Caption ──────────────────────────────────────── */
.t-sm {
  font-size   : var(--text-sm);
  line-height : var(--lh-loose);
  color       : var(--color-ink-40);
}

.t-xs {
  font-size   : var(--text-xs);
  line-height : var(--lh-loose);
  color       : var(--color-ink-40);
}

/* ── Eyebrow / Label ──────────────────────────────────────── */
.t-eyebrow {
  font-family    : var(--font-body);
  font-size      : var(--text-xs);
  font-weight    : var(--fw-semibold);
  letter-spacing : var(--ls-widest);
  text-transform : uppercase;
  color          : var(--color-accent);
}

/* ── Mono ─────────────────────────────────────────────────── */
.t-mono {
  font-family : var(--font-mono);
  font-size   : var(--text-sm);
}

/* HTML natif — héritage pour les pages sans classes */
h1 { font-family: var(--font-display); font-size: var(--text-7xl); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); }
h2 { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-bold);      line-height: var(--lh-snug);  letter-spacing: -0.02em; }
h4 { font-family: var(--font-display); font-size: var(--text-xl);  font-weight: var(--fw-semibold);  line-height: var(--lh-snug); }
p  { line-height: var(--lh-relaxed); }


/* ================================================================
   10. GRILLE RESPONSIVE
   ================================================================ */

/* ── Conteneur ────────────────────────────────────────────── */
.container {
  width     : 100%;
  max-width : var(--container-max);
  margin    : 0 auto;
  padding   : 0 var(--gutter);
}

.container--sm  { max-width: var(--container-sm); }
.container--md  { max-width: var(--container-md); }
.container--lg  { max-width: var(--container-lg); }
.container--xl  { max-width: var(--container-xl); }

/* ── Grille 12 colonnes ───────────────────────────────────── */
.grid {
  display               : grid;
  grid-template-columns : repeat(var(--grid-cols), 1fr);
  gap                   : var(--grid-gap);
}

/* ── Colonnes ─────────────────────────────────────────────── */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Par défaut (mobile): tout sur 12 colonnes */
[class^="col-"] { grid-column: span 12; }

/* Tablette ≥ 768px */
@media (min-width: 768px) {
  .md\:col-1  { grid-column: span 1; }
  .md\:col-2  { grid-column: span 2; }
  .md\:col-3  { grid-column: span 3; }
  .md\:col-4  { grid-column: span 4; }
  .md\:col-5  { grid-column: span 5; }
  .md\:col-6  { grid-column: span 6; }
  .md\:col-7  { grid-column: span 7; }
  .md\:col-8  { grid-column: span 8; }
  .md\:col-9  { grid-column: span 9; }
  .md\:col-10 { grid-column: span 10; }
  .md\:col-11 { grid-column: span 11; }
  .md\:col-12 { grid-column: span 12; }
}

/* Desktop ≥ 1024px */
@media (min-width: 1024px) {
  .lg\:col-1  { grid-column: span 1; }
  .lg\:col-2  { grid-column: span 2; }
  .lg\:col-3  { grid-column: span 3; }
  .lg\:col-4  { grid-column: span 4; }
  .lg\:col-5  { grid-column: span 5; }
  .lg\:col-6  { grid-column: span 6; }
  .lg\:col-7  { grid-column: span 7; }
  .lg\:col-8  { grid-column: span 8; }
  .lg\:col-9  { grid-column: span 9; }
  .lg\:col-10 { grid-column: span 10; }
  .lg\:col-11 { grid-column: span 11; }
  .lg\:col-12 { grid-column: span 12; }
}

/* ── Flex helpers ─────────────────────────────────────────── */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center{ align-items: center; }
.items-end   { align-items: flex-end; }
.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between{ justify-content: space-between; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }


/* ================================================================
   11. COMPOSANT — BOUTONS (.c-btn)
   ================================================================ */

/* ── Base ─────────────────────────────────────────────────── */
.c-btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--space-1);
  padding        : 0.75rem 1.75rem;
  font-family    : var(--font-display);
  font-size      : var(--text-sm);
  font-weight    : var(--fw-semibold);
  letter-spacing : 0.01em;
  line-height    : 1;
  border-radius  : var(--radius-full);
  border         : 1.5px solid transparent;
  cursor         : pointer;
  white-space    : nowrap;
  user-select    : none;
  transition     : var(--transition-color), var(--transition-transform), var(--transition-shadow);
  text-decoration: none;
}

.c-btn:hover  { transform: translateY(-1px); }
.c-btn:active { transform: translateY(0); }

.c-btn:focus-visible {
  outline    : none;
  box-shadow : var(--ring-focus);
}

/* ── Tailles ──────────────────────────────────────────────── */
.c-btn--sm {
  padding    : 0.5rem 1.25rem;
  font-size  : var(--text-xs);
}

.c-btn--md {
  padding    : 0.75rem 1.75rem;
  font-size  : var(--text-sm);
}

.c-btn--lg {
  padding    : 1rem 2.25rem;
  font-size  : var(--text-md);
}

.c-btn--xl {
  padding    : 1.15rem 2.75rem;
  font-size  : var(--text-lg);
}

.c-btn--full { width: 100%; }

/* ── Variantes ────────────────────────────────────────────── */

/* Primary — cuivre */
.c-btn--primary {
  background   : var(--color-copper-100);
  color        : var(--color-paper-100);
  border-color : var(--color-copper-100);
  box-shadow   : var(--shadow-copper-sm);
}
.c-btn--primary:hover {
  background : var(--color-copper-120);
  border-color: var(--color-copper-120);
  box-shadow  : var(--shadow-copper-md);
}

/* Secondary — noir */
.c-btn--secondary {
  background   : var(--color-ink-100);
  color        : var(--color-paper-100);
  border-color : var(--color-ink-100);
}
.c-btn--secondary:hover {
  background  : var(--color-ink-80);
  border-color: var(--color-ink-80);
}

/* Ghost — transparent + bordure */
.c-btn--ghost {
  background   : transparent;
  color        : var(--color-paper-100);
  border-color : rgba(255,255,255,.3);
}
.c-btn--ghost:hover {
  border-color : rgba(255,255,255,.65);
  background   : rgba(255,255,255,.07);
}

/* Ghost dark (sur fond blanc) */
.c-btn--ghost-dark {
  background   : transparent;
  color        : var(--color-ink-100);
  border-color : rgba(17,17,17,.2);
}
.c-btn--ghost-dark:hover {
  border-color : var(--color-ink-100);
  background   : var(--color-ink-5);
}

/* Text — sans bordure */
.c-btn--text {
  background   : transparent;
  color        : var(--color-accent);
  border-color : transparent;
  padding-left : 0;
  padding-right: 0;
}
.c-btn--text:hover {
  color        : var(--color-copper-120);
  transform    : translateX(2px);
}
.c-btn--text:active { transform: translateX(0); }

/* ── État disabled ────────────────────────────────────────── */
.c-btn:disabled,
.c-btn.is-disabled {
  opacity       : 0.4;
  cursor        : not-allowed;
  pointer-events: none;
  transform     : none;
  box-shadow    : none;
}

/* ── État loading ─────────────────────────────────────────── */
.c-btn.is-loading {
  cursor        : wait;
  pointer-events: none;
  position      : relative;
  color         : transparent;
}
.c-btn.is-loading::after {
  content       : '';
  position      : absolute;
  width         : 1em; height: 1em;
  border        : 2px solid currentColor;
  border-top-color: transparent;
  border-radius : 50%;
  animation     : spin var(--dur-slow) linear infinite;
  color         : var(--color-paper-100);
}


/* ================================================================
   12. COMPOSANT — CARTES (.c-card)
   ================================================================ */

/* ── Base ─────────────────────────────────────────────────── */
.c-card {
  display       : flex;
  flex-direction: column;
  border-radius : var(--radius-xl);
  overflow      : hidden;
  background    : var(--color-bg);
  border        : 1px solid var(--color-border);
  transition    : transform var(--dur-slow) var(--ease-spring),
                  box-shadow var(--dur-slow) var(--ease-out);
}

.c-card:hover {
  transform  : translateY(-4px);
  box-shadow : var(--shadow-lg);
}

/* ── Zones ────────────────────────────────────────────────── */
.c-card__media {
  position    : relative;
  overflow    : hidden;
  aspect-ratio: 16/10;
  flex-shrink : 0;
}

.c-card__media img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  transition: transform var(--dur-slowest) var(--ease-apple);
}

.c-card:hover .c-card__media img { transform: scale(1.05); }

.c-card__body {
  display       : flex;
  flex-direction: column;
  padding       : var(--space-4) var(--space-5);
  flex          : 1;
}

.c-card__label {
  font-size      : var(--text-xs);
  font-weight    : var(--fw-semibold);
  letter-spacing : var(--ls-wider);
  text-transform : uppercase;
  color          : var(--color-accent);
  margin-bottom  : var(--space-1);
}

.c-card__title {
  font-family    : var(--font-display);
  font-size      : var(--text-xl);
  font-weight    : var(--fw-bold);
  letter-spacing : -0.02em;
  line-height    : var(--lh-snug);
  margin-bottom  : var(--space-2);
}

.c-card__desc {
  font-size  : var(--text-sm);
  line-height: var(--lh-relaxed);
  color      : var(--color-text-mute);
  flex       : 1;
}

.c-card__footer {
  margin-top  : var(--space-4);
  padding-top : var(--space-3);
  border-top  : 1px solid var(--color-border);
  display     : flex;
  align-items : center;
  justify-content: space-between;
}

/* ── Variante dark ────────────────────────────────────────── */
.c-card--dark {
  background : var(--color-ink-80);
  border-color: var(--color-border-dark);
}

.c-card--dark .c-card__title  { color: var(--color-paper-100); }
.c-card--dark .c-card__desc   { color: rgba(255,255,255,.5); }
.c-card--dark .c-card__footer { border-color: var(--color-border-dark); }

/* ── Variante feature (grande, sans image) ────────────────── */
.c-card--feature {
  padding    : var(--space-8);
  border-radius: var(--radius-2xl);
}

.c-card--feature .c-card__body {
  padding: 0;
}

/* ── Variante stat ────────────────────────────────────────── */
.c-card--stat {
  align-items : flex-start;
  padding     : var(--space-6);
  border-radius: var(--radius-xl);
}

.c-card--stat .c-card__num {
  font-family    : var(--font-display);
  font-size      : var(--text-5xl);
  font-weight    : var(--fw-extrabold);
  letter-spacing : var(--ls-tighter);
  color          : var(--color-accent);
  line-height    : 1;
  margin-bottom  : var(--space-1);
}

.c-card--stat .c-card__body { padding: 0; }


/* ================================================================
   13. COMPOSANT — FORMULAIRES (.c-form-*)
   ================================================================ */

/* ── Groupe ───────────────────────────────────────────────── */
.c-form-group {
  display       : flex;
  flex-direction: column;
  gap           : 0.4rem;
}

/* ── Label ────────────────────────────────────────────────── */
.c-form-label {
  font-size      : var(--text-xs);
  font-weight    : var(--fw-semibold);
  letter-spacing : var(--ls-wider);
  text-transform : uppercase;
  color          : var(--color-ink-60);
}

/* ── Champs de saisie ─────────────────────────────────────── */
.c-form-input,
.c-form-select,
.c-form-textarea {
  width         : 100%;
  padding       : 0.85rem 1.1rem;
  font-family   : var(--font-body);
  font-size     : var(--text-md);
  color         : var(--color-text);
  background    : var(--color-bg);
  border        : 1.5px solid var(--color-border);
  border-radius : var(--radius-md);
  transition    : border-color var(--dur-fast) var(--ease-out),
                  background   var(--dur-fast) var(--ease-out),
                  box-shadow   var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance    : none;
}

.c-form-input::placeholder,
.c-form-textarea::placeholder {
  color: var(--color-ink-40);
}

/* Focus */
.c-form-input:focus,
.c-form-select:focus,
.c-form-textarea:focus {
  outline      : none;
  border-color : var(--color-accent);
  box-shadow   : var(--ring-focus);
  background   : var(--color-paper-100);
}

/* Erreur */
.c-form-input.is-error,
.c-form-select.is-error,
.c-form-textarea.is-error {
  border-color : var(--color-error);
}

.c-form-input.is-error:focus,
.c-form-select.is-error:focus,
.c-form-textarea.is-error:focus {
  box-shadow: 0 0 0 3px rgba(201,64,64,.35);
}

/* Désactivé */
.c-form-input:disabled,
.c-form-select:disabled,
.c-form-textarea:disabled {
  opacity       : 0.5;
  cursor        : not-allowed;
  background    : var(--color-ink-5);
}

/* ── Select — flèche personnalisée ────────────────────────── */
.c-form-select {
  cursor              : pointer;
  padding-right       : 2.5rem;
  background-image    : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat   : no-repeat;
  background-position : right 1rem center;
}

/* ── Textarea ─────────────────────────────────────────────── */
.c-form-textarea {
  resize     : vertical;
  min-height : 120px;
  line-height: var(--lh-relaxed);
}

/* ── Message d'aide / erreur ──────────────────────────────── */
.c-form-hint {
  font-size : var(--text-xs);
  color     : var(--color-ink-40);
  margin-top: 0.25rem;
}

.c-form-error-msg {
  font-size : var(--text-xs);
  color     : var(--color-error);
  margin-top: 0.25rem;
}

/* ── Variante dark (sur fond sombre) ──────────────────────── */
.c-form-group--dark .c-form-label { color: rgba(255,255,255,.45); }

.c-form-group--dark .c-form-input,
.c-form-group--dark .c-form-select,
.c-form-group--dark .c-form-textarea {
  background   : rgba(255,255,255,.06);
  border-color : rgba(255,255,255,.12);
  color        : var(--color-paper-100);
}

.c-form-group--dark .c-form-input::placeholder,
.c-form-group--dark .c-form-textarea::placeholder {
  color: rgba(255,255,255,.25);
}

.c-form-group--dark .c-form-input:focus,
.c-form-group--dark .c-form-select:focus,
.c-form-group--dark .c-form-textarea:focus {
  background   : rgba(255,255,255,.09);
  border-color : var(--color-accent);
}

/* ── Row (2 colonnes côte à côte) ─────────────────────────── */
.c-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .c-form-row { grid-template-columns: 1fr; }
}


/* ================================================================
   14. COMPOSANT — ICÔNES (.c-icon)
   ================================================================ */

.c-icon {
  display     : inline-flex;
  align-items : center;
  justify-content: center;
  flex-shrink : 0;
  color       : currentColor;
}

.c-icon svg { width: 100%; height: 100%; }

/* ── Tailles ──────────────────────────────────────────────── */
.c-icon--xs  { width: 12px; height: 12px; }
.c-icon--sm  { width: 16px; height: 16px; }
.c-icon--md  { width: 20px; height: 20px; }
.c-icon--lg  { width: 24px; height: 24px; }
.c-icon--xl  { width: 32px; height: 32px; }
.c-icon--2xl { width: 40px; height: 40px; }
.c-icon--3xl { width: 48px; height: 48px; }

/* ── Wrapper coloré ───────────────────────────────────────── */
.c-icon-wrap {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  border-radius   : var(--radius-md);
  background      : var(--color-ink-5);
  color           : var(--color-ink-80);
  transition      : var(--transition-color);
}

.c-icon-wrap--sm  { width: 32px; height: 32px; }
.c-icon-wrap--md  { width: 44px; height: 44px; }
.c-icon-wrap--lg  { width: 56px; height: 56px; }

.c-icon-wrap--copper { background: var(--color-copper-20); color: var(--color-copper-100); }
.c-icon-wrap--dark   { background: rgba(255,255,255,.08);  color: rgba(255,255,255,.7); }


/* ================================================================
   15. COMPOSANT — LIENS (.c-link)
   ================================================================ */

/* Lien standard */
.c-link {
  color          : var(--color-accent);
  font-weight    : var(--fw-medium);
  text-decoration: none;
  display        : inline-flex;
  align-items    : center;
  gap            : 0.3em;
  transition     : color var(--dur-fast) var(--ease-out),
                   gap   var(--dur-fast) var(--ease-spring);
}

.c-link:hover {
  color: var(--color-copper-120);
  gap  : 0.5em;
}

.c-link:focus-visible {
  outline       : 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius : 2px;
}

/* Lien inline (dans du texte) */
.c-link--inline {
  text-decoration      : underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(201,110,42,.4);
}

.c-link--inline:hover {
  text-decoration-color: var(--color-accent);
}

/* Lien de navigation */
.c-link--nav {
  font-size   : var(--text-sm);
  font-weight : var(--fw-medium);
  color       : rgba(255,255,255,.65);
  transition  : color var(--dur-fast) var(--ease-out);
  gap         : 0;
}

.c-link--nav:hover       { color: var(--color-paper-100); gap: 0; }
.c-link--nav.is-active   { color: var(--color-paper-100); }

/* Lien de footer */
.c-link--footer {
  font-size  : var(--text-sm);
  color      : rgba(255,255,255,.4);
  font-weight: var(--fw-regular);
  transition : color var(--dur-fast) var(--ease-out);
  gap        : 0;
}

.c-link--footer:hover { color: rgba(255,255,255,.8); gap: 0; }


/* ================================================================
   16. COMPOSANT — BADGE / LABEL (.c-badge, .c-label)
   ================================================================ */

/* Badge pill */
.c-badge {
  display       : inline-flex;
  align-items   : center;
  gap           : var(--space-0-5);
  padding       : 0.25rem 0.75rem;
  font-size     : var(--text-xs);
  font-weight   : var(--fw-semibold);
  letter-spacing: 0.02em;
  border-radius : var(--radius-full);
  line-height   : 1;
}

.c-badge--default  { background: var(--color-ink-5);   color: var(--color-ink-80); }
.c-badge--copper   { background: var(--color-copper-20); color: var(--color-copper-100); }
.c-badge--dark     { background: var(--color-ink-80);  color: rgba(255,255,255,.8); }
.c-badge--success  { background: var(--color-success-bg); color: var(--color-success); }
.c-badge--error    { background: var(--color-error-bg);   color: var(--color-error); }

/* Label eyebrow (section header) */
.c-label {
  display        : inline-block;
  font-size      : var(--text-xs);
  font-weight    : var(--fw-semibold);
  letter-spacing : var(--ls-widest);
  text-transform : uppercase;
  color          : var(--color-accent);
  margin-bottom  : var(--space-2);
}

.c-label--inv   { color: var(--color-copper-80); }
.c-label--dark  { color: rgba(255,255,255,.4); }


/* ================================================================
   17. COMPOSANT — DIVIDER (.c-divider)
   ================================================================ */

.c-divider {
  border      : none;
  border-top  : 1px solid var(--color-border);
  margin      : var(--space-4) 0;
}

.c-divider--dark { border-color: rgba(255,255,255,.08); }
.c-divider--sm   { margin: var(--space-2) 0; }
.c-divider--lg   { margin: var(--space-8) 0; }


/* ================================================================
   18. ANIMATIONS GLOBALES
   ================================================================ */

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

/* ── Reveal (scroll-driven via IntersectionObserver) ──────── */
.reveal {
  opacity   : 0;
  transform : translateY(40px);
  transition: opacity var(--dur-slower) var(--ease-spring),
              transform var(--dur-slower) var(--ease-spring);
}

.reveal.is-visible {
  opacity   : 1;
  transform : translateY(0);
}

/* Délais de stagger */
.reveal--d1 { transition-delay: 0.06s; }
.reveal--d2 { transition-delay: 0.12s; }
.reveal--d3 { transition-delay: 0.18s; }
.reveal--d4 { transition-delay: 0.24s; }
.reveal--d5 { transition-delay: 0.30s; }
.reveal--d6 { transition-delay: 0.36s; }

/* Variantes directionnelles */
.reveal--left  { transform: translateX(-40px); }
.reveal--right { transform: translateX(40px); }
.reveal--scale { transform: scale(0.95); }

.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible {
  transform: none;
}

/* ── Hover utilitaires ────────────────────────────────────── */
.hover-lift {
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out);
}
.hover-lift:hover {
  transform : translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hover-scale {
  transition: transform var(--dur-base) var(--ease-spring);
}
.hover-scale:hover { transform: scale(1.02); }

/* Image zoom au hover */
.img-zoom img {
  transition: transform var(--dur-slowest) var(--ease-apple);
}
.img-zoom:hover img { transform: scale(1.05); }

/* Squish au click */
.active-squish:active { transform: scale(0.97); }


/* ================================================================
   19. ÉTATS UTILITAIRES
   ================================================================ */

.is-hidden   { display: none !important; }
.is-invisible{ visibility: hidden; }
.is-visible  { opacity: 1; transform: none; }
.is-loading  { cursor: wait; }
.is-disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; }
.is-active   { color: var(--color-accent); }
.is-selected { background: var(--color-copper-20); }


/* ================================================================
   20. CLASSES UTILITAIRES
   ================================================================ */

/* ── Texte ────────────────────────────────────────────────── */
.u-text-left    { text-align: left; }
.u-text-center  { text-align: center; }
.u-text-right   { text-align: right; }
.u-uppercase    { text-transform: uppercase; }
.u-truncate     { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.u-balance      { text-wrap: balance; }  /* titres multi-lignes équilibrés */
.u-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Couleurs de texte ────────────────────────────────────── */
.u-text-copper  { color: var(--color-accent); }
.u-text-mute    { color: var(--color-text-mute); }
.u-text-inv     { color: var(--color-text-inv); }

/* ── Espacement ───────────────────────────────────────────── */
.u-mt-0  { margin-top: 0; }
.u-mt-2  { margin-top: var(--space-2); }
.u-mt-4  { margin-top: var(--space-4); }
.u-mt-6  { margin-top: var(--space-6); }
.u-mt-8  { margin-top: var(--space-8); }
.u-mb-0  { margin-bottom: 0; }
.u-mb-2  { margin-bottom: var(--space-2); }
.u-mb-4  { margin-bottom: var(--space-4); }
.u-mb-6  { margin-bottom: var(--space-6); }
.u-mb-8  { margin-bottom: var(--space-8); }

/* ── Radius ───────────────────────────────────────────────── */
.u-rounded-none { border-radius: 0; }
.u-rounded-sm   { border-radius: var(--radius-sm); }
.u-rounded-md   { border-radius: var(--radius-md); }
.u-rounded-lg   { border-radius: var(--radius-lg); }
.u-rounded-xl   { border-radius: var(--radius-xl); }
.u-rounded-full { border-radius: var(--radius-full); }

/* ── Overflow ─────────────────────────────────────────────── */
.u-overflow-hidden { overflow: hidden; }
.u-overflow-auto   { overflow: auto; }

/* ── Position ─────────────────────────────────────────────── */
.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-fixed    { position: fixed; }

/* ── Largeur ──────────────────────────────────────────────── */
.u-w-full { width: 100%; }
.u-max-w-prose { max-width: 65ch; }
.u-max-w-narrow { max-width: 44ch; }


/* ================================================================
   21. ACCESSIBILITÉ & FOCUS
   ================================================================ */

/* Anneau de focus global — toujours visible au clavier */
:focus-visible {
  outline       : 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius : var(--radius-xs);
}

/* Supprimer l'outline au clic souris */
:focus:not(:focus-visible) { outline: none; }

/* Skip link */
.skip-link {
  position  : absolute;
  top       : -100%;
  left      : var(--space-2);
  padding   : var(--space-1) var(--space-3);
  background: var(--color-accent);
  color     : var(--color-paper-100);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  z-index   : 9999;
  transition: top var(--dur-fast);
}

.skip-link:focus { top: var(--space-2); }

/* Mode contraste élevé (Windows HC, macOS) */
@media (forced-colors: active) {
  .c-btn--primary,
  .c-badge--copper {
    border: 2px solid ButtonText;
  }
}

/* Préférence mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration      : 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration     : 0.01ms !important;
    scroll-behavior         : auto !important;
  }

  .reveal {
    opacity  : 1;
    transform: none;
  }
}