/* Brin de Stef, direction « Didone chorégraphiée ».
   OUTILS DE NAVIGATION : compte, recherche, panier.
   Feuille commune, chargée EN DERNIER par les onze pages, de sorte que ses
   règles l'emportent sur .cart-btn / .cart-count restées dans
   boutique-didone-v1.css sans avoir à toucher ce fichier.

   Les trois icônes sont dessinées pour ce site : tracé à 0,9 px non mis à
   l'échelle, même hairline que les filets du site, angles vifs, aucun coin
   arrondi. La pastille du panier est un RECTANGLE garance, pas une pastille
   ronde : le site n'a pas un seul rayon de coin, l'accent non plus.

   Accroches à ne jamais renommer : #cartBtn, #cartCount (+ .bump ajoutée
   300 ms par cart.js), #searchBtn (main.js). */

/* Les outils s'alignent sur l'axe optique, pas sur la ligne de base : une
   icône n'a pas de ligne de base, elle tomberait sous le filet. */
.nav { align-items: center; }
.nav ul { align-items: center; }

.tools {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.2vw, 12px);
}

/* Détail signature repris du reste du site : un filet vertical isole les
   outils du texte de navigation. */
.tools::before {
  content: "";
  inline-size: 1px;
  block-size: 15px;
  background: var(--hairline);
  margin-inline-end: clamp(6px, 1.4vw, 14px);
}

.tool {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: color .25s var(--ease);
}
.tool:hover { color: var(--accent); }
.tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tool[aria-current="page"] { color: var(--accent); }

.tool svg {
  inline-size: 21px;
  block-size: 21px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: .9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* --------------------------------------------- PASTILLE DU PANIER */
/* #cartCount est écrit par cart.js (textContent), qui lui ajoute .bump
   pendant 300 ms. Sélecteur à deux classes pour passer devant la règle
   .cart-count de boutique-didone-v1.css quel que soit l'ordre de chargement. */
.tool-cart .cart-count {
  position: absolute;
  inset-block-start: 1px;
  inset-inline-end: 0;
  min-inline-size: 16px;
  padding: 1px 3px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--serif);
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .04em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-radius: 0;
  transition: transform .3s var(--ease);
}
.tool-cart .cart-count.bump { transform: scale(1.28); }

/* ------------------------------------------------------- RESPONSIF */
/* Sous 760 px, le nom et les trois outils tiennent la première ligne, la
   navigation texte passe dessous, à pleine largeur. */
@media (max-width: 760px) {
  .nav { row-gap: 10px; }
  .nav .mark { flex: 0 0 auto; }
  .tools { order: 2; margin-inline-start: auto; }
  .nav > nav { order: 3; flex-basis: 100%; }
  .nav > nav ul { justify-content: flex-start; }
  .tools::before { display: none; }
}

/* Sous 380 px, on resserre la gouttière des outils pour garder les trois
   cibles tactiles à 38 px sans déborder. */
@media (max-width: 380px) {
  .tools { gap: 2px; }
  .tool { inline-size: 36px; block-size: 36px; }
  .tool svg { inline-size: 20px; block-size: 20px; }
}

/* Pages au chapeau réduit (.nav-min) : la colonne centrée reste centrée. */
.nav-min .tools { margin-inline-start: 0; justify-content: center; }
.nav-min .tools::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tool, .tool-cart .cart-count { transition: none; }
}

@media print {
  .tools { display: none; }
}