*{box-sizing:border-box}
:root{--blue:#064b8e;--pink:#f43b77;--line:#dcecf5;--page:1200px}
html,body{margin:0}
body{
 font-family:Arial,Helvetica,sans-serif;color:#163c61;
 background:#eaf9ff;
}
/* Décor léger de nuages SVG placé dans les marges bleues */
.sky-cloud{
 position:fixed;
 z-index:-1;
 pointer-events:none;
 opacity:.72;
}
.cloud-left-top{width:180px;left:-35px;top:185px}
.cloud-right-top{width:150px;right:-20px;top:120px;opacity:.62}
.cloud-left-bottom{width:125px;left:12px;top:650px;opacity:.48}
.cloud-right-bottom{width:145px;right:-30px;top:720px;opacity:.42}
@media(max-width:1250px){
 .sky-cloud{display:none}
}

.site{
 width:min(var(--page),calc(100% - 36px));
 margin:0 auto;
 background:#fff;
 box-shadow:0 0 24px rgba(33,114,158,.10)
}
.wrap{padding-left:28px;padding-right:28px}
a{text-decoration:none;color:inherit}

/* HEADER */
header{padding:18px 28px 12px}
.header-row{display:flex;align-items:center;gap:30px}
.logo{width:285px;height:auto;display:block}
.tagline{
 display:flex;align-items:center;gap:6px;
 font-family:"Patrick Hand","Comic Sans MS",cursive;
 font-size:20px;line-height:1.05;color:#174a78;
 transform:rotate(-8deg);transform-origin:center;
 white-space:nowrap;
}
.tagline-heart{width:25px;height:25px;flex:0 0 auto;transform:rotate(10deg)}
.search{margin-left:auto;width:350px;display:flex;border:1px solid #bfd8e8;border-radius:24px;overflow:hidden;background:#fff}
.search input{border:0;outline:0;min-width:0;flex:1;padding:12px 16px}
.search button{width:52px;border:0;background:var(--pink);color:#fff;font-size:18px}

/* NAV */
nav{background:#effaff;border-top:1px solid #e1f1f8;border-bottom:1px solid #d7ebf4}
.nav{display:flex;align-items:center;justify-content:space-between;gap:4px}
.nav a{padding:12px 11px;font-weight:700;font-size:14px;color:var(--blue);white-space:nowrap}
.nav .active{background:var(--pink);color:#fff;border-radius:8px}

/* HERO : bandeau composé de plusieurs calques */
.hero{padding:0 16px 12px;background:#fff}

.hero-stage{
 position:relative;
 width:100%;
 overflow:hidden;
 border-radius:8px;
}

.hero-bg{
 display:block;
 width:100%;
 height:auto;
}

/* Groupe de gauche : la feuille + la fillette restent solidaires */
.hero-scene{
 position:absolute;
 left:3%;
 bottom:5%;
 width:24.5%;
 height:74%;
 z-index:3;
 pointer-events:none;
}

.hero-sheet{
 position:absolute;
 left:38%;
 bottom:-6%;
 width:63%;
 height:auto;
 z-index:2;
 filter:drop-shadow(2px 3px 1px rgba(28,77,23,.42));
}

/* Illustration de catégorie à droite */
.hero-category{
 position:absolute;
 left:270%;
 bottom:0;
 width:auto;
 height:75%;
 z-index:2;
 filter:drop-shadow(2px 3px 1px rgba(28,77,23,.42));
}

/* Fillette au-dessus de la feuille */
.hero-girl{
 position:absolute;
 left:0;
 bottom:15%;
 width:100%;
 height:auto;
 z-index:4;
}

/* SECTIONS */
section{padding:12px 28px}
.section-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.section-head h2{font-size:22px;margin:0;color:var(--blue)}
.section-head .icon{font-size:24px}
.section-head .more{margin-left:auto;color:#0673bf;font-size:13px}

/* CATÉGORIES : carrousel horizontal */
.category-viewport{
 position:relative;
 padding:0 32px;
 overflow:hidden;
}
.categories{
 display:flex;
 gap:20px;
 overflow:visible;
 transition:transform .35s ease;
 will-change:transform;
}
.category{
 flex:0 0 calc((100% - 120px)/7);
 min-width:0;
 text-align:center;
}
.category img{
 display:block;
 width:100%;
 max-width:125px;
 height:auto;
 margin:0 auto;
}
.cat-arrow{
 position:absolute;
 z-index:3;
 top:50%;
 transform:translateY(-50%);
 width:34px;
 height:34px;
 border-radius:50%;
 border:1px solid #cfe3ef;
 background:#fff;
 color:#0876c5;
 font-size:25px;
 line-height:29px;
 cursor:pointer;
 box-shadow:0 2px 8px rgba(53,114,163,.18);
}
.cat-prev{left:0}
.cat-next{right:0}
.cat-arrow:disabled{
 opacity:.25;
 cursor:default;
}

/* DERNIERS COLORIAGES */
.latest{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.coloring{border:1px solid #dce8ef;border-radius:8px;overflow:hidden;background:#fff;text-align:center}
.coloring .picture{height:112px;display:grid;place-items:center;background:#fff}
.coloring .picture span{font-size:49px;filter:grayscale(1);opacity:.7}
.coloring strong{display:block;border-top:1px solid #edf2f5;padding:7px 4px;color:#075092;font-size:12px}

/* JEUX */
.games-section{margin:7px 10px 0;background:#fff8e8;border-radius:6px;padding:13px 18px 16px}
.games{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.game{min-height:76px;border:1px solid #cde6f2;border-radius:8px;background:#fff;display:flex;align-items:center;gap:10px;padding:10px}
.game .emoji{font-size:34px}
.game strong{display:block;color:#075092;font-size:13px;margin-bottom:4px}
.game small{display:block;font-size:11px;line-height:1.25;color:#586978}

/* BAS : le décor termine directement la page, comme dans la maquette */
.bottom{
 margin-top:-2px;
 padding-top:0;
 line-height:0;
 background:#fff;
}
.bottom img{
 display:block;
 width:100%;
 height:auto;
 margin:0;
}
footer{
 margin-top:0;
}

footer{background:#07508c;color:#fff;padding:14px 28px;display:flex;justify-content:space-between;gap:20px;font-size:11px}
footer .links{display:flex;gap:15px}

@media(max-width:900px){
 .site{width:100%}
 /* Logo à gauche, signature inclinée à droite, recherche juste en dessous. */
 .header-row{
  display:grid;
  grid-template-columns:285px minmax(0,1fr);
  column-gap:16px;
  row-gap:10px;
  align-items:center;
 }
 .logo{width:100%;max-width:285px;margin:0}
 .tagline{display:flex;font-size:clamp(12px,2.8vw,18px)}
 .tagline-heart{width:clamp(14px,2.6vw,22px);height:auto}
 .search{grid-column:1 / -1;width:100%;margin:0}
 .nav{overflow-x:auto;justify-content:flex-start}
 /* Défilement horizontal natif au doigt, comme le menu du haut. */
 .categories{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  transition:none;
  will-change:auto;
 }
 .categories::-webkit-scrollbar{display:none}
 .category{scroll-snap-align:start}
 .latest{grid-template-columns:repeat(3,1fr)}
 .category{flex-basis:calc((100% - 60px)/4)}
 .category img{max-width:100px}
 .games{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
 /* Toute la largeur mobile est partagée entre le logo et le texte incliné. */
 header{padding:10px 10px 8px}
 .header-row{
  grid-template-columns:minmax(0,54fr) minmax(0,46fr);
  column-gap:0;
  row-gap:3px;
  width:100%;
 }
 .logo{width:100%;max-width:none;margin:0}
 .tagline{
  width:100%;
  font-size:clamp(10px,3vw,16px);
  gap:2px;
  line-height:1;
  justify-content:center;
 }
 .tagline-heart{width:clamp(11px,2.8vw,16px);height:auto}
 .wrap,section{padding-left:14px;padding-right:14px}
 .hero{padding:0 0 10px}
 .hero-stage{
  border-radius:0;
  height:auto;
 }
 /* Bandeau mobile entier, sans recadrage des côtés. */
 .hero-bg{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
 }
 /* Les illustrations restent des calques de la page, pas des éléments du fond.
    La fillette reste à gauche et l'illustration de catégorie à droite,
    de part et d'autre du texte central. */
 .hero-scene{
  display:block;
  left:0;
  bottom:0;
  width:32%;
  height:85%;
 }
 .hero-girl{left:0;bottom:10%;width:100%}
 .hero-sheet{left:38%;bottom:0;width:70%}
 /* L'illustration est enfant de .hero-scene (32% du bandeau).
    L'ancrer par sa droite pour qu'elle reste DANS le bandeau sur mobile. */
 .hero-category{
  left:auto;
  right:-200%;
  bottom:5%;
  height:64%;
  width:auto;
  max-width:100%;
 }
 .section-head h2{font-size:19px}
 .section-head .more{font-size:11px}
 .latest{grid-template-columns:repeat(2,1fr)}
 .category-viewport{padding:0 24px}
 .categories{gap:8px}
 /* Sur smartphone : vignettes un peu plus grandes, avec la suivante visible pour inviter au défilement. */
 .category{flex-basis:calc((100% - 24px)/3.5)}
 .category img{max-width:96px}
 .cat-arrow{
  width:30px;
  height:30px;
  font-size:22px;
  line-height:25px;
 }
 .games{grid-template-columns:1fr}
 footer{display:block;text-align:center}
 footer .links{justify-content:center;margin-bottom:8px;flex-wrap:wrap}
}

/* Transition compacte entre les jeux et le décor final */
.games-section + .bottom{
 margin-top:-2px;
}
.games-section{
 margin-bottom:0;
}