/* ============================================
   PIED DE PAGE — « le rideau de l'étal »
   Bord festonné (store de marché), rouge El Benna,
   newsletter manuscrite, colonnes, signature géante.
   ============================================ */
.pied {
  position: relative;
  background: var(--terracotta);
  color: var(--creme);
  /* l'espace au-dessus vient du padding-bas de la section précédente */
  margin-top: 0;
  padding: 92px 0 0;
  overflow: hidden;
}

/* Bord haut : DROIT (24/08).
   Le feston « store de marché » a été retiré : la page porte déjà beaucoup de motif — épices
   semées, cartes penchées, soulignés à main levée, écriture manuscrite. Un troisième registre
   décoratif juste avant le pied brouillait la fin de page au lieu de la conclure. Un bord franc
   laisse le rouge faire la coupure, ce qui est bien plus net.
   Si l'envie d'un liseré revient, préférer une bande pleine de 6 px dans le doré de la charte
   plutôt qu'une découpe : elle se lit à toutes les largeurs, le feston non. */
.pied::before { content: none; }

.pied__inner {
  position: relative;
  z-index: 2;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 clamp(22px, 5vw, 72px);
}

/* ---------- Rangée 1 : marque + newsletter ---------- */
.pied__haut {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding-bottom: 46px;
}
.pied__logo {
  display: inline-block;
  background: #fff;
  border-radius: 18px;
  padding: 10px 16px;
}
.pied__logo img { height: 54px; width: auto; }
.pied__baseline {
  font-family: var(--f-script);
  font-size: 30px;
  font-weight: 600;
  margin-top: 14px;
  transform: rotate(-1.5deg);
  color: var(--creme);
}

.pied__news { position: relative; text-align: right; }
.pied__news-label {
  font-family: var(--f-script);
  font-size: 32px;
  font-weight: 600;
  display: block;
  margin-bottom: 12px;
  transform: rotate(-1deg);
}
.footer__form { display: flex; gap: 10px; justify-content: flex-end; }
.footer__input {
  font-family: var(--f-corps);
  font-size: 15px;
  border: none;
  border-radius: var(--r-pilule);
  padding: 14px 22px;
  min-width: 270px;
  background: #fff;
  color: var(--encre);
}
.footer__input::placeholder { color: #a9a196; }
.footer__input:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.footer__merci {
  font-family: var(--f-script);
  font-size: 26px;
  font-weight: 600;
}
.pied__sticker-news {
  position: absolute;
  left: 0;
  bottom: -30px;
  background: var(--jaune);
  color: var(--encre);
  font-family: var(--f-script);
  font-size: 22px;
  font-weight: 600;
  padding: 7px 18px 8px;
  border-radius: var(--r-pilule);
  transform: rotate(-4deg);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.4);
}

/* ---------- Filet ---------- */
.pied__filet {
  border: 0;
  border-top: 2px dashed rgba(255, 255, 255, 0.32);
  margin: 0;
}

/* ---------- Rangée 2 : colonnes ---------- */
.pied__colonnes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  padding: 46px 0 40px;
}
.pied__col h3 {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 19px;
  letter-spacing: 0.6px;
  color: #fff;
  margin-bottom: 16px;
}
.pied__col ul { display: grid; gap: 9px; }
.pied__col a { text-decoration: none; transition: color 0.2s ease, translate 0.2s ease; display: inline-block; }
.pied__col a:hover { color: var(--jaune); translate: 4px 0; }

.pied__tel {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 27px;
  color: #fff;
  letter-spacing: 0.5px;
}
.pied__tel:hover { color: var(--jaune); }
.pied__mail { font-weight: 600; }

.pied__reseaux { display: flex; gap: 9px; margin-top: 16px; }
.pied__reseaux a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.pied__reseaux a:hover {
  background: #fff;
  color: var(--terracotta);
  transform: translateY(-3px) rotate(-4deg);
  border-color: #fff;
}

/* ---------- Rangée 3 : mentions + tampon ---------- */
.pied__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 26px 0 10px;
  font-size: 13.5px;
  color: rgba(255, 253, 244, 0.72);
}
.pied__bas a { text-decoration: underline; text-underline-offset: 3px; }
.pied__bas a:hover { color: var(--jaune); }
.pied__tampon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--r-pilule);
  padding: 8px 18px 9px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
}
.pied__tampon::before { content: '✔'; font-family: var(--f-script); font-size: 19px; color: var(--jaune); }

/* ---------- Signature géante, rognée en bas ---------- */
.pied__signature {
  position: relative;
  z-index: 1;
  margin: 6px 0 -0.16em;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(72px, 17vw, 250px);
  line-height: 0.78;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.16);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .pied__colonnes { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 767px) {
  .pied { padding-top: 72px; }
  .pied__haut { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .pied__news { text-align: center; }
  .footer__form { justify-content: center; flex-wrap: wrap; }
  .footer__input { min-width: 0; width: 100%; }
  .pied__sticker-news { position: static; display: inline-block; margin-top: 16px; }
  .pied__colonnes { grid-template-columns: 1fr; text-align: center; }
  .pied__reseaux { justify-content: center; }
  .pied__bas { justify-content: center; text-align: center; }
}