/* =========================================================================
   Laurent Bastide Carrelage - Castries (34160)
   Direction : "calepinage-emaille"
   Le calepinage est le plan de pose du carreleur : axes, modules, joints.
   Toute la page est batie sur cette grille. Les matieres sont dessinees en
   CSS (aucune photographie du site source n'est reproduite, ses images
   etant explicitement protegees).

   Regles de forme verrouillees pour toute la page :
   - rayon : boutons = pilule complete, cartes = 16px, echantillons = 10px
   - un seul accent : --flamme (rouge de glacure)
   - une seule famille de gris : neutres froids a nuance verte
   ========================================================================= */

/* ---------------------------------------------------------------- fontes */
@font-face {
  font-family: "Epilogue";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/epilogue-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Epilogue";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/epilogue-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --------------------------------------------------------------- jetons  */
:root {
  --plan: #e9ece7;
  --plan-2: #dfe4de;
  --plan-3: #d2d9d2;
  --joint: #b9c3ba;
  --glaze: #0f2a21;
  --glaze-2: #17392c;
  --ink: #0f2a21;
  --ink-soft: #46584f;
  --ink-faint: #71837a;
  --line: rgba(15, 42, 33, 0.14);
  --line-soft: rgba(15, 42, 33, 0.08);
  --shell: rgba(15, 42, 33, 0.045);
  --flamme: #c33f27;
  --flamme-ink: #fdf3f0;
  --on-glaze: #e4eae4;
  --on-glaze-soft: #a8bbb0;

  --r-card: 16px;
  --r-mat: 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gut: clamp(20px, 5vw, 64px);
  --max: 1320px;

  --f-display: "Epilogue", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --plan: #101d18;
    --plan-2: #16261f;
    --plan-3: #1d3128;
    --joint: #2b473a;
    --glaze: #0a1712;
    --glaze-2: #12271e;
    --ink: #e2e9e3;
    --ink-soft: #a5b7ac;
    --ink-faint: #7d9188;
    --line: rgba(226, 233, 227, 0.16);
    --line-soft: rgba(226, 233, 227, 0.08);
    --shell: rgba(226, 233, 227, 0.04);
    --flamme: #e2795f;
    --flamme-ink: #1a0d09;
    --on-glaze: #e2e9e3;
    --on-glaze-soft: #9db0a5;
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--plan);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(15.5px, 1.05vw, 17px);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* grain fixe, hors flux de defilement (aucun repaint sur le scroll) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  body::after {
    mix-blend-mode: screen;
    opacity: 0.035;
  }
}

h1,
h2,
h3,
h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

:focus-visible {
  outline: 2px solid var(--flamme);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 60;
  background: var(--glaze);
  color: var(--on-glaze);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  transition: top 0.25s var(--ease);
}
.skip:focus {
  top: 12px;
}

/* ================================================= bandeau de prévisualisation */
.preview {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--flamme);
  color: var(--flamme-ink);
  font-size: 0.82rem;
  line-height: 1.45;
  letter-spacing: 0.005em;
}
.preview__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding-block: 9px;
}
.preview strong {
  font-weight: 600;
}
.preview a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}
.preview a:hover {
  text-decoration-thickness: 2px;
}

/* ============================================================== navigation */
.nav {
  position: relative;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: var(--plan);
}
.nav__in {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  min-width: 0;
}
.brand__mark {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 7px;
  background: var(--glaze);
  position: relative;
  overflow: hidden;
}
/* le monogramme est un quart de carreau : deux modules et un joint */
.brand__mark::before,
.brand__mark::after {
  content: "";
  position: absolute;
  background: var(--plan);
}
.brand__mark::before {
  inset: 7px 18px 7px 7px;
}
.brand__mark::after {
  inset: 7px 7px 18px 18px;
  background: var(--flamme);
}
.brand__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.brand__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.028em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand__role {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  font-size: 0.9rem;
}
.nav__links a {
  text-decoration: none;
  color: var(--ink-soft);
  position: relative;
  padding-block: 4px;
  white-space: nowrap;
  transition: color 0.35s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 100%;
  background: var(--flamme);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav__links a:hover {
  color: var(--ink);
}
.nav__links a:hover::after {
  transform: scaleX(1);
}

/* ================================================================ boutons */
.btn {
  --bg: var(--glaze);
  --fg: var(--on-glaze);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px 13px 24px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease),
    background-color 0.5s var(--ease);
  box-shadow: 0 1px 0 rgba(15, 42, 33, 0.08), 0 12px 26px -18px rgba(15, 42, 33, 0.7);
}
.btn__ico {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  display: grid;
  place-items: center;
  transition: transform 0.5s var(--ease), background-color 0.5s var(--ease);
}
.btn__ico svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:hover .btn__ico {
  transform: translate(2px, -1px) scale(1.06);
  background: rgba(255, 255, 255, 0.22);
}
.btn:active {
  transform: scale(0.985);
}
.btn--ghost {
  --bg: transparent;
  --fg: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}
.btn--ghost .btn__ico {
  background: var(--shell);
}
.btn--ghost:hover .btn__ico {
  background: rgba(15, 42, 33, 0.1);
}
.btn--flamme {
  --bg: var(--flamme);
  --fg: var(--flamme-ink);
}
.btn--onglaze {
  --bg: var(--on-glaze);
  --fg: var(--glaze);
}
.btn--sm {
  padding: 9px 11px 9px 18px;
  font-size: 0.88rem;
}
.btn--sm .btn__ico {
  width: 26px;
  height: 26px;
}

/* ================================================================= héros */
.hero {
  position: relative;
  padding-block: clamp(38px, 5.5vw, 76px) clamp(48px, 6vw, 92px);
  overflow: hidden;
}
/* axes de calepinage : deux traits de tracé, pas de la décoration gratuite,
   ils alignent le titre et le plateau de matières */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.hero__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 4.5vw, 68px);
  align-items: center;
}
.hero__copy {
  max-width: 640px;
}
.hero h1 {
  font-size: clamp(2.3rem, 3.62vw, 3.3rem);
  margin-bottom: 22px;
  max-width: 24ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--flamme);
}
.hero__sub {
  font-size: clamp(1.02rem, 1.25vw, 1.16rem);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 32px;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ------------------------------------------------- plateau de calepinage */
.board {
  position: relative;
  border-radius: 22px;
  padding: 10px;
  background: var(--shell);
  border: 1px solid var(--line-soft);
  max-width: 520px;
  margin-inline-start: auto;
  width: 100%;
}
.board__in {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  aspect-ratio: 1 / 1;
  gap: 6px;
  border-radius: 14px;
  overflow: hidden;
}
.board .mat {
  border-radius: 4px;
}
.board__cap {
  margin-top: 14px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 44ch;
}
/* calepinage : sept modules, aucun vide, la trame est entierement couverte */
.b-a {
  grid-area: 1 / 1 / 4 / 5;
}
.b-b {
  grid-area: 1 / 5 / 3 / 7;
}
.b-c {
  grid-area: 3 / 5 / 5 / 7;
}
.b-d {
  grid-area: 4 / 1 / 7 / 3;
}
.b-e {
  grid-area: 4 / 3 / 6 / 5;
}
.b-f {
  grid-area: 5 / 5 / 7 / 7;
}
.b-g {
  grid-area: 6 / 3 / 7 / 5;
}
/* module d'accent : un carreau de couleur dans le calepinage */
.b-accent {
  background: var(--flamme) !important;
}
.b-accent::before,
.b-accent::after {
  opacity: 0.28;
}

/* ============================================================= matières  */
/* Chaque échantillon est un appareillage réel dessiné en CSS :
   joints, modules et decalages correspondent aux poses citées. */
.mat {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-mat);
  background-color: var(--plan-2);
  isolation: isolate;
}
.mat::before,
.mat::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* chaque matière a son propre biscuit : la planche se lit comme un
   échantillonnage, pas comme une seule trame répétée */
.mat--gres {
  background-color: #e2e7e1;
}
.mat--metro {
  background-color: #eef1ec;
}
.mat--mosaique {
  background-color: #d9e0d9;
}
.mat--lames {
  background-color: #e6eae4;
}
.mat--parement {
  background-color: #ccd4cc;
}
.mat--dallage {
  background-color: #d6ddd6;
}
.mat--nivelage {
  background-color: #e2e7e1;
}
@media (prefers-color-scheme: dark) {
  .mat--gres {
    background-color: #1a2d25;
  }
  .mat--metro {
    background-color: #21372c;
  }
  .mat--mosaique {
    background-color: #16261f;
  }
  .mat--lames {
    background-color: #1d3128;
  }
  .mat--parement {
    background-color: #12241d;
  }
  .mat--dallage {
    background-color: #182a22;
  }
  .mat--nivelage {
    background-color: #1a2d25;
  }
}

/* voile de glaçure : la lumière rasante sur un carreau émaillé */
.mat--glaze-sheen {
  background-image: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0) 46%
  );
}

/* grès cérame grand format, pose droite */
.mat--gres {
  background-image: repeating-linear-gradient(
      to bottom,
      var(--joint) 0 2px,
      transparent 2px 62px
    ),
    repeating-linear-gradient(to right, var(--joint) 0 2px, transparent 2px 62px);
}
.mat--gres::before,
.mat--gres::after {
  content: none;
}

/* faïence métro, appareillage à coupe de pierre (demi-décalage) */
.mat--metro {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--joint) 0 2px,
    transparent 2px 26px
  );
}
.mat--metro::before,
.mat--metro::after {
  background-image: repeating-linear-gradient(
    to right,
    var(--joint) 0 2px,
    transparent 2px 54px
  );
}
.mat--metro::before {
  -webkit-mask-image: repeating-linear-gradient(
    to bottom,
    #000 0 26px,
    transparent 26px 52px
  );
  mask-image: repeating-linear-gradient(to bottom, #000 0 26px, transparent 26px 52px);
}
.mat--metro::after {
  background-position-x: 27px;
  -webkit-mask-image: repeating-linear-gradient(
    to bottom,
    transparent 0 26px,
    #000 26px 52px
  );
  mask-image: repeating-linear-gradient(to bottom, transparent 0 26px, #000 26px 52px);
}

/* mosaïque : trame fine sur nappe */
.mat--mosaique {
  background-image: repeating-linear-gradient(
      to bottom,
      var(--joint) 0 1.5px,
      transparent 1.5px 15px
    ),
    repeating-linear-gradient(to right, var(--joint) 0 1.5px, transparent 1.5px 15px);
}
.mat--mosaique::before {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(15, 42, 33, 0.05) 0 12px,
    transparent 12px 34px
  );
}
.mat--mosaique::after {
  content: none;
}

/* lames : imitation parquet, pose à coupe perdue */
.mat--lames {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--joint) 0 1.5px,
    transparent 1.5px 19px
  );
}
.mat--lames::before,
.mat--lames::after {
  background-image: repeating-linear-gradient(
    to right,
    var(--joint) 0 1.5px,
    transparent 1.5px 118px
  );
}
.mat--lames::before {
  -webkit-mask-image: repeating-linear-gradient(
    to bottom,
    #000 0 19px,
    transparent 19px 38px
  );
  mask-image: repeating-linear-gradient(to bottom, #000 0 19px, transparent 19px 38px);
}
.mat--lames::after {
  background-position-x: 59px;
  -webkit-mask-image: repeating-linear-gradient(
    to bottom,
    transparent 0 19px,
    #000 19px 38px
  );
  mask-image: repeating-linear-gradient(to bottom, transparent 0 19px, #000 19px 38px);
}

/* pierres de parement : assises irrégulières */
.mat--parement {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--joint) 0 2px,
    transparent 2px 21px,
    var(--joint) 21px 23px,
    transparent 23px 55px,
    var(--joint) 55px 57px,
    transparent 57px 84px
  );
}
.mat--parement::before,
.mat--parement::after {
  background-image: repeating-linear-gradient(
    to right,
    var(--joint) 0 2px,
    transparent 2px 46px,
    var(--joint) 46px 48px,
    transparent 48px 119px
  );
}
.mat--parement::before {
  -webkit-mask-image: repeating-linear-gradient(
    to bottom,
    #000 0 42px,
    transparent 42px 84px
  );
  mask-image: repeating-linear-gradient(to bottom, #000 0 42px, transparent 42px 84px);
}
.mat--parement::after {
  background-position-x: 71px;
  -webkit-mask-image: repeating-linear-gradient(
    to bottom,
    transparent 0 42px,
    #000 42px 84px
  );
  mask-image: repeating-linear-gradient(to bottom, transparent 0 42px, #000 42px 84px);
}

/* dallage extérieur : grands modules, joints larges */
.mat--dallage {
  background-image: repeating-linear-gradient(
      to bottom,
      var(--joint) 0 3px,
      transparent 3px 88px
    ),
    repeating-linear-gradient(to right, var(--joint) 0 3px, transparent 3px 88px);
}
.mat--dallage::before {
  background-image: repeating-linear-gradient(
      to bottom,
      rgba(15, 42, 33, 0.07) 0 44px,
      transparent 44px 88px
    ),
    repeating-linear-gradient(to right, rgba(15, 42, 33, 0.07) 0 44px, transparent 44px 88px);
  mix-blend-mode: multiply;
}
.mat--dallage::after {
  content: none;
}

/* nivelage : ragréage, le sol redevient plan */
.mat--nivelage {
  background-image: linear-gradient(
    to bottom,
    var(--plan-3) 0%,
    var(--plan-2) 46%,
    var(--plan-2) 100%
  );
}
.mat--nivelage::before {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(15, 42, 33, 0.1) 0 1px,
    transparent 1px 13px
  );
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 52%);
  mask-image: linear-gradient(to bottom, #000, transparent 52%);
}
.mat--nivelage::after {
  border-top: 2px solid var(--joint);
  top: 52%;
  inset-inline: 0;
  bottom: auto;
  height: 0;
}

/* sur fond sombre les matières sont plus contrastées */
@media (prefers-color-scheme: dark) {
  .mat--glaze-sheen {
    background-image: linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0) 46%
    );
  }
  .mat--dallage::before,
  .mat--mosaique::before {
    mix-blend-mode: screen;
    background-image: repeating-linear-gradient(
      135deg,
      rgba(226, 233, 227, 0.05) 0 12px,
      transparent 12px 34px
    );
  }
}

/* ============================================================== sections */
.sec {
  padding-block: clamp(64px, 8vw, 118px);
  position: relative;
}
.sec--line {
  border-top: 1px solid var(--line);
}
.sec__head {
  max-width: 58ch;
  margin-bottom: clamp(34px, 4vw, 56px);
}
.sec__head h2 {
  font-size: clamp(1.95rem, 3.1vw, 2.9rem);
  margin-bottom: 16px;
}
.sec__head p {
  color: var(--ink-soft);
  max-width: 52ch;
}
.eyebrow {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--flamme);
  margin-bottom: 18px;
}

/* ------------------------------------------------------ prestations bento */
.presta {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  background: var(--shell);
  border: 1px solid var(--line-soft);
  padding: 10px;
  overflow: hidden;
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line);
}
.card .mat {
  height: 122px;
  flex: none;
}
.card__body {
  padding: 20px 12px 12px;
}
.card h3 {
  font-size: 1.16rem;
  letter-spacing: -0.028em;
  margin-bottom: 8px;
}
.card p {
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.6;
}
.p-1 {
  grid-column: span 3;
}
.p-1 .mat {
  height: 208px;
}
.p-2 {
  grid-column: span 3;
}
.p-2 .mat {
  height: 208px;
}
.p-3,
.p-4,
.p-5,
.p-6 {
  grid-column: span 3;
}
@media (min-width: 1080px) {
  /* six prestations, six cellules, trois rythmes : 3+3, 2+4, 3+3 */
  .p-3 {
    grid-column: span 2;
  }
  .p-4 {
    grid-column: span 4;
  }
  .p-3 .mat,
  .p-4 .mat {
    height: 118px;
  }
}

/* ------------------------------------------------------------- pièces   */
.pieces {
  border-top: 1px solid var(--line);
}
.piece {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: baseline;
  gap: 18px 40px;
  padding-block: clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--line);
}
.piece__t {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.1;
}
.piece__d {
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.piece .mat {
  display: none;
}

/* ------------------------------------------------------------ bande devis */
.devis {
  background: var(--glaze);
  color: var(--on-glaze);
  position: relative;
  overflow: hidden;
}
.devis::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
      to bottom,
      rgba(226, 233, 227, 0.07) 0 1px,
      transparent 1px 74px
    ),
    repeating-linear-gradient(to right, rgba(226, 233, 227, 0.07) 0 1px, transparent 1px 74px);
  -webkit-mask-image: radial-gradient(120% 110% at 82% 20%, #000, transparent 72%);
  mask-image: radial-gradient(120% 110% at 82% 20%, #000, transparent 72%);
}
.devis__in {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-block: clamp(52px, 6vw, 82px);
}
.devis h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  max-width: 17ch;
}
.devis p {
  color: var(--on-glaze-soft);
  margin-top: 14px;
  max-width: 40ch;
}
.devis__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --------------------------------------------------------- zone + fiche  */
.zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(30px, 4vw, 62px);
  align-items: start;
}
.zone__txt h2 {
  font-size: clamp(1.95rem, 3.1vw, 2.9rem);
  margin-bottom: 20px;
}
.zone__txt p {
  color: var(--ink-soft);
  max-width: 48ch;
  margin-bottom: 16px;
}
.fiche {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--shell);
  padding: 8px;
}
.fiche__in {
  border-radius: 10px;
  background: var(--plan);
  border: 1px solid var(--line-soft);
  padding: clamp(20px, 2.4vw, 30px);
}
.fiche h3 {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin-bottom: 20px;
}
.fiche dl {
  margin: 0;
  display: grid;
  gap: 15px;
}
.fiche dt {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.fiche dd {
  margin: 3px 0 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.fiche dd a {
  text-decoration: none;
  border-bottom: 1.5px solid var(--flamme);
  padding-bottom: 1px;
  transition: color 0.4s var(--ease);
}
.fiche dd a:hover {
  color: var(--flamme);
}
.fiche__note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.78rem;
  color: var(--ink-faint);
  line-height: 1.55;
}

/* ------------------------------------------------------------- contact  */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(30px, 4vw, 62px);
  align-items: start;
}
.coords {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}
.coord {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--shell);
  text-decoration: none;
  transition: transform 0.55s var(--ease), border-color 0.55s var(--ease),
    background-color 0.55s var(--ease);
}
a.coord:hover {
  transform: translateY(-2px);
  border-color: var(--flamme);
}
.coord__ico {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 10px;
  background: var(--plan-2);
  display: grid;
  place-items: center;
}
.coord__ico svg {
  width: 19px;
  height: 19px;
  stroke: var(--ink);
  stroke-width: 1.4;
  fill: none;
}
.coord__k {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.coord__v {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  margin-top: 2px;
}

/* formulaire désactivé : option de démonstration, aucune collecte */
.form {
  border-radius: var(--r-card);
  border: 1px dashed var(--line);
  background: var(--shell);
  padding: 8px;
}
.form__in {
  border-radius: 10px;
  background: var(--plan);
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line-soft);
}
.form__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 16px;
}
.form h3 {
  font-size: 1.24rem;
  margin-bottom: 10px;
}
.form > .form__in > p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 20px;
}
.form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  opacity: 0.5;
}
.form label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.form input,
.form textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--plan-2);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.94rem;
  padding: 11px 13px;
}
.form textarea {
  min-height: 84px;
  resize: none;
}
.form__fake {
  margin-top: 4px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--plan-2);
  color: var(--ink-faint);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.92rem;
  justify-self: start;
  cursor: not-allowed;
}

/* --------------------------------------------------------------- footer  */
.foot {
  background: var(--glaze);
  color: var(--on-glaze);
  padding-block: clamp(52px, 6vw, 76px) 30px;
}
.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(226, 233, 227, 0.16);
}
.foot h4 {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-glaze-soft);
  font-weight: 600;
  margin-bottom: 16px;
}
.foot__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.foot p,
.foot li {
  color: var(--on-glaze-soft);
  font-size: 0.93rem;
}
.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.foot a {
  color: var(--on-glaze);
  text-decoration: none;
  border-bottom: 1px solid rgba(226, 233, 227, 0.25);
  padding-bottom: 1px;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.foot a:hover {
  border-color: var(--flamme);
  color: var(--flamme);
}
.foot__bot {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--on-glaze-soft);
}

/* =============================================== pages secondaires (doc) */
.doc {
  padding-block: clamp(48px, 6vw, 84px) clamp(60px, 7vw, 100px);
}
.doc__head {
  max-width: 70ch;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.doc__head h1 {
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  margin-bottom: 18px;
}
.doc__head p {
  color: var(--ink-soft);
  max-width: 62ch;
}
.doc__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink-faint);
  text-decoration: none;
  margin-bottom: 22px;
}
.doc__back:hover {
  color: var(--flamme);
}
.doc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 18px;
}
.doc__block {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--shell);
  padding: clamp(22px, 2.6vw, 30px);
}
.doc__block h2 {
  font-size: 1.16rem;
  margin-bottom: 14px;
}
.doc__block h3 {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin: 18px 0 6px;
}
.doc__block p,
.doc__block li {
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.65;
}
.doc__block ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.doc__block a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--flamme);
}

/* --------------------------------------------------------- avant / après */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.shot {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--shell);
  padding: 8px;
}
.shot__frame {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--plan-2);
  aspect-ratio: 16 / 11;
}
.shot__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.shot__tag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 8px 4px;
}
.shot__tag strong {
  font-family: var(--f-display);
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.shot__tag span {
  font-size: 0.74rem;
  color: var(--ink-faint);
}
.shot__src {
  padding: 6px 8px 4px;
  font-size: 0.76rem;
  color: var(--ink-faint);
  line-height: 1.5;
}
.gains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 18px;
  margin-top: clamp(40px, 5vw, 66px);
}
.gain {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--shell);
  padding: clamp(20px, 2.4vw, 28px);
}
.gain h3 {
  font-size: 1.08rem;
  margin-bottom: 10px;
}
.gain p {
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.gain__n {
  font-family: var(--f-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--flamme);
  display: block;
  margin-bottom: 12px;
}

/* ================================================================ motion */
.rise {
  opacity: 0;
  transform: translateY(22px);
}
.rise.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0ms);
}
.no-js .rise,
.rise.is-in {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .rise {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .btn,
  .card,
  .coord,
  .nav__links a::after {
    transition: none !important;
  }
}

/* ============================================================ responsive */
@media (max-width: 1040px) {
  .hero__in {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .hero__copy {
    max-width: none;
  }
  .board__in {
    aspect-ratio: 6 / 5;
  }
  .zone,
  .contact {
    grid-template-columns: minmax(0, 1fr);
  }
  .foot__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .nav__links {
    display: none;
  }
  .presta {
    grid-template-columns: minmax(0, 1fr);
  }
  .p-1,
  .p-2,
  .p-3,
  .p-4,
  .p-5,
  .p-6 {
    grid-column: span 1;
  }
  .p-1 .mat,
  .p-2 .mat {
    height: 150px;
  }
  .compare {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  /* la barre doit tenir la raison sociale entiere en face du bouton d'appel */
  .nav__in {
    gap: 12px;
    height: 68px;
  }
  .brand__role {
    display: none;
  }
  .brand__name {
    font-size: 0.84rem;
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
  }
  .brand {
    gap: 10px;
  }
  .brand__mark {
    width: 30px;
    height: 30px;
  }
  .brand__mark::before {
    inset: 6px 16px 6px 6px;
  }
  .brand__mark::after {
    inset: 6px 6px 16px 16px;
  }
  .nav__in > .btn--sm {
    flex: none;
    width: auto;
    padding: 8px 9px 8px 15px;
    font-size: 0.82rem;
  }
  .hero::before {
    background-size: calc(100% / 3) 100%;
  }
  .piece {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }
  .piece__d {
    font-size: 0.9rem;
  }
  .devis__in {
    gap: 24px;
  }
  .devis h2 {
    max-width: none;
  }
  .foot__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .btn {
    width: 100%;
    justify-content: space-between;
  }
  .hero__cta .btn,
  .devis__cta .btn {
    flex: 1 1 100%;
  }
  .board {
    padding: 7px;
  }
  .board__in {
    gap: 4px;
    aspect-ratio: 1 / 1;
  }
}