/* Quatre Sabots — feuille de style du site.
   Les couleurs sont celles du jeu : le vert du tapis, l'or des lettres, la
   crème du texte. Rien n'est inventé ici, tout vient de `index.html` du jeu. */
:root{
  --nuit:#08160f; --vert:#123027; --vert-clair:#1b4535;
  --or:#f0c458; --creme:#f7f0e0; --gris:#9db3a4;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  /* Montserrat est auto-hébergée dans /fonts/ : aucune requête ne part vers
     Google, et la page ne dépend d'aucun serveur tiers pour s'afficher. */
  font-family:Montserrat, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--nuit); color:var(--creme); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--or); text-decoration:none;}
a:hover{text-decoration:underline;}
.bande{max-width:920px; margin:0 auto; padding:0 20px;}

header{
  background:radial-gradient(900px 620px at 50% -10%, var(--vert-clair) 0%, var(--nuit) 64%);
  padding:26px 0 60px; text-align:center;
}
nav{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; font-size:14px; margin-bottom:46px;}
nav a{color:var(--gris);}
nav a:hover, nav a[aria-current]{color:var(--or);}
.logo{width:130px; height:130px; border-radius:28px; box-shadow:0 18px 44px rgba(0,0,0,.6);}
h1{font-size:clamp(30px,7vw,46px); font-weight:800; letter-spacing:.14em; margin:22px 0 6px;
   text-transform:uppercase;}
h1 span{color:var(--or);}
.accroche{font-size:clamp(16px,3.6vw,19px); color:var(--gris); max-width:580px; margin:0 auto;}
.prix{
  display:inline-block; margin-top:22px; padding:9px 20px; border-radius:99px;
  border:1px solid var(--or); color:var(--or); font-weight:700; font-size:15px;
}

section{padding:52px 0; border-top:1px solid rgba(255,255,255,.08);}
h2{font-size:clamp(22px,5vw,30px); font-weight:800; margin-bottom:8px;}
h2 span{color:var(--or);}
.sous{color:var(--gris); margin-bottom:22px; max-width:660px;}
h3{font-size:17px; font-weight:700; margin:26px 0 6px; color:var(--creme);}

/* Le bouton qui mène au jeu jouable dans le navigateur. Le seul élément plein
   de la page : c'est l'action qu'on attend du visiteur avant la sortie des
   applications. */
.essayer{
  display:inline-block; margin-top:18px; padding:14px 30px; border-radius:99px;
  background:var(--or); color:#20180a; font-weight:800; font-size:16px;
  box-shadow:0 12px 30px rgba(240,196,88,.22);
}
.essayer:hover{text-decoration:none; filter:brightness(1.06);}

/* Les captures : la joute d'abord, c'est elle qui distingue le jeu. */
.captures{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:8px;}
.captures figure{width:200px;}
.captures img{
  width:100%; height:auto; border-radius:16px; display:block;
  box-shadow:0 18px 40px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.1);
}
.captures figcaption{margin-top:10px; font-size:13.5px; color:var(--gris); text-align:center;}

/* Les huit bustes, quatre camps de deux. Le fond de chaque vignette prend la
   couleur du camp, très diluée : on lit la répartition d'un coup d'œil. */
/* 190 px et non 210 : la bande fait 920 px moins 20 px de marge de chaque
   côté, soit 880 px utiles. Quatre colonnes de 210 px avec trois gouttières
   en demandaient 888, huit de trop, et la quatrième écurie tombait seule sur
   une deuxième ligne. */
.ecuries{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-top:8px;}
.ecurie{
  border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:16px 14px 12px;
  text-align:center;
}
.ecurie .bustes{display:flex; justify-content:center; align-items:flex-end; gap:6px; min-height:120px;}
.ecurie img{height:118px; width:auto;}
.ecurie p{margin-top:8px; font-size:14.5px; font-weight:700;}
.ecurie small{display:block; color:var(--gris); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; margin-top:2px;}

/* Les six cartes spéciales, en éventail léger comme dans une main. */
.cartes{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:12px;}
.cartes figure{width:130px; text-align:center;}
.cartes img{width:100%; height:auto; filter:drop-shadow(0 10px 20px rgba(0,0,0,.55));}
.cartes figcaption{margin-top:8px; font-size:13px; color:var(--gris);}

.grille{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:10px;}
.bloc{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:20px;
}
.bloc h3{margin-top:0; color:var(--or);}
.bloc p{color:var(--gris); font-size:14.5px;}

/* Badges des boutiques : fichiers officiels d'Apple et de Google, jamais
   redessinés, leurs conditions d'usage l'interdisent. Les deux n'ont pas le
   même cadrage — celui de Google porte une marge transparente imposée — d'où
   deux hauteurs différentes pour un dessin de même taille. */
.badges{display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:24px;}
.badges img[src$=".svg"]{height:44px; width:auto;}
.badges img[src$=".png"]{height:57px; width:auto;}
.badges .attente{
  display:inline-flex; align-items:center; height:52px; padding:0 20px;
  border:1px dashed rgba(255,255,255,.3); border-radius:10px;
  color:var(--gris); font-size:13.5px;
}

footer{
  border-top:1px solid rgba(255,255,255,.08); padding:34px 0 46px;
  color:var(--gris); font-size:13.5px; text-align:center;
}
footer a{margin:0 10px; white-space:nowrap;}
.mention{max-width:640px; margin:14px auto 0; font-size:12.5px; opacity:.75;}