/* ============================================================
   OXYCOUPE JADIDA — Pages intérieures
   Même vocabulaire que l'accueil : la coupe, la voix « plan
   d'exécution » en mono, l'alternance sombre / clair.
   ============================================================ */

/* ---------- 1. EN-TÊTE DE PAGE ------------------------------- */
.phero {
  position: relative;
  background: var(--ink);
  color: #F2F4F7;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 7vw, 7rem));
  padding-bottom: clamp(3rem, 6vw, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}
.phero--media { padding-top: calc(var(--header-h) + clamp(5rem, 10vw, 10rem)); }

.phero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.phero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.66) contrast(1.04) saturate(.7);
}
.phero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 100% at 18% 12%, rgba(8,9,12,.10), rgba(8,9,12,.78) 74%),
    linear-gradient(180deg, rgba(8,9,12,.60), rgba(8,9,12,.22) 44%, rgba(8,9,12,.92));
}
.phero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image: var(--grain-url);
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.phero__in { position: relative; }
.phero__num {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-400);
  display: block;
  margin-bottom: clamp(1rem, 2vw, 1.7rem);
}
.phero__t {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "wdth" 100;
  font-size: clamp(1.9rem, .85rem + 3.9vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -.032em;
  max-width: 20ch;
  text-wrap: balance;
}
.phero__t em { font-style: normal; color: var(--blue-400); }

.phero__lede {
  margin-top: clamp(1.3rem, 2.4vw, 2.1rem);
  font-size: var(--t-lg);
  line-height: 1.6;
  font-weight: 320;
  color: var(--steel-300);
  max-width: 58ch;
}

/* la coupe sous le titre */
.phero__cut {
  margin-top: clamp(1.8rem, 3.4vw, 3rem);
  height: 1px;
  background: var(--rule);
  position: relative;
  overflow: visible;
  max-width: 640px;
}
.phero__cut i {
  position: absolute;
  inset: 0 auto 0 0;
  height: 1px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--molten), var(--molten-hot) 60%, transparent);
  animation: pheroCut 1.35s var(--e-out) .25s forwards;
}
@keyframes pheroCut { to { transform: scaleX(1); } }

.phero__meta {
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2.4rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-400);
}
.phero__meta b { color: #fff; font-weight: 500; }

/* ---------- 2. FIL D'ARIANE --------------------------------- */
.crumbs {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-400);
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .6rem;
}
.crumbs a { color: var(--steel-300); text-decoration: none; transition: color .25s; }
.crumbs a:hover { color: var(--blue-400); }
.crumbs span[aria-current] { color: #fff; }
.crumbs i { color: var(--steel-600); font-style: normal; }

/* ---------- 3. BLOCS DE CONTENU ------------------------------ */
.pblock {
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(3.5rem, 3rem + 5vw, 8rem);
  position: relative;
}
.pblock--tight { padding-block: clamp(2.6rem, 2rem + 3.4vw, 5rem); }

.pblock__head {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-bottom: clamp(2.2rem, 4vw, 4rem);
  max-width: 62ch;
}
.pblock__t {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "wdth" 96;
  font-size: clamp(1.5rem, 1rem + 1.9vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -.028em;
}
.pblock__sub { color: var(--fg-muted); font-size: var(--t-lg); font-weight: 320; line-height: 1.6; }

/* ---------- 4. TEXTE COURANT --------------------------------- */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1.15em; }
.prose p { font-size: var(--t-base); line-height: 1.72; color: var(--fg-muted); }
.prose p.lead {
  font-size: var(--t-lg);
  line-height: 1.62;
  color: var(--fg);
  font-weight: 340;
}
.prose h2 {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 1rem + 1.1vw, 2rem);
  font-weight: 500;
  letter-spacing: -.024em;
  line-height: 1.16;
  color: var(--fg);
  margin-top: 2.4em;
}
.prose h3 {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2.2em;
}
.prose ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--t-base);
  line-height: 1.62;
  color: var(--fg-muted);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: .6rem; height: 1px;
  background: var(--accent);
}
.prose strong { color: var(--fg); font-weight: 550; }
.prose blockquote {
  margin: 2.2em 0;
  padding-left: clamp(1.1rem, 2.4vw, 2rem);
  border-left: 2px solid var(--accent);
  font-family: var(--f-display);
  font-size: clamp(1.15rem, .95rem + .8vw, 1.65rem);
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: -.02em;
  color: var(--fg);
}

/* Deux colonnes : texte à gauche, appui à droite */
.psplit { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 1000px) {
  .psplit { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .psplit--flip > :first-child { order: 2; }
  .psplit--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pside {
  border-top: 1px solid var(--rule);
  padding-top: 1.4rem;
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}
@media (max-width: 999px) { .pside { position: static; } }
.pside h3 {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 1rem;
}

/* ---------- 5. TUILES D'INDEX (pages sommaires) --------------
   Les filets sont portés par les tuiles elles-mêmes, pas par un fond
   de grille : une dernière rangée incomplète laisse du vide, pas un
   rectangle gris. */
.tiles {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
@media (min-width: 700px)  { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .tiles--3 { grid-template-columns: repeat(3, 1fr); } }

.tile {
  position: relative;
  background: var(--bg);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.5rem, 2.6vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
  min-height: clamp(180px, 22vw, 250px);
  overflow: hidden;
  isolation: isolate;
  transition: background-color .4s var(--e-out);
}
.tile::before {                       /* la coupe qui traverse au survol */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--molten), var(--molten-hot));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--e-out);
}
.tile:hover::before, .tile:focus-visible::before { transform: scaleX(1); }
.tile:hover { background: var(--bg-soft); }
.tile__n {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .18em;
  color: var(--fg-faint);
}
.tile__t {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, .95rem + .6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -.022em;
  line-height: 1.16;
  transition: color .3s;
}
.tile:hover .tile__t { color: var(--accent); }
.tile__d { font-size: var(--t-sm); line-height: 1.58; color: var(--fg-muted); }
.tile__go {
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.tile__go svg { width: 13px; height: 13px; transition: transform .4s var(--e-out); }
.tile:hover .tile__go svg { transform: translateX(.35em); }

/* ---------- 6. CHIFFRES ------------------------------------- */
.kvs { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 560px) { .kvs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .kvs { grid-template-columns: repeat(4, 1fr); } }
.kvs--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .kvs--3 { grid-template-columns: repeat(3, 1fr); } }

.kv { background: var(--bg); padding: clamp(1.3rem, 2.4vw, 2.2rem); }
.kv__v {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem);
  font-weight: 500;
  font-variation-settings: "wdth" 88;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kv__v sup { font-size: .42em; vertical-align: super; margin-left: .12em; color: var(--accent); }
.kv__k {
  margin-top: .7rem;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  line-height: 1.5;
}

/* ---------- 7. FICHES PROJETS (grille + filtres) ------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.8rem, 3.4vw, 3rem);
}
.filter {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .58rem 1rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: 1px;
  transition: color .3s, border-color .3s, background-color .3s;
  white-space: nowrap;
  max-width: 100%;
}
/* Sous 380 px, « Travaux mécaniques & tuyauterie » ne tient pas sur une ligne :
   on laisse la puce revenir à la ligne plutôt que déborder la page. */
@media (max-width: 379px) {
  .filter { white-space: normal; text-align: left; padding: .5rem .7rem; }
}
.filter:hover { color: var(--fg); border-color: var(--fg-faint); }
.filter[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.filter b { font-weight: 400; opacity: .55; margin-left: .35em; }

.pcards {
  display: grid;
  gap: clamp(1.4rem, 2.6vw, 2.6rem) clamp(1.1rem, 2vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .pcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1140px) { .pcards { grid-template-columns: repeat(3, 1fr); } }

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.pcard[hidden] { display: none; }
.pcard__media {
  position: relative;
  overflow: hidden;
  background: var(--steel-800);
  aspect-ratio: 4 / 3;
  margin-bottom: 1.1rem;
}
.pcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* étalonnage unique : la galerie ne part pas dans tous les sens */
  filter: saturate(.84) contrast(1.06) brightness(.95);
  transition: transform 1.1s var(--e-out), filter .6s var(--e-out);
}
.pcard:hover .pcard__media img,
.pcard:focus-visible .pcard__media img { transform: scale(1.045); filter: none; }
.pcard__cut {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--molten-hot), var(--molten), transparent);
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
}
.pcard__cat {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .55rem;
  display: block;
}
.pcard__t {
  font-family: var(--f-display);
  font-size: clamp(1.02rem, .95rem + .35vw, 1.28rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
  transition: color .3s;
  text-wrap: balance;
}
.pcard:hover .pcard__t { color: var(--accent); }
.pcard__m {
  margin-top: .6rem;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .9rem;
}

.pempty {
  padding: clamp(2rem, 5vw, 4rem) 0;
  color: var(--fg-muted);
  font-size: var(--t-base);
}

/* ---------- 8. FICHE PROJET : specs + galerie ---------------- */
.specs { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.spec-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 12rem) minmax(0, 1fr);
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding: clamp(.85rem, 1.5vw, 1.15rem) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.spec-row dt {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.spec-row dd {
  margin: 0;
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--fg);
}
.spec-row dd.is-strong {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

.gal { display: grid; gap: clamp(.6rem, 1.2vw, 1rem); }
@media (min-width: 720px)  { .gal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .gal--3 { grid-template-columns: repeat(3, 1fr); } }
.gal__i {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--steel-800);
  border: 0;
  padding: 0;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  width: 100%;
}
.gal__i:first-child:nth-last-child(1) { aspect-ratio: 16 / 9; }
@media (min-width: 720px) { .gal__i--wide { grid-column: span 2; aspect-ratio: 16 / 7.6; } }
.gal__i img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.86) contrast(1.05);
  transition: transform 1.1s var(--e-out), filter .6s;
}
.gal__i:hover img { transform: scale(1.04); filter: none; }
.gal__i::after {
  content: "";
  position: absolute;
  inset: auto .7rem .7rem auto;
  width: 26px; height: 26px;
  background:
    linear-gradient(currentColor, currentColor) center/11px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 11px no-repeat;
  color: #fff;
  opacity: 0;
  transition: opacity .35s;
  mix-blend-mode: difference;
}
.gal__i:hover::after { opacity: .9; }

/* Visionneuse */
.lbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(8, 9, 12, .96);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3.5rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--e-out), visibility .35s;
}
.lbox.is-open { opacity: 1; visibility: visible; }
.lbox img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  transform: scale(.97);
  transition: transform .45s var(--e-out);
}
.lbox.is-open img { transform: scale(1); }
.lbox__cap {
  position: absolute;
  left: 50%; bottom: clamp(1rem, 3vw, 2.4rem);
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--steel-400);
  text-align: center;
  max-width: 60ch;
  padding-inline: 1rem;
}
.lbox__x, .lbox__nav {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  cursor: pointer;
  border-radius: 1px;
  transition: background-color .3s, border-color .3s;
}
.lbox__x:hover, .lbox__nav:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); }
.lbox__x { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lbox__nav { top: 50%; transform: translateY(-50%); }
.lbox__nav--p { left: clamp(.6rem, 2vw, 1.6rem); }
.lbox__nav--n { right: clamp(.6rem, 2vw, 1.6rem); }
.lbox svg { width: 16px; height: 16px; }

/* ---------- 9. NAVIGATION PROJET SUIVANT / PRÉCÉDENT --------- */
.pagenav {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (min-width: 720px) { .pagenav { grid-template-columns: repeat(2, 1fr); } }
.pagenav a {
  background: var(--bg);
  padding: clamp(1.4rem, 2.6vw, 2.4rem);
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: .55rem;
  transition: background-color .4s;
}
.pagenav a:hover { background: var(--bg-soft); }
.pagenav a:last-child { text-align: right; }
.pagenav__k {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.pagenav__t {
  font-family: var(--f-display);
  font-size: clamp(1rem, .9rem + .5vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.22;
  transition: color .3s;
}
.pagenav a:hover .pagenav__t { color: var(--accent); }

/* ---------- 10. BANDEAU D'APPEL ------------------------------ */
.cta-band {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(3.5rem, 6vw, 7rem);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--molten) 35%, var(--molten-hot) 50%, var(--molten) 65%, transparent);
  opacity: .8;
}
.cta-band__in {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: end;
}
@media (min-width: 900px) {
  .cta-band__in { grid-template-columns: minmax(0, 1fr) auto; }
}
.cta-band__t {
  font-family: var(--f-display);
  font-size: clamp(1.55rem, 1.05rem + 2.1vw, 3.2rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.032em;
  max-width: 18ch;
  text-wrap: balance;
}
.cta-band__d { margin-top: 1rem; color: var(--steel-400); max-width: 48ch; font-size: var(--t-base); }
.cta-band__acts { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- 11. FORMULAIRES ---------------------------------- */
.form { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 720px) { .form__row2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: inherit; } }

.field { display: grid; gap: .5rem; }
.field > label {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.field > label .req { color: var(--molten); }
.field input,
.field textarea,
.field select {
  font-family: var(--f-body);
  font-size: var(--t-base);
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: .7rem 0;
  width: 100%;
  border-radius: 0;
  transition: border-color .3s;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 4px center, right 0 center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field select option { background: var(--paper); color: var(--ink); }
.theme-dark .field select option { background: var(--steel-850); color: #fff; }
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-bottom-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); opacity: .8; }
.field.is-error input,
.field.is-error textarea,
.field.is-error select { border-bottom-color: var(--molten); }
.field__err {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .08em;
  color: var(--molten);
  min-height: 1em;
}

.form__file input[type="file"] {
  border: 1px dashed var(--rule);
  padding: 1rem;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
}
.form__note { font-size: var(--t-xs); color: var(--fg-faint); line-height: 1.6; }
.form__ok {
  border: 1px solid var(--accent);
  border-left-width: 3px;
  padding: 1rem 1.2rem;
  font-size: var(--t-sm);
  color: var(--fg);
  background: var(--bg-soft);
}
.form__ok[hidden] { display: none; }

/* ---------- 12. CONTACT : coordonnées ------------------------ */
.cinfo { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.cinfo__item { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.cinfo__k {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: .55rem;
}
.cinfo__v { font-size: var(--t-base); line-height: 1.62; }
.cinfo__v a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color .3s, color .3s; }
.cinfo__v a:hover { color: var(--accent); border-color: var(--accent); }

.pmap {
  border: 1px solid var(--rule);
  aspect-ratio: 16 / 10;
  width: 100%;
  background: var(--bg-soft);
  filter: grayscale(1) contrast(1.06);
  transition: filter .5s;
}
.pmap:hover { filter: none; }

/* ---------- 13. OFFRES D'EMPLOI ------------------------------ */
.jobs { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.job {
  background: var(--bg);
  padding: clamp(1.4rem, 2.6vw, 2.3rem);
  display: grid;
  gap: .8rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background-color .4s;
}
@media (min-width: 860px) {
  .job { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; }
}
.job:hover { background: var(--bg-soft); }
.job__t {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.14;
  transition: color .3s;
}
.job:hover .job__t { color: var(--accent); }
.job__m {
  margin-top: .5rem;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.4rem;
}

/* ---------- 14. FRISE VERTICALE (histoire) -------------------- */
.vtl { display: grid; gap: 0; position: relative; }
.vtl::before {
  content: "";
  position: absolute;
  left: 0; top: .6rem; bottom: 2rem;
  width: 1px;
  background: var(--rule);
}
@media (min-width: 860px) { .vtl::before { left: clamp(5rem, 11vw, 9rem); } }

.vstep {
  position: relative;
  padding-left: 1.8rem;
  padding-block: clamp(1.4rem, 2.6vw, 2.4rem);
  display: grid;
  gap: .8rem;
}
@media (min-width: 860px) {
  .vstep {
    grid-template-columns: clamp(5rem, 11vw, 9rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-left: 0;
    align-items: start;
  }
}
.vstep::before {                       /* le point de perçage */
  content: "";
  position: absolute;
  left: -3px; top: calc(clamp(1.4rem, 2.6vw, 2.4rem) + .55em);
  width: 7px; height: 7px;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 50%;
}
@media (min-width: 860px) { .vstep::before { left: calc(clamp(5rem, 11vw, 9rem) - 3px); } }
.vstep__y {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem);
  font-weight: 500;
  font-variation-settings: "wdth" 86;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.vstep__d { font-size: var(--t-base); line-height: 1.68; color: var(--fg-muted); max-width: 64ch; }
.vstep__d strong { color: var(--fg); font-weight: 550; }

/* ---------- 15. LOGOS / CERTIFICATS -------------------------- */
.plates { display: grid; gap: clamp(1rem, 2.4vw, 2rem); }
@media (min-width: 700px) { .plates { grid-template-columns: repeat(2, 1fr); } }
.plate {
  border: 1px solid var(--rule);
  background: var(--bg-soft);
  padding: clamp(1.2rem, 2.4vw, 2rem);
  display: grid;
  gap: 1rem;
}
.plate img { width: 100%; height: auto; background: #fff; padding: .8rem; }
.plate__t {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -.02em;
}
.plate__d { font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.6; }

/* ---------- 16. IMAGE PLEINE LARGEUR ------------------------- */
.pfig { margin: 0; }
.pfig img { width: 100%; height: auto; display: block; }
.pfig--cover img { aspect-ratio: 16 / 9; object-fit: cover; }
.pfig figcaption {
  margin-top: .85rem;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.pfig--zoom { cursor: zoom-in; }

/* ---------- 17. LISTE DE LIENS LATÉRALE ---------------------- */
.sibnav { display: grid; gap: 0; }
.sibnav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--fg-muted);
  font-size: var(--t-sm);
  transition: color .3s, padding-left .3s;
}
.sibnav a:hover { color: var(--accent); padding-left: .4rem; }
.sibnav a[aria-current="page"] { color: var(--fg); font-weight: 500; }
.sibnav a[aria-current="page"]::after { content: "—"; color: var(--accent); }

/* ---------- 18. PLAN DU SITE --------------------------------- */
.smap { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 780px)  { .smap { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .smap { grid-template-columns: repeat(3, 1fr); } }
.smap__g h2 {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: .9rem;
}
.smap__g ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.smap__g a { color: var(--fg-muted); text-decoration: none; font-size: var(--t-sm); transition: color .25s; }
.smap__g a:hover { color: var(--accent); }

/* ---------- 19. 404 ------------------------------------------ */
.e404 { min-height: 78svh; display: grid; align-content: center; }
.e404__n {
  font-family: var(--f-display);
  font-size: clamp(5rem, 2rem + 18vw, 16rem);
  font-weight: 500;
  font-variation-settings: "wdth" 74;
  line-height: .84;
  letter-spacing: -.05em;
  color: var(--steel-800);
}

/* ---------- 20. DIVERS --------------------------------------- */
.taglist { display: flex; flex-wrap: wrap; gap: .45rem; }
.taglist a, .taglist span {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .42rem .75rem;
  border: 1px solid var(--rule);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color .3s, border-color .3s;
}
.taglist a:hover { color: var(--accent); border-color: var(--accent); }

.anchor-offset { scroll-margin-top: calc(var(--header-h) + 1.5rem); }


/* ============================================================
   AFFINAGE
   Le site donnait une impression de grille : des filets 1px
   dessinaient des cases partout. Ici on retire les cases et on
   laisse respirer — l'espace et la matière séparent, plus le trait.
   ============================================================ */

/* ---------- 1. TUILES — une liste, plus une grille ----------- */
.tiles {
  border: 0;
  gap: 0;
  border-top: 1px solid var(--rule-soft);
}
.tile {
  border-right: 0;
  border-bottom: 1px solid var(--rule-soft);
  padding: clamp(1.6rem, 2.8vw, 2.8rem) clamp(1.2rem, 2vw, 2rem);
  min-height: clamp(190px, 21vw, 260px);
  background: transparent;
}
/* Le survol remplit la tuile depuis la coupe, en diagonale */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-soft);
  clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
  transition: clip-path .7s var(--e-out);
}
.tile:hover::after, .tile:focus-visible::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.tile:hover { background: transparent; }
.tile::before { height: 1px; }
.tile__n { color: var(--fg-faint); letter-spacing: .2em; }
.tile__t { margin-top: .1rem; }

/* Deux colonnes : on rétablit une séparation verticale discrète */
@media (min-width: 700px) {
  .tile:not(:nth-child(2n)) { box-shadow: 1px 0 0 var(--rule-soft); }
}
@media (min-width: 1180px) {
  .tiles--3 .tile { box-shadow: none; }
  .tiles--3 .tile:not(:nth-child(3n)) { box-shadow: 1px 0 0 var(--rule-soft); }
}

/* ---------- 2. CHIFFRES — sans cases ------------------------- */
.kvs {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule-soft);
  gap: 0;
}
.kv {
  background: transparent;
  border-bottom: 1px solid var(--rule-soft);
  padding: clamp(1.5rem, 2.6vw, 2.4rem) clamp(1rem, 1.6vw, 1.6rem) clamp(1.5rem, 2.6vw, 2.4rem) 0;
  position: relative;
}
@media (min-width: 560px) {
  .kv:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0; top: 22%; bottom: 22%;
    width: 1px;
    background: var(--rule-soft);
  }
  .kv { padding-inline: clamp(1rem, 1.8vw, 1.8rem); }
  .kv:first-child { padding-left: 0; }
}
.kv__v { font-variation-settings: "wdth" 84; }
.kv__v sup { color: var(--molten); }

/* ---------- 3. FILTRES — pastilles chanfreinées -------------- */
.filter {
  --ch: 6px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--rule);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ch)),
                     calc(100% - var(--ch)) 100%, 0 100%);
  padding: .62rem 1.05rem;
}
.filter:hover { box-shadow: inset 0 0 0 1px var(--fg-faint); }
.filter[aria-pressed="true"] { box-shadow: none; }

/* ---------- 4. VISUELS — l'angle coupé ----------------------- */
.pcard__media,
.gal__i,
.phero__bg,
.pfig img,
.plate img,
.mviz__img,
.pcard__media img {
  --ch: var(--ch-md);
}
.pcard__media, .gal__i {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ch)),
                     calc(100% - var(--ch)) 100%, 0 100%);
}
.gal__i { --ch: var(--ch-lg); }
.pcard__media { --ch: var(--ch-sm); }

/* ---------- 5. SPÉCIFICATIONS — allégées --------------------- */
.specs { border-top-color: var(--rule-soft); }
.spec-row { border-bottom-color: var(--rule-soft); }
.spec-row dd.is-strong { font-variation-settings: "wdth" 92; }

/* ---------- 6. OFFRES D'EMPLOI ------------------------------- */
.jobs { background: transparent; border: 0; border-top: 1px solid var(--rule-soft); gap: 0; }
.job {
  background: transparent;
  border-bottom: 1px solid var(--rule-soft);
  padding-inline: 0;
  position: relative;
}
.job::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-soft);
  opacity: 0;
  transition: opacity .45s var(--e-out);
}
/* Le remplissage déborde du texte pour respirer — mais seulement là où
   la marge de page le permet, sinon il pousse la page de quelques pixels. */
@media (min-width: 760px) { .job::after { inset: 0 -1.4rem; } }
.job:hover { background: transparent; }
.job:hover::after { opacity: 1; }

/* ---------- 7. NAVIGATION PROJET SUIVANT --------------------- */
.pagenav { background: transparent; border: 0; border-top: 1px solid var(--rule-soft); gap: 0; }
.pagenav a { background: transparent; border-bottom: 1px solid var(--rule-soft); }
@media (min-width: 720px) {
  .pagenav a:first-child { box-shadow: 1px 0 0 var(--rule-soft); }
}
.pagenav a:hover { background: var(--bg-soft); }

/* ---------- 8. PLAQUES CERTIFICATS --------------------------- */
.plate {
  --ch: var(--ch-md);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--rule-soft);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ch)),
                     calc(100% - var(--ch)) 100%, 0 100%);
}

/* ============================================================
   PAGE CONTACT
   ============================================================ */
.phero--contact { padding-bottom: 0; }

/* ---------- Joindre quelqu'un tout de suite ------------------ */
.reach {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
@media (min-width: 860px) { .reach { grid-template-columns: repeat(3, 1fr); } }

.reach__i {
  position: relative;
  display: grid;
  gap: .55rem;
  padding: clamp(1.3rem, 2.4vw, 2rem) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}
@media (min-width: 860px) {
  .reach__i { padding-inline: clamp(1rem, 2vw, 2rem); }
  .reach__i:first-child { padding-left: 0; }
  .reach__i:not(:last-child) { box-shadow: 1px 0 0 rgba(255, 255, 255, .12); }
}
.reach__i::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--molten), var(--molten-hot));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--e-out);
}
.reach__i:hover::after { transform: scaleX(1); }

.reach__k {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-400);
}
.reach__v {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, .9rem + .7vw, 1.55rem);
  font-weight: 500;
  font-variation-settings: "wdth" 94;
  letter-spacing: -.022em;
  line-height: 1.2;
  color: #fff;
  word-break: break-word;
}
.reach__go {
  position: absolute;
  right: 0; top: clamp(1.3rem, 2.4vw, 2rem);
  color: var(--steel-500);
  transition: transform .45s var(--e-out), color .3s;
}
.reach__go svg { width: 15px; height: 15px; display: block; }
.reach__i:hover .reach__go { transform: translateX(.3em); color: #fff; }
@media (min-width: 860px) { .reach__go { right: clamp(1rem, 2vw, 2rem); } }
.reach__i:first-child .reach__go { right: 0; }

/* ---------- Le formulaire et son aide ------------------------ */
.ctform { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
@media (min-width: 1000px) {
  .ctform { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }
}
.ctform__main .pblock__t { margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }

.ctform__aside {
  --ch: var(--ch-lg);
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 1px var(--rule-soft);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ch)),
                     calc(100% - var(--ch)) 100%, 0 100%);
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}
@media (max-width: 999px) { .ctform__aside { position: static; } }

.ctform__k {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}
.ctform__p { font-size: var(--t-sm); line-height: 1.65; color: var(--fg-muted); }
.ctform__side { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-soft); }

.checklist { list-style: none; padding: 0; margin-top: 1.2rem; display: grid; gap: .7rem; }
.checklist li {
  position: relative;
  padding-left: 1.7rem;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--fg);
}
/* une coche tracée au trait, pas une puce */
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--molten);
  border-bottom: 1.5px solid var(--molten);
  transform: rotate(-45deg);
}

/* ---------- Le champ, plus généreux -------------------------- */
.field input,
.field textarea,
.field select {
  padding: .85rem .9rem;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule);
  transition: border-color .3s, background-color .3s;
}
.field input:focus,
.field textarea:focus,
.field select:focus { background: var(--bg); border-bottom-color: var(--accent); }
.theme-dark .field input,
.theme-dark .field textarea,
.theme-dark .field select { background: rgba(255, 255, 255, .04); }

/* ---------- Accès et carte ----------------------------------- */
.access { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; }
@media (min-width: 980px) {
  .access { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.access__map { --ch: var(--ch-lg); }
.access__list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.access__b { padding-block: clamp(.9rem, 1.6vw, 1.25rem); border-bottom: 1px solid var(--rule); }
.access__k {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: .45rem;
}
.access__v { font-size: var(--t-sm); line-height: 1.62; color: var(--fg); }
.access__v a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.access__v a:hover { color: var(--accent); border-color: var(--accent); }
.access__b .tlink { margin-top: .7rem; }

.pmap-wrap {
  --ch: var(--ch-lg);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--rule);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ch)),
                     calc(100% - var(--ch)) 100%, 0 100%);
  aspect-ratio: 4 / 3;
}
/* Le repli occupe tout le cadre ; l'iframe viendra se poser dessus. */
.pmap-wrap { position: relative; }
.pmap-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1rem;
  padding: clamp(1.3rem, 3vw, 2.4rem);
  background: var(--bg-soft);
  color: var(--fg-muted);
  font-size: var(--t-sm);
  line-height: 1.6;
}
.pmap-fallback p { max-width: 40ch; }
.pmap-wrap.is-loaded .pmap-fallback { display: none; }
.pmap {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.pmap-fallback__k {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.pmap { filter: grayscale(1) contrast(1.05) brightness(.96); }
.theme-dark .pmap { filter: grayscale(1) invert(.92) contrast(.86) brightness(1.05); }
.pmap:hover { filter: none; }