/* =========================================================
   Coloriages.tv V9 — Concept graphique
   Responsive desktop / tablette / mobile
   ========================================================= */

.home-v9{
  background:
    radial-gradient(circle at 8% 12%, #ffd3ea 0 65px, transparent 66px),
    radial-gradient(circle at 92% 24%, #fff0a7 0 90px, transparent 91px),
    linear-gradient(180deg,#fffdf9 0,#fff 72%);
}

.home-shell{
  width:min(1480px,100%);
  margin:0 auto;
  padding:0 28px 70px;
}

/* HERO */
.hero-v9{
  position:relative;
  min-height:365px;
  margin:0 -8px;
  padding:54px 42px 42px;
  overflow:hidden;
  border-radius:0 0 34px 34px;
  background:
    radial-gradient(circle at 10% 20%,#ffe092 0 5px,transparent 6px),
    radial-gradient(circle at 26% 16%,#ff8db4 0 5px,transparent 6px),
    radial-gradient(circle at 68% 18%,#c9baff 0 6px,transparent 7px),
    linear-gradient(110deg,#fff7ee 0%,#fffdfc 38%,#f6f1ff 100%);
  border:1px solid #f0e9e1;
}

.hero-v9:before{
  content:"";
  position:absolute;
  width:240px;height:240px;
  border-radius:50%;
  left:-110px;bottom:-135px;
  background:#ffe16a;
}

.hero-v9:after{
  content:"";
  position:absolute;
  width:260px;height:260px;
  border-radius:50%;
  right:-120px;top:-120px;
  background:#d8ccff;
  opacity:.7;
}

.hero-copy{
  position:relative;
  z-index:5;
  max-width:790px;
  margin:0 auto;
  text-align:center;
}

.hero-kicker{
  display:inline-flex;
  margin-bottom:12px;
  color:#7657ff;
  font-size:12px;
  font-weight:950;
  letter-spacing:1.4px;
}

.hero-copy h1{
  margin:0;
  color:var(--ink);
  font-size:clamp(50px,5.4vw,82px);
  line-height:.94;
  letter-spacing:-4px;
}

.hero-copy h1:after{
  content:"";
  display:block;
  width:160px;
  height:9px;
  margin:12px auto 0;
  border-radius:999px;
  background:#ffd64f;
  transform:rotate(-1deg);
}

.hero-copy p{
  margin:18px 0 0;
  color:var(--muted);
  font-size:18px;
  font-weight:600;
}

.hero-search{
  position:relative;
  width:min(720px,100%);
  height:62px;
  margin:24px auto 0;
  border:1px solid #ece6df;
  border-radius:999px;
  background:#fff;
  box-shadow:0 12px 35px #34276a12;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 50px;
  align-items:center;
  padding:5px 6px 5px 8px;
}

.hero-search-icon{
  font-size:28px;
  color:#596070;
}

.hero-search input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:15px;
}

.hero-search button{
  width:48px;
  height:48px;
  border:0;
  border-radius:50%;
  background:#7657ff;
  color:#fff;
  font-size:23px;
  cursor:pointer;
  box-shadow:0 7px 18px #7657ff4a;
}

/* Hero decorations */
.hero-playground{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hero-star{
  position:absolute;
  color:#ffd53a;
  font-size:38px;
  filter:drop-shadow(0 4px 0 #fff);
  z-index:2;
}
.star-a{left:11%;top:90px;transform:rotate(-15deg)}
.star-b{right:11%;top:108px;transform:rotate(12deg);font-size:28px}
.hero-heart{
  position:absolute;
  right:18%;
  top:92px;
  color:#ff5b7e;
  font-size:60px;
  font-weight:900;
  transform:rotate(13deg);
}

.hero-pencil{
  position:absolute;
  left:6%;
  top:80px;
  width:82px;
  height:170px;
  transform:rotate(-28deg);
  z-index:3;
}
.pencil-body{
  position:absolute;
  left:20px;top:24px;
  width:43px;height:120px;
  border-radius:18px;
  background:linear-gradient(90deg,#6548ee 0 33%,#8b6bff 33% 66%,#6548ee 66%);
  border:4px solid #1e2230;
}
.pencil-tip{
  position:absolute;
  left:26px;top:137px;
  width:32px;height:35px;
  background:#e8b579;
  border:4px solid #1e2230;
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.pencil-end{
  position:absolute;
  left:20px;top:11px;
  width:43px;height:27px;
  border:4px solid #1e2230;
  border-radius:14px 14px 5px 5px;
  background:#ff94ad;
}

.hero-cat{
  position:absolute;
  right:5%;
  bottom:4px;
  width:210px;
  height:220px;
  z-index:4;
}
.cat-head{
  position:absolute;
  left:28px;top:24px;
  width:154px;height:140px;
  border:5px solid #1e2230;
  border-radius:48% 48% 45% 45%;
  background:#fff;
}
.cat-ear{
  position:absolute;
  top:5px;
  width:61px;height:70px;
  background:#fff;
  border:5px solid #1e2230;
  transform:rotate(45deg);
  z-index:0;
}
.cat-ear:after{
  content:"";
  position:absolute;
  inset:14px;
  background:#ffb1c7;
  border-radius:8px;
}
.cat-ear-left{left:27px}
.cat-ear-right{right:25px}
.cat-eye{
  position:absolute;
  top:50px;
  width:27px;height:37px;
  border-radius:50%;
  background:#1e2230;
}
.cat-eye:after{
  content:"";
  position:absolute;
  width:8px;height:10px;
  left:6px;top:5px;
  background:#fff;
  border-radius:50%;
}
.eye-left{left:29px}.eye-right{right:29px}
.cat-nose{
  position:absolute;
  left:70px;top:87px;
  width:14px;height:10px;
  background:#ff7fa6;
  border-radius:50%;
}
.cat-mouth:before,.cat-mouth:after{
  content:"";
  position:absolute;
  top:98px;
  width:25px;height:14px;
  border-bottom:3px solid #1e2230;
  border-radius:0 0 50% 50%;
}
.cat-mouth:before{left:49px}.cat-mouth:after{right:49px}
.cat-body{
  position:absolute;
  left:53px;bottom:0;
  width:108px;height:85px;
  border:5px solid #1e2230;
  border-radius:50% 50% 20% 20%;
  background:#fff;
}
.cat-tail{
  position:absolute;
  right:-3px;bottom:21px;
  width:73px;height:90px;
  border:10px solid #1e2230;
  border-left-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  transform:rotate(20deg);
}

/* CATEGORIES */
.category-strip{
  position:relative;
  z-index:20;
  margin:-26px 30px 0;
  padding:14px;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:10px;
  border:1px solid #f0ebe4;
  border-radius:24px;
  background:#fff;
  box-shadow:0 16px 40px #2d275b12;
}

.category-pill{
  min-width:0;
  min-height:64px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:17px;
  background:#f8f6ff;
  color:#4b3cb5;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font:inherit;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.category-pill .category-icon{font-size:22px}
.category-pill.is-active{
  border-color:#7657ff;
  box-shadow:0 0 0 3px #7657ff14;
}
.cat-animals{background:#fff1e4;color:#d96813}
.cat-magic{background:#fdeafa;color:#aa2e8f}
.cat-vehicles{background:#e9f2ff;color:#1767c7}
.cat-nature{background:#e9f8e9;color:#247a37}
.cat-party{background:#fff6d8;color:#8f6514}
.cat-new{background:#f2ecff;color:#6548ee}

/* SECTIONS */
.gallery-section,
.age-section{
  padding:54px 20px 0;
}
.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.section-heading h2{
  margin:5px 0 0;
  font-size:34px;
  letter-spacing:-1.6px;
}
.text-action{
  border:0;
  background:transparent;
  color:#6548ee;
  font:inherit;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

/* CARDS */
.coloring-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}

.coloring-card{
  min-width:0;
  overflow:hidden;
  border:1px solid #ece7df;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 28px #3327610a;
  transition:transform .18s ease, box-shadow .18s ease;
}

.coloring-thumb{
  aspect-ratio:1/1.02;
  min-height:0;
  margin:0;
  padding:14px 14px 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#fff 0,#fffdfa 100%);
}

.coloring-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.coloring-card-body{
  padding:10px 12px 13px;
}

.coloring-card-title{
  display:block;
  margin:0 0 9px;
  color:var(--ink);
  font-size:14px;
  font-weight:950;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.coloring-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) 40px;
  gap:7px;
}

.color-btn{
  min-height:39px;
  border:0;
  border-radius:11px;
  background:#7657ff;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  box-shadow:0 6px 15px #7657ff35;
}
.print-btn{
  min-height:39px;
  border:1px solid #ece7df;
  border-radius:11px;
  background:#fff;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:15px;
}

.empty-search{
  padding:50px 20px;
  border:1px dashed #ddd4f7;
  border-radius:22px;
  background:#fbf9ff;
  text-align:center;
}
.empty-search-icon{font-size:42px}
.empty-search h3{margin:8px 0 4px;font-size:23px}
.empty-search p{margin:0;color:var(--muted)}

/* AGE */
.age-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.age-card{
  min-height:108px;
  padding:17px;
  border-radius:20px;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 28px;
  gap:11px;
  align-items:center;
  text-decoration:none;
  color:var(--ink);
}
.age-preschool{background:#fff0e5}
.age-primary{background:#eaf5ff}
.age-middle{background:#f0eaff}
.age-adult{background:#edf8e9}
.age-emoji{
  width:52px;height:52px;
  border-radius:15px;
  background:#fff9;
  display:grid;
  place-items:center;
  font-size:28px;
}
.age-copy{display:grid;gap:4px}
.age-copy strong{font-size:16px}
.age-copy small{color:var(--muted);font-weight:700}
.age-arrow{
  width:28px;height:28px;
  border-radius:50%;
  background:#fff9;
  display:grid;
  place-items:center;
  font-weight:950;
}

/* MEMBER */
.member-strip{
  margin:48px 20px 0;
  padding:26px 28px;
  border:1px solid #e5dcff;
  border-radius:24px;
  background:linear-gradient(100deg,#f6f1ff,#fff);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.member-strip h2{margin:5px 0 4px;font-size:30px}
.member-strip p{margin:0;color:var(--muted)}
.member-btn{text-decoration:none}

/* Header harmonization */
.home-v9 .site-header{
  background:#fffefc;
  border-bottom:1px solid #eee8df;
}
.home-v9 .site-header .logo{
  font-size:31px;
}

/* HOVER */
@media (hover:hover) and (pointer:fine){
  .category-pill:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px #2f27500f;
  }
  .coloring-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 35px #33276117;
  }
  .age-card:hover{
    transform:translateY(-2px);
  }
}

/* TABLET */
@media (min-width:768px) and (max-width:1180px){
  .home-shell{padding:0 18px 55px}
  .hero-v9{
    min-height:330px;
    padding:44px 28px 34px;
  }
  .hero-copy{
    max-width:650px;
  }
  .hero-copy h1{
    font-size:clamp(48px,7vw,68px);
  }
  .hero-pencil{left:2%;transform:scale(.8) rotate(-28deg)}
  .hero-cat{right:0;transform:scale(.78);transform-origin:bottom right}
  .category-strip{
    margin:-22px 16px 0;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .category-pill:nth-child(n+5){
    min-height:54px;
  }
  .coloring-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .age-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* MOBILE */
@media (max-width:767px){
  .home-shell{
    padding:0 10px 40px;
  }
  .hero-v9{
    min-height:auto;
    margin:0 -10px;
    padding:30px 16px 28px;
    border-radius:0 0 24px 24px;
  }
  .hero-playground{
    opacity:.65;
  }
  .hero-pencil{
    left:-28px;
    top:45px;
    transform:scale(.54) rotate(-28deg);
    transform-origin:top left;
  }
  .hero-cat{
    right:-45px;
    bottom:-10px;
    transform:scale(.48);
    transform-origin:bottom right;
  }
  .hero-star,.hero-heart{display:none}
  .hero-copy{
    max-width:100%;
  }
  .hero-kicker{
    font-size:9px;
    letter-spacing:.9px;
  }
  .hero-copy h1{
    max-width:330px;
    margin:0 auto;
    font-size:38px;
    letter-spacing:-2px;
  }
  .hero-copy h1:after{
    width:110px;
    height:7px;
    margin-top:8px;
  }
  .hero-copy p{
    display:none;
  }
  .hero-search{
    height:52px;
    margin-top:18px;
    grid-template-columns:38px minmax(0,1fr) 42px;
    padding:4px;
  }
  .hero-search-icon{font-size:23px}
  .hero-search input{
    font-size:13px;
  }
  .hero-search button{
    width:40px;height:40px;font-size:19px;
  }

  .category-strip{
    margin:-13px 4px 0;
    padding:9px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    border-radius:18px;
  }
  .category-pill{
    min-height:46px;
    border-radius:13px;
    font-size:11px;
    gap:6px;
  }
  .category-pill .category-icon{font-size:18px}
  .category-pill:first-child{
    grid-column:1/-1;
  }

  .gallery-section,.age-section{
    padding:34px 2px 0;
  }
  .section-heading{
    margin-bottom:13px;
  }
  .section-heading .eyebrow{display:none}
  .section-heading h2{
    margin:0;
    font-size:24px;
    letter-spacing:-1px;
  }
  .text-action{
    font-size:11px;
  }

  .coloring-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .coloring-card{
    border-radius:15px;
  }
  .coloring-thumb{
    padding:8px 8px 2px;
  }
  .coloring-card-body{
    padding:7px 8px 9px;
  }
  .coloring-card-title{
    margin-bottom:7px;
    font-size:11px;
  }
  .coloring-actions{
    grid-template-columns:minmax(0,1fr) 34px;
    gap:5px;
  }
  .color-btn,.print-btn{
    min-height:34px;
    border-radius:9px;
    font-size:10px;
  }
  .print-btn{font-size:13px}
  .age-grid{
    grid-template-columns:1fr;
    gap:9px;
  }
  .age-card{
    min-height:82px;
    grid-template-columns:44px minmax(0,1fr) 26px;
    padding:12px;
    border-radius:16px;
  }
  .age-emoji{width:42px;height:42px;font-size:23px}
  .age-copy strong{font-size:14px}
  .member-strip{
    margin:32px 2px 0;
    padding:20px;
    align-items:flex-start;
    flex-direction:column;
  }
  .member-strip h2{font-size:25px}
  .member-btn{width:100%}
}

/* VERY SMALL */
@media (max-width:370px){
  .coloring-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V9.1 — âges en navigation principale
   Remplace Animaux / Magique / Véhicules...
   ========================================================= */
.age-top-strip{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}

.age-top-strip .age-top-card,
.age-top-strip .age-top-all{
  min-height:104px;
  padding:17px 18px;
  border-radius:22px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 30px;
  align-items:center;
  gap:12px;
  text-align:left;
  color:var(--ink);
  box-shadow:none;
}

.age-top-strip .age-top-all{
  grid-template-columns:50px minmax(0,1fr);
  background:#f6f4ff;
}

.age-top-strip .age-emoji{
  width:50px;
  height:50px;
  border-radius:15px;
  background:#ffffffa8;
  display:grid;
  place-items:center;
  font-size:27px;
}

.age-top-copy{
  min-width:0;
  display:grid;
  gap:4px;
}

.age-top-copy strong{
  color:var(--ink);
  font-size:15px;
  line-height:1.1;
}

.age-top-copy small{
  color:#777c8c;
  font-size:12px;
  font-weight:800;
  line-height:1.1;
}

.age-top-strip .age-arrow{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#ffffffb8;
  display:grid;
  place-items:center;
  color:var(--ink);
  font-size:18px;
  font-weight:950;
}

.age-top-strip .age-preschool{background:#fff0e5}
.age-top-strip .age-primary{background:#eaf5ff}
.age-top-strip .age-middle{background:#f0eaff}
.age-top-strip .age-adult{background:#edf8e9}

.age-top-strip .category-pill.is-active{
  border-color:#7657ff;
  box-shadow:0 0 0 3px #7657ff18,0 10px 24px #37296a0d;
}

@media (hover:hover) and (pointer:fine){
  .age-top-strip .category-pill:hover{
    transform:translateY(-3px);
  }
}

@media (min-width:768px) and (max-width:1180px){
  .age-top-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .age-top-strip .age-top-all{
    grid-column:1/-1;
    min-height:70px;
  }
}

@media (max-width:767px){
  .age-top-strip{
    grid-template-columns:1fr 1fr;
    margin-top:-13px;
  }

  .age-top-strip .age-top-card{
    min-height:82px;
    padding:10px;
    grid-template-columns:40px minmax(0,1fr);
    gap:8px;
  }

  .age-top-strip .age-top-all{
    grid-column:1/-1;
    min-height:54px;
    padding:8px 12px;
    grid-template-columns:38px minmax(0,1fr);
  }

  .age-top-strip .age-emoji{
    width:38px;
    height:38px;
    border-radius:12px;
    font-size:21px;
  }

  .age-top-strip .age-arrow{
    display:none;
  }

  .age-top-copy strong{
    font-size:11px;
  }

  .age-top-copy small{
    font-size:9px;
  }
}


/* Les anciens dessins CSS sont remplacés par les mascottes réelles. */
.hero-pencil,
.hero-cat{
  display:none!important;
}

/* Le contenu reste lisible entre les deux mascottes. */
.hero-copy{
  max-width:760px;
}

@media (min-width:1181px){
  .hero-copy{
    padding-left:40px;
    padding-right:40px;
  }
}

@media (min-width:768px) and (max-width:1180px){
  .hero-mascot-boy{
    left:-8px;
    bottom:-4px;
    width:190px;
  }

  .hero-mascot-cat{
    right:-7px;
    bottom:-4px;
    width:186px;
  }

  .hero-copy{
    max-width:620px;
    padding-left:76px;
    padding-right:76px;
  }
}

@media (max-width:767px){
  .hero-mascot-boy{
    left:-28px;
    top:34px;
    bottom:auto;
    width:118px;
    opacity:.98;
  }

  .hero-mascot-cat{
    right:-29px;
    top:34px;
    bottom:auto;
    width:115px;
    opacity:.98;
  }

  .hero-copy{
    position:relative;
    z-index:6;
    padding-left:42px;
    padding-right:42px;
  }
}

@media (max-width:390px){
  .hero-mascot-boy{
    left:-35px;
    width:104px;
  }

  .hero-mascot-cat{
    right:-35px;
    width:102px;
  }

  .hero-copy{
    padding-left:34px;
    padding-right:34px;
  }
}


/* =========================================================
   V9.3 — HERO pleine largeur, sans aucune image
   Tout le texte est du vrai HTML indexable.
   ========================================================= */
.hero-v9{
  position:relative;
  width:calc(100% + 56px);
  margin-left:-28px;
  margin-right:-28px;
  min-height:330px;
  padding:54px 28px 48px;
  overflow:hidden;
  border-radius:0;
  border-left:0;
  border-right:0;
  background:
    radial-gradient(circle at 8% 20%, rgba(255,214,79,.28) 0 95px, transparent 96px),
    radial-gradient(circle at 92% 18%, rgba(118,87,255,.16) 0 120px, transparent 121px),
    linear-gradient(112deg,#fff8ea 0%,#fffefa 42%,#f3efff 100%);
}

.hero-v9:before{
  content:"";
  position:absolute;
  left:-80px;
  bottom:-145px;
  width:270px;
  height:270px;
  border-radius:50%;
  background:#ffd64f;
  opacity:.5;
}

.hero-v9:after{
  content:"";
  position:absolute;
  right:-110px;
  top:-135px;
  width:300px;
  height:300px;
  border-radius:50%;
  background:#c9baff;
  opacity:.45;
}

.hero-copy{
  position:relative;
  z-index:5;
  width:min(900px,100%);
  max-width:900px;
  margin:0 auto;
  padding:0 20px;
  text-align:center;
}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  color:#7657ff;
  font-size:12px;
  font-weight:950;
  letter-spacing:1.4px;
}

.hero-copy h1{
  margin:0;
  color:var(--ink);
  font-size:clamp(52px,5.6vw,86px);
  line-height:.94;
  letter-spacing:-4.4px;
}

.hero-copy h1:after{
  content:"";
  display:block;
  width:190px;
  height:9px;
  margin:14px auto 0;
  border-radius:999px;
  background:#ffd64f;
  transform:rotate(-1deg);
}

.hero-copy p{
  margin:18px 0 0;
  color:var(--muted);
  font-size:18px;
  font-weight:650;
}

.hero-search{
  position:relative;
  width:min(760px,100%);
  height:64px;
  margin:25px auto 0;
  border:1px solid #ebe5de;
  border-radius:999px;
  background:#fff;
  box-shadow:0 14px 38px rgba(52,39,106,.10);
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 52px;
  align-items:center;
  padding:6px 7px 6px 10px;
}

.hero-search-icon{
  display:grid;
  place-items:center;
  color:#4d5566;
  font-size:27px;
}

.hero-search input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:15px;
}

.hero-search button{
  width:50px;
  height:50px;
  border:0;
  border-radius:50%;
  background:linear-gradient(135deg,#7657ff,#8d69ff);
  color:#fff;
  font-size:23px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(118,87,255,.32);
}

/* CSS-only decorations */
.hero-css-decor{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.decor-star{
  position:absolute;
  color:#ffd64f;
  font-size:34px;
  line-height:1;
  text-shadow:0 3px 0 #fff;
}

.decor-star-1{
  left:10%;
  top:72px;
  transform:rotate(-12deg);
}

.decor-star-2{
  right:11%;
  top:98px;
  font-size:27px;
  transform:rotate(12deg);
}

.decor-dot{
  position:absolute;
  border-radius:50%;
}

.decor-dot-1{
  left:17%;
  bottom:54px;
  width:20px;
  height:20px;
  background:#ff91b2;
}

.decor-dot-2{
  right:18%;
  bottom:68px;
  width:17px;
  height:17px;
  background:#8edcf2;
}

.decor-squiggle{
  position:absolute;
  width:58px;
  height:28px;
  border-top:7px solid;
  border-radius:50%;
}

.decor-squiggle-1{
  left:4%;
  top:150px;
  border-color:#ff9eba;
  transform:rotate(-22deg);
}

.decor-squiggle-2{
  right:5%;
  top:168px;
  border-color:#91ddec;
  transform:rotate(20deg);
}

/* Hide/remove every previous mascot mechanism */
.hero-playground,
.hero-mascot,
.hero-pencil,
.hero-cat,
.hero-heart,
.hero-star,
.hero-cloud{
  display:none!important;
}

@media (min-width:768px) and (max-width:1180px){
  .hero-v9{
    width:calc(100% + 36px);
    margin-left:-18px;
    margin-right:-18px;
    min-height:300px;
    padding:45px 22px 40px;
  }

  .hero-copy{
    width:min(760px,100%);
    max-width:760px;
    padding:0 36px;
  }

  .hero-copy h1{
    font-size:clamp(48px,7vw,70px);
    letter-spacing:-3px;
  }

  .decor-star-1{left:5%}
  .decor-star-2{right:5%}
}

@media (max-width:767px){
  .hero-v9{
    width:calc(100% + 20px);
    margin-left:-10px;
    margin-right:-10px;
    min-height:auto;
    padding:30px 15px 28px;
    border-radius:0 0 24px 24px;
  }

  .hero-copy{
    max-width:100%;
    padding:0 6px;
  }

  .hero-kicker{
    font-size:9px;
    letter-spacing:.9px;
  }

  .hero-copy h1{
    max-width:355px;
    margin:0 auto;
    font-size:39px;
    letter-spacing:-2.1px;
    line-height:.97;
  }

  .hero-copy h1:after{
    width:115px;
    height:7px;
    margin-top:9px;
  }

  .hero-copy p{
    display:none;
  }

  .hero-search{
    height:52px;
    margin-top:18px;
    grid-template-columns:38px minmax(0,1fr) 42px;
    padding:4px 5px;
  }

  .hero-search-icon{
    font-size:22px;
  }

  .hero-search input{
    font-size:13px;
  }

  .hero-search button{
    width:40px;
    height:40px;
    font-size:18px;
  }

  .decor-star{
    font-size:20px;
  }

  .decor-star-1{
    left:4%;
    top:66px;
  }

  .decor-star-2{
    right:4%;
    top:72px;
  }

  .decor-dot-1,
  .decor-dot-2,
  .decor-squiggle{
    opacity:.65;
  }
}


/* =========================================================
   V9.4 — HERO image unique mascottes + texte HTML
   L'image NE contient AUCUN texte ni interface.
   ========================================================= */
.hero-v9{
  position:relative;
  width:calc(100% + 56px);
  margin-left:-28px;
  margin-right:-28px;
  min-height:390px;
  padding:66px 28px 54px;
  overflow:hidden;
  border:0;
  border-radius:0;

  background-image:url("../hero/hero-mascottes.webp?v=94");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

/* Neutralise les anciens fonds pseudo-éléments du hero. */
.hero-v9:before,
.hero-v9:after{
  display:none!important;
}

.hero-css-decor{
  display:none!important;
}

.hero-copy{
  position:relative;
  z-index:5;
  width:min(820px,100%);
  max-width:820px;
  margin:0 auto;
  padding:0 40px;
  text-align:center;
}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:13px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#7657ff;
  font-size:11px;
  font-weight:950;
  letter-spacing:1.3px;
  backdrop-filter:blur(5px);
}

.hero-copy h1{
  margin:0;
  color:var(--ink);
  font-size:clamp(54px,5.4vw,84px);
  line-height:.94;
  letter-spacing:-4.2px;
  text-shadow:0 2px 0 rgba(255,255,255,.9);
}

.hero-copy h1:after{
  content:"";
  display:block;
  width:185px;
  height:9px;
  margin:14px auto 0;
  border-radius:999px;
  background:#ffd64f;
  transform:rotate(-1deg);
}

.hero-copy p{
  margin:19px 0 0;
  color:#555d6d;
  font-size:18px;
  font-weight:700;
  text-shadow:0 1px 0 #fff;
}

/* Le moteur de recherche est retiré pour cette version. */
.hero-search{
  display:none!important;
}

@media (min-width:768px) and (max-width:1180px){
  .hero-v9{
    width:calc(100% + 36px);
    margin-left:-18px;
    margin-right:-18px;
    min-height:340px;
    padding:58px 20px 46px;
    background-position:center center;
  }

  .hero-copy{
    width:min(650px,100%);
    padding:0 28px;
  }

  .hero-copy h1{
    font-size:clamp(48px,7vw,68px);
    letter-spacing:-3px;
  }
}

@media (max-width:767px){
  .hero-v9{
    width:calc(100% + 20px);
    margin-left:-10px;
    margin-right:-10px;
    min-height:270px;
    padding:36px 12px 30px;
    border-radius:0 0 24px 24px;

    /* Keep both mascots visible while leaving the title readable. */
    background-size:auto 100%;
    background-position:center center;
  }

  .hero-copy{
    max-width:100%;
    padding:0 46px;
  }

  .hero-kicker{
    margin-bottom:10px;
    padding:5px 8px;
    font-size:8px;
    letter-spacing:.7px;
  }

  .hero-copy h1{
    max-width:330px;
    margin:0 auto;
    font-size:36px;
    line-height:.98;
    letter-spacing:-2px;
  }

  .hero-copy h1:after{
    width:105px;
    height:7px;
    margin-top:9px;
  }

  .hero-copy p{
    display:none;
  }
}

@media (max-width:390px){
  .hero-copy{
    padding-left:36px;
    padding-right:36px;
  }

  .hero-copy h1{
    font-size:32px;
  }
}


/* =========================================================
   V9.5 — HERO ajusté exactement au concept demandé
   - mascottes plus petites
   - titre plus petit
   - bas arrondi
   - crayon visuellement dans la zone blanche
   ========================================================= */
.hero-v9{
  position:relative;
  width:calc(100% + 56px);
  margin-left:-28px;
  margin-right:-28px;

  min-height:320px;
  padding:56px 24px 50px;

  overflow:hidden;
  border:0;
  border-radius:0 0 36px 36px;

  background-image:url("../hero/hero-mascottes-v95.webp?v=95")!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;

  box-shadow:0 10px 30px rgba(41,35,77,.06);
}

.hero-v9:before,
.hero-v9:after,
.hero-css-decor{
  display:none!important;
}

.hero-copy{
  position:relative;
  z-index:5;
  width:min(590px,100%);
  max-width:590px;
  margin:0 auto;
  padding:0 10px;
  text-align:center;
}

.hero-kicker{
  margin-bottom:10px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.76);
  color:#7657ff;
  font-size:10px;
  font-weight:950;
  letter-spacing:1.1px;
  backdrop-filter:blur(4px);
}

.hero-copy h1{
  max-width:590px;
  margin:0 auto;
  color:var(--ink);
  font-size:clamp(40px,3.6vw,54px);
  line-height:.98;
  letter-spacing:-2.6px;
  text-shadow:0 2px 0 rgba(255,255,255,.95);
}

.hero-copy h1:after{
  content:"";
  display:block;
  width:142px;
  height:7px;
  margin:10px auto 0;
  border-radius:999px;
  background:#ffd64f;
  transform:rotate(-1deg);
}

.hero-copy p{
  margin:13px 0 0;
  color:#5b6271;
  font-size:14px;
  font-weight:700;
  text-shadow:0 1px 0 #fff;
}

/* The age navigation sits slightly into the rounded white part of the hero. */
.age-top-strip{
  position:relative;
  z-index:20;
  margin-top:-18px!important;
  border-radius:25px!important;
  background:rgba(255,255,255,.97)!important;
}

/* Tablet */
@media (min-width:768px) and (max-width:1180px){
  .hero-v9{
    width:calc(100% + 36px);
    margin-left:-18px;
    margin-right:-18px;
    min-height:285px;
    padding:50px 18px 44px;
    border-radius:0 0 32px 32px;
  }

  .hero-copy{
    width:min(500px,100%);
    max-width:500px;
  }

  .hero-copy h1{
    font-size:clamp(37px,5vw,47px);
    letter-spacing:-2px;
  }

  .hero-copy p{
    font-size:13px;
  }

  .age-top-strip{
    margin-top:-15px!important;
  }
}

/* Mobile */
@media (max-width:767px){
  .hero-v9{
    width:calc(100% + 20px);
    margin-left:-10px;
    margin-right:-10px;
    min-height:230px;
    padding:34px 10px 34px;
    border-radius:0 0 28px 28px;

    /* preserve both mascots while keeping them small */
    background-size:auto 100%!important;
    background-position:center center!important;
  }

  .hero-copy{
    width:min(310px,100%);
    max-width:310px;
    padding:0 5px;
  }

  .hero-kicker{
    margin-bottom:8px;
    padding:4px 7px;
    font-size:7px;
    letter-spacing:.7px;
  }

  .hero-copy h1{
    max-width:285px;
    font-size:29px;
    line-height:1;
    letter-spacing:-1.5px;
  }

  .hero-copy h1:after{
    width:88px;
    height:6px;
    margin-top:7px;
  }

  .hero-copy p{
    display:none;
  }

  .age-top-strip{
    margin-top:-12px!important;
  }
}

@media (max-width:390px){
  .hero-v9{
    min-height:215px;
    padding-top:31px;
  }

  .hero-copy h1{
    max-width:260px;
    font-size:27px;
  }
}


/* =========================================================
   V9.21 — NOUVEAUTÉ SPECIAL HALLOWEEN
   ========================================================= */
.halloween-home-special{
  position:relative;
  min-height:154px;
  margin:28px 0 38px;
  padding:25px 30px;
  overflow:hidden;
  border-radius:25px;
  background:
    radial-gradient(circle at 80% 20%,#ffd760 0 55px,transparent 56px),
    linear-gradient(118deg,#32163f,#702767);
  color:#fff;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:25px;
  box-shadow:0 17px 40px #4d1d5b22;
}

.halloween-home-special:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-18px;
  height:42px;
  background:
    radial-gradient(ellipse at 15% 100%,#1d1028 0 45px,transparent 46px),
    radial-gradient(ellipse at 45% 100%,#1d1028 0 52px,transparent 53px),
    radial-gradient(ellipse at 77% 100%,#1d1028 0 46px,transparent 47px);
  opacity:.8;
}

.halloween-home-copy{
  position:relative;
  z-index:3;
  padding-left:125px;
}

.halloween-home-kicker{
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  background:#ff6c13;
  font-size:9px;
  font-weight:950;
  letter-spacing:.9px;
}

.halloween-home-copy h2{
  margin:7px 0 4px;
  font-size:31px;
  line-height:1;
  letter-spacing:-1.3px;
}

.halloween-home-copy p{
  margin:0;
  color:#f3e8f6;
  font-size:13px;
}

.halloween-home-cta{
  position:relative;
  z-index:3;
  min-height:48px;
  padding:11px 16px;
  border-radius:14px;
  background:#fff;
  color:#31133e;
  font-size:12px;
  font-weight:950;
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
}

.halloween-home-cta span{
  color:#ff6c13;
  font-size:19px;
}

.halloween-home-decor{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.halloween-home-decor .pumpkin{
  position:absolute;
  left:25px;
  bottom:8px;
  font-size:91px;
  filter:drop-shadow(0 8px 5px #0004);
}

.halloween-home-decor .ghost{
  position:absolute;
  right:185px;
  bottom:7px;
  font-size:69px;
  opacity:.32;
}

.halloween-home-decor .bat{
  position:absolute;
  font-size:25px;
}

.halloween-home-decor .bat-a{right:33%;top:13px}
.halloween-home-decor .bat-b{right:24%;top:65px;font-size:18px}

@media(max-width:800px){
  .halloween-home-special{
    grid-template-columns:1fr;
    padding:22px;
  }

  .halloween-home-copy{
    padding-left:85px;
    padding-right:0;
  }

  .halloween-home-decor .pumpkin{
    left:8px;
    font-size:74px;
  }

  .halloween-home-decor .ghost{
    display:none;
  }

  .halloween-home-cta{
    justify-self:start;
    margin-left:85px;
  }
}

@media(max-width:520px){
  .halloween-home-special{
    min-height:190px;
    margin:20px 0 28px;
    border-radius:21px;
  }

  .halloween-home-copy{
    padding-left:0;
    padding-top:66px;
  }

  .halloween-home-copy h2{
    font-size:26px;
  }

  .halloween-home-decor .pumpkin{
    top:8px;
    bottom:auto;
    font-size:63px;
  }

  .halloween-home-cta{
    width:100%;
    margin-left:0;
    justify-content:center;
  }
}


/* =========================================================
   V9.29 — Halloween box animations
   Fantômes confinés dans la box + CTA renforcé
   ========================================================= */

.halloween-home-special{
  isolation:isolate;
  overflow:hidden!important;
}

/* Keep every decorative animation INSIDE the Halloween box */
.halloween-home-decor{
  overflow:hidden!important;
  border-radius:inherit;
  z-index:1;
}

.floating-ghost{
  position:absolute;
  z-index:1;
  display:block;
  opacity:.34;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.18));
  will-change:transform,opacity;
}

.ghost-one{
  left:39%;
  top:23px;
  font-size:30px;
  animation:halloweenGhostOne 6.5s ease-in-out infinite;
}

.ghost-two{
  left:55%;
  bottom:14px;
  font-size:24px;
  opacity:.24;
  animation:halloweenGhostTwo 7.4s ease-in-out infinite -.8s;
}

.ghost-three{
  right:25%;
  top:19px;
  font-size:35px;
  opacity:.28;
  animation:halloweenGhostThree 8.1s ease-in-out infinite -1.5s;
}

.ghost-four{
  right:14%;
  bottom:13px;
  font-size:22px;
  opacity:.22;
  animation:halloweenGhostFour 6.8s ease-in-out infinite -2.1s;
}

@keyframes halloweenGhostOne{
  0%,100%{
    transform:translate3d(0,0,0) rotate(-8deg) scale(.9);
    opacity:.18;
  }
  25%{
    transform:translate3d(36px,18px,0) rotate(2deg) scale(1);
    opacity:.38;
  }
  55%{
    transform:translate3d(72px,-8px,0) rotate(8deg) scale(.95);
    opacity:.28;
  }
  80%{
    transform:translate3d(24px,22px,0) rotate(-2deg) scale(1.05);
    opacity:.40;
  }
}

@keyframes halloweenGhostTwo{
  0%,100%{
    transform:translate3d(0,0,0) rotate(5deg);
    opacity:.16;
  }
  35%{
    transform:translate3d(-48px,-20px,0) rotate(-8deg);
    opacity:.34;
  }
  70%{
    transform:translate3d(18px,-35px,0) rotate(5deg);
    opacity:.26;
  }
}

@keyframes halloweenGhostThree{
  0%,100%{
    transform:translate3d(0,0,0) scale(.92);
    opacity:.16;
  }
  30%{
    transform:translate3d(-42px,15px,0) scale(1.05) rotate(-6deg);
    opacity:.38;
  }
  65%{
    transform:translate3d(-12px,35px,0) scale(.95) rotate(6deg);
    opacity:.25;
  }
}

@keyframes halloweenGhostFour{
  0%,100%{
    transform:translate3d(0,0,0) rotate(-5deg);
    opacity:.14;
  }
  45%{
    transform:translate3d(-34px,-27px,0) rotate(8deg);
    opacity:.32;
  }
  72%{
    transform:translate3d(18px,-12px,0) rotate(-2deg);
    opacity:.22;
  }
}

/* -------- CTA Halloween -------- */
.halloween-home-cta{
  overflow:visible;
  transform-origin:center;
  box-shadow:
    0 10px 28px rgba(0,0,0,.22),
    0 0 0 0 rgba(255,108,19,.52);
  animation:halloweenCtaPulse 2.2s ease-in-out infinite;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.halloween-home-cta:before{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:-1;
  border-radius:18px;
  border:2px solid rgba(255,125,37,.58);
  opacity:.0;
  animation:halloweenCtaRing 2.2s ease-out infinite;
}

.halloween-home-cta span{
  display:inline-block;
  animation:halloweenArrowNudge 1.05s ease-in-out infinite;
}

.halloween-home-cta:hover{
  transform:translateY(-4px) scale(1.055);
  background:#fff8ef;
  box-shadow:
    0 15px 36px rgba(0,0,0,.28),
    0 0 0 7px rgba(255,108,19,.15);
}

.halloween-home-cta:active{
  transform:translateY(-1px) scale(1.02);
}

@keyframes halloweenCtaPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:
      0 10px 28px rgba(0,0,0,.22),
      0 0 0 0 rgba(255,108,19,.45);
  }
  50%{
    transform:scale(1.035);
    box-shadow:
      0 14px 35px rgba(0,0,0,.28),
      0 0 0 9px rgba(255,108,19,.08);
  }
}

@keyframes halloweenCtaRing{
  0%{
    transform:scale(.96);
    opacity:.62;
  }
  75%,100%{
    transform:scale(1.15);
    opacity:0;
  }
}

@keyframes halloweenArrowNudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(6px)}
}

/* Mobile/tablet: fewer ghosts and shorter travel, still confined */
@media(max-width:800px){
  .ghost-one{
    left:34%;
    top:14px;
    font-size:24px;
  }

  .ghost-two{
    left:62%;
    bottom:10px;
    font-size:20px;
  }

  .ghost-three{
    right:9%;
    top:13px;
    font-size:27px;
  }

  .ghost-four{
    display:none;
  }
}

@media(max-width:520px){
  .floating-ghost{
    opacity:.18;
  }

  .ghost-one{
    left:48%;
    top:10px;
    font-size:21px;
  }

  .ghost-two{
    left:auto;
    right:18px;
    bottom:45px;
    font-size:18px;
  }

  .ghost-three{
    display:none;
  }

  .halloween-home-cta{
    animation:halloweenCtaPulseMobile 2.4s ease-in-out infinite;
  }

  @keyframes halloweenCtaPulseMobile{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.018)}
  }
}

/* Accessibility */
@media (prefers-reduced-motion:reduce){
  .floating-ghost,
  .halloween-home-cta,
  .halloween-home-cta:before,
  .halloween-home-cta span{
    animation:none!important;
  }
}


/* =========================================================
   V9.30 — Halloween : fantômes un peu plus gros + plus nombreux
   ========================================================= */

/* Existing ghosts slightly larger */
.ghost-one{
  font-size:36px!important;
}
.ghost-two{
  font-size:30px!important;
}
.ghost-three{
  font-size:41px!important;
}
.ghost-four{
  font-size:28px!important;
}

/* Additional ghosts */
.ghost-five{
  left:27%;
  bottom:16px;
  font-size:27px;
  opacity:.22;
  animation:halloweenGhostFive 7.7s ease-in-out infinite -1.2s;
}

.ghost-six{
  left:68%;
  top:48px;
  font-size:32px;
  opacity:.25;
  animation:halloweenGhostSix 8.5s ease-in-out infinite -2.7s;
}

.ghost-seven{
  right:7%;
  top:18px;
  font-size:26px;
  opacity:.20;
  animation:halloweenGhostSeven 7.1s ease-in-out infinite -3.4s;
}

@keyframes halloweenGhostFive{
  0%,100%{
    transform:translate3d(0,0,0) rotate(-4deg) scale(.94);
    opacity:.14;
  }
  30%{
    transform:translate3d(28px,-24px,0) rotate(5deg) scale(1.04);
    opacity:.31;
  }
  65%{
    transform:translate3d(55px,-6px,0) rotate(-2deg) scale(.98);
    opacity:.22;
  }
}

@keyframes halloweenGhostSix{
  0%,100%{
    transform:translate3d(0,0,0) rotate(4deg);
    opacity:.15;
  }
  40%{
    transform:translate3d(-38px,18px,0) rotate(-5deg);
    opacity:.34;
  }
  75%{
    transform:translate3d(12px,31px,0) rotate(4deg);
    opacity:.23;
  }
}

@keyframes halloweenGhostSeven{
  0%,100%{
    transform:translate3d(0,0,0) rotate(-6deg) scale(.92);
    opacity:.13;
  }
  45%{
    transform:translate3d(-33px,24px,0) rotate(7deg) scale(1.05);
    opacity:.30;
  }
  78%{
    transform:translate3d(-8px,38px,0) rotate(-3deg) scale(.97);
    opacity:.20;
  }
}

/* Tablet */
@media(max-width:800px){
  .ghost-one{font-size:29px!important}
  .ghost-two{font-size:24px!important}
  .ghost-three{font-size:32px!important}
  .ghost-four{display:none!important}

  .ghost-five{
    left:24%;
    bottom:8px;
    font-size:22px;
  }

  .ghost-six{
    left:72%;
    top:40px;
    font-size:25px;
  }

  .ghost-seven{
    display:none;
  }
}

/* Mobile: keep a few ghosts only, but slightly larger */
@media(max-width:520px){
  .ghost-one{
    font-size:26px!important;
  }

  .ghost-two{
    font-size:22px!important;
  }

  .ghost-five{
    left:auto;
    right:72px;
    bottom:54px;
    font-size:20px;
  }

  .ghost-six,
  .ghost-seven{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .ghost-five,
  .ghost-six,
  .ghost-seven{
    animation:none!important;
  }
}


/* V9.31 — crawlable SEO/AEO content */
.seo-category-links{margin:10px 0 4px;display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:12px}
.seo-category-links span{font-weight:900;color:var(--ink)}
.seo-category-links a{font-weight:800;color:#6548ee}
.seo-answer-section{margin:46px 0 10px;padding:32px;border:1px solid var(--line);border-radius:26px;background:#fff}
.seo-answer-intro{max-width:850px}
.seo-answer-intro h2{margin:6px 0 10px;font-size:34px;letter-spacing:-1.5px}
.seo-answer-intro p{margin:0;color:var(--muted);line-height:1.65}
.seo-answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.seo-answer-grid article{padding:18px;border-radius:18px;background:#faf8ff}
.seo-answer-grid h3{margin:0 0 7px;font-size:16px}
.seo-answer-grid p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.seo-answer-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.seo-answer-actions a{font-size:12px;font-weight:900;color:#6548ee}
@media(max-width:850px){.seo-answer-grid{grid-template-columns:1fr}.seo-answer-section{padding:22px 16px}}