:root{color-scheme:dark;--bg:#102124;--text:#f2ecdf;--muted:#adbbb6;--green:#bce4ad;--line:#ffffff1c}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.7 Arial,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--green);outline-offset:6px}a[aria-disabled=true]{cursor:default;opacity:.75}.wrap{width:min(1180px,calc(100% - 80px));margin-inline:auto}header{height:105px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-size:32px;font-weight:800;letter-spacing:-1.5px}.emblem{display:inline-block;flex-shrink:0;width:30px;height:30px;background:conic-gradient(#c89742 0 90deg,#b76851 90deg 180deg,#477d8c 180deg 270deg,#83b598 270deg);border:3px solid var(--bg);outline:1px solid #bbbc9d88;border-radius:50%}nav{display:flex;gap:30px;font-size:13px;color:#c9d2ca}nav a:hover,.text-link:hover{color:var(--green)}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:var(--green);color:#172e23;padding:17px 23px;border-radius:6px;font-size:13px;font-weight:700;transition:transform .2s,background .2s}.button[href]:hover{background:#d4efcb;transform:translateY(-2px)}.button.small{padding:10px 18px;font-size:12px}.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;min-height:690px;gap:25px;padding-block:60px}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:700;color:var(--green);margin:0 0 23px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-1.6px}h1{font-size:clamp(43px,4.8vw,67px);line-height:1.1;margin-bottom:26px}em{color:var(--green);font-weight:400}.intro{max-width:420px;color:var(--muted);line-height:1.85}.actions{display:flex;align-items:center;gap:24px;margin-top:30px}.text-link{display:inline-block;font-size:12px;border-bottom:1px solid #adbbb650;padding-block:8px}.note{font-size:10px;color:var(--muted);margin:18px 0 0}.hero-art{position:relative;height:540px;display:grid;place-items:center;background:radial-gradient(ellipse,#42644c4a,transparent 65%)}.orbit{position:absolute;border:1px solid #bce4ad18;border-radius:50%;width:430px;height:430px}.orbit:after{content:'';position:absolute;inset:45px;border:1px solid #bce4ad12;border-radius:50%}.phone{width:245px;height:465px;background:#172c30;border:6px solid #3a4d4e;border-radius:35px;transform:rotate(9deg);padding:15px 17px;box-shadow:25px 35px 65px #0006;position:relative}.phone-top{display:flex;justify-content:space-between;font-size:8px;margin-bottom:24px}.phone .brand{font-size:25px}.phone .emblem{width:24px;height:24px}.greeting{font-size:9px;color:var(--muted);margin:19px 0 4px}.phone h2{font-size:29px;line-height:1.13;margin-bottom:23px;letter-spacing:-.7px}.app-game{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:8px;border-radius:8px;margin-bottom:9px;background:#ffffff03}.app-game b{font-size:30px;line-height:1.25}.gold{color:#dfb56e}.mint{color:var(--green)}.coral{color:#ce8b75}.app-game strong{font:17px Georgia,serif}.app-game small{display:block;font-size:7px;color:var(--muted)}.app-game>span{margin-left:auto;color:var(--muted)}.phone-bottom{display:flex;justify-content:space-around;font-size:17px;color:var(--green);padding-top:7px}.phone-bottom span{color:#859891}.die{position:absolute;font-size:112px;line-height:1;color:#f1e5cb;text-shadow:4px 9px 0 #b3a68d,12px 22px 25px #0005}.die-one{left:5px;top:110px;transform:rotate(-18deg)}.die-two{bottom:62px;right:8px;transform:rotate(24deg);font-size:90px;color:var(--green);text-shadow:3px 6px 0 #6c9670,8px 14px 22px #0005}.spark{position:absolute;color:#c7a55e;font-size:45px;right:29px;top:30px}.art-label{position:absolute;right:-45px;top:245px;transform:rotate(90deg);font-size:8px;letter-spacing:3px;color:#91a39b}.art-caption{position:absolute;bottom:0;font-size:10px;padding:8px 16px;background:#1f3434;border:1px solid var(--line);border-radius:25px;color:var(--green)}.ribbon{border-block:1px solid var(--line);background:#ffffff02}.ribbon .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:21px;font-size:12px;letter-spacing:4px;color:#c0cbbf}.ribbon i{color:var(--green);font-size:21px;font-style:normal}.section{padding-block:90px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:36px}.section-heading .eyebrow{margin-bottom:15px}h2{font-size:45px;line-height:1.15;margin-bottom:18px}.section-heading>p{color:var(--muted);font-size:13px}.games{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.game-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#172a2c}.card-art{height:205px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse,#69835a40,transparent)}.domino .card-art{background:radial-gradient(ellipse,#b5814f35,transparent)}.taikely .card-art{background:radial-gradient(ellipse,#8b78b740,transparent)}.number{position:absolute;top:17px;left:21px;font-size:10px;color:#b2bfb2}.card-copy{padding:25px}.card-copy .eyebrow{font-size:8px;margin-bottom:8px;letter-spacing:1.8px}.card-copy h3{font-size:32px;margin-bottom:12px}.card-copy p:not(.eyebrow){font-size:13px;color:var(--muted);min-height:67px}.card-copy a{display:flex;justify-content:space-between;font-size:11px;border-top:1px solid var(--line);padding-top:17px}.card-copy a:hover{color:var(--green)}.ludo-board{width:130px;height:130px;border:7px solid #dfd4b9;border-radius:8px;background:#dfd4b9;transform:rotate(-15deg);display:grid;grid-template-columns:1fr 1fr;gap:17px;box-shadow:6px 9px 0 #8b8870,15px 22px 25px #0004;position:relative}.ludo-board i{background:#749b7b;border:7px double #dfd4b9;border-radius:8px}.ludo-board i:nth-child(2){background:#b89653}.ludo-board i:nth-child(3){background:#7296a4}.ludo-board i:nth-child(4){background:#b2705c}.ludo-board span{position:absolute;inset:40px;text-align:center;line-height:36px;color:#334644;font-size:28px}.piece{color:#25383b;background:#e8ddc7;font:bold 45px/1 Arial;text-align:center;padding:9px 12px;border-radius:9px;transform:rotate(-22deg);box-shadow:4px 7px 0 #a89c87,8px 12px 20px #0005}.piece hr{border:0;border-top:1px solid #71807a;margin:5px 0}.piece.second{transform:rotate(17deg) translate(12px,15px)}.big-die{font-size:138px;line-height:1;transform:rotate(-17deg);color:#e8ddc7;text-shadow:5px 7px #a89c87}.little-die{font-size:86px;transform:rotate(19deg) translateY(22px);color:#b9b0d0;text-shadow:4px 5px #756b88}.spirit{display:grid;grid-template-columns:1fr 1fr;gap:80px;border-top:1px solid var(--line)}.spirit h2{font-size:43px}.values article{display:flex;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}.values article:first-child{padding-top:0}.values article>span{font-size:10px;color:var(--green);padding-top:6px}.values h3{font:18px Georgia,serif;letter-spacing:0;margin-bottom:9px}.values p{font-size:13px;color:var(--muted);margin:0}.download-panel{text-align:center;background:#c5e5b6;color:#172e26;border-radius:15px;padding:65px 24px;position:relative;overflow:hidden}.download-panel .eyebrow{color:#3c5e40}.download-panel h2{font-size:49px}.download-panel>p:not(.eyebrow){font-size:13px}.download-panel .button{background:#152c25;color:#eef3e5;margin-top:12px}.download-panel .button[href]:hover{background:#294839}.download-panel .note{font-size:10px!important;color:#3c5e40;margin-top:14px}.download-star{position:absolute;right:40px;top:18px;color:#172e2612;font-size:180px;line-height:1;pointer-events:none}.contact{display:flex;justify-content:space-between;align-items:center;gap:35px}.contact .eyebrow{margin-bottom:17px}.contact h2{font-size:43px}.contact p:not(.eyebrow){color:var(--muted);font-size:13px}.contact p.note{font-size:10px}footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-block:30px}footer .brand{font-size:25px}footer p,footer>a:last-child{font-size:10px;color:var(--muted);margin:0}.skip{position:absolute;left:15px;top:-100px;background:var(--green);color:#152c25;padding:10px;z-index:10}.skip:focus{top:15px}@media(max-width:1000px){.wrap{width:calc(100% - 48px)}nav{gap:18px}.hero{gap:0}.hero-art{transform:scale(.86);transform-origin:center right}.actions{align-items:flex-start;flex-direction:column;gap:9px}.art-label{display:none}.spirit{gap:40px}.card-copy{padding:20px}}@media(max-width:700px){.wrap{width:calc(100% - 36px)}header{height:auto;min-height:86px;flex-wrap:wrap;padding-block:17px;gap:18px}header .brand{font-size:28px}nav{order:3;width:100%;justify-content:center;border-top:1px solid var(--line);padding-top:13px;font-size:12px}.hero{grid-template-columns:1fr;padding-top:46px;padding-bottom:28px}.hero-copy{text-align:center}.hero .eyebrow{font-size:8px}h1{font-size:clamp(39px,9vw,60px)}.intro{margin-inline:auto;font-size:14px}.actions{align-items:center}.hero-art{transform:none;height:510px;width:min(100%,390px);margin:15px auto 0}.phone{transform:rotate(7deg) scale(.9)}.orbit{width:100%;height:360px}.die-one{font-size:82px;left:0;top:125px}.die-two{font-size:75px;right:0;bottom:72px}.spark{right:12px}.ribbon .wrap{letter-spacing:1px;font-size:9px;padding-block:16px}.ribbon i{font-size:14px}.section{padding-block:60px}.section-heading{display:block}.section-heading>p{margin-top:19px}h2,.spirit h2,.contact h2{font-size:36px}.games{grid-template-columns:1fr;gap:22px}.card-copy p:not(.eyebrow){min-height:0}.spirit{grid-template-columns:1fr;gap:22px}.download-panel{padding:46px 19px}.download-panel h2{font-size:36px}.download-panel .button{font-size:11px;padding:15px;gap:12px}.download-star{font-size:120px;right:-22px;top:4px}.contact{display:block}.contact>div+div{margin-top:23px}footer{flex-wrap:wrap;gap:22px}footer p{order:3;width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Confort tactile et adaptation aux petits écrans. */
.hero > *, .spirit > *, .contact > *, .games > * {
  min-width: 0;
}
#contact-status {
  overflow-wrap: anywhere;
}
@media (max-width: 1000px) {
  .orbit { max-width: 100%; }
}
@media (max-width: 700px) {
  header nav { flex-wrap: wrap; gap: 4px 18px; padding-top: 8px; }
  header nav a, .text-link, footer > a:last-child {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .button { min-height: 48px; max-width: 100%; text-align: center; }
  .button.small { min-height: 44px; }
  .actions { width: 100%; }
  .actions .button { width: min(100%, 360px); font-size: 14px; }
  .intro, .card-copy p:not(.eyebrow), .values p,
  .contact p:not(.eyebrow):not(.note), .download-panel > p:not(.eyebrow):not(.note) {
    font-size: 16px;
  }
  .card-copy a { min-height: 48px; align-items: center; font-size: 13px; }
  .note, .contact p.note, footer p, footer > a:last-child { font-size: 12px; }
  .download-panel .note { font-size: 12px !important; }
  .download-panel .button { width: min(100%, 360px); font-size: 14px; }
  .download-panel .eyebrow { overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  header { gap: 12px; }
  header .brand { font-size: 25px; gap: 8px; }
  header .button.small { padding-inline: 12px; }
  h1 { font-size: clamp(32px, 9.7vw, 37px); letter-spacing: -1.2px; }
  .hero { padding-top: 32px; }
  .hero-art { height: 470px; }
  .phone { transform: rotate(7deg) scale(.82); }
  .art-caption { font-size: 9px; }
  .download-panel h2 { font-size: 31px; }
  .ribbon .wrap { flex-wrap: wrap; gap: 8px; justify-content: center; }
}

/* Jeux de cartes — extension bêta */
@media (min-width: 701px) {
  .games { grid-template-columns: repeat(2, 1fr); }
}
.cards .card-art {
  background: radial-gradient(ellipse, #b7685145, transparent);
}
.beta-badge {
  position: absolute; top: 15px; right: 18px;
  padding: 5px 9px; border: 1px solid #e1af6666; border-radius: 999px;
  background: #c897421c; color: #e8bd76;
  font-size: 8px; font-weight: 800; letter-spacing: 1.4px;
}
.card-fan { position: relative; width: 190px; height: 150px; }
.playing-card {
  position: absolute; left: 62px; top: 16px;
  width: 76px; height: 112px; padding: 9px;
  border: 1px solid #fff9; border-radius: 8px;
  background: #eee4d0; color: #26383a;
  font: 700 24px/1 Georgia, serif;
  box-shadow: 5px 9px 0 #9e917c, 12px 18px 24px #0005;
}
.playing-card small { display: block; font-size: 22px; }
.card-a { transform: rotate(-18deg) translate(-31px, 9px); }
.card-k { z-index: 2; color: #a64f43; transform: rotate(-2deg) translateY(-3px); }
.card-seven { z-index: 3; color: #a64f43; transform: rotate(16deg) translate(31px, 9px); }
.cards-app b { color: #e8bd76; }
.app-beta {
  display: inline-block !important; margin-left: 4px; padding: 2px 4px;
  border-radius: 4px; background: #c8974233; color: #e8bd76 !important;
  font: 700 5px Arial, sans-serif !important; letter-spacing: .6px; vertical-align: middle;
}
.ribbon small { color: #e8bd76; font-size: 7px; letter-spacing: 1px; }

/* Une quatrième entrée tient dans l'écran du téléphone. */
.phone .greeting { margin-top: 13px; }
.phone h2 { margin-bottom: 14px; }
.phone .app-game { padding-block: 6px; margin-bottom: 6px; }
.phone .app-game b { font-size: 25px; }
.phone-bottom { padding-top: 3px; }

/* Identité Glalao — thème partagé avec l'application */
:root {
  --theme: #2F6E68;
  --theme-deep: #173F3B;
  --theme-soft: #48CAB4;
  --bg: #163B38;
  --muted: #B9CBC7;
  --green: #8FE0D2;
  --line: #FFFFFF24;
}
body {
  background: linear-gradient(145deg, var(--theme-deep) 0%, var(--theme) 48%, #244F4A 100%);
  background-attachment: fixed;
}
.brand {
  gap: 8px;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: -1px;
}
.brand-name { margin-left: -1px; }
.emblem {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1.5px solid rgba(72, 202, 180, .94);
  outline: 0;
  background: rgba(30, 122, 241, .16);
  color: #fff;
  font: 600 25px/1 Georgia, 'Times New Roman', serif;
  box-shadow: 0 5px 10px rgba(7, 26, 28, .25);
}
.emblem::before { content: 'G'; }
.phone { background: #173F3B; border-color: #4C7973; }
.phone .brand { font-size: 0; }
.phone .brand::after {
  content: 'lalao';
  font: 600 25px/1 Georgia, 'Times New Roman', serif;
}
.phone .emblem {
  width: 31px;
  height: 31px;
  font-size: 16px;
  box-shadow: 0 3px 7px rgba(7, 26, 28, .28);
}
.game-card { background: #204E49; }
.download-panel { background: #BCE7DF; color: #173F3B; }
footer .emblem { width: 38px; height: 38px; font-size: 19px; }

/* Fanorona */
.fanorona .card-art { background: radial-gradient(ellipse, #c8974250, transparent); }
.fanorona-board { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; width: 238px; padding: 14px; border: 5px solid #b99c6b; border-radius: 8px; background: #dfc99e; transform: rotate(-8deg); box-shadow: 5px 8px 0 #88724d, 12px 18px 24px #0005; }
.fanorona-board i { aspect-ratio: 1; border-radius: 50%; background: #f4ecde; box-shadow: 1px 2px 2px #0005; }
.fanorona-board .dark { background: #29423e; }
.fanorona-board .empty { visibility: hidden; }
.phone-top { margin-bottom: 14px; }
.phone .greeting { margin-top: 9px; }
.phone h2 { font-size: 26px; margin-bottom: 10px; }
.phone .app-game { padding-block: 3px; margin-bottom: 4px; }
.phone .app-game b { font-size: 20px; }
.phone .phone-top { margin-bottom: 8px; }
.phone .greeting { margin-top: 5px; }
.phone h2 { font-size: 23px; margin-bottom: 7px; }

/* Poker */
.poker .card-art { background: radial-gradient(ellipse, #48cab440, transparent); }
.poker-table { position: relative; width: 190px; height: 150px; }
.poker-table .playing-card { left: 40px; }
.poker-a { transform: rotate(-14deg) translate(-8px, 4px); }
.poker-k { z-index: 2; color: #a64f43; transform: rotate(10deg) translate(36px, 2px); }
.chip { position: absolute; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 5px dashed #fff; box-shadow: 0 4px 0 #0006, 3px 8px 12px #0005; }
.chip-one { left: 6px; bottom: 0; background: #a64f43; }
.chip-two { left: 44px; bottom: -8px; background: #173f3b; }
.chip-three { right: 4px; bottom: 6px; background: #c89742; }
@media (max-width: 700px) { .ribbon .wrap { flex-wrap: wrap; gap: 8px 14px; justify-content: center; } }