Trois swatches sources définissent toute la palette. Chaque thème dérive ses valeurs via var() — aucune couleur n'est dupliquée.

/* Swatches bruts */
--sw-blue:   #BFDFF0; /* S6.14.75 */
--sw-orange: #F0A45F; /* E4.40.70 */
--sw-coral:  #EF6B4C; /* D2.50.55 */

/* Mix card4 + card1 + card2 */
--c-bg:     linear-gradient(#1a2d3f, #07111a);
--c-accent: #BFDFF0;  /* h3 bleu card1 */
--h-ring:   rgba(240,164,95,.80); /* hover card2 */

L'illusion de profondeur est obtenue par 3 couches d'ombre inset dont le rayon croît, complétées d'un highlight bas et d'un ring 1 px thématisé.

.icon-box {
  isolation: isolate;
  box-shadow:
    inset 0px 1px 1px -.5px rgba(0,0,0,.10),
    inset 0px 3px 3px -1.5px rgba(0,0,0,.14),
    inset 0px 6px 6px  -3px rgba(0,0,0,.18),
    inset 0 -1px rgba(191,223,240,.06),
    inset 0 0 0 1px var(--c-border);
}

• isolation: isolate → évite les conflits de stacking
• Le spread négatif (-3px) concentre l'ombre vers le centre
• Le highlight 0 -1px simule un bord inférieur lumineux

La card ne bouge pas au hover. L'effet repose uniquement sur box-shadow : ring opaque + double glow diffus. Le h3 change de couleur via transition: color.

.card { transition: box-shadow .24s ease; }
.card h3 { transition: color .24s ease; }

.card:hover {
  box-shadow:
    0 0 0 1.5px var(--h-ring),      /* ring */
    0 0 14px 0px var(--h-glow-near), /* glow proche */
    0 0 32px -4px var(--h-glow-far); /* glow lointain */
}
.card:hover h3 { color: var(--sw-orange); }

• Zéro transform — la card reste en place
• Deux niveaux de glow pour un dégradé lumineux naturel
• Couleur orange card2 sur fond dark card4 = contraste maximal

Le div wrapper réagit à l'état hover de son enfant .card via le sélecteur :has() — aucun JS, aucune classe ajoutée dynamiquement.

/* Au repos — ring discret */
div[data-reveal="card"] {
  box-shadow: 0 0 0 1px var(--cw-ring);
  transition: box-shadow .24s ease;
}
/* Hover enfant → wrapper s'illumine */
div[data-reveal="card"]:has(.card:hover) {
  box-shadow:
    0 0 0 1.5px var(--cw-ring-hov),
    0 0 20px -2px var(--cw-ring-hov);
}

• Support Chrome 105+, Firefox 121+, Safari 15.4+
• Le wrapper utilise overflow: visible pour laisser déborder le glow
• Pattern extensible : :has(.variant-N) pour thèmes multiples

oklch(L C H) exprime une couleur en luminosité perceptuelle, chroma et teinte. Deux couleurs au même L semblent réellement aussi claires à l'œil humain — contrairement à rgb().

/* rgb : luminosité perçue ≠ valeur numérique */
color: rgb(240, 164, 95);  /* orange */
color: rgb(191, 223, 240); /* bleu  */

/* oklch : même L = même luminosité perçue */
color: oklch(0.74 0.12 55);  /* orange */
color: oklch(0.88 0.05 220); /* bleu  */

/* Les 3 axes :
   L = 0→1    (noir → blanc)
   C = 0→0.4  (gris → saturé)
   H = 0→360  (teinte en degrés) */

• Gamut P3 accessible — couleurs plus vives que sRGB sur écrans modernes
• Interpolation de dégradés visuellement homogène (pas de zone terne)
• Chrome 111+, Safari 15.4+, Firefox 113+ — support large sans fallback

La Relative Color Syntax dérive une couleur depuis un token existant en ne changeant qu'un axe — ici l'alpha. Un seul token source remplace 3 variables rgba() dupliquées.

/* ── Sans RCS : 3 tokens pour 1 couleur ── */
--sw-orange:    #F0A45F;
--h-glow-near: rgba(240,164,95,0.20);
--h-glow-far:  rgba(240,164,95,0.10);

/* ── Avec RCS : 1 seul token source ── */
--sw-orange: oklch(0.74 0.12 55);

box-shadow:
  0 0 14px oklch(from var(--sw-orange) l c h / 20%),
  0 0 32px oklch(from var(--sw-orange) l c h / 10%);

• Modifier --sw-orange met à jour tous les glows automatiquement
• On peut aussi changer L : calc(l - 0.1) pour assombrir dynamiquement
• Compat restreinte : from var(--token) → Chrome 119+, Safari 16.4+, Firefox 128+ — conserver rgba() en fallback si audience large