/* ==========================================================================
   AGRI PÉI — ACCUEIL « PAR RAYONS » (lot Accueil courte, 22/10/2026)
   Marqueur : accueilRayons

   Chargée APRÈS agripei-design-system.css, et seulement sur /boutique quand le
   producteur a choisi l'accueil par rayons (ou posé une signature). Reprend les
   jetons --ap-* du design system. Les pages de rayon, le panier et la caisse
   gardent leur en-tête et ne chargent pas cette feuille.
   ========================================================================== */

/* ---------- 1. Bandeau compact (correctif2) : logo 96 px, titre et sous-titre
   à sa droite, UNE ligne de navigation en bas à droite, marges de 20 px —
   environ 160 px sur ordinateur. Sur toutes les pages publiques de la boutique. */
body.commerce-public .commerce-header.commerce-header-compact{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  min-height:160px;margin:22px 0 0;padding:20px 28px;gap:12px 28px;
  background:#16402b;border-radius:var(--ap-r-lg);box-shadow:var(--ap-sh-sm);
}
body.commerce-public .commerce-header-compact .commerce-brand{
  display:flex;align-items:center;gap:16px;flex:1 1 100%;margin:0;
}
body.commerce-public .commerce-header-compact .commerce-brand img{width:96px;height:96px;object-fit:contain}
body.commerce-public .commerce-header-compact .commerce-wordmark{white-space:normal;gap:5px}
body.commerce-public .commerce-header-compact .commerce-wordmark strong{
  font-size:1.9rem;line-height:1.05;letter-spacing:-.01em;
}
body.commerce-public .commerce-header-compact .commerce-wordmark small{
  font-size:.74rem;letter-spacing:.24em;color:var(--ap-gold-500);
}
body.commerce-public .commerce-header-compact .commerce-nav-compact{
  order:3;width:100%;display:flex;flex-wrap:wrap;justify-content:flex-end;
  align-items:center;gap:8px 26px;overflow:visible;
}
body.commerce-public .commerce-header-compact .commerce-nav a,
body.commerce-public .commerce-header-compact .commerce-nav .account-link{
  padding:0;border:0;background:none;box-shadow:none;white-space:nowrap;
  font-family:var(--ap-serif);font-style:italic;font-weight:400;font-size:1.02rem;
  color:rgba(255,253,248,.88);
}
body.commerce-public .commerce-header-compact .commerce-nav a.active{
  color:var(--ap-cream-50);border-bottom:2px solid var(--ap-gold-500);padding-bottom:3px;
}
body.commerce-public .commerce-header-compact .commerce-nav .account-link{color:var(--ap-gold-500)}
body.commerce-public .commerce-header-compact .commerce-nav .account-link:hover{color:var(--ap-gold-100)}
body.commerce-public .commerce-header-compact .commerce-nav a:hover{color:var(--ap-cream-50);text-decoration:none}

/* ---------- Le bloc sous le bandeau ---------------------------------------- */
body.commerce-public .agri-accueil-rayons{
  display:flex;flex-direction:column;gap:30px;margin:18px 0 0;width:100%;
}
body.commerce-public .agri-accueil-rayons .agri-home-panierbar{
  margin:0;display:flex;justify-content:flex-end;
}

/* ---------- 2. Photo pleine largeur : proportions conservées -------------- */
body.commerce-public .agri-accueil-photo{
  margin:0;border-radius:var(--ap-r-lg);overflow:hidden;
  box-shadow:var(--ap-sh-sm);background:var(--ap-cream-200);
}
/* Ordinateur : hauteur fixe de 480 px, recadrage au centre. Téléphone : 4/3 entier. */
body.commerce-public .agri-accueil-photo img{
  display:block;width:100%;height:480px;object-fit:cover;
}

/* ---------- 3. Tuiles de rayons : 4 par ligne, 2 sur téléphone ----------- */
/* Ligne du titre : titre centré sur la page, panier à droite sur la même ligne. */
body.commerce-public .agri-rayons-entete{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:0 0 18px;
}
body.commerce-public .agri-rayons-entete .agri-catalogue-title{grid-column:2;margin:0}
body.commerce-public .agri-rayons-entete .agri-home-panierbar{grid-column:3;justify-self:end;margin:0}
body.commerce-public .agri-rayons .agri-catalogue-title{margin:0}
body.commerce-public .agri-rayons .agri-catalogue-title h2{
  font-size:clamp(1.3rem,2vw,1.7rem);
}
body.commerce-public .agri-rayons-grille{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
}
body.commerce-public .agri-rayon-tuile{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--ap-r-md);background:var(--ap-green-100);
  box-shadow:var(--ap-sh-sm);text-decoration:none;
  transition:transform 180ms ease,box-shadow 180ms ease;
}
body.commerce-public .agri-rayon-tuile:hover{transform:translateY(-2px);box-shadow:var(--ap-sh-md)}
body.commerce-public .agri-rayon-tuile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 400ms ease;
}
body.commerce-public .agri-rayon-tuile:hover img{transform:scale(1.04)}
body.commerce-public .agri-rayon-sans-photo{
  position:absolute;inset:0;display:grid;place-items:center;font-size:2.4rem;color:#c9bda4;
}
body.commerce-public .agri-rayon-voile{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(18,59,41,.9) 0%,rgba(18,59,41,.5) 42%,rgba(18,59,41,0) 100%);
}
body.commerce-public .agri-rayon-nom{
  position:absolute;left:16px;right:16px;bottom:30px;
  font-family:var(--ap-serif);font-size:1.22rem;line-height:1.15;
  color:var(--ap-cream-50);text-shadow:0 1px 8px rgba(18,59,41,.5);
}
body.commerce-public .agri-rayon-nombre{
  position:absolute;left:16px;right:16px;bottom:12px;
  font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ap-gold-100);
}

/* ---------- 4. Pied de page : la signature en grand, au-dessus des colonnes */
/* Centrée, en doré — la même variable que le sous-titre du bandeau. */
/* Les feuilles précédentes bornent tout paragraphe du pied à 30 caractères :
   la boîte restait collée à gauche. Pleine largeur, puis centrage. */
body.commerce-public .commerce-footer .commerce-footer-signature-producteur{
  position:relative;z-index:1;display:block;width:100%;max-width:none;
  margin:10px auto 22px;text-align:center;
  font-family:var(--ap-serif);font-style:italic;font-size:32px;line-height:1.3;
  color:var(--ap-gold-500);
}

@media(max-width:960px){
  body.commerce-public .agri-accueil-rayons{gap:24px}
  body.commerce-public .agri-rayons-grille{gap:14px}
  body.commerce-public .agri-rayon-nom{font-size:1.08rem}
}
/* Téléphone : la hauteur suit le contenu ; la ligne de navigation passe à la
   ligne naturellement, les liens de compte en dernier. */
@media(max-width:760px){
  body.commerce-public .commerce-header.commerce-header-compact{
    min-height:0;padding:16px 18px 14px;gap:10px 18px;
  }
  body.commerce-public .commerce-header-compact .commerce-brand img{width:72px;height:72px}
  body.commerce-public .commerce-header-compact .commerce-wordmark strong{font-size:1.45rem}
  body.commerce-public .commerce-header-compact .commerce-wordmark small{font-size:.66rem}
  body.commerce-public .commerce-header-compact .commerce-nav-compact{justify-content:flex-start;gap:6px 18px}
  body.commerce-public .agri-accueil-photo img{height:auto;aspect-ratio:4/3}
  body.commerce-public .agri-rayons-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.commerce-public .agri-rayons-entete{grid-template-columns:1fr;justify-items:center;gap:10px}
  body.commerce-public .agri-rayons-entete .agri-catalogue-title,
  body.commerce-public .agri-rayons-entete .agri-home-panierbar{grid-column:1;justify-self:center}
  body.commerce-public .commerce-footer .commerce-footer-signature-producteur{font-size:24px;margin:6px 0 16px}
}
@media(max-width:560px){
  body.commerce-public .agri-accueil-rayons{gap:20px}
  body.commerce-public .agri-accueil-photo{border-radius:var(--ap-r-md)}
  body.commerce-public .agri-rayon-nom{left:12px;right:12px;bottom:26px;font-size:1rem}
  body.commerce-public .agri-rayon-nombre{left:12px;right:12px;bottom:10px;font-size:.68rem}
  body.commerce-public .agri-accueil-rayons .agri-home-panierbar{justify-content:center}
}