/* Bas de page des articles et des balades (étape 19) : bande crème à collines avant le pied de page.
   Feuille neuve : n'altère aucun composant existant (les tuiles sont celles de « Comprendre »). */
@layer pages {
  .art-end{padding-bottom:var(--space-7)}
  .art-end .wrap>*+*{margin-top:var(--space-7)}
  .art-end__title{font-size:var(--text-l);font-weight:600;line-height:1.3;margin:0 0 var(--space-5);padding-bottom:var(--space-3);border-bottom:1px solid var(--c-taupe)}
  .art-end__where{font-weight:300;color:var(--c-ink-soft)}
  .art-end__where::before{content:"· "}

  /* Précédent / suivant : bloc typographique sans boîte, deux flèches de part et d'autre d'un filet central
     (distinct des tuiles « Autres articles », qui restent des cartes blanches). */
  .art-nav__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--c-taupe)}
  .art-nav__link{position:relative;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6) var(--space-7);text-decoration:none;color:var(--c-ink);min-width:0;overflow-wrap:anywhere;transition:background-color .2s}
  .art-nav__link--prev{grid-column:1;padding-left:calc(var(--space-7) + 56px)}
  .art-nav__link--next{grid-column:2;text-align:right;padding-right:calc(var(--space-7) + 56px);border-left:1px solid var(--c-taupe)}
  .art-nav__link--prev:only-child{grid-column:1}
  .art-nav__link::before{content:"";position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;border:1px solid var(--c-brand);border-radius:50%;background:no-repeat center/18px 18px;transition:background-color .2s,transform .2s}
  .art-nav__link--prev::before{left:var(--space-6);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ce2c4b' stroke-width='1.6'%3E%3Cpath d='M20 12H4M10 6l-6 6 6 6'/%3E%3C/svg%3E")}
  .art-nav__link--next::before{right:var(--space-6);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ce2c4b' stroke-width='1.6'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E")}
  .art-nav__dir{font-size:var(--text-s);letter-spacing:.08em;text-transform:uppercase;color:var(--c-taupe-deep)}
  .art-nav__title{font-size:26px;font-weight:300;line-height:1.2}
  .art-nav__link:hover{background:rgba(255,255,255,.55)}
  .art-nav__link--prev:hover::before{transform:translateX(-4px)}
  .art-nav__link--next:hover::before{transform:translateX(4px)}
  .art-nav__link:hover .art-nav__title{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--c-brand)}
  .art-nav__link:focus-visible,.art-end__btn:focus-visible{outline:2px solid var(--c-brand-strong);outline-offset:-4px}

  /* Références du type (appellation, cépages liés) */
  .art-end__links{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);font-size:var(--text-m);margin:0}
  .art-end__links a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--c-taupe)}
  .art-end__refs .art-end__title{margin-top:var(--space-5)}
  .art-end .art-tags a{text-decoration:none;padding:8px 14px}

  /* Bouton de retour */
  .art-end__back{margin-bottom:0;text-align:center}
  .art-end__btn{display:inline-block;padding:14px 28px;background:var(--c-brand-strong);color:var(--c-white);font-weight:600;text-decoration:none;max-width:100%;overflow-wrap:anywhere}
  .art-end__btn:hover{background:var(--c-ink)}

  @media (max-width:700px){
    .art-nav__grid{grid-template-columns:1fr}
    .art-nav__link{padding:var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 52px)}
    .art-nav__link::before{left:var(--space-4);right:auto;width:36px;height:36px;margin-top:-18px}
    .art-nav__link--prev{padding-left:calc(var(--space-5) + 52px)}
    .art-nav__link--next{grid-column:1;text-align:left;padding-right:var(--space-5);padding-left:calc(var(--space-5) + 52px);border-left:0;border-top:1px solid var(--c-taupe)}
    .art-nav__link--next::before{left:var(--space-4);right:auto}
    .art-nav__title{font-size:20px}
  }
}