/* migtec.ch — Massy Ingénieur Géotechnique Sàrl */

/* ── Polices (hébergées localement, licence OFL) ─────────────── */
@font-face { font-family: 'Barlow'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); }

/* ── Couleurs (tirées du logo) ───────────────────────────────── */
:root {
  --creme:      #f4efe6;  /* fond */
  --beige:      #e8dfd0;  /* séparateurs, surfaces */
  --encre:      #2d2118;  /* texte */
  --brun:       #4a3726;  /* logo, titres, blocs sombres */
  --brun-clair: #8a6a4b;  /* accents */
  --texte-2:    #5c4a3a;  /* texte secondaire (contraste AA sur crème) */
  --sur-sombre: #efe6d8;  /* texte sur brun */
  --titre: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --corps: 'Barlow', Arial, sans-serif;
  --marge: clamp(20px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  font-family: var(--corps); font-size: 16px; line-height: 1.6;
  background: var(--creme); color: var(--encre);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; line-height: 1.1; color: var(--brun); }

/* ── En-tête ─────────────────────────────────────────────────── */
header {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 68px; padding: 0 var(--marge);
  background: rgba(244, 239, 230, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--beige);
}
.logo img { display: block; height: 34px; width: auto; }
nav { display: flex; gap: 28px; }
nav a {
  font-family: var(--titre); font-weight: 500; font-size: 15px;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--brun);
}
nav a:hover { color: var(--brun-clair); }

/* ── Accroche ────────────────────────────────────────────────── */
.accroche {
  display: grid; align-items: center;
  /* colonne image : la moitié de l'écran, sans dépasser la hauteur visible */
  grid-template-columns: 1fr min(50vw, calc((100vh - 68px) * 800 / 850));
  padding-top: 68px;
}
.accroche-texte {
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px var(--marge);
}
.surtitre {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--titre); font-weight: 500; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brun-clair);
  margin-bottom: 22px;
}
.surtitre::before { content: ''; width: 32px; height: 2px; background: var(--brun-clair); }
h1 { font-size: clamp(44px, 6vw, 84px); letter-spacing: -.01em; margin-bottom: 28px; }
h1 span { color: var(--brun-clair); }
.resume { font-size: 18px; color: var(--texte-2); max-width: 34em; }
/* l'illustration garde toujours ses proportions (800 x 850) : jamais rognée ni déformée */
.accroche-image { align-self: stretch; display: flex; align-items: flex-end; background: linear-gradient(#d3dde6, #dfe2e2); }
.accroche-image svg { display: block; width: 100%; height: auto; aspect-ratio: 800 / 850; }

/* ── Prestations ─────────────────────────────────────────────── */
#prestations { padding: 96px var(--marge) 48px; }
.rubrique {
  display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 24px 64px;
  padding: 48px 0; border-top: 2px solid var(--brun);
}
.rubrique-tete { align-self: start; position: sticky; top: 100px; }
.rubrique-num {
  font-family: var(--titre); font-weight: 600; font-size: 15px;
  letter-spacing: .12em; color: var(--brun-clair); margin-bottom: 8px;
}
h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 14px; }
.rubrique-intro { color: var(--texte-2); max-width: 26em; }
.liste { list-style: none; }
.liste li { padding: 22px 0; border-top: 1px solid var(--beige); }
.liste li:first-child { border-top: none; padding-top: 4px; }
h3 { font-size: 22px; margin-bottom: 6px; }
.liste p { color: var(--texte-2); }

/* ── Bureau et contact ───────────────────────────────────────── */
#bureau {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px;
  padding: 80px var(--marge);
  background: var(--brun); color: var(--sur-sombre);
}
#bureau h2 { color: var(--sur-sombre); }
#bureau p { max-width: 30em; }
.coord { font-style: normal; line-height: 1.8; }
.coord strong { font-weight: 500; }
.coord a { color: var(--sur-sombre); text-decoration-color: var(--brun-clair); text-underline-offset: 4px; }
.coord a:hover { color: #ffffff; }

/* ── Pied de page ────────────────────────────────────────────── */
footer {
  padding: 24px var(--marge);
  background: var(--encre); color: rgba(239, 230, 216, .7);
  font-size: 14px; line-height: 1.7; text-align: center;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 860px) {
  header { height: 60px; }
  .logo img { height: 28px; }
  nav { gap: 16px; }
  nav a { font-size: 13px; letter-spacing: .06em; }
  nav a.nav-secondaire { display: none; }
  .accroche { grid-template-columns: 1fr; padding-top: 60px; }
  .accroche-texte { padding: 48px var(--marge) 40px; }
  .resume { font-size: 17px; }
  #prestations { padding-top: 56px; }
  .rubrique { grid-template-columns: 1fr; padding: 36px 0; }
  .rubrique-tete { position: static; }
  #bureau { grid-template-columns: 1fr; padding: 56px var(--marge); }
}
.nowrap { white-space: nowrap; }

/* ── Illustration : saisons et jours particuliers (voir le script dans index.html) ── */
.accroche-image .v, .accroche-image .f { display: none; }
html:not([data-saison]) .accroche-image .d,
html[data-saison="hiver"] .accroche-image .hiver,
html[data-saison="printemps"] .accroche-image .printemps,
html[data-saison="ete"] .accroche-image .ete,
html[data-saison="automne"] .accroche-image .automne,
html[data-fete="noel"] .accroche-image .noel,
html[data-fete="nouvelan"] .accroche-image .nouvelan,
html[data-fete="valentin"] .accroche-image .valentin,
html[data-fete="poisson"] .accroche-image .poisson,
html[data-fete="paques"] .accroche-image .paques,
html[data-fete="fetenat"] .accroche-image .fetenat,
html[data-fete="halloween"] .accroche-image .halloween { display: inline; }