/* DIATONI Bâtiment — Design System
   Global stylesheet entry point. Consumers link THIS file only.
   Keep this file as @import lines only. */

/* DIATONI Bâtiment — Webfonts
   Loaded from Google Fonts CDN. Substitution note: no brand font files were
   provided, so we selected the nearest "humane + solid" pairing:
   - Bitter  → display/titrage : slab serif, sturdy & readable, artisan feel
   - Hanken Grotesk → UI/body : warm neutral grotesque, not "startup-y"
   If you have licensed brand fonts, drop the files here and replace these. */
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* DIATONI Bâtiment — Color tokens
   Budget couleur : ~80% surfaces claires (blanc + beige chaud),
   ancre = vert olive du logo, accent parcimonieux = rouge brique,
   profondeur = brun terre + sable. Texte = anthracite chaud (jamais noir froid). */

:root {
  /* ---- Base palette (raw values) ---- */

  /* Olive — couleur de marque (ancre). Usage : aplats, icônes, traits, états actifs. */
  --olive-700: #3C5532;   /* olive très foncé (texte/hover sur clair) */
  --olive-600: #4E6E42;   /* olive lisible — TEXTE olive sur blanc */
  --olive-500: #6A935A;   /* OLIVE DE MARQUE (logo) — aplats, fonds */
  --olive-400: #88AC79;   /* olive clair — bordures, hovers d'aplat */
  --olive-200: #CBDAC0;   /* voile olive — fonds doux, halos */
  --olive-100: #E8F0E2;   /* olive très pâle — surfaces teintées */

  /* Rouge brique — accent vif (~5%). CTA, chiffres clés, points d'attention. */
  --brick-700: #9A2A21;   /* brique foncé — hover CTA, texte accent */
  --brick-600: #C8362B;   /* ROUGE BRIQUE — bouton "Demander un devis" */
  --brick-500: #D8493D;   /* brique clair — hover/halo */
  --brick-100: #F8E4E1;   /* voile brique — fonds d'alerte douce */

  /* Brun terre — profondeur, matière, ancrage chantier */
  --brown-700: #4A3220;   /* brun foncé */
  --brown-600: #6B4A2F;   /* BRUN TERRE */
  --brown-400: #9A7855;   /* brun clair */

  /* Sable / beige — réchauffe, contraste doux */
  --sand-500: #D9C7A6;   /* sable */
  --sand-400: #E5DAC6;   /* SABLE / BEIGE — bordures chaudes, séparateurs */
  --sand-200: #F1EADD;   /* sable pâle */

  /* Neutres chauds — fonds & texte */
  --cream:    #FAF7F2;   /* BLANC CASSÉ CHAUD — fonds secondaires */
  --white:    #FFFFFF;   /* blanc pur */
  --ink-900:  #1F241D;   /* ANTHRACITE CHAUD — texte principal */
  --ink-700:  #3A4034;   /* texte secondaire foncé */
  --ink-500:  #5E6657;   /* texte tertiaire / légendes */
  --ink-300:  #8C9384;   /* texte désactivé, placeholders */
  --line-200: #E7E2D8;   /* bordures neutres chaudes */
  --line-100: #F0ECE3;   /* séparateurs très doux */

  /* ---- Semantic aliases ---- */
  --brand:            var(--olive-500);
  --brand-ink:        var(--olive-600);   /* olive lisible pour texte */
  --brand-strong:     var(--olive-700);
  --accent:           var(--brick-600);
  --accent-strong:    var(--brick-700);

  --surface-page:     var(--white);
  --surface-warm:     var(--cream);       /* fonds de section secondaires */
  --surface-card:     var(--white);
  --surface-tint:     var(--olive-100);   /* bloc teinté olive */
  --surface-sand:     var(--sand-200);
  --surface-ink:      var(--ink-900);     /* footer / bloc sombre */

  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-faint:       var(--ink-300);
  --text-on-brand:    var(--white);
  --text-on-dark:     #F3F1EA;

  --border-default:   var(--line-200);
  --border-warm:      var(--sand-400);
  --border-strong:    var(--ink-300);
  --border-brand:     var(--olive-400);

  --focus-ring:       var(--olive-500);
  --rating-star:      #E8A92C;            /* étoiles d'avis (or chaud) */
}

/* DIATONI Bâtiment — Typography tokens
   Titrage humain & lisible (Bitter, slab humaniste) + UI neutre (Hanken Grotesk). */

:root {
  /* ---- Families ---- */
  --font-display: "Bitter", Georgia, "Times New Roman", serif;
  --font-ui:      "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    var(--font-ui);

  /* ---- Weights ---- */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* ---- Type scale (fluid-friendly, rem on 16px base) ---- */
  --text-2xs:  0.75rem;   /* 12px — étiquettes, mentions légales */
  --text-xs:   0.8125rem; /* 13px — eyebrow, badges */
  --text-sm:   0.875rem;  /* 14px — légendes, méta */
  --text-base: 1rem;      /* 16px — corps */
  --text-md:   1.125rem;  /* 18px — corps large, intro */
  --text-lg:   1.375rem;  /* 22px — sous-titres */
  --text-xl:   1.75rem;   /* 28px — H3 */
  --text-2xl:  2.25rem;   /* 36px — H2 */
  --text-3xl:  3rem;      /* 48px — H1 */
  --text-4xl:  3.75rem;   /* 60px — hero display */

  /* ---- Line heights ---- */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;  /* grands titres display */
  --tracking-snug:   -0.01em;  /* titres moyens */
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* eyebrow / micro-caps */

  /* ---- Semantic roles ---- */
  --eyebrow-size:   var(--text-xs);
  --eyebrow-track:  var(--tracking-wide);
  --eyebrow-weight: var(--fw-bold);

  --h1-size:        var(--text-3xl);
  --h2-size:        var(--text-2xl);
  --h3-size:        var(--text-xl);
  --body-size:      var(--text-base);
  --lead-size:      var(--text-md);
}

/* DIATONI Bâtiment — Spacing & layout tokens
   Échelle douce 4px. Rythme aéré, généreux (artisan de proximité, pas dense/tech). */

:root {
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-12:  6rem;     /* 96 — espacement de section */

  /* ---- Layout ---- */
  --container-max: 1200px;   /* largeur de contenu principale */
  --container-narrow: 760px; /* prose / blog */
  --gutter: var(--space-5);  /* marge latérale mobile */
  --section-y: var(--space-12);

  /* ---- Z-index ---- */
  --z-header: 100;    /* @kind other */
  --z-dropdown: 200;  /* @kind other */
  --z-overlay: 900;   /* @kind other */
  --z-modal: 1000;    /* @kind other */
  --z-toast: 1100;    /* @kind other */
}

/* DIATONI Bâtiment — Radius, borders, shadows
   Coins légèrement arrondis, finitions soignées. Ombres chaudes et discrètes
   (jamais des ombres bleutées/froides). */

:root {
  /* ---- Radii ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;    /* boutons, badges */
  --radius-md:   12px;   /* champs, petites cartes */
  --radius-lg:   16px;   /* cartes services */
  --radius-xl:   24px;   /* grands blocs, hero média */
  --radius-pill: 999px;  /* pastilles, chips */

  /* ---- Border widths ---- */
  --bw-hair: 1px;
  --bw-thin: 1.5px;
  --bw-thick: 2px;

  /* ---- Shadows (teinte chaude brun/olive, opacités basses) ---- */
  --shadow-xs:  0 1px 2px rgba(31, 36, 29, 0.06);
  --shadow-sm:  0 2px 6px rgba(31, 36, 29, 0.07);
  --shadow-md:  0 6px 18px rgba(31, 36, 29, 0.09);
  --shadow-lg:  0 16px 40px rgba(31, 36, 29, 0.12);
  --shadow-card: 0 4px 14px rgba(74, 50, 32, 0.10);     /* cartes — chaud brun */
  --shadow-brand: 0 10px 26px rgba(106, 147, 90, 0.22); /* relief olive (boutons brand) */
  --shadow-accent: 0 10px 24px rgba(200, 54, 43, 0.22); /* relief CTA brique */

  /* ---- Focus ring ---- */
  --ring: 0 0 0 3px rgba(106, 147, 90, 0.35);

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:  140ms; /* @kind other */
  --dur-base:  220ms; /* @kind other */
  --dur-slow:  360ms; /* @kind other */
}

/* DIATONI Bâtiment — Base element styling & helpers
   Applied globally so cards, UI kits and components share a warm baseline. */

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

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--body-size);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  margin: 0;
  font-weight: var(--fw-bold);
}
h1 { font-size: var(--h1-size); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }

p { margin: 0; }

a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Reusable text helpers ---- */
.ds-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--brand-ink);
}

.ds-lead {
  font-size: var(--lead-size);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

/* Soulignés olive façon "trait à la main" sous un mot-clé de titre */
.ds-underline {
  background-image: linear-gradient(var(--olive-400), var(--olive-400));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.18em;
  padding-bottom: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}