/* =====================================================================
   GABARIT « PAGE CATÉGORIE » — feuille partagée (commun/categorie.css)
   ---------------------------------------------------------------------
   Sert les DEUX hubs du catalogue : /cartes-nfc-qr/ et /plaques-nfc-qr/.
   Rien de propre à un support ni à un réseau ici — ni nom, ni prix, ni
   image, ni lien : tout cela vit dans le HTML de chaque hub. Cette
   feuille ne décrit que la composition.

   À charger APRÈS ../styles.css (elle en surcharge des composants :
   .kktop, .kk-foot__col, .kk-btn).

   Parti pris : un hub n'est pas une fiche de vente, c'est un plan de
   gamme. On ne vend pas six fois, on montre six fois le même produit et
   on laisse choisir. Donc : un hero court qui pose le prix unique et la
   dégressivité une bonne fois, puis une grille régulière de six cartes
   identiques au pixel — même cadre, même hauteur, même bouton. Le choix
   se fait sur la photo, pas sur la copie.

   Trois plans, comme sur la fiche produit : le plan studio (#F1F5FB, le
   fond cuit des packshots) pour l'en-tête et le hero, #FFF pour la
   grille, --surface-sunken pour la passerelle. Aucune couture dégradée.
   ===================================================================== */

/* Plan studio : couleur EXACTE du fond cuit des fichiers produits/*.webp.
   Les cadres des cartes portent ce fond, donc le packshot y affleure. */
body{--cat-plan:#F1F5FB}

/* Safari : jamais de débordement horizontal, même d'un pixel d'ombre. */
html,body{overflow-x:clip}

/* ---- 1 · En-tête ---------------------------------------------------
   La pilule de nav vit dans .kktop (son CSS y est scopé) mais sans le
   contrat « hauteur d'un viewport » du hero de l'accueil : ici le plan
   continue simplement dans le hero. --------------------------------- */
.cat-top.kktop{display:block;min-height:0;height:auto;background:var(--cat-plan)}

/* Panier dans la pilule (.kk-navcart) + entrée « Mon panier » du drawer
   mobile (.kk-mob__cart) : bloc CANON, défini une seule fois dans styles.css,
   chargé par toutes les pages. Seule l'addition propre aux hubs vit ici :
   l'accusé de réception de l'ajout — la pastille tressaille une fois. */
.kktop .kk-navcart.is-bump{animation:cat-bump .42s var(--kk-e)}
@keyframes cat-bump{0%{transform:scale(1)}38%{transform:scale(1.16)}100%{transform:scale(1)}}

/* ---- 2 · HERO ------------------------------------------------------
   Court : le fil d'Ariane, le titre, une phrase, et les faits de gamme.
   Rien à décider ici — la décision se prend dans la grille. --------- */
.cat-hero{background:var(--cat-plan);padding-bottom:clamp(22px,2.6vw,34px)}

.cat-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:2px 0 clamp(14px,1.8vw,22px);font-size:13px;color:var(--text-muted)}
.cat-crumb a{color:var(--text-muted);border-bottom:1px solid transparent}
.cat-crumb a:hover{color:var(--brand);border-bottom-color:currentColor}
.cat-crumb__sep{width:10px;height:10px;flex:none;fill:var(--ku-blue-200)}
.cat-crumb__here{color:var(--text);font-weight:600}

.cat-hero__copy{max-width:34em}
.cat-h1{font-weight:700;font-size:clamp(32px,4.2vw,54px);line-height:1.05;
  letter-spacing:-.02em;color:var(--text);margin:0;text-wrap:balance}
.cat-lede{margin:14px 0 0;font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:var(--text-soft)}
.cat-lede b{color:var(--text);font-weight:700}

/* Faits de gamme : le prix unique, le nombre de réseaux, l'absence
   d'abonnement. Hors de la colonne de lecture — les trois tiennent sur une
   ligne et donnent au hero l'assise du rail au lieu d'un bloc en escalier. */
.cat-facts{display:flex;flex-wrap:wrap;gap:8px 30px;margin:20px 0 0}
.cat-facts li{display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--text-soft)}
.cat-facts .ku-hex{width:12px;height:12px;flex:none;fill:var(--brand)}
.cat-facts b{color:var(--text);font-weight:700}

/* ---- 3 · BANDE DÉGRESSIVITÉ ---------------------------------------
   Carte blanche posée sur le plan, pleine largeur du rail. La remise se
   calcule LIGNE PAR LIGNE (même support + même réseau) : c'est écrit tel
   quel, aucune promesse de cumul. ---------------------------------- */
.cat-band{background:var(--cat-plan);padding-bottom:clamp(26px,3.2vw,42px)}
.cat-degress{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--el-8);padding:14px clamp(16px,1.8vw,22px);
  display:flex;align-items:center;gap:10px clamp(16px,2vw,26px);flex-wrap:wrap}
.cat-degress__lab{display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:700;color:var(--brand)}
.cat-degress__lab .ku-hex{width:13px;height:13px;fill:var(--brand)}
.cat-degress__ticks{display:flex;align-items:center;gap:9px 18px;flex-wrap:wrap}
.cat-degress__tick{display:inline-flex;align-items:baseline;gap:7px;
  padding:6px 13px;border-radius:var(--r-pill);background:var(--brand-soft);
  font-size:13.5px;color:var(--text-soft);line-height:1.2}
.cat-degress__tick b{font-size:15px;font-weight:800;color:var(--text)}
.cat-degress__note{margin-left:auto;font-size:13px;color:var(--text-muted);line-height:1.4}

/* ---- 4 · GRILLE DES SIX ---------------------------------------------
   Six cartes rigoureusement identiques : cadre dessiné au même rapport,
   nom, destination, prix, bouton. Toute la carte est cliquable via le
   lien du titre étiré en ::after (un seul lien pour les lecteurs
   d'écran) ; le bouton d'ajout repasse au-dessus. --------------- */
.cat-grid-sect{background:var(--surface);padding:clamp(30px,4vw,54px) 0 clamp(26px,3.2vw,44px)}
.cat-secthead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px 28px;flex-wrap:wrap;margin:0 0 clamp(18px,2vw,26px)}
.cat-secthead h2{font-weight:700;font-size:clamp(24px,2.5vw,32px);line-height:1.15;
  letter-spacing:-.01em;color:var(--text);margin:0}
.cat-secthead h2 .hl{color:var(--brand)}
.cat-secthead p{font-size:14.5px;color:var(--text-muted);margin:0;max-width:32em}

.cat-grid{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:repeat(3,minmax(0,1fr));
  list-style:none;margin:0;padding:0}

.cat-card{position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);
  padding:14px 14px 16px;
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
.cat-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--el-16)}

/* Cadre dessiné assumé : filet + radius, fond studio à l'intérieur. Le
   packshot est agrandi de 10 % dans une boîte qui le rogne — les marges
   mortes du fichier partent et le produit occupe vraiment sa vignette.
   max-width/max-height:none est OBLIGATOIRE : sans lui le reset global
   styles.css `img{max-width:100%}` plafonne width:120% à 100 %, left:-10%
   reste appliqué et la photo part de 10 % vers la gauche. Le zoom doit
   déborder symétriquement des 4 côtés, sinon il décentre. */
/* Le cadre est au ratio 4/5 et non à une hauteur figée : avec un clamp de
   hauteur, la largeur venait de la grille et le cadre devenait PAYSAGE
   (297 × 236 à 1440 px) — un packshot portrait 2/3 n'y remplissait que 46 %
   de la largeur et flottait entre deux aplats de plan. 4/5 est exactement le
   ratio sous lequel le zoom de 120 % cesse de rogner latéralement : la carte
   remplit le cadre, rien n'est coupé. */
.cat-card__frame{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--cat-plan);height:auto;aspect-ratio:4/5}
.cat-card__frame img{position:absolute;inset:-10%;width:120%;height:120%;
  max-width:none;max-height:none;object-fit:contain;
  transition:transform .35s var(--ease)}
/* Le zoom est calibré sur les fichiers CARTE (15,9 % de marge morte à
   gauche). Les fichiers PLAQUE n'en ont que 1 % : le même rognage tranchait
   le bord gauche du produit. Une plaque remplit déjà 86 % de son fichier. */
.cat-card__frame img[src*="/plaque-"]{inset:0;width:100%;height:100%}
.cat-card:hover .cat-card__frame img{transform:scale(1.045)}

.cat-card__name{margin:14px 2px 0;font-size:16.5px;font-weight:700;line-height:1.25;color:var(--text)}
.cat-card__link{color:inherit}
/* Zone cliquable = la carte entière. Le radius est repris pour que
   l'anneau de focus épouse la carte au lieu de la déborder en angles. */
.cat-card__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-2xl)}
.cat-card__link:focus-visible{outline:none}
.cat-card__link:focus-visible::after{outline:2px solid var(--focus-ring);outline-offset:3px}

/* Ce vers quoi la carte envoie : l'icône du réseau, en bleu de marque. */
.cat-card__dest{display:flex;align-items:center;gap:8px;margin:7px 2px 0;
  font-size:13px;color:var(--text-muted);line-height:1.35}
.cat-card__ic{width:15px;height:15px;flex:none;fill:var(--brand)}
.cat-card__ic--line{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.cat-card__price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:auto 2px 0;padding-top:12px}
.cat-card__price b{font-size:21px;font-weight:800;color:var(--text);line-height:1;letter-spacing:-.01em}
.cat-card__price span{font-size:12.5px;font-weight:600;color:var(--text-muted)}

.cat-card__add{
  position:relative;z-index:2;margin:12px 0 0;width:100%;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:var(--r-pill);padding:11px 18px;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:700;
  color:var(--brand);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ku-blue-200);
  transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}
.cat-card__add:hover{background:var(--brand-soft);box-shadow:inset 0 0 0 1.5px var(--brand)}
.cat-card__add:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.cat-card__add svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Feedback bref : le bouton se remplit et dit ce qui vient de se passer,
   1,4 s, puis revient. Le panier ne s'ouvre pas — on reste dans la grille. */
.cat-card__add.is-added{background:var(--brand);color:#fff;box-shadow:none}
.cat-add__lab,.cat-add__done{display:inline-flex;align-items:center;gap:8px}
.cat-add__done{display:none}
.cat-card__add.is-added .cat-add__lab{display:none}
.cat-card__add.is-added .cat-add__done{display:inline-flex}

/* ---- 5 · Renvoi discret au configurateur ---------------------------
   Secondaire, sous la grille, séparé par un filet : c'est une option, pas
   une deuxième porte d'entrée. ------------------------------------- */
.cat-aside{margin:clamp(22px,2.6vw,32px) 0 0;padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--border);font-size:14px;line-height:1.5;
  color:var(--text-muted);text-align:center;text-wrap:balance}
.cat-aside .ku-hex{width:12px;height:12px;fill:var(--ku-blue-300);vertical-align:-1px;margin-right:6px}
/* Lien en flux (et non en boîte flex) : la flèche suit la dernière ligne
   même quand le libellé passe sur deux lignes. Le padding vertical porte la
   cible tactile à 44px sans casser l'enchaînement typographique. */
.cat-aside a{color:var(--brand);font-weight:700;padding-block:13px;
  border-bottom:1px solid transparent}
.cat-aside a:hover{border-bottom-color:currentColor}
.cat-aside a svg{display:inline-block;width:16px;height:16px;margin-left:7px;vertical-align:-2px;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- 6 · PASSERELLE vers l'autre support ---------------------------
   Bloc inséré : trois vignettes de l'autre support, la phrase qui dit ce
   qui change, le lien. ---------------------------------------------- */
.cat-bridge{background:var(--surface);padding:0 0 clamp(38px,5vw,64px)}
.cat-bridge__band{background:var(--surface-sunken);border-radius:var(--r-2xl);
  padding:clamp(20px,2.4vw,30px);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px clamp(20px,2.6vw,34px);align-items:center}
.cat-bridge__strip{display:flex;gap:9px}
.cat-bridge__thumb{position:relative;overflow:hidden;flex:none;
  width:clamp(56px,5.4vw,70px);aspect-ratio:2/3;border-radius:var(--r-md);
  background:var(--cat-plan);border:1px solid var(--border)}
/* max-width/max-height:none : voir .cat-card__frame img — sans eux le reset
   global rogne la surlargeur et le zoom devient un décalage à gauche. */
.cat-bridge__thumb img{position:absolute;inset:-12%;width:124%;height:124%;
  max-width:none;max-height:none;object-fit:contain}
/* Voir .cat-card__frame img : pas de marge morte à rogner sur une plaque. */
.cat-bridge__thumb img[src*="/plaque-"]{inset:0;width:100%;height:100%}
.cat-bridge__txt h2{font-weight:700;font-size:clamp(20px,2.1vw,26px);line-height:1.2;
  color:var(--text);margin:0}
.cat-bridge__txt h2 .hl{color:var(--brand)}
.cat-bridge__txt p{margin:8px 0 0;font-size:14.5px;line-height:1.45;color:var(--text-soft);max-width:38em}
.cat-bridge__cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 24px;border-radius:var(--r-pill);
  background:var(--brand);color:#fff;font-size:15px;font-weight:700;
  transition:background .2s var(--ease),transform .2s var(--ease)}
.cat-bridge__cta:hover{background:var(--brand-hover);transform:translateY(-1px)}
.cat-bridge__cta:focus-visible{outline:2px solid #fff;outline-offset:-4px;
  box-shadow:0 0 0 3px var(--brand),0 0 0 6px rgba(44,75,255,.3)}
.cat-bridge__cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- 7 · Pied de page : la catégorie courante reste un lien (jamais de
     lien mort) mais se signale, comme sur la fiche produit. ---- */
.kk-foot__col a[aria-current="page"]{font-weight:700;position:relative}
.kk-foot__col a[aria-current="page"]::before{
  content:"";position:absolute;left:7px;top:50%;transform:translateY(-50%);
  width:2px;height:1em;border-radius:1px;background:var(--link-on-dark);
}
.kk-foot__col a[aria-current="page"]:hover{padding-left:20px;color:#fff}

/* ---- 8 · Sacrifices : uniquement des bascules de composition ------- */
@media (max-width:1000px){
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-degress__note{margin-left:0;width:100%}
}
@media (max-width:880px){
  .cat-bridge__band{grid-template-columns:1fr;justify-items:start}
  .cat-bridge__cta{width:100%}
}
@media (max-width:560px){
  /* Sacrifice de composition, pas de contenu : sous 560 px, deux colonnes
     réduisent le packshot à une vignette et coupent « Ajouter au panier » en
     deux. La carte bascule donc en ligne — photo à gauche au format 2:3,
     texte et bouton à droite —, le produit retrouve sa taille et le pouce
     descend une seule colonne. */
  .cat-hero__copy{max-width:none}
  .cat-grid{grid-template-columns:1fr;gap:12px}
  .cat-card{
    display:grid;grid-template-columns:104px minmax(0,1fr);
    grid-template-rows:auto auto 1fr auto;
    grid-template-areas:"fig name" "fig dest" "fig price" "fig add";
    gap:0 14px;padding:12px}
  .cat-card:hover{transform:none}
  .cat-card__frame{grid-area:fig;align-self:start;height:auto;aspect-ratio:2/3}
  .cat-card__name{grid-area:name;margin:0;font-size:15.5px}
  .cat-card__dest{grid-area:dest;margin-left:0;margin-right:0;font-size:12.5px}
  .cat-card__price{grid-area:price;margin:auto 0 0;padding-top:10px}
  .cat-card__price b{font-size:20px}
  .cat-card__add{grid-area:add;width:auto;justify-self:start;margin-top:10px;padding:11px 20px}
  .cat-degress{gap:10px 14px}
  .cat-bridge__thumb{width:58px}
}
@media (max-width:420px){
  /* La colonne texte doit tenir « Ajouter au panier » sur une ligne :
     la vignette cède les pixels qui manquent. */
  .cat-card{grid-template-columns:88px minmax(0,1fr);gap:0 12px;padding:11px}
  .cat-card__add{font-size:13.5px;padding:11px 14px;gap:7px}
  .cat-card__add svg{width:16px;height:16px}
}
@media (prefers-reduced-motion:reduce){
  .cat-card,.cat-card__frame img,.cat-card__add,.cat-bridge__cta,
  .kktop .kk-navcart,.kk-navcart__n{transition:none}
  .cat-card:hover{transform:none}
  .cat-card:hover .cat-card__frame img{transform:none}
  .cat-bridge__cta:hover{transform:none}
  .kktop .kk-navcart.is-bump{animation:none}
}