/* Cartes « aurore » : le fond des cartes claires du dashboard.
   Avant : un blanc quadrillé. Maintenant : une lumière colorée par l'état de la carte (vert quand rien ne bouge, orange à surveiller,
   rose en alerte, violet de la marque pour le reste), un second halo violet à l'opposé, un contour fin et vif qui passe de la couleur de
   la carte au violet, une pastille d'icône qui brille, de la profondeur. Plus de carreaux.

   S'applique aux cartes de : Alertes (« Ce que SentinelleFin surveille »), Score de vigilance (console, protection, à venir),
   Assistance (« À lire en premier »), Carte SIM et Immobilier (« Ce que ça fait »).
   Chargé APRÈS la feuille de chaque page (et cartes-design.css), avant degrade-marque.css. Jetons du design system seulement. */

/* ═════════════ Le fond commun : lumière du ton, halo violet, contour dégradé ═════════════ */
.al-cov__carte,
.sim-explication__item, .immo-explication__item,
.vg-pro, .vg-futur {
  --ton: var(--ton-carte, var(--couleur, var(--brand-5)));
  background:
    radial-gradient(120% 95% at 0% 0%, color-mix(in srgb, var(--ton) 21%, transparent) 0%, transparent 58%) padding-box,
    radial-gradient(90% 90% at 100% 100%, rgba(110, 106, 177, .17) 0%, transparent 64%) padding-box,
    linear-gradient(165deg, #fdfcff 0%, #f0edfb 100%) padding-box,
    linear-gradient(140deg, color-mix(in srgb, var(--ton) 82%, #fff) 0%, rgba(110, 106, 177, .6) 52%, color-mix(in srgb, var(--ton) 38%, #fff) 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 26px 46px -30px color-mix(in srgb, var(--ton) 62%, rgba(25, 20, 62, .7)),
    0 2px 6px -2px rgba(66, 55, 122, .12);
}
.al-cov__carte:hover, .sim-explication__item:hover, .immo-explication__item:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 32px 52px -28px color-mix(in srgb, var(--ton) 70%, rgba(25, 20, 62, .7)),
    0 2px 8px -2px rgba(66, 55, 122, .16);
}
/* Le filet de couleur en tête de carte laisse la place au contour dégradé. */
.al-cov__carte::before, .sim-explication__item::before, .immo-explication__item::before { display: none; }

/* ═════════════ La pastille d'icône : verre teinté, anneau, lueur ═════════════ */
.al-cov__carte .al-tuile,
.sim-explication__icone, .immo-explication__icone,
.vg-pro__etat, .vg-ligne__icone, .vg-futur__icone {
  color: var(--ton);
  background: linear-gradient(145deg, color-mix(in srgb, var(--ton) 28%, #fff) 0%, color-mix(in srgb, var(--ton) 8%, #fff) 100%);
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--ton) 42%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 10px 20px -10px color-mix(in srgb, var(--ton) 78%, transparent);
}
.vg-pro__etat, .vg-ligne__icone { --ton: var(--couleur); }
.vg-futur__icone { --ton: var(--brand-5); }

/* ═════════════ Alertes : « Ce que SentinelleFin surveille » ═════════════ */
.al-cov__filigrane { opacity: .11; }
.al-cov__carte[data-etat="off"] {
  background: linear-gradient(165deg, rgba(255, 255, 255, .78), rgba(240, 237, 251, .62));
  border: 1.5px dashed rgba(110, 106, 177, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.al-cov__carte[data-etat="off"] .al-tuile { --ton: var(--brand-5); }
.al-pastille { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton) 30%, transparent); background: color-mix(in srgb, var(--ton) 12%, #fff); }
.al-cov__lien { border-top: 1.5px solid color-mix(in srgb, var(--ton) 24%, rgba(110, 106, 177, .16)); }

/* ═════════════ Carte SIM et Immobilier : trois facettes ═════════════ */
.sim-explication__item::after, .immo-explication__item::after { opacity: .08; top: 6px; bottom: auto; right: 14px; font-size: 72px; }
.sim-explication__tag, .immo-explication__tag {
  background: color-mix(in srgb, var(--ton) 13%, #fff);
  border-color: color-mix(in srgb, var(--ton) 40%, transparent);
}

/* ═════════════ Score de vigilance : la console du comportement ═════════════ */
.vg-console {
  --ton: var(--brand-5);
  background:
    radial-gradient(75% 60% at 0% 0%, color-mix(in srgb, var(--ton) 17%, transparent) 0%, transparent 62%) padding-box,
    radial-gradient(65% 75% at 100% 100%, rgba(110, 106, 177, .2) 0%, transparent 62%) padding-box,
    linear-gradient(165deg, #fdfcff 0%, #efecfb 100%) padding-box,
    linear-gradient(140deg, color-mix(in srgb, var(--ton) 70%, #fff) 0%, rgba(110, 106, 177, .62) 50%, color-mix(in srgb, var(--ton) 32%, #fff) 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 30px 56px -34px rgba(66, 55, 122, .6);
}
.vg-console::before { display: none; }
/* La lumière de la console suit l'indicateur choisi : verte, orange ou rose. */
.vg-console:has(.vg-detail[data-etat="sur"])       { --ton: var(--vg-sur); }
.vg-console:has(.vg-detail[data-etat="vigilance"]) { --ton: var(--vg-vigilance); }
.vg-console:has(.vg-detail[data-etat="critique"])  { --ton: var(--vg-critique); }

.vg-liste {
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .3));
  border-right: 1.5px solid rgba(110, 106, 177, .2);
}
.vg-ligne { --ton: var(--couleur); border: 1.5px solid transparent; padding: 10.5px 12.5px; }
.vg-ligne:hover { background: rgba(255, 255, 255, .6); }
.vg-ligne[aria-selected="true"] {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--couleur), rgba(110, 106, 177, .55)) border-box;
  box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--couleur) 62%, rgba(25, 20, 62, .6)), 0 0 24px -8px color-mix(in srgb, var(--couleur) 45%, transparent);
}
.vg-liste__pied { border-top: 1.5px dashed rgba(110, 106, 177, .3); }

.vg-detail { --ton: var(--couleur); }
.vg-visuel {
  background: linear-gradient(160deg, color-mix(in srgb, var(--couleur) 8%, rgba(255, 255, 255, .55)), rgba(255, 255, 255, .3));
  border: 1.5px solid color-mix(in srgb, var(--couleur) 22%, rgba(110, 106, 177, .18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
.vg-compteur, .vg-op {
  --ton: var(--couleur);
  background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .66));
  border: 1.5px solid color-mix(in srgb, var(--couleur) 24%, rgba(110, 106, 177, .2));
  box-shadow: inset 0 1px 0 #fff, 0 14px 26px -20px color-mix(in srgb, var(--couleur) 58%, rgba(25, 20, 62, .6));
}
.vg-op::before { background: #fff; }

/* ═════════════ Score de vigilance : la protection autour du compte, une carte par thème ═════════════ */
.vg-protection { background: none; box-shadow: none; overflow: visible; display: grid; gap: 14px; border-radius: 0; }
.vg-pro { --ton-carte: var(--couleur); border-radius: 22px; }
.vg-pro + .vg-pro { border-top: 1.5px solid transparent; }
.vg-pro__etat { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ton) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 20px -10px color-mix(in srgb, var(--ton) 78%, transparent); }
.vg-pro__puce { background: color-mix(in srgb, var(--couleur) 13%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--couleur) 30%, transparent); }
.vg-pro__mini { background: rgba(110, 106, 177, .16); }
.vg-pro__details summary { padding: 2px 0; }
.vg-pro__action { background: rgba(255, 255, 255, .7); }

/* ═════════════ Score de vigilance : « À venir » (pas encore compté : pointillé conservé) ═════════════ */
.vg-futur {
  --ton-carte: var(--brand-5);
  border: 1.5px dashed rgba(110, 106, 177, .55);
  background:
    radial-gradient(110% 95% at 0% 0%, rgba(110, 106, 177, .15) 0%, transparent 60%),
    linear-gradient(165deg, rgba(255, 255, 255, .85), rgba(240, 237, 251, .6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ═════════════ Assistance : « À lire en premier » ═════════════ */
.assist-urgence {
  background:
    radial-gradient(100% 80% at 0% 0%, rgba(240, 170, 60, .3) 0%, transparent 60%) padding-box,
    radial-gradient(80% 90% at 100% 100%, rgba(110, 106, 177, .15) 0%, transparent 62%) padding-box,
    linear-gradient(165deg, #fffdf8 0%, #fff2dc 100%) padding-box,
    linear-gradient(140deg, #e0982a 0%, rgba(110, 106, 177, .5) 58%, #f2c06a 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 30px 54px -32px rgba(176, 112, 11, .55), 0 2px 8px -2px rgba(66, 55, 122, .12);
}
.assist-urgence__icone {
  background: linear-gradient(145deg, #fff, #ffe9c2);
  box-shadow: inset 0 0 0 1.5px rgba(217, 138, 31, .45), inset 0 1px 0 #fff, 0 12px 22px -10px rgba(176, 112, 11, .7);
}
.assist-urgence__etapes li {
  background: linear-gradient(160deg, rgba(255, 255, 255, .96) 0%, rgba(255, 249, 238, .72) 100%);
  border: 1.5px solid rgba(217, 138, 31, .36);
  box-shadow: inset 0 1px 0 #fff, 0 18px 32px -24px rgba(176, 112, 11, .65);
}
.assist-urgence__etapes li::before { width: 4px; background: linear-gradient(180deg, #e0982a, rgba(217, 138, 31, .12)); }

/* ═════════════ Alertes : les cartes d'alerte elles-mêmes (leur ton est posé par la classe de niveau) ═════════════ */
.al-carte:not(.al-carte--critique) {
  background:
    radial-gradient(120% 95% at 0% 0%, color-mix(in srgb, var(--ton) 20%, transparent) 0%, transparent 58%) padding-box,
    radial-gradient(90% 90% at 100% 100%, rgba(110, 106, 177, .16) 0%, transparent 64%) padding-box,
    linear-gradient(165deg, #fdfcff 0%, #f0edfb 100%) padding-box,
    linear-gradient(140deg, color-mix(in srgb, var(--ton) 82%, #fff) 0%, rgba(110, 106, 177, .6) 52%, color-mix(in srgb, var(--ton) 38%, #fff) 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 26px 46px -30px color-mix(in srgb, var(--ton) 62%, rgba(25, 20, 62, .7)), 0 2px 6px -2px rgba(66, 55, 122, .12);
}
.al-carte:not(.al-carte--critique)::before { display: none; }
.al-carte:not(.al-carte--critique) .al-tuile {
  background: linear-gradient(145deg, color-mix(in srgb, var(--ton) 28%, #fff) 0%, color-mix(in srgb, var(--ton) 8%, #fff) 100%);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ton) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 20px -10px color-mix(in srgb, var(--ton) 78%, transparent);
}