/* =========================================================
   LOVE DOG'S · NUTRITION EN 3 GAMMES
   Économique · Premium · Professionnelle
   Chargé après style.css : reprend ses couleurs et ses réglages.
   ========================================================= */

.nt{ margin-bottom:clamp(30px,4vw,44px); }

/* ---------- Les 3 gammes côte à côte (ordinateur) ---------- */
.nt-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px); align-items:stretch; }

.nt-range{ position:relative; display:flex; flex-direction:column; min-width:0; padding:clamp(20px,2.1vw,26px); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-s); transition:box-shadow .3s var(--ease), border-color .3s; }
.nt-range:hover{ box-shadow:var(--sh-m); }
.nt-premium{ border-color:var(--gold-2); background:linear-gradient(180deg,#fffaf0 0%,#fff 46%); box-shadow:0 18px 40px -22px rgba(189,143,46,.5); }
.nt-premium:hover{ box-shadow:0 26px 52px -24px rgba(189,143,46,.6); }

/* titres, textes, visuels et produits alignés d'une carte à l'autre */
@supports (grid-template-rows:subgrid){
  @media (min-width:1025px){
    .nt-grid{ grid-template-rows:auto auto auto 1fr; }
    .nt-range{ display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; }
  }
}

/* en-tête de gamme */
.nt-head{ display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.nt-ico{ display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:13px; background:linear-gradient(150deg,#fbf1dc,#f1dfb6); color:var(--gold-deep); }
.nt-ico svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nt-premium .nt-ico{ background:var(--grad-gold); color:#2a1f08; box-shadow:var(--sh-gold); }
.nt-premium .nt-ico svg{ fill:currentColor; stroke:none; }
.nt-pro .nt-ico{ background:var(--ink); color:var(--gold-3); }
.nt-title{ font-size:clamp(19px,1.9vw,22px); font-weight:800; letter-spacing:-.02em; }
.nt-promise{ margin-top:3px; font-size:14px; line-height:1.35; font-weight:500; color:var(--gold-deep); }
.nt-for{ margin-bottom:18px; font-size:14px; line-height:1.55; color:var(--ink-2); }
.nt-for b{ font-family:"Sora",sans-serif; font-weight:600; color:var(--ink); }

/* vitrine des sacs */
.nt-stage{ position:relative; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; gap:6px; height:230px; padding:16px 14px 14px; margin-bottom:6px; border-radius:18px; background:linear-gradient(180deg,#fbfaf7,#f3f1ea); border:1px solid var(--line); }
.nt-stage::after{ content:""; position:absolute; left:16%; right:16%; bottom:9px; height:16px; border-radius:50%; background:radial-gradient(closest-side,rgba(60,45,20,.16),transparent); pointer-events:none; }
.nt-stage img{ position:relative; z-index:1; height:100%; width:auto; max-width:49%; object-fit:contain; object-position:bottom; filter:drop-shadow(0 12px 14px rgba(40,30,15,.2)); transition:transform .4s var(--ease); }
.nt-stage img.is-small{ height:80%; }
.nt-range:hover .nt-stage img{ transform:translateY(-4px) rotate(-1.2deg); }
.nt-range:hover .nt-stage img + img{ transform:translateY(-4px) rotate(1.2deg); }

/* produits */
.nt-items{ list-style:none; margin:0; padding:0; }
.nt-item{ padding-top:16px; }
.nt-item + .nt-item{ margin-top:16px; border-top:1px solid var(--line); }
.nt-item-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.nt-name{ margin:0; font-family:"Sora",sans-serif; font-weight:700; font-size:16px; line-height:1.3; letter-spacing:-.01em; color:var(--ink); }
.nt-price{ flex:none; font-family:"Sora",sans-serif; font-weight:800; font-size:24px; line-height:1; letter-spacing:-.02em; color:var(--gold-deep); white-space:nowrap; font-variant-numeric:tabular-nums; }
.nt-price.is-ask{ font-size:13px; font-weight:600; letter-spacing:0; color:var(--ink-2); }
.nt-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:5px; font-size:13px; font-weight:500; color:var(--ink-3); }
.nt-desc{ margin-top:7px; font-size:14px; line-height:1.5; color:var(--ink-2); }
.nt-act{ display:flex; justify-content:flex-end; margin-top:12px; }
.nt-badge{ display:inline-flex; align-items:center; gap:6px; font-family:"Sora",sans-serif; font-weight:600; font-size:11.5px; line-height:1.4; color:var(--gold-deep); background:rgba(189,143,46,.1); border:1px solid var(--line-2); padding:2px 10px; border-radius:var(--pill); }
.nt-badge svg{ width:12px; height:12px; fill:currentColor; stroke:none; }
.nt-order{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--pill); font-family:"Sora",sans-serif; font-weight:600; font-size:14px; color:var(--ink); background:var(--surface); border:1.5px solid var(--line-2); box-shadow:var(--sh-s); transition:transform .22s var(--ease), border-color .25s, color .25s, box-shadow .25s; }
.nt-order .ico{ width:17px; height:17px; color:#25d366; }
.nt-order:hover{ transform:translateY(-2px); border-color:var(--gold-2); color:var(--gold-deep); box-shadow:var(--sh-m); }
.nt-order:active{ transform:translateY(1px) scale(.98); }

/* ---------- Choix de la gamme (mobile et tablette) ---------- */
.nt-switch{ display:none; }
.nt-switch-btn{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:1px; padding:10px 6px; border:0; border-radius:15px; background:transparent; font:inherit; color:var(--ink-2); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .25s, box-shadow .25s; }
.nt-switch-btn b{ font-family:"Sora",sans-serif; font-weight:700; font-size:14.5px; line-height:1.2; color:var(--ink); }
.nt-switch-btn small{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; line-height:1.25; color:var(--ink-3); }
.nt-switch-btn:hover b{ color:var(--gold-deep); }
.nt-switch-btn.is-on{ background:var(--grad-gold); box-shadow:0 8px 18px -10px rgba(189,143,46,.85); }
.nt-switch-btn.is-on b, .nt-switch-btn.is-on small{ color:#2a1f08; }

@media (max-width:1024px){
  .nt-grid{ grid-template-columns:minmax(0,1fr); max-width:620px; margin-inline:auto; }
  .nt.js .nt-switch{ display:flex; gap:4px; max-width:620px; margin:0 auto 16px; padding:5px; border-radius:20px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-s); }
  .nt.js .nt-range{ display:none; }
  .nt.js .nt-range.is-on{ display:flex; animation:ntIn .35s var(--ease); }
}
/* tablette : visuel à gauche, produits à droite */
@media (min-width:641px) and (max-width:1024px){
  .nt-grid, .nt.js .nt-switch{ max-width:760px; }
  .nt-range{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:auto auto 1fr; grid-template-areas:"head head" "stage for" "stage items"; column-gap:26px; align-items:start; }
  .nt.js .nt-range.is-on{ display:grid; }
  .nt-head{ grid-area:head; }
  .nt-for{ grid-area:for; margin-bottom:4px; }
  .nt-stage{ grid-area:stage; height:270px; margin-bottom:0; }
  .nt-items{ grid-area:items; }
}
@keyframes ntIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

@media (max-width:480px){
  .nt-range{ padding:18px 16px 20px; }
  .nt-stage{ height:210px; }
  .nt-title{ font-size:20px; }
  .nt-price{ font-size:22px; }
  .nt-order{ padding:11px 18px; }
  /* correctif : trait vertical parasite sur le 4e avantage en mobile */
  .perks li:nth-child(4){ border-left:none; }
}