/* Quatre Coups — feuille de style du site.
   Même palette que le jeu : bleu nuit, cyan, orange, et les bois du plateau. */
:root{
  --nuit:#0D1B2A; --nuit-clair:#16324f; --cyan:#01A4E2; --orange:#FFBD59;
  --clair:#F0D9B5; --sombre:#B58863; --texte:#e8eef4; --gris:#9db4c8;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  /* Montserrat est auto-hébergée dans /fonts/ : le site la demandait sans
     jamais la fournir, et les visiteurs voyaient donc une police système. Elle
     vient de la vitrine de Paul, déjà en service, et aucune requête ne part
     vers Google (retour Fabien 08/08/2026). */
  font-family:Montserrat, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--nuit); color:var(--texte); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cyan); text-decoration:none;}
a:hover{text-decoration:underline;}
.bande{max-width:920px; margin:0 auto; padding:0 20px;}

header{
  background:radial-gradient(900px 600px at 50% -10%, var(--nuit-clair) 0%, var(--nuit) 62%);
  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(--orange);}
.logo{width:130px; height:130px; border-radius:28px; box-shadow:0 18px 44px rgba(0,0,0,.55);}
h1{font-size:clamp(30px,7vw,46px); font-weight:800; letter-spacing:.5px; margin:22px 0 6px;}
h1 span{color:var(--cyan);}
.accroche{font-size:clamp(16px,3.6vw,19px); color:var(--gris); max-width:560px; margin:0 auto;}
.prix{
  display:inline-block; margin-top:22px; padding:9px 20px; border-radius:99px;
  border:1px solid var(--orange); color:var(--orange); 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(--orange);}
.sous{color:var(--gris); margin-bottom:28px; max-width:640px;}
h3{font-size:17px; font-weight:700; margin:26px 0 6px; color:var(--clair);}

.grille{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.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;}
.bloc p{color:var(--gris); font-size:14.5px;}

.themes{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px;}
.pastille{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:99px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); font-size:14px;
}
.pastille i{width:15px; height:15px; border-radius:50%; display:inline-block;
  border:1px solid rgba(255,255,255,.45);}

.carte{
  background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12); border-left:3px solid var(--orange);
  border-radius:14px; padding:18px 20px; margin-bottom:14px;
}
.carte h3{margin:0 0 6px; color:var(--orange);}
.carte p{color:var(--gris); font-size:15px;}

.regles ul{margin:6px 0 0 20px; color:var(--gris); font-size:15px;}
.regles li{margin-bottom:7px;}
.regles b{color:var(--texte);}
.regles p{color:var(--gris); margin-bottom:8px;}

/* Galerie des quatre jeux : la capture d'abord, le texte en dessous.
   Sur écran large, les images se placent en alternance avec leur texte. */
.jeux{display:flex; flex-direction:column; gap:40px;}
.jeu{display:flex; gap:26px; align-items:center; flex-wrap:wrap;}
.jeu img{
  width:212px; height:auto; border-radius:20px; flex:0 0 auto;
  box-shadow:0 20px 46px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.1);
}
.jeu figcaption{flex:1 1 240px; min-width:240px;}
.jeu h3{margin:0 0 8px; font-size:20px; color:var(--texte);}
.jeu p{color:var(--gris); font-size:15px;}
.jeu .vu{display:inline-block; margin-top:10px; font-size:12.5px; color:var(--orange);
  border:1px solid rgba(255,189,89,.45); border-radius:99px; padding:4px 12px;}
@media (min-width:720px){
  .jeux .jeu:nth-of-type(even){flex-direction:row-reverse;}
  .jeux .jeu:nth-of-type(even) figcaption{text-align:right;}
}

/* Badges des boutiques : fichiers officiels d'Apple et de Google, jamais
   redessinés, leurs conditions d'usage l'interdisent. */
.badges{display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:24px;}
/* Les deux badges n'ont pas la même construction : celui d'Apple est cadré au
   ras du dessin, celui de Google porte 29 px de marge transparente en haut et
   en bas, imposée par ses règles d'usage. À hauteur d'image égale, le premier
   paraît donc nettement plus gros. On règle sur la hauteur du DESSIN, pas de
   l'image : 44 px pour Apple, 57 px pour Google (retour Fabien 07/08).
   Les deux images n'ayant dès lors plus la même hauteur, le conteneur les
   alignait par le haut et le dessin de Google tombait 7 px trop bas. D'où
   `align-items:center` : les centres coïncident, et comme le dessin de Google
   est centré dans son image, les deux dessins se retrouvent sur la même ligne
   (retour Fabien 08/08). */
.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;}