/* ==========================================================================
   RACINE CBD — SYSTEME D'ICONES SVG & ANIMATIONS
   Fichier partage : boutique (style.css) et panel admin (admin.css).
   Toutes les icones proviennent de assets/js/icons.js (grille 24x24, trait).
   ========================================================================== */

/* ------------------------------------------------------------- BASE ------- */
.ic {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  vertical-align: -0.16em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), color .25s ease, opacity .25s ease, filter .25s ease;
}

/* Hote statique du HTML : <span data-icon="…"></span> */
.ic-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* ------------------------------------------------------------- TAILLES ---- */
.ic-xs { width: .82em; height: .82em; stroke-width: 2.2; }
.ic-sm { width: 1em; height: 1em; stroke-width: 2; }
.ic-md { width: 1.3em; height: 1.3em; stroke-width: 1.8; }
.ic-lg { width: 1.75em; height: 1.75em; stroke-width: 1.55; }
.ic-14 { width: 14px; height: 14px; }
.ic-16 { width: 16px; height: 16px; }
.ic-18 { width: 18px; height: 18px; }
.ic-20 { width: 20px; height: 20px; }
.ic-22 { width: 22px; height: 22px; }
.ic-24 { width: 24px; height: 24px; }
.ic-28 { width: 28px; height: 28px; }
.ic-32 { width: 32px; height: 32px; stroke-width: 1.5; }
.ic-40 { width: 40px; height: 40px; stroke-width: 1.4; }
.ic-48 { width: 48px; height: 48px; stroke-width: 1.35; }
.ic-56 { width: 56px; height: 56px; stroke-width: 1.3; }
.ic-64 { width: 64px; height: 64px; stroke-width: 1.25; }
.ic-80 { width: 80px; height: 80px; stroke-width: 1.15; }
.ic-96 { width: 96px; height: 96px; stroke-width: 1.1; }

/* --------------------------------------------------------- ANIMATIONS ----- */
@keyframes ic-pop {
  0%   { opacity: 0; transform: scale(.35) rotate(-22deg); }
  55%  { opacity: 1; transform: scale(1.16) rotate(5deg); }
  75%  { transform: scale(.96) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes ic-spin { to { transform: rotate(360deg); } }
@keyframes ic-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(4deg); }
}
@keyframes ic-nudge {
  0%, 100% { transform: translateX(0); }
  35%      { transform: translateX(6px) rotate(6deg); }
  65%      { transform: translateX(-2px) rotate(-3deg); }
}
@keyframes ic-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.2); opacity: .72; }
}
@keyframes ic-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20%      { transform: translateX(-3px) rotate(-10deg); }
  40%      { transform: translateX(3px) rotate(10deg); }
  60%      { transform: translateX(-2px) rotate(-6deg); }
  80%      { transform: translateX(2px) rotate(5deg); }
}
@keyframes ic-draw {
  from { stroke-dashoffset: var(--d, 420); }
  to   { stroke-dashoffset: 0; }
}
@keyframes ic-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(57, 255, 20, 0)); }
  50%      { filter: drop-shadow(0 0 16px rgba(57, 255, 20, .8)); }
}
@keyframes ic-trace {
  from { stroke-dashoffset: 60; }
  to   { stroke-dashoffset: 0; }
}
@keyframes ic-orbit {
  from { transform: rotate(0deg) translateY(-4px); }
  to   { transform: rotate(360deg) translateY(-4px); }
}

/* Utilitaires applicables a n'importe quelle icone */
.ic-spin     { animation: ic-spin .9s linear infinite; }
.ic-spin-slow { animation: ic-spin 2.4s linear infinite; }
.ic-pop-in   { animation: ic-pop .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.ic-float    { animation: ic-float 5.5s ease-in-out infinite; }
.ic-pulse    { animation: ic-pulse 1.9s ease-in-out infinite; }
.ic-shake    { animation: ic-shake .55s ease-in-out; }
.ic-glow     { animation: ic-glow 2.6s ease-in-out infinite; }
.ic-draw     { stroke-dasharray: var(--d, 420); animation: ic-draw 1.5s cubic-bezier(.65, 0, .35, 1) both; }
.ic-trace    { stroke-dasharray: 60; animation: ic-trace .7s ease-out both; }

/* Les descendants directs d'un SVG fourni par <use>/g peuvent s'animer */
.ic .anim-pop { animation: ic-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.ic .anim-float { animation: ic-float 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* ------------------------------------------------- INTERACTIONS AU HOVER -- */
.btn:hover > .ic,
.icon-btn:hover > .ic,
.btn:hover .ic-lead,
a:hover > .ic {
  transform: translateY(-2px) scale(1.12);
}
.btn:active > .ic,
.icon-btn:active > .ic { transform: scale(.88); }

/* Fleche qui glisse dans les CTA */
.ic-nudge:hover .ic,
.btn-arrow:hover .ic { animation: ic-nudge .6s cubic-bezier(.34, 1.56, .64, 1); }

/* Croix de fermeture : rotation au survol (le bouton pivote deja) */
.x-btn:hover .ic { transform: scale(1.12); }

/* Navigation laterale */
.side-item .ic,
.nav-lab .ic { transition: transform .34s cubic-bezier(.34, 1.56, .64, 1), color .2s; }
.side-item:hover .ic { transform: rotate(-10deg) scale(1.18); }
.side-item.on .ic { transform: scale(1.12); color: var(--green, #39ff14); }

/* Cartes de categorie, cartes produit, chips, onglets */
.cat:hover .cat-ico .ic,
.cat:active .cat-ico .ic { transform: scale(1.18) rotate(7deg); }
.cat.on .cat-ico .ic { transform: scale(1.1) rotate(-4deg); }
.pcard:hover .pcard-media .ic { transform: scale(1.13) rotate(-6deg); }
.chip:hover .ic { transform: rotate(10deg) scale(1.15); }
.chip.active .ic { transform: rotate(-6deg); }
.pd-tab:hover .ic { transform: translateY(-2px); }

/* Lignes de table : actions */
.abtn:hover .ic { transform: scale(1.16); }
.trash:hover .ic, .abtn.danger:hover .ic { color: var(--danger, #ff4d4d); transform: scale(1.16) rotate(-8deg); }

/* Notifications */
.toast .ic-pop, .toast.in .ic { animation: ic-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.toast.err .ic { animation: ic-shake .55s ease-in-out; }

/* Etats vides : icone qui flotte */
.empty-state .ico .ic,
.empty-state > .ic {
  width: 64px;
  height: 64px;
  stroke-width: 1.25;
  color: var(--green, #39ff14);
  animation: ic-float 5.5s ease-in-out infinite;
  filter: drop-shadow(0 12px 30px rgba(57, 255, 20, .18));
}

/* Etat de chargement : anneau dessine par le bouton (.btn.loading::after) */
.ic-loader { animation: ic-spin .85s linear infinite; }

/* ------------------------------------------------------ CAS SPECIFIQUES --- */

/* Boutons d'ajout rapide sur carte produit */
.pcard-quick .ic { width: 15px; height: 15px; }

/* Visuel du produit : icone SVG de remplacement du symbole texte */
.pmedia, .pcard-media .pmedia, .pd-media .pmedia, .cl-media .pmedia {
  position: relative;
  z-index: 2;
  color: var(--green, #39ff14);
  filter: drop-shadow(0 12px 30px rgba(57, 255, 20, .28));
}
.pcard-media .pmedia { width: 78px; height: 78px; stroke-width: 1.15; transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.cl-media .pmedia { width: 34px; height: 34px; stroke-width: 1.4; }
.mini-ico .pmedia { width: 26px; height: 26px; stroke-width: 1.5; }
.tbl .pmedia, .tbl .mini-ico .pmedia { width: 26px; height: 26px; stroke-width: 1.5; }
.pd-media .pmedia { width: clamp(96px, 13vw, 138px); height: clamp(96px, 13vw, 138px); stroke-width: .9; }

/* Tuiles de categorie */
.cat-ico .ic { width: 46px; height: 46px; stroke-width: 1.35; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }

/* Hero : la feuille se dessine (voir .ic-draw, --d renseigne dans le HTML) */
.hero-leaf .ic { width: 100%; height: 100%; stroke-width: .85; color: var(--green, #39ff14); }
.hero-leaf .ic:hover { animation: ic-glow 2.4s ease-in-out infinite; }

/* Pastilles de confiance / cartes de contact / pied de page */
.trust-item .ico .ic { width: 30px; height: 30px; stroke-width: 1.5; }
.ccard .ico .ic { width: 22px; height: 22px; stroke-width: 1.5; }
.foot-info .ic { width: 17px; height: 17px; stroke-width: 1.6; }
.lalert .ic { width: 19px; height: 19px; stroke-width: 1.7; }

/* Encart annonce / barre superieure */
.topbar .tb-item .ic { width: 15px; height: 15px; stroke-width: 1.8; }
.topbar .tb-item { display: inline-flex; align-items: center; gap: 7px; }
.topbar .tb-item .ic { color: var(--green, #39ff14); animation: ic-pulse 2.6s ease-in-out infinite; }

/* Pastilles labo (CBD / THC / stock) */
.lab-pill .ic { width: 14px; height: 14px; stroke-width: 1.9; }

/* Boites d'alerte */
.a-alert .ic { width: 18px; height: 18px; stroke-width: 1.8; }
.toast .ic { width: 19px; height: 19px; stroke-width: 1.9; }

/* Options paiement / livraison */
.pay-opt .ic { width: 25px; height: 25px; stroke-width: 1.5; }
.pay-opt.sel .ic { animation: ic-pop .5s cubic-bezier(.34, 1.56, .64, 1); }

/* Etapes du tunnel de commande */
.co-step .num .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.co-step.done .num { animation: ic-pop .45s cubic-bezier(.34, 1.56, .64, 1); }

/* Sidebar admin : pastilles d'icone */
.side-item .ic { width: 19px; height: 19px; stroke-width: 1.6; }

/* Cartes KPI admin : icone vivante */
.kpi .k-ico .ic { width: 26px; height: 26px; stroke-width: 1.6; }
.kpi:hover .k-ico .ic { transform: rotate(-8deg) scale(1.15); }

/* Statut / badges admin */
.badge-status .ic, .tag .ic { width: 13px; height: 13px; stroke-width: 2.1; }

/* Mini graphiques et raccourcis */
.mini-ico .ic, .sq .ic { width: 30px; height: 30px; stroke-width: 1.5; }

/* Porte d'age / marques */
.gate-mark .ic, .login-mark .ic { width: 58%; height: 58%; stroke-width: 1.4; }

/* Titres de section : petite icone devant le surtitre */
.sec-eyebrow .ic, .eyebrow .ic { width: 15px; height: 15px; stroke-width: 2; color: var(--green, #39ff14); }

/* Bouton retour en haut */
#toTop .ic { width: 17px; height: 17px; stroke-width: 2; }
#toTop:hover .ic { transform: translateY(-3px); }

/* Recherche / filtres */
.field .ic, .search-wrap .ic { width: 17px; height: 17px; stroke-width: 1.8; color: var(--text-3, #6f8a70); }

/* Score / etoiles d'avis */
.stars .ic, .pcard-rate .ic, .rating-big .ic { width: 15px; height: 15px; stroke-width: 1.4; vertical-align: -2px; }

/* Legendes d'icone seule (boutons carres) */
.icon-btn .ic, .sq .ic, .abtn .ic { transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), color .2s; }

/* --------------------------------------------------- ENTREE DANS L'ECRAN -- */
.rv .ic-draw, .rv .ic-trace { animation-play-state: paused; }
.rv.in .ic-draw { animation-play-state: running; }
.rv.in .ic-trace { animation-play-state: running; }

/* Apparition progressive des icones d'une liste */
[data-icon-fade] .ic { opacity: 0; animation: ic-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }

/* ---------------------------------------------------- COMPLEMENTS SITE ---- */

/* Rangée d'etoiles (avis, fiches produit) */
.star-row { display: inline-flex; align-items: center; gap: 2px; line-height: 0; }
.star-row .ic { width: 14px; height: 14px; stroke-width: 1.4; }
.star-row .ic-star-fill { animation: ic-pop .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.pcard-rate .star-row, .stars .star-row { gap: 1px; }
.bar-row span .ic { vertical-align: -2px; margin-left: 3px; color: var(--warn, #ffb020); }

/* Bandeau d'annonce : separateurs */
.topbar .tb-sep {
  flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(57, 255, 20, .55); margin: 0 16px;
}

/* Drapeau francais du pied de page */
.made-fr { display: inline-flex; align-items: center; gap: 7px; }
.flag-fr {
  width: 19px; height: 13px; border-radius: 2px; display: inline-block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
  vertical-align: -1px;
}

/* Lignes d'information (suivi de commande, recaps) */
.note-row { display: inline-flex; align-items: center; gap: 6px; }
.info-row { display: inline-flex; align-items: center; gap: 6px; }
.info-row .ic { color: var(--green, #39ff14); vertical-align: -3px; }
.info-row.indent { padding-left: 22px; }

/* Lien fléché */
.link-arrow .ic { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.link-arrow:hover .ic { animation: ic-nudge .6s cubic-bezier(.34, 1.56, .64, 1); }

/* Ecran serveur indisponible */
.down-ico { display: flex; justify-content: center; margin-bottom: 18px; color: var(--green, #39ff14); }
.down-ico .ic { animation: ic-shake .8s ease-in-out infinite alternate; }

/* Bouton favori des cartes produit */
.pcard-fav .ic { width: 17px; height: 17px; stroke-width: 1.8; }
.pcard-fav.on .ic { color: var(--danger, #ff5252); animation: ic-pop .5s cubic-bezier(.34, 1.56, .64, 1); }

/* Chips de filtre : petite icone devant le nom */
.chip .ic { width: 14px; height: 14px; stroke-width: 2; vertical-align: -2px; }

/* Lien « Voir la boutique » / deconnexion (panel) */
.side-link .ic, .login-hint .ic { width: 16px; height: 16px; stroke-width: 1.8; vertical-align: -3px; }
.login-hint p { display: flex; align-items: center; gap: 8px; }
.login-hint a { display: inline-flex; align-items: center; gap: 7px; }
.login-hint a:hover .ic { transform: translateX(-3px); }

/* Encarts du pied de page */
.foot-info li { display: flex; align-items: flex-start; gap: 10px; }

/* Alerations legales */
.lalert .ic-host { flex-shrink: 0; line-height: 0; }

/* -------------------------------------------------------- ACCESSIBILITE --- */
@media (prefers-reduced-motion: reduce) {
  .ic { transition: none !important; }
  .ic-spin, .ic-spin-slow, .ic-float, .ic-pulse, .ic-glow, .ic-shake,
  .ic-pop-in, .ic-draw, .ic-trace, .ic-loader,
  .toast .ic, .toast.in .ic, .toast.err .ic,
  .topbar .tb-item .ic, .empty-state .ico .ic, .empty-state > .ic {
    animation: none !important;
  }
  .ic-draw { stroke-dasharray: none; }
}