/* ============================================================
   Système Perspectives — « produit moderne »
   Référence : trysynara.com (valeurs relevées sur le site réel)

   Ce qui fait la qualité, et qu'il ne faut pas casser :
     · UN SEUL GROTESQUE, aucune serif. La graisse 500 porte tout.
     · Interlettre NÉGATIVE sur les titres (−3,5 à −4,5 %).
     · Tailles SOBRES : le titre principal du site de référence fait 48 px, pas 110.
     · Étiquettes capitales de 12 px, gris, interlettre POSITIVE (+8 %).
     · Palette neutre : blanc cassé, noir neutre, UN accent rust employé avec parcimonie.
     · Composition : beaucoup de sections courtes, chacune étiquette + titre + contenu.
   ============================================================ */

@font-face {
  font-family: "Geist";
  src: url("polices/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("polices/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* surfaces */
  --fond:        #f5f4f2;
  --fond-creux:  #e8e6e2;
  --fond-haut:   #fbfaf8;
  --encre:       #141413;
  --encre-2:     #121110;
  --blanc:       #ffffff;

  /* texte */
  --texte:       #141413;
  --texte-2:     #66635e;
  --texte-3:     #8f8b84;
  --texte-clair: #f5f4f2;

  /* accent — un seul */
  --accent:      #a43a0a;
  --accent-clair:#d97757;

  /* traits */
  --trait:       rgba(20, 20, 19, .10);
  --trait-fort:  rgba(20, 20, 19, .18);
  --trait-clair: rgba(245, 244, 242, .16);

  /* typographie */
  --t-heros:   clamp(2.25rem, 5.4vw, 4rem);      /* 36 → 64 px */
  --t-1:       clamp(1.625rem, 2.6vw, 2rem);     /* 26 → 32 px */
  --t-2:       clamp(1.25rem, 1.9vw, 1.5rem);    /* 20 → 24 px */
  --t-3:       1.0625rem;
  --t-corps:   1rem;
  --t-petit:   .875rem;
  --t-etiq:    .75rem;

  --interlettre-titre: -.035em;
  --interlettre-heros: -.042em;
  --interlettre-etiq:  .08em;

  /* rythme */
  --conteneur: 68rem;      /* 1088 px */
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --section:   clamp(3.5rem, 7vw, 6.5rem);
  --rayon:     14px;

  --ombre: 0 1px 2px rgba(20,20,19,.04), 0 8px 24px rgba(20,20,19,.06);

  /* grain de matière, dessiné — remplacé par de vraies photos quand la photothèque arrive */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  /* veines de bois, dessinées — remplacent la photo dans le repli du héro */
  --veines: repeating-linear-gradient(93deg,
      rgba(255,255,255,.055) 0px 1px,
      rgba(0,0,0,.07) 2px 4px,
      rgba(255,255,255,.02) 6px 9px,
      rgba(0,0,0,.045) 11px 15px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-corps);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.conteneur {
  width: 100%;
  max-width: var(--conteneur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* ---------- étiquettes : 12 px, capitales, gris, interlettre positive ---------- */
.etiquette {
  margin: 0 0 1.25rem;
  font-size: var(--t-etiq);
  font-weight: 500;
  letter-spacing: var(--interlettre-etiq);
  text-transform: uppercase;
  color: var(--texte-2);
  font-variant-numeric: tabular-nums;
}
.etiquette--accent { color: var(--accent); }
.etiquette--clair  { color: rgba(245,244,242,.72); }

/* ---------- titres : graisse 500, interlettre négative ---------- */
h1, h2, h3 { margin: 0; font-weight: 500; }
h1 {
  font-size: var(--t-heros);
  line-height: 1.06;
  letter-spacing: var(--interlettre-heros);
  max-width: 20ch;
}
h2 {
  font-size: var(--t-1);
  line-height: 1.12;
  letter-spacing: var(--interlettre-titre);
  max-width: 26ch;
}
h3 {
  font-size: var(--t-2);
  line-height: 1.18;
  letter-spacing: var(--interlettre-titre);
}
p { margin: 0; }

.chapeau {
  margin-top: 1.25rem;
  max-width: 46ch;
  font-size: var(--t-3);
  line-height: 1.5;
  color: var(--texte-2);
}
.chapeau--clair { color: rgba(245, 244, 242, .82); }
.chapeau--clair { color: rgba(245, 244, 242, .82); }
.meta {
  margin-top: 1.5rem;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--t-petit);
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- pastilles ---------- */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6875rem 1.125rem;
  border-radius: 999px;
  font-size: var(--t-petit);
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 1px solid transparent;
  min-height: 44px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.pastille:hover { transform: translateY(-1px); }
.pastille--sombre { background: var(--encre); color: var(--blanc); }
.pastille--sombre:hover { background: #2b2a27; }
.pastille--clair { background: var(--fond-haut); color: var(--encre); }
.pastille--clair:hover { background: var(--blanc); }
.pastille--fantome { border-color: var(--trait-clair); color: var(--fond); }
.pastille--fantome:hover { border-color: rgba(245,244,242,.4); background: rgba(255,255,255,.06); }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ---------- bandeau de démonstration ---------- */
.bandeau {
  background: var(--encre);
  color: rgba(245,244,242,.78);
  font-size: var(--t-petit);
  border-bottom: 1px solid var(--trait-clair);
}
.bandeau .conteneur {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: .625rem;
}
.bandeau b { color: var(--fond); font-weight: 500; }
.bandeau a { color: var(--accent-clair); text-decoration: none; font-weight: 500; }
.bandeau a:hover { text-decoration: underline; }

/* ---------- en-tête ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245,244,242,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.entete.compact { border-bottom-color: var(--trait); background: rgba(245,244,242,.94); }

/* Le bouton d'appel de l'en-tête ne double pas celui du héro : il n'apparaît qu'une fois
   le héro franchi, et reste ensuite disponible pendant tout le défilement.
   Sans JavaScript la classe `js` n'existe pas : le bouton reste visible, la page fonctionne. */
html.js .entete .pastille {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
html.js .entete.passe .pastille { opacity: 1; transform: none; pointer-events: auto; }
.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .875rem;
}
.marque {
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
}
.nav { display: flex; gap: 1.5rem; }
.nav a {
  font-size: var(--t-petit);
  color: var(--texte-2);
  text-decoration: none;
  transition: color .16s ease;
}
.nav a:hover { color: var(--texte); }

/* ---------- héro : photo pleine page, texte clair par-dessus ---------- */
.heros {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(78vh, 44rem);
  background: var(--encre);
  color: var(--texte-clair);
  overflow: hidden;
  isolation: isolate;
}
.heros-fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* La photo d'abord ; si elle manque, le repli « matière » dessiné prend le relais. */
  background-image:
    url("photos/heros.jpg"),
    var(--veines),
    linear-gradient(155deg, #7b5330 0%, #5c3c20 44%, #3c2715 100%);
  background-size: cover;
  background-position: center;
}
.heros-fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .3;
  mix-blend-mode: overlay;
}
/* voile : il n'assombrit franchement que le bas et la gauche, là où se pose le texte.
   En haut, la matière reste visible. */
.heros::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,
      rgba(18,17,16,.96) 0%,
      rgba(18,17,16,.90) 20%,
      rgba(18,17,16,.62) 40%,
      rgba(18,17,16,.22) 68%,
      rgba(18,17,16,.06) 100%),
    linear-gradient(to right,
      rgba(18,17,16,.88) 0%,
      rgba(18,17,16,.58) 36%,
      rgba(18,17,16,.14) 70%,
      rgba(18,17,16,0) 100%);
}
.heros-contenu { padding-block: clamp(3.5rem, 8vw, 6rem); width: 100%; }
.heros h1 { color: var(--blanc); }
.heros .chapeau { color: rgba(245,244,242,.88); }
.heros .etiquette { color: rgba(245,244,242,.9); }

/* L'arrivée : la matière respire lentement, puis le texte monte. C'est ce qui retient. */
@media (prefers-reduced-motion: no-preference) {
  .heros-fond { animation: respire 22s cubic-bezier(.3,.7,.4,1) forwards; }
  .heros .etiquette,
  .heros h1,
  .heros .chapeau,
  .heros .actions,
  .heros .meta { animation: monte .75s cubic-bezier(.2,.7,.3,1) backwards; }
  .heros h1 { animation-delay: .05s; }
  .heros .chapeau { animation-delay: .12s; }
  .heros .actions { animation-delay: .19s; }
  .heros .meta { animation-delay: .26s; }
}
@keyframes respire { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes monte { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- bande de familles ---------- */
.familles { border-bottom: 1px solid var(--trait); background: var(--fond); }
.familles ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  margin: 0;
  padding: 1.25rem 0;
  list-style: none;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--t-petit);
  letter-spacing: -.01em;
  color: var(--texte-2);
}
.familles li { display: flex; align-items: center; gap: .625rem; }
.familles li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* ---------- sections ---------- */
.section { padding-block: var(--section); }
.section--creux { background: var(--fond-creux); border-block: 1px solid var(--trait); }

/* métier : liste de métier, en deux colonnes, sans définition */
.liste-metier {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
  border-top: 1px solid var(--trait);
}
.liste-metier li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--trait);
  font-size: var(--t-3);
  letter-spacing: -.015em;
}
.liste-metier .rang {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--t-petit);
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ---------- cartes ---------- */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.carte {
  background: var(--fond-haut);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.carte-corps { padding: 1.5rem; }
.carte h3 + p { margin-top: .625rem; color: var(--texte-2); font-size: var(--t-petit); line-height: 1.6; }
.matiere {
  height: 11rem;
  position: relative;
  background-image:
    url("photos/bois-massif.jpg"),
    var(--veines),
    linear-gradient(140deg, #6b4423 0%, #8c5a32 55%, #4e3118 100%);
  background-size: cover;
  background-position: center;
}
.matiere::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .22;
  mix-blend-mode: overlay;
}
.matiere--pvc {
  background-image: linear-gradient(140deg, #d8d5d0 0%, #b9b5af 55%, #918d87 100%);
}

/* ---------- galerie : emplacements photo ---------- */
.galerie { padding-block: var(--section); background: var(--encre); }
.galerie h2 { color: var(--blanc); }
.galerie .etiquette { color: rgba(245,244,242,.72); }
.galerie-inner {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  height: clamp(24rem, 58vw, 40rem);
  margin-top: 2.5rem;
}
.vue {
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid var(--trait-clair);
  background-size: cover;
  background-position: center;
}
.vue::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .2;
  mix-blend-mode: overlay;
}
/* Chaque emplacement reçoit une matière différente : la lumière d'abord, puis le détail, puis la quincaillerie. */
.vue--1 { grid-row: span 2; background-image: url("photos/lumiere.jpg"),      var(--veines), linear-gradient(150deg, #8a5a30 0%, #3f2814 100%); }
.vue--2 { background-image: url("photos/detail-bois.jpg"), var(--veines), linear-gradient(150deg, #2b2723 0%, #16140f 100%); }
.vue--3 { background-image: url("photos/quincaillerie.jpg"), var(--veines), linear-gradient(150deg, #b08a5e 0%, #6a4522 100%); }
.vue figcaption {
  position: absolute;
  left: 1rem; bottom: 1rem;
  z-index: 1;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--t-etiq);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(245,244,242,.8);
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* ---------- l'entreprise : le texte et l'outil côte à côte ---------- */
.entreprise-grille {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.rabot {
  margin: 0;
  height: clamp(15rem, 30vw, 22rem);
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  background-size: cover;
  background-position: center;
  background-image:
    url("photos/mains.jpg"),
    var(--veines),
    linear-gradient(150deg, #4a3520 0%, #241a10 100%);
}
@media (max-width: 52rem) {
  .entreprise-grille { grid-template-columns: 1fr; }
}

/* ---------- contact ---------- */
.contact {
  background: var(--encre);
  color: var(--texte-clair);
  padding-block: var(--section);
  border-top: 1px solid var(--trait-clair);
}
.contact h2 { color: var(--blanc); max-width: 22ch; }
.telephone {
  display: inline-block;
  margin-top: 2rem;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: clamp(1.75rem, 5.2vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--blanc);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color .18s ease;
}
.telephone:hover { color: var(--accent-clair); }
.coordonnees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem 2.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--trait-clair);
}
.coordonnees dt {
  font-size: var(--t-etiq);
  font-weight: 500;
  letter-spacing: var(--interlettre-etiq);
  text-transform: uppercase;
  color: rgba(245,244,242,.55);
}
.coordonnees dd {
  margin: .5rem 0 0;
  font-size: var(--t-3);
  color: var(--texte-clair);
}
.coordonnees a { text-decoration: none; border-bottom: 1px solid var(--trait-clair); }
.coordonnees a:hover { border-bottom-color: rgba(245,244,242,.5); }

/* ---------- pied de page ---------- */
.pied {
  background: var(--encre-2);
  color: rgba(245,244,242,.5);
  font-size: var(--t-petit);
  padding-block: 2rem;
}
.pied .conteneur {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}
.pied p { max-width: 60ch; }

/* ---------- apparitions ---------- */
.revele { opacity: 0; transform: translateY(10px); }
.revele.vu { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
@media (prefers-reduced-motion: reduce) {
  .revele { opacity: 1; transform: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 52rem) {
  .nav { display: none; }
  .liste-metier { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .galerie-inner { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .vue { height: 13rem; }
  .vue--1 { grid-row: auto; height: 17rem; }
}