/* =========================================================
   RESPONSIVE GLOBAL TYPOGRAPHY
========================================================= */
@media (min-width: 768px) {
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.8rem; }
  body { font-size: 1.05rem; }
}

@media (min-width: 1024px) {
  h1 { font-size: 2.8rem; }
}

/* =========================================================
   HEADER TABLET (≥ 768px ET < 1024px)
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

  .site-header {
    padding: 1rem 2rem;
  }

  .header-inner {
    /* toujours en colonnes car menu déroulant */
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "branding hamburger"
      "nav nav"
      "btn btn";
    row-gap: 1rem;
    width: 100%;
  }

  .branding {
    grid-area: branding;
  }

  .hamburger {
    grid-area: hamburger;
    display: flex;
    justify-self: end;
  }

  /* Le menu mobile reste vertical */
  .main-nav {
    grid-area: nav;
    width: 100%;
  }

  /* bouton commander centré sous le menu */
  .header-btn {
    grid-area: btn;
    margin: 0 auto;
  }
}

/* =========================================================
   HEADER DESKTOP (≥ 1240px)
========================================================= */

@media (min-width: 1240px) {

    .site-header {
        padding: 1.2rem 3rem;
    }

    .header-inner {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 2rem;
    }

    /* branding à gauche */
    .branding {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        flex-shrink: 0;
    }

    .site-title a {
        font-size: 45px;
        font-weight: 900;
    }

    /* on cache le hamburger */
    .hamburger {
        display: none !important;
    }

    /* menu desktop affiché en ligne */
    .main-nav {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: end;
        margin-left: auto;
        gap: 2rem;
        opacity: 1 !important;
        max-height: none !important;
    }

    /* menu horizontal */
    .nav-list {
        display: flex;
        flex-direction: row;
        gap: 3rem;
        white-space: nowrap;
    }

    .nav-list a {
        font-size: 16px;
        font-weight: 700;
    }

    .nav-list a:hover {
        color: var(--color-accent);
    }

    /* bouton commander tout à droite */
    .header-btn {
        padding: 0.9rem 1.8rem;
        font-size: 16px;
        font-weight: 700;
        margin: 0; 
    }

    .header-btn:hover {
        background-color: var(--color-accent);
        color: white;
    }
}

/* ================================
  HERO SECTION TABLET
================================ */
@media (min-width: 768px) {
    .hero {
        height: 75vh;
    }

    .hero-slogan {
        font-size: 6rem;
    }
}

/* ================================
   HERO SECTION DESKTOP
================================ */
@media (min-width: 1024px) {
    .hero {
        height: 90vh;
    }

    .hero-slogan {
        font-size: 7rem;
    }
}

/* ===============================
   MARKETS SECTION TABLET
================================ */

@media (min-width: 600px) {

    a.opd-market__button {
        font-size: 1.5rem;
    }
}

/* ===============================
   MARKETS SECTION DESKTOP
================================ */

@media (min-width: 900px) {

    .opd-markets__wrapper {
        flex-direction: row;
        gap: 50px;
    }

    .opd-markets__title {
        font-size: 3rem;
    }

    .opd-market__name {
        font-size: 2.5rem;
    }

    .opd-market__schedule {
        font-size: 2rem;
    }

    .opd-market {
        flex: 1;
    }

    .opd-market__img {
        height: 420px;
    }

    a.opd-market__button {
    font-size: 1.5rem;
}

}

/* ===============================
   CONTACT SECTION
================================ */

@media (min-width: 900px) {
    .opd-contact__title {
        font-size: 2.9rem;
    }
    
    .opd-contact__text {
        font-size: 2rem !important;
        margin-bottom: 30px !important;
    }

    .opd-contact__button {
        font-size: 1.8rem;
        padding: 18px 45px;
    }

    .opd-contact__inner {
        max-width: 900px;
    }
}

/* ===============================
   FOOTER — TABLET (>= 768px)
================================ */
@media (min-width: 768px) {

  .site-footer {
    padding: 3rem 2rem;
    background: #3b1f1a; /* brun artisanal */
    color: #f7eae5;
  }

  .footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 colonnes */
    gap: 2.5rem;
    align-items: start;
  }

  /* Colonne gauche - Branding */
  .footer-branding img {
    width: 90px;
    margin-bottom: 0.8rem;
  }

  .footer-branding h3 {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
  }

  .footer-branding p {
    font-size: 14px;
    opacity: 0.9;
  }

  /* Menu footer au centre */

  .footer-menu-list {
    margin-top: 50px;
  }

  .footer-menu-list a {
    font-size: 16px;
  }

  .footer-nav ul {
    padding: 0;
    margin: 0;
  }

  .footer-nav li {
    margin-bottom: 0.4rem;
  }

  .footer-nav a {
    font-size: 1rem;
  }

  /* Colonne droite - Contact */

  .footer-contact {
    margin-top: 40px;
  }

  .footer-contact h4 {
    font-size: 18px;
    margin-bottom: 14px;
  }

  .footer-contact p {
    font-size: 16px;
    line-height: 1.5;
  }

  /* Copyright */
  .footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.15);
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.75;
  }

  .site-credit {
    font-size: 0.7rem !important;
  }   
}

/* ===============================
   FOOTER — DESKTOP (>= 1024px)
================================ */
@media (min-width: 1024px) {

  .site-footer {
    padding: 4rem 4rem;
  }

  .footer-inner {
    grid-template-columns: 1.2fr 1fr 1fr; /* Branding plus large */
    gap: 4rem;
  }

  /* Branding */
  .footer-branding img {
    width: 100px;
  }

  .footer-branding h3 {
    font-size: 1.8rem;
  }

  /* Menu */

  .footer-menu-list {
    margin-top: 50px;
  }

  .footer-nav a {
    font-size: 1.05rem;
  }

  /* Contact */
  .footer-contact h4 {
    font-size: 18px;
    margin-bottom: 14px;
  }

  .footer-contact p {
    font-size: 16px;
  }

  /* Copyright */
  .footer-bottom {
    font-size: 0.95rem;
    margin-top: 3rem;
  }

  .site-credit {
    font-size: 1.1rem !important;
}
}

/* ===============================
   PAGE MES CREATIONS TABLET
================================ */

@media (min-width: 600px) {

   .creations-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px;
    }

    .page-title {
        font-size: 36px;
    }

    .creation-title {
        font-size: 22px;
    }

    .creation-image img {
        height: 250px;
    }
}

/* =========================
   PAGE MES CREATIONS DESKTOP
   ========================= */

@media (min-width: 1024px) {

    .mes-creations-page {
        padding: 70px 40px;
    }

    .creations-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 40px;
    }

    .page-title {
        font-size: 42px;
    }

    .creation-image img {
        height: 270px;
    }

    .promo-card {
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }
}


/* --------------------------------------------------
   SINGLE-CREATION TABLET (min-width: 768px)
-------------------------------------------------- */
@media (min-width: 768px) {

    .creation-title {
        font-size: 2.3rem;
        margin-top: 25px;
    }

    .creation-content {
        font-size: 2rem;
        line-height: 1.8;
    }

    .creation-featured-image img {
        border-radius: 16px;
    }
}

/* --------------------------------------------------
   SINGLE-CREATION DESKTOP (min-width: 1024px)
-------------------------------------------------- */
@media (min-width: 1024px) {

    /* Layout en 2 colonnes */
    .single-creation {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Image | Texte */
        align-items: start;
        gap: 40px;
    }

    .single-creation-page {
        padding: 70px 0;
    }

    /* IMAGE */
    .creation-featured-image {
        width: 100%;
    }

    .creation-featured-image img {
        width: 100%;
        max-height: 500px;
        object-fit: cover;
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.10);
        display: block;
    }

    /* Texte à droite */
    .single-creation-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .creation-title {
        font-size: 3rem !important;
        margin-bottom: 20px;
        text-align: left;
    }

    .creation-content {
        font-size: 2rem;
        text-align: left;
    }

    .btn-back {
        padding: 14px 32px;
        font-size: 1.3rem;
        align-self: flex-start;
    }

    .btn-back:hover {
        background-color: var(--color-accent);
        color: white;
    }

    /* —— Fix image verticale —— */
    .creation-featured-image .image-verticale {
        width: 100%;
        height: auto;
        object-fit: contain !important;
        max-height: 1000px;
        display: block;
        margin: 0 auto;
    }

    /* Bord arrondi uniquement pour la pièce montée */
    .creation-image.vertical-img {
        border-radius: 20px !important;
        overflow: hidden !important;
    }
}

/* ============================================
   FILTERS CREATIONS TABLETTE (≥ 768px)
   ============================================ */
@media (min-width: 768px) {

    .filter-btn {
        padding: 10px 20px;
        font-size: 1.3rem !important;
        border-radius: 10px;
    }

    .creations-filters {
        gap: 10px !important;
        margin-top: 30px !important;
        margin-bottom: 35px !important;
    }
}

/* ============================================
   FILTERS CREATIONS DESKTOP (≥ 1024px)
   ============================================ */
@media (min-width: 1024px) {

    .filter-btn {
        padding: 12px 24px;
        font-size: 1.5rem !important; 
        border-radius: 12px;
    }

    .creations-filters {
        margin-top: 35px !important;
        margin-bottom: 40px !important;
        gap: 15px !important;
    }
}

/* ============================================
   COOKIE BANNER TABLET
   ============================================ */
@media (min-width: 768px) {
    .cookie-banner {
        font-size: 1rem;
        padding: 20px 26px;
    }

    .cookie-btn {
        padding: 10px 18px;
        font-size: 1.5rem !important;
    }
}

/* ============================================
   COOKIE BANNER DESKTOP
   ============================================ */
@media (min-width: 1024px) {
    .cookie-banner {
        max-width: 520px;
    }

    .cookie-btn {
        padding: 10px 18px;
        font-size: 1.7rem !important;
    }
}