/* La Squad : le style du logo (contours noirs épais, couleurs pleines, ombres franches sans flou).
   Un seul thème, sombre, voulu. Polices hébergées ici (licence OFL, voir polices/).
   Après une modification : augmenter le ?v= de style.css dans les 3 pages (sinon le navigateur garde l'ancienne). */

@font-face {
  font-family: "Archivo";
  src: url("polices/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("polices/plexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("polices/plexmono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --night: #120e1a;      /* fond */
  --paper: #1b1526;      /* cartes sombres */
  --ink: #000;           /* contours et ombres */
  --text: #f6f1ff;
  --muted: #bdb3cf;
  --orange: #ff7a1a;     /* la manette du logo */
  --gold: #ffb020;
  --violet: #8b5cf6;     /* les joueurs du logo */
  --code-bg: #15101f;
  --discord: #313338;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --max: 1280px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.55;
}

a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; }

code, .kbd {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--code-bg);
  color: var(--gold);
  padding: 1px 6px;
  border-radius: 5px;
  white-space: nowrap;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ------------------------------------------------------------- en-tête */
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 850; font-size: 21px; font-stretch: 115%; text-decoration: none; }
.logo img { width: 36px; height: 36px; }
header.top nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 15px; }
header.top nav a { text-decoration: none; color: var(--muted); }
header.top nav a:hover { color: var(--text); }
header.top nav a.btn { color: var(--ink); }

/* ------------------------------------------------------------- boutons */
.btn {
  display: inline-block;
  background: var(--orange);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  padding: 12px 20px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn.small { padding: 7px 13px; font-size: 14px; border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.link { color: var(--text); text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: 1px; }

/* ------------------------------------------------------------- accueil */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center; padding-block: 40px 64px; }
.hero h1 { font-size: clamp(42px, 6.6vw, 76px); line-height: .98; margin: 0 0 18px; font-weight: 900; font-stretch: 112%; letter-spacing: -.01em; text-wrap: balance; }
.mark { display: inline-block; background: var(--violet); color: #fff; padding: 0 .12em; border: 3px solid var(--ink); border-radius: 10px; box-shadow: 5px 5px 0 var(--ink); transform: rotate(-2deg); }
.hero p { font-size: 20px; color: var(--muted); margin: 0 0 26px; max-width: 30rem; }
.hero .actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.hero-art { width: 100%; max-width: 440px; height: auto; display: block; margin-left: auto; filter: drop-shadow(8px 8px 0 var(--ink)); }

/* Fonds pleine largeur : le contenu reste centré, les côtés ne sont plus vides */
.hero { background: var(--night) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='none' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'><g stroke='%23ff7a1a' stroke-opacity='.10'><path d='M30 40h40a16 16 0 0 1 15 11l7 22a7 7 0 0 1-11 7l-9-9H38l-9 9a7 7 0 0 1-11-7l7-22a16 16 0 0 1 15-11z'/><path d='M40 50v12M34 56h12'/><circle cx='62' cy='52' r='2.5'/><circle cx='70' cy='60' r='2.5'/></g><g stroke='%238b5cf6' stroke-opacity='.13' transform='translate(118 118) rotate(-14 55 60)'><path d='M30 40h40a16 16 0 0 1 15 11l7 22a7 7 0 0 1-11 7l-9-9H38l-9 9a7 7 0 0 1-11-7l7-22a16 16 0 0 1 15-11z'/><path d='M40 50v12M34 56h12'/><circle cx='62' cy='52' r='2.5'/><circle cx='70' cy='60' r='2.5'/></g></g></svg>") 0 0 / 220px 220px; border-bottom: 3px solid var(--ink); }
.band-orange { background: var(--orange); border-bottom: 3px solid var(--ink); }
.band-dark { background: #0a0710; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
section.band-orange, section.band-dark { padding-block: 56px 64px; }
.band-orange .card.light { background: #fff7ee; color: var(--ink); }
.band-orange .card.light code { background: var(--ink); }

/* --------------------------------------------------------- rubriques */
section { padding-block: 24px 56px; }
section h2.title { font-size: clamp(28px, 4vw, 40px); font-weight: 900; font-stretch: 110%; margin: 0 0 22px; line-height: 1.1; text-wrap: balance; }

.questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.card { border: 3px solid var(--ink); border-radius: 18px; padding: 22px; box-shadow: 6px 6px 0 var(--ink); display: grid; gap: 10px; align-content: start; min-width: 0; background: var(--paper); }
.card h3 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 900; font-stretch: 110%; }
.card p { margin: 0; }
.card.orange { background: var(--orange); color: var(--ink); }
.card.orange code { background: var(--ink); }
.card.violet { background: var(--violet); color: #fff; }
.card.violet code { background: var(--ink); }
.card .more { color: var(--muted); font-size: 15px; }
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.minis .card h3 { font-size: 22px; }

/* Rendu d'un message Discord (en attendant les vraies captures) */
.shot { background: var(--discord); border: 3px solid var(--ink); border-radius: 12px; padding: 14px; margin: 6px 0 0; color: #dbdee1; font-family: "gg sans", "Noto Sans", system-ui, sans-serif; font-size: 14px; line-height: 1.45; display: grid; gap: 6px; }
.shot .who { color: #949ba4; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shot .who b { color: #f2f3f5; }
.shot .slash { color: #c9cdfb; background: #3c4270; border-radius: 3px; padding: 0 3px; }
.ava { width: 20px; height: 20px; border-radius: 50%; display: inline-block; flex: none; }
.ava.a1 { background: #e9a23b; } .ava.a2 { background: #7a5cff; } .ava.a3 { background: #3fb68b; }
img.ava { background: var(--code-bg); }
.embed { background: #2b2d31; border-left: 4px solid #7c3aed; border-radius: 4px; padding: 10px 14px 12px 12px; display: grid; gap: 4px; min-width: 0; }
.embed.v2 { border: 1px solid #3a3c42; border-left: 4px solid #7c3aed; border-radius: 8px; }
.embed hr { border: 0; height: 1px; background: #4e5058; margin: 4px 0; width: 100%; }
.embed .k { font-size: 12px; color: #b5bac1; }
.embed .t { font-weight: 700; color: #f2f3f5; font-size: 16px; }
.embed .s { font-size: 12.5px; }
.embed a { color: #00a8fc; text-decoration: none; }
.embed .m { color: #949ba4; font-size: 12.5px; }
.price { background: #3b2a12; color: var(--gold); font-size: 12px; border-radius: 4px; padding: 1px 6px; vertical-align: 2px; }
.dbtn { display: flex; gap: 6px; flex-wrap: wrap; }
.dbtn span { background: #4e5058; color: #fff; border-radius: 8px; padding: 4px 10px; font-size: 13px; display: inline-flex; gap: 5px; align-items: center; }
.e { width: 16px; height: 16px; vertical-align: -3px; }
.tile { border-radius: 4px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .06em; text-shadow: 0 2px 6px #000; aspect-ratio: 16 / 9; max-width: 100%; text-align: center; }
.tile.wide { aspect-ratio: 460 / 215; font-size: 14px; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
.g1 { background: linear-gradient(135deg, #1e293b, #f97316 60%, #fde68a); }
.g2 { background: linear-gradient(135deg, #0c4a6e, #38bdf8 55%, #14532d); }
.g3 { background: linear-gradient(135deg, #3f3f1a, #facc15 50%, #1c1917); }
.g4 { background: linear-gradient(135deg, #3b0764, #f43f5e 55%, #111); }

/* Démarrer en 3 commandes */
.start { list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.start li { display: grid; gap: 6px; border: 3px solid var(--ink); background: var(--paper); border-radius: 14px; padding: 14px 18px; box-shadow: 4px 4px 0 var(--ink); min-width: 170px; flex: 1 1 170px; }
.start li span { color: var(--muted); font-size: 15px; }
.start code, .start .kbd { justify-self: start; }

/* Commandes */
.commands { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 0; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 6px 6px 0 var(--ink); overflow: hidden; }
.commands dt, .commands dd { margin: 0; padding: 13px 18px; border-bottom: 1px solid #2c2340; }
.commands dt:last-of-type, .commands dd:last-of-type { border-bottom: 0; }
.commands dd { color: var(--muted); }

/* Questions fréquentes */
.faq { display: grid; gap: 14px; max-width: 46rem; }
details { border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 4px 4px 0 var(--ink); padding: 14px 18px; }
details summary { cursor: pointer; font-weight: 800; }
details[open] summary { color: var(--gold); }
details p { margin: 10px 0 0; color: var(--muted); }

/* ------------------------------------------------------------- pied */
footer { border-top: 3px solid var(--ink); background: #0d0a13; }
footer .wrap { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-block: 22px; color: var(--muted); font-size: 14px; }
footer a { color: var(--muted); margin-right: 16px; }
footer a:hover { color: var(--text); }

/* ------------------------------------------------------- pages légales */
.legal { max-width: 46rem; margin: 0 auto; padding: 32px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); }
.legal h1 { font-size: clamp(32px, 5vw, 46px); font-weight: 900; font-stretch: 110%; line-height: 1.05; margin: 0 0 6px; text-wrap: balance; }
.legal .updated { color: var(--muted); margin-top: 0; }
.legal h2 { font-size: 22px; font-weight: 850; margin: 36px 0 8px; }
.legal a { color: var(--gold); }
.legal table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; table-layout: fixed; border: 3px solid var(--ink); }
.legal th, .legal td { border: 1px solid #2c2340; padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.legal th { background: var(--paper); }
.note { background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); padding: 12px 16px; }

/* ------------------------------------------------------------- grand écran */
@media (min-width: 1100px) {
  :root { --max: 1440px; }  /* largeur maximale habituelle ; les fonds des rubriques, eux, vont d'un bord à l'autre */
  body { font-size: 18px; }
  .hero .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); padding-block: 64px 88px; }
  .hero h1 { font-size: clamp(64px, 5.6vw, 104px); }
  .hero p { font-size: 22px; max-width: 34rem; }
  .hero-art { max-width: min(560px, 32vw); }
  /* Cartes de largeurs différentes (7 + 5 colonnes, puis 5 + 7) ; dans les larges, le texte à gauche
     et le message du bot à droite */
  .questions { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; }
  .card.wide { grid-column: span 7; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 24px; align-items: start; }
  .card.narrow { grid-column: span 5; }
  .card.wide > h3, .card.wide > p { grid-column: 1; }
  .card.wide > .shot { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  .card h3 { font-size: 30px; }
  .minis { gap: 28px; }
  .commands { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); }
  .commands dt:nth-last-of-type(-n+2), .commands dd:nth-last-of-type(-n+2) { border-bottom: 0; }
  .commands dd { border-right: 1px solid #2c2340; }
  .commands dd:nth-of-type(2n) { border-right: 0; }
}

/* Très grands écrans (2K, 4K) : un peu plus grand, sans dépasser la largeur maximale */
@media (min-width: 1800px) {
  body { font-size: 19px; }
  .hero h1 { font-size: 104px; }
  .card h3 { font-size: 32px; }
}

/* ------------------------------------------------------------ téléphone */
@media (max-width: 820px) {
  .hero .wrap, .questions { grid-template-columns: 1fr; }
  .hero-art { margin: 0 auto; max-width: 300px; order: -1; }
  .minis { grid-template-columns: 1fr; }
  .commands { grid-template-columns: 1fr; }
  .commands dt { border-bottom: 0; padding-bottom: 2px; }
  header.top nav a.hide-mobile { display: none; }
}