@font-face{font-family:Inter;src:url("assets/fonts/inter-400.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("assets/fonts/inter-500.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("assets/fonts/inter-600.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("assets/fonts/inter-700.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("assets/fonts/inter-800.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}

:root{
  --ink:#151915;
  --ink-2:#4a5048;
  --muted:#6d736a;
  --paper:#f3f1ea;
  --panel:#ffffff;
  --frame:#eceade;
  --line:rgba(21,25,21,.13);
  --focus:#2074c9;
  --wrap:1180px;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,-apple-system,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.6;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.skip-link{position:fixed;left:1rem;top:1rem;z-index:20;padding:.75rem 1rem;background:#fff;transform:translateY(-160%)}
.skip-link:focus{transform:none}

/* ---------- masthead : volontairement minimal ---------- */
.masthead{
  width:min(var(--wrap),calc(100% - 48px));margin:0 auto;
  padding:34px 0 30px;display:flex;align-items:center;gap:14px;
  border-bottom:1px solid var(--line);
}
.mark{
  width:44px;height:44px;flex:none;border-radius:50%;
  background:var(--ink);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:.85rem;letter-spacing:-.04em;
}
.masthead-id{display:flex;flex-direction:column;gap:2px}
.masthead-id strong{font-size:.9rem;letter-spacing:.02em}
.masthead-id small{color:var(--muted);font-size:.78rem}

/* ---------- les 5 pistes : lignes strictement identiques ---------- */
.pistes{
  width:min(var(--wrap),calc(100% - 48px));margin:0 auto;
  padding:8px 0 72px;
  display:flex;flex-direction:column;gap:20px;
}

.piste{
  display:grid;
  grid-template-columns:420px minmax(0,1fr);
  align-items:stretch;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.piste:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(12,18,14,.11);border-color:rgba(21,25,21,.22)}
.piste:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* cadre visuel identique pour les 5, quel que soit le logo source */
.piste-visual{
  background:var(--frame);
  display:grid;place-items:center;
  padding:34px;
  min-height:360px;
  border-right:1px solid var(--line);
}
/* hauteur normalisee : les 4 logos ont un ratio proche, ils lisent donc
   a poids optique egal sans etre agrandis au-dela de leur definition */
.piste-visual img{
  height:92px;width:auto;
  max-width:100%;
  object-fit:contain;
}

/* chaque cadre reprend le fond pour lequel son logo a ete dessine */
.piste-visual--actuelle{background:#000}
.piste-visual--proximite{background:linear-gradient(145deg,#e6e9d7,#f7f6f0)}
.piste-visual--artisan{background:radial-gradient(circle at 50% 55%,#f5f5f0 0 45%,#dbe7ef 46% 100%)}
.piste-visual--moderne{background:linear-gradient(145deg,#e9f3f0,#fff)}
.piste-visual--multiservices{background:#a7d73a;color:#151915}

/* piste 04 : lettrage reproduit dans le meme cadre */
.lettering{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.lettering-mark{font-size:2.9rem;font-weight:800;letter-spacing:-.06em;line-height:1;display:flex;align-items:baseline;gap:2px}
.lettering-mark i{font-style:normal;font-weight:500;opacity:.55;margin:0 1px}
.lettering-word{display:flex;flex-direction:column;gap:3px}
.lettering-word strong{font-size:.92rem;font-weight:800;letter-spacing:.14em}
.lettering-word small{font-size:.68rem;opacity:.72;letter-spacing:.06em}

.piste-copy{
  padding:36px 38px;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:0;
}
.piste-num{
  font-size:.68rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);
}
.piste-copy h2{
  margin:14px 0 0;
  font-size:1.6rem;line-height:1.15;letter-spacing:-.03em;font-weight:800;
}
.piste-line{
  margin:10px 0 0;
  font-size:1.05rem;font-weight:500;color:var(--ink-2);
}
.piste-why{
  margin:16px 0 0;
  font-size:.93rem;line-height:1.68;color:var(--muted);max-width:60ch;
}
.tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:7px;
  margin:20px 0 0;padding:0;
}
.tags li{
  padding:6px 11px;border:1px solid var(--line);border-radius:99px;
  font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-2);
}
.piste-impact{
  margin:22px 0 0;padding-top:16px;
  width:100%;border-top:1px solid var(--line);
  font-size:.75rem;color:var(--muted);
}
.piste-open{
  margin-top:14px;
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
}
.piste-open b{font-size:1.05rem;transition:transform .25s ease}
.piste:hover .piste-open b{transform:translate(3px,-3px)}

/* ---------- mobile : lecture en article ---------- */
@media (max-width:820px){
  .piste{grid-template-columns:1fr}
      .piste-visual{
    min-height:0;aspect-ratio:16/10;padding:28px;
    border-right:0;border-bottom:1px solid var(--line);
  }
  .piste-visual img{height:76px}
  .piste-copy{padding:26px 22px 28px}
  .piste-copy h2{font-size:1.42rem}
  .piste-line{font-size:1rem}
  .pistes{gap:16px;padding-bottom:52px}
}
@media (max-width:420px){
  .masthead{padding:24px 0 20px}
  .piste-visual{aspect-ratio:3/2;padding:22px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}