/* Maillure · site de la menuiserie (étude de création).
   Young Serif pour les titres, Public Sans pour le texte et l'interface. Polices SIL OFL locales.
   Le copeau pour le fond, le noyer pour l'encre, le sapin pour les cotes, le chêne pour le bois.
   Pas de photo : chaque pièce est montrée en élévation, cotée comme sur le plan d'atelier.
   Mobile d'abord : contrôlé de 320 à 1 440 px. Le filtre des réalisations marche sans script. */
@font-face { font-family: "Young Serif"; src: url("../../fonts/YoungSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Public Sans"; src: url("../../fonts/PublicSans-wght.woff2") format("woff2"); font-weight: 300 800; font-display: block; }

:root {
  --noyer: #33241A;
  --noyer-2: #46342A;
  --chene: #C99A62;
  --chene-pale: #E6CFAE;
  --copeau: #F3EDE2;
  --blanc: #FBF8F3;
  --sapin: #34503F;
  --brou: #6E5644;
  --filet: rgba(51, 36, 26, .16);
  --young: "Young Serif", Georgia, serif;
  --sans: "Public Sans", system-ui, sans-serif;
  --gouttiere: clamp(20px, 5vw, 64px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--blanc); color: var(--noyer); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--sapin); outline-offset: 3px; }
.evitement { position: absolute; left: -9999px; top: 0; }
.evitement:focus { left: 12px; top: 12px; z-index: 10; padding: 10px 14px; background: var(--noyer); color: var(--blanc); }
.enveloppe { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gouttiere); }
h1, h2, h3 { font-family: var(--young); font-weight: 400; letter-spacing: -.01em; }
.surtitre { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sapin); }
.surtitre--clair { color: var(--chene-pale); }

.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--noyer); color: var(--noyer); white-space: nowrap; border-radius: 2px; transition: background .2s, color .2s; }
.bouton:hover { background: var(--noyer); color: var(--blanc); }
.bouton--plein { background: var(--noyer); color: var(--blanc); }
.bouton--plein:hover { background: var(--sapin); }
.bouton--clair { background: var(--copeau); color: var(--noyer); box-shadow: none; }
.bouton--clair:hover { background: var(--chene); color: var(--noyer); }
.bouton--grand { min-height: 54px; padding: 0 26px; }

/* En-tête */
.tete { position: sticky; top: 0; z-index: 5; background: rgba(251, 248, 243, .97); border-bottom: 1px solid var(--filet); }
.tete__in { display: flex; align-items: center; gap: 28px; height: 74px; }
.tete__logo img { height: 36px; width: auto; }
.nav { display: none; margin-left: auto; gap: 30px; font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--chene); }
.tete .bouton { margin-left: auto; }

/* Ouverture */
.ouverture { padding: 40px 0 64px; }
.ouverture__grille { display: grid; gap: 36px; }
h1 { margin-top: 16px; font-size: clamp(40px, 9.4vw, 80px); line-height: 1.02; }
.chapo { margin-top: 20px; max-width: 32em; font-size: 17px; color: var(--brou); }
.actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.note { margin-top: 18px; display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--brou); }
.cote-trait { position: relative; width: 26px; height: 1.5px; flex: none; background: var(--sapin); }
.cote-trait::before, .cote-trait::after { content: ""; position: absolute; top: -4px; width: 1.5px; height: 9px; background: var(--sapin); }
.cote-trait::before { left: 0; }
.cote-trait::after { right: 0; }
.calque { background: var(--copeau); padding: 22px 22px 18px; }
.calque svg { width: 100%; height: auto; }
.calque figcaption { margin-top: 12px; font-size: 13.5px; color: var(--brou); }
.dessin .plein { fill: var(--chene); stroke: var(--noyer); stroke-width: 1.5; stroke-linejoin: round; }
.dessin .clair { fill: var(--chene-pale); stroke: var(--noyer); stroke-width: 1.5; stroke-linejoin: round; }
.dessin .trait, .dessin .fin { fill: none; stroke: var(--noyer); stroke-width: 1.5; }
.dessin .fin { stroke-width: 1; }
.dessin .marche { fill: none; stroke: var(--noyer); stroke-width: 3.5; stroke-linecap: square; }
.dessin .main { fill: none; stroke: var(--sapin); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dessin .poignee { stroke: var(--noyer); stroke-width: 2.6; stroke-linecap: round; }
.dessin .livres rect { fill: var(--brou); }
.sol { stroke: var(--noyer); stroke-width: 1; stroke-dasharray: 5 4; }
.cote path { fill: none; stroke: var(--sapin); stroke-width: 1.3; }
.cote-texte rect { fill: var(--copeau); }
.cote-texte text { font-family: var(--sans); font-weight: 600; font-size: 12.5px; text-anchor: middle; fill: var(--sapin); }

/* Réalisations */
.realisations { padding: 64px 0 72px; background: var(--copeau); }
h2 { margin-top: 12px; font-size: clamp(32px, 6vw, 54px); line-height: 1.06; }
.filtres { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.filtres input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filtres label { min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 20px; box-shadow: inset 0 0 0 1.5px var(--filet); }
.filtres input:checked + label { background: var(--noyer); color: var(--blanc); box-shadow: none; }
.filtres input:focus-visible + label { outline: 2px solid var(--sapin); outline-offset: 2px; }
.pieces { margin-top: 26px; display: grid; gap: 18px; }
.portfolio:has(#f-tables:checked) .piece:not([data-type="tables"]),
.portfolio:has(#f-escaliers:checked) .piece:not([data-type="escaliers"]),
.portfolio:has(#f-cuisines:checked) .piece:not([data-type="cuisines"]),
.portfolio:has(#f-rangements:checked) .piece:not([data-type="rangements"]) { display: none; }
.piece { background: var(--blanc); padding: 16px 16px 20px; }
.vue { background: var(--copeau); padding: 10px 16px 4px; }
.vue svg { width: 100%; height: auto; }
.piece h3 { margin-top: 16px; font-size: 22px; line-height: 1.15; }
.piece p { margin-top: 4px; font-size: 14px; color: var(--brou); }

/* L'atelier */
.atelier { padding: 64px 0 72px; background: var(--noyer); color: var(--copeau); }
.atelier h2 { color: var(--blanc); }
.etapes { margin-top: 32px; display: grid; gap: 22px; }
.etapes li { padding-top: 16px; border-top: 1px solid rgba(243, 237, 226, .22); }
.etapes span { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--chene); }
.etapes h3 { margin-top: 6px; font-size: 24px; color: var(--blanc); }
.etapes p { margin-top: 6px; font-size: 15px; color: #DDD2C3; }

/* Le bois */
.bois { padding: 64px 0 72px; }
.essences { margin-top: 30px; display: grid; gap: 22px; }
.essences li { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; align-items: start; }
.ech { grid-row: span 2; width: 64px; height: 64px; border-radius: 0 64px 0 0; }
.ech--chene { background: repeating-radial-gradient(circle at 0 100%, #C99A62 0 7px, #B58450 7px 9px); }
.ech--frene { background: repeating-radial-gradient(circle at 0 100%, #E3CFAE 0 8px, #CDB48C 8px 10px); }
.ech--noyer { background: repeating-radial-gradient(circle at 0 100%, #5B4130 0 6px, #46321F 6px 8px); }
.ech--hetre { background: repeating-radial-gradient(circle at 0 100%, #DDB792 0 9px, #C99E77 9px 11px); }
.essences h3 { font-size: 22px; line-height: 1.1; }
.essences p { margin-top: 4px; font-size: 14.5px; color: var(--brou); }

/* Appel */
.appel { padding: 64px 0; background: var(--sapin); color: #E9EFE9; }
.appel h2 { color: var(--blanc); margin-top: 0; }
.appel p { margin-top: 12px; max-width: 30em; }
.appel .bouton { margin-top: 24px; }

/* Pied */
.pied { background: var(--noyer); color: #DDD2C3; padding: 56px 0 28px; font-size: 14.5px; }
.pied__grille { display: grid; gap: 28px; }
.pied__logo { height: 40px; width: auto; }
.pied h3 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--chene); }
.pied p { margin-top: 6px; }
.pied__bas { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(243, 237, 226, .18); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px; }

@media (min-width: 640px) {
  .pieces { grid-template-columns: 1fr 1fr; }
  .etapes { grid-template-columns: 1fr 1fr; }
  .essences { grid-template-columns: 1fr 1fr; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .nav { display: flex; }
  .tete .bouton { margin-left: 0; }
  .ouverture { padding: 64px 0 88px; }
  .ouverture__grille { grid-template-columns: 1fr 1.08fr; align-items: center; gap: 56px; }
  .pieces { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .etapes { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .essences { grid-template-columns: repeat(4, 1fr); }
  .essences li { grid-template-columns: 1fr; row-gap: 14px; }
  .ech { grid-row: auto; }
  .appel__in { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 40px; }
  .appel__in p { grid-column: 1; }
  .appel .bouton { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
@media (max-width: 359px) {
  .tete__logo img { height: 28px; }
  .tete .bouton { padding: 0 12px; font-size: 13.5px; }
  .bouton--grand { padding: 0 18px; }
}