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

   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 (`svc-chip`, `svc-plan*`, `svc-faq-*`) remplacent
   des styles que la v2 recalculait en JavaScript ; elles sont écrites à la
   main, en fin de fichier, avec leurs états.

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

.svc-3 {
   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
}

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

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

.svc-6 {
   color: #FFBA13
}

.svc-7 {
   color: #8DA9C4
}

.svc-8 {
   color: #fff
}

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

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

.svc-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
}

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

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

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

.svc-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
}

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

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

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

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

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

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

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

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

.svc-24 {
   position: absolute;
   left: 28px;
   right: 28px;
   top: 28px;
   bottom: 28px;
   background: #fff;
   display: flex;
   flex-direction: column;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7)
}

.svc-25 {
   height: 40px;
   background: #F1F6FA;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0 14px;
   border-bottom: 1px solid #D3E2ED
}

.svc-26 {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #D3E2ED
}

.svc-27 {
   flex: 1;
   margin-left: 10px;
   background: #fff;
   border: 1px solid #D3E2ED;
   padding: 5px 10px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   color: #5C7897
}

.svc-28 {
   flex: 1;
   display: grid;
   grid-template-columns: 130px minmax(0, 1fr)
}

.svc-29 {
   background: #000A1C;
   padding: 18px 16px;
   display: flex;
   flex-direction: column;
   gap: 12px
}

.svc-30 {
   width: 24px;
   height: 24px;
   background: #7FB2E5;
   margin-bottom: 8px
}

.svc-31 {
   height: 7px;
   width: 80%;
   background: #7FB2E5
}

.svc-32 {
   height: 7px;
   width: 64%;
   background: rgba(141, 169, 196, .35)
}

.svc-33 {
   height: 7px;
   width: 72%;
   background: rgba(141, 169, 196, .35)
}

.svc-34 {
   height: 7px;
   width: 56%;
   background: rgba(141, 169, 196, .35)
}

.svc-35 {
   height: 7px;
   width: 68%;
   background: rgba(141, 169, 196, .35)
}

.svc-36 {
   position: relative;
   background: #F1F6FA
}

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

.svc-38 {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(0, 10, 28, .82), rgba(0, 10, 28, .15) 75%)
}

.svc-39 {
   position: absolute;
   left: 22px;
   bottom: 22px;
   right: 40%;
   display: flex;
   flex-direction: column;
   gap: 8px
}

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

.svc-41 {
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -.02em;
   line-height: 1.1;
   color: #fff
}

.svc-42 {
   align-self: flex-start;
   background: #7FB2E5;
   color: #000A1C;
   padding: 8px 12px;
   font-size: 12.5px;
   font-weight: 600
}

.svc-43 {
   position: absolute;
   left: 14px;
   bottom: 52px;
   background: #000A1C;
   border: 1px solid #7FB2E5;
   color: #7FB2E5;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   padding: 9px 12px
}

.svc-44 {
   position: absolute;
   right: 14px;
   top: 84px;
   background: #000A1C;
   border: 1px solid #7FB2E5;
   color: #7FB2E5;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   padding: 9px 12px
}

.svc-45 {
   position: absolute;
   right: 44px;
   bottom: 14px;
   background: #7FB2E5;
   color: #000A1C;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   font-weight: 600;
   letter-spacing: .12em;
   padding: 9px 12px
}

.svc-46 {
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 50% 55%, rgba(61, 220, 151, .14), transparent 60%)
}

.svc-47 {
   position: absolute;
   left: 11%;
   top: 38px;
   width: 200px;
   height: 410px;
   background: #000A1C;
   border: 9px solid #1C2A44;
   border-radius: 36px;
   overflow: hidden;
   transform: rotate(-6deg);
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

.svc-48 {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 10, 28, 0) 45%, rgba(0, 10, 28, .9))
}

.svc-49 {
   position: absolute;
   left: 14px;
   right: 14px;
   bottom: 18px;
   display: flex;
   flex-direction: column;
   gap: 6px
}

.svc-50 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 8.5px;
   letter-spacing: .12em;
   color: #3DDC97
}

.svc-51 {
   font-size: 16px;
   font-weight: 600;
   color: #fff;
   line-height: 1.15
}

.svc-52 {
   background: #fff;
   color: #000A1C;
   text-align: center;
   padding: 8px;
   font-size: 12px;
   font-weight: 600
}

.svc-53 {
   position: absolute;
   top: 8px;
   left: 50%;
   transform: translateX(-50%);
   width: 78px;
   height: 22px;
   border-radius: 12px;
   background: #000A1C;
   z-index: 1
}

.svc-54 {
   position: absolute;
   right: 11%;
   top: 58px;
   width: 200px;
   height: 410px;
   background: #000A1C;
   border: 9px solid #1C2A44;
   border-radius: 36px;
   overflow: hidden;
   transform: rotate(6deg);
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8)
}

.svc-55 {
   background: #3DDC97;
   color: #000A1C;
   text-align: center;
   padding: 8px;
   font-size: 12px;
   font-weight: 600
}

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

.svc-57 {
   position: absolute;
   left: 50%;
   top: 22px;
   transform: translateX(-50%);
   white-space: nowrap;
   background: #000A1C;
   border: 1px solid #3DDC97;
   color: #3DDC97;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   padding: 9px 12px;
   z-index: 2
}

.svc-58 {
   position: absolute;
   left: 7%;
   bottom: 22px;
   display: flex;
   align-items: center;
   gap: 9px;
   background: #fff;
   color: #000A1C;
   padding: 10px 14px;
   font-size: 13.5px;
   font-weight: 600;
   z-index: 2
}

.svc-59 {
   width: 16px;
   height: 16px;
   display: block
}

.svc-60 {
   position: absolute;
   right: 7%;
   bottom: 22px;
   display: flex;
   align-items: center;
   gap: 9px;
   background: #3DDC97;
   color: #000A1C;
   padding: 10px 14px;
   font-size: 13.5px;
   font-weight: 600;
   z-index: 2
}

.svc-61 {
   position: absolute;
   left: 28px;
   right: 28px;
   top: 28px;
   bottom: 28px;
   background: #fff;
   color: #000A1C;
   display: flex;
   flex-direction: column;
   box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7)
}

.svc-62 {
   height: 36px;
   background: #F1F6FA;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0 14px;
   border-bottom: 1px solid #D3E2ED
}

.svc-63 {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #D3E2ED
}

.svc-64 {
   flex: 1;
   margin-left: 10px;
   background: #fff;
   border: 1px solid #D3E2ED;
   padding: 4px 10px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   color: #5C7897
}

.svc-65 {
   display: flex;
   align-items: center;
   gap: 18px;
   padding: 14px 20px;
   border-bottom: 1px solid #D3E2ED
}

.svc-66 {
   font-size: 16px;
   font-weight: 700;
   letter-spacing: -.01em
}

.svc-67 {
   flex: 1;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .1em;
   color: #5C7897
}

.svc-68 {
   background: #FF8A5B;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   font-weight: 600;
   letter-spacing: .1em;
   padding: 6px 10px
}

.svc-69 {
   position: relative;
   height: 140px;
   background: #F3EBD9
}

.svc-70 {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(0, 10, 28, .7), rgba(0, 10, 28, 0) 70%)
}

.svc-71 {
   position: absolute;
   left: 20px;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: 8px
}

.svc-72 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .14em;
   color: #FF8A5B
}

.svc-73 {
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -.02em;
   color: #fff
}

.svc-74 {
   padding: 16px 20px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px
}

.svc-75 {
   display: flex;
   flex-direction: column;
   gap: 6px
}

.svc-76 {
   height: 84px;
   background: #FBE3D8
}

.svc-77 {
   font-size: 12.5px;
   color: #001751
}

.svc-78 {
   font-size: 14px;
   font-weight: 600
}

.svc-79 {
   height: 84px;
   background: #E3ECF5
}

.svc-80 {
   height: 84px;
   background: #F3EBD9
}

.svc-81 {
   position: absolute;
   left: 14px;
   bottom: 14px;
   background: #000A1C;
   border: 1px solid #FF8A5B;
   color: #FF8A5B;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   padding: 9px 12px
}

.svc-82 {
   position: absolute;
   inset: 28px;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   grid-template-rows: auto 1fr;
   gap: 12px
}

.svc-83 {
   grid-column: span 2;
   background: #fff;
   color: #000A1C;
   padding: 18px 22px;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 16px
}

.svc-84 {
   font-size: 130px;
   font-weight: 600;
   letter-spacing: -.06em;
   line-height: .85
}

.svc-85 {
   display: flex;
   flex-direction: column;
   gap: 6px;
   text-align: right
}

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

.svc-87 {
   font-size: 14px;
   color: #001751
}

.svc-88 {
   position: relative;
   background: #000A1C;
   border: 1px solid rgba(255, 92, 122, .45)
}

.svc-89 {
   grid-column: span 2;
   background: #000A1C;
   border: 1px solid rgba(141, 169, 196, .3);
   padding: 16px 18px;
   display: flex;
   flex-direction: column;
   gap: 12px
}

.svc-90 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .14em;
   color: #FF5C7A
}

.svc-91 {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 8px
}

.svc-92 {
   display: flex;
   flex-direction: column;
   gap: 6px;
   min-width: 0
}

.svc-93 {
   height: 72px;
   background: #000A1C;
   border: 1px solid rgba(141, 169, 196, .3)
}

.svc-94 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   color: #B9CCDD
}

.svc-95 {
   height: 72px;
   background: #FFBA13;
   border: 1px solid rgba(141, 169, 196, .3)
}

.svc-96 {
   height: 72px;
   background: #FF5C7A;
   border: 1px solid rgba(141, 169, 196, .3)
}

.svc-97 {
   height: 72px;
   background: #8DA9C4;
   border: 1px solid rgba(141, 169, 196, .3)
}

.svc-98 {
   height: 72px;
   background: #F1F6FA;
   border: 1px solid rgba(141, 169, 196, .3)
}

.svc-99 {
   background: #000A1C;
   border: 1px solid rgba(141, 169, 196, .3);
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 10px
}

.svc-100 {
   background: #FF5C7A;
   color: #000A1C;
   text-align: center;
   padding: 10px;
   font-size: 13.5px;
   font-weight: 600
}

.svc-101 {
   border: 1px solid rgba(141, 169, 196, .5);
   color: #fff;
   text-align: center;
   padding: 9px;
   font-size: 13.5px;
   font-weight: 600
}

.svc-102 {
   background: #fff;
   color: #5C7897;
   padding: 9px 10px;
   font-size: 13px
}

.svc-103 {
   position: absolute;
   left: 28px;
   right: 28px;
   top: 28px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px
}

.svc-104 {
   background: #000A1C;
   border: 1px solid rgba(141, 169, 196, .3);
   padding: 20px 22px;
   display: flex;
   flex-direction: column;
   gap: 6px
}

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

.svc-106 {
   font-size: 68px;
   font-weight: 600;
   letter-spacing: -.05em;
   line-height: 1;
   color: #fff
}

.svc-107 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   color: #5C7897
}

.svc-108 {
   background: #000A1C;
   border: 1px solid #B79CFF;
   padding: 20px 22px;
   display: flex;
   flex-direction: column;
   gap: 6px
}

.svc-109 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   color: #B79CFF
}

.svc-110 {
   font-size: 68px;
   font-weight: 600;
   letter-spacing: -.05em;
   line-height: 1;
   color: #B79CFF
}

.svc-111 {
   position: absolute;
   left: 28px;
   right: 28px;
   top: 190px;
   display: flex;
   align-items: center;
   gap: 14px
}

.svc-112 {
   flex: 1;
   height: 1px;
   background: rgba(183, 156, 255, .4)
}

.svc-113 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .12em;
   color: #B79CFF
}

.svc-114 {
   position: absolute;
   left: 28px;
   right: 28px;
   bottom: 28px;
   background: #fff;
   color: #000A1C;
   padding: 22px 24px;
   display: flex;
   flex-direction: column;
   gap: 16px
}

.svc-115 {
   display: flex;
   align-items: center;
   gap: 20px
}

.svc-116 {
   display: flex
}

.svc-117 {
   width: 52px;
   height: 52px;
   object-fit: cover;
   display: block;
   border: 3px solid #fff;
   margin-left: 0;
   background: #D3E2ED
}

.svc-118 {
   width: 52px;
   height: 52px;
   object-fit: cover;
   display: block;
   border: 3px solid #fff;
   margin-left: -12px;
   background: #D3E2ED
}

.svc-119 {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.svc-120 {
   font-size: 17px;
   font-weight: 600
}

.svc-121 {
   font-size: 13.5px;
   color: #001751
}

.svc-122 {
   display: flex;
   gap: 6px;
   flex-wrap: wrap
}

.svc-123 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .08em;
   padding: 6px 10px;
   background: #F1F6FA
}

.svc-124 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .08em;
   padding: 6px 10px;
   background: #B79CFF
}

.svc-125 {
   position: absolute;
   inset: 0;
   background: #050E1F;
   display: flex;
   flex-direction: column
}

.svc-126 {
   height: 38px;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0 16px;
   border-bottom: 1px solid rgba(141, 169, 196, .2)
}

.svc-127 {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #FF5C7A
}

.svc-128 {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #FFBA13
}

.svc-129 {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #3DDC97
}

.svc-130 {
   margin-left: 12px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   color: #8DA9C4
}

.svc-131 {
   padding: 16px 0;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 13.5px;
   line-height: 1.85;
   flex: 1
}

.svc-132 {
   padding: 2px 18px;
   color: #D3E2ED;
   white-space: pre
}

.svc-133 {
   color: #5EE2E2
}

.svc-134 {
   padding: 2px 18px;
   color: #FF8A8A;
   background: rgba(255, 92, 122, .1);
   white-space: pre
}

.svc-135 {
   padding: 2px 18px;
   color: #5EE2E2;
   background: rgba(94, 226, 226, .1);
   white-space: pre
}

.svc-136 {
   padding: 2px 18px;
   color: #3DDC97;
   white-space: pre
}

.svc-137 {
   padding: 2px 18px;
   color: #B9CCDD;
   white-space: pre
}

.svc-138 {
   padding: 2px 18px;
   color: #5EE2E2
}

.svc-139 {
   animation: agPulse 1s steps(1) infinite
}

.svc-140 {
   position: absolute;
   right: 24px;
   bottom: 24px;
   background: #5EE2E2;
   color: #000A1C;
   padding: 14px 18px;
   display: flex;
   flex-direction: column;
   gap: 2px
}

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

.svc-142 {
   font-size: 30px;
   font-weight: 600;
   letter-spacing: -.03em
}

.svc-143 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   top: 28px;
   width: 190px;
   height: 380px;
   background: #000A1C;
   border: 8px solid #1C2A44;
   border-radius: 30px;
   overflow: hidden;
   box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8)
}

.svc-144 {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 10, 28, .35), rgba(0, 10, 28, 0) 30%, rgba(0, 10, 28, .85))
}

.svc-145 {
   position: absolute;
   left: 12px;
   top: 14px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   font-weight: 600;
   letter-spacing: .12em;
   color: #fff
}

.svc-146 {
   position: absolute;
   left: 50%;
   top: 44%;
   transform: translate(-50%, -50%);
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .22);
   display: flex;
   align-items: center;
   justify-content: center
}

.svc-147 {
   width: 0;
   height: 0;
   border-left: 14px solid #fff;
   border-top: 9px solid transparent;
   border-bottom: 9px solid transparent;
   margin-left: 4px
}

.svc-148 {
   position: absolute;
   right: 10px;
   bottom: 70px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   align-items: center;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   color: #fff
}

.svc-149 {
   text-align: center;
   letter-spacing: .06em
}

.svc-150 {
   position: absolute;
   left: 12px;
   right: 44px;
   bottom: 18px;
   display: flex;
   flex-direction: column;
   gap: 6px
}

.svc-151 {
   font-size: 12.5px;
   font-weight: 600;
   color: #fff;
   line-height: 1.25
}

.svc-152 {
   height: 3px;
   background: rgba(255, 255, 255, .3);
   display: block
}

.svc-153 {
   display: block;
   height: 100%;
   width: 62%;
   background: #FF7AB8
}

.svc-154 {
   box-sizing: border-box;
   position: absolute;
   right: 28px;
   top: 28px;
   width: calc(100% - 262px);
   background: #000A1C;
   border: 1px solid rgba(141, 169, 196, .3);
   padding: 12px 12px 12px
}

.svc-155 {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 10px
}

.svc-156 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   color: #FF7AB8
}

.svc-157 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   color: #8DA9C4
}

.svc-158 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 4px
}

.svc-159 {
   position: relative;
   aspect-ratio: 1;
   overflow: hidden;
   background: #13213D
}

.svc-160 {
   position: absolute;
   right: 5px;
   top: 5px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 8px;
   font-weight: 600;
   letter-spacing: .08em;
   background: #000A1C;
   color: #FF7AB8;
   padding: 2px 5px
}

.svc-161 {
   box-sizing: border-box;
   position: absolute;
   right: 28px;
   bottom: 28px;
   width: calc(100% - 262px);
   background: #000A1C;
   border: 1px solid #FF7AB8;
   padding: 12px 12px 12px;
   box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8)
}

.svc-162 {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 8px
}

.svc-163 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   color: #3DDC97
}

.svc-164 {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 4px
}

.svc-165 {
   display: flex;
   flex-direction: column;
   gap: 5px;
   min-width: 0
}

.svc-166 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   color: #8DA9C4;
   text-align: center
}

.svc-167 {
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 8.5px;
   font-weight: 600;
   letter-spacing: .04em;
   background: #FF7AB8;
   color: #000A1C
}

.svc-168 {
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 8.5px;
   font-weight: 600;
   letter-spacing: .04em;
   border: 1px dashed rgba(141, 169, 196, .3)
}

.svc-169 {
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 8.5px;
   font-weight: 600;
   letter-spacing: .04em;
   background: #FFBA13;
   color: #000A1C
}

.svc-170 {
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 8.5px;
   font-weight: 600;
   letter-spacing: .04em;
   background: #7FB2E5;
   color: #000A1C
}

.svc-171 {
   box-sizing: border-box;
   position: absolute;
   left: 28px;
   bottom: 28px;
   width: 190px;
   display: flex;
   gap: 6px;
   flex-wrap: wrap
}

.svc-172 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   letter-spacing: .08em;
   padding: 5px 7px;
   border: 1px solid rgba(255, 122, 184, .5);
   color: #FF7AB8
}

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

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

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

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

.svc-177 {
   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
}

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

.svc-179 {
   border-bottom: 1px solid #D3E2ED
}

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

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

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

.svc-183 {
   margin: 0;
   font-size: 44px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.035em;
   text-wrap: balance;
   max-width: 20ch
}

.svc-184 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   border-top: 1px solid #000A1C;
   border-left: 1px solid #D3E2ED
}

.svc-185 {
   padding: 30px 30px 34px;
   border-right: 1px solid #D3E2ED;
   border-bottom: 1px solid #D3E2ED;
   display: flex;
   flex-direction: column;
   gap: 14px;
   transition: background .3s
}

.svc-186-hv:hover {
   background: #F1F6FA !important
}

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

.svc-188 {
   margin: 0;
   font-size: 24px;
   font-weight: 600;
   letter-spacing: -.02em;
   line-height: 1.15
}

.svc-189 {
   margin: 0;
   font-size: 15.5px;
   line-height: 1.6;
   color: #001751;
   text-wrap: pretty
}

.svc-190 {
   background: #000A1C;
   color: #fff
}

.svc-191 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 84px 64px 88px
}

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

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

.svc-194 {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 0
}

.svc-195 {
   position: relative;
   padding: 26px 28px 0 0;
   border-top: 2px solid #FFBA13
}

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

.svc-197 {
   font-size: 24px;
   font-weight: 600;
   letter-spacing: -.02em;
   margin-bottom: 10px
}

.svc-198 {
   font-size: 15px;
   line-height: 1.6;
   color: #B9CCDD;
   max-width: 30ch;
   text-wrap: pretty
}

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

.svc-200 {
   margin: 0;
   font-size: 44px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.035em;
   text-wrap: balance;
   max-width: 22ch
}

.svc-201 {
   margin: 0;
   font-size: 15.5px;
   line-height: 1.55;
   color: #001751;
   max-width: 40ch;
   border-left: 2px solid #FFBA13;
   padding-left: 18px;
   text-wrap: pretty
}

.svc-202 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px
}

.svc-203 {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 12px
}

.svc-204 {
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -.02em
}

.svc-205 {
   display: flex;
   align-items: baseline;
   gap: 8px
}

.svc-206 {
   font-size: 52px;
   font-weight: 600;
   letter-spacing: -.045em;
   line-height: 1
}

.svc-207 {
   display: flex;
   flex-direction: column;
   gap: 9px
}

.svc-208 {
   display: flex;
   align-items: baseline;
   gap: 10px;
   font-size: 15px
}

.svc-209 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 88px 64px 96px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
   gap: 56px;
   align-items: start
}

.svc-210 {
   position: sticky;
   top: 120px;
   display: flex;
   flex-direction: column
}

.svc-211 {
   margin: 0 0 18px;
   font-size: 40px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.035em;
   text-wrap: balance
}

.svc-212 {
   margin: 0 0 22px;
   font-size: 15.5px;
   line-height: 1.6;
   color: #001751;
   text-wrap: pretty
}

.svc-213 {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 28px
}

.svc-214 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #000A1C;
   color: #fff;
   padding: 14px 18px;
   font-size: 14.5px;
   font-weight: 600;
   transition: transform .25s
}

.svc-215-hv:hover {
   transform: translateY(-2px) !important;
   color: #fff !important
}

.svc-216 {
   color: #FF7AB8
}

.svc-217 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border: 1px solid #000A1C;
   color: #000A1C;
   padding: 13px 18px;
   font-size: 14.5px;
   font-weight: 600;
   transition: transform .25s
}

.svc-218-hv:hover {
   transform: translateY(-2px) !important;
   color: #000A1C !important
}

.svc-219 {
   color: #946200
}

.svc-220 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .14em;
   color: #5C7897;
   margin-bottom: 4px
}

.svc-221 {
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding: 14px 0;
   border-top: 1px solid #D3E2ED
}

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

.svc-223 {
   display: flex;
   flex-direction: column;
   gap: 28px
}

.svc-224 {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 14px
}

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

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

.svc-227 {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 12px
}

.svc-228 {
   position: relative;
   aspect-ratio: 9/16;
   background: #0A1730;
   border: 1px solid #D3E2ED;
   overflow: hidden
}

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

.svc-230 {
   position: absolute;
   left: 10px;
   top: 10px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   font-weight: 600;
   letter-spacing: .12em;
   background: #000A1C;
   color: #FF7AB8;
   padding: 4px 7px;
   pointer-events: none
}

.svc-231 {
   position: relative;
   aspect-ratio: 1;
   background: #F1F6FA;
   border: 1px solid #D3E2ED;
   overflow: hidden
}

.svc-232 {
   background: #F1F6FA;
   border-bottom: 1px solid #D3E2ED
}

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

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

.svc-235 {
   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
}

.svc-236-hv:hover {
   gap: 15px !important
}

.svc-237 {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px
}

.svc-238 {
   background: #fff;
   border: 1px solid #D3E2ED;
   display: flex;
   flex-direction: column;
   color: #000A1C;
   transition: box-shadow .4s, transform .4s cubic-bezier(.2, .7, .2, 1)
}

.svc-239-hv:hover {
   box-shadow: 0 40px 70px -40px rgba(0, 10, 28, .45) !important;
   transform: translateY(-4px) !important;
   color: #000A1C !important
}

.svc-240 {
   position: relative;
   aspect-ratio: 16/9;
   background: #0A1730;
   overflow: hidden
}

.svc-241 {
   padding: 28px 30px 30px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   flex: 1
}

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

.svc-243 {
   margin: 0;
   font-size: 34px;
   line-height: 1;
   font-weight: 600;
   letter-spacing: -.035em
}

.svc-244 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #001751;
   text-wrap: pretty
}

.svc-245 {
   margin-top: auto;
   padding-top: 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px
}

.svc-246 {
   display: flex;
   flex-wrap: wrap;
   gap: 6px
}

.svc-247 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .06em;
   padding: 6px 10px;
   background: #F1F6FA;
   color: #001751
}

.svc-248 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .12em;
   color: #946200;
   font-weight: 600;
   flex: none
}

.svc-249 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 88px 64px 92px;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
   gap: 64px
}

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

.svc-251 {
   display: flex;
   flex-direction: column;
   border-top: 1px solid #000A1C
}

.svc-252 {
   display: flex;
   align-items: baseline;
   gap: 14px;
   padding: 18px 4px;
   border-bottom: 1px solid #D3E2ED;
   transition: padding .25s
}

.svc-253-hv:hover {
   padding-left: 12px !important
}

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

.svc-255 {
   font-size: 19px;
   font-weight: 600;
   letter-spacing: -.01em;
   flex: 1
}

.svc-256 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 28px;
   border-top: 1px solid #000A1C
}

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

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

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

.svc-260 {
   width: 6px;
   height: 6px;
   background: #FFBA13
}

.svc-261 {
   font-size: 16px;
   font-weight: 500;
   flex: 1
}

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

.svc-263 {
   position: sticky;
   top: 120px
}

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

.svc-265 {
   border-top: 1px solid #000A1C
}

.svc-266 {
   all: unset;
   box-sizing: border-box;
   width: 100%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding: 26px 0;
   font-family: Archivo, system-ui, sans-serif
}

.svc-267 {
   margin: 0;
   font-size: 21px;
   font-weight: 600;
   letter-spacing: -.015em;
   line-height: 1.3;
   color: #000A1C
}

.svc-268 {
   min-height: 0;
   overflow: hidden
}

.svc-269 {
   margin: 0;
   padding: 0 0 26px;
   font-size: 16px;
   line-height: 1.65;
   color: #001751;
   max-width: 64ch;
   text-wrap: pretty
}

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

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

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

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

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

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

.svc-276 {
   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
}

/* `svc-277` et `svc-278` s'arrêtaient ici, portant le pied de page de la
   version 2 : fond #000A1C, texte ardoise, bande en monospace. Notre pied est
   le bloc partagé `blocs/pied.njk`, donc ces deux règles ne servaient plus à
   rien — sauf à teindre la FAQ en bleu nuit, le bloc écrit à la main plus bas
   reprenant les deux mêmes numéros sans redéclarer `background` ni `color`.
   Retirées : les numéros appartiennent à la FAQ.

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

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

.svc-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
}

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

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

/* -- 2. Les forfaits ------------------------------------------------------
   Un seul est mis en avant. La v2 recalculait six objets de style par carte ;
   ici une classe sur la carte suffit, les enfants s'y accrochent.
   ------------------------------------------------------------------------- */

.svc-plan {
   background: #fff;
   color: #000A1C;
   border: 1px solid #D3E2ED;
   padding: 30px 28px;
   display: flex;
   flex-direction: column;
   gap: 20px
}

.svc-plan.is-hi {
   background: #000A1C;
   color: #fff;
   border-color: var(--ag-accent);
   box-shadow: 0 40px 70px -40px rgba(0, 10, 28, .6);
   transform: translateY(-10px)
}

.svc-plan-badge {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .12em;
   font-weight: 600;
   color: #000A1C
}

.svc-plan.is-hi .svc-plan-badge {
   padding: 5px 8px;
   background: var(--ag-accent)
}

.svc-plan-sub {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .1em;
   color: #5C7897
}

.svc-plan.is-hi .svc-plan-sub {
   color: #8DA9C4
}

.svc-plan-meta {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 14px 0;
   border-top: 1px solid #D3E2ED;
   border-bottom: 1px solid #D3E2ED;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .1em;
   color: #001751
}

.svc-plan.is-hi .svc-plan-meta {
   border-color: rgba(141, 169, 196, .3);
   color: #D3E2ED
}

.svc-plan-dot {
   width: 6px;
   height: 6px;
   background: var(--ag-accent);
   flex: none;
   transform: translateY(-2px)
}

.svc-plan-cta {
   margin-top: auto;
   text-align: center;
   padding: 14px 18px;
   font-size: 14.5px;
   font-weight: 600;
   background: transparent;
   color: #000A1C;
   border: 1px solid #000A1C;
   transition: background .25s, color .25s
}

.svc-plan-cta:hover {
   background: #000A1C;
   color: #fff
}

.svc-plan.is-hi .svc-plan-cta {
   background: var(--ag-accent);
   border-color: var(--ag-accent);
   color: #000A1C
}

.svc-plan.is-hi .svc-plan-cta:hover {
   background: #fff;
   border-color: #fff;
   color: #000A1C
}

/* -- 3. Les questions fréquentes ----------------------------------------- */

.svc-277 {
   border-bottom: 1px solid #D3E2ED
}

.svc-278 {
   margin: 0;
   font: inherit
}

.svc-faq-ico {
   flex: none;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   font-weight: 400;
   border: 1px solid #FFBA13;
   background: #FFBA13;
   color: #000A1C;
   transform: rotate(45deg);
   transition: transform .3s, background .3s, border-color .3s
}

.ag-faq.is-off .svc-faq-ico {
   border-color: #D3E2ED;
   background: transparent;
   transform: none
}

.svc-faq-corps {
   display: grid;
   grid-template-rows: 1fr;
   overflow: hidden;
   transition: grid-template-rows .35s cubic-bezier(.2, .7, .2, 1)
}

.ag-faq.is-off .svc-faq-corps {
   grid-template-rows: 0fr
}


/* ===========================================================================
   Petits écrans. Tous les paliers sont écrits pour la 4.0 : la version 2 ne
   descendait pas sous 1280 px.
   =========================================================================== */

/* ===========================================================================
   DevOps, cloud & support IT
   La septième page service, convertie de son export du 2026-10-29. Elle
   apporte deux sections qu'aucune autre n'a — les domaines avec leurs outils,
   et ce qui a été mis en place — plus la maquette de pipeline de son héros.
   =========================================================================== */

/* -- La maquette du héros : une console de pipeline -------------------- */
.svc-279 {
   position: absolute;
   inset: 0;
   background: #050E1F;
   border: 1px solid rgba(141, 169, 196, .25);
   overflow: hidden;
   display: flex;
   flex-direction: column
}

.svc-280 {
   height: 38px;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0 16px;
   border-bottom: 1px solid rgba(141, 169, 196, .2)
}

.svc-281,
.svc-282,
.svc-283 {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   flex: none
}

.svc-281 { background: #FF5C7A }
.svc-282 { background: #FFBA13 }
.svc-283 { background: #3DDC97 }

.svc-284 {
   margin-left: 12px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   color: #8DA9C4
}

.svc-285 {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 6px;
   padding: 18px 18px 6px
}

.svc-286,
.svc-289 {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 10px;
   min-width: 0
}

.svc-286 { border: 1px solid rgba(184, 232, 107, .5) }
.svc-289 { background: #B8E86B }

.svc-287,
.svc-290 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .1em;
   overflow-wrap: anywhere
}

.svc-287 { color: #8DA9C4 }
.svc-290 { color: #000A1C; font-weight: 600 }

.svc-288,
.svc-291 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px
}

.svc-288 { color: #B8E86B }
.svc-291 { color: #000A1C }

.svc-292 {
   padding: 12px 0;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 13px;
   line-height: 1.85;
   flex: 1;
   min-height: 0;
   overflow: hidden
}

.svc-293,
.svc-295,
.svc-296,
.svc-297 {
   padding: 2px 18px;
   white-space: pre
}

.svc-293 { color: #D3E2ED }
.svc-294 { color: #B8E86B }
.svc-295 { color: #3DDC97 }
.svc-296 { color: #B9CCDD }
.svc-297 { color: #B8E86B; white-space: normal }

.svc-298 {
   position: absolute;
   right: 24px;
   bottom: 24px;
   background: #B8E86B;
   color: #000A1C;
   padding: 14px 18px;
   display: flex;
   flex-direction: column;
   gap: 2px
}

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

.svc-300 {
   font-size: 30px;
   font-weight: 600;
   letter-spacing: -.03em
}

/* -- Les domaines et leurs outils --------------------------------------- */
.svc-301 {
   background: #F1F6FA;
   border-bottom: 1px solid #D3E2ED
}

.svc-302 {
   margin: 0 0 44px;
   font-size: 44px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.035em;
   text-wrap: balance;
   max-width: 22ch
}

.svc-303 {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px
}

.svc-304 {
   background: #fff;
   border: 1px solid #D3E2ED;
   border-top: 2px solid #000A1C;
   padding: 30px 30px 32px;
   display: flex;
   flex-direction: column;
   gap: 16px
}

.svc-305 {
   display: flex;
   align-items: baseline;
   gap: 14px
}

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

.svc-307 {
   margin: 0;
   font-size: 28px;
   font-weight: 600;
   letter-spacing: -.025em;
   line-height: 1.1
}

.svc-308 {
   margin: 0;
   font-size: 15.5px;
   line-height: 1.6;
   color: #001751;
   text-wrap: pretty
}

.svc-309 {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   padding-top: 16px;
   border-top: 1px solid #D3E2ED;
   margin-top: auto
}

/* L'étiquette d'un outil : son logo, ou une pastille quand nous n'avons pas
   son dessin. Le nom est écrit dans les deux cas. */
.svc-310 {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 500;
   padding: 8px 12px 8px 10px;
   background: #F1F6FA;
   color: #000A1C
}

.svc-311 {
   width: 16px;
   height: 16px;
   flex: none;
   display: block;
   object-fit: contain
}

.svc-312 {
   width: 16px;
   height: 16px;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center
}

.svc-313 {
   width: 6px;
   height: 6px;
   background: #FFBA13
}

/* -- Sur le terrain ------------------------------------------------------ */
.svc-314 {
   border-bottom: 1px solid #D3E2ED
}

.svc-315 {
   display: flex;
   flex-direction: column;
   gap: 48px
}

.svc-316 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .14em;
   color: #000A1C;
   font-weight: 600;
   padding-bottom: 14px;
   border-bottom: 1px solid #000A1C
}

.svc-317 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.4fr);
   gap: 32px;
   padding: 24px 0;
   border-bottom: 1px solid #D3E2ED;
   align-items: start
}

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

.svc-319,
.svc-322 {
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -.02em;
   line-height: 1.15
}

.svc-319 {
   color: #000A1C;
   display: flex;
   gap: 8px;
   align-items: baseline;
   flex-wrap: wrap;
   transition: color .2s
}

.svc-320-hv:hover {
   color: #946200 !important
}

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

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

.svc-324 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #946200
}

.svc-325 {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   align-content: start
}

.svc-326 {
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: 13px;
   font-weight: 500;
   padding: 6px 10px 6px 8px;
   background: #F1F6FA;
   color: #000A1C
}

.svc-327 {
   width: 14px;
   height: 14px;
   flex: none;
   display: block;
   object-fit: contain
}

.svc-328 {
   width: 14px;
   height: 14px;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center
}

.svc-329 {
   width: 5px;
   height: 5px;
   background: #FFBA13
}

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

   .svc-4,
   .svc-180,
   .svc-191,
   .svc-209,
   .svc-233,
   .svc-249,
   .svc-262,
   .svc-270 {
      padding-left: 40px;
      padding-right: 40px
   }

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

   .svc-9 {
      gap: 40px
   }

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

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

   .svc-262 {
      gap: 48px
   }
}


/* -- jusqu'à 1100 px : le héros et les grilles larges passent en colonne - */
@media (max-width:1100px) {
   /* Sur le terrain : les trois colonnes se replient, le descriptif passe
      sous le titre et les outils sous le descriptif. */
   .svc-317 {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px
   }


   .svc-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. */
   .svc-22 {
      width: min(620px, 100%);
      margin: 0 auto
   }

   .svc-184,
   .svc-202 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   /* La carte mise en avant ne se soulève plus : sur une colonne, le décalage
     passe pour un défaut d'alignement. */
   .svc-plan.is-hi {
      transform: none
   }

   .svc-209,
   .svc-249,
   .svc-262,
   .svc-270 {
      grid-template-columns: minmax(0, 1fr);
      gap: 40px
   }

   .svc-263 {
      position: static
   }

   .svc-274 {
      min-width: 0
   }
}


/* -- jusqu'à 900 px : colonne unique, gouttières 20 px ------------------- */
@media (max-width:900px) {
   .svc-302 {
      font-size: 32px;
      margin-bottom: 32px
   }

   /* Les quatre domaines passent l'un sous l'autre. */
   .svc-303 {
      grid-template-columns: minmax(0, 1fr)
   }

   .svc-304 {
      padding: 24px 20px 26px
   }

   .svc-307 {
      font-size: 24px
   }

   /* Le pipeline du héros : cinq étapes dans 320 px ne montreraient que des
      traits. On les replie sur deux rangées. */
   .svc-285 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 12px 12px 4px
   }

   .svc-292 {
      font-size: 11px
   }

   .svc-293,
   .svc-295,
   .svc-296,
   .svc-297 {
      padding-left: 12px;
      padding-right: 12px;
      white-space: normal;
      overflow-wrap: anywhere
   }

   .svc-298 {
      right: 12px;
      bottom: 12px;
      padding: 10px 12px
   }

   .svc-300 {
      font-size: 22px
   }


   .svc-4,
   .svc-180,
   .svc-191,
   .svc-209,
   .svc-233,
   .svc-249,
   .svc-262,
   .svc-270 {
      padding-left: 20px;
      padding-right: 20px
   }

   .svc-180,
   .svc-191,
   .svc-209,
   .svc-233,
   .svc-249,
   .svc-262 {
      padding-top: 56px;
      padding-bottom: 60px
   }

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

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

   .svc-173 {
      grid-template-columns: minmax(0, 1fr)
   }

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

   .svc-184,
   .svc-194,
   .svc-202,
   .svc-227,
   .svc-237,
   .svc-256 {
      grid-template-columns: minmax(0, 1fr)
   }

   .svc-17 {
      flex-wrap: wrap
   }

   .svc-183,
   .svc-193,
   .svc-200,
   .svc-211,
   .svc-234,
   .svc-250,
   .svc-264,
   .svc-272 {
      font-size: 30px
   }

   .svc-266 {
      padding: 20px 0;
      gap: 14px
   }

   .svc-267 {
      font-size: 18px
   }
}


/* -- jusqu'à 560 px : typographie du téléphone -------------------------- */
@media (max-width:560px) {
   .svc-302 {
      font-size: 26px
   }

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


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

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

   .svc-183,
   .svc-193,
   .svc-200,
   .svc-211,
   .svc-234,
   .svc-250,
   .svc-264,
   .svc-272 {
      font-size: 26px
   }

   .svc-175 {
      font-size: 32px
   }

   .svc-243 {
      font-size: 24px
   }

   .svc-faq-ico {
      width: 30px;
      height: 30px;
      font-size: 19px
   }
}