/* ============================================================
   LE MAÇON DES ALPES — direction artistique : suisse / brutalisme raffiné
   voir direction-artistique.md pour la justification de chaque choix
   ============================================================ */

@layer reset, tokens, base, layout, components, utilities;

/* Polices auto-hébergées (sous-ensemble latin, licence SIL OFL) */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  address { font-style: normal; }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }
}

@layer tokens {
  :root {
    /* --- Palette tirée des photos (voir direction-artistique.md) --- */
    --beton:      oklch(0.87 0.004 95);   /* #dedad2 approx — dalle claire */
    --beton-alt:  oklch(0.94 0.003 95);   /* #f1efe9 approx — fond de carte */
    --encre:      oklch(0.20 0.01 95);    /* #2c2a26 approx — texte principal */
    --terracotta: oklch(0.58 0.13 45);    /* #b85e31 approx — accent logo (traits, décor) */
    --terracotta-texte: oklch(0.52 0.13 45); /* variante assombrie : texte et fonds de bouton (contraste AA ≥ 4.5) */
    --acier:      oklch(0.55 0.012 95);   /* #74726a approx — bordures, grille */
    --acier-texte:oklch(0.50 0.012 95);   /* variante assombrie pour le petit texte (contraste AA ≥ 4.5) */
    --acier-clair:oklch(0.72 0.008 95);

    --font-display: "Space Grotesk", "Arial Narrow", sans-serif;
    --font-mono: "IBM Plex Mono", "Consolas", monospace;

    --step-h1: clamp(3.2rem, 9vw, 8rem);
    --step-h2: clamp(2.2rem, 5vw, 4.2rem);
    --step-h3: clamp(1.3rem, 2.2vw, 1.8rem);
    --step-lead: clamp(1.1rem, 1.6vw, 1.4rem);
    --step-body: clamp(1rem, 1.1vw, 1.15rem);

    --section-pad: clamp(4rem, 9vw, 11rem);
    --gutter: clamp(1.25rem, 4vw, 3rem);

    --ease: cubic-bezier(.2,.8,.2,1);
  }
}

@layer base {
  body {
    background: var(--beton-alt);
    color: var(--encre);
    font-family: var(--font-mono);
    font-size: var(--step-body);
    line-height: 1.6;
    text-wrap: pretty;
  }
  h1, h2, h3, blockquote p {
    font-family: var(--font-display);
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  p { max-width: 60ch; }
  sup { font-size: 0.65em; line-height: 0; }
  :focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }

  .skip-link {
    position: fixed;
    top: -100%;
    left: 1rem;
    z-index: 200;
    background: var(--encre);
    color: var(--beton-alt);
    padding: 0.75rem 1.25rem;
    font-family: var(--font-mono);
    transition: top 200ms var(--ease);
  }
  .skip-link:focus { top: 1rem; }

  .text-link { text-decoration: underline; text-decoration-color: var(--terracotta); text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
  .text-link:hover { color: var(--terracotta-texte); }
}

@layer layout {
  main { overflow-x: clip; }

  .section-title {
    font-size: var(--step-h2);
    padding-inline: var(--gutter);
    padding-block-start: var(--section-pad);
    padding-block-end: 1.5rem;
    position: relative;
    width: fit-content;
  }
  /* signature motion : le cordeau — trait qui se dessine au scroll */
  .section-title[data-cordeau]::after {
    content: "";
    position: absolute;
    left: var(--gutter);
    bottom: 0.6rem;
    height: 4px;
    width: calc(100% - var(--gutter) * 1.4);
    background: var(--terracotta);
    transform-origin: left center;
    transform: scaleX(0);
  }
  @supports (animation-timeline: view()) {
    .section-title[data-cordeau]::after {
      animation: cordeau linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
  .section-title[data-cordeau].is-drawn::after { transform: scaleX(1); transition: transform 700ms var(--ease); }
  @keyframes cordeau { to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: reduce) {
    .section-title[data-cordeau]::after { animation: none; transform: scaleX(1); }
  }
}

@layer components {

  /* ---------- HEADER ---------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in oklch, var(--beton-alt) 92%, transparent);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--acier-clair);
  }
  .site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--gutter);
    padding-inline: var(--gutter);
    padding-block: 0.85rem;
  }
  .wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .nav__list {
    display: flex;
    gap: clamp(1rem, 2vw, 2.25rem);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .nav__list a {
    position: relative;
    padding-block: 0.25rem;
  }
  .nav__list a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: 0;
    height: 2px;
    background: var(--terracotta);
    transition: right 250ms var(--ease);
  }
  .nav__list a:hover::after, .nav__list a:focus-visible::after { right: 0; }

  .btn-call {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    border: 1.5px solid var(--encre);
    padding: 0.5rem 0.9rem;
    white-space: nowrap;
  }
  .btn-call:hover { background: var(--encre); color: var(--beton-alt); }

  .burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding-inline: 8px;
    margin-inline-end: -8px;
  }
  .burger span { display: block; height: 2px; background: var(--encre); transition: transform 250ms var(--ease), opacity 250ms var(--ease); }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ---------- HERO ---------- */
  .hero {
    position: relative;
    min-height: 92vh;
    min-height: 92svh;
    display: grid;
    align-items: end;
  }
  .hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.85) contrast(1.08);
  }
  .hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in oklch, var(--encre) 55%, transparent) 0%, transparent 40%, color-mix(in oklch, var(--encre) 75%, transparent) 100%);
  }
  .hero__content {
    position: relative;
    color: var(--beton-alt);
    padding-inline: var(--gutter);
    padding-block: 3rem clamp(6rem, 14vw, 9rem);
    max-width: 62rem;
  }
  .hero__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-block-end: 1rem;
    color: color-mix(in oklch, var(--beton-alt) 85%, var(--terracotta));
  }
  .hero__title { font-size: var(--step-h1); overflow-wrap: break-word; }
  .hero__lead { font-size: var(--step-lead); max-width: 40ch; margin-block-start: 1.25rem; opacity: 0.92; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-start: 2.25rem; }

  .btn {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    padding: 0.9rem 1.5rem;
    border: 1.5px solid currentColor;
    display: inline-block;
  }
  .btn--primary { background: var(--terracotta-texte); border-color: var(--terracotta-texte); color: var(--beton-alt); }
  .btn--primary:hover { background: color-mix(in oklch, var(--terracotta-texte) 82%, black); }
  .btn--ghost { color: var(--beton-alt); }
  .btn--ghost:hover { background: color-mix(in oklch, var(--beton-alt) 15%, transparent); }
  .btn--dark { color: var(--encre); background: var(--beton-alt); }
  .btn--dark:hover { background: var(--encre); color: var(--beton-alt); }

  .data-strip {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid color-mix(in oklch, var(--beton-alt) 35%, transparent);
    background: color-mix(in oklch, var(--encre) 88%, transparent);
    color: var(--beton-alt);
    font-family: var(--font-mono);
    font-size: 0.78rem;
  }
  .data-strip > div { padding: 0.85rem var(--gutter); border-inline-end: 1px solid color-mix(in oklch, var(--beton-alt) 25%, transparent); }
  .data-strip dt { text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; margin-block-end: 0.2rem; }
  .data-strip dd { font-weight: 500; }

  /* ---------- À PROPOS ---------- */
  .apropos__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    padding-inline: var(--gutter);
    padding-block-end: var(--section-pad);
  }
  .apropos__media {
    grid-column: 1 / 7;
    align-self: start;
    position: sticky;
    top: 5.5rem;
    border: 2px solid var(--acier);
  }
  .apropos__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center 62%; filter: saturate(0.85) contrast(1.08); }
  .apropos__text { grid-column: 7 / 13; padding-block-start: 1rem; }
  .apropos__text .lead { font-family: var(--font-display); font-size: var(--step-lead); font-weight: 500; margin-block-end: 1.25rem; }
  .apropos__text p { margin-block-end: 1.25rem; }

  .specs { margin-block-start: 2rem; border-top: 1px solid var(--acier-clair); }
  .specs > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--acier-clair);
    font-size: 0.9rem;
  }
  .specs dt { text-transform: uppercase; letter-spacing: 0.04em; color: var(--acier-texte); }
  .specs dd { font-weight: 500; }

  /* ---------- SERVICES : liste éditoriale, survol révèle une photo ---------- */
  .services__list { border-top: 1px solid var(--encre); }
  .services__item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gutter);
    padding: clamp(1.5rem, 4vw, 3rem) var(--gutter);
    border-bottom: 1px solid var(--encre);
    isolation: isolate;
  }
  .services__num {
    font-family: var(--font-mono);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--terracotta-texte);
  }
  .services__body h3 { font-size: var(--step-h3); margin-block-end: 0.5rem; }
  .services__body p { max-width: 52ch; }

  /* L'image n'est déclarée que pour les appareils à survol : rien n'est téléchargé sur mobile */
  @media (hover: hover) {
    .services__item--beton      { --reveal: url("/photo/coffrage-voile-beton-arme-ferraillage-800.webp"); }
    .services__item--maconnerie { --reveal: url("/photo/murs-parpaings-soubassement-ferraillage.webp"); }
    .services__item--carrelage  { --reveal: url("/photo/lissage-dalle-beton-talocheuse.webp"); }
    .services__item--renovation { --reveal: url("/photo/murs-brique-chainage-beton-sous-charpente-800.webp"); }
    .services__item::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--reveal);
      background-size: cover;
      background-position: center;
      opacity: 0;
      filter: saturate(0.7) contrast(1.1) brightness(0.55);
      transition: opacity 350ms var(--ease);
      z-index: -1;
    }
    .services__item:hover { color: var(--beton-alt); }
    .services__item:hover .services__num { color: color-mix(in oklch, var(--terracotta) 60%, var(--beton-alt)); }
    .services__item:hover::before { opacity: 1; }
  }

  /* ---------- MOMENT PLEIN ÉCRAN 2 ---------- */
  .statement {
    position: relative;
    min-height: 70vh;
    min-height: 70svh;
    display: grid;
    place-items: center;
  }
  .statement__img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: saturate(0.85) contrast(1.08);
  }
  .statement__scrim { position: absolute; inset: 0; background: color-mix(in oklch, var(--encre) 60%, transparent); }
  .statement__quote {
    position: relative;
    color: var(--beton-alt);
    text-align: center;
    font-size: clamp(2.4rem, 7vw, 6rem);
    padding-inline: var(--gutter);
  }

  /* ---------- RÉALISATIONS : mosaïque ---------- */
  .realisations {
    padding-block-end: var(--section-pad);
  }
  .realisations__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 22vw 22vw 26vw;
    grid-template-areas:
      "p1 p1 l1 l1 l1 p2"
      "p1 p1 l2 l2 l2 p2"
      "l3 l3 l3 l4 l4 l4";
    gap: 2px;
    margin-inline: var(--gutter);
    border: 2px solid var(--encre);
    background: var(--encre);
  }
  .realisations__item { position: relative; overflow: hidden; background: var(--beton); }
  .realisations__item--p1 { grid-area: p1; }
  .realisations__item--l1 { grid-area: l1; }
  .realisations__item--l2 { grid-area: l2; }
  .realisations__item--p2 { grid-area: p2; }
  .realisations__item--l3 { grid-area: l3; }
  .realisations__item--l4 { grid-area: l4; }
  .realisations__item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.08); }
  .realisations__item figcaption {
    position: absolute; inset-inline: 0; bottom: 0;
    background: color-mix(in oklch, var(--encre) 80%, transparent);
    color: var(--beton-alt);
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    transform: translateY(100%);
    transition: transform 250ms var(--ease);
  }
  .realisations__item:hover figcaption, .realisations__item:focus-within figcaption { transform: translateY(0); }
  /* Écrans tactiles : pas de survol, les légendes restent visibles */
  @media (hover: none) {
    .realisations__item figcaption { transform: none; }
  }

  /* ---------- CONTACT ---------- */
  .contact__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--gutter);
    padding-inline: var(--gutter);
    padding-block-end: var(--section-pad);
  }
  .contact__info { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
  .contact__primary {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border: 2px solid var(--encre);
    padding: 1rem 1.25rem;
    transition: background 200ms var(--ease), color 200ms var(--ease);
  }
  .contact__primary:hover { background: var(--encre); color: var(--beton-alt); }
  .contact__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; }
  .contact__value { font-family: var(--font-display); font-size: clamp(0.95rem, 4vw, 1.15rem); font-weight: 500; overflow-wrap: anywhere; }
  .contact__address { border: 1px solid var(--acier-clair); padding: 1rem 1.25rem; }
  .contact__address a { display: inline-block; margin-block-start: 0.75rem; color: var(--terracotta-texte); text-decoration: underline; text-underline-offset: 0.2em; }
  .contact__hours summary { cursor: pointer; font-weight: 500; padding: 1rem 1.25rem; border: 1px solid var(--acier-clair); }
  .contact__hours dl { padding: 1rem 1.25rem; border-inline: 1px solid var(--acier-clair); border-block-end: 1px solid var(--acier-clair); }
  .contact__hours dl > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.35rem; font-size: 0.9rem; }
  .contact__map { position: relative; border: 2px solid var(--acier); min-height: 22rem; background: var(--beton); }
  .contact__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.3) contrast(1.05); }
  .contact__map-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    text-align: center;
    background-image:
      linear-gradient(var(--acier-clair) 1px, transparent 1px),
      linear-gradient(90deg, var(--acier-clair) 1px, transparent 1px);
    background-size: 3rem 3rem;
  }
  .contact__map-placeholder p { background: var(--beton); padding: 0.25rem 0.5rem; }
  .contact__map-note { font-size: 0.78rem; color: var(--acier-texte); max-width: 40ch; }

  /* ---------- FOOTER ---------- */
  .site-footer { background: var(--encre); color: var(--beton-alt); }
  .site-footer__inner {
    padding: 2.5rem var(--gutter);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.78rem;
  }
  .site-footer a { text-decoration: underline; text-underline-offset: 0.2em; }
  .site-footer a:hover { color: color-mix(in oklch, var(--terracotta) 60%, var(--beton-alt)); }

  /* ---------- PAGES SECONDAIRES (mentions légales, 404) ---------- */
  .page {
    padding-inline: var(--gutter);
    padding-block-end: var(--section-pad);
  }
  .page .section-title { padding-inline: 0; }
  .page h2 { font-size: var(--step-h3); margin-block: 2.5rem 0.75rem; }
  .page p, .page li { margin-block-end: 0.75rem; max-width: 70ch; }
  .page ul { list-style: square; padding-inline-start: 1.25rem; }
  .page a:not(.btn) { color: var(--terracotta-texte); text-decoration: underline; text-underline-offset: 0.2em; }
  .page .btn { margin-block-start: 1.5rem; }
  .todo { background: oklch(0.92 0.08 90); padding: 0 0.25rem; }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}

/* ---------- CONTAINER QUERIES ---------- */
.services__list, .contact__grid {
  container-type: inline-size;
}

@container (max-width: 700px) {
  .services__item { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .nav { display: none; }
  .site-header__inner { grid-template-columns: auto 1fr auto auto; }
  .burger { display: flex; }

  .nav[data-open="true"] {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--beton-alt);
    border-bottom: 1px solid var(--acier-clair);
  }
  .nav[data-open="true"] .nav__list { flex-direction: column; gap: 0; }
  .nav[data-open="true"] .nav__list a { display: block; padding: 1rem var(--gutter); border-bottom: 1px solid var(--acier-clair); }
  .nav[data-open="true"] .nav__list li:last-child a { border-bottom: none; }
  .btn-call { grid-column: 3; }
  .burger { grid-column: 4; }
}

@media (max-width: 900px) {
  .apropos__grid { grid-template-columns: 1fr; }
  .apropos__media { grid-column: 1 / -1; position: static; }
  .apropos__text { grid-column: 1 / -1; }

  .contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .btn-call { display: none; }
  .burger { grid-column: 3; }
  .site-header--simple .btn-call { display: inline-block; }

  .data-strip { grid-template-columns: repeat(2, 1fr); }
  .data-strip > div:nth-child(2) { border-inline-end: none; }

  .realisations__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 45vw);
    grid-template-areas:
      "p1 l1"
      "p1 l2"
      "p2 l3"
      "p2 l4";
  }
}