@font-face{font-family:Assistant;src:url(/assets/fonts/assistant-latin.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
/* Jeux de couleurs relevés sur le thème Shopify d'origine (Dawn) */
:root{
  --bg:243 243 243; --fg:18 18 18;              /* scheme-2 : fond principal */
  --dark:36 40 51;                              /* scheme-3 : bannière */
  --accent:51 79 180;                           /* scheme-5 : bleu */
  --page:120rem; --gutter:1.6rem;
}
@media (min-width:750px){:root{--gutter:5rem}}
*,*::before,*::after{box-sizing:border-box}
html{font-size:62.5%;-webkit-text-size-adjust:100%}
body{margin:0;background:rgb(var(--bg));color:rgb(var(--fg) / .75);font:400 1.5rem/1.8 Assistant,sans-serif;letter-spacing:.06rem;display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
@media (min-width:750px){body{font-size:1.6rem}}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{color:rgb(var(--fg));font-weight:700;letter-spacing:.06rem;line-height:1.3;margin:0}
.skip{position:absolute;left:-999rem;top:0;background:rgb(var(--fg));color:#fff;padding:1rem 2rem;z-index:10}
.skip:focus{left:1rem}
:focus-visible{outline:.2rem solid rgb(var(--fg) / .6);outline-offset:.3rem}
.page-width{max-width:var(--page);margin:0 auto;padding:0 var(--gutter)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Bandeau d'annonce */
.announce{text-align:center;font-size:1.3rem;padding:1rem 0;color:rgb(var(--fg));border-bottom:.1rem solid rgb(var(--fg) / .08)}

/* En-tête */
.site-header{border-bottom:.1rem solid rgb(var(--fg) / .08)}
.header{display:flex;align-items:center;gap:3rem;padding-block:2rem}
.header__logo img{width:9rem;height:9rem}
.nav ul{display:flex;gap:.4rem;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:1.2rem;font-size:1.4rem;text-decoration:none;color:rgb(var(--fg) / .75)}
.nav a:hover,.nav a[aria-current]{color:rgb(var(--fg));text-decoration:underline;text-underline-offset:.3rem}
.menu{display:none}
@media (max-width:989px){
  .header{justify-content:center;position:relative;padding-block:1.2rem}
  .header__logo img{width:7rem;height:7rem}
  .nav{display:none}
  .menu{display:block;position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%)}
  .menu summary{list-style:none;cursor:pointer;width:4.4rem;height:4.4rem;display:grid;place-items:center}
  .menu summary::-webkit-details-marker{display:none}
  .menu[open] ul{position:fixed;inset:0;background:rgb(var(--bg));z-index:5;list-style:none;margin:0;padding:8rem var(--gutter) 2rem}
  .menu[open] summary{position:fixed;z-index:6;top:1.6rem;left:var(--gutter)}
  .menu a{display:block;padding:1.1rem 0;font-size:1.8rem;text-decoration:none;color:rgb(var(--fg))}
  .menu a[aria-current]{text-decoration:underline;text-underline-offset:.3rem}
}

/* Titres de page */
.page-title{font-weight:400;font-size:3rem;padding-block:3.6rem 2.4rem}
@media (min-width:750px){.page-title{font-size:4rem;padding-block:4rem 3.2rem}}
.breadcrumb{font-size:1.3rem;padding-top:2.4rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0}
.breadcrumb li+li::before{content:"/";margin-right:.6rem;color:rgb(var(--fg) / .4)}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* Bannière d'accueil : deux images côte à côte, texte centré en bas */
.banner{position:relative;display:flex;background:rgb(var(--dark));color:#fff;min-height:34rem;overflow:hidden}
.banner__media{position:relative;flex:1 1 50%;min-height:100%}
.banner__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner__media + .banner__media{display:none}
.banner::after{content:"";position:absolute;inset:0;background:rgb(0 0 0 / .3)}
.banner__content{position:absolute;inset:auto 0 0;z-index:1;text-align:center;padding:4rem var(--gutter) 4.5rem}
.banner h1{color:#fff;font-weight:400;font-size:3rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:4.5rem;min-width:12rem;padding:0 3rem;margin-top:2rem;font-size:1.5rem;letter-spacing:.1rem;text-decoration:none;color:#fff;box-shadow:inset 0 0 0 .1rem #fff;transition:box-shadow .1s}
.btn:hover{box-shadow:inset 0 0 0 .2rem #fff}
.btn--dark{color:rgb(var(--fg));box-shadow:inset 0 0 0 .1rem rgb(var(--fg))}
.btn--dark:hover{box-shadow:inset 0 0 0 .2rem rgb(var(--fg))}
@media (min-width:750px){
  .banner{min-height:72rem}
  .banner__media + .banner__media{display:block}
  .banner h1{font-size:4rem}
}

/* Rangées image + texte, alternées */
.rows{padding-block:3.6rem 1.2rem}
.row{display:grid;margin-bottom:.8rem}
.row__img{aspect-ratio:1.2;overflow:hidden}
.row__img img{width:100%;height:100%;object-fit:cover}
.row__text{padding:3rem 0 3.6rem}
.row__text h2{font-size:2.4rem;margin-bottom:1.6rem}
.row__text p{margin:0;font-size:1.4rem}
@media (min-width:750px){
  .row{grid-template-columns:1fr 1fr;align-items:center}
  .row__text{padding:4rem 6rem}
  .row__text h2{font-size:3.2rem}
  .row--reverse .row__img{order:2}
  .row--reverse .row__text{padding-left:0}
}

/* Qui sommes nous */
.team{padding-block:2.4rem 3.6rem}
.team h2{font-size:2.4rem;margin-bottom:2.8rem}
.team ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.card{background:rgb(var(--fg) / .04)}
.card img{width:100%;aspect-ratio:1.05;object-fit:contain;object-position:bottom}
.card__body{padding:1.6rem 2.4rem 2.4rem;font-size:1.4rem}
.card h3{font-size:1.6rem;font-weight:400}
.card p{margin:.6rem 0 0}
@media (min-width:750px){.team h2{font-size:3.2rem}.team ul{grid-template-columns:1fr 1fr}}

/* Vitrine : grille des wargames */
.grid{list-style:none;margin:0;padding:0 0 6rem;display:grid;gap:2.4rem 1.6rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:750px){.grid{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative}
.tile__img{aspect-ratio:2/3;overflow:hidden;background:rgb(var(--dark))}
.tile__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.tile:hover .tile__img img{transform:scale(1.03)}
.tile h2{font-size:1.5rem;font-weight:400;margin-top:1.2rem}
.tile h2 a{text-decoration:none}
.tile h2 a::after{content:"";position:absolute;inset:0}
.tile p{margin:.4rem 0 0;font-size:1.3rem;line-height:1.5}
@media (prefers-reduced-motion:reduce){.tile__img img{transition:none}}

/* Fiche d'un wargame */
.product{display:grid;gap:3rem;padding-block:3rem 6rem}
.product__media{display:grid;gap:.8rem;grid-template-columns:1fr 1fr;align-content:start;margin:0}
.product__media img{width:100%;height:auto}
.product__media .first{grid-column:1/-1}
.product__info h1{font-weight:400;font-size:3rem;margin-bottom:2rem}
.product__info p{margin:0 0 1.6rem;font-size:1.5rem}
.product__info strong{color:rgb(var(--fg))}
@media (min-width:990px){
  .product{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:4rem}
  .product__info{position:sticky;top:3rem;align-self:start}
  .product__info h1{font-size:4rem}
}

/* Blog : liste */
.posts{list-style:none;margin:0;padding:0 0 6rem;display:grid;gap:4rem}
.post-card{position:relative;text-align:center}
.post-card img{width:100%;aspect-ratio:2/1;object-fit:cover}
.post-card h2{font-weight:400;font-size:2rem;margin-top:1.6rem}
.post-card h2 a{text-decoration:none}
.post-card h2 a::after{content:"";position:absolute;inset:0}
.post-card h2 a:hover{text-decoration:underline}
.meta{display:block;font-size:1.1rem;text-transform:uppercase;letter-spacing:.13rem;margin-top:.6rem}
.post-card p{max-width:76rem;margin:1rem auto 0;font-size:1.4rem}

/* Blog : article */
.article__cover{max-width:var(--page);margin:2.4rem auto 0}
.article__cover img{width:100%;aspect-ratio:2/1;object-fit:cover}
.article{max-width:78rem;margin:0 auto;padding:3.2rem var(--gutter) 6rem}
.article__header{text-align:center;margin-bottom:3.2rem}
.article__header h1{font-weight:400;font-size:2.8rem}
@media (min-width:750px){.article__header h1{font-size:4rem}}
.article__lead{font-size:1.7rem;color:rgb(var(--fg) / .85)}
.article h2{font-size:2.2rem;margin:4rem 0 1.2rem}
.article p,.article li{font-size:1.6rem}
.article ul{padding-left:2.2rem}
.article strong{color:rgb(var(--fg))}
.article a{color:rgb(var(--accent));text-underline-offset:.3rem}
.article a strong{color:inherit}
.article a.btn{color:rgb(var(--fg))}
.article__back{display:inline-block;margin-top:4rem}

/* Contact */
.contact{padding-block:0 6rem}
.contact dl{max-width:72rem;display:grid;grid-template-columns:max-content 1fr;gap:1rem 2.4rem;margin:0 0 3rem}
.contact dt{color:rgb(var(--fg))}
.contact dd{margin:0}
.contact .lead{font-size:1.8rem;color:rgb(var(--fg) / .85)}
.contact p{max-width:72rem}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem 2.4rem;margin-top:3rem}
.actions .btn{margin-top:0}
.lien{text-underline-offset:.3rem}

/* Pied de page */
.footer{border-top:.1rem solid rgb(var(--fg) / .08);padding-block:3.6rem;font-size:1.2rem;text-align:center}
.footer p{margin:0}
.footer ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 2rem;padding:0;margin:1rem 0 0}
.footer a{display:inline-block;padding:.6rem 0}

/* Vignette « jouable en ligne » et capture du jeu */
.badge{display:inline-block;margin-top:1.2rem;padding:.2rem .8rem;font-size:1.1rem;letter-spacing:.1rem;text-transform:uppercase;color:#fff;background:rgb(var(--accent))}
.badge + h2{margin-top:.6rem}
.capture{margin:4.8rem 0 0}
.capture img{width:100%;height:auto;border:.1rem solid rgb(var(--fg) / .1)}
.capture figcaption{font-size:1.3rem;margin-top:.8rem}