/* ============================================================
   ABIRES — styles de la boutique (s'appuie sur tokens.css)
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ab-police-texte);
  font-size: var(--ab-taille-base);
  line-height: var(--ab-interligne-texte);
  color: var(--ab-texte);
  background: var(--ab-fond);
}

h1, h2, h3 {
  font-family: var(--ab-police-titres);
  line-height: var(--ab-interligne-titre);
  margin: 0;
}

img { max-width: 100%; display: block; }
a { color: var(--ab-rouge); }

.conteneur {
  max-width: var(--ab-largeur-max);
  margin: 0 auto;
  padding: 0 var(--ab-esp-4);
}

/* ---------- En-tête ---------- */
.site-entete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ab-fond);
  border-bottom: 1px solid var(--ab-bordure);
}
/* Grille plutôt que flex : le placement de chaque élément est explicite et déterministe
   à chaque largeur (le flex avec order + marges auto laissait le panier se replier). */
.site-entete__interieur {
  display: grid;
  align-items: center;
  gap: var(--ab-esp-3) var(--ab-esp-4);
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "logo search panier cta";
  padding-top: var(--ab-esp-3);
  padding-bottom: var(--ab-esp-3);
}
.site-entete__logo { grid-area: logo; }
.site-entete__logo img { height: 34px; width: auto; }

/* ---------- Recherche dans l'en-tête ---------- */
.entete-recherche {
  grid-area: search;
  position: relative;
  width: 100%;
  max-width: 480px;
}
.entete-recherche__icone {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ab-texte-secondaire);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.entete-recherche__champ {
  width: 100%;
  font-family: var(--ab-police-texte);
  font-size: var(--ab-taille-sm);
  color: var(--ab-texte);
  background: var(--ab-fond-alt);
  border: 1.5px solid transparent;
  border-radius: var(--ab-rayon-plein);
  padding: 0.6rem 1rem 0.6rem 2.6rem;
  transition: border-color var(--ab-transition), background var(--ab-transition), box-shadow var(--ab-transition);
}
.entete-recherche__champ::placeholder { color: var(--ab-texte-desactive); }
.entete-recherche__champ:focus {
  outline: none;
  background: var(--ab-fond);
  border-color: var(--ab-rouge);
  box-shadow: 0 0 0 3px var(--ab-rouge-fond);
}

/* Bouton WhatsApp : icône au trait + numéro en clair */
.panier-lien { grid-area: panier; }
.site-entete__cta { grid-area: cta; }
.site-entete__cta-icone {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.site-entete__cta-numero { white-space: nowrap; }

/* ---------- Barre de menu (rangée 2 : onglets de catégories) ---------- */
.site-menu {
  border-top: 1px solid var(--ab-bordure);
  background: var(--ab-fond);
}
.site-menu__interieur {
  display: flex;
  align-items: center;
  gap: var(--ab-esp-2);
  padding-top: var(--ab-esp-2);
  padding-bottom: var(--ab-esp-2);
  /* Défilement horizontal quand les onglets dépassent (mobile, beaucoup de catégories) */
  overflow-x: auto;
  scrollbar-width: none; /* Firefox : masque la barre de défilement */
}
.site-menu__interieur::-webkit-scrollbar { display: none; } /* WebKit : idem */
/* Onglets en pastilles : reprend le langage arrondi de la marque, cohérent avec les badges */
.site-menu__onglet {
  flex: 0 0 auto;
  padding: 0.45rem 1rem;
  border-radius: var(--ab-rayon-plein);
  color: var(--ab-texte-secondaire);
  text-decoration: none;
  font-weight: var(--ab-graisse-semi);
  font-size: var(--ab-taille-sm);
  white-space: nowrap;
  transition: color var(--ab-transition), background var(--ab-transition);
}
.site-menu__onglet:hover { background: var(--ab-fond-alt); color: var(--ab-texte); }
.site-menu__onglet--actif { background: var(--ab-rouge); color: #fff; }
.site-menu__onglet--actif:hover { background: var(--ab-rouge-hover); color: #fff; }

/* ---------- Bandeau d'accueil ---------- */
.hero {
  background: var(--ab-rouge-aplat);
  color: #fff;
  padding: var(--ab-esp-12) 0;
  overflow: hidden;
}
.hero__interieur {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ab-esp-8);
}
.hero__illu {
  justify-self: end;
  width: clamp(280px, 40vw, 470px);
}
.hero__illu img {
  width: 100%;
  height: auto;
}
@media (max-width: 700px) {
  .hero__interieur { grid-template-columns: 1fr; }
  .hero__illu { display: none; }
}
.hero h1 {
  font-size: clamp(1.9rem, 5vw, var(--ab-taille-3xl));
  max-width: 22ch;
}
.hero p {
  font-size: var(--ab-taille-md);
  color: #FFD0DB;
  max-width: 55ch;
  margin: var(--ab-esp-3) 0 var(--ab-esp-6);
}
.hero .ab-btn--primaire {
  background: #fff;
  color: var(--ab-rouge-aplat);
}
.hero .ab-btn--primaire:hover { background: #FDECEF; }

/* ---------- Grille catalogue ---------- */
.section-titre {
  font-size: var(--ab-taille-xl);
  margin: var(--ab-esp-12) 0 var(--ab-esp-6);
}
.grille-produits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--ab-esp-6);
  margin-bottom: var(--ab-esp-16);
}
.ab-carte { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
/* La carte n'est plus un lien unique : le lien couvre l'image et le texte,
   le bouton « Ajouter au panier » vit en dehors (un <form> ne peut pas être dans un <a>). */
.ab-carte__lien {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ab-carte__media { position: relative; }
.ab-carte__badge { position: absolute; top: var(--ab-esp-3); left: var(--ab-esp-3); }
.ab-carte__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  border-bottom: 1px solid var(--ab-bordure);
  padding: var(--ab-esp-3);
}
.ab-carte__pied { padding: 0 var(--ab-esp-4) var(--ab-esp-4); }
.ab-carte__corps {
  padding: var(--ab-esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--ab-esp-2);
  background: var(--ab-fond);
  flex: 1;
}
.ab-carte__categorie {
  font-size: var(--ab-taille-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ab-texte-secondaire);
  font-weight: var(--ab-graisse-grasse);
}
.ab-carte__nom { font-size: var(--ab-taille-lg); }
.ab-carte .ab-prix { color: var(--ab-rouge); margin-top: auto; }
.ab-carte .form-ajout { width: 100%; }

/* ---------- Fiche produit ---------- */
.fiche {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--ab-esp-12);
  padding: var(--ab-esp-12) 0 var(--ab-esp-16);
}
@media (max-width: 800px) {
  .fiche { grid-template-columns: 1fr; gap: var(--ab-esp-6); }
}
.fiche__galerie { display: grid; gap: var(--ab-esp-3); }
.fiche__image-principale {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--ab-bordure);
  border-radius: var(--ab-rayon-lg);
  padding: var(--ab-esp-4);
}
.fiche__vignettes { display: flex; gap: var(--ab-esp-3); flex-wrap: wrap; }
.fiche__vignettes img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--ab-bordure);
  border-radius: var(--ab-rayon-md);
  padding: var(--ab-esp-1);
}
.fiche__categorie {
  font-size: var(--ab-taille-sm);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ab-rouge);
  font-weight: var(--ab-graisse-grasse);
}
.fiche h1 { font-size: var(--ab-taille-2xl); margin: var(--ab-esp-2) 0 var(--ab-esp-4); }
.fiche__prix {
  font-family: var(--ab-police-titres);
  font-size: var(--ab-taille-xl);
  color: var(--ab-rouge);
  font-weight: var(--ab-graisse-titre);
  margin-bottom: var(--ab-esp-4);
}
.fiche__description { color: var(--ab-texte-secondaire); max-width: var(--ab-largeur-texte); }
.fiche__actions { display: flex; flex-wrap: wrap; gap: var(--ab-esp-3); margin-top: var(--ab-esp-6); }
.fiche__livraison {
  margin-top: var(--ab-esp-6);
  background: var(--ab-fond-alt);
  border-radius: var(--ab-rayon-md);
  padding: var(--ab-esp-4);
  font-size: var(--ab-taille-sm);
  color: var(--ab-texte-secondaire);
}
.fiche__livraison strong { color: var(--ab-texte); }

/* ---------- Pied de page ---------- */
.site-pied {
  background: var(--ab-fond-inverse);
  color: var(--ab-texte-inverse);
  padding: var(--ab-esp-12) 0 var(--ab-esp-6);
  margin-top: var(--ab-esp-16);
}
.site-pied__interieur {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ab-esp-8);
}
.site-pied__slogan { color: inherit; opacity: .75; max-width: 34ch; }
.site-pied__infos p { margin: 0 0 var(--ab-esp-2); }
.site-pied__infos a { color: inherit; font-weight: var(--ab-graisse-grasse); }
.site-pied__mentions {
  margin-top: var(--ab-esp-8);
  padding-top: var(--ab-esp-4);
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  font-size: var(--ab-taille-sm);
  color: inherit;
  opacity: .7;
}

/* ============================================================
   Animations — sobres, désactivées si l'utilisateur le demande
   ============================================================ */

/* ---------- Entrée de la bannière (au chargement) ---------- */
@keyframes ab-apparition {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ab-apparition-droite {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ab-flotter {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.hero h1                { animation: ab-apparition .6s ease-out both; }
.hero p                 { animation: ab-apparition .6s ease-out .15s both; }
.hero__actions          { animation: ab-apparition .6s ease-out .3s both; }
.hero__illu             { animation: ab-apparition-droite .7s ease-out .25s both; }
.hero__illu img         { animation: ab-flotter 6s ease-in-out 1.2s infinite; will-change: transform; }

/* ---------- Cartes produits : apparition au défilement ---------- */
.js .grille-produits .ab-carte {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .55s ease-out, transform .55s ease-out,
              box-shadow var(--ab-transition);
}
.js .grille-produits .ab-carte.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Survols ---------- */
.ab-carte__image { transition: transform .45s ease; }
.ab-carte:hover .ab-carte__image { transform: scale(1.045); }
.ab-carte:hover .ab-carte__nom { color: var(--ab-rouge); }
.ab-carte__nom { transition: color var(--ab-transition); }

.ab-btn { transition: background var(--ab-transition), transform var(--ab-transition), box-shadow var(--ab-transition); }
.ab-btn--primaire:hover { transform: translateY(-2px); }

/* ---------- En-tête : ombre après défilement ---------- */
.site-entete { transition: box-shadow .25s ease; }
.site-entete.defile { box-shadow: var(--ab-ombre-md); }

/* ---------- Fiche produit : fondu de l'image principale ---------- */
.fiche__image-principale { transition: opacity .28s ease; }
.fiche__image-principale.transition { opacity: 0; }
.fiche__vignettes img { transition: transform var(--ab-transition), border-color var(--ab-transition); cursor: pointer; }
.fiche__vignettes img:hover { transform: translateY(-3px); border-color: var(--ab-rouge); }

/* ---------- Accessibilité : réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero p, .hero__actions, .hero__illu, .hero__illu img { animation: none; }
  .js .grille-produits .ab-carte { opacity: 1; transform: none; transition: none; }
  .ab-carte__image, .ab-btn, .fiche__image-principale, .fiche__vignettes img { transition: none; }
  .ab-carte:hover .ab-carte__image { transform: none; }
}

/* ============================================================
   Tunnel d'achat — panier, commande, suivi
   ============================================================ */

/* ---------- Utilitaires ---------- */
.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.texte-discret { color: var(--ab-texte-secondaire); font-size: var(--ab-taille-sm); }

/* Bouton qui doit ressembler à un lien (retirer, vider le panier) */
.lien-bouton {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--ab-taille-sm);
  color: var(--ab-texte-secondaire);
  text-decoration: underline;
  cursor: pointer;
}
.lien-bouton:hover { color: var(--ab-erreur); }
.lien-bouton:focus-visible { outline: 2px solid var(--ab-rouge); outline-offset: 2px; }

.page-titre { font-size: var(--ab-taille-2xl); margin: var(--ab-esp-8) 0 var(--ab-esp-3); }
.page-chapo {
  color: var(--ab-texte-secondaire);
  max-width: var(--ab-largeur-texte);
  margin: 0 0 var(--ab-esp-8);
}
.zone-alertes:not(:empty) { margin-top: var(--ab-esp-4); }

/* ---------- En-tête : lien panier ---------- */
.panier-lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ab-esp-2);
  padding: var(--ab-esp-2);
  border-radius: var(--ab-rayon-md);
  color: var(--ab-texte);
  text-decoration: none;
  font-weight: var(--ab-graisse-semi);
}
.panier-lien:hover { background: var(--ab-fond-alt); color: var(--ab-rouge); }
.panier-lien:focus-visible { outline: 3px solid var(--ab-rouge); outline-offset: 2px; }
.panier-lien__icone {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.panier-lien__pastille {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--ab-rayon-plein);
  background: var(--ab-rouge);
  color: #fff;
  font-size: var(--ab-taille-xs);
  font-weight: var(--ab-graisse-grasse);
  line-height: 20px;
  text-align: center;
}
.panier-lien__pastille--vide { display: none; }

/* ---------- Fil d'Ariane ---------- */
.fil {
  display: flex;
  align-items: center;
  gap: var(--ab-esp-2);
  padding-top: var(--ab-esp-4);
  font-size: var(--ab-taille-sm);
  color: var(--ab-texte-secondaire);
}
.fil a { color: var(--ab-texte-secondaire); text-decoration: none; }
.fil a:hover { color: var(--ab-rouge); text-decoration: underline; }

/* ---------- Accueil : bandeau et réassurance ---------- */
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--ab-esp-3); }
.hero .ab-btn--secondaire { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.hero .ab-btn--secondaire:hover { box-shadow: inset 0 0 0 2px #fff; }

.reassurance {
  list-style: none;
  margin: var(--ab-esp-12) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ab-esp-6);
}
.reassurance li {
  background: var(--ab-fond-alt);
  border-radius: var(--ab-rayon-lg);
  padding: var(--ab-esp-6);
  font-size: var(--ab-taille-sm);
  color: var(--ab-texte-secondaire);
}
.reassurance strong {
  display: block;
  font-family: var(--ab-police-titres);
  font-size: var(--ab-taille-base);
  color: var(--ab-texte);
  margin-bottom: var(--ab-esp-2);
}

/* ---------- Fiche produit : achat ---------- */
.fiche__infos { min-width: 0; }
.fiche__stock { margin: 0 0 var(--ab-esp-4); }
.fiche__achat {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ab-esp-4);
  margin-top: var(--ab-esp-6);
}
.fiche__achat .ab-btn { flex: 1; min-width: 200px; }

/* La zone livraison est passée en <dl> : deux lignes label / valeur */
.fiche__livraison { display: grid; gap: var(--ab-esp-3); }
.fiche__livraison div { display: grid; grid-template-columns: 92px 1fr; gap: var(--ab-esp-3); }
.fiche__livraison dt { font-weight: var(--ab-graisse-grasse); color: var(--ab-texte); }
.fiche__livraison dd { margin: 0; }
@media (max-width: 520px) {
  .fiche__livraison div { grid-template-columns: 1fr; gap: var(--ab-esp-1); }
}

/* ---------- Compteur de quantité ---------- */
.champ-quantite { display: grid; gap: var(--ab-esp-2); }
.champ-quantite > label {
  font-size: var(--ab-taille-sm);
  font-weight: var(--ab-graisse-semi);
  color: var(--ab-texte-secondaire);
}
.compteur {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--ab-bordure-forte);
  border-radius: var(--ab-rayon-sm);
  overflow: hidden;
  background: var(--ab-fond);
  width: max-content;
}
.compteur:focus-within { border-color: var(--ab-rouge); box-shadow: 0 0 0 3px var(--ab-rouge-fond); }
.compteur__btn {
  width: 42px;
  border: none;
  background: var(--ab-fond-alt);
  color: var(--ab-texte);
  font-size: var(--ab-taille-md);
  font-weight: var(--ab-graisse-grasse);
  cursor: pointer;
  transition: background var(--ab-transition);
}
.compteur__btn:hover { background: var(--ab-bordure); }
.compteur__btn:focus-visible { outline: 2px solid var(--ab-rouge); outline-offset: -2px; }
.compteur__valeur {
  width: 58px;
  border: none;
  background: transparent;
  color: var(--ab-texte);
  font: inherit;
  font-weight: var(--ab-graisse-grasse);
  text-align: center;
  padding: 0.6rem 0;
  -moz-appearance: textfield;
}
.compteur__valeur:focus { outline: none; }
.compteur__valeur::-webkit-outer-spin-button,
.compteur__valeur::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- État vide ---------- */
.etat-vide {
  text-align: center;
  background: var(--ab-fond-alt);
  border-radius: var(--ab-rayon-lg);
  padding: var(--ab-esp-16) var(--ab-esp-6);
  margin-bottom: var(--ab-esp-16);
  color: var(--ab-texte-secondaire);
}
.etat-vide__titre {
  font-family: var(--ab-police-titres);
  font-size: var(--ab-taille-lg);
  color: var(--ab-texte);
  margin: 0 0 var(--ab-esp-2);
}
.etat-vide .ab-btn { margin-top: var(--ab-esp-6); }

/* ---------- Panier ---------- */
.panier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--ab-esp-8);
  align-items: start;
  margin-bottom: var(--ab-esp-16);
}
.panier-ligne {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--ab-esp-4);
  padding: var(--ab-esp-4) 0;
  border-bottom: 1px solid var(--ab-bordure);
}
.panier-ligne__image img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--ab-bordure);
  border-radius: var(--ab-rayon-md);
  padding: var(--ab-esp-1);
}
.panier-ligne__infos { display: grid; gap: var(--ab-esp-2); align-content: start; min-width: 0; }
.panier-ligne__nom {
  font-family: var(--ab-police-titres);
  font-size: var(--ab-taille-base);
  color: var(--ab-texte);
  text-decoration: none;
}
.panier-ligne__nom:hover { color: var(--ab-rouge); }
.panier-ligne__unitaire { font-size: var(--ab-taille-sm); color: var(--ab-texte-secondaire); }
.panier-ligne__droite {
  display: grid;
  gap: var(--ab-esp-2);
  justify-items: end;
  align-content: start;
  text-align: right;
}
.panier-ligne__total { font-weight: var(--ab-graisse-grasse); white-space: nowrap; }

.form-quantite { display: flex; align-items: center; gap: var(--ab-esp-3); flex-wrap: wrap; }
/* Avec JavaScript, le formulaire s'envoie tout seul : le bouton devient inutile */
.js .form-quantite__valider { display: none; }

.panier__vider { margin-top: var(--ab-esp-4); }

/* ---------- Récapitulatif (panier et tunnel) ---------- */
.recap {
  background: var(--ab-fond-alt);
  border: 1px solid var(--ab-bordure);
  border-radius: var(--ab-rayon-lg);
  padding: var(--ab-esp-6);
  position: sticky;
  top: 88px;
}
.recap__titre { font-size: var(--ab-taille-lg); margin-bottom: var(--ab-esp-4); }
.recap__ligne {
  display: flex;
  justify-content: space-between;
  gap: var(--ab-esp-4);
  padding: var(--ab-esp-2) 0;
  font-size: var(--ab-taille-sm);
}
.recap__ligne--discret { color: var(--ab-texte-secondaire); }
.recap__total {
  display: flex;
  justify-content: space-between;
  gap: var(--ab-esp-4);
  margin: var(--ab-esp-3) 0 var(--ab-esp-6);
  padding-top: var(--ab-esp-3);
  border-top: 1px solid var(--ab-bordure-forte);
  font-family: var(--ab-police-titres);
  font-size: var(--ab-taille-md);
  font-weight: var(--ab-graisse-titre);
}
.recap__mention {
  margin: var(--ab-esp-4) 0 0;
  font-size: var(--ab-taille-xs);
  color: var(--ab-texte-secondaire);
  line-height: 1.5;
}
.recap__articles { list-style: none; margin: 0 0 var(--ab-esp-4); padding: 0; display: grid; gap: var(--ab-esp-3); }
.recap__articles li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ab-esp-3);
  font-size: var(--ab-taille-sm);
}
.recap__articles img {
  width: 44px; height: 44px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--ab-bordure);
  border-radius: var(--ab-rayon-sm);
}
.recap__article-nom { display: grid; min-width: 0; }
.recap__article-nom a { color: inherit; text-decoration: none; }
.recap__article-nom a:hover { color: var(--ab-rouge); }
.recap__article-nom small { color: var(--ab-texte-secondaire); font-size: var(--ab-taille-xs); }
.recap__articles--large li { grid-template-columns: 64px minmax(0, 1fr) auto; }
.recap__articles--large img { width: 64px; height: 64px; }

/* ---------- Jauge de livraison offerte ---------- */
.livraison-offerte {
  background: var(--ab-fond);
  border-radius: var(--ab-rayon-md);
  padding: var(--ab-esp-3);
  margin: var(--ab-esp-3) 0;
  font-size: var(--ab-taille-xs);
  color: var(--ab-texte-secondaire);
}
.livraison-offerte p { margin: 0 0 var(--ab-esp-2); }
.livraison-offerte--atteinte { color: var(--ab-succes); font-weight: var(--ab-graisse-semi); }
.jauge {
  height: 6px;
  border-radius: var(--ab-rayon-plein);
  background: var(--ab-bordure);
  overflow: hidden;
}
.jauge__remplissage {
  height: 100%;
  background: var(--ab-rouge);
  border-radius: inherit;
  transition: width .4s ease;
}

/* ---------- Tunnel de commande ---------- */
.tunnel__colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--ab-esp-8);
  align-items: start;
  margin-bottom: var(--ab-esp-16);
}
.tunnel__formulaire { display: grid; gap: var(--ab-esp-6); min-width: 0; }

.bloc {
  border: 1px solid var(--ab-bordure);
  border-radius: var(--ab-rayon-lg);
  padding: var(--ab-esp-6);
  margin: 0;
  display: grid;
  gap: var(--ab-esp-4);
}
.bloc--encadre { background: var(--ab-fond); margin-bottom: var(--ab-esp-6); }
.bloc__titre {
  font-family: var(--ab-police-titres);
  font-size: var(--ab-taille-lg);
  font-weight: var(--ab-graisse-titre);
  padding: 0;
  margin: 0;
}
.bloc__texte { margin: 0; color: var(--ab-texte-secondaire); font-size: var(--ab-taille-sm); }

.champ { display: grid; gap: var(--ab-esp-2); }
.champ > label { font-weight: var(--ab-graisse-semi); font-size: var(--ab-taille-sm); }
.champ__facultatif { font-weight: var(--ab-graisse-normale); color: var(--ab-texte-secondaire); }
.champ__aide { margin: 0; font-size: var(--ab-taille-xs); color: var(--ab-texte-secondaire); }
.champ__erreur { margin: 0; font-size: var(--ab-taille-xs); color: var(--ab-erreur); font-weight: var(--ab-graisse-semi); }
.obligatoire { color: var(--ab-erreur); }

/* Zones de livraison : cartes cliquables plutôt que boutons radio nus */
.choix-zones { display: grid; gap: var(--ab-esp-3); }
.choix-zone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ab-esp-3);
  border: 1.5px solid var(--ab-bordure-forte);
  border-radius: var(--ab-rayon-md);
  padding: var(--ab-esp-4);
  cursor: pointer;
  transition: border-color var(--ab-transition), background var(--ab-transition);
}
.choix-zone:hover { border-color: var(--ab-texte-secondaire); }
.choix-zone:has(input:checked) { border-color: var(--ab-rouge); background: var(--ab-rouge-fond); }
.choix-zone:has(input:focus-visible) { outline: 3px solid var(--ab-rouge); outline-offset: 2px; }
.choix-zone input { accent-color: var(--ab-rouge); width: 18px; height: 18px; }
.choix-zone__corps { display: grid; gap: 2px; min-width: 0; }
.choix-zone__nom { font-weight: var(--ab-graisse-grasse); }
.choix-zone__delai { font-size: var(--ab-taille-xs); color: var(--ab-texte-secondaire); }
.choix-zone__frais { font-weight: var(--ab-graisse-grasse); white-space: nowrap; }
.choix-zone__frais--offerte { color: var(--ab-succes); }

/* ---------- Confirmation et suivi ---------- */
.confirmation {
  text-align: center;
  background: var(--ab-succes-fond);
  border-radius: var(--ab-rayon-lg);
  padding: var(--ab-esp-12) var(--ab-esp-6);
  margin: var(--ab-esp-8) 0;
}
.confirmation__coche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--ab-rayon-plein);
  background: var(--ab-succes);
  color: #fff;
  font-size: 1.75rem;
  margin-bottom: var(--ab-esp-4);
}
.confirmation h1 { font-size: var(--ab-taille-2xl); color: var(--ab-succes); }
.confirmation p { margin: var(--ab-esp-3) auto 0; max-width: 48ch; color: var(--ab-texte); }

.suivi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--ab-esp-8);
  align-items: start;
  margin-bottom: var(--ab-esp-16);
}
.suivi__principal { min-width: 0; }
.suivi__aide { display: grid; gap: 0; }
.suivi__explication { margin: 0; color: var(--ab-texte-secondaire); font-size: var(--ab-taille-sm); }

.commande-entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ab-esp-4);
  font-size: var(--ab-taille-sm);
}
.commande-entete__label {
  display: block;
  font-size: var(--ab-taille-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ab-texte-secondaire);
  font-weight: var(--ab-graisse-grasse);
}
.commande-entete__reference {
  font-family: var(--ab-police-titres);
  font-size: var(--ab-taille-lg);
  color: var(--ab-rouge);
}

/* Progression : une pastille par étape, reliées par un trait */
.etapes {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  counter-reset: etape;
}
.etapes__item {
  flex: 1;
  position: relative;
  text-align: center;
  padding-top: 28px;
  font-size: var(--ab-taille-xs);
  color: var(--ab-texte-desactive);
}
.etapes__item::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ab-bordure);
}
.etapes__item:first-child::before { left: 50%; width: 50%; }
.etapes__item:last-child::before { width: 50%; }
.etapes__puce {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px;
  border-radius: var(--ab-rayon-plein);
  background: var(--ab-fond);
  border: 2px solid var(--ab-bordure-forte);
}
.etapes__item--faite { color: var(--ab-texte-secondaire); }
.etapes__item--faite::before { background: var(--ab-succes); }
.etapes__item--faite .etapes__puce { background: var(--ab-succes); border-color: var(--ab-succes); }
.etapes__item--courante { color: var(--ab-rouge); font-weight: var(--ab-graisse-grasse); }
.etapes__item--courante .etapes__puce {
  background: var(--ab-rouge);
  border-color: var(--ab-rouge);
  box-shadow: 0 0 0 4px var(--ab-rouge-fond);
}

/* ---------- Notification passagère (ajout au panier) ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--ab-esp-8);
  transform: translate(-50%, 120%);
  z-index: 50;
  max-width: min(92vw, 420px);
  display: flex;
  align-items: center;
  gap: var(--ab-esp-3);
  background: var(--ab-noir);
  color: #fff;
  padding: var(--ab-esp-3) var(--ab-esp-4);
  border-radius: var(--ab-rayon-md);
  box-shadow: var(--ab-ombre-lg);
  font-size: var(--ab-taille-sm);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.toast--visible { transform: translate(-50%, 0); opacity: 1; }
.toast a { color: #fff; font-weight: var(--ab-graisse-grasse); white-space: nowrap; }

/* ============================================================
   Adaptations petits écrans
   ============================================================ */
@media (max-width: 900px) {
  .panier, .tunnel__colonnes, .suivi { grid-template-columns: 1fr; }
  .recap { position: static; }
}

/* Tablette : logo + panier + WhatsApp sur la 1re ligne, recherche pleine largeur en dessous */
@media (max-width: 800px) {
  .site-entete__interieur {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "logo panier cta"
      "search search search";
  }
  .entete-recherche { max-width: none; }
}

/* Mobile : logo + panier sur la 1re ligne, recherche puis WhatsApp chacun pleine largeur.
   Le numéro reste donc entièrement lisible au lieu d'être coupé. */
@media (max-width: 640px) {
  .panier-lien__texte { display: none; }
  .site-entete__logo img { height: 30px; }
  .site-entete__interieur {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo   panier"
      "search search"
      "cta    cta";
  }
  .panier-lien { justify-self: end; }
  .site-entete__cta { justify-content: center; }
  /* Les onglets touchent les bords de l'écran pour montrer qu'ils défilent */
  .site-menu__interieur { padding-left: var(--ab-esp-3); padding-right: var(--ab-esp-3); }

  .panier-ligne { grid-template-columns: 72px minmax(0, 1fr); }
  .panier-ligne__image img { width: 72px; height: 72px; }
  /* Le prix passe sous les infos plutôt que de comprimer la colonne */
  .panier-ligne__droite {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .fiche__achat .ab-btn { min-width: 100%; }
  .etapes__item { font-size: 10px; }
  .confirmation { padding: var(--ab-esp-8) var(--ab-esp-4); }
}

/* ---------- Accessibilité : réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .toast, .jauge__remplissage, .compteur__btn, .choix-zone { transition: none; }
}

/* ============================================================
   Catalogue — recherche, filtres, tri, pagination
   ============================================================ */

/* ---------- En-tête de section (accueil) ---------- */
.section-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ab-esp-4);
  flex-wrap: wrap;
}
.lien-section { font-weight: var(--ab-graisse-semi); text-decoration: none; white-space: nowrap; }
.lien-section:hover { text-decoration: underline; }
.section-pied { text-align: center; margin: 0 0 var(--ab-esp-16); }


/* ---------- Barre de résultats et tri ---------- */
.barre-resultats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ab-esp-4);
  flex-wrap: wrap;
  padding-bottom: var(--ab-esp-4);
  margin-bottom: var(--ab-esp-6);
  border-bottom: 1px solid var(--ab-bordure);
}
.barre-resultats__compte {
  margin: 0;
  font-size: var(--ab-taille-sm);
  color: var(--ab-texte-secondaire);
}
.barre-resultats__compte strong { color: var(--ab-texte); }
.lien-effacer { margin-left: var(--ab-esp-3); font-size: var(--ab-taille-sm); }

.form-tri { display: flex; align-items: center; gap: var(--ab-esp-2); }
.form-tri label { font-size: var(--ab-taille-sm); color: var(--ab-texte-secondaire); white-space: nowrap; }
.form-tri select { width: auto; padding: 0.45rem 0.8rem; font-size: var(--ab-taille-sm); }
/* Avec JavaScript, le tri s'applique au changement : le bouton devient inutile */
.js .form-tri__valider { display: none; }

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ab-esp-4);
  margin: var(--ab-esp-8) 0 var(--ab-esp-16);
  flex-wrap: wrap;
}
.pagination__lien {
  font-weight: var(--ab-graisse-semi);
  text-decoration: none;
  padding: 0.55rem 1.1rem;
  border-radius: var(--ab-rayon-md);
  border: 1px solid var(--ab-bordure-forte);
  color: var(--ab-texte);
  white-space: nowrap;
}
.pagination__lien:hover { border-color: var(--ab-rouge); color: var(--ab-rouge); }
.pagination__lien--inactif {
  color: var(--ab-texte-desactive);
  border-color: var(--ab-bordure);
  cursor: default;
}
.pagination__lien--inactif:hover { border-color: var(--ab-bordure); color: var(--ab-texte-desactive); }
.pagination__etat { font-size: var(--ab-taille-sm); color: var(--ab-texte-secondaire); }

@media (prefers-reduced-motion: reduce) {
  .site-menu__onglet, .entete-recherche__champ { transition: none; }
}

/* ============================================================
   Avis clients — étoiles, liste, notation
   ============================================================ */

/* ---------- Étoiles (lecture) ---------- */
.etoiles { display: inline-flex; gap: 1px; letter-spacing: 1px; line-height: 1; }
.etoiles__unite { font-size: 1em; }
.etoiles__pleine { color: #F5A623; }
.etoiles__vide { color: var(--ab-bordure-forte); }

/* ---------- Note sous le titre de la fiche ---------- */
.fiche__note {
  display: inline-flex;
  align-items: center;
  gap: var(--ab-esp-2);
  margin-bottom: var(--ab-esp-4);
  text-decoration: none;
  color: var(--ab-texte-secondaire);
  font-size: var(--ab-taille-sm);
}
.fiche__note:hover { color: var(--ab-texte); }
.fiche__note-texte strong { color: var(--ab-texte); }

/* ---------- Section avis ---------- */
.avis {
  border-top: 1px solid var(--ab-bordure);
  padding-top: var(--ab-esp-8);
  margin-bottom: var(--ab-esp-16);
}
.avis__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ab-esp-4);
  flex-wrap: wrap;
}
.avis .section-titre { margin: 0; }
.avis__resume { display: flex; align-items: center; gap: var(--ab-esp-2); font-size: var(--ab-taille-md); }

.avis__liste {
  list-style: none;
  margin: var(--ab-esp-8) 0;
  padding: 0;
  display: grid;
  gap: var(--ab-esp-6);
}
.avis-carte {
  border: 1px solid var(--ab-bordure);
  border-radius: var(--ab-rayon-lg);
  padding: var(--ab-esp-6);
  background: var(--ab-fond-alt);
}
.avis-carte__tete { display: flex; align-items: center; gap: var(--ab-esp-3); margin-bottom: var(--ab-esp-2); }
.avis-carte__auteur { font-family: var(--ab-police-titres); }
.avis-carte__texte { margin: 0; color: var(--ab-texte); }

/* ---------- Formulaire d'avis ---------- */
.avis__formulaire {
  border: 1px solid var(--ab-bordure);
  border-radius: var(--ab-rayon-lg);
  padding: var(--ab-esp-6);
  max-width: 560px;
}
.avis__formulaire h3 { font-size: var(--ab-taille-lg); margin: 0 0 var(--ab-esp-1); }
.form-avis { display: grid; gap: var(--ab-esp-4); margin-top: var(--ab-esp-4); }

/* Notation cliquable : les étoiles sont dans l'ordre inverse (5→1) pour que
   le survol d'une étoile allume aussi celles à sa gauche, via ~ en CSS. */
.note-choix { border: none; padding: 0; margin: 0; }
.note-choix legend {
  padding: 0;
  font-size: var(--ab-taille-sm);
  font-weight: var(--ab-graisse-semi);
  margin-bottom: var(--ab-esp-2);
}
.note-choix__etoiles { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.note-choix__etoiles input { position: absolute; opacity: 0; width: 0; height: 0; }
.note-choix__etoiles label {
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ab-bordure-forte);
  cursor: pointer;
  padding: 0 2px;
  transition: color var(--ab-transition), transform var(--ab-transition);
}
.note-choix__etoiles label:hover { transform: scale(1.15); }
/* Étoile cochée + toutes celles à sa gauche (frères suivants en ordre inversé) */
.note-choix__etoiles input:checked ~ label,
.note-choix__etoiles label:hover,
.note-choix__etoiles label:hover ~ label { color: #F5A623; }
.note-choix__etoiles input:focus-visible + label { outline: 2px solid var(--ab-rouge); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .note-choix__etoiles label { transition: none; }
  .note-choix__etoiles label:hover { transform: none; }
}