/* SOLILO FILMS — composants partagés V3.2 */

/* ============================================================
   Univers cosmique — présent sur TOUTES les pages, sur toute la hauteur
   du document : le champ d'étoiles et les nébuleuses sont peints sur le
   fond du <body>, donc derrière l'intégralité du contenu (et non
   seulement dans la bande de l'en-tête). Uniquement des dégradés CSS :
   aucun asset, aucun média inventé.
   ============================================================ */
.cosmic-bg {
  position: relative;
  overflow: hidden;
  background-color: var(--color-night);
  background-image:
radial-gradient(58% 24% at 86% 3%, rgba(65,105,225,.15), transparent 72%),
radial-gradient(48% 20% at 5% 26%, rgba(16,42,67,.62), transparent 74%),
radial-gradient(34% 14% at 66% 57%, rgba(216,171,118,.055), transparent 76%),
radial-gradient(46% 18% at 26% 94%, rgba(65,105,225,.1), transparent 76%),
    radial-gradient(1.6px 1.6px at 4% 6%, rgba(220,232,239,.68) 48%, transparent 62%),
    radial-gradient(1.2px 1.2px at 13% 18%, rgba(220,232,239,.44) 48%, transparent 62%),
    radial-gradient(1.0px 1.0px at 22% 9%, rgba(243,240,233,.36) 48%, transparent 62%),
    radial-gradient(1.7px 1.7px at 31% 27%, rgba(220,232,239,.6) 48%, transparent 62%),
    radial-gradient(1.1px 1.1px at 40% 14%, rgba(220,232,239,.4) 48%, transparent 62%),
    radial-gradient(1.3px 1.3px at 48% 31%, rgba(220,232,239,.5) 48%, transparent 62%),
    radial-gradient(1.0px 1.0px at 57% 7%, rgba(243,240,233,.34) 48%, transparent 62%),
    radial-gradient(1.8px 1.8px at 65% 22%, rgba(220,232,239,.62) 48%, transparent 62%),
    radial-gradient(1.2px 1.2px at 74% 12%, rgba(220,232,239,.44) 48%, transparent 62%),
    radial-gradient(1.0px 1.0px at 83% 28%, rgba(220,232,239,.36) 48%, transparent 62%),
    radial-gradient(1.5px 1.5px at 92% 16%, rgba(243,240,233,.54) 48%, transparent 62%),
    radial-gradient(1.3px 1.3px at 8% 43%, rgba(220,232,239,.48) 48%, transparent 62%),
    radial-gradient(1.0px 1.0px at 19% 52%, rgba(220,232,239,.34) 48%, transparent 62%),
    radial-gradient(1.6px 1.6px at 28% 66%, rgba(220,232,239,.58) 48%, transparent 62%),
    radial-gradient(1.1px 1.1px at 37% 47%, rgba(243,240,233,.4) 48%, transparent 62%),
    radial-gradient(1.3px 1.3px at 46% 74%, rgba(220,232,239,.5) 48%, transparent 62%),
    radial-gradient(1.0px 1.0px at 55% 57%, rgba(220,232,239,.36) 48%, transparent 62%),
    radial-gradient(1.7px 1.7px at 64% 69%, rgba(220,232,239,.6) 48%, transparent 62%),
    radial-gradient(1.2px 1.2px at 73% 49%, rgba(220,232,239,.44) 48%, transparent 62%),
    radial-gradient(1.0px 1.0px at 82% 76%, rgba(243,240,233,.34) 48%, transparent 62%),
    radial-gradient(1.4px 1.4px at 90% 58%, rgba(220,232,239,.52) 48%, transparent 62%),
    radial-gradient(1.2px 1.2px at 6% 81%, rgba(220,232,239,.46) 48%, transparent 62%),
    radial-gradient(1.5px 1.5px at 16% 92%, rgba(220,232,239,.56) 48%, transparent 62%),
    radial-gradient(1.0px 1.0px at 25% 77%, rgba(243,240,233,.38) 48%, transparent 62%),
    radial-gradient(1.3px 1.3px at 34% 95%, rgba(220,232,239,.48) 48%, transparent 62%),
    radial-gradient(1.1px 1.1px at 43% 63%, rgba(220,232,239,.42) 48%, transparent 62%),
    radial-gradient(1.6px 1.6px at 52% 88%, rgba(220,232,239,.58) 48%, transparent 62%),
    radial-gradient(1.0px 1.0px at 61% 41%, rgba(220,232,239,.34) 48%, transparent 62%),
    radial-gradient(1.2px 1.2px at 70% 96%, rgba(243,240,233,.46) 48%, transparent 62%),
    radial-gradient(1.4px 1.4px at 79% 55%, rgba(220,232,239,.5) 48%, transparent 62%),
    radial-gradient(1.1px 1.1px at 88% 87%, rgba(220,232,239,.4) 48%, transparent 62%),
    radial-gradient(1.5px 1.5px at 96% 71%, rgba(220,232,239,.54) 48%, transparent 62%);
  background-size: 100% 100%,100% 100%,100% 100%,100% 100%,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px,680px 560px;
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat;
}

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 200; padding: .75rem 1rem; background: var(--color-ivory); color: var(--color-night); }
.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, rgba(6,21,37,.97), rgba(6,21,37,.88));
  border-bottom: 1px solid rgba(175,198,214,.1);
  backdrop-filter: blur(10px);
}
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(216,171,118,.35), transparent); }
.header-inner { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; }
.brand { width: 112px; display: flex; flex-direction: column; align-items: center; gap: .18rem; flex: 0 0 auto; }
.brand-logo { width: 76px; height: auto; object-fit: contain; filter: drop-shadow(0 0 12px rgba(220,232,239,.15)); }
.brand-name { color: var(--color-ivory); font: 300 1.05rem/1 var(--font-sans); letter-spacing: .38em; padding-left: .38em; text-align: center; }
.brand-name small { display: block; margin-top: .55rem; color: var(--color-ivory); font-size: .48rem; letter-spacing: .52em; }
.desktop-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(1.25rem,2.8vw,3rem); }
.desktop-nav a { position: relative; padding-block: .75rem; color: var(--color-mist); font-size: .69rem; letter-spacing: .16em; text-transform: uppercase; transition: color var(--dur-comp) var(--ease-out), text-shadow var(--dur-comp) var(--ease-out); }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--color-ivory); text-shadow: 0 0 16px rgba(220,232,239,.35); }
.desktop-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: .35rem; height: 1px; background: linear-gradient(90deg, transparent, var(--color-light), transparent); opacity: .8; box-shadow: 0 0 8px rgba(220,232,239,.5); }
.desktop-nav a.nav-contact { color: var(--color-ivory); font-weight: 500; }
.desktop-nav a.nav-contact:hover { color: var(--color-gold); text-shadow: 0 0 16px rgba(216,171,118,.4); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 10px; }
.nav-toggle span { display: block; width: 24px; height: 1px; margin: 6px auto; background: var(--color-ivory); transition: transform var(--dur-comp) var(--ease-out), opacity var(--dur-comp); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { display: none; position: fixed; inset: 0; z-index: 55; padding: 7rem var(--gutter) 3rem; background: var(--color-night); flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; }
.mobile-nav.open { display: flex; }
.mobile-nav a { min-height: 44px; display: inline-flex; align-items: center; text-align: center; color: var(--color-mist); font: 300 clamp(1.45rem,7vw,2rem)/1.15 var(--font-serif); }
.mobile-nav a.nav-contact { color: var(--color-ivory); }
body.menu-open { overflow: hidden; }

.cta-encounter { position: relative; min-height: 520px; overflow: hidden; display: grid; place-items: center; padding: 6rem var(--gutter); border-top: 1px solid rgba(175,198,214,.1); background: #061525; isolation: isolate; }
.cta-encounter::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
  radial-gradient(22% 20% at 46% 50%, rgba(220,232,239,.10), transparent 70%),
  radial-gradient(34% 30% at 52% 48%, rgba(16,42,67,.5), transparent 70%),
  radial-gradient(18% 16% at 58% 52%, rgba(220,232,239,.06), transparent 70%),
  radial-gradient(50% 45% at 50% 50%, rgba(16,42,67,.4), transparent 72%); }
.encounter-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.encounter-stars { position: absolute; inset: 0; z-index: -1; opacity: .42; background-image:
  radial-gradient(1px 1px at 8% 23%, rgba(220,232,239,.5) 50%,transparent 55%),
  radial-gradient(1px 1px at 19% 70%, rgba(220,232,239,.34) 50%,transparent 55%),
  radial-gradient(1px 1px at 31% 37%, rgba(220,232,239,.42) 50%,transparent 55%),
  radial-gradient(1px 1px at 69% 28%, rgba(220,232,239,.38) 50%,transparent 55%),
  radial-gradient(1px 1px at 82% 74%, rgba(220,232,239,.42) 50%,transparent 55%),
  radial-gradient(1px 1px at 93% 42%, rgba(220,232,239,.32) 50%,transparent 55%); }
/* Scintillement indépendant : 3 couches d'étoiles, chacune avec sa propre animation décalée */
.encounter-stars::before, .encounter-stars::after { content: ""; position: absolute; inset: 0; }
.encounter-stars::before { background-image:
  radial-gradient(1px 1px at 12% 48%, rgba(220,232,239,.5) 50%,transparent 55%),
  radial-gradient(1px 1px at 44% 18%, rgba(220,232,239,.4) 50%,transparent 55%),
  radial-gradient(1px 1px at 58% 66%, rgba(220,232,239,.45) 50%,transparent 55%),
  radial-gradient(1px 1px at 88% 20%, rgba(220,232,239,.38) 50%,transparent 55%);
  animation: solilo-twinkle 5.5s ease-in-out 1.2s infinite; }
.encounter-stars::after { background-image:
  radial-gradient(1px 1px at 24% 12%, rgba(220,232,239,.42) 50%,transparent 55%),
  radial-gradient(1px 1px at 37% 82%, rgba(220,232,239,.36) 50%,transparent 55%),
  radial-gradient(1px 1px at 76% 52%, rgba(220,232,239,.4) 50%,transparent 55%),
  radial-gradient(1px 1px at 95% 78%, rgba(220,232,239,.34) 50%,transparent 55%);
  animation: solilo-twinkle 6.5s ease-in-out 2.4s infinite; }
.encounter-content { position: relative; z-index: 2; text-align: center; }
.encounter-title { margin: 0 0 1.75rem; color: var(--color-ivory); font: 300 clamp(2.25rem,4.25vw,4rem)/1.12 var(--font-serif); text-shadow: 0 0 40px rgba(220,232,239,.2); }
.encounter-link { display: inline-flex; align-items: center; min-height: 44px; gap: 1rem; color: var(--color-gold); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; }
.encounter-link span { font-size: 1.2rem; transition: transform var(--dur-comp) var(--ease-out); }
.encounter-link:hover span { transform: translateX(4px); }

.site-footer { position: relative; background: #04101c; border-top: 1px solid rgba(175,198,214,.12); overflow: hidden; }
.site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(55% 75% at 12% 35%, rgba(16,42,67,.42), transparent 72%),
  linear-gradient(90deg, rgba(220,232,239,.035), transparent 28%, transparent 72%, rgba(220,232,239,.025)); }
/* Scène cosmique du pied de page : anneau discret, noyau chaud, ceinture
   d'Orion et poussière d'étoiles — le même univers que les en-têtes. */
.footer-cosmic { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.footer-cosmic::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: min(76rem, 130vw); aspect-ratio: 1.95;
  transform: translate(-50%, -50%) rotate(-6deg);
  border: 1px solid rgba(220,232,239,.13); border-radius: 50%;
  background:
    radial-gradient(circle at 63% 45%, rgba(243,240,233,.42) 0%, rgba(216,171,118,.2) 3%, rgba(65,105,225,.11) 13%, transparent 34%),
    radial-gradient(2.3px 2.3px at 44% 39%, rgba(255,255,255,.85) 40%, transparent 62%),
    radial-gradient(1.8px 1.8px at 47.5% 36.5%, rgba(255,255,255,.78) 40%, transparent 62%),
    radial-gradient(2.3px 2.3px at 51% 34%, rgba(255,255,255,.85) 40%, transparent 62%),
    radial-gradient(1px 1px at 18% 64%, rgba(220,232,239,.5) 50%, transparent 62%),
    radial-gradient(1.2px 1.2px at 33% 22%, rgba(220,232,239,.42) 50%, transparent 62%),
    radial-gradient(1px 1px at 58% 68%, rgba(220,232,239,.4) 50%, transparent 62%),
    radial-gradient(1.3px 1.3px at 72% 28%, rgba(220,232,239,.48) 50%, transparent 62%),
    radial-gradient(1px 1px at 88% 62%, rgba(220,232,239,.38) 50%, transparent 62%);
  box-shadow: inset 0 0 90px rgba(220,232,239,.04);
}
.footer-compact { position: relative; display: grid; grid-template-columns: 1.3fr 1.05fr 1fr auto; gap: clamp(2rem,4vw,4.5rem); align-items: center; padding-block: 2.6rem; }
.footer-identity { display: flex; align-items: center; gap: 1.15rem; color: var(--color-ivory); }
.footer-logo { width: 58px; height: auto; opacity: .96; }
.footer-identity strong { display: block; font-size: .82rem; font-weight: 400; letter-spacing: .3em; }
.footer-identity small { display: block; margin-top: .35rem; color: rgba(243,240,233,.52); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; }
.footer-address { margin: 0; color: rgba(243,240,233,.68); font-style: normal; font-size: .73rem; line-height: 1.75; }
.footer-address a { color: var(--color-ivory); transition: color var(--dur-comp) var(--ease-out); }
.footer-address a:hover { color: var(--color-light); }
.footer-essential-links { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-essential-links a { color: rgba(243,240,233,.8); }
.footer-essential-links a:hover { color: var(--color-ivory); }
.footer-essential-links span { color: rgba(243,240,233,.42); font-size: .54rem; }
.footer-social { display: flex; gap: .7rem; }
.social-link { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(175,198,214,.18); border-radius: 50%; color: var(--color-mist); transition: color var(--dur-comp) var(--ease-out), border-color var(--dur-comp) var(--ease-out), transform var(--dur-comp) var(--ease-out), box-shadow var(--dur-comp) var(--ease-out); }
.social-link img { width: 16px; height: 16px; filter: invert(1) brightness(1.6); opacity: .8; transition: opacity var(--dur-comp) var(--ease-out); }
.social-link:hover { border-color: rgba(220,232,239,.5); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(175,198,214,.12); }
.social-link:hover img { opacity: 1; }
.footer-signature { position: relative; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; border-top: 1px solid rgba(175,198,214,.08); color: rgba(243,240,233,.38); font-size: .52rem; letter-spacing: .16em; text-transform: uppercase; }

@media (max-width: 1023px) {
  .header-inner { min-height: 78px; }
  .brand { width: 86px; align-items: flex-start; }
  .brand-logo { width: 64px; }
  .brand-name { font-size: .8rem; letter-spacing: .3em; padding-left: .3em; }
  .brand-name small { font-size: .4rem; }
  .desktop-nav { display: none; }
  .nav-toggle { display: block; position: relative; z-index: 2; }
  .footer-compact { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; padding-block: 2.2rem; }
  .footer-signature { padding-block: 1.2rem; flex-direction: column; text-align: center; }
}

@media (max-width: 640px) {
  .cta-encounter { min-height: 430px; padding-block: 5rem; }
  .encounter-title { font-size: clamp(2rem,10.5vw,2.75rem); }
  .desktop-break { display: none; }
  .footer-compact { grid-template-columns: 1fr; gap: 1.6rem; padding-block: 2rem 1.6rem; }
  .footer-identity, .footer-address, .footer-essential-links { align-items: flex-start; }
  .footer-social { gap: .7rem; }
}