/* Socle : le gabarit suppose ces reglages, portes par son element racine. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Jost', sans-serif; color: #2A1B10; background: #F3E7CE; }
img { max-width: 100%; }
a { text-decoration: none; }
button { font-family: inherit; }

/* Le gabarit rend les deux variantes d'en-tete ; c'est la CSS qui tranche,
   pour que la page reste valable sans JavaScript. */
@media (min-width: 861px) { .am-mobile { display: none !important; } }
@media (max-width: 860px)  { .am-desktop { display: none !important; } }


  *{box-sizing:border-box;}
  body{margin:0;}
  ::selection{background:#C9A24B;color:#1C1310;}
  @keyframes amFade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes amReveal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
  @keyframes amMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes amSlideX{from{transform:translateX(100%)}to{transform:translateX(0)}}
  @keyframes amPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes amBarUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
  @keyframes amGlow{0%,100%{opacity:.5}50%{opacity:1}}
  @supports (animation-timeline: view()){
    [data-reveal]{opacity:0;animation:amReveal .9s ease both;animation-timeline:view();animation-range:entry 0% cover 30%;}
  }
  [data-zoom]{transition:transform .8s cubic-bezier(.2,.6,.2,1);}
  [data-card]:hover [data-zoom]{transform:scale(1.07);}
  [data-card] [data-qv]{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease;}
  [data-card]:hover [data-qv]{opacity:1;transform:none;}
  a{color:#8A6D3B;} a:hover{color:#C9A24B;}
/* ═══════════════════════════════════════════════════════════════════════════
   Amalhana — habillage des éléments ajoutés par le script : tiroir du panier,
   messages, jauge de livraison offerte.

   La palette est celle du design : or #C9A24B, encre #1C1310, parchemin
   #F3E7CE, crème #EAD9B8.
   ═══════════════════════════════════════════════════════════════════════════ */

.am-voile {
  position: fixed;
  inset: 0;
  background: rgba(21, 14, 10, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s cubic-bezier(.2, .6, .2, 1);
  z-index: 90;
}
.am-voile.est-ouvert { opacity: 1; pointer-events: auto; }

.am-tiroir {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 92vw);
  background: #F3E7CE;
  color: #2A1B10;
  border-left: 1px solid #DAC5A0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform .4s cubic-bezier(.2, .6, .2, 1);
  font-family: 'Jost', sans-serif;
}
.am-tiroir.est-ouvert { transform: translateX(0); }

.am-tiroir__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid #DAC5A0;
}
.am-tiroir__tete h2 {
  font-family: 'Amiri', serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: #1C1310;
}
.am-tiroir__fermer {
  background: none; border: 0; cursor: pointer;
  font-size: 28px; line-height: 1; color: #8A7350; padding: 2px 8px;
}
.am-tiroir__fermer:hover { color: #1C1310; }

.am-tiroir__corps { flex: 1; overflow-y: auto; padding: 16px 22px; }
.am-tiroir__pied {
  border-top: 1px solid #DAC5A0;
  padding: 18px 22px 22px;
  background: #ECDDBE;
}

.am-ligne {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(218, 197, 160, .6);
}
.am-ligne:last-child { border-bottom: 0; }

/* La vignette du panier.
   Une ligne sans image ne dit pas ce qu'on achète — surtout sur une boutique où un même
   modèle existe en seize couleurs, et au moment précis où la cliente veut en être sûre.
   Taille fixe : les photos fournisseur ont des proportions très variables, et une ligne
   qui change de hauteur selon l'article rend la liste illisible. */
.am-ligne__photo {
  flex: none;
  width: 64px;
  height: 80px;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(218, 197, 160, .8);
  background: #F0E6D6;
}
.am-ligne__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* La colonne du milieu prend la place restante, le prix reste à droite. */
.am-ligne > div:not(.am-ligne__prix) { flex: 1 1 auto; min-width: 0; }
.am-ligne__nom {
  font-family: 'Amiri', serif;
  font-size: 17px;
  line-height: 1.25;
  color: #1C1310;
  display: block;
  margin-bottom: 8px;
}
.am-ligne__nom:hover { color: #8A6D3B; }
.am-ligne__prix {
  font-family: 'Amiri', serif;
  font-size: 17px;
  color: #1C1310;
  white-space: nowrap;
}

.am-qte {
  display: inline-flex;
  align-items: center;
  border: 1px solid #DAC5A0;
  border-radius: 999px;
}
.am-qte button {
  background: none; border: 0; cursor: pointer;
  width: 30px; height: 30px; font-size: 16px; color: #2A1B10;
}
.am-qte button:hover { color: #C9A24B; }
.am-qte span {
  min-width: 26px; text-align: center; font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.am-retirer {
  display: block;
  background: none; border: 0; padding: 6px 0 0;
  color: #8A7350; font-size: 12px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.am-retirer:hover { color: #8E2C2C; }

/* La jauge dit exactement ce qui reste à atteindre : le seuil est réel. */
.am-port { font-size: 13px; margin: 0 0 8px; color: #2A1B10; }
.am-port--ok { color: #3B5D48; }
.am-jauge {
  height: 3px;
  background: rgba(138, 109, 59, .25);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.am-jauge i { display: block; height: 100%; background: #C9A24B; }

.am-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.am-total b { font-family: 'Amiri', serif; font-size: 22px; color: #1C1310; }
.am-note { font-size: 12px; color: #8A7350; margin: 0 0 14px; }

.am-bouton {
  width: 100%;
  background: linear-gradient(180deg, #E4C77E, #C9A24B);
  color: #1C1310;
  border: 0;
  border-radius: 14px;
  padding: 15px 20px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.am-bouton:hover { filter: brightness(1.06); }
.am-bouton[disabled] { opacity: .55; cursor: not-allowed; }

.am-vide { text-align: center; padding: 52px 12px; color: #8A7350; }
.am-vide strong {
  display: block; font-family: 'Amiri', serif; font-size: 21px;
  color: #1C1310; margin-bottom: 8px;
}

.am-message {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(14px);
  background: #1C1310;
  color: #EAD9B8;
  border: 1px solid rgba(201, 162, 75, .45);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 13.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 120;
}
.am-message.est-visible { opacity: 1; transform: translateX(-50%); }

/* Une lueur chaude derriere la silhouette : sur un fond d'encre, un objet
   clair sans halo parait colle. Le degrade est pose sous la toile 3D. */
[data-visuel3d] { position: relative; }
[data-visuel3d]::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  width: 86%;
  height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
              rgba(201, 162, 75, 0.20) 0%,
              rgba(201, 162, 75, 0.07) 42%,
              rgba(201, 162, 75, 0) 72%);
  pointer-events: none;
}


/* Produit en rupture : le bouton reste lisible mais ne promet rien. */
.est-rupture,
.est-rupture:hover {
  background: #ece9e4;
  color: #6b6459;
  border-color: #d8d3cb;
  cursor: not-allowed;
  box-shadow: none;
  letter-spacing: .02em;
}