/* =============================
   Menu burger (mobile)
   ============================= */
.burger {
  display: none;
  width: 25px;
  height: 18px;
  position: absolute;
  right: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.burger span {
  display: block;
  height: 3px;
  background-color: var(--color-text);
  border-radius: var(--radius-sm);
  margin-bottom: 5px;
}

@media (max-width: 768px) {
  header nav ul {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--color-bg-alt);
    width: 200px;
    display: block;
    transform: translateX(100%);
    transition: transform var(--transition-base);
  }

  header nav ul.open {
    transform: translateX(0);
  }

  header nav ul li {
    display: block;
    margin: var(--space-md) 0;
    text-align: left;
  }

  .burger {
    display: block;
  }
}



/* =============================
   4. Grille responsive simple
   ============================= */

@media (max-width: 768px) {
  .col-6 {
    flex: 0 0 100%;
  }
}




/*=============================================*/

@media (hover: none) {
  .fizzy-wrapper:hover .bubble { animation-name: none; }
}


/* responsive card cc */

@media (max-width: 920px){
  .cc-list{ grid-auto-columns: 70%; gap: 14px; }
  .cc-card{ width: auto; min-width: unset; }
}
@media (max-width: 560px){
  .cc-nav{ display:none; }
  .cc-list{ grid-auto-columns: 86%; gap: 12px; padding-left: 12px; }
}


/* responsive */
@media (max-width: 980px){
  .cc-list{ grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .cc-nav--left { left: 6px; }
  .cc-nav--right { right: 6px; }
}

@media (max-width: 640px){
  .cc-list{ grid-template-columns: 1fr; gap: 1.6rem; }
  .cc-nav{ display: none; }
  .cc-title{ font-size: 1.8rem; }
  .cc-card{ width: 84%; }
}

/* responsive mood card */

@media (max-width: 880px){
  .mood-grid{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mood-section{ padding: 28px 16px; }
}
@media (max-width: 420px){
  .mood-grid{ grid-template-columns: 1fr; gap: 14px; }
  .mood-section{ padding: 20px 12px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mood-emoji, .yarn-core, .yarn-stitch, #yarnKnots circle { animation: none; transition: none; transform: none; }
}


/* responsive tweaks */
@media (max-width: 980px) {
  .ap-grid {
    grid-template-columns: 1fr 320px;
    gap: 1.6rem;
  }
  .ap-photo-wrap::before { inset: -14px; }
}

@media (max-width: 720px) {
  .ap-grid {
    grid-template-columns: 1fr;
  }
  .ap-visual {
    order: 2;
    margin-top: 1.2rem;
  }
  .ap-title {
    font-size: 1.9rem;
  }
  .ap-photo-wrap {
    max-width: 260px;
    margin: 0 auto;
  }
}

/* responsive a propos */

@media (max-width: 980px){ .ap-inner { grid-template-columns: 1fr; } }

/* small responsive carnet */
@media (max-width:640px){
  .carnet-body { padding:12px; }
  .ap-right { order:2; margin-top:1.2rem; }
  .ap-carnet-preview { right: 12px; bottom:12px; width:150px; }
}

/* Small responsive: preview becomes inline under image */
@media (max-width: 880px) {
  .ap-inner { grid-template-columns: 1fr; }
  .ap-carnet-preview { position: static; width: 100%; margin-top: 12px; transform: none; }
}


/* Responsive newsletter*/
@media (max-width: 600px) {
    .newsletter__title {
        font-size: 2.2rem;
    }

    .newsletter__input-wrapper input {
        width: 180px;
    }
}



/* petit réglage responsive pour que les stitches restent subtils sur mobile */
@media (max-width: 420px) {
  .mood-card .stitch { width: 10px; height: 1.6px; }
}


/* carnet */
@media (max-width:880px) {
  .carnet-stage { height: 360px; }
  .carnet-page { padding: 18px; }
}


@media (max-width: 900px){
  .yarn{ width: 92%; }
  .rabbit-eyes{ width: 160px; left: 6%; top: 26%; }
  .hero__title{ font-size: clamp(20px, 6vw, 36px); }
}