/* Sols en résine — professionnels */

.pro-hero__title,
.pro-h2,
.pro-cta__title { font-weight: 600; }
.pro-h2 { font-size: clamp(32px, 3.35vw, 48px); }

/* En-têtes de section : titre large, intro étroite */
@media (min-width: 901px) {
  .pro-head { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Hero sombre : photo à droite fondue dans un voile
   -------------------------------------------------------------------------- */
.pro-hero {
  position: relative;
  overflow: hidden;
  background: var(--noir);
  color: var(--white);
  --fg: var(--white);
  --muted: var(--text-on-dark-muted);
  --accent: var(--gold);
  --line: var(--line-dark);
}
.pro-hero__bg {
  position: absolute;
  inset: 0 0 0 29%;
  z-index: 0;
}
.pro-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1) translate3d(0, var(--parallax, 0px), 0);
  animation: pro-hero-in 2.2s var(--ease-out) both;
}
@keyframes pro-hero-in { from { transform: scale(1.24); filter: brightness(0.5); } }
.pro-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #171719 13%, rgb(23 23 25 / 0.9) 40%, rgb(23 23 25 / 0.5) 87%, rgb(23 23 25 / 0.1) 140%);
}
.pro-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.4vw, 64px);
  min-height: clamp(620px, calc(100svh - var(--header-h)), 780px);
  padding-top: clamp(28px, 2.5vw, 36px);
  padding-bottom: 64px;
}
.pro-hero .breadcrumb [aria-current="page"] { font-weight: 600; }
.pro-hero__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  max-width: 600px;
}
.pro-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--white);
}
.pro-hero .lead { font-size: clamp(17px, 1.25vw, 18px); color: var(--text-on-dark-muted); }
.pro-hero__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
}
.pro-hero__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-on-dark-muted);
}
.pro-hero__marks li:not(:last-child)::after { content: "·"; margin-inline: 10px; }
@media (max-width: 900px) {
  .pro-hero__bg { inset: 0; }
  .pro-hero__veil { background: linear-gradient(180deg, rgb(23 23 25 / 0.82) 0%, rgb(23 23 25 / 0.92) 60%, #171719 100%); }
  .pro-hero__inner { min-height: 0; }
}

/* --------------------------------------------------------------------------
   01 · Environnements (colonnes décalées)
   -------------------------------------------------------------------------- */
.pro-envs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
  align-items: start;
}
.pro-env { gap: 20px; }
.pro-env--o2 { padding-top: 96px; }
.pro-env--o4 { padding-top: 56px; }
.pro-env__title {
  font-family: var(--font-heading);
  font-size: clamp(21px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  transition: color 0.3s;
}
.pro-env .text { font-size: 15px; }
.pro-env .chip { padding: 5px 9px; border-radius: var(--radius); font-size: 12px; transition: border-color 0.3s, color 0.3s; }
@media (hover: hover) {
  .pro-env:hover .media > img { --media-scale: 1.05; }
  .pro-env:hover .pro-env__title { color: var(--gold); }
  .pro-env:hover .chip { border-color: rgb(199 164 90 / 0.5); }
}
@media (max-width: 1080px) {
  .pro-envs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pro-env--o4 { padding-top: 96px; }
  .pro-env:nth-child(3) { margin-top: -96px; }
}
@media (max-width: 600px) {
  .pro-envs { grid-template-columns: 1fr; }
  .pro-env--o2, .pro-env--o4 { padding-top: 0; }
  .pro-env:nth-child(3) { margin-top: 0; }
  .pro-env .media { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   02 · Tableau des critères
   -------------------------------------------------------------------------- */
.pro-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}
.pro-table thead th {
  padding: 0 24px 16px 0;
  border-bottom: 1px solid var(--noir);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pro-table thead th:first-child { width: 33.5%; }
.pro-table thead th:nth-child(2) { width: 35%; }
.pro-table tbody tr { border-bottom: 1px solid var(--line); transition: background-color 0.4s var(--ease-out); }
.pro-table tbody th,
.pro-table td { padding: 30px 32px 30px 0; vertical-align: top; }
.pro-table tbody th {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--noir);
}
.pro-table__num {
  display: inline-block;
  min-width: 2.6em;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-ink);
  vertical-align: 0.25em;
  transition: transform 0.5s var(--ease-out);
}
.pro-table td { font-size: 15px; line-height: 1.55; color: var(--noir); }
.pro-table td + td { color: var(--muted); }
@media (hover: hover) {
  .pro-table tbody tr:hover { background: var(--cream-2); }
  .pro-table tbody tr:hover .pro-table__num { transform: translateX(6px); }
}
@media (max-width: 820px) {
  .pro-table, .pro-table tbody, .pro-table tr, .pro-table th, .pro-table td { display: block; }
  .pro-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pro-table tbody { border-top: 1px solid var(--noir); }
  .pro-table tbody tr { display: grid; gap: 14px; padding-block: 26px; }
  .pro-table tbody th, .pro-table td { padding: 0; }
  .pro-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

.pro-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 56px;
  font-size: 14px;
  color: var(--muted);
}
.pro-note .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--gold-ink); }

/* --------------------------------------------------------------------------
   03 · Parlons de votre site
   -------------------------------------------------------------------------- */
.pro-contact { background: radial-gradient(ellipse 55% 70% at 5% 15%, rgb(199 164 90 / 0.12) 0%, rgb(199 164 90 / 0) 100%), var(--noir); }
.pro-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(48px, 6.7vw, 96px);
  align-items: start;
}
.pro-contact__title { font-size: clamp(36px, 3.9vw, 56px); }
.pro-contact .lead { font-size: 17px; }
.pro-next { padding-top: 16px; }
.pro-next__label {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.pro-next__list li {
  display: flex;
  gap: 20px;
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--white);
}
.pro-next__list span { font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--gold); }

.pro-cards { display: flex; flex-direction: column; gap: 20px; }
.pro-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: clamp(28px, 2.8vw, 40px);
  border-radius: var(--radius);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.pro-card--call {
  background: var(--cream);
  color: var(--noir);
  --fg: var(--noir);
  --muted: var(--text-on-light-muted);
  --line: var(--line-light);
}
.pro-card--mail { background: var(--anthracite); }
.pro-card--prep { gap: 16px; padding: 32px; border: 1px solid var(--line-dark); }
.pro-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 800;
}
.pro-card__pill {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--gold);
  transition: transform 0.5s var(--ease-out);
}
.pro-card__pill .icon { width: 18px; height: 18px; }
.pro-card__value {
  font-family: var(--font-heading);
  font-size: clamp(34px, 3.35vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat;
  transition: background-size 0.6s var(--ease-out);
}
.pro-card__value--mail { font-size: clamp(22px, 2.1vw, 30px); overflow-wrap: anywhere; }
.pro-card__help { font-size: 15px; color: var(--muted); }
.pro-btn-mail .icon { width: 18px; height: 18px; }
@media (hover: hover) {
  .pro-card--call:hover,
  .pro-card--mail:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7); }
  .pro-card:hover .pro-card__pill { transform: rotate(-12deg); }
  .pro-card__value:hover { background-size: 100% 1.5px; }
}
.pro-card__prep-title { font-family: var(--font-heading); font-size: 17px; font-weight: 800; color: var(--white); }
.pro-prep { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.pro-prep li { display: flex; gap: 10px; }
.pro-prep .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--gold); }
.pro-prep span { display: flex; flex-direction: column; gap: 2px; }
.pro-prep strong { font-size: 15px; font-weight: 600; color: var(--white); line-height: 1.35; }
.pro-prep small { font-size: 13px; color: var(--text-on-dark-muted); line-height: 1.4; }
@media (max-width: 1080px) { .pro-contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pro-prep { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   04 · FAQ
   -------------------------------------------------------------------------- */
.pro-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  gap: clamp(48px, 6.7vw, 96px);
  align-items: start;
}
.pro-faq__title { font-size: clamp(28px, 2.8vw, 40px); }
@media (min-width: 901px) {
  .pro-faq__aside { position: sticky; top: calc(var(--header-h) + 32px); }
}
@media (max-width: 900px) { .pro-faq { grid-template-columns: 1fr; } }

@media (max-width: 720px) { .pro-h2 br, .pro-cta__title br { display: none; } }