@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --bg: #ffffff;
  --ink: #1a1a1a;
  --soft: #6c6c6c;
  --green-soft: #dbffcb;
  --pink-soft: #ffd9f2;
  --yellow-soft: #f9eecd;
  --orange-soft: #ffd5c1;
  --blue-soft: #cbecff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--ink);
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 56px 24px 80px; }

.langbar {
  display: inline-flex; border: 2px solid var(--ink); border-radius: 999px;
  overflow: hidden; margin-bottom: 26px;
}
.langbar button {
  font: inherit; font-size: .86rem; font-weight: 700; padding: 6px 15px;
  border: 0; background: #fff; color: var(--ink); cursor: pointer;
}
.langbar button[aria-pressed="true"] { background: var(--ink); color: #fff; }

body[data-lang="en"] [lang="fr"], body[data-lang="fr"] [lang="en"] { display: none; }

header { margin-bottom: 44px; }

.kicker {
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--soft); margin-bottom: 14px;
}

h1 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(2.1rem, 5vw, 3.2rem); font-weight: 800;
  line-height: 1.05; margin-bottom: 18px;
}

.lede { font-size: 1.06rem; line-height: 1.65; max-width: 62ch; color: #2c2c2c;
        text-align: justify; text-justify: inter-word; hyphens: auto; }
.lede + .lede { margin-top: 14px; }

h2 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 1.55rem; font-weight: 700; margin: 52px 0 6px;
}

.sub { color: var(--soft); font-size: .95rem; margin-bottom: 24px; max-width: 68ch; line-height: 1.6;
       text-align: justify; text-justify: inter-word; hyphens: auto; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit; background: #fff;
  border: 2px solid var(--ink); border-radius: 18px; padding: 22px;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }

.card .tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px; margin-bottom: 13px;
}
.t-fire { background: var(--orange-soft); }
.t-bully { background: var(--blue-soft); }
.t-robot { background: var(--yellow-soft); }
.t-doc { background: var(--pink-soft); }
.t-kit { background: var(--green-soft); }

.card h3 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 1.24rem; font-weight: 700; margin-bottom: 8px;
}
.card p { font-size: .94rem; line-height: 1.6; color: #333;
          text-align: justify; text-justify: inter-word; hyphens: auto; }
.card .note { display: block; margin-top: 10px; font-size: .84rem; color: var(--soft); }
.card .more { margin-top: auto; padding-top: 14px; display: block; font-weight: 700; font-size: .9rem; }

footer {
  margin-top: 68px; padding-top: 26px; border-top: 2px solid var(--ink);
  font-size: .88rem; color: var(--soft); line-height: 1.65;
  text-align: justify; text-justify: inter-word; hyphens: auto;
}
footer p + p { margin-top: 8px; }
footer a { color: inherit; }

@media (max-width: 640px) { .wrap { padding: 36px 18px 60px; } }

.haut {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 46px; height: 46px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--ink); background: #fff; color: var(--ink);
  font: 700 1.15rem/1 'Manrope', system-ui, sans-serif;
  box-shadow: 3px 3px 0 var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.haut.visible { opacity: 1; visibility: visible; transform: none; }
.haut:hover { box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px, -2px); }
.horstexte {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 620px) { .haut { right: 14px; bottom: 14px; } }

dialog.visionneuse { border:0; padding:0; background:transparent;
  position:fixed; inset:0; margin:auto; width:fit-content; height:fit-content;
  max-width:100vw; max-height:100vh; }
dialog.visionneuse::backdrop { background:rgba(0,0,0,.88); }
dialog.visionneuse .cadre { position:relative; line-height:0; }
dialog.visionneuse img { max-width:92vw; max-height:86vh; width:auto; height:auto; display:block; border-radius:12px; background:#fff; }
dialog.visionneuse .fermer {
  position:absolute; top:10px; right:10px; width:42px; height:42px; border-radius:999px; cursor:pointer;
  border:2px solid #1a1a1a; background:#fff; color:#1a1a1a; font:700 1.05rem/1 system-ui, sans-serif;
}
dialog.visionneuse .fermer:hover { background:#f2f2f2; }