/*
Theme Name: De la Terre au Panier — V2
Description: Nouveau thème en cours de refonte (brouillon), construit en parallèle du thème "De la Terre au Panier" actuel pour comparaison avant bascule. Voir doc/plan-refonte-theme.md.
Author: De la Terre au Panier
Version: 0.1.0
Text Domain: delaterreaupanier-v2
*/

:root {
  --color-green-dark: #2a491d;
  --color-green-dark-secondary: #223d17;
  --color-green-accent: #50a72c;
  --color-orange: #ffbd3c;
  --color-text-muted: #7d8978;
  --color-white: #ffffff;
  --font-primary: 'Manrope', sans-serif;
  --font-accent: 'Caveat', cursive;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--color-text-muted);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Header bar (logo + topbar + nav, cadre vert fidèle à la référence) */

.dltap2-header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--color-green-dark);
}

.dltap2-header-bar__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  flex-shrink: 0;
}

.dltap2-header-bar__content {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 2.25rem;
}

.dltap2-header__logo {
  height: 110px;
  width: auto;
  border-radius: 6px;
}

/* Topbar */

.dltap2-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 1.5rem;
  color: var(--color-white);
  font-size: 0.8125rem;
}

.dltap2-topbar__message {
  margin: 0;
}

.dltap2-topbar__contact,
.dltap2-topbar__social {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dltap2-topbar__link,
.dltap2-topbar__social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-white);
  white-space: nowrap;
}

.dltap2-icon {
  flex-shrink: 0;
}

.dltap2-topbar__link .dltap2-icon {
  color: var(--color-orange);
}

/* Nav row */

.dltap2-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 1.5rem;
  background: var(--color-white);
}

.dltap2-nav-row nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dltap2-nav-row nav li {
  position: relative;
}

.dltap2-nav-row nav .sub-menu,
.dltap2-footer nav .sub-menu {
  display: none;
}

.dltap2-nav-row nav a {
  display: inline-block;
  padding: 1rem 0 calc(1rem - 3px);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text-muted);
}

.dltap2-nav-row nav .current-menu-item > a,
.dltap2-nav-row nav .current_page_item > a {
  color: var(--color-green-accent);
}

.dltap2-nav-row nav .current-menu-item > a::after,
.dltap2-nav-row nav .current_page_item > a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--color-green-accent);
}

.dltap2-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.dltap2-nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-green-dark);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.dltap2-nav-toggle[aria-expanded="true"] .dltap2-nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.dltap2-nav-toggle[aria-expanded="true"] .dltap2-nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.dltap2-nav-toggle[aria-expanded="true"] .dltap2-nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1024px) {
  .dltap2-header-bar {
    flex-direction: column;
  }

  .dltap2-header-bar__logo {
    align-self: flex-start;
    padding: 0.75rem 1.5rem;
  }

  .dltap2-header-bar__content {
    flex: 1 1 auto;
    padding-bottom: 0;
  }

  .dltap2-header__logo {
    height: 90px;
  }

  .dltap2-topbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1rem;
  }

  .dltap2-topbar__message {
    flex: 1 1 100%;
    font-size: 0.9375rem;
  }

  .dltap2-topbar__contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .dltap2-topbar__social-link {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
  }

  .dltap2-topbar__social-link .dltap2-icon {
    width: 24px;
    height: 24px;
  }

  .dltap2-nav-row {
    flex-wrap: wrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  }

  .dltap2-nav-toggle {
    display: flex;
  }

  .dltap2-nav-row nav {
    display: none;
    width: 100%;
  }

  .dltap2-nav-row nav.is-open {
    display: block;
  }

  .dltap2-nav-row nav ul {
    flex-direction: column;
    gap: 0;
  }

  .dltap2-nav-row nav a {
    display: block;
    padding: 0.75rem 1rem;
  }

  .dltap2-nav-row nav .current-menu-item > a::after,
  .dltap2-nav-row nav .current_page_item > a::after {
    display: none;
  }

  .dltap2-nav-row nav .current-menu-item > a,
  .dltap2-nav-row nav .current_page_item > a {
    background-color: var(--color-green-accent);
    color: var(--color-white);
  }

  .dltap2-footer__top {
    flex-direction: column;
  }

  .dltap2-footer__photos {
    grid-template-columns: repeat(3, minmax(0, 140px));
  }

  .dltap2-footer__legal {
    flex-direction: column;
    text-align: center;
  }
}

/* Footer */

.dltap2-footer {
  position: relative;
  background-color: var(--color-green-dark);
  background-image: url('assets/images/footer/bg-4.jpg');
  background-repeat: repeat;
  background-position: 0 0;
  color: rgba(255, 255, 255, 0.85);
}

/* Bord "papier déchiré" : image ripped-paper.png (celle de prod4) appliquée
   telle quelle en ::before, même technique que la référence (background-size:
   contain + no-repeat + position 50% 0%) : l'image ne remplit que le haut du
   bandeau (son ratio très large/plat), le reste du ::before reste transparent
   et laisse voir le fond .dltap2-footer en dessous. */
.dltap2-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/images/footer/ripped-paper.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  pointer-events: none;
}

.dltap2-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding: 4.5rem 1.5rem 2.75rem;
  max-width: 1200px;
  margin: 0 auto;
}

.dltap2-footer__brand {
  flex: 1 1 260px;
}

.dltap2-footer__logo {
  height: 80px;
  width: auto;
  border-radius: 6px;
}

.dltap2-footer__thanks {
  margin: 1rem 0;
  font-weight: 700;
  color: var(--color-white);
}

.dltap2-footer__social {
  display: flex;
  gap: 0.75rem;
}

.dltap2-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}

.dltap2-footer__nav {
  flex: 1 1 160px;
}

.dltap2-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dltap2-footer__nav a {
  color: inherit;
}

.dltap2-footer__contact {
  flex: 1 1 240px;
}

.dltap2-footer__address {
  margin: 0 0 0.75rem;
  color: var(--color-white);
}

.dltap2-footer__hours {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dltap2-footer__hours li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.dltap2-footer__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-white);
  margin-top: 0.5rem;
}

.dltap2-footer__photos {
  flex: 1 1 260px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  align-content: start;
}

.dltap2-footer__photos img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
}

.dltap2-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: var(--color-green-dark-secondary);
  font-size: 0.8125rem;
  text-align: center;
}

.dltap2-footer__copyright {
  margin: 0;
}

.dltap2-footer__legal-links {
  display: flex;
  gap: 1.5rem;
}

.dltap2-footer__legal-links a {
  color: rgba(255, 255, 255, 0.85);
}

/* Bouton retour en haut */

.dltap2-back-to-top {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: var(--color-green-accent);
  color: var(--color-white);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

.dltap2-back-to-top.is-visible {
  display: flex;
}

/* Boutons CTA */

.btn {
  display: inline-block;
  border: none;
  border-radius: 50px;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-primary);
  font-weight: 800;
  color: var(--color-white);
  cursor: pointer;
}

.btn--primary {
  background: var(--color-orange);
}

.btn--secondary {
  background: var(--color-green-accent);
}

/* Page d'accueil */

.dltap2-section {
  width: 100%;
  padding: 3rem 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.dltap2-section__kicker {
  display: block;
  font-family: var(--font-accent);
  font-size: 1.5rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.dltap2-intro__content .dltap2-section__kicker {
  color: var(--color-green-accent);
}

.dltap2-section__title {
  font-family: var(--font-primary);
  font-weight: 800;
  color: var(--color-green-dark);
  margin: 0 0 1rem;
}

/* Hero */

.dltap2-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  max-width: none;
  margin: 0;
  padding: 3rem clamp(1.5rem, 6vw, 6rem);
  background-color: #f3f2ed;
}

/* Le doodle est ancré en haut de la section avec un ratio d'aspect fixe (celui du fichier
   source, 1894x717) : il ne se redimensionne qu'avec la largeur, jamais avec la hauteur du
   contenu. Sans ça, `background-size: cover` sur .dltap2-hero zoome l'image à l'excès dès que
   le contenu grandit (ex. visuel qui passe sous le texte en tablette), recadrant hors champ les
   illustrations dessinées dans les 4 coins du fichier (le centre de l'image est une texture
   papier vide). `background-color` ci-dessus reprend le ton exact du papier pour un raccord
   invisible sous la bande. */
.dltap2-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1894 / 717;
  background-image: url('../../uploads/2026/07/hero-bg-doodle.jpg');
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.dltap2-hero__content {
  position: relative;
  z-index: 1;
  flex: 1 1 620px;
}

.dltap2-hero__visual {
  position: relative;
  z-index: 1;
  flex: 1 1 380px;
  min-height: 320px;
}

.dltap2-hero__visual-main {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.dltap2-hero__floating {
  position: absolute;
  filter: drop-shadow(0 14px 18px rgba(30, 20, 0, 0.2));
}

.dltap2-hero__floating--leaf {
  top: -36px;
  left: -4px;
  width: 68px;
}

.dltap2-hero__floating--tomato {
  bottom: 12%;
  left: -4%;
  width: 56px;
}

.dltap2-hero__floating--orange {
  bottom: -6%;
  right: 6%;
  width: 88px;
}

.dltap2-hero__title {
  font-size: 2.75rem;
  line-height: 1.2;
  color: var(--color-green-dark);
}

.dltap2-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Présentation du magasin */

.dltap2-intro {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 2.5rem;
  background-image: url('../../uploads/2026/07/intro-bg-branch-berries.png');
  background-repeat: no-repeat;
  background-position: bottom right;
}

.dltap2-intro h3.dltap2-section__title {
  color: var(--color-green-accent);
}

.dltap2-intro__content {
  flex: 1 1 380px;
  min-width: 0;
}

.dltap2-intro__title {
  font-size: 2rem;
  line-height: 1.2;
  color: var(--color-green-dark);
  margin: 0 0 1rem;
}

.dltap2-intro__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0 1.5rem;
}

.dltap2-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9375rem 1.875rem;
  border-radius: 6px;
  background: var(--color-white);
  color: var(--color-green-dark);
  font-weight: 800;
  font-size: 1.125rem;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.07);
}

.dltap2-badge__icon {
  flex-shrink: 0;
  color: var(--color-orange);
}

.dltap2-intro__hours {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.dltap2-intro__hours li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.875rem;
}

.dltap2-intro__hours .dltap2-icon {
  color: var(--color-green-accent);
}

.dltap2-intro__highlight {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  font-weight: 700;
  color: var(--color-green-dark);
}

.dltap2-intro__highlight-icon {
  width: 32px;
  height: auto;
  flex-shrink: 0;
}

.dltap2-intro__cta {
  margin-top: 1.5rem;
}

.dltap2-intro__visual {
  flex: 0 0 280px;
  width: 280px;
}

.dltap2-intro__photo-frame {
  width: 100%;
  aspect-ratio: 528 / 670;
  background-image: url('../../uploads/2026/07/intro-photo-backdrop-green.png');
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.dltap2-intro__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.dltap2-intro__counter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: var(--color-green-dark);
  color: var(--color-white);
}

.dltap2-intro__counter-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.dltap2-intro__counter strong {
  font-size: 1.75rem;
  margin-right: 0.25rem;
}

/* Catégories */

.dltap2-categories__list {
  display: grid;
  /* 4 catégories actuellement : une colonne par catégorie en desktop/tablette,
     empilées en mobile (cf. media query ci-dessous) -- à ajuster si le nombre
     de catégories change. */
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dltap2-categories__item {
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
  background: #f7f5ee;
  color: var(--color-green-dark);
  border-radius: 8px;
  font-weight: 500;
  box-shadow: 0 12px 24px rgba(42, 73, 29, 0.1);
}

.dltap2-categories__photo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.dltap2-categories__photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--color-white);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.dltap2-categories__accent {
  width: 0;
  height: 0;
  flex-shrink: 0;
}

.dltap2-categories__accent--left {
  border-style: solid;
  border-width: 20px 16px 20px 0;
  border-color: transparent var(--color-green-accent) transparent transparent;
}

.dltap2-categories__accent--right {
  border-style: solid;
  border-width: 20px 0 20px 16px;
  border-color: transparent transparent transparent var(--color-orange);
}

.dltap2-categories__name {
  display: block;
}

/* Produits phares */

.dltap2-products__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dltap2-products__item {
  text-align: center;
}

.dltap2-products__item img {
  border-radius: 8px;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: 0 12px 24px rgba(42, 73, 29, 0.1);
}

.dltap2-products__name {
  display: block;
  margin-top: 0.5rem;
  font-weight: 500;
  color: var(--color-green-dark);
}

.dltap2-products__all {
  display: inline-block;
  margin-top: 2rem;
  font-weight: 500;
  color: var(--color-green-accent);
  text-decoration: underline;
}

/* Équipe */

.dltap2-team__list {
  display: grid;
  /* 3 membres placeholder actuellement : une colonne par membre en
     desktop/tablette, empilés en mobile (cf. media query ci-dessous) -- à
     ajuster si le nombre de membres change. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dltap2-team__item {
  padding: 1.5rem;
  text-align: center;
  background: #f4f4f0;
  border-radius: 8px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Avis clients */

.dltap2-reviews__list {
  display: grid;
  /* 3 avis placeholder actuellement : une colonne par avis en
     desktop/tablette, empilés en mobile (cf. media query ci-dessous) -- à
     ajuster si le nombre d'avis change. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dltap2-reviews__item {
  padding: 1.5rem;
  background: #f4f4f0;
  border-radius: 8px;
  color: var(--color-text-muted);
  font-style: italic;
  box-shadow: 0 12px 24px rgba(42, 73, 29, 0.1);
}

/* Blog */

.dltap2-blog {
  background: #f4f4f0;
}

.dltap2-blog__empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Contenu principal - tablette et desktop (sticky footer)
   Le header et le footer n'ont aucune hauteur stable sur cette plage (le
   footer se réempile en fluide selon la largeur, de 412px à plus de 1300px
   mesuré) : un min-height calculé en pixels (calc(100vh - Npx)) serait donc
   juste à une largeur et faux à une autre. Le pattern flexbox ci-dessous
   s'affranchit de connaître ces hauteurs : le contenu (flex: 1 0 auto)
   absorbe automatiquement tout l'espace restant entre header et footer,
   quelle que soit leur taille réelle, évitant qu'un contenu court (ex. FAQ)
   laisse le footer "remonté" avec un grand vide en dessous. */

@media (min-width: 769px) {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  article.dltap2-section,
  article.dltap2-404 {
    flex: 1 0 auto;
  }
}

/* Mobile */

@media (max-width: 768px) {
  .dltap2-hero__visual {
    display: none;
  }

  .dltap2-intro {
    flex-direction: column;
  }

  .dltap2-intro__photo-frame {
    display: none;
  }

  .dltap2-intro__visual {
    flex: 1 1 auto;
    width: auto;
  }

  .dltap2-categories__list,
  .dltap2-team__list,
  .dltap2-reviews__list {
    grid-template-columns: 1fr;
  }
}