/* Icônes intelligentes des services sans image (App\Support\ServiceIcon).
   Un seul balisage, cinq styles pilotés par la classe .si--<style>.
   Chaque valeur en unités de conteneur (cqh/cqw) est précédée d'un repli en px :
   un navigateur ancien ignore la ligne qu'il ne comprend pas et garde le repli. */

.si-host { position: relative; overflow: hidden; padding: 0 !important; }

.si {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; isolation: isolate; overflow: hidden;
  border-radius: inherit; container-type: size; font-family: inherit; line-height: 1.15; text-align: center;
  --si-ink: var(--fink); --si-text: #0f1b2d; --si-muted: #55657d;
  --si-glass-hi: rgba(255, 255, 255, .72); --si-glass-lo: rgba(255, 255, 255, .3); --si-glass-ring: rgba(255, 255, 255, .85);
  --si-disc: rgba(255, 255, 255, .78); --si-tonal: var(--tint);
  --si-bg: #f3f6fb;
  background: var(--si-bg);
}
[data-theme="dark"] .si {
  --si-text: #eef3fb; --si-muted: #9fb0c8; --si-ink: #cfe0ff;
  --si-glass-hi: rgba(255, 255, 255, .16); --si-glass-lo: rgba(255, 255, 255, .05); --si-glass-ring: rgba(255, 255, 255, .22);
  --si-disc: rgba(255, 255, 255, .12); --si-tonal: #16263d; --si-bg: #111c2e;
}
@supports (color: color-mix(in srgb, red, blue)) {
  .si { --si-bg: radial-gradient(90% 90% at 50% 6%, color-mix(in srgb, var(--tint) 58%, #fff), #f3f6fb 72%); }
  [data-theme="dark"] .si {
    --si-ink: color-mix(in srgb, var(--c1) 62%, white); --si-tonal: color-mix(in srgb, var(--c2) 26%, #16263d);
    --si-bg: radial-gradient(90% 90% at 50% 6%, color-mix(in srgb, var(--c2) 22%, #111c2e), #111c2e 72%);
  }
}

.si .si-gl { display: block; width: 56%; height: 56%; opacity: 1; }
.si .si-gl-f { opacity: .16; }

/* L'objet : tuile (et sphères du style Verre). Tout est en em, la taille vient de font-size. */
.si-obj {
  position: relative; display: block; width: 1em; height: 1em; font-size: 46px;
  font-size: min(40cqh, 46cqw);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.si-orb { display: none; }
.si-tile { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 26.5%; }

/* Le texte : opération en gras, marque dessous. Agrandi, jamais sous 12 px. */
.si-cap {
  display: grid; justify-items: center; gap: .16em; width: 100%; max-width: 92%; margin-top: 8px; font-size: 13px;
  margin-top: 5cqh; font-size: clamp(12px, 10.5cqh, 24px);
}
.si-cap b, .si-cap i { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.si-cap b { color: var(--si-text); font-weight: 700; letter-spacing: -.012em; }
.si-cap i { color: var(--si-muted); font-size: .86em; font-style: normal; font-weight: 550; }

a:hover .si-obj, .si-host:hover .si-obj { transform: scale(1.05) translateY(-2%); }

/* 1 · App — tuile d'application brillante */
.si--app .si-tile {
  color: #fff; background: linear-gradient(155deg, var(--c1), var(--c2));
  box-shadow: inset 0 .018em 0 rgba(255, 255, 255, .55), inset 0 -.09em .16em -.05em rgba(0, 0, 0, .28), 0 .012em .03em rgba(8, 20, 45, .3), 0 .13em .24em -.09em var(--glow);
}
.si--app .si-tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(125% 95% at 20% 0%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 55%); }
.si--app .si-gl { position: relative; filter: drop-shadow(0 .012em .015em rgba(0, 0, 0, .25)); }
.si--app .si-gl-f { opacity: .26; }

/* 2 · Verre — deux sphères de couleur derrière une tuile de verre dépoli */
.si--verre .si-orb {
  display: block; position: absolute; left: -.2em; top: -.17em; width: .64em; height: .64em; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff -40%, var(--c1) 48%, var(--c2));
  box-shadow: 0 .05em .14em -.02em var(--glow);
}
.si--verre .si-orb2 { left: auto; top: auto; right: -.15em; bottom: -.08em; width: .38em; height: .38em; background: radial-gradient(circle at 34% 30%, #fff -60%, var(--c2) 60%); box-shadow: none; }
.si--verre .si-tile {
  color: var(--si-ink); background: linear-gradient(150deg, var(--si-glass-hi), var(--si-glass-lo));
  -webkit-backdrop-filter: blur(.11em) saturate(170%); backdrop-filter: blur(.11em) saturate(170%);
  box-shadow: inset 0 0 0 1px var(--si-glass-ring), inset 0 .02em 0 rgba(255, 255, 255, .6), 0 .16em .3em -.14em var(--glow);
}
.si--verre .si-gl-f { opacity: .13; }
.si--verre .si-cap { margin-top: 7cqh; }

/* 3 · Couverture — pochette dégradée : la marque en grand, le pictogramme à droite */
.si--cover {
  display: block; color: #fff; text-align: left;
  background: linear-gradient(140deg, var(--c1) 0%, var(--c2) 78%);
}
.si--cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(85% 120% at 100% 0%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 58%); }
.si--cover .si-obj { position: absolute; right: 6%; top: 50%; margin-top: -.5em; font-size: 56px; font-size: min(50cqh, 36cqw); }
.si--cover .si-gl { width: 100%; height: 100%; filter: drop-shadow(0 .02em .04em rgba(0, 0, 0, .22)); }
.si--cover .si-gl-f { opacity: .26; }
.si--cover .si-cap {
  position: absolute; left: 7%; right: 43%; top: 50%; width: auto; max-width: none; margin: 0; transform: translateY(-50%);
  justify-items: start; gap: .5em; font-size: 12px; font-size: max(11.5px, 7cqw);
}
.si--cover .si-cap b, .si--cover .si-cap i { overflow: visible; color: #fff; white-space: normal; text-overflow: clip; text-wrap: balance; }
.si--cover .si-cap b { font-size: 1em; font-weight: 600; line-height: 1.18; opacity: .94; order: 2; }
.si--cover .si-cap i { font-size: 17px; font-size: max(14px, var(--fs, 10cqw)); font-weight: 750; line-height: 1.04; letter-spacing: -.025em; text-shadow: 0 .06em .2em rgba(0, 0, 0, .16); order: 1; }

/* 4 · Circuit — la plaque bleue des visuels du site, pictogramme en lumière */
.si--circuit {
  color: #e2efff;
  background:
    url("service-icon-traces.webp") center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 44%, #9dc3fa 0%, #7ba8ec 9%, #5c8bd6 20%, #4470b6 32%, #365e9d 44%, #2b4e87 56%, #223f70 69%, #1b3259 84%, #162845 100%);
  background-blend-mode: screen, normal;
}
.si--circuit .si-obj { font-size: 50px; font-size: min(44cqh, 40cqw); }
.si--circuit .si-gl { width: 100%; height: 100%; filter: drop-shadow(0 0 .07em rgba(150, 200, 255, .85)) drop-shadow(0 .02em .04em rgba(4, 14, 40, .45)); }
.si--circuit .si-gl-f { opacity: .2; }
.si--circuit .si-gl g + g { stroke-width: 1.5; }
.si--circuit .si-cap { margin-top: 4cqh; font-size: clamp(12px, 7.6cqw, 22px); }
.si--circuit .si-cap b { display: none; }
.si--circuit .si-cap i { color: #eef5ff; font-size: 1em; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 .1em .3em rgba(3, 10, 30, .6); }

/* 5 · Tonal — fond teinté plein cadre, pictogramme dans un disque clair */
.si--tonal { background: var(--si-tonal); }
.si--tonal .si-obj { font-size: 44px; font-size: min(42cqh, 44cqw); }
.si--tonal .si-tile { border-radius: 50%; color: var(--si-ink); background: var(--si-disc); box-shadow: 0 0 0 .1em rgba(255, 255, 255, .3), 0 0 0 .22em rgba(255, 255, 255, .14); }
[data-theme="dark"] .si--tonal .si-tile { box-shadow: 0 0 0 .1em rgba(255, 255, 255, .04), 0 0 0 .22em rgba(255, 255, 255, .025); }
.si--tonal .si-gl { width: 58%; height: 58%; }
.si--tonal .si-gl-f { opacity: .15; }
.si--tonal .si-cap { margin-top: 10cqh; }

/* Cadres moyens (vignette du catalogue, logo de commande) : texte à taille fixe, lisible. */
@container (max-height: 119px) {
  .si-obj { font-size: min(44cqh, 46cqw); }
  .si-cap, .si--verre .si-cap, .si--tonal .si-cap { margin-top: 4cqh; font-size: 12px; }
  .si-cap i { font-size: 11px; }
  .si--tonal .si-obj { font-size: min(46cqh, 44cqw); }
}
/* Très petits cadres : le pictogramme seul, plus grand. */
@container (max-height: 73px) {
  .si-cap, .si--cover .si-cap { display: none; }
  .si-obj { font-size: min(64cqh, 64cqw); }
  .si--cover .si-obj { position: relative; right: auto; top: auto; margin: 0; font-size: min(60cqh, 60cqw); }
  .si--cover { display: grid; }
  .si--circuit .si-obj { font-size: min(62cqh, 62cqw); }
  .si--tonal .si-obj { font-size: min(70cqh, 70cqw); }
}
/* Cadres étroits : la pochette passe en colonne pour garder un texte lisible. */
@container (max-width: 139px) and (min-height: 90px) {
  .si--cover .si-obj { right: 50%; top: 12%; margin: 0 -.5em 0 0; font-size: 34cqh; }
  .si--cover .si-cap { left: 6%; right: 6%; top: auto; bottom: 8%; transform: none; justify-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) { .si-obj { transition: none; } a:hover .si-obj, .si-host:hover .si-obj { transform: none; } }