:root {
  --rouge: #e03a3a;
  --rouge-clair: #f05a5a;
  --encre: #0b0b0f;
  --encre-2: #131319;
  --encre-3: #1c1c24;
  --trait: #26262f;
  --texte: #f4f4f6;
  --texte-2: #a4a4b0;
  --texte-3: #6e6e7c;
  --max: 1120px;
  --pad: clamp(1.25rem, 5vw, 3rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--encre);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }

a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--rouge-clair);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- en-tête ---------- */

header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--encre) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
}
.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 72px;
}
.marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.marque img { height: 30px; width: auto; display: block; }
.marque span {
  font-weight: 700; letter-spacing: .16em; font-size: .82rem;
  color: var(--texte-2); text-transform: uppercase;
}
nav { display: flex; gap: 1.8rem; }
nav a {
  text-decoration: none; font-size: .92rem; color: var(--texte-2);
  transition: color .18s ease;
}
nav a:hover { color: var(--texte); }
@media (max-width: 720px) { nav { display: none; } }

/* ---------- hero ---------- */

.hero { padding: clamp(5rem, 15vw, 10rem) 0 clamp(4rem, 9vw, 7rem); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texte-3); margin-bottom: 1.6rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--rouge);
}
h1 {
  font-size: clamp(2.4rem, 6.4vw, 4.4rem);
  line-height: 1.06; letter-spacing: -.03em; font-weight: 700;
  margin: 0 0 1.6rem; max-width: 15ch;
}
h1 em { font-style: normal; color: var(--rouge); }
.chapo {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--texte-2); max-width: 56ch; margin: 0 0 2.6rem;
}
.actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.btn {
  display: inline-block; padding: .85rem 1.6rem; border-radius: 3px;
  text-decoration: none; font-size: .95rem; font-weight: 600;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-plein { background: var(--rouge); color: #fff; }
.btn-plein:hover { background: var(--rouge-clair); }
.btn-vide { border: 1px solid var(--trait); color: var(--texte-2); }
.btn-vide:hover { border-color: var(--texte-3); color: var(--texte); }

/* ---------- sections ---------- */

section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; border-top: 1px solid var(--trait); }
.titre-sec {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rouge); margin: 0 0 1.8rem; font-weight: 600;
}
h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.18;
  letter-spacing: -.02em; margin: 0 0 1.2rem; max-width: 22ch; font-weight: 700;
}
.intro { color: var(--texte-2); max-width: 62ch; margin: 0 0 3rem; }

.liste { list-style: none; margin: 0; padding: 0; max-width: 60ch; }
.liste li {
  padding: 1.15rem 0; border-bottom: 1px solid var(--trait);
  color: var(--texte-2); font-size: 1.02rem;
}
.liste li:first-child { border-top: 1px solid var(--trait); }
.liste b { color: var(--texte); font-weight: 650; }

/* ---------- mur de logos ---------- */
/* Flex plutôt que grid : avec une seule participation, une grille auto-fill
   laisserait des cellules vides. Ici la rangée grandit avec le portefeuille. */

.mur {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 2.4rem 3.6rem;
}
.mur li { display: flex; align-items: center; }
.mur img {
  max-width: 260px; max-height: 42px; width: auto; height: auto;
  display: block; opacity: .82; transition: opacity .18s ease;
}
.mur li:hover img { opacity: 1; }

/* ---------- pied ---------- */

footer {
  border-top: 1px solid var(--trait); padding: 3rem 0 3.5rem;
  color: var(--texte-3); font-size: .87rem;
}
.pied-haut {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: space-between; align-items: center; margin-bottom: 2rem;
}
footer img { height: 54px; width: auto; opacity: .8; display: block; }
footer nav { gap: 1.4rem; }
.legal { max-width: 70ch; line-height: 1.75; }
.legal strong { color: var(--texte-2); font-weight: 600; }

/* ---------- page mentions ---------- */

.page { padding: clamp(3rem, 8vw, 5.5rem) 0 4rem; max-width: 74ch; }
.page h1 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); max-width: none; margin-bottom: 2.2rem; }
.page h2 { font-size: 1.2rem; margin: 2.6rem 0 .8rem; max-width: none; }
.page p, .page li { color: var(--texte-2); }
.page a { color: var(--rouge-clair); }
.page dl { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.6rem; margin: 0; }
.page dt { color: var(--texte-3); }
.page dd { margin: 0; }
@media (max-width: 560px) { .page dl { grid-template-columns: 1fr; gap: .1rem 0; }
  .page dd { margin-bottom: .7rem; } }