/* Thème du site (direction V3 · Verre et lumière) : une aurore canard qui dérive lentement derrière des panneaux de verre.
   Les cartes captent la lumière du curseur, les éléments phares ont une bordure lumineuse qui tourne. */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

html { background: #07081A; }
body { background: transparent; }
body::after { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 35% at 20% 25%, rgba(26, 154, 154, .38), transparent 70%),
    radial-gradient(35% 30% at 80% 20%, rgba(70, 90, 210, .32), transparent 70%),
    radial-gradient(45% 40% at 70% 80%, rgba(60, 194, 192, .26), transparent 70%),
    radial-gradient(40% 35% at 15% 85%, rgba(37, 38, 94, .55), transparent 70%),
    #07081A;
  filter: blur(40px) saturate(120%); animation: aurora 38s ease-in-out infinite alternate; }
@keyframes aurora { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(-4%, 3%, 0) rotate(8deg) scale(1.08); } 100% { transform: translate3d(3%, -2%, 0) rotate(-6deg) scale(1.02); } }

/* Sections translucides : l'aurore se devine partout */
.s, .s--alt, .marquee, .foot { background: rgba(7, 8, 26, .3); }
.s--alt { background: rgba(255, 255, 255, .025); border-color: rgba(255, 255, 255, .06); }
.s--dark { background: rgba(18, 19, 46, .28); }
.s--dark::before { opacity: .5; }
.hero { background: transparent; }
.nav.is-scrolled { background: rgba(10, 11, 32, .45); }

/* Panneaux de verre */
.card, .s--dark .card, .door, .form, .s--dark .form, .app, .s--dark .app, .hero .app {
  background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .6); }
.card, .door, .btn, .form, .app { border-radius: 20px; }
.btn { border-radius: 999px; }

/* Projecteur qui suit le curseur */
.card::before, .door::before { content: ""; position: absolute; inset: 0; padding: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  -webkit-mask: none; mask: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(60, 194, 192, .18), transparent 45%);
  transition: opacity .3s; }
.card:hover::before, .door:hover::before { opacity: 1; }
.card:hover { transform: translateY(-4px); }

/* Bordure lumineuse qui tourne sur les éléments phares */
.sol--hero, .cta .form, .plan--featured { position: relative; }
.sol--hero::after, .cta .form::after { content: ""; position: absolute; inset: -1px; top: -1px; right: -1px; width: auto; height: auto; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 65%, #3CC2C0 78%, #B9C0F0 85%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 6s linear infinite; box-shadow: none; }
@keyframes spin { to { --ang: 360deg; } }
.sol--hero { background: rgba(18, 19, 46, .6); }

/* Bande « Avant / Pendant / Après » : grand panneau de verre au lieu du dégradé plein */
.s--band { background: transparent; }
.s--band::before { display: none; }
.s--band .band { padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: linear-gradient(135deg, rgba(37, 38, 94, .55), rgba(19, 106, 114, .35));
  border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }

/* Titres légèrement irisés */
.h-xl, .h-lg { background: linear-gradient(180deg, #FFFFFF 30%, #B9C6E6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-xl .grad-txt, .h-lg .grad-txt { -webkit-text-fill-color: transparent; }

/* Grain photographique très léger : donne de la matière au verre */
html::after { content: ""; position: fixed; inset: 0; z-index: 61; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Halo de lumière qui suit le curseur à travers toute la page */
.v3-light { position: fixed; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 194, 192, .16), rgba(60, 194, 192, .05) 45%, transparent 70%); transform: translate3d(50vw, 40vh, 0); will-change: transform; }

/* Verre en relief : légère inclinaison des cartes vers le curseur */
.card { transform-style: preserve-3d; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.card.is-tilt { transition: transform .12s linear; }

.hero__sub { max-width: 50ch; }
.nav.is-scrolled { border-bottom-color: rgba(255, 255, 255, .08); }

@media (prefers-reduced-motion: reduce) { body::after { animation: none; } .sol--hero::after, .cta .form::after { animation: none; } .v3-light { display: none; } }

/* Page sobre (Assistant de succession) : l'aurore reste immobile, pas de halo ni de bordure animée */
body.is-soft::after { animation: none; opacity: .6; }
.is-soft .v3-light { display: none; }
.is-soft .hero--soft { background: rgba(15, 16, 41, .55); }
.is-soft .card:hover { transform: none; }