/* Lookatme icon system — stroke 1.75, caps ronds, langage Linear/Vercel */

:root {
  --pi-sw: 1.75;
  --pi-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5.2 19.4c.7-3.1 3.4-4.9 6.8-4.9s6.1 1.8 6.8 4.9'/%3E%3C/svg%3E");
  --pi-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.2 19.2c.5-2.7 2.7-4.3 5.8-4.3s5.3 1.6 5.8 4.3'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M16.1 14.6c2.3.4 4 1.7 4.6 3.8'/%3E%3C/svg%3E");
  --pi-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.2'/%3E%3Ccircle cx='8.5' cy='10' r='1.4'/%3E%3Cpath d='m21 16.2-4.8-3.8-4.4 3.4L8 13.2 3 17'/%3E%3C/svg%3E");
  --pi-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a4.2 4.2 0 0 0 6.1.4l1.2-1.2a4.2 4.2 0 0 0-5.9-5.9L10 7.7'/%3E%3Cpath d='M14 11a4.2 4.2 0 0 0-6.1-.4L6.7 11.8a4.2 4.2 0 0 0 5.9 5.9L14 16.3'/%3E%3C/svg%3E");
  --pi-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V10'/%3E%3Cpath d='M10 19V5'/%3E%3Cpath d='M16 19v-7'/%3E%3Cpath d='M20 19V8'/%3E%3C/svg%3E");
  --pi-activity: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h3.2l2.4-6.2 3.6 12.4 2.6-6.2H21'/%3E%3C/svg%3E");
  --pi-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --pi-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6.1v5.6c0 4 2.7 7.6 7 8.8 4.3-1.2 7-4.8 7-8.8V6.1L12 3z'/%3E%3Cpath d='m9.2 12.1 1.9 1.9 3.7-3.8'/%3E%3C/svg%3E");
  --pi-nodes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.2' cy='12' r='2.2'/%3E%3Ccircle cx='17.8' cy='6.8' r='2.2'/%3E%3Ccircle cx='17.8' cy='17.2' r='2.2'/%3E%3Cpath d='M8.3 11.2 15.6 7.8'/%3E%3Cpath d='M8.3 12.8 15.6 16.2'/%3E%3C/svg%3E");
  --pi-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 13.4 8 18 9.4 13.4 10.8 12 15.6 10.6 10.8 6 9.4 10.6 8 12 3.2z'/%3E%3Cpath d='M18.4 14.2 19 16.4 21.2 17 19 17.6 18.4 19.8 17.8 17.6 15.6 17 17.8 16.4 18.4 14.2z'/%3E%3Cpath d='M5.6 14.8 6 16.2 7.4 16.6 6 17 5.6 18.4 5.2 17 3.8 16.6 5.2 16.2 5.6 14.8z'/%3E%3C/svg%3E");
  --pi-zap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4.8 13.6h6.4L10 22l8.2-11.6h-6.4L13 2z'/%3E%3C/svg%3E");
  --pi-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M5 12v8.2A1.8 1.8 0 0 0 6.8 22h10.4a1.8 1.8 0 0 0 1.8-1.8V12'/%3E%3Cpath d='M7.4 8a2.4 2.4 0 1 1 0-4.8C9.2 3.2 12 8 12 8s2.8-4.8 4.6-4.8a2.4 2.4 0 1 1 0 4.8'/%3E%3C/svg%3E");
  --pi-rocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.2 9.4 20l.8-4.2'/%3E%3Cpath d='M12 15.2 14.6 20l-.8-4.2'/%3E%3Cpath d='M14.8 10.4c2.6.2 4.8 1.4 6.2 3.4-2 1.3-4.3 1.7-6.4 1.4'/%3E%3Cpath d='M9.2 10.4c-2.6.2-4.8 1.4-6.2 3.4 2 1.3 4.3 1.7 6.4 1.4'/%3E%3Cpath d='M12 3.2c2.4 2 3.6 5 3.4 8.4-1.1.2-2.2.2-3.4.2s-2.3 0-3.4-.2C8.4 8.2 9.6 5.2 12 3.2z'/%3E%3Ccircle cx='12' cy='9' r='1.1'/%3E%3C/svg%3E");
  --pi-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.2'/%3E%3Cpath d='m16 16 4.2 4.2'/%3E%3C/svg%3E");
  --pi-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 11 8-7 8 7'/%3E%3Cpath d='M6.5 10.5V19a1.5 1.5 0 0 0 1.5 1.5h8A1.5 1.5 0 0 0 17.5 19v-8.5'/%3E%3Cpath d='M10 20.5V14h4v6.5'/%3E%3C/svg%3E");
  --pi-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='12' r='1.15'/%3E%3Ccircle cx='12' cy='12' r='1.15'/%3E%3Ccircle cx='18' cy='12' r='1.15'/%3E%3C/svg%3E");
  --pi-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.2S4.4 15.2 3.4 9.9C2.8 6.8 5.2 4.2 8.1 4.4c1.6.1 3 1 3.9 2.3 1-1.3 2.3-2.2 3.9-2.3 2.9-.2 5.3 2.4 4.7 5.5C19.6 15.2 12 20.2 12 20.2z'/%3E%3C/svg%3E");
  --pi-heart-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.2S4.4 15.2 3.4 9.9C2.8 6.8 5.2 4.2 8.1 4.4c1.6.1 3 1 3.9 2.3 1-1.3 2.3-2.2 3.9-2.3 2.9-.2 5.3 2.4 4.7 5.5C19.6 15.2 12 20.2 12 20.2z'/%3E%3C/svg%3E");
  --pi-comment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 18.4 4 21v-4.2A7.8 7.8 0 0 1 8.4 4h7.2A7.8 7.8 0 0 1 20 16.2 7.8 7.8 0 0 1 12.2 21H8.6'/%3E%3C/svg%3E");
  --pi-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5.5' r='2.3'/%3E%3Ccircle cx='6' cy='12' r='2.3'/%3E%3Ccircle cx='18' cy='18.5' r='2.3'/%3E%3Cpath d='m8.2 10.9 7.6-4.1'/%3E%3Cpath d='m8.2 13.1 7.6 4.1'/%3E%3C/svg%3E");
  --pi-bookmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4.5h10A1.5 1.5 0 0 1 18.5 6v14.2L12 16.4l-6.5 3.8V6A1.5 1.5 0 0 1 7 4.5z'/%3E%3C/svg%3E");
  --pi-bookmark-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 4.5h10A1.5 1.5 0 0 1 18.5 6v14.2L12 16.4l-6.5 3.8V6A1.5 1.5 0 0 1 7 4.5z'/%3E%3C/svg%3E");
  --pi-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 12s3.4-6.4 9.2-6.4S21.2 12 21.2 12 17.8 18.4 12 18.4 2.8 12 2.8 12z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
  --pi-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
  --pi-trend: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 17.5 10 11l3.5 3.5 7-7'/%3E%3Cpath d='M14.5 7.5h6v6'/%3E%3C/svg%3E");
  --pi-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 8h11.2l1 12.2A1.4 1.4 0 0 1 17.2 21.6H6.8A1.4 1.4 0 0 1 5.4 20.2L6.4 8z'/%3E%3Cpath d='M9 8V6.4A3 3 0 0 1 12 3.4 3 3 0 0 1 15 6.4V8'/%3E%3C/svg%3E");
  --pi-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.6 2.4 4 5.6 4 9s-1.4 6.6-4 9c-2.6-2.4-4-5.6-4-9s1.4-6.6 4-9z'/%3E%3C/svg%3E");
  --pi-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7V5.6A1.6 1.6 0 0 0 8.4 4H5.6A1.6 1.6 0 0 0 4 5.6v12.8A1.6 1.6 0 0 0 5.6 20h2.8A1.6 1.6 0 0 0 10 18.4V17'/%3E%3Cpath d='M14 8l5 4-5 4'/%3E%3Cpath d='M9 12h10'/%3E%3C/svg%3E");
  --pi-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.2a2.5 2.5 0 0 1 4.7 1.2c0 1.7-2.4 2-2.4 3.6'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E");
  --pi-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --pi-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16.4 15.6 4.8a1.8 1.8 0 0 1 2.5 0l1.1 1.1a1.8 1.8 0 0 1 0 2.5L7.6 20H4v-3.6z'/%3E%3Cpath d='m13.6 6.8 3.6 3.6'/%3E%3C/svg%3E");
}

.picsme-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.picsme-icon-user { mask-image: var(--pi-user); -webkit-mask-image: var(--pi-user); }
.picsme-icon-users { mask-image: var(--pi-users); -webkit-mask-image: var(--pi-users); }
.picsme-icon-image { mask-image: var(--pi-image); -webkit-mask-image: var(--pi-image); }
.picsme-icon-link { mask-image: var(--pi-link); -webkit-mask-image: var(--pi-link); }
.picsme-icon-chart { mask-image: var(--pi-chart); -webkit-mask-image: var(--pi-chart); }
.picsme-icon-lock { mask-image: var(--pi-lock); -webkit-mask-image: var(--pi-lock); }
.picsme-icon-sparkles { mask-image: var(--pi-spark); -webkit-mask-image: var(--pi-spark); }
.picsme-icon-currency { mask-image: var(--pi-gift); -webkit-mask-image: var(--pi-gift); }
.picsme-icon-rocket { mask-image: var(--pi-zap); -webkit-mask-image: var(--pi-zap); }
.picsme-icon-search { mask-image: var(--pi-search); -webkit-mask-image: var(--pi-search); }

.mode-btn .picsme-icon,
.signup-choice .picsme-icon {
  width: 22px;
  height: 22px;
}

/* Vessel : icône stroke dans un squircle teinté */
.pi-vessel,
.feature-icon-wrap {
  --vessel-fg: var(--accent);
  --vessel-bg: var(--accent-soft);
  --vessel-bd: var(--border-accent);
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 16px;
  color: var(--vessel-fg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 55%),
    var(--vessel-bg);
  border: 1px solid var(--vessel-bd);
  box-shadow: var(--card-inner-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pi-vessel-sm {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  margin-bottom: 0;
}

.pi-vessel-emerald { --vessel-fg: var(--status-success); --vessel-bg: rgba(52, 211, 153, 0.12); --vessel-bd: rgba(52, 211, 153, 0.28); }
.pi-vessel-violet { --vessel-fg: var(--accent-violet); --vessel-bg: rgba(139, 92, 246, 0.12); --vessel-bd: rgba(139, 92, 246, 0.28); }
.pi-vessel-amber { --vessel-fg: #FBBF24; --vessel-bg: rgba(251, 191, 36, 0.12); --vessel-bd: rgba(251, 191, 36, 0.28); }
.pi-vessel-sky { --vessel-fg: #38BDF8; --vessel-bg: rgba(56, 189, 248, 0.12); --vessel-bd: rgba(56, 189, 248, 0.28); }

.feature-icon-inner.picsme-icon {
  width: 22px;
  height: 22px;
  color: inherit;
  background-color: currentColor;
}

.feature-icon-wrap.feature-icon-1 { --vessel-fg: var(--accent); --vessel-bg: var(--accent-soft); --vessel-bd: var(--border-accent); }
.feature-icon-wrap.feature-icon-2 { --vessel-fg: var(--accent-violet); --vessel-bg: rgba(139, 92, 246, 0.12); --vessel-bd: rgba(139, 92, 246, 0.28); }
.feature-icon-wrap.feature-icon-3 { --vessel-fg: #38BDF8; --vessel-bg: rgba(56, 189, 248, 0.12); --vessel-bd: rgba(56, 189, 248, 0.28); }
.feature-icon-wrap.feature-icon-4 { --vessel-fg: #FBBF24; --vessel-bg: rgba(251, 191, 36, 0.12); --vessel-bd: rgba(251, 191, 36, 0.28); }
.feature-icon-wrap.feature-icon-5 { --vessel-fg: var(--accent); --vessel-bg: var(--accent-soft); --vessel-bd: var(--border-accent); }
.feature-icon-wrap.feature-icon-6 { --vessel-fg: var(--status-success); --vessel-bg: rgba(52, 211, 153, 0.12); --vessel-bd: rgba(52, 211, 153, 0.28); }

.landing-feature-card:hover .feature-icon-wrap,
.cloaking-card:hover .cloaking-card-icon,
.avantage-card:hover .avantage-card-icon {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--accent-glow), var(--card-inner-glow);
}