/* Direction : « Warm Editorial » (open-design, Apache-2.0), appliquée à la main.
   --fg-2 et --surface viennent du tokens.css du même système : le gris
   #8A817A du guide n'atteint pas un contraste suffisant pour du texte courant. */
:root{
  --bg:#FAF7F2;
  --surface:#FFFDF8;
  --fg:#1C1A17;
  --fg-2:#4C4037;
  --accent:#C0512F;
  --forest:#2F5B4F;
  --border:rgb(47 91 79 / .14);
  --raised:0 2px 16px rgb(28 26 23 / .06);
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --body:'Instrument Sans',-apple-system,system-ui,sans-serif;
  --ease:cubic-bezier(.2,0,0,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.top,.foot,main{max-width:1248px;margin-inline:auto;padding-inline:max(16px,4vw)}

/* En-tête */
.top{display:flex;justify-content:space-between;align-items:center;padding-block:20px}
.mark{font:400 24px/1 var(--display);letter-spacing:-.01em;text-decoration:none}
.top nav{display:flex;gap:24px}
.top nav a{font:500 14px/1 var(--body);text-decoration:none;padding-block:15px}
.top nav a:hover{text-decoration:underline;text-underline-offset:4px}

/* Ouverture : le nom, puis le point de couture, seul accent de la page */
.hero{padding-block:clamp(40px,8vh,88px) clamp(40px,7vh,72px)}
.hero h1{font:300 clamp(80px,23vw,104px)/1 var(--display);letter-spacing:-.04em;margin:0}
.hero p{max-width:32em;margin:24px 0 0;font:400 clamp(21px,2.4vw,26px)/1.36 var(--display)}
.stitch{display:block;width:100%;height:6px;margin-top:clamp(36px,6vh,56px);overflow:visible;color:var(--accent);animation:coud 1.3s var(--ease) .15s both}
@keyframes coud{from{clip-path:inset(-4px 100% -4px 0)}to{clip-path:inset(-4px 0 -4px 0)}}

/* Sections */
section[id]{padding-bottom:clamp(48px,7vw,80px)}
.head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--forest);padding-bottom:12px;margin-bottom:24px}
.head h2{font:400 40px/1.2 var(--display);letter-spacing:-.02em;margin:0}
.count{font:400 20px/1 var(--display);color:var(--fg-2)}

/* Cartes */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;text-decoration:none;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:var(--raised)}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:top}
.txt{padding:24px}
.kind{display:block;font:500 12px/1.5 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}
.card h3{font:400 28px/1.15 var(--display);letter-spacing:-.01em;margin:8px 0}
.card p{margin:0;font-size:16px;line-height:1.55;color:var(--fg-2)}

/* Au survol, une couture fait le tour de la carte */
@property --couture{syntax:'<angle>';inherits:false;initial-value:0deg}
.seam{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);pointer-events:none;color:var(--accent);opacity:0;--couture:0deg;-webkit-mask:conic-gradient(#000 var(--couture),transparent 0);mask:conic-gradient(#000 var(--couture),transparent 0);transition:--couture .75s var(--ease),opacity .15s linear}
.seam rect{width:calc(100% - 3px);height:calc(100% - 3px);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-dasharray:9 7}
.card:hover .seam,.card:focus-visible .seam{opacity:1;--couture:360deg}

/* Pied de page */
.foot{display:flex;justify-content:space-between;align-items:center;padding-block:20px 32px;font:400 14px/1 var(--body);color:var(--fg-2)}
.foot span{font:400 20px/1 var(--display);color:var(--fg)}
.foot a{padding-block:15px}

@media (min-width:640px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature{grid-column:1/-1}
}

@media (min-width:1024px){
  .hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-content:start;min-height:52vh}
  .hero h1{grid-column:1/7;font-size:clamp(104px,12vw,152px);line-height:.95}
  .hero p{grid-column:7/13;align-self:end;margin:0;padding-bottom:12px}
  .stitch{grid-column:1/-1}

  .grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .card{grid-column:span 6}
  #jeux .card:not(.feature){grid-column:span 4}
  .feature{grid-column:1/-1;flex-direction:row}
  .feature img{flex:0 0 60%;width:60%}
  .feature .txt{align-self:flex-end;padding:32px}
  .feature h3{font-size:56px;line-height:1.05;letter-spacing:-.03em;margin:12px 0}
  .feature p{font-size:17px;line-height:1.6}

  #outils{padding-bottom:56px}
  #outils .card{grid-column:span 6;flex-direction:row}
  #outils .card img{flex:0 0 44%;width:44%;height:auto;aspect-ratio:auto;align-self:stretch}
}

/* Animations d'entrée : le contenu reste visible si le navigateur ne les gère pas */
@keyframes apparait{from{opacity:0;translate:0 14px;filter:blur(6px)}}
@keyframes monte{from{opacity:0;translate:0 24px}}
@keyframes recadre{from{scale:1.07}}

@media (prefers-reduced-motion:no-preference){
  .hero h1{animation:apparait .9s var(--ease) both}
  .hero p{animation:apparait .9s var(--ease) .12s both}
  @supports (animation-timeline:view()){
    .card{animation:monte linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .feature img{animation:recadre linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card,.seam{transition:none}
  .card:hover{transform:none}
  .stitch{animation:none}
}