/* ==========================================================================
   YONA : la coquille e-commerce (27/10/2026), transposée de L'Art des Sens (assets/navigation.css, tiroir, recherche)
   et habillée des jetons de YONA (tokens.css) : ivoire, encre, bleu de marque, Figtree.
   En-tête (loupe, sac, menu) · fenêtre de recherche · feuille du menu · tiroir du panier · filtres du catalogue ·
   pied · réponse au toucher · transitions entre les pages.
   ========================================================================== */

/* ---------- toucher : aucun flash gris, aucun délai, survols seulement à la souris ---------- */
a,button,summary{-webkit-tap-highlight-color:transparent}
.btn,.entete__ico,.burger,.filtres__puce,.filtres__tri button,.cherche__mot,.pnr__qbtn,.feuille__menu a,.feuille__raccourcis a{touch-action:manipulation}
html.is-menu-open,html.pnr-ouvert{overflow:hidden}

/* ---------- en-tête : le menu au bureau, les outils partout ---------- */
.nav__menu{display:flex;align-items:center;gap:clamp(.9rem,1.5vw,1.7rem);list-style:none;margin:0;padding:0}
.nav__menu li{margin:0}
.entete__outils{display:flex;align-items:center;gap:.15rem}
.entete__ico{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;border:0;border-radius:999px;background:none;color:inherit;cursor:pointer}
.entete__ico .ico{width:24px;height:24px}
.entete__sac .entete__n{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--bleu-profond);color:var(--blanc);
  font:var(--g-fort) 11px/18px var(--f-texte);text-align:center;letter-spacing:0}
.entete__sac .entete__n[data-vide="1"]{display:none}
.entete__retour{font-weight:var(--g-fort);font-size:var(--t-petit);text-underline-offset:.2em}
@media (hover:hover) and (pointer:fine){.entete__ico:hover{background:color-mix(in srgb,currentColor 9%,transparent)}}
/* Six entrées au bureau : sous 1 100 px, elles passent dans la feuille (le logo et les outils tiennent sur une ligne). */
@media (max-width:1100px){
  .nav{display:none!important}
  .burger{display:flex}
}

/* ---------- les boutons d'ajout de WooCommerce : le tiroir parle à sa place ---------- */
.added_to_cart.wc-forward{display:none!important}
.add_to_cart_button.is-attente,.single_add_to_cart_button.is-attente{opacity:.72;pointer-events:none}

/* ---------- la fenêtre de recherche (descend du haut) ---------- */
.cherche{position:fixed;inset:0 0 auto;width:100%;max-width:none;max-height:100dvh;margin:0;padding:0;border:0;
  background:var(--ivoire-clair);color:var(--encre);box-shadow:0 24px 60px rgba(12,18,22,.22);
  overflow:auto;overscroll-behavior:contain}
.cherche::backdrop{background:rgba(12,18,22,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cherche[open]{animation:yona-descend .32s var(--courbe) both}
.cherche.sans-anim[open]{animation:none}
@keyframes yona-descend{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
.cherche__corps{max-width:780px;margin:0 auto;padding:var(--e3) var(--gouttiere) var(--e5)}
.cherche__form{display:flex;align-items:center;gap:.4rem;border-bottom:1px solid var(--filet-fort);padding-bottom:.35rem}
.cherche__loupe{display:flex;color:var(--encre-douce)}
.cherche__loupe .ico{width:22px;height:22px}
.cherche__champ{flex:1;min-width:0;padding:.85rem .25rem;border:0;background:transparent;color:inherit;
  font:var(--g-corps) 1.125rem/1.3 var(--f-texte);outline:none}
.cherche__champ::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.cherche__ok{min-height:40px;padding:0 1rem;border:1px solid var(--filet-fort);border-radius:999px;background:transparent;
  color:inherit;font:var(--g-fort) var(--t-mini)/1 var(--f-texte);cursor:pointer}
.cherche__fermer,.feuille__fermer,.pnr__fermer{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;
  background:none;color:inherit;cursor:pointer}
.cherche__fermer svg,.feuille__fermer svg,.pnr__fermer svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.cherche__titre{margin:var(--e4) 0 var(--e2);font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  font-weight:var(--g-label);color:var(--encre-douce)}
.cherche__frequentes{display:flex;flex-wrap:wrap;gap:.5rem}
.cherche__mot{min-height:42px;padding:0 1.05rem;border:1px solid var(--filet-fort);border-radius:999px;background:transparent;
  color:inherit;font:var(--g-corps) var(--t-petit)/1 var(--f-texte);cursor:pointer}
@media (hover:hover) and (pointer:fine){.cherche__mot:hover{background:var(--sable)}}
.cherche__liste{list-style:none;margin:0;padding:0}
.sugg{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--filet)}
.sugg__lien{display:flex;align-items:center;gap:.85rem;min-width:0;color:inherit;text-decoration:none}
.sugg__img{flex:none;width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--sable)}
.sugg__txt{display:flex;flex-direction:column;min-width:0}
.sugg__nom{font-weight:var(--g-fort);line-height:1.25}
.sugg__vol{font-size:var(--t-mini);color:var(--encre-douce)}
.sugg__prix{font-weight:var(--g-fort);white-space:nowrap}
.sugg__ajout{min-height:42px;padding:0 1rem}
@media (max-width:520px){
  .sugg{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:.35rem}
  .sugg__lien{grid-row:1/3}
  .sugg__prix{grid-column:2;grid-row:1;justify-self:end;font-size:var(--t-mini)}
  .sugg__ajout{grid-column:2;grid-row:2}
}
.cherche__vide{margin:var(--e4) 0 0;line-height:1.5}
.cherche__tout{display:inline-block;margin-top:var(--e3);font-weight:var(--g-fort);color:inherit}

/* ---------- la feuille du menu (monte du bas, se referme au geste) ---------- */
.feuille{position:fixed;inset:auto 0 0;width:100%;max-width:none;max-height:min(88dvh,780px);margin:0;padding:0;border:0;
  border-radius:22px 22px 0 0;background:var(--ivoire-clair);color:var(--encre);box-shadow:0 -18px 50px rgba(12,18,22,.25);
  overflow:hidden;transition:transform .42s var(--courbe)}
.feuille::backdrop{background:rgba(12,18,22,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.feuille[open]{animation:yona-monte .42s var(--courbe) both}
.feuille.sans-anim[open]{animation:none}
.feuille.is-glisse{transition:none}
@keyframes yona-monte{from{transform:translateY(100%)}to{transform:none}}
.feuille__corps{display:flex;flex-direction:column;max-height:inherit;overflow:auto;overscroll-behavior:contain;
  padding:0 var(--gouttiere) var(--e4)}
.feuille__tete{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:1.1rem 0 .4rem;background:var(--ivoire-clair);touch-action:none;cursor:grab}
.feuille__poignee{position:absolute;left:50%;top:8px;width:42px;height:4px;margin-left:-21px;border-radius:4px;background:var(--filet-fort)}
.feuille__langue{display:flex;align-items:center;min-height:44px}
.feuille__fermer{margin-right:-10px}
.feuille__menu{list-style:none;margin:0;padding:0}
.feuille__menu>li>a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--filet);color:inherit;
  text-decoration:none;font-size:1.25rem;font-weight:var(--g-titre)}
.feuille__menu a[aria-current]{color:var(--bleu-nuit)}
.feuille__raccourcis{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:.75rem 0;border-bottom:1px solid var(--filet)}
.feuille__raccourcis a{display:inline-flex;align-items:center;min-height:42px;padding:0 1.05rem;border-radius:999px;
  background:var(--sable);color:inherit;text-decoration:none;font-size:var(--t-petit);font-weight:var(--g-fort)}
.feuille__bas{display:flex;flex-direction:column;gap:.75rem;margin-top:auto;padding-top:var(--e4)}
.feuille__wa{display:flex;align-items:center;gap:.65rem;min-height:54px;padding:0 1.1rem;border-radius:14px;
  background:#25D366;color:#06331b;text-decoration:none;font-weight:var(--g-fort)}
.feuille__wa svg{flex:none;width:22px;height:22px}
.feuille__labo{padding:.35rem 0;color:var(--encre-douce);font-size:var(--t-mini);text-decoration:none}

/* ---------- le tiroir du panier (glisse de la droite) ---------- */
.pnr{position:fixed;inset:0;z-index:150}
.pnr[hidden]{display:none}
.pnr__voile{position:absolute;inset:0;background:rgba(12,18,22,.45);opacity:0;transition:opacity .4s var(--courbe)}
.pnr__panneau{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(440px,100%);
  background:var(--ivoire-clair);color:var(--encre);box-shadow:-20px 0 60px rgba(12,18,22,.22);
  transform:translateX(100%);transition:transform .46s var(--courbe);outline:none}
.pnr.is-open .pnr__voile{opacity:1}
.pnr.is-open .pnr__panneau{transform:none}
.pnr__tete{display:flex;align-items:center;justify-content:space-between;padding:var(--e3) var(--e4);border-bottom:1px solid var(--filet)}
.pnr__titre{margin:0;font-size:var(--t-h4);font-weight:var(--g-titre)}
.pnr__fermer{margin-right:-10px}
.pnr__body{display:flex;flex:1;flex-direction:column;min-height:0;transition:opacity .2s}
.pnr.is-attente .pnr__body{opacity:.6}
.pnr__defile{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--e2) var(--e4) var(--e4)}
.pnr__lignes{list-style:none;margin:0;padding:0}
.pnr__ligne{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:start;gap:.85rem;padding:.85rem 0;border-bottom:1px solid var(--filet)}
.pnr__media img{display:block;width:72px;height:72px;border-radius:10px;object-fit:cover;background:var(--sable)}
.pnr__nom{font-weight:var(--g-fort);line-height:1.25}
.pnr__nom a{color:inherit;text-decoration:none}
.pnr__meta{display:block;margin-top:.15rem;font-size:var(--t-mini);color:var(--encre-douce)}
.pnr__reglage{display:flex;align-items:center;gap:.85rem;margin-top:.55rem}
.pnr__qte{display:inline-flex;align-items:center;border:1px solid var(--filet-fort);border-radius:999px}
.pnr__qbtn{width:40px;height:40px;padding:0;border:0;background:none;color:inherit;font:var(--g-fort) 1.1rem/1 var(--f-texte);cursor:pointer}
.pnr__qval{min-width:1.6em;text-align:center;font-weight:var(--g-fort)}
.pnr__retirer{padding:0;border:0;background:none;color:var(--encre-douce);font:var(--g-corps) var(--t-mini)/1.4 var(--f-texte);
  text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.pnr__prix{font-weight:var(--g-fort);white-space:nowrap}
.pnr__suggestions{margin-top:var(--e4)}
.pnr__suggestions-titre,.pnr__services-titre{margin:0 0 .55rem;font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;font-weight:var(--g-label);color:var(--encre-douce)}
.pnr__suggestions-liste{display:grid;gap:.6rem;list-style:none;margin:0;padding:0}
.pnr__suggestion{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.6rem;border-radius:14px;background:var(--ivoire)}
.pnr__suggestion-media img{display:block;width:56px;height:56px;border-radius:10px;object-fit:cover}
.pnr__suggestion-nom{color:inherit;font-weight:var(--g-fort);text-decoration:none}
.pnr__suggestion-raison{margin:.1rem 0 0;font-size:var(--t-mini);color:var(--encre-douce)}
.pnr__suggestion-prix{margin:.1rem 0 0;font-size:var(--t-mini);font-weight:var(--g-fort)}
.pnr__suggestion-vol{font-weight:var(--g-corps);color:var(--encre-douce)}
.pnr__services{display:grid;gap:.5rem;list-style:none;margin:var(--e4) 0 0;padding:0}
.pnr__services li{display:flex;flex-direction:column;padding:.65rem .85rem;border-radius:12px;background:var(--sable)}
.pnr__services b{font-size:var(--t-petit);font-weight:var(--g-fort)}
.pnr__services span{font-size:var(--t-mini);color:var(--encre-douce)}
.pnr__body>.pnr__services{padding:0 var(--e4)}
.pnr__pied{display:grid;gap:.6rem;padding:var(--e3) var(--e4);border-top:1px solid var(--filet);background:var(--ivoire-clair)}
.pnr__total{display:flex;justify-content:space-between;margin:0;font-size:1.1rem;font-weight:var(--g-fort)}
.pnr__mention{margin:0;font-size:var(--t-mini);color:var(--encre-douce);line-height:1.45}
.pnr__payer,.pnr__continuer{width:100%}
.pnr__voir{justify-self:center;font-size:var(--t-mini);color:var(--encre-douce)}
.pnr__vide{display:grid;justify-items:center;gap:var(--e3);padding:var(--e5) var(--e4) var(--e3);text-align:center}
.pnr__vide-titre{margin:0;font-size:var(--t-h4);font-weight:var(--g-titre)}
@media (prefers-reduced-motion:reduce){.pnr__voile,.pnr__panneau,.feuille{transition:none}}

/* ---------- le catalogue : familles, besoins, tri par prix ---------- */
/* Marges verticales seulement : la zone porte aussi `.page`, dont la marge horizontale automatique fait la gouttière. */
.filtres{position:relative;margin-block:var(--e3) var(--e4)}
.filtres__defile{position:relative;display:flex;flex-direction:column;gap:.55rem}
.filtres__groupe{position:relative;display:flex;flex-wrap:wrap;gap:.5rem;padding-bottom:7px}
/* Au téléphone, chaque rangée glisse au doigt d'un bord à l'autre de l'écran (aucune puce coupée par la gouttière). */
@media (max-width:779.98px){
  .filtres__groupe{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
    margin-inline:calc(var(--gouttiere) * -1);padding-inline:var(--gouttiere)}
}
.filtres__groupe::-webkit-scrollbar{display:none}
.filtres__puce{flex:none;min-height:44px;padding:0 1.1rem;scroll-snap-align:start;border:1px solid var(--filet-fort);border-radius:999px;
  background:transparent;color:inherit;font:var(--g-corps) var(--t-petit)/1 var(--f-texte);white-space:nowrap;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center}
.filtres__puce[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:var(--ivoire);font-weight:var(--g-fort)}
@media (hover:hover) and (pointer:fine){.filtres__puce:not([aria-pressed="true"]):hover{background:var(--sable)}}
.filtres__marque{position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;background:var(--bleu);opacity:0;pointer-events:none;
  transition:transform .36s var(--courbe),width .36s var(--courbe),opacity .2s}
/* Au bureau, les rangées ne défilent pas : la puce pleine dit seule le choix (le trait se posait sous la rangée d'après). */
@media (min-width:780px){.filtres__marque{display:none}}
.filtres__bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;margin-top:.6rem}
.filtres__etat{font-size:var(--t-petit);color:var(--encre-douce)}
.filtres__tri{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.filtres__tri span{font-size:var(--t-mini);color:var(--encre-douce)}
.filtres__tri button{min-height:40px;padding:0 .95rem;border:1px solid var(--filet);border-radius:999px;background:transparent;color:inherit;
  font:var(--g-corps) var(--t-mini)/1 var(--f-texte);cursor:pointer}
.filtres__tri button[aria-pressed="true"]{border-color:var(--encre);font-weight:var(--g-fort)}
.filtres__ligne{margin:.4rem 0 0;color:var(--encre-douce);font-size:var(--t-petit)}
.filtres__vide{padding:var(--e5) 0;text-align:center}
.filtres__vide .btn{margin-top:var(--e3)}

/* ---------- pied : la marque et trois groupes ---------- */
.pied__marque .pied__intro{max-width:34ch}
.pied--commande{padding-block:var(--e4)}
.pied--commande .pied__bas{margin:0;border-top:0;padding-top:0}

/* ---------- les transitions entre les pages ----------
   La page arrive opaque d'emblée (rien n'attend une animation) ; seuls la photo, le nom et le prix d'une carte
   glissent jusqu'à leur place sur la fiche ; l'en-tête ne bouge pas. Dans le catalogue, les cartes glissent à leur
   nouvelle place quand un filtre change. */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:none;display:none}
  ::view-transition-new(root){animation:none}
  ::view-transition-group(vt-visuel),::view-transition-group(vt-nom),::view-transition-group(vt-prix){
    animation-duration:.44s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  ::view-transition-group(*.carte){animation-duration:.42s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  ::view-transition-new(*.carte):only-child{animation:yona-carte-arrive .34s cubic-bezier(.22,.61,.36,1) both}
  ::view-transition-old(*.carte):only-child{animation:yona-carte-part .12s linear both}
}
@keyframes yona-carte-arrive{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes yona-carte-part{to{opacity:0}}