/* Homepage black hole scene (mockup 01/11/2026, v2 the same day; on the real homepage since 02/11/2026 as /asset/trou-noir/trou-noir.css) */
.tn-scene { position: relative; overflow: hidden; isolation: isolate; --tn-x: 50%; --tn-y: 50%; --tn-s: 120px; }
.tn-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
    mask-composite: intersect; }
.tn-video-boite { position: absolute;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 86%, transparent 100%); }
.tn-video-forme { position: absolute; inset: 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.tn-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.tn-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tn-calque { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* Centre: BravRez inside the shadow */
.tn-centre { position: absolute; left: var(--tn-x); top: var(--tn-y); transform: translate(-50%, -50%); margin-top: calc(var(--tn-s) * -0.2); z-index: 3;
    pointer-events: none; text-align: center; }
.tn-js .tn-centre { opacity: 0; transition: opacity 1.4s ease; }
.tn-js .tn-centre.tn-on { opacity: 1; }
.tn-centre img { display: block; width: calc(var(--tn-s) * 1.05); max-width: none; height: auto;
    filter: drop-shadow(0 0 calc(var(--tn-s) * 0.06) rgba(255, 118, 52, .65)); animation: tn-respire 6s ease-in-out infinite; }
@keyframes tn-respire { 50% { filter: drop-shadow(0 0 calc(var(--tn-s) * 0.12) rgba(255, 150, 90, .85)); } }

/* Centre title: breathes slowly, flares when light reaches the centre (--tn-ping is set by the script) */
.tn-centre h1 { animation: tn-pouls 4.2s ease-in-out infinite; will-change: transform;
    filter: drop-shadow(0 0 calc(var(--tn-s) * (0.035 + 0.09 * var(--tn-ping, 0))) rgba(255, 128, 60, calc(.45 + .5 * var(--tn-ping, 0)))); }
.tn-centre::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--tn-s) * 1.5); height: calc(var(--tn-s) * 0.9);
    transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: -1;
    background: radial-gradient(closest-side, rgba(255, 118, 52, .16), rgba(255, 118, 52, 0));
    animation: tn-halo 4.2s ease-in-out infinite; }
@keyframes tn-pouls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes tn-halo { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Satellites: the link box is the planet, the label hangs on the outer side */
.tn-sat { --tn-p: 18px; position: absolute; left: 0; top: 0; width: var(--tn-p); height: var(--tn-p); margin: calc(var(--tn-p) / -2) 0 0 calc(var(--tn-p) / -2); z-index: 4;
    color: #f4efe8; text-decoration: none; will-change: transform, opacity; --c: #FF7634; }
.tn-js .tn-sat { opacity: 0; }
.tn-planete { position: absolute; inset: 0; border-radius: 50%; transition: transform .35s ease;
    background: radial-gradient(circle at 34% 30%, #fff 0, var(--c) 38%, #1a0a04 100%);
    box-shadow: 0 0 10px 2px var(--c), 0 0 30px 4px rgba(255, 140, 80, .25); }
.tn-sat::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--c); opacity: .35; }
.tn-etiquette { position: absolute; left: calc(var(--tn-p) + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; line-height: 1.15;
    text-shadow: 0 0 6px #000, 0 0 2px #000, 0 0 14px #000; pointer-events: none; }
.tn-sat.tn-gauche .tn-etiquette { left: auto; right: calc(var(--tn-p) + 10px); text-align: right; }
.tn-etiquette b { display: block; font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.tn-etiquette small { display: block; font-size: 13px; color: var(--c); opacity: 0; max-height: 0; transition: opacity .3s, max-height .3s; }
.tn-sat:hover .tn-planete, .tn-sat:focus-visible .tn-planete, .tn-sat.tn-actif .tn-planete { transform: scale(1.35); }
.tn-sat:hover .tn-etiquette small, .tn-sat:focus-visible .tn-etiquette small, .tn-sat.tn-actif .tn-etiquette small { opacity: 1; max-height: 20px; }
.tn-sat:focus-visible { outline: none; }
.tn-sat:focus-visible .tn-planete { outline: 2px solid #fff; outline-offset: 4px; }
.tn-desc { display: none; }
.tn-icone { display: none; }

/* Planets with the service icon: dark glass globe, rim in the service colour, lit by the disk on the side facing the hole */
.tn-pl-icones .tn-sat { --tn-p: 46px; }
.tn-pl-icones .tn-planete { overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #120b07 0, #120b07 52%, color-mix(in srgb, var(--c) 45%, #120b07) 100%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 75%, transparent), 0 0 16px 2px color-mix(in srgb, var(--c) 50%, transparent), 0 0 42px 6px rgba(255, 140, 80, .14); }
.tn-pl-icones .tn-planete::before { content: ''; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen;
    background: linear-gradient(var(--lum, 90deg), rgba(0, 0, 0, 0) 40%, color-mix(in srgb, #FFE6C9 65%, var(--c)) 100%); opacity: .75; }
.tn-pl-icones .tn-icone { display: block; position: absolute; inset: 21%; color: #FFF3E8; z-index: 1;
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c) 80%, transparent)); }
.tn-icone svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tn-pl-icones .tn-sat::after { inset: -8px; opacity: .3; }
.tn-pl-icones .tn-sat:hover .tn-planete, .tn-pl-icones .tn-sat:focus-visible .tn-planete, .tn-pl-icones .tn-sat.tn-actif .tn-planete { transform: scale(1.14); }

/* Comets: a bright head, the tail and the sparks are drawn by the script */
.tn-pl-cometes .tn-sat { --tn-p: 16px; }
.tn-pl-cometes .tn-planete { background: radial-gradient(circle, #fff 0, #fff 24%, var(--c) 52%, rgba(0, 0, 0, 0) 74%);
    box-shadow: 0 0 14px 3px color-mix(in srgb, var(--c) 70%, transparent), 0 0 34px 8px color-mix(in srgb, var(--c) 25%, transparent);
    animation: tn-noyau 2.4s ease-in-out infinite; }
.tn-pl-cometes .tn-sat::after { display: none; }
@keyframes tn-noyau { 50% { box-shadow: 0 0 20px 5px color-mix(in srgb, var(--c) 85%, transparent), 0 0 48px 12px color-mix(in srgb, var(--c) 30%, transparent); } }
.tn-court { display: none; }

@media (max-width: 767px) {
    .tn-etiquette b { font-size: 14px; }
    .tn-etiquette small { font-size: 12px; }
    .tn-sat { --tn-p: 14px; }
    .tn-pl-icones .tn-sat { --tn-p: 30px; }
    .tn-pl-cometes .tn-sat { --tn-p: 13px; }
    .tn-long { display: none; }
    .tn-court { display: inline; }
    .tn-etiquette, .tn-sat.tn-gauche .tn-etiquette { left: 50%; right: auto; top: calc(var(--tn-p) + 4px); transform: translateX(-50%); text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .tn-centre img, .tn-centre h1, .tn-centre::before, .tn-pl-cometes .tn-planete { animation: none; }
    .tn-js .tn-centre { transition: none; }
}

/* Without the script (no .tn-js): the centre on top, the four services as a plain row of links underneath */
.tn-scene:not(.tn-js) { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 26px 40px;
    height: auto; min-height: 0; max-height: none; padding: 56px 16px; }
.tn-scene:not(.tn-js) .tn-centre { position: static; flex-basis: 100%; transform: none; margin: 0; }
.tn-scene:not(.tn-js) .tn-sat { position: relative; display: flex; align-items: center; gap: 12px; width: auto; height: auto; margin: 0; }
.tn-scene:not(.tn-js) .tn-sat::after { display: none; }
.tn-scene:not(.tn-js) .tn-planete { position: relative; flex: none; width: var(--tn-p); height: var(--tn-p); }
.tn-scene:not(.tn-js) .tn-etiquette { position: static; transform: none; text-align: left; }
.tn-scene:not(.tn-js) .tn-etiquette small { opacity: 1; max-height: 20px; }