/* secteur.css — la page d'un secteur, /fr/secteurs/<slug>.
   La chrome (en-tête, plan du site, pied de page) est dans catalogue.css,
   chargée avant celle-ci.

   C'est la plus grosse feuille du catalogue, et c'est normal : le héros porte
   une maquette différente par secteur — onze illustrations, toutes
   décoratives, qui ne sortent jamais de leur section.

   Les classes numérotées viennent des styles inline de la version 2,
   converties par outils/v2/convertis.mjs : le suffixe -hv porte le survol.
   Celles qui sont nommées (`sec-chip`, `sec-qr`, `sec-jour`) remplacent des
   styles que la v2 recalculait en JavaScript — dont 476 carrés de faux QR
   code et de faux calendrier.

   `--ag-accent` est la couleur du secteur, posée sur .ag-page par le gabarit. */.sec-2 {
   position: relative;
   background: #000A1C;
   color: #fff;
   overflow: hidden
}

.sec-3 {
   box-sizing: border-box;
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .07;
   background-image: repeating-linear-gradient(135deg, var(--ag-accent) 0 1px, transparent 1px 14px);
   animation: agDrift 20s linear infinite
}

.sec-4 {
   position: relative;
   max-width: 1440px;
   margin: 0 auto;
   padding: 0 64px
}

.sec-5 {
   padding: 34px 0 0;
   display: flex;
   align-items: baseline;
   gap: 16px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .14em;
   animation: agFade .7s both
}

.sec-6 {
   color: #FFBA13
}

.sec-7 {
   color: #8DA9C4
}

.sec-8 {
   color: #fff
}

.sec-9 {
   display: grid;
   grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
   gap: 64px;
   padding: 44px 0 56px;
   align-items: center
}

.sec-10 {
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both
}

.sec-11 {
   display: flex;
   align-items: center;
   gap: 12px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .18em;
   color: var(--ag-accent);
   margin-bottom: 26px
}

.sec-12 {
   width: 8px;
   height: 8px;
   background: var(--ag-accent);
   animation: agPulse 2s ease-in-out infinite
}

.sec-13 {
   margin: 0 0 22px;
   font-size: 58px;
   line-height: 1;
   font-weight: 600;
   letter-spacing: -.045em;
   text-wrap: balance
}

.sec-14 {
   color: var(--ag-accent)
}

.sec-15 {
   margin: 0 0 16px;
   font-size: 23px;
   line-height: 1.3;
   font-weight: 500;
   letter-spacing: -.015em;
   color: #fff;
   max-width: 36ch;
   text-wrap: balance
}

.sec-16 {
   margin: 0;
   font-size: 16.5px;
   line-height: 1.6;
   color: #B9CCDD;
   max-width: 56ch;
   text-wrap: pretty
}

.sec-17 {
   display: flex;
   gap: 12px;
   margin-top: 36px
}

.sec-18 {
   background: #FFBA13;
   color: #000A1C;
   padding: 16px 24px;
   font-size: 15px;
   font-weight: 600;
   transition: background .25s, transform .25s
}

.sec-19-hv:hover {
   background: #fff !important;
   color: #000A1C !important;
   transform: translateY(-2px) !important
}

.sec-20 {
   border: 1px solid rgba(141, 169, 196, .45);
   color: #fff;
   padding: 15px 24px;
   font-size: 15px;
   font-weight: 600;
   transition: background .25s
}

.sec-21-hv:hover {
   background: rgba(255, 255, 255, .08) !important;
   color: #fff !important
}

.sec-22 {
   position: relative;
   height: 500px;
   min-width: 0;
   animation: agRise .9s .15s cubic-bezier(.2, .7, .2, 1) both
}

.sec-23 {
   position: absolute;
   inset: 0;
   background: #0A1730;
   border: 1px solid rgba(141, 169, 196, .25);
   overflow: hidden
}

.sec-24 {
   box-sizing: border-box;
   position: absolute;
   left: -10px;
   right: -10px;
   top: -14px;
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   gap: 26px 20px;
   padding: 0 20px
}

.sec-25 {
   height: 34px;
   background: rgba(127, 178, 229, .07);
   border: 1px solid rgba(127, 178, 229, .12)
}

.sec-26 {
   height: 34px;
   background: rgba(242, 196, 141, .42);
   border: 1px solid rgba(127, 178, 229, .12)
}

.sec-27 {
   box-sizing: border-box;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   background: linear-gradient(180deg, rgba(10, 23, 48, .2), rgba(10, 23, 48, .85) 78%)
}

.sec-28 {
   box-sizing: border-box;
   position: absolute;
   left: 0;
   width: 62%;
   top: 96px;
   height: 44px;
   border-top: 4px solid #8DA9C4;
   border-bottom: 3px solid #8DA9C4;
   background: repeating-linear-gradient(90deg, rgba(141, 169, 196, .6) 0 2px, transparent 2px 14px)
}

.sec-29 {
   box-sizing: border-box;
   position: absolute;
   left: 0;
   width: 62%;
   top: 143px;
   height: 10px;
   background: #1C2A44
}

.sec-30 {
   box-sizing: border-box;
   position: absolute;
   left: 40px;
   top: 108px;
   width: 250px;
   background: #fff;
   color: #000A1C;
   display: flex;
   flex-direction: column;
   transform: rotate(-2deg);
   box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75)
}

.sec-31 {
   position: absolute;
   left: 10px;
   top: -6px;
   width: 8px;
   height: 12px;
   background: #8DA9C4
}

.sec-32 {
   position: absolute;
   right: 10px;
   top: -6px;
   width: 8px;
   height: 12px;
   background: #8DA9C4
}

.sec-33 {
   background: #7FB2E5;
   padding: 8px 14px;
   display: flex;
   justify-content: space-between;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   font-weight: 600
}

.sec-34 {
   padding: 12px 14px 14px;
   display: flex;
   flex-direction: column;
   gap: 6px
}

.sec-35 {
   font-size: 50px;
   font-weight: 700;
   letter-spacing: -.045em;
   line-height: .95
}

.sec-36 {
   font-size: 14px;
   color: #001751
}

.sec-37 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .06em;
   border-top: 2px solid #000A1C;
   padding-top: 8px
}

.sec-38 {
   box-sizing: border-box;
   position: absolute;
   right: 28px;
   top: 28px;
   width: 200px;
   background: #000A1C;
   border: 1px solid #7FB2E5;
   padding: 14px 16px;
   display: flex;
   flex-direction: column;
   gap: 5px;
   box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75)
}

.sec-39 {
   display: flex;
   align-items: center;
   gap: 8px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .12em;
   color: #7FB2E5
}

.sec-40 {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #7FB2E5;
   animation: agPulse 1.4s ease-in-out infinite
}

.sec-41 {
   font-size: 15px;
   font-weight: 600;
   color: #fff;
   line-height: 1.3
}

.sec-42 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .08em;
   color: #3DDC97
}

.sec-43 {
   box-sizing: border-box;
   position: absolute;
   right: 28px;
   top: 150px;
   width: 200px;
   background: #fff;
   color: #000A1C;
   padding: 14px 16px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75)
}

.sec-44 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .12em;
   color: #5C7897
}

.sec-45 {
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -.03em;
   line-height: 1.1
}

.sec-46 {
   position: relative;
   height: 6px;
   background: #E3ECF5;
   display: block
}

.sec-47 {
   position: absolute;
   left: 30%;
   width: 42%;
   top: 0;
   bottom: 0;
   background: #7FB2E5
}

.sec-48 {
   position: absolute;
   left: 52%;
   top: -4px;
   width: 3px;
   height: 14px;
   background: #000A1C
}

.sec-49 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .08em;
   color: #5C7897
}

.sec-50 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   right: 28px;
   bottom: 28px;
   background: #000A1C;
   border: 1px solid rgba(127, 178, 229, .35);
   padding: 16px 18px;
   display: flex;
   flex-direction: column;
   gap: 12px
}

.sec-51 {
   display: flex;
   justify-content: space-between
}

.sec-52 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .14em;
   color: #7FB2E5
}

.sec-53 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   color: #8DA9C4
}

.sec-54 {
   display: flex;
   gap: 8px
}

.sec-55 {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-width: 0
}

.sec-56 {
   height: 4px;
   background: #7FB2E5
}

.sec-57 {
   font-size: 13.5px;
   font-weight: 600;
   color: #fff;
   white-space: nowrap
}

.sec-58 {
   height: 4px;
   background: #7FB2E5;
   animation: agPulse 1.6s ease-in-out infinite
}

.sec-59 {
   height: 4px;
   background: rgba(141, 169, 196, .25)
}

.sec-60 {
   font-size: 13.5px;
   font-weight: 500;
   color: #5C7897;
   white-space: nowrap
}

.sec-61 {
   box-sizing: border-box;
   position: absolute;
   inset: 0;
   background: #0A1730;
   border: 1px solid rgba(141, 169, 196, .25);
   overflow: hidden
}

.sec-62 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   right: 28px;
   top: 28px;
   bottom: 28px;
   background: #fff;
   color: #000A1C;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6)
}

.sec-63 {
   position: relative;
   background: #F3EBD9
}

.sec-64 {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

.sec-65 {
   position: absolute;
   left: 14px;
   top: 14px;
   background: #FF8A5B;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   font-weight: 600;
   letter-spacing: .1em;
   padding: 5px 8px
}

.sec-66 {
   padding: 22px 22px 18px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   min-width: 0
}

.sec-67 {
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -.02em;
   line-height: 1.15
}

.sec-68 {
   display: flex;
   align-items: baseline;
   gap: 10px
}

.sec-69 {
   font-size: 26px;
   font-weight: 600;
   letter-spacing: -.03em
}

.sec-70 {
   font-size: 14px;
   color: #5C7897;
   text-decoration: line-through
}

.sec-71 {
   font-size: 12.5px;
   color: #001751
}

.sec-72 {
   color: #5C7897
}

.sec-73 {
   display: flex;
   gap: 6px
}

.sec-74 {
   width: 38px;
   height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   font-weight: 600;
   border: 1px solid #D3E2ED;
   background: #fff;
   color: #000A1C
}

.sec-75 {
   width: 38px;
   height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   font-weight: 600;
   border: 1px solid #000A1C;
   background: #000A1C;
   color: #fff
}

.sec-76 {
   background: #FF8A5B;
   text-align: center;
   padding: 13px;
   font-size: 14.5px;
   font-weight: 600
}

.sec-77 {
   display: flex;
   flex-direction: column;
   margin-top: 2px
}

.sec-78 {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 0;
   border-top: 1px solid #D3E2ED;
   font-size: 13.5px
}

.sec-79 {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   border: 2px solid #FF8A5B;
   background: #FF8A5B;
   box-sizing: border-box;
   flex: none
}

.sec-80 {
   flex: 1
}

.sec-81 {
   font-weight: 600
}

.sec-82 {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   border: 2px solid #D3E2ED;
   background: #fff;
   box-sizing: border-box;
   flex: none
}

.sec-83 {
   margin-top: auto;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .08em;
   color: #5C7897
}

.sec-84 {
   box-sizing: border-box;
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 78% 18%, rgba(255, 186, 19, .12), transparent 55%)
}

.sec-85 {
   box-sizing: border-box;
   position: absolute;
   right: 70px;
   top: 34px;
   width: 20px;
   bottom: 22px;
   border-left: 2px solid rgba(255, 186, 19, .55);
   border-right: 2px solid rgba(255, 186, 19, .55);
   background: repeating-linear-gradient(45deg, rgba(255, 186, 19, .4) 0 1.5px, transparent 1.5px 11px), repeating-linear-gradient(-45deg, rgba(255, 186, 19, .4) 0 1.5px, transparent 1.5px 11px)
}

.sec-86 {
   box-sizing: border-box;
   position: absolute;
   left: 70px;
   right: 22px;
   top: 40px;
   height: 16px;
   border-top: 2px solid rgba(255, 186, 19, .65);
   border-bottom: 2px solid rgba(255, 186, 19, .65);
   background: repeating-linear-gradient(45deg, rgba(255, 186, 19, .45) 0 1.5px, transparent 1.5px 11px), repeating-linear-gradient(-45deg, rgba(255, 186, 19, .45) 0 1.5px, transparent 1.5px 11px)
}

.sec-87 {
   box-sizing: border-box;
   position: absolute;
   right: 22px;
   top: 56px;
   width: 48px;
   height: 30px;
   background: rgba(255, 186, 19, .5)
}

.sec-88 {
   box-sizing: border-box;
   position: absolute;
   right: 60px;
   top: 10px;
   width: 40px;
   height: 30px;
   border-left: 2px solid rgba(255, 186, 19, .5);
   border-right: 2px solid rgba(255, 186, 19, .5);
   border-top: 2px solid rgba(255, 186, 19, .5)
}

.sec-89 {
   box-sizing: border-box;
   position: absolute;
   right: 62px;
   top: 20px;
   width: 36px;
   height: 22px;
   background: #FFBA13
}

.sec-90 {
   box-sizing: border-box;
   position: absolute;
   left: 150px;
   top: 56px;
   width: 14px;
   height: 8px;
   background: #FFBA13
}

.sec-91 {
   box-sizing: border-box;
   position: absolute;
   left: 156px;
   top: 64px;
   width: 1.5px;
   height: 32px;
   background: #8DA9C4
}

.sec-92 {
   box-sizing: border-box;
   position: absolute;
   left: 64px;
   top: 96px;
   width: 200px;
   background: #FFBA13;
   color: #000A1C;
   display: flex;
   flex-direction: column;
   box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75)
}

.sec-93 {
   position: relative;
   height: 52px;
   background: #C99010
}

.sec-94 {
   padding: 9px 12px 10px;
   display: flex;
   flex-direction: column;
   gap: 2px
}

.sec-95 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .12em;
   font-weight: 600
}

.sec-96 {
   font-size: 15px;
   font-weight: 600
}

.sec-97 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   bottom: 22px;
   width: calc(56% - 34px);
   height: 262px
}

.sec-98 {
   box-sizing: border-box;
   position: absolute;
   left: 22%;
   bottom: 0;
   width: 8px;
   height: 40px;
   background: #3B4A63
}

.sec-99 {
   box-sizing: border-box;
   position: absolute;
   right: 22%;
   bottom: 0;
   width: 8px;
   height: 40px;
   background: #3B4A63
}

.sec-100 {
   box-sizing: border-box;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 36px;
   background: #fff;
   color: #000A1C;
   padding: 12px 14px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75)
}

.sec-101 {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   border-bottom: 3px solid #000A1C;
   padding-bottom: 6px;
   margin-bottom: 2px
}

.sec-102 {
   font-size: 15px;
   font-weight: 700;
   letter-spacing: .02em
}

.sec-103 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .06em;
   color: #001751;
   padding: 4px 0
}

.sec-104 {
   display: flex;
   flex-direction: column;
   gap: 1px;
   padding: 6px 0;
   border-top: 1px solid #D3E2ED
}

.sec-105 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 8.5px;
   letter-spacing: .12em;
   color: #5C7897
}

.sec-106 {
   font-size: 12.5px;
   font-weight: 600;
   line-height: 1.25
}

.sec-107 {
   box-sizing: border-box;
   position: absolute;
   right: 28px;
   bottom: 44px;
   width: calc(44% - 34px);
   background: #000A1C;
   border: 1px solid rgba(255, 186, 19, .55);
   padding: 14px 14px 8px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75)
}

.sec-108 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .14em;
   color: #FFBA13;
   margin-bottom: 6px
}

.sec-109 {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 8px 0;
   border-top: 1px solid rgba(141, 169, 196, .2)
}

.sec-110 {
   width: 7px;
   height: 7px;
   background: #3DDC97;
   flex: none
}

.sec-111 {
   flex: 1;
   font-size: 13px;
   color: #fff;
   font-weight: 500;
   line-height: 1.25
}

.sec-112 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .06em;
   color: #3DDC97
}

.sec-113 {
   width: 7px;
   height: 7px;
   background: #FFBA13;
   flex: none
}

.sec-114 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .06em;
   color: #FFBA13
}

.sec-115 {
   width: 7px;
   height: 7px;
   background: #7FB2E5;
   flex: none
}

.sec-116 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .06em;
   color: #7FB2E5
}

.sec-117 {
   width: 7px;
   height: 7px;
   background: #8DA9C4;
   flex: none
}

.sec-118 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .06em;
   color: #8DA9C4
}

.sec-119 {
   box-sizing: border-box;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 22px;
   background: repeating-linear-gradient(-45deg, #FFBA13 0 16px, #000A1C 16px 32px)
}

.sec-120 {
   position: absolute;
   inset: 0;
   background: #000A1C;
   border: 1px solid rgba(141, 169, 196, .25);
   overflow: hidden
}

.sec-121 {
   box-sizing: border-box;
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 10, 28, .55) 0%, rgba(0, 10, 28, .1) 35%, rgba(0, 10, 28, .88) 100%)
}

.sec-122 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   right: 28px;
   top: 24px;
   display: flex;
   gap: 5px;
   flex-wrap: wrap
}

.sec-123 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .1em;
   font-weight: 600;
   padding: 6px 9px;
   background: #3DDC97;
   color: #000A1C
}

.sec-124 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .1em;
   font-weight: 600;
   padding: 6px 9px;
   background: rgba(0, 10, 28, .6);
   border: 1px solid rgba(211, 226, 237, .35);
   color: #fff
}

.sec-125 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   top: 84px;
   width: calc(100% - 294px);
   background: rgba(0, 10, 28, .82);
   border: 1px solid #3DDC97;
   padding: 12px 14px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8)
}

.sec-126 {
   display: flex;
   align-items: center;
   gap: 8px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .12em;
   color: #3DDC97
}

.sec-127 {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #3DDC97;
   animation: agPulse 1.4s ease-in-out infinite
}

.sec-128 {
   font-size: 14.5px;
   font-weight: 600;
   color: #fff;
   line-height: 1.3
}

.sec-129 {
   box-sizing: border-box;
   position: absolute;
   right: 28px;
   top: 70px;
   width: 210px;
   background: #fff;
   color: #000A1C;
   display: flex;
   flex-direction: column;
   box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8)
}

.sec-130 {
   background: #3DDC97;
   padding: 10px 14px;
   display: flex;
   justify-content: space-between;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .12em;
   font-weight: 600
}

.sec-131 {
   font-size: 19px;
   font-weight: 700;
   letter-spacing: -.02em;
   line-height: 1.1
}

.sec-132 {
   font-size: 13px;
   color: #001751
}

.sec-133 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
   padding: 8px 0;
   border-top: 1px dashed #D3E2ED;
   border-bottom: 1px dashed #D3E2ED
}

.sec-134 {
   display: flex;
   flex-direction: column;
   gap: 2px
}

.sec-135 {
   font-size: 13px;
   font-weight: 600
}

.sec-136 {
   display: flex;
   justify-content: center;
   padding-top: 4px
}

.sec-137 {
   display: grid;
   grid-template-columns: repeat(21, 6px);
   grid-auto-rows: 6px
}

.sec-138 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   letter-spacing: .1em;
   color: #5C7897;
   text-align: center
}

.sec-139 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   bottom: 28px;
   width: calc(100% - 294px);
   background: rgba(0, 10, 28, .82);
   border: 1px solid rgba(141, 169, 196, .35);
   padding: 12px 14px 4px
}

.sec-140 {
   display: flex;
   justify-content: space-between;
   margin-bottom: 2px
}

.sec-141 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   color: #3DDC97
}

.sec-142 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   color: #8DA9C4
}

.sec-143 {
   display: grid;
   grid-template-columns: 62px minmax(0, 1fr) auto;
   gap: 10px;
   align-items: baseline;
   padding: 9px 0;
   border-top: 1px solid rgba(141, 169, 196, .22)
}

.sec-144 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .1em;
   color: #3DDC97
}

.sec-145 {
   font-size: 13.5px;
   color: #fff;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.sec-146 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   color: #3DDC97
}

.sec-147 {
   box-sizing: border-box;
   position: absolute;
   right: 28px;
   bottom: 28px;
   width: 210px;
   display: flex;
   justify-content: space-between;
   gap: 8px
}

.sec-148 {
   flex: 1;
   background: rgba(0, 10, 28, .82);
   border: 1px solid rgba(141, 169, 196, .35);
   padding: 10px 12px;
   display: flex;
   flex-direction: column;
   gap: 2px
}

.sec-149 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   letter-spacing: .12em;
   color: #8DA9C4
}

.sec-150 {
   font-size: 17px;
   font-weight: 600;
   color: #fff
}

.sec-151 {
   flex: 1;
   background: #3DDC97;
   color: #000A1C;
   padding: 10px 12px;
   display: flex;
   flex-direction: column;
   gap: 2px
}

.sec-152 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   letter-spacing: .12em;
   font-weight: 600
}

.sec-153 {
   font-size: 17px;
   font-weight: 600
}

.sec-154 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   top: 28px;
   bottom: 28px;
   width: 58%;
   background: #fff;
   color: #000A1C;
   padding: 18px 20px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6)
}

.sec-155 {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   border-bottom: 3px double #000A1C;
   padding-bottom: 8px
}

.sec-156 {
   font-size: 26px;
   font-weight: 700;
   letter-spacing: -.03em;
   font-style: italic
}

.sec-157 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .1em;
   color: #5C7897
}

.sec-158 {
   display: flex;
   gap: 8px;
   align-items: center
}

.sec-159 {
   background: #FF5C7A;
   color: #000A1C;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   font-weight: 600;
   letter-spacing: .12em;
   padding: 4px 7px
}

.sec-160 {
   font-size: 24px;
   font-weight: 700;
   letter-spacing: -.025em;
   line-height: 1.1
}

.sec-161 {
   position: relative;
   height: 120px;
   background: #E3ECF5
}

.sec-162 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   flex: 1
}

.sec-163 {
   display: flex;
   flex-direction: column;
   gap: 7px
}

.sec-164 {
   display: block;
   height: 6px;
   width: 100%;
   background: #D3E2ED
}

.sec-165 {
   display: block;
   height: 6px;
   width: 92%;
   background: #D3E2ED
}

.sec-166 {
   display: block;
   height: 6px;
   width: 70%;
   background: #D3E2ED
}

.sec-167 {
   display: block;
   height: 6px;
   width: 96%;
   background: #D3E2ED
}

.sec-168 {
   display: block;
   height: 6px;
   width: 84%;
   background: #D3E2ED
}

.sec-169 {
   display: block;
   height: 6px;
   width: 90%;
   background: #D3E2ED
}

.sec-170 {
   display: block;
   height: 6px;
   width: 60%;
   background: #D3E2ED
}

.sec-171 {
   box-sizing: border-box;
   position: absolute;
   right: 28px;
   top: 28px;
   width: calc(42% - 68px);
   background: #000A1C;
   border: 1px solid #FF5C7A;
   padding: 14px 16px;
   display: flex;
   flex-direction: column;
   gap: 6px;
   box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7)
}

.sec-172 {
   display: flex;
   align-items: center;
   gap: 8px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .12em;
   color: #FF5C7A
}

.sec-173 {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #FF5C7A;
   animation: agPulse 1.4s ease-in-out infinite
}

.sec-174 {
   font-size: 14.5px;
   font-weight: 600;
   color: #fff;
   line-height: 1.35
}

.sec-175 {
   box-sizing: border-box;
   position: absolute;
   right: 28px;
   bottom: 28px;
   width: calc(42% - 68px);
   display: flex;
   flex-direction: column;
   gap: 8px
}

.sec-176 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .14em;
   color: #8DA9C4
}

.sec-177 {
   display: flex;
   align-items: flex-end;
   gap: 5px;
   height: 90px
}

.sec-178 {
   flex: 1;
   height: 30%;
   background: rgba(255, 92, 122, .35)
}

.sec-179 {
   flex: 1;
   height: 42%;
   background: rgba(255, 92, 122, .35)
}

.sec-180 {
   flex: 1;
   height: 38%;
   background: rgba(255, 92, 122, .35)
}

.sec-181 {
   flex: 1;
   height: 55%;
   background: rgba(255, 92, 122, .35)
}

.sec-182 {
   flex: 1;
   height: 48%;
   background: rgba(255, 92, 122, .35)
}

.sec-183 {
   flex: 1;
   height: 66%;
   background: rgba(255, 92, 122, .35)
}

.sec-184 {
   flex: 1;
   height: 74%;
   background: rgba(255, 92, 122, .35)
}

.sec-185 {
   flex: 1;
   height: 62%;
   background: rgba(255, 92, 122, .35)
}

.sec-186 {
   flex: 1;
   height: 88%;
   background: rgba(255, 92, 122, .35)
}

.sec-187 {
   flex: 1;
   height: 96%;
   background: #FF5C7A
}

.sec-188 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .08em;
   color: #5C7897
}

.sec-189 {
   box-sizing: border-box;
   position: absolute;
   left: 36px;
   top: 40px;
   width: 300px;
   height: 186px;
   background: #B79CFF;
   color: #000A1C;
   padding: 20px 22px;
   display: flex;
   flex-direction: column;
   transform: rotate(-5deg);
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7)
}

.sec-190 {
   font-size: 15px;
   font-weight: 700;
   letter-spacing: -.01em
}

.sec-191 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .12em;
   font-weight: 600
}

.sec-192 {
   margin-top: 18px;
   width: 42px;
   height: 32px;
   border-radius: 5px;
   background: linear-gradient(135deg, #F2C48D, #C9A06B);
   border: 1px solid rgba(0, 10, 28, .25)
}

.sec-193 {
   margin-top: auto;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 15px;
   letter-spacing: .14em;
   font-weight: 500
}

.sec-194 {
   display: flex;
   justify-content: space-between;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .1em;
   margin-top: 6px
}

.sec-195 {
   box-sizing: border-box;
   position: absolute;
   right: 28px;
   top: 28px;
   width: 200px;
   background: #000A1C;
   border: 1px solid #B79CFF;
   padding: 14px 16px;
   display: flex;
   flex-direction: column;
   gap: 4px
}

.sec-196 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .14em;
   color: #B79CFF
}

.sec-197 {
   font-size: 28px;
   font-weight: 600;
   letter-spacing: -.03em;
   color: #fff
}

.sec-198 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .1em;
   color: #3DDC97
}

.sec-199 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   right: 28px;
   bottom: 28px;
   background: #000A1C;
   border: 1px solid rgba(141, 169, 196, .3);
   padding: 14px 18px 6px
}

.sec-200 {
   display: flex;
   justify-content: space-between;
   margin-bottom: 4px
}

.sec-201 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .1em;
   color: #8DA9C4
}

.sec-202 {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 0;
   border-top: 1px solid rgba(141, 169, 196, .18)
}

.sec-203 {
   width: 30px;
   height: 30px;
   background: rgba(183, 156, 255, .15);
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   color: #B79CFF;
   display: flex;
   align-items: center;
   justify-content: center;
   flex: none
}

.sec-204 {
   flex: 1;
   font-size: 14px;
   color: #fff
}

.sec-205 {
   font-size: 14px;
   font-weight: 600;
   color: #fff
}

.sec-206 {
   font-size: 14px;
   font-weight: 600;
   color: #3DDC97
}

.sec-207 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   right: 28px;
   top: 26px;
   display: flex;
   justify-content: space-between;
   align-items: center
}

.sec-208 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .14em;
   color: #5EE2E2
}

.sec-209 {
   display: flex;
   gap: 4px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   font-weight: 600
}

.sec-210 {
   padding: 6px 10px;
   background: #5EE2E2;
   color: #000A1C
}

.sec-211 {
   padding: 6px 10px;
   border: 1px solid rgba(141, 169, 196, .4);
   color: #B9CCDD
}

.sec-212 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   right: 28px;
   top: 100px;
   bottom: 28px;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px
}

.sec-213 {
   box-sizing: border-box;
   background: #000A1C;
   color: #fff;
   border: 1px solid rgba(141, 169, 196, .3);
   padding: 20px 16px;
   display: flex;
   flex-direction: column;
   gap: 6px;
   min-width: 0
}

.sec-214 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   font-weight: 600;
   color: #5EE2E2
}

.sec-215 {
   font-size: 40px;
   font-weight: 600;
   letter-spacing: -.04em;
   line-height: 1.05
}

.sec-216 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   color: #8DA9C4;
   margin-bottom: 10px
}

.sec-217 {
   font-size: 13.5px;
   padding: 8px 0;
   border-top: 1px solid rgba(141, 169, 196, .2)
}

.sec-218 {
   margin-top: auto;
   text-align: center;
   padding: 11px;
   font-size: 13.5px;
   font-weight: 600;
   background: transparent;
   color: #fff;
   border: 1px solid rgba(141, 169, 196, .4)
}

.sec-219 {
   box-sizing: border-box;
   background: #5EE2E2;
   color: #000A1C;
   border: 1px solid #5EE2E2;
   padding: 20px 16px;
   display: flex;
   flex-direction: column;
   gap: 6px;
   min-width: 0;
   transform: translateY(-14px);
   box-shadow: 0 30px 60px -30px rgba(94, 226, 226, .6)
}

.sec-220 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   font-weight: 600;
   color: #000A1C
}

.sec-221 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   color: #000A1C;
   margin-bottom: 10px
}

.sec-222 {
   font-size: 13.5px;
   padding: 8px 0;
   border-top: 1px solid rgba(0, 10, 28, .2)
}

.sec-223 {
   margin-top: auto;
   text-align: center;
   padding: 11px;
   font-size: 13.5px;
   font-weight: 600;
   background: #000A1C;
   color: #5EE2E2;
   border: 1px solid #000A1C
}

.sec-224 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   right: 28px;
   top: 40px;
   height: 236px;
   background: #fff;
   color: #000A1C;
   display: grid;
   grid-template-columns: minmax(0, 1fr) 140px;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7)
}

.sec-225 {
   padding: 22px 22px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-width: 0
}

.sec-226 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   color: #5C7897
}

.sec-227 {
   display: flex;
   align-items: center;
   gap: 14px
}

.sec-228 {
   font-size: 42px;
   font-weight: 600;
   letter-spacing: -.04em;
   line-height: 1
}

.sec-229 {
   font-size: 22px;
   color: #5C7897
}

.sec-230 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .08em;
   color: #001751
}

.sec-231 {
   margin-top: auto;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   border-top: 1px solid #D3E2ED;
   padding-top: 12px
}

.sec-232 {
   display: flex;
   flex-direction: column;
   gap: 3px
}

.sec-233 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .12em;
   color: #5C7897
}

.sec-234 {
   font-weight: 600;
   color: #B4223F
}

.sec-235 {
   border-left: 2px dashed #C9D3F5;
   background: #EEF2FF;
   padding: 22px 16px;
   display: flex;
   flex-direction: column;
   gap: 6px
}

.sec-236 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .1em;
   color: #3B4F99
}

.sec-237 {
   font-size: 36px;
   font-weight: 600;
   letter-spacing: -.04em;
   line-height: 1.05
}

.sec-238 {
   margin-top: auto;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   font-weight: 600;
   color: #3B4F99
}

.sec-239 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   right: 28px;
   bottom: 28px;
   background: #000A1C;
   border: 1px solid rgba(159, 183, 255, .35);
   padding: 18px 20px;
   display: flex;
   flex-direction: column;
   gap: 14px
}

.sec-240 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .14em;
   color: #9FB7FF
}

.sec-241 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px
}

.sec-242 {
   display: flex;
   flex-direction: column;
   gap: 8px
}

.sec-243 {
   height: 3px;
   background: #9FB7FF
}

.sec-244 {
   font-size: 13.5px;
   color: #fff
}

.sec-245 {
   height: 3px;
   background: #9FB7FF;
   animation: agPulse 1.6s ease-in-out infinite
}

.sec-246 {
   font-size: 13.5px;
   color: #fff;
   font-weight: 600
}

.sec-247 {
   height: 3px;
   background: rgba(141, 169, 196, .3)
}

.sec-248 {
   font-size: 13.5px;
   color: #5C7897
}

.sec-249 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   top: 28px;
   bottom: 28px;
   width: calc(100% - 286px);
   background: #000A1C;
   border: 1px solid rgba(242, 196, 141, .35);
   padding: 18px 16px;
   display: flex;
   flex-direction: column;
   gap: 12px
}

.sec-250 {
   display: flex;
   justify-content: space-between;
   align-items: center
}

.sec-251 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .14em;
   color: #F2C48D;
   font-weight: 600
}

.sec-252 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   color: #8DA9C4
}

.sec-253 {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 4px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   color: #5C7897;
   text-align: center
}

.sec-254 {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 4px
}

.sec-255 {
   margin-top: auto;
   display: flex;
   gap: 14px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .08em;
   color: #8DA9C4
}

.sec-256 {
   display: flex;
   align-items: center;
   gap: 6px
}

.sec-257 {
   width: 8px;
   height: 8px;
   background: #F2C48D
}

.sec-258 {
   width: 8px;
   height: 8px;
   background: #22324F
}

.sec-259 {
   box-sizing: border-box;
   position: absolute;
   right: 28px;
   top: 28px;
   width: 200px;
   background: #fff;
   color: #000A1C;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7)
}

.sec-260 {
   position: relative;
   height: 120px;
   background: #EADFCF
}

.sec-261 {
   padding: 14px 16px;
   display: flex;
   flex-direction: column;
   gap: 4px
}

.sec-262 {
   margin-top: 4px;
   text-align: center;
   padding: 10px;
   background: #F2C48D;
   font-size: 13.5px;
   font-weight: 600
}

.sec-263 {
   box-sizing: border-box;
   position: absolute;
   right: 28px;
   bottom: 28px;
   width: 200px;
   display: flex;
   flex-direction: column;
   gap: 6px
}

.sec-264 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .14em;
   color: #F2C48D
}

.sec-265 {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13.5px;
   color: #fff;
   padding: 6px 0;
   border-top: 1px solid rgba(141, 169, 196, .2)
}

.sec-266 {
   width: 7px;
   height: 7px;
   background: #F2C48D
}

.sec-267 {
   margin-left: auto;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   color: #3DDC97
}

.sec-268 {
   width: 7px;
   height: 7px;
   background: #8DA9C4
}

.sec-269 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   top: 28px;
   bottom: 28px;
   width: calc(100% - 290px);
   display: flex;
   flex-direction: column
}

.sec-270 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .14em;
   color: #C6F36B
}

.sec-271 {
   margin-top: 22px;
   border-left: 2px solid rgba(198, 243, 107, .4);
   margin-left: 6px
}

.sec-272 {
   position: relative;
   padding: 0 0 18px 26px
}

.sec-273 {
   position: absolute;
   left: -7px;
   top: 3px;
   width: 12px;
   height: 12px;
   background: #C6F36B;
   border: 2px solid #C6F36B;
   box-sizing: border-box
}

.sec-274 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   color: #C6F36B;
   margin-bottom: 3px
}

.sec-275 {
   font-size: 15.5px;
   font-weight: 600;
   color: #fff
}

.sec-276 {
   position: absolute;
   left: -7px;
   top: 3px;
   width: 12px;
   height: 12px;
   background: #0A1730;
   border: 2px solid #C6F36B;
   box-sizing: border-box;
   animation: agPulse 1.6s ease-in-out infinite
}

.sec-277 {
   position: absolute;
   left: -7px;
   top: 3px;
   width: 12px;
   height: 12px;
   background: #0A1730;
   border: 2px solid #5C7897;
   box-sizing: border-box
}

.sec-278 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   color: #5C7897;
   margin-bottom: 3px
}

.sec-279 {
   font-size: 15.5px;
   font-weight: 500;
   color: #8DA9C4
}

.sec-280 {
   margin-top: auto;
   display: flex;
   flex-direction: column;
   gap: 8px
}

.sec-281 {
   display: flex;
   align-items: center;
   gap: 10px;
   background: #000A1C;
   border: 1px solid rgba(198, 243, 107, .35);
   padding: 10px 12px
}

.sec-282 {
   width: 30px;
   height: 30px;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   flex: none
}

.sec-283 {
   width: 17px;
   height: 17px;
   display: block
}

.sec-284 {
   font-size: 13.5px;
   font-weight: 600;
   color: #fff
}

.sec-285 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .1em;
   color: #C6F36B
}

.sec-286 {
   box-sizing: border-box;
   position: absolute;
   right: 40px;
   top: 28px;
   width: 210px;
   height: 420px;
   background: #000A1C;
   border: 9px solid #1C2A44;
   border-radius: 34px;
   overflow: hidden;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

.sec-287 {
   position: absolute;
   inset: 0;
   background: #0A1730;
   display: flex;
   flex-direction: column
}

.sec-288 {
   position: relative;
   flex: 1;
   overflow: hidden
}

.sec-289 {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 10, 28, 0) 50%, #0A1730 100%)
}

.sec-290 {
   padding: 4px 16px 18px;
   display: flex;
   flex-direction: column;
   gap: 8px
}

.sec-291 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   letter-spacing: .14em;
   color: #C6F36B
}

.sec-292 {
   font-size: 19px;
   font-weight: 600;
   letter-spacing: -.02em;
   line-height: 1.15;
   color: #fff
}

.sec-293 {
   display: flex;
   gap: 5px;
   margin: 2px 0 4px
}

.sec-294 {
   width: 16px;
   height: 4px;
   background: #C6F36B
}

.sec-295 {
   width: 4px;
   height: 4px;
   background: #5C7897
}

.sec-296 {
   background: #C6F36B;
   color: #000A1C;
   text-align: center;
   padding: 11px;
   font-size: 13.5px;
   font-weight: 600
}

.sec-297 {
   position: absolute;
   top: 8px;
   left: 50%;
   transform: translateX(-50%);
   width: 74px;
   height: 20px;
   border-radius: 12px;
   background: #000A1C;
   z-index: 1
}

.sec-298 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   right: 28px;
   top: 28px;
   display: flex;
   justify-content: space-between
}

.sec-299 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   color: #8DA9C4
}

.sec-300 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   right: 28px;
   top: 62px;
   bottom: 120px;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 10px
}

.sec-301 {
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-width: 0
}

.sec-302 {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   padding-bottom: 8px;
   border-bottom: 2px solid #8DA9C4
}

.sec-303 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .12em;
   color: #D3E2ED
}

.sec-304 {
   background: #fff;
   color: #000A1C;
   padding: 10px 11px;
   display: flex;
   flex-direction: column;
   gap: 3px
}

.sec-305 {
   font-size: 13px;
   font-weight: 600;
   line-height: 1.2
}

.sec-306 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   letter-spacing: .06em;
   color: #5C7897
}

.sec-307 {
   background: #8DA9C4;
   color: #000A1C;
   padding: 10px 11px;
   display: flex;
   flex-direction: column;
   gap: 3px
}

.sec-308 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   letter-spacing: .06em;
   color: #000A1C
}

.sec-309 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   right: 28px;
   bottom: 28px;
   background: #000A1C;
   border: 1px solid rgba(141, 169, 196, .35);
   padding: 14px 18px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px
}

.sec-310 {
   font-size: 20px;
   font-weight: 600;
   color: #fff
}

.sec-311 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   border-top: 1px solid rgba(141, 169, 196, .3)
}

.sec-312 {
   display: flex;
   align-items: baseline;
   gap: 16px;
   padding: 22px 24px 24px 0
}

.sec-313 {
   font-size: 40px;
   font-weight: 600;
   letter-spacing: -.04em;
   line-height: 1;
   color: var(--ag-accent);
   white-space: nowrap
}

.sec-314 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   color: #8DA9C4;
   line-height: 1.5
}

.sec-315 {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 18px 0 22px;
   border-top: 1px solid rgba(141, 169, 196, .3);
   overflow-x: auto;
   scrollbar-width: none
}

.sec-316 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .14em;
   color: #8DA9C4;
   margin-right: 10px;
   flex: none
}

.sec-317 {
   border-bottom: 1px solid #D3E2ED
}

.sec-318 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 88px 64px 92px
}

.sec-319 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
   gap: 88px;
   align-items: start
}

.sec-320 {
   position: sticky;
   top: 120px
}

.sec-321 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   color: #946200;
   margin-bottom: 16px
}

.sec-322 {
   margin: 0;
   font-size: 44px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.035em;
   text-wrap: balance
}

.sec-323 {
   display: flex;
   flex-direction: column
}

.sec-324 {
   display: grid;
   grid-template-columns: 96px minmax(0, 1fr);
   gap: 24px;
   padding: 34px 0;
   border-top: 1px solid #D3E2ED;
   transition: padding .3s
}

.sec-326 {
   font-size: 56px;
   font-weight: 600;
   letter-spacing: -.04em;
   line-height: .9;
   color: #FFBA13
}

.sec-327 {
   margin: 0 0 10px;
   font-size: 24px;
   font-weight: 600;
   letter-spacing: -.02em;
   line-height: 1.2;
   text-wrap: balance
}

.sec-328 {
   margin: 0;
   font-size: 16px;
   line-height: 1.6;
   color: #001751;
   max-width: 58ch;
   text-wrap: pretty
}

.sec-329 {
   background: #F1F6FA;
   border-bottom: 1px solid #D3E2ED
}

.sec-330 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 88px 64px 96px
}

.sec-331 {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 40px;
   margin-bottom: 44px
}

.sec-332 {
   margin: 0;
   font-size: 44px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.035em
}

.sec-333 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .12em;
   color: #946200;
   font-weight: 600;
   display: flex;
   gap: 9px;
   transition: gap .25s;
   flex: none
}

.sec-334-hv:hover {
   gap: 15px !important
}

.sec-335 {
   display: flex;
   flex-direction: column;
   gap: 24px
}

.sec-336 {
   background: #fff;
   border: 1px solid #D3E2ED;
   display: grid;
   grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
   transition: box-shadow .4s, transform .4s cubic-bezier(.2, .7, .2, 1)
}

.sec-337-hv:hover {
   box-shadow: 0 40px 70px -40px rgba(0, 10, 28, .45) !important;
   transform: translateY(-4px) !important
}

.sec-338 {
   position: relative;
   min-height: 440px;
   background: #0A1730;
   overflow: hidden
}

.sec-339 {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   display: block
}

.sec-340 {
   padding: 40px 44px 36px;
   display: flex;
   flex-direction: column;
   min-width: 0
}

.sec-341 {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #5C7897;
   margin-bottom: 16px
}

.sec-342 {
   margin: 0 0 12px;
   font-size: 46px;
   line-height: 1;
   font-weight: 600;
   letter-spacing: -.04em
}

.sec-343 {
   margin: 0 0 24px;
   font-size: 17px;
   line-height: 1.5;
   color: #001751;
   text-wrap: pretty
}

.sec-344 {
   display: flex;
   align-items: baseline;
   gap: 16px;
   flex-wrap: wrap;
   padding: 18px 0;
   border-top: 1px solid #D3E2ED;
   border-bottom: 1px solid #D3E2ED;
   margin-bottom: 22px
}

.sec-345 {
   font-size: 40px;
   font-weight: 600;
   letter-spacing: -.04em;
   line-height: 1;
   white-space: nowrap
}

.sec-346 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #5C7897;
   line-height: 1.6;
   max-width: 28ch
}

.sec-347 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px
}

.sec-348 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   color: #946200;
   margin-bottom: 9px
}

.sec-349 {
   font-size: 14.5px;
   line-height: 1.58;
   color: #001751;
   text-wrap: pretty
}

.sec-350 {
   display: flex;
   align-items: baseline;
   gap: 10px;
   font-size: 14.5px;
   line-height: 1.5
}

.sec-351 {
   width: 6px;
   height: 6px;
   background: #FFBA13;
   flex: none;
   transform: translateY(-2px)
}

.sec-352 {
   margin-top: auto;
   padding-top: 26px;
   display: flex;
   align-items: center;
   gap: 16px;
   flex-wrap: wrap
}

.sec-353 {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   flex: 1;
   min-width: 0
}

.sec-354 {
   display: flex;
   align-items: center;
   gap: 7px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .06em;
   padding: 6px 10px;
   background: #F1F6FA;
   color: #001751
}

.sec-355 {
   width: 12px;
   height: 12px;
   display: block;
   object-fit: contain
}

.sec-356 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 88px 64px 92px;
   display: grid;
   grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
   gap: 88px
}

.sec-357 {
   margin: 0 0 36px;
   font-size: 44px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.035em;
   text-wrap: balance
}

.sec-358 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 32px;
   border-top: 1px solid #000A1C
}

.sec-359 {
   display: flex;
   align-items: baseline;
   gap: 16px;
   padding: 20px 0;
   border-bottom: 1px solid #D3E2ED
}

.sec-360 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   color: #946200;
   flex: none
}

.sec-361 {
   font-size: 18px;
   font-weight: 500;
   letter-spacing: -.01em
}

.sec-362 {
   background: #F1F6FA;
   border: 1px solid #D3E2ED;
   padding: 32px;
   align-self: start
}

.sec-363 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   color: #946200;
   margin-bottom: 8px
}

.sec-364 {
   font-size: 15px;
   line-height: 1.55;
   color: #001751;
   margin-bottom: 22px;
   text-wrap: pretty
}

.sec-365 {
   display: flex;
   flex-direction: column;
   border-top: 1px solid #D3E2ED
}

.sec-366 {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 13px 4px;
   border-bottom: 1px solid #D3E2ED;
   transition: padding .25s
}

.sec-367 {
   width: 18px;
   height: 18px;
   display: block;
   flex: none;
   object-fit: contain
}

.sec-368 {
   width: 18px;
   height: 18px;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center
}

.sec-369 {
   width: 6px;
   height: 6px;
   background: #FFBA13
}

.sec-370 {
   font-size: 15.5px;
   font-weight: 500;
   flex: 1
}

.sec-371 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   color: #5C7897
}

.sec-372 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 72px 64px 80px
}

.sec-373 {
   margin: 0 0 30px;
   font-size: 36px;
   line-height: 1.05;
   font-weight: 600;
   letter-spacing: -.03em
}

.sec-374 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   column-gap: 28px;
   border-top: 1px solid #000A1C
}

.sec-375 {
   display: grid;
   grid-template-columns: 34px minmax(0, 1fr) auto;
   gap: 14px;
   align-items: baseline;
   padding: 20px 4px;
   border-bottom: 1px solid #D3E2ED;
   transition: padding .25s
}

.sec-376-hv:hover {
   padding-left: 12px !important
}

.sec-377 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   color: #946200
}

.sec-378 {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.sec-379 {
   font-size: 18px;
   font-weight: 600;
   letter-spacing: -.01em
}

.sec-380 {
   font-size: 14px;
   color: #5C7897;
   line-height: 1.45
}

.sec-381 {
   background: #000A1C;
   color: #fff
}

.sec-382 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 78px 64px;
   display: grid;
   grid-template-columns: 1.15fr auto;
   gap: 64px;
   align-items: center
}

.sec-383 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   color: #FFBA13;
   margin-bottom: 20px
}

.sec-384 {
   margin: 0 0 16px;
   font-size: 44px;
   line-height: 1.04;
   font-weight: 600;
   letter-spacing: -.03em;
   max-width: 24ch;
   text-wrap: balance
}

.sec-385 {
   margin: 0;
   font-size: 16px;
   line-height: 1.6;
   color: #8DA9C4;
   max-width: 56ch;
   text-wrap: pretty
}

.sec-386 {
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-width: 280px
}

.sec-387 {
   background: #FFBA13;
   color: #000A1C;
   padding: 16px 26px;
   font-size: 15px;
   font-weight: 600;
   text-align: center;
   transition: background .25s, transform .25s
}

.sec-388 {
   border: 1px solid rgba(141, 169, 196, .45);
   color: #fff;
   padding: 15px 26px;
   font-size: 15px;
   font-weight: 600;
   text-align: center;
   transition: background .25s
}

/* ===========================================================================
   Écrit à la main : ce que la version 2 calculait en JavaScript.
   =========================================================================== */

/* -- 1. Le sélecteur des autres secteurs --------------------------------- */

.sec-chip {
   flex: none;
   white-space: nowrap;
   font-size: 13.5px;
   font-weight: 500;
   padding: 8px 13px;
   border: 1px solid rgba(141, 169, 196, .4);
   background: transparent;
   color: #D3E2ED;
   transition: background .2s, border-color .2s, color .2s
}

.sec-chip:hover {
   border-color: var(--ag-accent);
   color: #fff
}

.sec-chip.is-actif {
   font-weight: 600;
   border-color: var(--ag-accent);
   background: var(--ag-accent);
   color: #000A1C
}

/* -- 2. Les deux décors à états ------------------------------------------
   Le faux QR code du secteur « sport » (441 carrés) et le faux calendrier de
   l'hôtellerie (35 cases). La version 2 posait un style inline par carré ;
   le motif est tiré d'une suite pseudo-aléatoire à graine fixe, donc le
   dessin est le même à chaque génération.
   ------------------------------------------------------------------------- */

.sec-qr {
   background: transparent
}

.sec-qr.is-on {
   background: #000A1C
}

.sec-jour {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 400;
   background: transparent;
   color: #D3E2ED
}

/* Les quatre nuits retenues. */
.sec-jour.is-sel {
   font-weight: 600;
   background: #F2C48D;
   color: #000A1C
}

/* Les nuits déjà prises : barrées, comme dans un vrai moteur de réservation. */
.sec-jour.is-full {
   background: #22324F;
   color: #5C7897;
   text-decoration: line-through
}


/* ===========================================================================
   Petits écrans. Tous les paliers sont écrits pour la 4.0.

   Les onze illustrations du héros ne sont PAS repliées une par une : elles
   sont décoratives, enfermées dans `.sec-22`, et c'est ce cadre qui rétrécit.
   Chacune garde donc sa mise en page interne, à l'échelle.
   =========================================================================== */

/* -- jusqu'à 1180 px ----------------------------------------------------- */
@media (max-width:1180px) {

   .sec-4,
   .sec-318,
   .sec-330,
   .sec-356,
   .sec-372,
   .sec-382 {
      padding-left: 40px;
      padding-right: 40px
   }

   .sec-13 {
      font-size: 48px
   }

   .sec-9 {
      gap: 40px
   }

   .sec-319 {
      gap: 48px
   }

   .sec-374 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }
}


/* -- jusqu'à 1100 px : le héros passe sur une colonne -------------------- */
@media (max-width:1100px) {

   .sec-9 {
      grid-template-columns: minmax(0, 1fr);
      gap: 48px;
      padding: 36px 0 48px
   }

   /* L'illustration du héros est décorative : elle rétrécit, elle ne
     disparaît pas.

     `width` et pas seulement `max-width` : sur un élément de grille, des
     marges automatiques coupent l'étirement, et la largeur se calcule alors
     sur le CONTENU en flux. Or tout le contenu est en `position:absolute` —
     le flux est vide, la boîte tombait donc à zéro et l'illustration
     disparaissait sans un mot. Une largeur explicite la garde. */
   .sec-22 {
      width: min(620px, 100%);
      margin: 0 auto
   }

   .sec-319,
   .sec-336,
   .sec-356,
   .sec-382 {
      grid-template-columns: minmax(0, 1fr);
      gap: 40px
   }

   /* Un bloc collant qui n'a plus rien à surplomber flotte : il redevient
     ordinaire dès que les deux colonnes sont devenues deux lignes. */
   .sec-320,
   .sec-357,
   .sec-337 {
      position: static
   }

   .sec-347,
   .sec-358 {
      grid-template-columns: minmax(0, 1fr)
   }

   .sec-383 {
      min-width: 0
   }
}


/* -- jusqu'à 900 px : colonne unique, gouttières 20 px ------------------- */
@media (max-width:900px) {

   .sec-4,
   .sec-318,
   .sec-330,
   .sec-356,
   .sec-372,
   .sec-382 {
      padding-left: 20px;
      padding-right: 20px
   }

   .sec-318,
   .sec-330,
   .sec-356,
   .sec-372 {
      padding-top: 56px;
      padding-bottom: 60px
   }

   .sec-13 {
      font-size: 38px
   }

   .sec-15 {
      font-size: 20px
   }

   .sec-311 {
      grid-template-columns: minmax(0, 1fr)
   }

   .sec-312 {
      padding: 16px 0;
      border-bottom: 1px solid rgba(141, 169, 196, .18)
   }

   .sec-374 {
      grid-template-columns: minmax(0, 1fr)
   }

   .sec-17 {
      flex-wrap: wrap
   }

   .sec-345,
   .sec-357 {
      font-size: 30px
   }

   /* La fiche projet garde ses trois colonnes de résultats sur grand écran ;
     ici elles s'empilent, et la carte n'a plus de gouttière intérieure de
     44 px à tenir. */
   .sec-340 {
      padding: 28px 24px 24px
   }

   .sec-324 {
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 12px
   }

   .sec-pain-fix,
   .sec-pain-proofs {
      grid-template-columns: 120px minmax(0, 1fr);
      gap: 12px
   }
}


/* -- jusqu'à 560 px : typographie du téléphone -------------------------- */
@media (max-width:560px) {

   .sec-13 {
      font-size: 31px
   }

   .sec-15 {
      font-size: 18px
   }

   .sec-345,
   .sec-357 {
      font-size: 26px
   }

   .sec-313 {
      font-size: 32px
   }
}

.sec-pain-fix {
   display: grid;
   grid-template-columns: 150px minmax(0, 1fr);
   gap: 18px;
   align-items: baseline;
   margin-top: 20px;
   padding-top: 18px;
   border-top: 1px dashed #D3E2ED
}

.sec-pain-proofs {
   display: grid;
   grid-template-columns: 150px minmax(0, 1fr);
   gap: 18px;
   align-items: center;
   margin-top: 14px
}

.sec-pain-label {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   color: #946200;
   font-weight: 600
}

.sec-pain-proofs > .sec-pain-label {
   color: #5C7897;
   font-weight: 400
}

.sec-pain-fix p {
   margin: 0;
   color: #000A1C;
   font-size: 16px;
   font-weight: 500;
   line-height: 1.6;
   max-width: 58ch;
   text-wrap: pretty
}

.sec-pain-evidence {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
}

.sec-pain-proof {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
   background: #F1F6FA;
   color: #000A1C;
   font-size: 13.5px;
   line-height: 1.35;
   transition: background .2s
}

.sec-pain-proof strong {
   font-weight: 600
}

.sec-pain-proof > span:not(.sec-pain-arrow) {
   color: #5C7897
}

.sec-pain-arrow {
   color: #946200
}

a.sec-pain-proof:hover {
   background: #E3ECF5;
   color: #000A1C
}

a.sec-pain-proof:focus-visible {
   outline: 2px solid var(--ag-accent);
   outline-offset: 3px
}

@media (max-width:560px) {
   .sec-pain-fix,
   .sec-pain-proofs {
      grid-template-columns: minmax(0, 1fr);
      gap: 8px
   }
}