/* =====================================================================
   TERRE ECO'+ — Fondations couleurs & typographie
   Entreprise de terrassement, VRD & démolition
   ---------------------------------------------------------------------
   Palette dérivée du logo et affinée par le client.
   Fond toujours clair. Le bleu est un accent ponctuel uniquement.
   ===================================================================== */

/* ---- Polices auto-hébergées — Work Sans variable en WOFF2 ----
   Sous-ensembles latin + latin-ext (le navigateur ne télécharge que le
   nécessaire via unicode-range). L'italique TTF a été retirée : aucune
   italique n'est utilisée sur le site public. */
@font-face {
  font-family: "Work Sans";
  src: url("fonts/worksans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/worksans-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Polices (Hanken Grotesk / Mulish restent en CDN — non retenues) ---- */
/* Famille humaniste, chaleureuse et lisible.
   --font-sans est commutable pour comparer les candidates. */
:root {
  --font-hanken: "Hanken Grotesk", system-ui, sans-serif;
  --font-mulish: "Mulish", system-ui, sans-serif;
  --font-worksans: "Work Sans", system-ui, sans-serif;

  /* Police active du système — VALIDÉE : Work Sans */
  --font-sans: var(--font-worksans);
}

:root {

  /* =========================================================
     1. COULEURS — palette brute
     ========================================================= */

  /* Verts (cœur de marque) */
  --green-forest:  #3B6D11;   /* Vert Forêt  — primaire */
  --green-active:  #639922;   /* Vert Actif  — secondaire / vif */
  --green-light:   #EAF3DE;   /* Vert Clair  — surface teintée */

  /* Terre & accent chaud */
  --terracotta:    #BA7517;   /* Terre Cuite — accent chaud */

  /* Bleu (accent ponctuel : liens, détails) */
  --steel-blue:    #185FA5;   /* Bleu Acier */

  /* Neutres clairs et chauds */
  --sand:          #FAEEDA;   /* Sable */
  --stone:         #F1EFE8;   /* Gris Pierre */
  --white:         #FFFFFF;

  /* Variantes (hover / press / profondeur) — dérivées des bases */
  --green-forest-dark:  #2E5409;
  --green-forest-darker: #224006;
  --green-active-dark:  #527F1B;
  --terracotta-dark:    #9C6010;
  --steel-blue-dark:    #114B85;
  --green-light-2:      #DCEAC9;
  --sand-2:             #F3E2C6;

  /* Encres (textes) — dérivées du vert forêt, jamais du noir pur */
  --ink:    #1D2611;   /* texte principal — vert très sombre */
  --ink-2:  #4C5740;   /* texte secondaire */
  --ink-3:  #68715F;   /* texte tertiaire / légendes — assombri pour contraste AA (4,5:1 sur blanc) */
  --ink-on-color: #FFFFFF;

  /* Bordures & séparateurs (chauds, discrets) */
  --border:        #E4DFCF;
  --border-strong: #D2CCB6;
  --border-green:  #C9DBAE;

  /* =========================================================
     2. RÔLES SÉMANTIQUES
     ========================================================= */
  --color-primary:        var(--green-forest);
  --color-primary-hover:  var(--green-forest-dark);
  --color-primary-press:  var(--green-forest-darker);

  --color-secondary:      var(--green-active);
  --color-secondary-hover: var(--green-active-dark);

  --color-accent:         var(--terracotta);
  --color-accent-hover:   var(--terracotta-dark);

  --color-link:           var(--steel-blue);
  --color-link-hover:     var(--steel-blue-dark);

  /* Fonds & surfaces */
  --bg:            var(--stone);     /* fond de page (clair) */
  --surface:       var(--white);     /* cartes, panneaux */
  --surface-warm:  var(--sand);      /* surface chaude alternative */
  --surface-green: var(--green-light);/* surface verte douce */

  /* Texte */
  --fg:   var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);

  /* États sémantiques (dérivés de la palette) */
  --color-success: var(--green-active);
  --color-info:    var(--steel-blue);
  --color-warning: var(--terracotta);
  --color-danger:  #B23A1E;

  /* =========================================================
     3. RAYONS — formes légèrement arrondies (VALIDÉ : ~9px)
     ========================================================= */
  --radius-xs:  4px;
  --radius-sm:  9px;   /* boutons, champs, tags */
  --radius-md:  12px;
  --radius-lg:  14px;  /* cartes */
  --radius-xl:  20px;  /* grands panneaux */
  --radius-pill: 999px;

  /* =========================================================
     4. OMBRES — douces, chaudes, jamais bleutées
     ========================================================= */
  --shadow-xs: 0 1px 2px rgba(29, 38, 17, 0.06);
  --shadow-sm: 0 1px 3px rgba(29, 38, 17, 0.08), 0 1px 2px rgba(29, 38, 17, 0.06);
  --shadow-md: 0 4px 12px rgba(29, 38, 17, 0.10);
  --shadow-lg: 0 12px 28px rgba(29, 38, 17, 0.12);
  --shadow-focus: 0 0 0 3px rgba(99, 153, 34, 0.35);

  /* =========================================================
     5. ESPACEMENTS — base 4px
     ========================================================= */
  --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;

  /* =========================================================
     6. TYPOGRAPHIE — échelle modulaire (ratio ~1.25)
        Base 18px pour une lecture confortable.
     ========================================================= */
  --text-xs:   0.778rem;  /* 14px */
  --text-sm:   0.889rem;  /* 16px */
  --text-base: 1rem;      /* 18px */
  --text-lg:   1.222rem;  /* 22px */
  --text-xl:   1.556rem;  /* 28px */
  --text-2xl:  1.944rem;  /* 35px */
  --text-3xl:  2.444rem;  /* 44px */
  --text-4xl:  3.111rem;  /* 56px */
  --text-5xl:  4rem;      /* 72px */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;
}

/* =========================================================
   7. STYLES SÉMANTIQUES DE BASE
   Appliqués directement aux éléments si la classe .te-prose
   ou le scope global est utilisé.
   ========================================================= */
html { font-size: 18px; }

body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--fg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); font-weight: var(--weight-extra); }
h2 { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
h3 { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
h4 { font-size: var(--text-xl);  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }

.eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--green-active-dark); /* contraste AA sur fonds clairs */
}

p { margin: 0 0 1em; line-height: var(--leading-relaxed); text-wrap: pretty; }
.lead { font-size: var(--text-lg); color: var(--fg-2); line-height: var(--leading-relaxed); }
small, .caption { font-size: var(--text-sm); color: var(--fg-3); }

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: underline; }