/* Indivisible — design tokens
   Source : Bibliothèque de composants v1 (charte + book 2025)
   Artifact public : https://claude.ai/artifact/Uz8iTtjkJthasCBrhKRmXv
   Importer ce fichier dans les projets du groupe (sites, maquettes, prototypes).
*/

:root {
  /* Palette principale */
  --ind-nuit: #15436d;
  --ind-bleu: #495dc5;
  --ind-ciel: #5c89f7;
  --ind-perle: #c4c6d4;
  --ind-blanc: #ffffff;
  --ind-fond: #ffffff;
  --ind-fond-doux: #f7f8fc;
  --ind-bordure: #e6e8f2;
  --ind-muted: #8b93a8;
  --ind-surtitre: #c4c6d4;

  /* Teintes de domaine — forte / claire
     Une seule teinte de domaine par page. */
  --ind-education: #b658cb;
  --ind-education-clair: #efa1e8;
  --ind-outillage: #5c89f7;
  --ind-outillage-clair: #87d7f8;
  --ind-organisation: #00b191;
  --ind-organisation-clair: #70e0d5;
  --ind-ecologie: #bdc500;
  --ind-ecologie-clair: #f8ec5d;
  --ind-methode: #da5f1f;
  --ind-methode-clair: #ffc900;

  /* Dégradés de motifs (jamais sous du texte courant) */
  --ind-grad-education: linear-gradient(135deg, var(--ind-education), var(--ind-education-clair));
  --ind-grad-outillage: linear-gradient(135deg, var(--ind-outillage), var(--ind-outillage-clair));
  --ind-grad-organisation: linear-gradient(135deg, var(--ind-organisation), var(--ind-organisation-clair));
  --ind-grad-ecologie: linear-gradient(135deg, var(--ind-ecologie), var(--ind-ecologie-clair));
  --ind-grad-methode: linear-gradient(135deg, var(--ind-methode), var(--ind-methode-clair));
  --ind-grad-nuit: linear-gradient(135deg, var(--ind-ciel), var(--ind-nuit));

  /* Typographie — Montserrat uniquement */
  --ind-font: "Montserrat", system-ui, sans-serif;
  --ind-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --ind-display-size: 56px;
  --ind-display-lh: 1.05;
  --ind-h1-size: 40px;
  --ind-h1-lh: 1.15;
  --ind-h2-size: 30px;
  --ind-h2-lh: 1.2;
  --ind-h3-size: 22px;
  --ind-h3-lh: 1.3;
  --ind-chapo-size: 20px;
  --ind-chapo-lh: 1.55;
  --ind-subtitle-size: 17px;
  --ind-body-size: 16px;
  --ind-body-lh: 1.7;
  --ind-caption-size: 13px;
  --ind-caption-lh: 1.6;
  --ind-overline-size: 11px;
  --ind-overline-ls: 0.14em;

  --ind-measure: 65ch;

  /* Espacement — échelle de 4 px */
  --ind-space-xs: 4px;
  --ind-space-s: 8px;
  --ind-space-m: 16px;
  --ind-space-l: 24px;
  --ind-space-xl: 40px;
  --ind-space-2xl: 64px;
  --ind-space-3xl: 96px;

  /* Rayons */
  --ind-radius-field: 8px;
  --ind-radius-card: 16px;
  --ind-radius-pill: 999px;

  /* Élévation */
  --ind-shadow-hover: 0 12px 32px rgba(21, 67, 109, 0.14);

  /* Layout */
  --ind-content: 1240px;
  --ind-gutter: 24px;
  --ind-cols: 12;
  --ind-tap: 44px;

  /* Filtres bichromie (photo en niveaux de gris, noirs = teinte forte) */
  --ind-duotone-principal: var(--ind-nuit) var(--ind-perle);
  --ind-duotone-education: var(--ind-education) var(--ind-education-clair);
  --ind-duotone-outillage: var(--ind-outillage) var(--ind-outillage-clair);
  --ind-duotone-organisation: var(--ind-organisation) var(--ind-organisation-clair);
  --ind-duotone-ecologie: var(--ind-ecologie) var(--ind-ecologie-clair);
  --ind-duotone-methode: var(--ind-methode) var(--ind-methode-clair);
}

html {
  color: var(--ind-nuit);
  background: var(--ind-fond);
  font-family: var(--ind-font);
  font-size: var(--ind-body-size);
  line-height: var(--ind-body-lh);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .ind-display {
  font-weight: 700;
  color: var(--ind-nuit);
}

.ind-display { font-size: var(--ind-display-size); line-height: var(--ind-display-lh); font-weight: 700; }
h1 { font-size: var(--ind-h1-size); line-height: var(--ind-h1-lh); }
h2 { font-size: var(--ind-h2-size); line-height: var(--ind-h2-lh); }
h3 { font-size: var(--ind-h3-size); line-height: var(--ind-h3-lh); font-weight: 600; }

.ind-chapo {
  font-size: var(--ind-chapo-size);
  line-height: var(--ind-chapo-lh);
  font-weight: 500;
}

.ind-subtitle {
  font-size: var(--ind-subtitle-size);
  font-weight: 500;
  font-style: italic;
}

.ind-caption {
  font-size: var(--ind-caption-size);
  line-height: var(--ind-caption-lh);
}

.ind-overline {
  font-size: var(--ind-overline-size);
  font-weight: 600;
  letter-spacing: var(--ind-overline-ls);
  text-transform: uppercase;
}

a {
  color: var(--ind-bleu);
  text-underline-offset: 3px;
}

a:hover { color: var(--ind-nuit); }

.ind-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--ind-radius-pill);
  background: var(--ind-bleu);
  color: var(--ind-blanc);
  font-family: var(--ind-font);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

.ind-btn:hover { background: #3a4cad; color: var(--ind-blanc); }

.ind-btn-secondary {
  background: transparent;
  color: var(--ind-bleu);
  box-shadow: inset 0 0 0 2px var(--ind-bleu);
}

.ind-btn-secondary:hover {
  background: #eef1fb;
  color: var(--ind-bleu);
}

.ind-btn-sm { min-height: 40px; }
.ind-btn-lg { min-height: 58px; }

.ind-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--ind-radius-pill);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
}

.ind-card {
  border: 1px solid var(--ind-bordure);
  border-radius: var(--ind-radius-card);
  background: var(--ind-blanc);
}

.ind-card:hover {
  box-shadow: var(--ind-shadow-hover);
  transform: translateY(-3px);
}

.ind-cut-45 {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

.ind-wrap {
  width: min(var(--ind-content), calc(100% - 48px));
  margin-inline: auto;
}