@font-face {
  font-family: Fondamento;
  src: url("assets/fondamento-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Tangerine;
  src: url("assets/tangerine-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  --ink: #34210f;
  --forest: #163e32;
  --gold: #eac46c;
  --parchment: #e2c088;
  --cream: #fff0ca;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--ink); background: var(--forest); font: 400 1.125rem/1.55 Fondamento, "Palatino Linotype", cursive; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #2c6f91; outline-offset: 6px; }
::selection { background: #b4caba; color: #162f27; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
.page-width { width: min(1380px, calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: absolute; top: -100px; left: 20px; z-index: 10; padding: 12px 20px; background: var(--cream); }
.skip-link:focus { top: 12px; }
.landscape { position: fixed; inset: 0; z-index: -1; background: url("assets/studio-hero-medieval.webp") center top / cover no-repeat; }
.landscape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(9 35 28 / 12%), transparent 35%, rgb(8 31 23 / 48%)); }
#dragon-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.site-header { color: var(--cream); background: rgb(10 31 24 / 85%); border-bottom: 1px solid rgb(234 196 108 / 36%); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 15px; }
.brand { display: flex; align-items: baseline; gap: 10px; font: 700 2.8rem/1 Tangerine, cursive; color: #f8dc99; }
.brand span { font: 400 1rem/1.4 Fondamento, cursive; }
.nav-links { display: flex; align-items: center; gap: 36px; font-size: 1.125rem; }
.nav-links a { padding-block: 8px; border-bottom: 1px solid transparent; }
.nav-links a:hover { color: #ffda7a; border-color: currentColor; }
.hero { position: relative; padding-block: 145px 180px; }
.terrace-companion { position: absolute; bottom: 0; left: 0; width: clamp(210px, 27vw, 350px); pointer-events: none; z-index: 3; }
.terrace-companion img { width: 100%; filter: drop-shadow(0 12px 8px rgb(17 19 13 / 35%)); }
.motion-control { position: fixed; bottom: 12px; right: 14px; z-index: 8; border: 1px solid #b79b5d; border-radius: 4px; padding: 8px 13px; background: rgb(16 46 37 / 94%); color: var(--cream); font-size: .875rem; cursor: pointer; box-shadow: 0 4px 16px #10271d55; }
.motion-control:hover { background: #245642; }
.frame-top canvas { display: block; width: 100%; height: 100%; }
.frame-art .frame-top.animated-carving { background-image: none; }
.framed-panel { position: relative; container-type: inline-size; isolation: isolate; }
.royal-panel { width: min(1160px, 100%); margin-inline: auto; }
.parchment { position: absolute; z-index: -2; background: var(--parchment) url("assets/parchment-texture.webp") center / cover; box-shadow: inset 0 0 38px rgb(69 36 10 / 30%); }
.frame-art { position: absolute; inset: 0; z-index: 2; pointer-events: none; filter: drop-shadow(0 10px 9px rgb(10 20 11 / 42%)); }
.frame-art span { position: absolute; left: 0; width: 100%; background-repeat: no-repeat; }
/* Keep the carved crests and corners proportional; only the side rails extend. */
.royal-panel .parchment { inset: 10cqw 5.5cqw 6cqw; }
.royal-panel .frame-art span { background-image: url("assets/top-royal-frame.webp"); }
.royal-panel .frame-top { top: 0; height: 16cqw; background-size: 100% auto; background-position: center top; }
.royal-panel .frame-middle { top: 16cqw; bottom: 12cqw; }
.royal-panel .frame-bottom { bottom: 0; height: 12cqw; background-size: 100% auto; background-position: center bottom; }
.royal-panel .frame-art .frame-middle {
  background: none;
  border: 0 solid transparent;
  border-image: url("assets/top-royal-frame.webp") 289 240 217 240 / 0 13.2964cqw / 0 stretch;
}
.royal-content { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); align-items: center; gap: 44px; padding: 17.5cqw 13cqw 12cqw; }
.official-logo { width: 100%; max-width: 270px; justify-self: center; border-radius: 4px; box-shadow: 0 8px 22px rgb(53 27 7 / 30%); }
.royal-copy { text-align: center; }
.eyebrow { font-size: 1rem; line-height: 1.4; color: #713522; }
h1 { margin: 10px 0 4px; font: 700 4.5rem/.9 Tangerine, cursive; color: #3c240f; }
h1 span { display: block; font-size: 3.8rem; }
.hero-tagline { margin: 16px 0 21px; font-size: 1.25rem; line-height: 1.35; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 9px 20px; border: 1px solid #ceae6d; outline: 1px solid #164132; outline-offset: 2px; border-radius: 3px; background: var(--forest); color: var(--cream); font-size: 1.125rem; line-height: 1.4; text-align: center; box-shadow: 0 5px 12px rgb(41 35 17 / 18%); transition: background .18s, transform .18s; }
.button:hover { background: #245642; transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.projects-section { padding-block: 14px 42px; }
.section-heading { display: flex; align-items: center; justify-content: center; gap: 22px; padding-block: 8px 12px; }
.section-heading h2 { color: #fff2ca; font: 700 3.2rem/1.05 Tangerine, cursive; text-align: center; text-shadow: 0 2px 3px #14342b, 0 0 16px #14342b; }
.heading-rule { height: 1px; width: 64px; background: #edcf89; box-shadow: 0 1px 2px #294f37; }
.projects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.project-card { --frame-x: 0%; }
.dragon-panel { --frame-x: 50%; }
.nature-panel { --frame-x: 100%; }
.tableaux-panel { --frame-x: 0%; }
.project-card .parchment { inset: 24cqw 8cqw 20cqw; }
.project-card .frame-art span { background-image: url("assets/project-frames-lion-dragon.webp"); }
.project-card .frame-top { top: 0; height: 34cqw; background-size: 300% auto; background-position: var(--frame-x) top; }
.project-card .frame-middle { top: 34cqw; bottom: 27cqw; background-size: 300% 256.410256%; background-position: var(--frame-x) 55.737705%; }
.project-card .frame-bottom { bottom: 0; height: 27cqw; background-size: 300% auto; background-position: var(--frame-x) bottom; }
.project-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 100cqw; height: 100%; padding: 34cqw 17cqw 29cqw; text-align: center; }
.project-content .eyebrow { font-size: .9375rem; }
.project-content h3 { font: 400 1.75rem/1.18 Fondamento, cursive; color: #402710; text-wrap: balance; }
.project-content > p:not(.eyebrow) { font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }
.project-links { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.button-store { min-height: 38px; padding: 6px 14px; font-size: .95rem; }
.small-links { font-size: .95rem; color: #5d3418; }
.small-links a, .contact-mail { text-decoration: underline; text-underline-offset: 4px; }
.contact-mail { color: #4f2a12; word-break: break-word; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.story-section { padding: 26px 0 32px; background: rgb(9 33 25 / 66%); border-top: 1px solid rgb(234 196 108 / 20%); }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 1200px; }
.story-panel .parchment { inset: 19cqw 10cqw 12cqw; }
.unicorn-panel .frame-art span { background-image: url("assets/studio-unicorn-frame.webp"); }
.eagle-panel .frame-art span { background-image: url("assets/contact-eagle-frame.webp"); }
.story-panel .frame-top { top: 0; height: 28cqw; background-size: 100% auto; background-position: center top; }
.story-panel .frame-middle { top: 28cqw; bottom: 24cqw; }
.story-panel .frame-bottom { bottom: 0; height: 24cqw; background-size: 100% auto; background-position: center bottom; }
.eagle-panel .frame-top { height: 35cqw; }
.eagle-panel .frame-middle { top: 35cqw; bottom: 18cqw; }
.eagle-panel .frame-bottom { height: 18cqw; }
.eagle-panel .parchment { inset: 28cqw 10cqw 8cqw; }
.unicorn-panel .frame-art .frame-middle {
  background: none;
  border: 0 solid transparent;
  border-image: url("assets/studio-unicorn-frame.webp") 287 210 246 210 / 0 20.5078cqw / 0 stretch;
}
.eagle-panel .frame-art .frame-middle {
  background: none;
  border: 0 solid transparent;
  border-image: url("assets/contact-eagle-frame.webp") 358 185 184 185 / 0 18.0664cqw / 0 stretch;
}
.story-content { display: flex; flex-direction: column; justify-content: center; gap: 14px; height: 100%; min-height: 100cqw; padding: 29cqw 21cqw 26cqw; text-align: center; }
.story-content h2 { color: #3c2712; font: 700 3.6rem/1 Tangerine, cursive; }
.story-content > p:not(.eyebrow) { font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; }
.signature { margin-top: 5px; font: 700 2.3rem/1.1 Tangerine, cursive; }
.story-content .contact-note { margin-top: 8px; padding-top: 16px; border-top: 1px solid rgb(98 70 29 / 30%); color: #613a21; }
.eagle-panel .story-content { padding-top: 39cqw; padding-bottom: 21cqw; }
.site-footer { padding-block: 26px 70px; background: #102e25; color: #e9d49d; border-top: 1px solid rgb(234 196 108 / 22%); font-size: 1rem; }
.footer-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.footer-brand { font: 700 2.4rem/1.1 Tangerine, cursive; }
.site-footer a { text-decoration: underline; text-underline-offset: 5px; }
@media (min-width: 1181px) {
  .project-content { padding-inline: 16cqw; gap: 9px; }
  .project-content h3 { font-size: 1.5rem; }
  .project-content > p:not(.eyebrow) { font-size: 1rem; line-height: 1.45; }
  .project-content .eyebrow { font-size: .875rem; }
}
@media (max-width: 1180px) {
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }
}
@media (max-width: 1100px) {
  .page-width { width: calc(100% - 40px); }
  .royal-content { gap: 28px; padding-inline: 12cqw; }
  h1 { font-size: 4rem; }
  h1 span { font-size: 3.3rem; }
  .royal-copy .eyebrow { font-size: .9375rem; }
  .projects { gap: 6px; }
  .project-content { padding-inline: 17cqw; gap: 10px; }
  .project-content h3 { font-size: 1.5rem; }
  .project-content > p:not(.eyebrow) { font-size: 1rem; }
  .project-content .eyebrow { font-size: .875rem; }
  .story-grid { gap: 12px; }
  .story-content { padding-inline: 20cqw; }
}
@media (max-width: 800px) {
  .nav { gap: 16px; }
  .nav-links { gap: 22px; font-size: 1rem; }
  .brand { flex-direction: column; gap: 0; }
  .brand span { font-size: .875rem; }
  .hero { padding-top: 135px; padding-bottom: 160px; }
  .royal-content { gap: 20px; padding-top: 19cqw; padding-bottom: 14cqw; }
  .royal-copy .eyebrow { max-width: 150px; margin-inline: auto; }
  h1 { font-size: 3.4rem; }
  h1 span { font-size: 2.7rem; }
  .hero-tagline { font-size: 1rem; margin: 12px 0 18px; }
  .button { padding-inline: 12px; font-size: 1rem; }
  .section-heading h2 { font-size: 2.8rem; }
  .heading-rule { width: 32px; }
  .projects { grid-template-columns: minmax(0, 470px); justify-content: center; gap: 0; }
  .project-content { gap: 12px; }
  .project-content h3 { font-size: 1.75rem; }
  .project-content > p:not(.eyebrow) { font-size: 1.125rem; }
  .project-content .eyebrow { font-size: 1rem; }
  .projects-section { padding-bottom: 24px; }
  .story-grid { grid-template-columns: minmax(0, 550px); justify-content: center; gap: 12px; }
}
@media (max-width: 520px) {
  .page-width { width: calc(100% - 24px); }
  .nav { flex-direction: column; gap: 9px; padding-block: 13px 8px; }
  .brand { flex-direction: row; align-items: baseline; gap: 8px; font-size: 2.4rem; }
  .brand span { font-size: .9375rem; }
  .nav-links { width: 100%; justify-content: center; gap: 28px; }
  .hero { padding-top: 130px; padding-bottom: 145px; }
  .terrace-companion { width: 230px; left: 0; }
  .royal-panel .frame-art span { background-image: url("assets/top-royal-frame-portrait.webp"); }
  .royal-panel .frame-top { height: 29cqw; }
  .royal-panel .frame-bottom { height: 23cqw; }
  .royal-panel .frame-art .frame-middle { top: 29cqw; bottom: 23cqw; background: none; border-image: url("assets/top-royal-frame-portrait.webp") 297 180 236 180 / 0 17.578125cqw / 0 stretch; }
  .royal-panel .parchment { inset: 22cqw 7cqw 15cqw; }
  .royal-content { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32cqw 18cqw 26cqw; }
  .official-logo { width: 184px; }
  .royal-copy .eyebrow { max-width: none; }
  h1 { font-size: 3.4rem; margin-top: 12px; }
  h1 span { font-size: 2.9rem; }
  .hero-tagline { margin-block: 14px 20px; font-size: 1.125rem; }
  .button { min-height: 46px; }
  .section-heading { gap: 10px; padding-top: 20px; }
  .section-heading h2 { max-width: 280px; font-size: 2.8rem; }
  .heading-rule { flex: 1; max-width: 24px; }
  .project-content { padding-inline: 18cqw; }
  .project-content h3 { font-size: 1.6rem; }
  .project-content > p:not(.eyebrow) { font-size: 1.0625rem; }
  .project-content .eyebrow { font-size: .9375rem; }
  .story-section { padding-block: 18px; }
  .story-content { padding: 30cqw 20cqw 27cqw; gap: 13px; }
  .story-content h2 { font-size: 3.2rem; }
  .story-content .eyebrow { font-size: .9375rem; }
  .story-content > p:not(.eyebrow) { font-size: 1.0625rem; }
  .footer-content { flex-direction: column; text-align: center; padding-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}
/* Page des mentions légales */
.legal { padding-block: 60px 70px; }
.legal-panel { max-width: 920px; margin-inline: auto; }
.legal-panel .story-content { padding: 24cqw 21cqw 21cqw; gap: 12px; }
.legal-panel h1 { color: #3c2712; font: 700 3.6rem/1 Tangerine, cursive; margin: 0; }
.legal-panel h2 { color: #3c2712; font: 700 2.6rem/1 Tangerine, cursive; margin-top: 10px; }
.legal-panel .story-content > p:not(.eyebrow) { font-size: 1.05rem; }
.legal-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 1.02rem; }
.legal-panel a:not(.button) { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 520px) { .legal-panel .story-content { padding: 30cqw 19cqw 26cqw; } .legal-panel h1 { font-size: 2.8rem; } }
.nature-panel .project-content { padding-inline: 19cqw; }
/* Pages des jeux */
.game-page .hero { padding-block: 120px 70px; }
.game-title { font-size: 4rem; line-height: .95; }
.game-features { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 1.08rem; line-height: 1.45; text-align: center; }
.game-features li::before { content: "❖"; display: block; color: #9a6a24; font-size: .8rem; line-height: 1.2; }
.game-shots { padding-block: 10px 50px; }
.game-shots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }
.game-shot { margin: 0; padding: 8px; background: linear-gradient(145deg, #f3d48a, #a8792c 45%, #f6dd9a 70%, #8c6020); border-radius: 6px; box-shadow: 0 14px 30px rgb(0 0 0 / 40%); }
.game-shot img { width: 100%; border-radius: 3px; }
.game-shot figcaption { padding: 10px 8px 4px; color: #2f1d0b; text-align: center; font-size: 1rem; }
.project-content .discover { font-size: .95rem; text-decoration: underline; text-underline-offset: 4px; color: #4f2a12; }
@media (max-width: 800px) { .game-title { font-size: 3.1rem; } .game-page .hero { padding-block: 110px 50px; } }
@media (max-width: 520px) { .game-page .hero { padding-top: 130px; } .game-title { font-size: 2.9rem; } }
.story-content .legal-list a { text-decoration: underline; text-underline-offset: 4px; color: #4f2a12; }