@font-face { font-family: Lato; font-weight: 400; font-display: swap; src: url(fonts/lato-400.woff) format("woff"); }
@font-face { font-family: Lato; font-weight: 700; font-display: swap; src: url(fonts/lato-700.woff) format("woff"); }
@font-face { font-family: Lato; font-weight: 900; font-display: swap; src: url(fonts/lato-900.woff) format("woff"); }

/* Les couleurs viennent du jeu (GameSceneBuilder.cs, BoardView.cs) et des visuels des stores. */
:root {
  --forest: #1F5C33;
  --forest-2: #266F3E;
  --forest-deep: #174728;
  --grass: #7FBF60;
  --cell-light: #ADDE8B;
  --cell-dark: #9BD378;
  --cell-used: #E4F4D8;
  --card: #FFFDF3;
  --sand: #E9E2D2;
  --amber: #FFB43D;
  --ink: #2F4A22;
  --pick: #FFD34D;
  --bad: #B3261E;
  --pad: clamp(16px, 4vw, 48px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--forest); color: var(--ink); font: 400 1.0625rem/1.55 Lato, system-ui, sans-serif; overflow-wrap: break-word; font-variant-ligatures: no-common-ligatures; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 900; line-height: 1.1; margin: 0; }
h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.doc :focus-visible, .contact :focus-visible { outline-color: var(--forest); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 16px; z-index: 5; border-radius: 8px; }
.skip:focus { left: 8px; }

.button {
  display: inline-block; border: 0; border-radius: 12px; padding: 14px 26px; cursor: pointer;
  background: var(--amber); color: var(--ink); font: 900 1.0625rem/1.2 Lato, sans-serif; text-decoration: none;
  box-shadow: 0 4px 0 #D98F1F;
}
.button:active { transform: translateY(3px); box-shadow: 0 1px 0 #D98F1F; }
.button:disabled { opacity: .65; cursor: default; }

/* En-tête */
.top { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; padding: 14px var(--pad); background: var(--forest); color: var(--card); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.3rem; text-decoration: none; }
.brand img { border-radius: 10px; }
.top nav { margin-left: auto; }
.links, .langs { display: flex; gap: 6px 20px; flex-wrap: wrap; }
.links a { text-decoration: none; font-weight: 700; }
.links a:hover, .langs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.langs { gap: 4px; font-weight: 700; font-size: .95rem; }
.langs a, .langs span { display: block; padding: 4px 8px; border-radius: 6px; text-decoration: none; }
.langs span { background: var(--card); color: var(--forest); }

/* Le damier des visuels stores : 125 px de côté, comme la bannière Google Play */
.hero {
  background: repeating-conic-gradient(var(--forest-2) 0 25%, var(--forest) 0 50%) 0 0 / 250px 250px;
}
.hero {
  display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 480px); gap: 32px clamp(32px, 6vw, 96px);
  justify-content: center; align-items: center; padding: calc(clamp(24px, 5vw, 64px) + 72px) var(--pad) clamp(40px, 6vw, 88px); color: var(--card);
}
.is-home .top { position: absolute; inset: 0 0 auto; background: none; z-index: 2; }
.hero h1 { font-size: clamp(3.4rem, 9.5vw, 6.6rem); letter-spacing: -.01em; text-shadow: 0 .055em 0 var(--forest-deep); }
.hero h1 span { display: block; margin-top: .22em; color: var(--amber); font-size: .44em; letter-spacing: 0; text-shadow: none; }
.lead { margin-top: 20px; font-size: 1.3rem; line-height: 1.45; }
.soon { margin-top: 24px; font-weight: 900; font-size: 1.2rem; }
.stores { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.free { margin-top: 10px; }
.try { display: none; margin-top: 22px; }

/* La grille jouable, dans le cadre des captures du jeu */
.demo { position: relative; background: var(--grass); border: 6px solid var(--card); border-radius: 30px; padding: 14px; color: var(--ink); box-shadow: 0 10px 0 var(--forest-deep); }
.tab { position: absolute; left: 20px; top: -24px; z-index: 3; padding: 7px 18px; border-radius: 12px; background: var(--amber); font-weight: 900; font-size: 1.15rem; line-height: 1.2; box-shadow: 0 4px 0 #D98F1F; }
.peek { position: absolute; right: -10px; top: -78px; width: 92px; pointer-events: none; }
.say { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 4.6em; padding: 16px 16px 8px; background: var(--card); border-radius: 14px; font-weight: 700; line-height: 1.3; }
.board { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; margin-top: 12px; }
.noscript { grid-column: 1 / -1; text-align: center; padding: 40px 12px; font-weight: 700; }
.cell { position: relative; min-width: 0; min-height: 0; aspect-ratio: 1; padding: 6%; border: 0; border-radius: 7px; cursor: pointer; display: grid; place-items: center; touch-action: manipulation; transition: background-color .2s; }
.cell.light { background: var(--cell-light); }
.cell.dark { background: var(--cell-dark); }
.cell.used { background: var(--cell-used); }
.cell:disabled { cursor: default; }
.cell img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.cell.picked { box-shadow: inset 0 0 0 4px var(--pick); background: #FFF3C4; }
.cell .animal { position: relative; z-index: 2; }
.cell:focus-visible { outline: 3px solid var(--forest-deep); outline-offset: -3px; z-index: 3; }
.dot { width: 34%; aspect-ratio: 1; border-radius: 50%; }
.guiding .dot { animation: beat 1s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(1.35); } }
.cell.cue { z-index: 3; box-shadow: 0 0 0 4px var(--pick); animation: ripple 1.4s ease-out infinite; }
@keyframes ripple { to { box-shadow: 0 0 0 4px var(--pick), 0 0 0 20px rgba(255, 211, 77, 0); } from { box-shadow: 0 0 0 4px var(--pick), 0 0 0 4px rgba(255, 211, 77, .9); } }
.tap { position: absolute; z-index: 4; height: auto; pointer-events: none; animation: press 1.4s ease-in-out infinite; }
.tap[hidden] { display: none; }
@keyframes press { 45% { transform: translate(-8%, -10%) scale(.9); } }
.links-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.links-layer line { stroke-width: .05; stroke-dasharray: .02 .12; stroke-linecap: round; }
.tray { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; margin-top: 12px; }
.pips { display: flex; gap: 4px; }
.pips img { width: 38px; height: 38px; filter: grayscale(1) opacity(.45); transition: filter .25s; }
.pips img.done { filter: none; }
.again { padding: 11px 18px; border: 0; border-radius: 12px; background: var(--amber); color: var(--ink); font: 900 1rem Lato, sans-serif; cursor: pointer; }
.again[hidden] { display: none; }

.landing { animation: land .34s cubic-bezier(.3, 1.3, .6, 1); }
@keyframes land { from { transform: translate(var(--from-x), var(--from-y)) scale(.6); } }
.refuse { animation: refuse .3s; }
@keyframes refuse { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.won .animal { animation: hop .5s ease-out 2; }
@keyframes hop { 40% { transform: translateY(-26%) scale(1.08); } }

/* Règles */
.rules { background: var(--grass); color: #24391A; padding: clamp(40px, 7vw, 80px) var(--pad); }
.rules h2, .rules ol { max-width: 1120px; margin-inline: auto; }
.rules ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 28px; }
.rules img { width: 112px; border-radius: 16px; background: var(--card); padding: 8px; }
.rules h3 { margin-top: 14px; }
.rules p { margin-top: 6px; }

/* Un plateau : huit cases qui se touchent */
.animals { background: var(--forest); color: var(--card); }
.animals-head { max-width: 1216px; margin-inline: auto; padding: clamp(40px, 7vw, 80px) var(--pad) 28px; }
.animals-head p { margin-top: 10px; max-width: 40rem; font-size: 1.15rem; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1216px; margin-inline: auto; padding-inline: var(--pad); }
.tile { position: relative; padding: 20px 20px 22px; color: var(--ink); background: var(--cell-light); min-height: 256px; }
.tile:nth-child(8n+2), .tile:nth-child(8n+4), .tile:nth-child(8n+5), .tile:nth-child(8n+7) { background: var(--cell-dark); }
.tile-art { position: relative; width: 112px; height: 90px; }
.tile-art > img:first-child { width: 84px; height: 84px; }
.tile-home { position: absolute; left: 70px; bottom: 0; width: 44px; height: 44px; }
.tile h3 { margin-top: 10px; }
.tile p { margin-top: 4px; font-size: 1rem; line-height: 1.4; }
.tile-move { position: absolute; right: 12px; top: 12px; width: 72px; border-radius: 10px; background: var(--card); padding: 4px; }

/* Captures */
.shots { background: var(--forest); color: var(--card); padding: clamp(40px, 7vw, 80px) 0; }
.shots h2, .strip { max-width: 1000px; margin-inline: auto; padding-inline: var(--pad); }
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.strip img { border-radius: 20px; }

/* Rendez-vous */
.features { background: var(--card); padding: clamp(40px, 7vw, 80px) var(--pad); }
.features h2, .features ul { max-width: 1120px; margin-inline: auto; }
.features ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; margin-top: 32px; }
.features li { display: flex; gap: 18px; align-items: flex-start; }
.features img { flex: none; width: 72px; }
.features p { margin-top: 6px; }

/* Pages de texte */
.doc { background: var(--card); padding: clamp(32px, 6vw, 64px) max(var(--pad), calc((100vw - 46rem) / 2)) 72px; }
.doc h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); }
.doc h2 { font-size: 1.45rem; margin-top: 2em; }
.doc p, .doc ul { margin-top: .8em; max-width: 42rem; }
.doc ul { list-style: disc; padding-left: 1.3em; }
.doc li + li { margin-top: .35em; }
.doc .date { color: #55704A; margin-top: .5em; }
.doc a { color: #1B6B36; text-underline-offset: 3px; }
.todo { background: var(--pick); color: var(--ink); padding: 0 .3em; border-radius: 4px; font-weight: 700; }
.table { margin-top: 1em; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .96rem; line-height: 1.4; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--sand); }
th { font-weight: 900; border-bottom: 2px solid var(--ink); }

/* Formulaire */
form { margin-top: 28px; max-width: 34rem; }
label { display: block; margin-top: 18px; font-weight: 700; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font: inherit; color: inherit; background: #fff; border: 2px solid #8FA685; border-radius: 10px; }
textarea { resize: vertical; }
.hp { position: absolute; left: -9999px; }
/* La mention reCAPTCHA est écrite sous le formulaire, comme Google l'autorise */
.grecaptcha-badge { visibility: hidden; }
.help { color: #55704A; font-size: .96rem; }
form .help { margin-top: 6px; }
form .button { margin-top: 22px; }
.status { min-height: 1.5em; margin-top: 14px; font-weight: 700; }
.status.good { color: #1B6B36; }
.status.bad { color: var(--bad); }

/* Pied de page */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; padding: 24px var(--pad); background: var(--forest-deep); color: var(--card); }
.foot ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot a { text-underline-offset: 3px; }

/* Choix de langue et page 404 */
.chooser { min-height: 100vh; display: grid; place-items: center; padding: 24px; color: var(--card); background: repeating-conic-gradient(var(--forest-2) 0 25%, var(--forest) 0 50%) 0 0 / 250px 250px; text-align: center; }
.chooser img { margin: 0 auto; border-radius: 22px; }
.chooser h1 { font-size: 3rem; margin-top: 14px; }
.chooser ul { display: grid; gap: 14px; margin-top: 22px; }

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .try { display: inline-block; }
  .demo { width: 100%; max-width: 480px; margin-top: 34px; scroll-margin-top: 44px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:nth-child(n) { background: var(--cell-light); }
  .tile:nth-child(4n+2), .tile:nth-child(4n+3) { background: var(--cell-dark); }
  .features ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* Sur téléphone, les captures se font défiler au doigt */
  .strip { display: flex; gap: 16px; max-width: none; padding-block: 4px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: var(--amber) var(--forest-deep); }
  .strip li { flex: 0 0 min(68vw, 300px); scroll-snap-align: center; }
  .rules ol { grid-template-columns: minmax(0, 1fr); }
  .rules li { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; }
  .rules img { grid-row: span 2; width: 88px; }
  .rules h3 { margin-top: 0; }
  .top nav { order: 3; width: 100%; margin-left: 0; }
  .hero { padding-top: calc(clamp(24px, 5vw, 64px) + 104px); }
  .tab { position: absolute; left: 20px; top: -24px; z-index: 3; padding: 7px 18px; border-radius: 12px; background: var(--amber); font-weight: 900; font-size: 1.15rem; line-height: 1.2; box-shadow: 0 4px 0 #D98F1F; }
.peek { width: 72px; top: -60px; }
  .langs { margin-left: auto; }
}
@media (max-width: 520px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile:nth-child(n) { min-height: 0; background: var(--cell-light); }
  .tile:nth-child(even) { background: var(--cell-dark); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}