/* Cartons d'ouverture : matière / tracé / amorce. Même symbole, trois écritures. */
#boot { display: none; }
html.booting #boot, html.sg-exit #boot { display: block; position: fixed; inset: 0; z-index: 500; overflow: hidden; color: #ece8e1; cursor: pointer; animation: boot-failsafe 0s 4.5s forwards; }
html.booting body, html.sg-exit body { overflow: hidden; }
html.booting body > :not(#boot), html.booting body > :not(#boot) * { animation-play-state: paused !important; }
#boot * { pointer-events: none; }
@keyframes boot-failsafe { to { visibility: hidden; pointer-events: none; } }
#boot .b-half { position: absolute; left: 0; right: 0; height: 50.1%; background: #08090a; transition: transform .6s cubic-bezier(.7,0,.2,1); }
#boot .b-half.t { top: 0; } #boot .b-half.b { bottom: 0; }
#boot.out .b-half.t { transform: translateY(-100%); } #boot.out .b-half.b { transform: translateY(100%); }
.b-glow, .b-grain, .b-sheen, .b-seam, .b-rings, .b-streak { display: none; }
#boot .b-core { position: absolute; left: 50%; top: 48%; translate: -50% -50%; display: grid; justify-items: center; gap: 28px; width: min(88vw, 620px); }
#boot .b-mark { position: relative; width: clamp(150px, 30vmin, 260px); aspect-ratio: 1; }
#boot .b-logo, #boot .b-canvas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#boot .b-canvas { z-index: 1; }
#boot .b-main { fill: url(#bgold); fill-opacity: 0; stroke: url(#bgold); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
#boot[data-loader="1"] .b-main { animation: b-metal .65s ease-out 1.25s forwards; stroke: none; }
#boot[data-loader="2"] .b-main { animation: b-trace 1.7s linear forwards, b-metal .45s ease-out 1.7s forwards; }
#boot[data-loader="3"] .b-main { animation: b-metal .3s ease-out 2.25s forwards; stroke: none; }
@keyframes b-metal { to { fill-opacity: 1; } }
@keyframes b-trace { to { stroke-dashoffset: 0; } }
#boot .b-shine { transform: translateX(-350px) skewX(-16deg); animation: b-polish .65s ease-in-out 1.65s both; }
#boot:not([data-loader="1"]) .b-shine { display: none; }
@keyframes b-polish { to { transform: translateX(1300px) skewX(-16deg); } }
#boot .b-word { display: flex; font: 400 clamp(28px, 5vmin, 48px)/1 var(--display, sans-serif); letter-spacing: .26em; padding-left: .26em; color: #ece8e1; clip-path: inset(0 0 100%); animation: b-name .65s cubic-bezier(.16,1,.3,1) 1.55s both; }
#boot[data-loader="3"] .b-word { animation-delay: 2.15s; }
@keyframes b-name { to { clip-path: inset(-10% 0 -10%); } }
#boot .b-sub { font: 400 10px/1.5 var(--mono, monospace); letter-spacing: .17em; text-transform: uppercase; color: #b4a68d; opacity: 0; animation: b-in .5s ease 1.8s forwards; }
#boot[data-loader="3"] .b-sub { animation-delay: 2.3s; }
@keyframes b-in { to { opacity: 1; } }
#boot .b-count { position: absolute; inset: 0; display: grid; place-items: center; font: 250 clamp(90px, 20vmin, 170px)/1 var(--display, sans-serif); font-variation-settings: 'wdth' 70, 'wght' 250; }
#boot .b-edition, #boot .b-tc, #boot .b-cap, #boot .b-skip { position: absolute; font: 400 10px/1.5 var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: #b7b0a4; }
#boot .b-edition { top: 30px; left: 5vw; color: #c9a45c; } #boot .b-edition span { display: block; color: #b7b0a4; margin-top: 7px; }
#boot .b-tc { top: 30px; right: 5vw; font-variant-numeric: tabular-nums; }
#boot .b-cap { bottom: 46px; left: 5vw; } #boot .b-skip { bottom: 46px; right: 5vw; text-transform: none; }
#boot .b-line { position: absolute; left: 5vw; right: 5vw; bottom: 30px; height: 1px; background: #33302b; }
#boot .b-line i { display: block; height: 1px; background: #c9a45c; transform-origin: left; transform: scaleX(0); }
#boot .b-crop { position: absolute; width: 18px; height: 18px; border: 0 solid #72654c; }
#boot .b-crop.a { left: 5vw; top: 24%; border-width: 1px 0 0 1px; } #boot .b-crop.b { right: 5vw; top: 24%; border-width: 1px 1px 0 0; }
#boot .b-crop.c { left: 5vw; bottom: 24%; border-width: 0 0 1px 1px; } #boot .b-crop.d { right: 5vw; bottom: 24%; border-width: 0 1px 1px 0; }
#boot:not([data-loader="3"]) .b-crop { display: none; }
#boot.out .b-core, #boot.out .b-edition, #boot.out .b-tc, #boot.out .b-cap, #boot.out .b-skip, #boot.out .b-line, #boot.out .b-crop { opacity: 0; transition: opacity .2s; }
@media (max-width: 540px) { #boot .b-cap { bottom: 68px; } #boot .b-skip { left: 5vw; right: auto; } #boot .b-sub { font-size: 9px; letter-spacing: .08em; } }
@media (prefers-reduced-motion: reduce) { html.booting #boot, html.sg-exit #boot { display: none !important; } html.booting body { overflow: auto; } }


/* ═════ Loader 4 « Sobre » (défaut) : fondu du symbole en or, un reflet unique sur le logo et le nom, ligne de chargement fine avec tête lumineuse ═════ */
#boot[data-loader="4"] .b-canvas, #boot[data-loader="4"] .b-edition, #boot[data-loader="4"] .b-tc, #boot[data-loader="4"] .b-crop, #boot[data-loader="4"] .b-skip { display: none; }
#boot[data-loader="4"] .b-core { animation: s-core 1.4s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes s-core { from { opacity: 0; transform: scale(1.035); filter: blur(7px); } to { opacity: 1; transform: none; filter: none; } }
#boot[data-loader="4"] .b-main { stroke: none; animation: b-metal 1s ease-out .15s forwards; }
#boot[data-loader="4"] .b-shine { display: block; animation: s-shine 1.5s cubic-bezier(.45, 0, .25, 1) 1.35s both; }
@keyframes s-shine { to { transform: translateX(1300px) skewX(-16deg); } }
#boot[data-loader="4"] .b-word { clip-path: none; letter-spacing: .5em; padding-left: .5em; opacity: 0; color: transparent;
  background: linear-gradient(100deg, #ece8e1 0 38%, #fff3d2 46%, #e6c47b 50%, #fff3d2 54%, #ece8e1 62% 100%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text;
  animation: s-word 1.2s cubic-bezier(.16, 1, .3, 1) .5s forwards, s-wordshine 1.5s cubic-bezier(.45, 0, .25, 1) 1.45s forwards; }
@keyframes s-word { to { opacity: 1; letter-spacing: .3em; padding-left: .3em; } }
@keyframes s-wordshine { to { background-position: 0 0; } }
#boot[data-loader="4"] .b-sub { animation-delay: 1.1s; }
/* ligne du bas : trait fin gradué, tête lumineuse qui avance */
#boot[data-loader="4"] .b-line { height: 7px; background: repeating-linear-gradient(90deg, rgba(236, 232, 225, .18) 0 1px, transparent 1px 14px) bottom / 100% 4px no-repeat, linear-gradient(rgba(236, 232, 225, .12), rgba(236, 232, 225, .12)) bottom / 100% 1px no-repeat; }
#boot[data-loader="4"] .b-line i { position: relative; margin-top: 6px; background: linear-gradient(90deg, rgba(214, 178, 104, .0), #d6b268 70%, #f6e7c3); box-shadow: 0 0 10px rgba(214, 178, 104, .45); }
#boot[data-loader="4"] .b-line i::after { content: ''; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #fff3d2; box-shadow: 0 0 14px 4px rgba(240, 206, 128, .75); }
#boot[data-loader="4"] .b-cap { color: #8f8a80; letter-spacing: .22em; font-variant-numeric: tabular-nums; }
#boot[data-loader="4"].resolved .b-line i { transition: opacity .3s; opacity: 0; }