/* -- 1. Fonts -------------------------------------------------------------- */
/* vietnamese */
/** assets/css/akata_fonts.css */

/* -- 2. Base --------------------------------------------------------------- */
body {
   margin: 0;
   background: #fff;
   -webkit-font-smoothing: antialiased
}

a {
   color: #000A1C;
   text-decoration: none
}

a:hover {
   color: #946200
}

/* Le niveau d'un titre décrit la structure du document ; sa mise en forme vient
   de sa classe. Sélecteur volontairement peu spécifique : chaque classe
   l'emporte, on ne neutralise que les styles par défaut du navigateur. */
h1,
h2,
h3,
h4 {
   margin: 0;
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit
}

/* Navigation interne : les liens d'ancre glissent jusqu'à leur section au lieu
   d'y sauter. La marge de défilement dégage l'en-tête collant (80 px de .page-3
   plus sa barre de progression) et laisse un peu d'air au-dessus du titre. */
html {
   scroll-behavior: smooth
}

#app section[id] {
   scroll-margin-top: 104px
}

@keyframes agRise {
   from {
      opacity: 0;
      transform: translateY(30px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes agFade {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes agLeft {
   from {
      opacity: 0;
      transform: translateX(-26px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes agBar {
   from {
      transform: scaleX(0)
   }

   to {
      transform: scaleX(1)
   }
}

@keyframes agProgress {
   from {
      transform: scaleX(0)
   }

   to {
      transform: scaleX(1)
   }
}

@keyframes agMarquee {
   from {
      transform: translateX(0)
   }

   to {
      transform: translateX(-50%)
   }
}

@keyframes agDrift {
   from {
      background-position: 0 0
   }

   to {
      background-position: 56px 56px
   }
}

@keyframes agPulse {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: .2
   }
}

@keyframes agBob {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(5px)
   }
}

@keyframes agWaRing {
   0% {
      transform: scale(1);
      opacity: .55
   }

   70% {
      transform: scale(1.55);
      opacity: 0
   }

   100% {
      transform: scale(1.55);
      opacity: 0
   }
}

body[data-motion="off"] * {
   animation: none !important;
   transition: none !important
}

html:has(body[data-motion="off"]) {
   scroll-behavior: auto
}

@media (prefers-reduced-motion:reduce) {
   * {
      animation: none !important;
      transition: none !important
   }

   html {
      scroll-behavior: auto
   }
}

:root {
   /* the empty-slot icon, drawn once here and masked in wherever it is needed */
   --slot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
}

/* Placeholder for a picture that has not been supplied yet: a tinted frame
   (::before), a dashed ring (::after) and a centred icon + label. Drop a real
   <img> inside when you have one — the three placeholder layers step aside.
   The element itself keeps the size and background its own class gives it. */
x-image-slot {
   position: relative;
   display: block;
   aspect-ratio: 3/2;
   font: 13px/1.3 system-ui, -apple-system, sans-serif;
}

x-image-slot::before,
x-image-slot::after {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
}

x-image-slot::before {
   background: rgba(127, 127, 127, .08);
}

x-image-slot::after {
   border: 1.5px dashed currentColor;
   opacity: .35;
}

x-image-slot>span {
   position: absolute;
   inset: 0;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 6px;
   padding: 12px;
   box-sizing: border-box;
   text-align: center;
   font-weight: 500;
   letter-spacing: .01em;
   opacity: .75;
}

/* .45 of the label's own .75, so the icon lands at the .45 the design asks for.
   It is allowed to shrink — in a small slot the label keeps its size and the
   icon gives way, `contain` scaling the glyph down with the box. */
x-image-slot>span::before {
   content: "";
   width: 28px;
   height: 28px;
   opacity: .6;
   background: currentColor;
   -webkit-mask: var(--slot-icon) center / contain no-repeat;
   mask: var(--slot-icon) center / contain no-repeat;
}

x-image-slot[data-shape="circle"],
x-image-slot[data-shape="circle"]::before,
x-image-slot[data-shape="circle"]::after,
x-image-slot[data-shape="circle"]>span,
x-image-slot[data-shape="circle"]>img {
   border-radius: 50%;
}

x-image-slot[data-shape="rounded"],
x-image-slot[data-shape="rounded"]::before,
x-image-slot[data-shape="rounded"]::after,
x-image-slot[data-shape="rounded"]>span,
x-image-slot[data-shape="rounded"]>img {
   border-radius: 12px;
}

x-image-slot[data-shape="pill"],
x-image-slot[data-shape="pill"]::before,
x-image-slot[data-shape="pill"]::after,
x-image-slot[data-shape="pill"]>span,
x-image-slot[data-shape="pill"]>img {
   border-radius: 9999px;
}

x-image-slot>img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

x-image-slot:has(img)>span,
x-image-slot:has(img)::before,
x-image-slot:has(img)::after {
   display: none;
}

/* -- 3. Elements ----------------------------------------------------------- */


/* page */
.page-1 {
   font-family: Archivo, system-ui, sans-serif;
   background: #fff;
   color: #000A1C
}

.page-2 {
   position: sticky;
   top: 0;
   z-index: 20;
   background: rgba(255, 255, 255, .94);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid #D3E2ED
}

.page-3 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 0 64px;
   height: 80px;
   display: flex;
   align-items: center;
   gap: 28px
}

.page-4 {
   display: flex;
   align-items: center;
   gap: 12px;
   flex: none
}

.page-5 {
   width: 44px;
   height: 44px;
   display: block;
   transition: transform .5s cubic-bezier(.2, .7, .2, 1)
}

/* page-6 */
.page-6-hv:hover {
   transform: rotate(-8deg) scale(1.06) !important
}

/* page */
.page-7 {
   font-size: 15px;
   font-weight: 700;
   letter-spacing: -.01em
}

.page-8 {
   display: flex;
   flex-shrink: 1;
   min-width: 0;
   overflow: hidden;
   gap: 17px;
   margin-left: auto;
   min-width: 0;
   font-size: 14.5px;
   color: #001751
}

.page-9 {
   padding-bottom: 3px;
   border-bottom: 1px solid transparent;
   transition: border-color .25s, color .25s;
   white-space: nowrap
}

/* page-10 */
.page-10-hv:hover {
   border-color: #946200 !important
}

/* page */
.page-11 {
   padding-bottom: 3px;
   border-bottom: 1px solid transparent;
   transition: border-color .25s, color .25s
}

.page-12 {
   display: flex;
   align-items: center;
   gap: 13px;
   flex: none
}

.page-13 {
   background: #000A1C;
   color: #fff;
   padding: 13px 20px;
   font-size: 14px;
   font-weight: 600;
   white-space: nowrap;
   transition: background .25s, transform .25s
}

/* page-14 */
.page-14-hv:hover {
   background: #946200 !important;
   color: #fff !important;
   transform: translateY(-1px) !important
}

/* page */
.page-15 {
   position: absolute;
   left: 0;
   right: 0;
   bottom: -1px;
   height: 2px;
   background: #FFBA13;
   transform-origin: 0 50%;
   transform: scaleX(0);
   animation: agProgress 1s linear both;
   animation-timeline: scroll(root)
}

.page-16 {
   border-bottom: 1px solid #D3E2ED;
   overflow: hidden
}

.page-17 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 0 64px
}

.page-18 {
   padding: 34px 0 26px;
   display: flex;
   align-items: baseline;
   gap: 16px;
   animation: agFade .7s both
}

.page-19 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .18em;
   color: #946200
}

.page-20 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .14em;
   color: #5C7897;
   display: flex;
   align-items: center;
   gap: 8px;
   margin-left: auto
}

.page-21 {
   width: 6px;
   height: 6px;
   background: #FFBA13;
   flex: none;
   animation: agPulse 2s ease-in-out infinite
}

.page-22 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .14em;
   color: #5C7897;
   margin-left: auto;
   display: flex;
   gap: 8px;
   align-items: center
}

.page-23 {
   display: inline-block;
   animation: agBob 2.2s ease-in-out infinite
}

.page-24 {
   display: flex;
   align-items: stretch;
   min-height: 580px;
   margin: 0 -64px;
   border-top: 1px solid #D3E2ED
}

.page-25 {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .16;
   background-image: repeating-linear-gradient(135deg, #FFBA13 0 1px, transparent 1px 14px);
   animation: agDrift 14s linear infinite
}

.page-26 {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   height: 100%
}

.page-27 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .18em;
   color: #FFBA13;
   animation: agRise .8s cubic-bezier(.2, .7, .2, 1) both .05s
}

.page-28 {
   margin: 0 0 22px;
   font-size: 60px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.035em;
   color: #fff;
   max-width: 15ch;
   text-wrap: balance;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both .16s
}

.page-29 {
   margin: 0 0 34px;
   font-size: 18px;
   line-height: 1.45;
   color: #D3E2ED;
   max-width: 42ch;
   text-wrap: pretty;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both .28s
}

.page-30 {
   display: inline-flex;
   align-self: flex-start;
   background: #FFBA13;
   color: #000A1C;
   padding: 17px 28px;
   font-size: 15.5px;
   font-weight: 600;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both .4s;
   transition: gap .3s, box-shadow .3s;
   gap: 8px
}

/* page-31 */
.page-31-hv:hover {
   box-shadow: 0 14px 30px rgba(0, 0, 0, .28) !important;
   gap: 14px !important
}

/* page */
.page-32 {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .2;
   background-image: repeating-linear-gradient(135deg, #000A1C 0 1px, transparent 1px 14px);
   animation: agDrift 18s linear infinite reverse
}

.page-33 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .18em;
   color: #000A1C;
   animation: agRise .8s cubic-bezier(.2, .7, .2, 1) both .1s
}

.page-34 {
   margin: 0 0 22px;
   font-size: 60px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.035em;
   color: #000A1C;
   max-width: 15ch;
   text-wrap: balance;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both .22s
}

.page-35 {
   margin: 0 0 34px;
   font-size: 18px;
   line-height: 1.45;
   color: #001751;
   max-width: 42ch;
   text-wrap: pretty;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both .34s
}

.page-36 {
   display: inline-flex;
   align-self: flex-start;
   background: #000A1C;
   color: #fff;
   padding: 17px 28px;
   font-size: 15.5px;
   font-weight: 600;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both .46s;
   transition: gap .3s, box-shadow .3s;
   gap: 8px
}

/* page-37 */
.page-37-hv:hover {
   box-shadow: 0 14px 30px rgba(0, 10, 28, .3) !important;
   gap: 14px !important
}

/* page */
.page-38 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 88px 64px 80px
}

.page-39 {
   display: flex;
   align-items: flex-end;
   gap: 40px;
   margin-bottom: 44px
}

.page-40 {
   animation: agLeft .9s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% cover 22%
}

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

.page-42 {
   margin: 0;
   font-size: 46px;
   line-height: 1.05;
   font-weight: 600;
   letter-spacing: -.03em;
   max-width: 24ch;
   text-wrap: balance
}

.page-43 {
   margin: 0 0 8px auto;
   font-size: 17.5px;
   line-height: 1.4;
   font-weight: 500;
   color: #001751;
   max-width: 30ch;
   text-wrap: pretty;
   border-left: 2px solid #D3E2ED;
   padding-left: 18px;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 4% cover 26%
}

.page-44 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   padding: 0 0 40px
}

.page-45 {
   border-left: 2px solid #FFBA13;
   padding: 2px 0 2px 16px;
   animation: agRise .8s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% entry 96%
}

.page-46 {
   display: flex;
   align-items: baseline;
   gap: 8px
}

.page-47 {
   font-size: 38px;
   font-weight: 700;
   letter-spacing: -.04em;
   line-height: .95;
   color: #000A1C
}

.page-48 {
   font-size: 15px;
   font-weight: 600;
   letter-spacing: -.01em;
   color: #000A1C
}

.page-49 {
   font-size: 14.5px;
   line-height: 1.4;
   color: #001751;
   margin-top: 9px;
   max-width: 30ch;
   text-wrap: pretty
}

.page-50 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .12em;
   color: #5C7A99;
   margin-top: 7px
}

.page-51 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px
}

.page-52 {
   background: #fff;
   border: 1px solid #D3E2ED;
   border-top: 3px solid #FFBA13;
   padding: 28px 26px 26px;
   display: flex;
   flex-direction: column;
   gap: 14px;
   box-shadow: 0 5px 16px rgba(0, 10, 28, .06);
   transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s
}

/* page-53 */
.page-53-hv:hover {
   transform: translateY(-5px) !important;
   box-shadow: 0 22px 44px rgba(0, 10, 28, .14) !important
}

/* page */
.page-54 {
   display: flex;
   align-items: center;
   gap: 12px
}

.page-55 {
   width: 30px;
   height: 30px;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #000A1C;
   color: #FFBA13;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .02em
}

.page-56 {
   font-size: 18.5px;
   font-weight: 600;
   line-height: 1.15;
   letter-spacing: -.02em;
   text-wrap: balance
}

.page-57 {
   font-size: 15px;
   line-height: 1.45;
   color: #001751;
   text-wrap: pretty
}

.page-58 {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin-top: auto
}

.page-59 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .06em;
   color: #001751;
   background: #F1F6FA;
   border: 1px solid #D3E2ED;
   padding: 6px 9px;
   white-space: nowrap
}

/* realisations */
.realisations-1 {
   background: #000A1C;
   color: #fff
}

.realisations-2 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 76px 64px 88px
}

.realisations-3 {
   display: flex;
   align-items: baseline;
   gap: 20px;
   margin-bottom: 26px
}

.realisations-4 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .18em;
   color: #FFBA13
}

.realisations-5 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #5C7897;
   margin-left: auto
}

.realisations-6 {
   position: relative;
   overflow: hidden;
   background: #F1F6FA;
   border: 1px solid rgba(141, 169, 196, .22);
   margin-bottom: 80px
}

.realisations-7 {
   display: flex;
   width: max-content;
   animation: agMarquee 46s linear infinite
}

/* realisations-8 */
.realisations-8-hv:hover {
   animation-play-state: paused !important
}

/* realisations */
.realisations-9 {
   display: flex;
   align-items: center;
   gap: 18px;
   padding: 18px 34px;
   border-right: 1px solid #D3E2ED;
   white-space: nowrap;
   transition: background .3s
}

/* realisations-10 */
.realisations-10-hv:hover {
   background: #E4EEF6 !important
}

/* realisations */
.realisations-11 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   color: #5C7A99
}

.realisations-12 {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   width: 90px;
   pointer-events: none;
   background: linear-gradient(90deg, #F1F6FA, transparent)
}

.realisations-13 {
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   width: 90px;
   pointer-events: none;
   background: linear-gradient(270deg, #F1F6FA, transparent)
}

.realisations-14 {
   display: flex;
   align-items: flex-end;
   gap: 44px;
   border-bottom: 1px solid rgba(141, 169, 196, .3);
   padding-bottom: 26px;
   margin-bottom: 1px
}

.realisations-15 {
   animation: agLeft .9s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% cover 20%
}

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

.realisations-17 {
   margin: 0;
   font-size: 44px;
   line-height: 1.04;
   font-weight: 600;
   letter-spacing: -.03em;
   max-width: 26ch;
   text-wrap: balance
}

.realisations-18 {
   margin: 0 0 4px auto;
   font-size: 15.5px;
   line-height: 1.55;
   color: #8DA9C4;
   max-width: 44ch;
   text-wrap: pretty;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 4% cover 24%
}

.realisations-19 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: rgba(141, 169, 196, .24);
   border: 1px solid rgba(141, 169, 196, .24);
   border-top: none
}

.realisations-20 {
   background: #000A1C;
   padding: 34px 30px 32px;
   display: flex;
   flex-direction: column;
   transition: background .4s
}

/* realisations-21 */
.realisations-21-hv:hover {
   background: #050f22 !important
}

/* realisations */
.realisations-22 {
   margin-bottom: 26px;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% entry 90%
}

.realisations-23 {
   aspect-ratio: 16/10;
   background: #081226;
   border: 1px solid rgba(141, 169, 196, .28);
   overflow: hidden
}

.realisations-24 {
   width: 100%;
   height: 100%;
   display: block
}

.realisations-25 {
   display: flex;
   align-items: baseline;
   gap: 12px;
   margin-bottom: 6px
}

.realisations-26 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   color: #FFBA13;
   font-weight: 600
}

.realisations-27 {
   font-size: 26px;
   font-weight: 600;
   letter-spacing: -.022em
}

.realisations-28 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   color: #8DA9C4;
   padding-bottom: 24px;
   border-bottom: 1px solid rgba(141, 169, 196, .22)
}

.realisations-29 {
   padding: 22px 0 0
}

.realisations-30 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   color: #5C7897;
   margin-bottom: 9px
}

.realisations-31 {
   font-size: 15px;
   line-height: 1.55;
   color: #D3E2ED;
   text-wrap: pretty
}

.realisations-32 {
   padding: 22px 0 26px
}

.realisations-33 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   color: #FFBA13;
   margin-bottom: 11px
}

.realisations-34 {
   display: flex;
   flex-direction: column;
   gap: 9px
}

.realisations-35 {
   display: flex;
   gap: 10px;
   font-size: 15px;
   line-height: 1.45;
   color: #fff;
   font-weight: 500;
   text-wrap: pretty
}

.realisations-36 {
   color: #FFBA13;
   flex: none
}

.realisations-37 {
   margin-top: auto;
   padding-top: 20px;
   border-top: 1px solid rgba(141, 169, 196, .22);
   display: flex;
   align-items: flex-end;
   gap: 16px
}

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

.realisations-39 {
   margin-left: auto;
   flex: none;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .08em;
   color: #FFBA13;
   display: flex;
   gap: 6px;
   transition: gap .25s
}

/* realisations-40 */
.realisations-40-hv:hover {
   gap: 12px !important;
   color: #FFBA13 !important
}

/* realisations */
.realisations-41 {
   padding-top: 26px
}

.realisations-42 {
   font-size: 16px;
   font-weight: 600;
   color: #FFBA13;
   display: inline-flex;
   gap: 9px;
   transition: gap .25s
}

/* realisations-43 */
.realisations-43-hv:hover {
   gap: 16px !important;
   color: #FFBA13 !important
}

/* temoignages */
.temoignages-1 {
   background: #F1F6FA;
   border-bottom: 1px solid #D3E2ED
}

.temoignages-2 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 80px 64px
}

.temoignages-3 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 13px;
   margin-bottom: 44px;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% cover 20%
}

.temoignages-4 {
   position: relative;
   display: inline-block;
   flex: none
}

.temoignages-5 {
   display: block;
   font-size: 25px;
   letter-spacing: .06em;
   line-height: 1.05;
   color: #C4D6E4;
   white-space: nowrap
}

.temoignages-6 {
   font-size: 25px;
   letter-spacing: .06em;
   line-height: 1.05;
   color: #FFBA13;
   white-space: nowrap
}

.temoignages-7 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .14em;
   color: #946200;
   text-align: center
}

.temoignages-8 {
   display: flex;
   gap: 5px
}

.temoignages-9 {
   display: flex;
   align-items: flex-end;
   gap: 32px;
   border-bottom: 2px solid #000A1C;
   padding-bottom: 20px;
   margin-bottom: 36px
}

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

.temoignages-11 {
   margin: 0 0 6px auto;
   flex: none;
   font-size: 15.5px;
   font-weight: 600;
   color: #946200;
   display: flex;
   gap: 9px;
   transition: gap .25s
}

/* temoignages-12 */
.temoignages-12-hv:hover {
   gap: 15px !important
}

/* temoignages */
.temoignages-13 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px
}

.temoignages-14 {
   background: #fff;
   border: 1px solid #D3E2ED;
   border-top: 3px solid #000A1C;
   padding: 30px 32px 30px;
   display: flex;
   flex-direction: column;
   transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, border-top-color .4s;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% entry 92%
}

/* temoignages-15 */
.temoignages-15-hv:hover {
   transform: translateY(-6px) !important;
   box-shadow: 0 18px 40px rgba(0, 10, 28, .1) !important;
   border-top-color: #946200 !important
}

/* temoignages */
.temoignages-16 {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   margin-bottom: 22px
}

.temoignages-17 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   color: #946200;
   padding-top: 6px;
   max-width: 20ch;
   line-height: 1.6
}

.temoignages-18 {
   margin-left: auto;
   text-align: right;
   flex: none;
   max-width: 15ch
}

.temoignages-19 {
   display: block;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .1em;
   color: #5C7897;
   margin-bottom: 5px
}

.temoignages-20 {
   display: block;
   font-size: 19px;
   font-weight: 700;
   letter-spacing: -.02em;
   color: #000A1C;
   line-height: 1.15
}

.temoignages-21 {
   margin: 0 0 auto;
   font-size: 18px;
   line-height: 1.42;
   font-weight: 500;
   letter-spacing: -.012em;
   color: #000A1C;
   max-width: 32ch;
   text-wrap: pretty
}

.temoignages-22 {
   color: #946200
}

.temoignages-23 {
   margin-top: 26px;
   padding-top: 18px;
   border-top: 1px solid #D3E2ED;
   display: flex;
   align-items: flex-start;
   gap: 15px
}

.temoignages-24 {
   width: 96px;
   height: 96px;
   flex: none;
   display: block;
   background: #F1F6FA;
   border: 1px solid #D3E2ED
}

.temoignages-25 {
   min-width: 0
}

.temoignages-26 {
   font-size: 14.5px;
   font-weight: 600
}

.temoignages-27 {
   font-size: 12.5px;
   color: #001751;
   margin-top: 4px;
   text-wrap: pretty
}

.temoignages-28 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .1em;
   color: #5C7897;
   margin-top: 8px;
   line-height: 1.5
}

/* methode */
.methode-1 {
   background: #000A1C;
   color: #fff;
   overflow: hidden
}

.methode-2 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 46px 64px 50px
}

.methode-3 {
   display: flex;
   align-items: center;
   gap: 24px;
   margin-bottom: 14px;
   flex-wrap: wrap
}

.methode-4 {
   display: flex;
   gap: 1px;
   margin-left: auto;
   background: rgba(141, 169, 196, .24);
   border: 1px solid rgba(141, 169, 196, .24)
}

.methode-5 {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 1px;
   background: rgba(141, 169, 196, .24);
   border: 1px solid rgba(141, 169, 196, .24)
}

.methode-6 {
   display: flex;
   align-items: flex-start;
   gap: 28px;
   padding: 24px 0 0
}

.methode-7 {
   margin-left: auto;
   flex: none;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .1em;
   color: #FFBA13;
   display: flex;
   gap: 8px;
   transition: gap .25s
}

/* methode-8 */
.methode-8-hv:hover {
   gap: 14px !important;
   color: #FFBA13 !important
}

/* garanties */
.garanties-1 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 96px 64px 88px
}

.garanties-2 {
   display: flex;
   align-items: flex-end;
   gap: 32px;
   border-bottom: 2px solid #000A1C;
   padding-bottom: 20px;
   margin-bottom: 0
}

.garanties-3 {
   margin: 0;
   font-size: 46px;
   line-height: 1.03;
   font-weight: 600;
   letter-spacing: -.03em;
   max-width: 18ch;
   text-wrap: balance;
   animation: agLeft .9s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% cover 20%
}

.garanties-4 {
   margin: 0 0 4px auto;
   font-size: 16.5px;
   line-height: 1.5;
   color: #001751;
   max-width: 40ch;
   text-wrap: pretty;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 4% cover 24%
}

.garanties-5 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: #D3E2ED;
   border-bottom: 1px solid #D3E2ED;
   border-left: 1px solid #D3E2ED;
   border-right: 1px solid #D3E2ED
}

.garanties-6 {
   background: #fff;
   padding: 36px 32px 40px;
   display: flex;
   flex-direction: column;
   transition: background .4s;
   animation: agRise .85s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% cover 16%
}

/* garanties-7 */
.garanties-7-hv:hover {
   background: #F1F6FA !important
}

/* garanties */
.garanties-8 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .12em;
   color: #946200;
   margin-bottom: 20px
}

.garanties-9 {
   font-size: 26px;
   font-weight: 600;
   letter-spacing: -.02em;
   line-height: 1.14;
   margin-bottom: 14px;
   max-width: 17ch;
   text-wrap: balance
}

.garanties-10 {
   font-size: 15px;
   line-height: 1.55;
   color: #001751;
   text-wrap: pretty
}

.garanties-11 {
   background: #fff;
   padding: 36px 32px 40px;
   display: flex;
   flex-direction: column;
   transition: background .4s;
   animation: agRise .85s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 6% cover 22%
}

.garanties-12 {
   background: #fff;
   padding: 36px 32px 40px;
   display: flex;
   flex-direction: column;
   transition: background .4s;
   animation: agRise .85s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 12% cover 28%
}

.garanties-13 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1px;
   background: #D3E2ED;
   border-bottom: 1px solid #D3E2ED;
   border-left: 1px solid #D3E2ED;
   border-right: 1px solid #D3E2ED
}

.garanties-14 {
   background: #000A1C;
   padding: 36px 32px 40px;
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden;
   animation: agRise .85s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% entry 94%
}

.garanties-15 {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .1;
   background-image: repeating-linear-gradient(135deg, #FFBA13 0 1px, transparent 1px 16px);
   animation: agDrift 20s linear infinite
}

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

.garanties-17 {
   position: relative;
   font-size: 26px;
   font-weight: 600;
   letter-spacing: -.02em;
   line-height: 1.14;
   margin-bottom: 14px;
   max-width: 20ch;
   color: #fff;
   text-wrap: balance
}

.garanties-18 {
   position: relative;
   font-size: 15px;
   line-height: 1.55;
   color: #D3E2ED;
   text-wrap: pretty
}

.garanties-19 {
   padding: 18px 0 0;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px;
   letter-spacing: .04em;
   color: #5C7897
}

/* stack */
.stack-1 {
   background: #F1F6FA;
   border-top: 1px solid #D3E2ED;
   border-bottom: 1px solid #D3E2ED
}

.stack-2 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 76px 64px 78px
}

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

.stack-4 {
   display: flex;
   align-items: flex-end;
   gap: 40px;
   border-bottom: 2px solid #000A1C;
   padding-bottom: 18px
}

.stack-5 {
   margin: 0;
   font-size: 34px;
   line-height: 1.06;
   font-weight: 600;
   letter-spacing: -.03em;
   max-width: 30ch;
   text-wrap: balance;
   animation: agLeft .9s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% cover 22%
}

.stack-6 {
   margin: 0 0 3px auto;
   font-size: 15px;
   line-height: 1.5;
   color: #001751;
   max-width: 34ch;
   text-wrap: pretty;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% cover 24%
}

.stack-7 {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   gap: 1px;
   background: #D3E2ED;
   border-left: 1px solid #D3E2ED;
   border-right: 1px solid #D3E2ED;
   border-bottom: 1px solid #D3E2ED
}

.stack-8 {
   background: #fff;
   padding: 24px 16px 22px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 14px;
   transition: background .35s;
   animation: agRise .75s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% entry 88%
}

/* stack-9 */
.stack-9-hv:hover {
   background: #F8FBFD !important
}

/* stack */
.stack-10 {
   width: 28px;
   height: 28px;
   background: #000A1C;
   -webkit-mask: url("../images/icon-next-js.svg") center/contain no-repeat;
   mask: url("../images/icon-next-js.svg") center/contain no-repeat
}

.stack-11 {
   display: flex;
   flex-direction: column;
   gap: 5px
}

.stack-12 {
   font-size: 15.5px;
   font-weight: 600;
   letter-spacing: -.02em;
   line-height: 1.15
}

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

.stack-14 {
   width: 28px;
   height: 28px;
   background: #000A1C;
   -webkit-mask: url("../images/icon-react.svg") center/contain no-repeat;
   mask: url("../images/icon-react.svg") center/contain no-repeat
}

.stack-15 {
   width: 28px;
   height: 28px;
   background: #000A1C;
   -webkit-mask: url("../images/icon-nestjs.svg") center/contain no-repeat;
   mask: url("../images/icon-nestjs.svg") center/contain no-repeat
}

.stack-16 {
   width: 28px;
   height: 28px;
   background: #000A1C;
   -webkit-mask: url("../images/icon-laravel.svg") center/contain no-repeat;
   mask: url("../images/icon-laravel.svg") center/contain no-repeat
}

.stack-17 {
   width: 28px;
   height: 28px;
   background: #000A1C;
   -webkit-mask: url("../images/icon-python.svg") center/contain no-repeat;
   mask: url("../images/icon-python.svg") center/contain no-repeat
}

.stack-18 {
   width: 28px;
   height: 28px;
   background: #000A1C;
   -webkit-mask: url("../images/icon-postgresql.svg") center/contain no-repeat;
   mask: url("../images/icon-postgresql.svg") center/contain no-repeat
}

.stack-19 {
   background: #fff;
   padding: 24px 16px 22px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 14px;
   transition: background .35s;
   box-shadow: inset 3px 0 0 #E8C67A;
   animation: agRise .75s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% entry 88%
}

.stack-20 {
   display: flex;
   align-items: center;
   gap: 4px;
   height: 28px
}

.stack-21 {
   width: 23px;
   height: 23px;
   background: #000A1C;
   -webkit-mask: url("../images/icon-apple.svg") center/contain no-repeat;
   mask: url("../images/icon-apple.svg") center/contain no-repeat
}

.stack-22 {
   margin-top: 2px;
   width: 28px;
   height: 28px;
   background: #000A1C;
   -webkit-mask: url("../images/icon-android.svg") center/contain no-repeat;
   mask: url("../images/icon-android.svg") center/contain no-repeat
}

.stack-23 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .12em;
   color: #946200
}

.stack-24 {
   width: 28px;
   height: 28px;
   background: #000A1C;
   -webkit-mask: url("../images/icon-wordpress.svg") center/contain no-repeat;
   mask: url("../images/icon-wordpress.svg") center/contain no-repeat
}

/* tarif */
.tarif-1 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 88px 64px
}

.tarif-2 {
   display: flex;
   align-items: flex-end;
   gap: 32px;
   margin-bottom: 40px
}

.tarif-3 {
   margin: 0;
   font-size: 44px;
   line-height: 1.04;
   font-weight: 600;
   letter-spacing: -.03em;
   max-width: 22ch;
   text-wrap: balance
}

.tarif-4 {
   margin-left: auto;
   display: flex;
   gap: 8px;
   flex: none
}

.tarif-5 {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 0.9fr;
   border-top: 1px solid rgba(141, 169, 196, .3);
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #8DA9C4
}

.tarif-6 {
   padding: 16px 0
}

.tarif-7 {
   padding: 16px 0;
   color: #FFBA13
}

.tarif-8 {
   padding: 16px 0;
   text-align: right
}

.tarif-9 {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 0.9fr;
   border-top: 1px solid rgba(141, 169, 196, .18);
   align-items: center;
   transition: background .3s, padding-left .3s;
   animation: agRise .7s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% entry 90%
}

/* tarif-10 */
.tarif-10-hv:hover {
   background: rgba(255, 186, 19, .06) !important
}

/* tarif */
.tarif-11 {
   padding: 22px 0
}

.tarif-12 {
   font-size: 20px;
   font-weight: 600;
   letter-spacing: -.015em
}

.tarif-13 {
   font-size: 14px;
   color: #8DA9C4;
   margin-top: 5px
}

.tarif-14 {
   padding: 22px 0;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 16px;
   color: #8DA9C4;
   text-decoration: line-through
}

.tarif-15 {
   padding: 22px 0;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 22px;
   font-weight: 600;
   color: #FFBA13
}

.tarif-16 {
   padding: 22px 0;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 13px;
   color: #D3E2ED;
   text-align: right
}

.tarif-17 {
   border-top: 1px solid rgba(141, 169, 196, .3);
   padding-top: 24px;
   margin-top: 8px
}

.tarif-18 {
   margin: 0;
   font-size: 15.5px;
   line-height: 1.6;
   color: #8DA9C4;
   max-width: 88ch;
   text-wrap: pretty
}

.tarif-19 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 72px;
   align-items: start
}

.tarif-20 {
   display: flex;
   align-items: baseline;
   gap: 12px;
   padding-bottom: 13px;
   border-bottom: 1px solid rgba(141, 169, 196, .3)
}

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

.tarif-22 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 20px;
   color: #8DA9C4;
   text-decoration: line-through;
   margin-left: auto
}

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

.tarif-24 {
   padding: 26px 20px 28px 0
}

.tarif-25 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .14em;
   color: #8DA9C4;
   height: 16px
}

.tarif-26 {
   font-size: 52px;
   line-height: 1;
   font-weight: 700;
   letter-spacing: -.045em;
   color: #FFBA13;
   margin: 14px 0 9px
}

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

.tarif-28 {
   font-size: 14.5px;
   line-height: 1.45;
   color: #D3E2ED;
   margin-top: 14px;
   text-wrap: pretty
}

.tarif-29 {
   padding: 26px 20px 28px;
   border-left: 1px solid rgba(141, 169, 196, .22);
   background: rgba(255, 186, 19, .055)
}

.tarif-30 {
   display: flex;
   align-items: baseline;
   gap: 7px;
   height: 16px
}

.tarif-31 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .14em;
   color: #FFBA13
}

.tarif-32 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   letter-spacing: .08em;
   line-height: 1;
   white-space: nowrap;
   color: #000A1C;
   background: #FFBA13;
   padding: 3px 5px
}

.tarif-33 {
   padding: 26px 0 28px 20px;
   border-left: 1px solid rgba(141, 169, 196, .22)
}

.tarif-34 {
   margin: 20px 0 0;
   font-size: 16.5px;
   line-height: 1.5;
   color: #D3E2ED;
   max-width: 52ch;
   text-wrap: pretty
}

.tarif-35 {
   margin-top: 18px;
   font-size: 14.5px;
   line-height: 1.6;
   color: #8DA9C4;
   max-width: 52ch
}

.tarif-36 {
   color: #FFBA13
}

.tarif-37 {
   border: 1px solid rgba(141, 169, 196, .3)
}

.tarif-38 {
   padding: 22px 28px;
   border-bottom: 1px solid rgba(141, 169, 196, .3);
   display: flex;
   align-items: baseline;
   gap: 12px
}

.tarif-39 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   color: #8DA9C4;
   margin-left: auto
}

.tarif-40 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 76px 80px 88px 84px;
   gap: 10px;
   padding: 11px 28px;
   border-bottom: 1px solid rgba(141, 169, 196, .3);
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .12em;
   color: #8DA9C4
}

.tarif-41 {
   text-align: center
}

.tarif-42 {
   text-align: right
}

.tarif-43 {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 76px 80px 88px 84px;
   gap: 10px;
   align-items: center;
   padding: 12px 28px;
   border-bottom: 1px solid rgba(141, 169, 196, .16);
   transition: background .25s
}

/* tarif-44 */
.tarif-44-hv:hover {
   background: rgba(255, 186, 19, .05) !important
}

/* tarif */
.tarif-45 {
   display: flex;
   gap: 2px;
   justify-content: center
}

.tarif-46 {
   display: flex;
   align-items: center;
   gap: 5px;
   justify-content: center
}

.tarif-47 {
   padding: 16px 28px;
   border-bottom: 1px solid rgba(141, 169, 196, .3);
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap
}

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

.tarif-49 {
   padding: 28px;
   display: flex;
   align-items: flex-end;
   gap: 20px;
   background: rgba(255, 186, 19, .07)
}

.tarif-50 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .12em;
   color: #8DA9C4;
   margin-bottom: 10px
}

.tarif-51 {
   font-size: 15px;
   color: #D3E2ED
}

.tarif-52 {
   margin-left: auto;
   font-size: 48px;
   font-weight: 700;
   letter-spacing: -.035em;
   color: #FFBA13;
   line-height: 1;
   transition: color .3s
}

/* page */
.page-60 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 38px 64px;
   display: flex;
   align-items: center;
   gap: 44px
}

.page-61 {
   flex: none;
   display: flex;
   align-items: baseline;
   gap: 10px
}

.page-62 {
   font-size: 54px;
   line-height: .9;
   font-weight: 700;
   letter-spacing: -.045em;
   color: #000A1C
}

.page-63 {
   font-size: 15.5px;
   font-weight: 600;
   color: #946200;
   line-height: 1.15;
   max-width: 9ch
}

.page-64 {
   margin: 0;
   flex: none;
   font-size: 15px;
   line-height: 1.45;
   color: #001751;
   max-width: 33ch;
   text-wrap: pretty
}

.page-65 {
   flex: 1;
   min-width: 330px
}

.page-66 {
   display: flex;
   align-items: center;
   gap: 20px;
   margin-bottom: 9px
}

.page-67 {
   display: flex;
   align-items: center;
   gap: 7px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .09em;
   color: #000A1C
}

.page-68 {
   width: 9px;
   height: 9px;
   background: #000A1C;
   flex: none
}

.page-69 {
   display: flex;
   align-items: center;
   gap: 7px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .09em;
   color: #5C7897
}

.page-70 {
   width: 9px;
   height: 9px;
   flex: none;
   border: 1px solid #C6D4E0;
   background-image: repeating-linear-gradient(135deg, #AFC2D3 0 3px, transparent 3px 6px)
}

.page-71 {
   display: flex;
   gap: 5px;
   margin-left: auto
}

.page-72 {
   position: relative;
   height: 44px;
   background: #E4EBF1
}

/* offres */
.offres-1 {
   border-bottom: 1px solid #D3E2ED
}

.offres-2 {
   display: flex;
   align-items: baseline;
   gap: 20px;
   border-bottom: 2px solid #000A1C;
   padding-bottom: 18px;
   margin-bottom: 8px
}

.offres-3 {
   margin: 0;
   font-size: 42px;
   line-height: 1.05;
   font-weight: 600;
   letter-spacing: -.028em;
   animation: agLeft .9s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% cover 20%
}

.offres-4 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px;
   color: #5C7897;
   margin-left: auto;
   text-align: right;
   line-height: 1.8
}

.offres-5 {
   padding: 14px 0 0
}

.offres-6 {
   display: grid;
   grid-template-columns: 44px 1fr 1.5fr 224px;
   gap: 28px;
   padding: 24px 0;
   border-bottom: 1px solid #D3E2ED;
   align-items: baseline;
   transition: background .3s;
   animation: agRise .75s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% entry 88%
}

.offres-7 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 13px;
   color: #946200;
   font-weight: 600
}

.offres-8 {
   font-size: 24px;
   font-weight: 600;
   letter-spacing: -.018em;
   text-wrap: balance
}

.offres-9 {
   font-size: 15px;
   line-height: 1.5;
   color: #001751;
   text-wrap: pretty
}

.offres-10 {
   justify-self: end;
   text-align: right;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px;
   letter-spacing: .08em;
   color: #946200;
   border-bottom: 1px solid #E3D0A8;
   padding-bottom: 3px;
   transition: color .25s, border-color .25s
}

/* offres-11 */
.offres-11-hv:hover {
   color: #000A1C !important;
   border-color: #000A1C !important
}

/* community */
.community-1 {
   display: grid;
   grid-template-columns: 1.15fr 1fr;
   gap: 72px;
   align-items: end;
   margin-bottom: 40px
}

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

.community-3 {
   margin: 0;
   font-size: 16.5px;
   line-height: 1.55;
   color: #001751;
   max-width: 56ch;
   text-wrap: pretty
}

.community-4 {
   display: flex;
   flex-direction: column;
   gap: 16px
}

.community-5 {
   border-left: 2px solid #FFBA13;
   padding: 4px 0 4px 18px;
   font-size: 15.5px;
   line-height: 1.5;
   color: #000A1C;
   text-wrap: pretty;
   animation: agRise .8s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% cover 20%
}

.community-6 {
   border-left: 2px solid #D3E2ED;
   padding: 4px 0 4px 18px;
   font-size: 15.5px;
   line-height: 1.5;
   color: #001751;
   text-wrap: pretty;
   animation: agRise .8s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 6% cover 26%
}

.community-7 {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
   gap: 24px;
   align-items: stretch
}

/* community-8 */
.community-8-hv:hover {
   transform: translateY(-5px) !important;
   box-shadow: 0 22px 44px rgba(0, 10, 28, .16) !important
}

/* community */
.community-9 {
   display: flex;
   align-items: baseline;
   gap: 12px;
   margin-bottom: 16px
}

.community-10 {
   display: flex;
   flex-direction: column;
   gap: 7px;
   margin: 20px 0 18px;
   padding: 16px 0;
   border-top: 1px solid rgba(141, 169, 196, .38);
   border-bottom: 1px solid rgba(141, 169, 196, .38)
}

.community-11 {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin-bottom: 22px
}

.community-12 {
   margin-top: auto;
   padding: 16px 17px 17px;
   background: #071634;
   border: 1px solid rgba(255, 186, 19, .42)
}

.community-13 {
   display: flex;
   align-items: baseline;
   gap: 10px
}

.community-14 {
   font-size: 28px;
   font-weight: 700;
   letter-spacing: -.03em;
   line-height: 1;
   color: #FFBA13
}

.community-15 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .12em;
   color: #FFBA13
}

.community-16 {
   display: flex;
   flex-wrap: wrap;
   gap: 6px 14px;
   margin-top: 11px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .08em;
   color: #8DA9C4
}

.community-17 {
   margin-top: 22px;
   background: #FFBA13;
   color: #000A1C;
   padding: 14px 18px;
   font-size: 14.5px;
   font-weight: 600;
   text-align: center;
   display: block;
   white-space: nowrap;
   transition: transform .3s, box-shadow .3s
}

/* community-18 */
.community-18-hv:hover {
   transform: translateY(-2px) !important;
   box-shadow: 0 12px 26px rgba(0, 0, 0, .25) !important;
   color: #000A1C !important
}

/* community */
.community-19 {
   margin: 22px 0 0;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   line-height: 1.7;
   letter-spacing: .05em;
   color: #5C7A99;
   max-width: 96ch
}

/* fianarantsoa */
.fianarantsoa-1 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 96px 64px 0
}

.fianarantsoa-2 {
   animation: agLeft .95s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% cover 22%
}

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

.fianarantsoa-4 {
   margin: 0 0 24px;
   font-size: 52px;
   line-height: 1.03;
   font-weight: 600;
   letter-spacing: -.032em;
   max-width: 17ch;
   text-wrap: balance
}

.fianarantsoa-5 {
   margin: 0 0 22px;
   font-size: 18px;
   line-height: 1.55;
   color: #001751;
   max-width: 50ch;
   text-wrap: pretty
}

.fianarantsoa-6 {
   border-left: 2px solid #FFBA13;
   padding: 4px 0 4px 20px;
   font-size: 17px;
   line-height: 1.5;
   color: #000A1C;
   max-width: 46ch;
   font-weight: 500;
   text-wrap: pretty
}

.fianarantsoa-7 {
   display: grid;
   grid-template-rows: 1.4fr 1fr;
   gap: 12px;
   height: 460px
}

.fianarantsoa-8 {
   position: relative;
   overflow: hidden;
   background: #081226;
   border: 1px solid #D3E2ED;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% cover 18%
}

.fianarantsoa-9 {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 2;
   background: linear-gradient(180deg, rgba(0, 10, 28, .18) 0%, rgba(0, 10, 28, .06) 34%, rgba(0, 10, 28, .86) 100%)
}

.fianarantsoa-10 {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   z-index: 3
}

.fianarantsoa-11 {
   width: 82px;
   height: 82px;
   background: #FFBA13;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: auto;
   cursor: pointer;
   transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s
}

/* fianarantsoa-12 */
.fianarantsoa-12-hv:hover {
   transform: scale(1.09) !important;
   box-shadow: 0 16px 36px rgba(0, 10, 28, .45) !important
}

/* fianarantsoa */
.fianarantsoa-13 {
   width: 0;
   height: 0;
   border-left: 22px solid #000A1C;
   border-top: 14px solid transparent;
   border-bottom: 14px solid transparent;
   margin-left: 5px;
   pointer-events: none
}

.fianarantsoa-14 {
   position: absolute;
   z-index: 2;
   left: 18px;
   bottom: 16px;
   right: 18px;
   display: flex;
   align-items: baseline;
   gap: 14px;
   pointer-events: none
}

.fianarantsoa-15 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .12em;
   color: #FFBA13
}

.fianarantsoa-16 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #D3E2ED;
   margin-left: auto
}

.fianarantsoa-17 {
   position: relative;
   overflow: hidden;
   background: #F1F6FA;
   border: 1px solid #D3E2ED;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 8% cover 26%
}

.fianarantsoa-18 {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 14px 18px;
   display: flex;
   align-items: center;
   gap: 14px;
   background: linear-gradient(180deg, transparent, rgba(0, 10, 28, .88));
   z-index: 4
}

.fianarantsoa-19 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .11em;
   color: #fff
}

.fianarantsoa-20 {
   margin-left: auto;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   /* letter-spacing: .11em;
   color: #FFBA13;
   border: 1px solid rgba(255, 186, 19, .55); */
   padding: 4px 9px;
   cursor: pointer;
   white-space: nowrap;
   transition: background .25s, color .25s
}

/* fianarantsoa-21 */
.fianarantsoa-21-hv:hover {
   background: #FFBA13 !important;
   color: #000A1C !important
}

/* fianarantsoa */
.fianarantsoa-22 {
   display: flex;
   gap: 7px
}

.fianarantsoa-23 {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 16px;
   padding: 64px 0 96px
}

.fianarantsoa-24 {
   animation: agRise .8s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% cover 14%;
   position: relative;
   z-index: 5
}

.fianarantsoa-25 {
   aspect-ratio: 4/5;
   background: #DCE9F3;
   border: 1px solid #D3E2ED;
   overflow: hidden;
   position: relative
}

.fianarantsoa-26 {
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: 3;
   background: #FFBA13;
   color: #000A1C;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   font-weight: 600;
   letter-spacing: .09em;
   line-height: 1;
   white-space: nowrap;
   padding: 6px 9px
}

.fianarantsoa-27 {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 50% 50%;
   display: block;
   transition: transform .7s cubic-bezier(.2, .7, .2, 1)
}

/* fianarantsoa-28 */
.fianarantsoa-28-hv:hover {
   transform: scale(1.05) !important
}

/* fianarantsoa */
.fianarantsoa-29 {
   font-size: 15.5px;
   font-weight: 600;
   margin-top: 14px
}

.fianarantsoa-30 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   color: #5C7897;
   margin-top: 5px
}

.fianarantsoa-31 {
   animation: agRise .8s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 4% cover 18%;
   position: relative;
   z-index: 5
}

.fianarantsoa-32 {
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: 3;
   background: #FFBA13;
   color: #000A1C;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   font-weight: 600;
   letter-spacing: .09em;
   line-height: 1;
   white-space: nowrap;
   padding: 6px 9px;
   cursor: pointer;
   transition: background .25s
}

/* fianarantsoa-33 */
.fianarantsoa-33-hv:hover {
   background: #FFD166 !important
}

/* fianarantsoa */
.fianarantsoa-34 {
   display: flex;
   align-items: baseline;
   gap: 12px;
   padding-bottom: 14px;
   border-bottom: 1px solid rgba(141, 169, 196, .28);
   margin-bottom: 16px
}

.fianarantsoa-35 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .13em;
   color: #FFBA13
}

.fianarantsoa-36 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   letter-spacing: .1em;
   color: #5C7897;
   margin-left: auto;
   white-space: nowrap
}

.fianarantsoa-37 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px 20px
}

.fianarantsoa-38 {
   display: flex;
   gap: 12px;
   align-items: flex-start
}

.fianarantsoa-39 {
   width: 84px;
   height: 105px;
   flex: none;
   position: relative;
   overflow: hidden;
   background: #0A1730;
   border: 1px solid rgba(211, 226, 237, .22)
}

.fianarantsoa-40 {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover
}

.fianarantsoa-41 {
   min-width: 0;
   padding-top: 2px
}

.fianarantsoa-42 {
   font-size: 14px;
   font-weight: 600;
   color: #fff;
   line-height: 1.25;
   letter-spacing: -.01em
}

.fianarantsoa-43 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9px;
   letter-spacing: .08em;
   line-height: 1.6;
   color: #8DA9C4;
   margin-top: 6px
}

.fianarantsoa-44 {
   animation: agRise .8s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 8% cover 22%
}

.fianarantsoa-45 {
   animation: agRise .8s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 12% cover 26%
}

.fianarantsoa-46 {
   animation: agRise .8s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 16% cover 30%
}

/* faq */
.faq-1 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 80px 64px 84px;
   display: grid;
   grid-template-columns: .85fr 1.15fr;
   gap: 72px;
   align-items: start
}

.faq-2 {
   margin: 0 0 20px;
   font-size: 44px;
   line-height: 1.04;
   font-weight: 600;
   letter-spacing: -.03em;
   max-width: 18ch;
   text-wrap: balance
}

.faq-3 {
   margin: 0;
   font-size: 16.5px;
   line-height: 1.55;
   color: #001751;
   max-width: 38ch;
   text-wrap: pretty
}

.faq-4 {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   margin-top: 22px;
   font-size: 15.5px;
   font-weight: 600;
   color: #946200;
   transition: gap .25s
}

/* faq-5 */
.faq-5-hv:hover {
   gap: 15px !important;
   color: #946200 !important
}

/* faq */
.faq-6 {
   border-top: 1px solid #D3E2ED
}

.faq-7 {
   margin: 0;
   padding: 0 46px 24px 44px;
   font-size: 15.5px;
   line-height: 1.6;
   color: #001751;
   max-width: 64ch;
   text-wrap: pretty;
   animation: agFade .35s both
}

/* contact */
.contact-1 {
   background: #FFBA13;
   position: relative;
   overflow: hidden
}

.contact-2 {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .14;
   background-image: repeating-linear-gradient(135deg, #000A1C 0 1px, transparent 1px 18px);
   animation: agDrift 22s linear infinite
}

.contact-3 {
   position: relative;
   max-width: 1440px;
   margin: 0 auto;
   padding: 80px 64px;
   display: flex;
   align-items: center;
   gap: 56px
}

.contact-4 {
   animation: agLeft .95s cubic-bezier(.2, .7, .2, 1) both;
   animation-timeline: view();
   animation-range: entry 0% cover 24%
}

.contact-5 {
   margin: 0 0 16px;
   font-size: 48px;
   line-height: 1.03;
   font-weight: 600;
   letter-spacing: -.032em;
   color: #000A1C;
   max-width: 20ch;
   text-wrap: balance
}

.contact-6 {
   margin: 0;
   font-size: 17.5px;
   line-height: 1.5;
   color: #001751;
   max-width: 52ch;
   text-wrap: pretty
}

.contact-7 {
   margin-left: auto;
   display: flex;
   flex-direction: column;
   gap: 12px;
   flex: none;
   min-width: 296px
}

.contact-8 {
   background: #000A1C;
   color: #fff;
   padding: 18px 30px;
   font-size: 16px;
   font-weight: 600;
   text-align: center;
   transition: transform .3s, box-shadow .3s
}

/* contact-9 */
.contact-9-hv:hover {
   transform: translateY(-2px) !important;
   box-shadow: 0 16px 34px rgba(0, 10, 28, .3) !important;
   color: #fff !important
}

/* contact */
.contact-10 {
   border: 1.5px solid #000A1C;
   color: #000A1C;
   padding: 16.5px 30px;
   font-size: 16px;
   font-weight: 600;
   text-align: center;
   transition: background .3s, color .3s
}

/* contact-11 */
.contact-11-hv:hover {
   background: #000A1C !important;
   color: #FFBA13 !important
}

/* contact */
.contact-12 {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 11px;
   border: 1.5px solid rgba(0, 10, 28, .4);
   color: #001751;
   padding: 14px 30px;
   font-size: 15px;
   font-weight: 600;
   text-align: center;
   transition: background .3s, color .3s
}

.contact-13 {
   flex: none;
   display: block
}

.contact-14 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .08em;
   color: #001751;
   text-align: center
}

/* page */
.page-73 {
   background: #000A1C;
   color: #8DA9C4
}

.page-74 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 64px 64px 40px;
   display: grid;
   grid-template-columns: 1.18fr repeat(5, 1fr);
   gap: 34px
}

.page-75 {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 20px
}

.page-76 {
   width: 44px;
   height: 44px;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   flex: none
}

.page-77 {
   width: 38px;
   height: 38px;
   display: block
}

.page-78 {
   font-size: 15px;
   font-weight: 700;
   color: #fff;
   letter-spacing: -.01em
}

.page-79 {
   display: flex;
   gap: 0;
   margin-bottom: 18px;
   border: 1px solid rgba(141, 169, 196, .32);
   width: fit-content
}

.page-80 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   line-height: 1.9
}

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

.page-82 {
   display: flex;
   flex-direction: column;
   gap: 11px;
   font-size: 14.5px
}

.page-83 {
   color: #D3E2ED;
   transition: color .25s, padding-left .25s
}

/* page-84 */
.page-84-hv:hover {
   color: #FFBA13 !important;
   padding-left: 5px !important
}

/* page */
.page-85 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 24px 64px 40px;
   border-top: 1px solid rgba(141, 169, 196, .22);
   display: flex;
   gap: 24px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px
}

.page-86 {
   color: #FFBA13;
   letter-spacing: .06em
}

.page-87 {
   margin-left: auto
}

.page-88 {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 3px;
   background: #FFBA13
}

.page-89 {
   position: absolute;
   top: 14px;
   right: 20px;
   z-index: 2;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 19px;
   line-height: 1;
   color: #5C7897;
   border: 1px solid rgba(141, 169, 196, .28);
   cursor: pointer;
   transition: color .25s, border-color .25s, background .25s
}

/* page-90 */
.page-90-hv:hover {
   color: #000A1C !important;
   background: #FFBA13 !important;
   border-color: #FFBA13 !important
}

/* page */
.page-91 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 20px 108px 22px 64px;
   display: flex;
   align-items: center;
   gap: 28px
}

.page-92 {
   flex: none;
   width: 236px;
   display: flex;
   flex-direction: column;
   gap: 11px
}

.page-93 {
   display: flex;
   align-items: center;
   gap: 9px
}

.page-94 {
   width: 7px;
   height: 7px;
   background: #FFBA13;
   flex: none;
   animation: agPulse 1.8s ease-in-out infinite
}

.page-95 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   color: #FFBA13;
   white-space: nowrap
}

.page-96 {
   display: flex;
   align-items: center;
   gap: 7px
}

.page-97 {
   width: 34px;
   height: 11px;
   background: #5C7897;
   flex: none
}

.page-98 {
   width: 34px;
   height: 11px;
   background: #FFBA13;
   flex: none;
   animation: agPulse 2.4s ease-in-out infinite
}

.page-99 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .1em;
   color: #8DA9C4;
   margin-left: 4px;
   white-space: nowrap
}

.page-100 {
   flex: 1;
   min-width: 212px;
   border-left: 1px solid rgba(141, 169, 196, .28);
   padding-left: 28px
}

.page-101 {
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -.022em;
   line-height: 1.16;
   color: #fff;
   margin-bottom: 7px;
   text-wrap: balance
}

.page-102 {
   font-size: 13.5px;
   line-height: 1.5;
   color: #8DA9C4;
   text-wrap: pretty;
   max-width: 62ch
}

.page-103 {
   flex: none;
   width: 262px;
   border-left: 1px solid rgba(141, 169, 196, .28);
   padding-left: 28px
}

.page-104 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   color: #8DA9C4;
   margin-bottom: 12px
}

.page-105 {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.page-106 {
   animation: agLeft .4s cubic-bezier(.2, .7, .2, 1) both
}

.page-107 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .14em;
   color: #FFBA13;
   margin-bottom: 10px
}

.page-108 {
   font-size: 14.5px;
   line-height: 1.45;
   color: #fff;
   text-wrap: pretty
}

.page-109 {
   flex: none;
   display: flex;
   flex-direction: column;
   gap: 9px;
   align-items: stretch
}

.page-110 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .1em;
   color: #5C7897;
   white-space: nowrap;
   text-align: center
}

.page-111 {
   background: #FFBA13;
   color: #000A1C;
   padding: 14px 24px;
   font-size: 15px;
   font-weight: 600;
   text-align: center;
   white-space: nowrap;
   transition: transform .25s, background .25s
}

/* page-112 */
.page-112-hv:hover {
   transform: translateY(-2px) !important;
   background: #fff !important;
   color: #000A1C !important
}

/* page */
.page-113 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .12em;
   color: #5C7897;
   cursor: pointer;
   text-align: center;
   padding: 3px;
   transition: color .2s
}

/* page-114 */
.page-114-hv:hover {
   color: #8DA9C4 !important
}

/* page */
.page-115 {
   width: 6px;
   height: 6px;
   background: #FFBA13;
   flex: none;
   animation: agPulse 1.8s ease-in-out infinite
}

.page-116 {
   width: min(1100px, 72vw)
}

.page-117 {
   display: flex;
   align-items: baseline;
   gap: 16px;
   margin-bottom: 14px
}

.page-118 {
   margin-left: auto;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   letter-spacing: .1em;
   color: #8DA9C4;
   cursor: pointer
}

.page-119 {
   aspect-ratio: 16/9;
   background: #050f22;
   border: 1px solid rgba(141, 169, 196, .35);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 16px
}

.hp-vplayer {
   display: block;
   width: 100%;
   height: 100%;
   border: 0;
   background: #000
}

/* Aperçu du film : les deux couches se posent sur l'affiche, sous le voile et
   le bouton de lecture. Celle qui n'est pas à l'écran charge l'image suivante,
   puis prend la main en fondu. Sans image chargée, elles restent transparentes
   et c'est l'affiche qui se voit. */
.hp-vprev {
   position: absolute;
   inset: 0;
   z-index: 1;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0;
   pointer-events: none;
   transition: opacity .7s ease
}

.hp-vprev.is-on {
   opacity: 1
}

/* Message de repli, servi par le navigateur qui ne sait pas lire la balise. */
.page-122 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   letter-spacing: .12em;
   color: #946200
}

.page-123 {
   position: relative;
   width: min(1180px, 92vw);
   height: min(74vh, 760px);
   background: #000A1C;
   border: 1px solid rgba(141, 169, 196, .28)
}

.page-124 {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 6;
   padding: 18px 22px;
   display: flex;
   align-items: center;
   gap: 18px;
   background: linear-gradient(180deg, transparent, rgba(0, 10, 28, .86));
   pointer-events: none
}

.page-125 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   letter-spacing: .12em;
   color: #fff
}

.page-126 {
   margin-left: auto;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .1em;
   color: #FFBA13
}

.page-127 {
   position: absolute;
   top: 26px;
   right: 32px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   letter-spacing: .12em;
   color: #8DA9C4;
   cursor: pointer;
   padding: 8px;
   transition: color .25s
}

/* page-128 */
.page-128-hv:hover {
   color: #fff !important
}

/* page */
.page-129 {
   width: min(1120px, 94vw);
   max-height: 92vh;
   overflow: hidden;
   display: grid;
   grid-template-columns: 312px 1fr;
   grid-template-rows: minmax(0, 1fr);
   background: #fff;
   box-shadow: 0 40px 90px rgba(0, 10, 28, .45);
   animation: agRise .4s cubic-bezier(.2, .7, .2, 1) both
}

.page-130 {
   background: #000A1C;
   color: #8DA9C4;
   padding: 36px 32px;
   display: flex;
   flex-direction: column;
   gap: 26px;
   overflow: auto;
   min-height: 0
}

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

.page-132 {
   margin: 0;
   font-size: 29px;
   line-height: 1.1;
   font-weight: 600;
   letter-spacing: -.03em;
   color: #fff;
   text-wrap: balance
}

.page-133 {
   margin: 0;
   font-size: 14.5px;
   line-height: 1.55;
   text-wrap: pretty
}

.page-134 {
   margin-top: auto;
   display: flex;
   flex-direction: column;
   gap: 14px;
   border-top: 1px solid rgba(141, 169, 196, .24);
   padding-top: 22px
}

.page-135 {
   display: flex;
   gap: 12px;
   align-items: baseline
}

.page-136 {
   flex: none;
   color: #FFBA13;
   font-size: 13px
}

.page-137 {
   font-size: 13.5px;
   line-height: 1.5;
   text-wrap: pretty
}

.page-138 {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   border: 1px solid rgba(141, 169, 196, .45);
   color: #D3E2ED;
   padding: 12px;
   font-size: 13.5px;
   font-weight: 600;
   transition: background .25s, color .25s
}

/* page-139 */
.page-139-hv:hover {
   background: #FFBA13 !important;
   color: #000A1C !important;
   border-color: #FFBA13 !important
}

/* page */
.page-140 {
   overflow: auto;
   min-height: 0;
   position: relative
}

.page-141 {
   position: absolute;
   /* Le panneau de confirmation, animé en fondu, se hissait au-dessus de cette
      croix une fois le brief parti : le clic tombait dessus et la fenêtre ne se
      fermait plus. Un rang explicite met fin à l'ambiguïté. */
   z-index: 4;
   top: 18px;
   right: 22px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px;
   letter-spacing: .12em;
   color: #5C7897;
   cursor: pointer;
   padding: 6px;
   transition: color .25s
}

/* page-142 */
.page-142-hv:hover {
   color: #000A1C !important
}

/* page */
.page-143 {
   padding: 76px 48px;
   display: flex;
   flex-direction: column;
   gap: 18px;
   align-items: flex-start;
   animation: agFade .4s both
}

.page-144 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .14em;
   color: #946200
}

.page-145 {
   margin: 0;
   font-size: 30px;
   font-weight: 600;
   letter-spacing: -.028em;
   line-height: 1.12;
   max-width: 22ch
}

.page-146 {
   margin: 0;
   font-size: 15.5px;
   line-height: 1.6;
   color: #001751;
   max-width: 50ch;
   text-wrap: pretty
}

.page-147 {
   display: flex;
   gap: 12px;
   margin-top: 8px;
   flex-wrap: wrap
}

.page-148 {
   background: #000A1C;
   color: #fff;
   border: none;
   padding: 14px 26px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   transition: transform .25s
}

/* page-149 */
.page-149-hv:hover {
   transform: translateY(-2px) !important
}

/* page */
.page-150 {
   border: 1.5px solid #000A1C;
   background: #fff;
   color: #000A1C;
   padding: 12.5px 24px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   transition: all .3s
}

/* page-151 */
.page-151-hv:hover {
   background: #000A1C !important;
   color: #fff !important
}

/* page */
.page-152 {
   padding: 34px 44px 38px;
   display: flex;
   flex-direction: column;
   gap: 24px
}

.page-153 {
   display: flex;
   flex-direction: column;
   gap: 11px
}

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

.page-155 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 22px
}

.page-156 {
   display: flex;
   gap: 7px;
   flex-wrap: wrap
}

.page-157 {
   border: 1px solid #D3E2ED;
   padding: 14px;
   font-size: 15px;
   line-height: 1.55;
   color: #000A1C;
   background: #fff;
   resize: vertical;
   transition: border-color .25s
}

.page-158 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px
}

.page-159 {
   border: 1px solid #D3E2ED;
   padding: 13px 14px;
   font-size: 15px;
   color: #000A1C;
   background: #fff;
   transition: border-color .25s;
   width: 100%;
   box-sizing: border-box
}

.page-160 {
   background: #FFF4E0;
   border-left: 3px solid #946200;
   padding: 13px 16px;
   font-size: 14px;
   color: #7A5200;
   animation: agFade .3s both
}

.page-161 {
   display: flex;
   align-items: center;
   gap: 20px;
   border-top: 1px solid #D3E2ED;
   padding-top: 22px;
   flex-wrap: wrap
}

.page-162 {
   background: #000A1C;
   color: #fff;
   border: none;
   padding: 16px 30px;
   font-size: 15.5px;
   font-weight: 600;
   cursor: pointer;
   transition: transform .25s, box-shadow .25s
}

/* page-163 */
.page-163-hv:hover {
   transform: translateY(-2px) !important;
   box-shadow: 0 14px 30px rgba(0, 10, 28, .28) !important
}

/* page */
.page-164 {
   font-size: 13px;
   line-height: 1.5;
   color: #5C7897;
   max-width: 34ch;
   text-wrap: pretty
}

/* page-165 */
.page-165-hv:hover {
   transform: scale(1.07) !important;
   box-shadow: 0 18px 42px rgba(18, 140, 126, .5) !important
}

/* page-166 */
.page-166-bf::before {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 2px solid #25D366;
   animation: agWaRing 2.4s cubic-bezier(.2, .7, .2, 1) infinite;
   pointer-events: none
}

/* -- 4. États ---------------------------------------------------------------
   Les styles que le JS injectait auparavant en `style=""`. 
   -------------------------------------------------------------------------- */

/* `hidden` doit l'emporter sur les classes ci-dessous, qui posent un display. */
#app [hidden] {
   display: none !important
}

/* Les deux portes. */
.page-1[data-door="agence"] [data-for="produit"],
.page-1[data-door="produit"] [data-for="agence"] {
   display: none
}

/* en-tête */
.hp-lang {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 35px;
   flex: none;
   cursor: pointer;
   user-select: none;
   border: 1px solid #D3E2ED;
   background: #fff;
   color: #001751;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px;
   letter-spacing: .08em;
   font-weight: 600;
   transition: background .25s, color .25s, border-color .25s
}

.hp-pane {
   flex: 1;
   opacity: 1;
   padding: 52px 56px 56px;
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   cursor: pointer;
   min-width: 0;
   transition: flex .5s cubic-bezier(.4, 0, .2, 1), opacity .35s
}

.hp-pane-a {
   background: #000A1C
}

.hp-pane-b {
   background: #FFBA13
}

.page-1[data-door="agence"] .hp-pane-a {
   flex: 1.3
}

.page-1[data-door="agence"] .hp-pane-b {
   flex: .7;
   opacity: .55
}

.page-1[data-door="produit"] .hp-pane-b {
   flex: 1.3
}

.page-1[data-door="produit"] .hp-pane-a {
   flex: .7;
   opacity: .55
}

.page-24:has(.hp-pane-a:hover) .hp-pane-a {
   flex: 1.3;
   opacity: 1
}

.page-24:has(.hp-pane-a:hover) .hp-pane-b {
   flex: .7;
   opacity: .55
}

.page-24:has(.hp-pane-b:hover) .hp-pane-b {
   flex: 1.3;
   opacity: 1
}

.page-24:has(.hp-pane-b:hover) .hp-pane-a {
   flex: .7;
   opacity: .55
}

.hp-bar {
   height: 2px;
   width: 40px;
   margin: 20px 0 auto;
   transition: width .5s cubic-bezier(.4, 0, .2, 1)
}

.hp-bar-a {
   background: #FFBA13
}

.hp-bar-b {
   background: #000A1C
}

.page-1[data-door="agence"] .hp-bar-a,
.page-1[data-door="produit"] .hp-bar-b {
   width: 148px
}

.page-24:has(.hp-pane-a:hover) .hp-bar-a {
   width: 148px
}

.page-24:has(.hp-pane-a:hover) .hp-bar-b {
   width: 40px
}

.page-24:has(.hp-pane-b:hover) .hp-bar-b {
   width: 148px
}

.page-24:has(.hp-pane-b:hover) .hp-bar-a {
   width: 40px
}

/* bandeau des clients */
.hp-logo {
   display: block;
   flex: none;
   object-fit: contain
}

.hp-word {
   font-size: 19px;
   font-weight: 600;
   letter-spacing: -.02em;
   color: #001751;
   white-space: nowrap
}

/* note moyenne — la largeur du remplissage est calculée */
.hp-stars-fill {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
   transition: width .9s cubic-bezier(.2, .7, .2, 1)
}

.hp-dot {
   display: block;
   width: 7px;
   height: 3px;
   background: #C4D6E4;
   cursor: pointer;
   transition: width .35s, background .35s
}

.hp-dot.is-on {
   width: 14px;
   background: #946200
}

/* méthode */
.hp-track {
   background: transparent;
   border: none;
   padding: 9px 16px;
   cursor: pointer;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   white-space: nowrap;
   color: #8DA9C4;
   transition: background .3s, color .3s
}

.hp-track.is-on {
   background: #FFBA13;
   color: #000A1C
}

.hp-track-note {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .1em;
   color: #FFBA13
}

.hp-step {
   background: #000A1C;
   padding: 20px 20px 22px;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-width: 0;
   transition: background .35s cubic-bezier(.2, .7, .2, 1)
}

.hp-step.is-on {
   background: #FFBA13
}

.hp-step-n {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .12em;
   color: #946200;
   transition: color .35s
}

.hp-step-t {
   font-size: 17.5px;
   font-weight: 600;
   letter-spacing: -.015em;
   line-height: 1.2;
   color: #fff;
   text-wrap: balance;
   transition: color .35s
}

.hp-step.is-on .hp-step-n,
.hp-step.is-on .hp-step-t {
   color: #000A1C
}

.hp-method-bar {
   flex: none;
   width: 52px;
   height: 2px;
   background: #FFBA13;
   margin-top: 11px
}

.hp-method-detail {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #D3E2ED;
   max-width: 72ch;
   text-wrap: pretty
}

/* tarif — onglets, niveaux, compteurs */
.hp-mode {
   padding: 13px 20px;
   font-size: 14.5px;
   cursor: pointer;
   font-weight: 400;
   background: transparent;
   color: #8DA9C4;
   border: 1px solid rgba(141, 169, 196, .35);
   transition: background .25s, color .25s, border-color .25s
}

.hp-mode.is-on {
   font-weight: 600;
   background: #FFBA13;
   color: #000A1C;
   border-color: #FFBA13
}

.hp-prow-name {
   font-size: 14.5px;
   line-height: 1.25;
   color: #fff;
   transition: color .2s
}

.hp-prow-count {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 14.5px;
   width: 20px;
   text-align: center;
   color: #FFBA13;
   font-weight: 600;
   transition: color .25s
}

.hp-prow-day {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 14.5px;
   width: 26px;
   text-align: center;
   color: #fff;
   font-weight: 600;
   transition: color .25s
}

.hp-prow-total {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 13.5px;
   text-align: right;
   font-weight: 600;
   color: #fff;
   transition: color .25s
}

.hp-prow.is-off .hp-prow-name {
   color: #8DA9C4
}

.hp-prow.is-off .hp-prow-count,
.hp-prow.is-off .hp-prow-day {
   color: rgba(141, 169, 196, .5)
}

.hp-prow.is-off .hp-prow-total {
   color: rgba(141, 169, 196, .4)
}

.hp-lvl {
   width: 23px;
   height: 23px;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   font-weight: 600;
   user-select: none;
   cursor: pointer;
   border: 1px solid rgba(141, 169, 196, .28);
   background: transparent;
   color: #8DA9C4;
   transition: background .22s, color .22s, border-color .22s
}

.hp-prow.is-off .hp-lvl:not(.is-on) {
   color: rgba(141, 169, 196, .45)
}

.hp-lvl.is-on {
   border-color: #FFBA13;
   background: #FFBA13;
   color: #000A1C
}

.hp-pm {
   width: 24px;
   height: 24px;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(141, 169, 196, .55);
   color: #fff;
   font-size: 14px;
   line-height: 1;
   user-select: none;
   cursor: pointer;
   transition: border-color .2s, color .2s, background .2s
}

.hp-prow.is-off .hp-pm[data-bump="-1"],
.hp-prow.is-off .hp-pm[data-days="-5"] {
   border-color: rgba(141, 169, 196, .22);
   color: rgba(141, 169, 196, .45);
   cursor: default
}

.hp-dtab {
   padding: 6px 11px;
   font-size: 12px;
   cursor: pointer;
   font-family: 'IBM Plex Mono', monospace;
   background: transparent;
   color: #8DA9C4;
   font-weight: 400;
   border: 1px solid rgba(141, 169, 196, .3);
   transition: background .25s, color .25s, border-color .25s
}

.hp-dtab.is-on {
   background: #FFBA13;
   color: #000A1C;
   font-weight: 600;
   border-color: #FFBA13
}

/* barre horaire — `left`, `width` et l'aiguille sont recalculés par le JS,
   les valeurs ci-dessous sont celles de l'hiver, servies telles quelles */
.hp-season {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .1em;
   padding: 5px 9px;
   cursor: pointer;
   background: transparent;
   color: #5C7897;
   border: 1px solid #C6D4E0;
   transition: background .2s, color .2s
}

.hp-season.is-on {
   background: #000A1C;
   color: #fff;
   border-color: #000A1C
}

.hp-seg-our,
.hp-seg-overlap,
.hp-seg-paris {
   position: absolute;
   top: 0;
   bottom: 0;
   box-sizing: border-box;
   white-space: nowrap;
   overflow: hidden;
   display: flex;
   align-items: center;
   transition: left .45s cubic-bezier(.4, 0, .2, 1), width .45s cubic-bezier(.4, 0, .2, 1)
}

.hp-seg-our {
   left: 7.142857%;
   width: 21.428571%;
   background: #000A1C
}

.hp-seg-overlap {
   left: 28.571429%;
   width: 50%;
   background: #FFBA13;
   padding-left: 16px;
   color: #000A1C;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px;
   letter-spacing: .1em;
   font-weight: 600
}

.hp-seg-paris {
   left: 78.571429%;
   width: 14.285714%;
   background-image: repeating-linear-gradient(135deg, #AFC2D3 0 5px, transparent 5px 10px);
   border: 1px solid #C6D4E0
}

.hp-needle {
   position: absolute;
   top: -5px;
   bottom: -5px;
   width: 2px;
   left: 0;
   background: #946200;
   opacity: 0;
   transition: left 1s linear, opacity .4s
}

/* grille community management */
.hp-plan {
   padding: 34px 30px 16px 30px;
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid #D3E2ED;
   border-top: 3px solid #8DA9C4;
   box-shadow: 0 5px 16px rgba(0, 10, 28, .06);
   transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s
}

.hp-plan.is-featured {
   border-color: #8DA9C4;
   border-top-color: #FFBA13;
   box-shadow: 0 14px 34px rgba(0, 10, 28, .13)
}

.hp-plan.is-dark {
   background: #000A1C;
   border-color: #000A1C;
   border-top-color: #FFBA13;
   box-shadow: 0 14px 34px rgba(0, 10, 28, .2)
}

.hp-plan-name {
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -.018em;
   color: #000A1C
}

.hp-plan-badge {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .12em;
   color: #000A1C;
   background: #FFBA13;
   padding: 4px 8px;
   margin-left: auto;
   flex: none
}

.hp-plan-price {
   font-size: 30px;
   font-weight: 700;
   letter-spacing: -.03em;
   line-height: 1.12;
   color: #000A1C
}

.hp-plan-meta {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px;
   letter-spacing: .06em;
   color: #5C7897
}

.hp-plan-chip {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .08em;
   color: #001751;
   background: #F1F6FA;
   border: 1px solid #D3E2ED;
   padding: 6px 9px;
   white-space: nowrap
}

.hp-plan.is-dark .hp-plan-name {
   color: #fff
}

.hp-plan.is-dark .hp-plan-price {
   color: #FFBA13
}

.hp-plan.is-dark .hp-plan-meta {
   color: #8DA9C4
}

.hp-plan.is-dark .hp-plan-chip {
   color: #D3E2ED;
   background: rgba(255, 255, 255, .06);
   border-color: rgba(211, 226, 237, .28)
}

/* Fianarantsoa — carrousel, mode « remplir », panneau des leads */
.hp-slide {
   cursor: pointer;
   position: absolute;
   inset: 0;
   opacity: 0;
   pointer-events: none;
   transform: scale(1);
   transition: opacity 1.1s ease, transform 5.4s linear
}

.hp-slide.is-on {
   opacity: 1;
   pointer-events: auto;
   transform: scale(1.05)
}

/* Mode planche-contact : les vues quittent la pile du carrousel et se rangent
   côte à côte. Une colonne par vue — en ajouter une demande une règle de plus
   ici et le retrait de `box-shadow` sur la dernière. */
.fianarantsoa-17.is-fill .hp-slide {
   top: 0;
   bottom: 0;
   right: auto;
   width: calc(100% / 5);
   opacity: 1;
   pointer-events: auto;
   transform: none;
   box-shadow: 1px 0 0 rgba(0, 10, 28, .14);
   transition: opacity .4s ease
}

.fianarantsoa-17.is-fill .hp-slide:nth-child(1) {
   left: 0
}

.fianarantsoa-17.is-fill .hp-slide:nth-child(2) {
   left: calc(100% / 5)
}

.fianarantsoa-17.is-fill .hp-slide:nth-child(3) {
   left: calc(100% / 5 * 2)
}

.fianarantsoa-17.is-fill .hp-slide:nth-child(4) {
   left: calc(100% / 5 * 3)
}

.fianarantsoa-17.is-fill .hp-slide:nth-child(5) {
   left: calc(100% / 5 * 4);
   box-shadow: none
}

.hp-zoom {
   position: absolute;
   top: 14px;
   right: 14px;
   z-index: 5;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   letter-spacing: .11em;
   color: #000A1C;
   background: rgba(255, 255, 255, .9);
   padding: 5px 9px;
   pointer-events: none;
   opacity: .9
}

.hp-sdot {
   width: 9px;
   height: 3px;
   background: rgba(255, 255, 255, .5);
   cursor: pointer;
   transition: width .35s, background .35s
}

.hp-sdot.is-on {
   width: 22px;
   background: #FFBA13
}

.fianarantsoa-17.is-fill .hp-sdot {
   width: 9px;
   background: rgba(255, 255, 255, .5)
}

.hp-leads {
   position: absolute;
   top: 0;
   left: 0;
   width: 468px;
   max-width: none;
   z-index: 20;
   display: flex;
   flex-direction: column;
   padding: 18px 20px 20px;
   background: #000A1C;
   border: 1px solid rgba(255, 186, 19, .45);
   box-shadow: 0 24px 64px rgba(0, 10, 28, .5);
   opacity: 0;
   transform: translateY(-8px);
   pointer-events: none;
   transition: opacity .3s cubic-bezier(.2, .7, .2, 1), transform .3s cubic-bezier(.2, .7, .2, 1)
}

[data-leads].is-on {
   z-index: 30
}

/* Invisible tant que le panneau reste une bulle posée sur sa vignette ; il
   n'apparaît qu'en plein écran, où il n'y a plus de « à côté » à toucher. */
.hp-leads-close {
   display: none
}

[data-leads].is-on .hp-leads {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto
}

/* questions fréquentes */
.hp-faq-head {
   display: flex;
   align-items: baseline;
   gap: 16px;
   padding: 22px 4px 22px 0;
   cursor: pointer;
   transition: padding-left .25s
}

.hp-faq-n {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .1em;
   color: #5C7897;
   flex: none;
   width: 28px;
   transition: color .25s
}

.hp-faq-q {
   font-size: 19px;
   font-weight: 600;
   letter-spacing: -.015em;
   line-height: 1.3;
   color: #000A1C;
   text-wrap: balance
}

.hp-faq-sign {
   margin-left: auto;
   flex: none;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 18px;
   line-height: 1;
   color: #8DA9C4;
   transition: color .25s
}

.hp-faq.is-open .hp-faq-n,
.hp-faq.is-open .hp-faq-sign {
   color: #946200
}

/* bandeau de capacité, bouton WhatsApp et cale de bas de page */
.hp-pad {
   height: 0;
   background: #000A1C;
   transition: height .55s cubic-bezier(.2, .7, .2, 1)
}

.hp-scarcity {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 50;
   background: #000A1C;
   border-top: 1px solid rgba(141, 169, 196, .3);
   box-shadow: 0 -22px 60px rgba(0, 10, 28, .34);
   opacity: 0;
   visibility: hidden;
   transform: translateY(102%);
   transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1), visibility .55s
}

.hp-scarcity.is-on {
   opacity: 1;
   visibility: visible;
   transform: translateY(0)
}

.hp-scarcity-tab {
   position: fixed;
   left: 28px;
   bottom: 26px;
   z-index: 48;
   display: flex;
   align-items: center;
   gap: 10px;
   background: #000A1C;
   border: 1px solid rgba(141, 169, 196, .35);
   padding: 13px 18px;
   cursor: pointer;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   color: #8DA9C4;
   box-shadow: 0 14px 34px rgba(0, 10, 28, .3);
   opacity: 0;
   visibility: hidden;
   transform: translateY(14px);
   transition: opacity .4s cubic-bezier(.2, .7, .2, 1), transform .4s cubic-bezier(.2, .7, .2, 1), visibility .4s
}

.hp-scarcity-tab.is-on {
   opacity: 1;
   visibility: visible;
   transform: translateY(0)
}

.hp-intent {
   font-family: Archivo, sans-serif;
   font-size: 13.5px;
   font-weight: 600;
   padding: 11px 14px;
   cursor: pointer;
   white-space: nowrap;
   border: 1px solid rgba(141, 169, 196, .45);
   background: transparent;
   color: #fff;
   transition: background .2s, border-color .2s, color .2s, transform .2s
}

.hp-intent.is-on {
   border-color: #FFBA13;
   background: #FFBA13;
   color: #000A1C
}

.hp-fab {
   position: fixed;
   right: 26px;
   bottom: calc(26px + var(--bar-h, 0px));
   z-index: 49;
   width: 62px;
   height: 62px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #25D366;
   box-shadow: 0 12px 30px rgba(18, 140, 126, .42), 0 2px 6px rgba(0, 10, 28, .2);
   animation: agRise .5s cubic-bezier(.2, .7, .2, 1) both;
   transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, bottom .5s cubic-bezier(.2, .7, .2, 1)
}

/* pied de page — bascule de langue */
.hp-ltab {
   padding: 9px 15px;
   cursor: pointer;
   user-select: none;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px;
   letter-spacing: .08em;
   font-weight: 600;
   background: transparent;
   color: #8DA9C4;
   transition: background .25s, color .25s
}

.hp-ltab.is-on {
   background: #FFBA13;
   color: #000A1C
}

/* vidéo, visionneuse et fenêtre de brief */
.hp-video {
   position: fixed;
   inset: 0;
   z-index: 60;
   background: rgba(0, 10, 28, .94);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 48px;
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
   transition: opacity .35s ease, visibility .35s
}

.hp-video.is-open {
   opacity: 1;
   visibility: visible
}

.hp-lb {
   position: fixed;
   inset: 0;
   z-index: 125;
   background: rgba(0, 10, 28, .9);
   backdrop-filter: blur(6px);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 32px;
   opacity: 0;
   pointer-events: none;
   transition: opacity .3s
}

.hp-lb.is-open {
   opacity: 1;
   pointer-events: auto
}

/* Dans la visionneuse la photo est le sujet : on la montre entière, quitte à
   laisser du fond autour, là où la vignette recadre pour remplir sa case. */
.hp-lbslide x-image-slot>img {
   object-fit: contain
}

.hp-lbslide {
   position: absolute;
   inset: 0;
   opacity: 0;
   pointer-events: none;
   transition: opacity .35s ease
}

.hp-lb.is-open .hp-lbslide.is-on {
   opacity: 1;
   pointer-events: auto
}

.hp-lbarrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 7;
   width: 52px;
   height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 30px;
   line-height: 1;
   color: #000A1C;
   background: rgba(255, 255, 255, .92);
   cursor: pointer;
   user-select: none;
   transition: background .25s, transform .25s
}

.hp-lbarrow.is-prev {
   left: 18px
}

.hp-lbarrow.is-next {
   right: 18px
}

.hp-brief {
   position: fixed;
   inset: 0;
   z-index: 120;
   background: rgba(0, 10, 28, .74);
   backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 32px;
   opacity: 0;
   pointer-events: none;
   transition: opacity .3s
}

.hp-brief.is-open {
   opacity: 1;
   pointer-events: auto
}

.hp-chip {
   border: 1px solid #D3E2ED;
   background: #fff;
   color: #001751;
   padding: 9px 14px;
   font-size: 13.5px;
   font-weight: 500;
   cursor: pointer;
   letter-spacing: -.005em;
   transition: all .25s
}

.hp-chip.is-on {
   border-color: #000A1C;
   background: #000A1C;
   color: #fff;
   font-weight: 600
}

/* Pièces jointes du brief. Le champ reste un `input[type=file]` natif — clavier
   et lecteur d'écran fonctionnent sans rien réécrire ; seul son bouton est
   redessiné pour ne pas jurer avec le reste du formulaire. */
.hp-files-in {
   display: block;
   width: 100%;
   box-sizing: border-box;
   padding: 9px 10px;
   border: 1px solid #D3E2ED;
   background: #fff;
   font-family: Archivo, system-ui, sans-serif;
   font-size: 13.5px;
   color: #001751;
   cursor: pointer
}

.hp-files-in::file-selector-button {
   margin-right: 12px;
   padding: 8px 14px;
   border: none;
   background: #000A1C;
   color: #fff;
   font-family: Archivo, system-ui, sans-serif;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   transition: background .25s
}

.hp-files-in::file-selector-button:hover {
   background: #946200
}

.hp-files-in:focus-visible {
   outline: 2px solid #946200;
   outline-offset: 1px
}

.hp-files-hint {
   margin: 0;
   font-size: 12.5px;
   line-height: 1.45;
   color: #5C7897
}

.hp-files {
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 6px
}

.hp-files-li {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 10px;
   background: #F1F6FA;
   border: 1px solid #D3E2ED
}

.hp-files-name {
   flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 13.5px;
   color: #000A1C
}

.hp-files-size {
   flex: none;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .06em;
   color: #5C7897
}

.hp-files-x {
   flex: none;
   width: 26px;
   height: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   background: transparent;
   border: 1px solid #D3E2ED;
   font-size: 15px;
   line-height: 1;
   color: #5C7897;
   cursor: pointer;
   transition: color .2s, border-color .2s, background .2s
}

.hp-files-x:hover {
   background: #000A1C;
   border-color: #000A1C;
   color: #FFBA13
}


/* Pot de miel du formulaire : sorti du flux et de la lecture. */
.hp-trap {
   position: absolute;
   left: -9999px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden
}

.realisations-wrapper {
   display: flex;
   align-items: center;
   color: #946200;
   gap: 4px;
}

.hp-word-1 {
   font-size: 12px;
   font-weight: 600;
   letter-spacing: -0.02em;
   color: #001751;
   white-space: nowrap;
   font-family: 'IBM Plex Mono'
}


/** Small screen */
.page-1 {
   --head-h: 81px
}

/* hauteur de la barre, bordure comprise */

.hp-nav {
   display: contents
}

.hp-gift {
   position: relative;
   background: #FFBA13;
   color: #000A1C;
   border-bottom: 3px solid #000A1C;
   overflow: hidden
}

.hp-gift-grid {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .13;
   background-image: repeating-linear-gradient(135deg, #000A1C 0 1px, transparent 1px 13px)
}

.hp-gift-row {
   position: relative;
   max-width: 1440px;
   margin: 0 auto;
   padding: 7px 64px;
   display: flex;
   align-items: center;
   gap: 20px
}

@media (max-width:1568px) {
   .hp-gift-row {
      padding-right: 56px
   }
}

.hp-gift-kicker {
   margin: 0;
   display: flex;
   align-items: center;
   gap: 11px;
   flex-wrap: wrap;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px;
   font-weight: 500;
   letter-spacing: .15em
}

.hp-gift-icon {
   flex: none
}

.hp-gift-dot {
   width: 6px;
   height: 6px;
   background: #000A1C;
   flex: none;
   animation: agPulse 2s ease-in-out infinite
}

.hp-gift-when {
   color: #5C4200;
   letter-spacing: .12em
}

.hp-gift-cta {
   margin-left: auto;
   flex: none;
   background: #000A1C;
   color: #fff;
   border: none;
   padding: 9px 18px;
   font-family: Archivo, system-ui, sans-serif;
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
   cursor: pointer;
   transition: transform .25s, background .25s
}

.hp-gift-cta:hover {
   transform: translateY(-1px);
   background: #071634
}

.hp-gift-x {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: 2;
   width: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   background: transparent;
   border: none;
   font-size: 19px;
   line-height: 1;
   color: #5C4200;
   cursor: pointer;
   transition: background .2s, color .2s
}

.hp-gift-x:hover {
   background: #000A1C;
   color: #FFBA13
}


.hp-gift-tab {
   box-sizing: border-box;
   background: #FFBA13;
   color: #000A1C;
   cursor: pointer;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   pointer-events: none
}

.hp-gift-tab.is-on {
   opacity: 1;
   visibility: visible;
   transform: none;
   pointer-events: auto
}

.hp-gift-tab-icon {
   flex: none;
   display: block
}

.hp-gift-tab-dot {
   position: absolute;
   top: 7px;
   right: 7px;
   width: 6px;
   height: 6px;
   background: #000A1C;
   animation: agPulse 2s ease-in-out infinite
}

.hp-gift-tab-price {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .02em;
   line-height: 1
}

.hp-gift-tab-d {
   position: fixed;
   right: 26px;
   bottom: calc(102px + var(--bar-h, 0px));
   z-index: 51;
   width: 62px;
   height: 62px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 3px;
   border: 1px solid #000A1C;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 13px;
   letter-spacing: .02em;
   box-shadow: 0 12px 30px rgba(0, 10, 28, .22);
   transition: bottom .55s cubic-bezier(.2, .7, .2, 1), opacity .4s, visibility .4s,
      transform .25s, box-shadow .25s
}

.hp-gift-tab-d.is-on:hover {
   transform: translateY(-2px);
   box-shadow: 0 18px 40px rgba(0, 10, 28, .3)
}

.hp-gift-tab-m {
   display: none;
   width: 52px;
   height: 52px;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
   padding: 0;
   background: transparent;
   color: #FFBA13;
   border: 1px solid rgba(141, 169, 196, .35);
   transition: opacity .3s, visibility .3s, transform .3s
}

.hp-gift-tab-m.is-on {
   display: flex
}


/* Barre fixe du bas, sur téléphone. */
.hp-fabm-wa {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 52px;
   height: 52px;
   flex: 0 0 auto;
   border: 1px solid rgba(141, 169, 196, .35)
}

.hp-fabm-svg {
   display: block
}

.hp-fabm-cta {
   flex: 1 1 0%;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 52px;
   background: #FFBA13;
   color: #000A1C;
   font-size: 15.5px;
   font-weight: 600
}

/* Gift window */
@keyframes agGiftBoxIn {
   0% {
      opacity: 0;
      transform: translateY(-110px) scale(.45) rotate(-16deg)
   }

   55% {
      opacity: 1
   }

   100% {
      opacity: 1;
      transform: none
   }
}

@keyframes agGiftShake {

   0%,
   100% {
      transform: rotate(0) scale(1)
   }

   25% {
      transform: rotate(-6deg) scale(1.04)
   }

   75% {
      transform: rotate(6deg) scale(1.04)
   }
}

@keyframes agGiftSquash {
   0% {
      transform: none;
      opacity: 1
   }

   28% {
      transform: scaleY(.8) scaleX(1.14)
   }

   100% {
      transform: scale(1.06);
      opacity: 0
   }
}

@keyframes agGiftLid {
   0% {
      transform: none;
      opacity: 1
   }

   45% {
      transform: translateY(-200px) rotate(-26deg);
      opacity: 1
   }

   100% {
      transform: translateY(-340px) rotate(-56deg);
      opacity: 0
   }
}

@keyframes agGiftBoom {
   0% {
      transform: translate(-50%, -50%) scale(.15);
      opacity: .95
   }

   100% {
      transform: translate(-50%, -50%) scale(3.6);
      opacity: 0
   }
}

@keyframes agGiftFlash {
   0% {
      opacity: .8
   }

   100% {
      opacity: 0
   }
}

@keyframes agGiftConf {
   0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(.3)
   }

   9% {
      opacity: 1
   }

   100% {
      opacity: 0;
      transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot))
   }
}

@keyframes agGiftCardPop {
   0% {
      opacity: 0;
      transform: scale(.7) translateY(34px)
   }

   100% {
      opacity: 1;
      transform: none
   }
}

.hp-cadeau {
   position: fixed;
   inset: 0;
   z-index: 130;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   overflow: auto;
   padding: 28px;
   background: rgba(0, 10, 28, .88);
   opacity: 0;
   pointer-events: none;
   transition: opacity .35s ease
}

.hp-cadeau.is-open {
   opacity: 1;
   pointer-events: auto
}

.hp-cadeau-in {
   position: relative;
   width: 640px;
   max-width: 100%;
   margin: auto;
   display: flex;
   flex-direction: column;
   align-items: center
}

/* La gerbe part du centre de la boîte, au-dessus de tout le reste. */
.hp-cadeau-burst {
   position: absolute;
   left: 50%;
   top: 44%;
   width: 0;
   height: 0;
   z-index: 6;
   pointer-events: none
}

.hp-cadeau-conf {
   position: absolute;
   left: 0;
   top: 0;
   animation-name: agGiftConf;
   animation-timing-function: cubic-bezier(.14, .7, .3, 1);
   animation-fill-mode: both
}

.hp-cadeau-box {
   position: relative;
   width: 204px;
   height: 204px;
   z-index: 5;
   display: none
}

.hp-cadeau[data-phase="1"] .hp-cadeau-box,
.hp-cadeau[data-phase="2"] .hp-cadeau-box {
   display: block
}

.hp-cadeau[data-phase="1"] .hp-cadeau-box {
   animation: agGiftBoxIn .6s cubic-bezier(.2, 1.5, .35, 1) both,
      agGiftShake .3s ease-in-out .62s 2 both
}

.hp-cadeau[data-phase="2"] .hp-cadeau-box {
   animation: agGiftSquash .55s cubic-bezier(.2, .8, .3, 1) both
}

.hp-cadeau-lid {
   position: absolute;
   left: 0;
   top: 22px;
   width: 204px;
   height: 42px;
   background: #FFBA13;
   border: 3px solid #000A1C;
   box-sizing: border-box
}

.hp-cadeau[data-phase="2"] .hp-cadeau-lid {
   animation: agGiftLid .8s cubic-bezier(.2, .8, .35, 1) both
}

.hp-cadeau-knot {
   position: absolute;
   left: 50%;
   top: -34px;
   transform: translateX(-50%);
   width: 52px;
   height: 52px;
   border: 10px solid #FFBA13;
   border-radius: 50%;
   box-shadow: 0 0 0 3px #000A1C, inset 0 0 0 3px #000A1C
}

.hp-cadeau-cube {
   position: absolute;
   left: 14px;
   bottom: 0;
   width: 176px;
   height: 142px;
   background: #FFBA13;
   border: 3px solid #000A1C;
   box-sizing: border-box;
   overflow: hidden
}

.hp-cadeau-rv {
   position: absolute;
   left: 50%;
   top: 0;
   bottom: 0;
   width: 28px;
   transform: translateX(-50%);
   background: #000A1C
}

.hp-cadeau-rh {
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   height: 26px;
   transform: translateY(-50%);
   background: #000A1C
}

.hp-cadeau-card {
   position: relative;
   width: 100%;
   z-index: 7;
   flex: none;
   display: none;
   background: #FFBA13;
   border: 3px solid #000A1C;
   overflow: hidden;
   box-shadow: 0 46px 100px rgba(0, 0, 0, .5)
}

.hp-cadeau[data-phase="3"] .hp-cadeau-card {
   display: block;
   animation: agGiftCardPop .6s cubic-bezier(.18, 1.35, .3, 1) both
}

.hp-cadeau-grid {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .12;
   background-image: repeating-linear-gradient(135deg, #000A1C 0 1px, transparent 1px 13px)
}

.hp-cadeau-x {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 3;
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   background: transparent;
   border: none;
   font-size: 22px;
   line-height: 1;
   color: #5C4200;
   cursor: pointer;
   transition: background .2s, color .2s
}

.hp-cadeau-x:hover {
   background: #000A1C;
   color: #FFBA13
}

.hp-cadeau-say {
   position: relative;
   padding: 32px 42px 30px;
   display: flex;
   flex-direction: column;
   gap: 14px;
   color: #000A1C
}

.hp-cadeau-kicker {
   margin: 0;
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .17em
}

.hp-cadeau-icon {
   flex: none
}

.hp-cadeau-when {
   color: #5C4200;
   letter-spacing: .13em
}

.hp-cadeau-title {
   margin: 0;
   font-size: 30px;
   font-weight: 700;
   letter-spacing: -.04em;
   line-height: 1.09;
   text-wrap: balance
}

.hp-cadeau-body {
   margin: 0;
   font-size: 15px;
   line-height: 1.52;
   max-width: 58ch;
   text-wrap: pretty
}

.hp-cadeau-price {
   display: flex;
   align-items: center;
   gap: 22px;
   background: #000A1C;
   padding: 14px 20px
}

.hp-cadeau-plab {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .13em;
   color: #8DA9C4
}

.hp-cadeau-prow {
   display: flex;
   align-items: baseline;
   gap: 12px;
   margin-left: auto
}

.hp-cadeau-was {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 19px;
   text-decoration: line-through;
   color: #8DA9C4
}

.hp-cadeau-now {
   font-size: 29px;
   font-weight: 700;
   letter-spacing: -.04em;
   line-height: 1;
   color: #FFBA13
}

.hp-cadeau-acts {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
   margin-top: 2px
}

.hp-cadeau-cta {
   background: #000A1C;
   color: #fff;
   padding: 15px 26px;
   font-size: 15px;
   font-weight: 600;
   white-space: nowrap;
   transition: transform .25s
}

.hp-cadeau-cta:hover {
   transform: translateY(-2px);
   color: #fff
}

.hp-cadeau-later {
   padding: 0;
   background: transparent;
   border: none;
   border-bottom: 1px solid rgba(92, 66, 0, .45);
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .11em;
   color: #5C4200;
   cursor: pointer;
   transition: color .2s
}

.hp-cadeau-later:hover {
   color: #000A1C
}

.hp-cadeau-note {
   margin: 0;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .11em;
   color: #5C4200
}


/* Onglets et appels à l'action du héros : le grand écran garde ses deux portes
   côte à côte, chacune avec son propre bouton. */
.hp-doors,
.hp-hero-cta {
   display: none
}

/* Repli des lignes du simulateur : sur grand écran la ligne tient sur ses cinq
   colonnes, résumé et chevron n'ont rien à dire. Le mot du niveau non plus, la
   colonne est trop étroite — c'est la lettre qui sert. */
.hp-prow-sum,
.hp-prow-caret,
.hp-prow-lab,
.hp-lvl-l {
   display: none
}

.hp-burger {
   display: none;
   flex: none;
   width: 42px;
   height: 42px;
   padding: 0;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 5px;
   background: transparent;
   border: 1px solid #D3E2ED;
   cursor: pointer;
   transition: border-color .25s
}

.hp-burger-b {
   display: block;
   width: 17px;
   height: 1.5px;
   background: #000A1C;
   transition: transform .3s cubic-bezier(.2, .7, .2, 1)
}

.page-2.is-menu-open .hp-burger {
   border-color: #946200
}

.page-2.is-menu-open .hp-burger-b:first-child {
   transform: translateY(3.25px) rotate(45deg)
}

.page-2.is-menu-open .hp-burger-b:last-child {
   transform: translateY(-3.25px) rotate(-45deg)
}


/* -- 5.1 jusqu'à 1180 px : on libère la largeur ---------------------------- */
@media (max-width:1180px) {

   .page-3,
   .page-17,
   .page-38,
   .realisations-2,
   .temoignages-2,
   .methode-2,
   .garanties-1,
   .stack-2,
   .tarif-1,
   .page-60,
   .fianarantsoa-1,
   .faq-1,
   .contact-3,
   .page-74,
   .page-85 {
      padding-left: 40px;
      padding-right: 40px
   }

   .page-91 {
      padding: 20px 96px 22px 40px
   }

   .page-24 {
      margin: 0 -40px;
      min-height: 520px
   }

   .hp-pane {
      padding: 44px 40px 48px
   }

   .page-28,
   .page-34 {
      font-size: 46px
   }

   .page-42,
   .garanties-3 {
      font-size: 38px
   }

   .stack-7 {
      grid-template-columns: repeat(4, 1fr)
   }

   .methode-5 {
      grid-template-columns: repeat(3, 1fr)
   }

   .fianarantsoa-23 {
      grid-template-columns: repeat(3, 1fr)
   }

   .page-74 {
      grid-template-columns: repeat(3, 1fr);
      gap: 30px
   }

   .page-74> :first-child {
      grid-column: 1 / -1
   }

   .tarif-19,
   .faq-1,
   .community-1 {
      gap: 44px
   }

   /* La légende du fuseau et les saisons ne tiennent plus sur une ligne
     (les libellés anglais sont plus longs) : elles passent à la ligne. */
   .page-60 {
      flex-wrap: wrap;
      gap: 24px 36px
   }

   .page-66 {
      flex-wrap: wrap;
      gap: 10px 16px
   }

   .hp-leads {
      width: min(468px, 84vw)
   }

   /* Le tableau comparatif garde ses cinq colonnes et défile dans son cadre. */
   .tarif-37 {
      overflow-x: auto
   }

   .tarif-38,
   .tarif-40,
   .tarif-43,
   .tarif-47,
   .tarif-49 {
      min-width: 620px
   }
}


/* -- 5.2 jusqu'à 1100 px : le menu passe derrière un bouton -----------------
   Sept liens, la bascule de langue et l'appel à l'action demandent 1090 px de
   barre. En deçà, `.page-8` tronquait ses derniers liens : on les replie.
   -------------------------------------------------------------------------- */
@media (max-width:1100px) {

   /* `backdrop-filter` fait de l'en-tête le bloc conteneur de ses descendants
     fixes : le panneau y serait enfermé dans la hauteur de la barre. Fond
     opaque à la place — à cette largeur il n'y a rien à laisser transparaître. */
   .page-2 {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none
   }

   .page-2.is-menu-open {
      z-index: 110
   }

   .hp-burger {
      display: flex;
      margin-left: auto
   }

   .hp-nav {
      position: fixed;
      top: var(--head-h);
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      padding: 6px 40px 30px;
      background: #fff;
      overflow-y: auto;
      overscroll-behavior: contain;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity .3s cubic-bezier(.2, .7, .2, 1), transform .3s cubic-bezier(.2, .7, .2, 1), visibility .3s
   }

   .page-2.is-menu-open .hp-nav {
      opacity: 1;
      visibility: visible;
      transform: none
   }

   .page-8 {
      flex: none;
      flex-direction: column;
      gap: 0;
      margin: 0;
      overflow: visible;
      font-size: 16.5px
   }

   .page-9,
   .page-11 {
      display: flex;
      align-items: center;
      min-height: 53px;
      padding: 0;
      border-bottom: 1px solid #EAF1F7;
      border-color: #EAF1F7;
      white-space: normal;
      font-weight: 500
   }

   .page-12 {
      flex-direction: column-reverse;
      align-items: stretch;
      gap: 10px;
      margin-top: auto;
      padding-top: 24px
   }

   .hp-lang {
      width: 100%;
      height: 46px
   }

   .page-13 {
      padding: 16px;
      font-size: 15px;
      text-align: center
   }

   /* Sur une tablette, les deux boutons pleine largeur seraient démesurés. */
   .page-12 {
      max-width: 440px
   }
}


/* -- 5.3 jusqu'à 900 px : colonne unique ------------------------------------ */
@media (max-width:900px) {

   #app section[id] {
      scroll-margin-top: 74px
   }

   /* en-tête */
   .page-1 {
      --head-h: 58px
   }

   .page-3 {
      height: 57px;
      padding: 0 20px;
      gap: 12px
   }

   .hp-nav {
      padding: 6px 20px 26px
   }

   .page-12 {
      max-width: none
   }

   .page-5 {
      width: 34px;
      height: 34px
   }

   .page-7 {
      font-size: 13.5px
   }

   /* accroche et portes */
   .page-17 {
      padding-left: 20px;
      padding-right: 20px
   }

   .page-18 {
      padding: 20px 0 16px;
      flex-wrap: wrap;
      gap: 6px 14px
   }

   .page-19 {
      font-size: 10px;
      line-height: 1.6
   }

   .page-20,
   .page-22 {
      margin-left: 0
   }

   .page-24 {
      flex-direction: column;
      min-height: 0;
      margin: 0 -20px
   }

   /* Le bandeau garde sa ligne unique ; seul le décompte passe dessous si la
     place manque. */
   .hp-gift-row {
      padding: 7px 20px;
      gap: 12px
   }

   /* Deux lignes serrées plutôt qu'une seule à rallonge : le libellé et le
     décompte ne tiennent pas côte à côte sous le bouton. */
   .hp-gift-kicker {
      gap: 3px 8px;
      font-size: 9.5px;
      line-height: 1.35;
      letter-spacing: .1em
   }

   .hp-gift-icon {
      display: none
   }

   .hp-gift-cta {
      padding: 9px 14px;
      font-size: 12.5px
   }

   .hp-gift-x {
      width: 38px;
      font-size: 17px
   }

   .hp-gift-row {
      padding-right: 44px
   }

   .hp-cadeau {
      padding: 16px
   }

   .hp-cadeau-box {
      width: 150px;
      height: 150px
   }

   .hp-cadeau-lid {
      top: 16px;
      width: 150px;
      height: 32px
   }

   .hp-cadeau-knot {
      top: -26px;
      width: 40px;
      height: 40px;
      border-width: 8px
   }

   .hp-cadeau-cube {
      left: 10px;
      width: 130px;
      height: 104px
   }

   .hp-cadeau-say {
      padding: 24px 20px 22px;
      gap: 12px
   }

   .hp-cadeau-title {
      font-size: 23px
   }

   .hp-cadeau-price {
      gap: 12px;
      padding: 12px 14px
   }

   .hp-cadeau-now {
      font-size: 25px
   }

   .hp-cadeau-cta {
      flex: 1;
      text-align: center;
      padding: 15px 18px
   }

   /* Sélecteur de porte. Les boutons portent `data-pick`, déjà câblé au même
     basculement que les panneaux : le JS n'a rien à apprendre. */
   .hp-doors {
      display: block;
      padding: 16px 20px 14px;
      background: #fff;
      border-bottom: 1px solid #D3E2ED
   }

   .hp-doors-l {
      display: block;
      margin-bottom: 10px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .14em;
      color: #5C7897
   }

   .hp-doors-b {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: #C6D4E0;
      border: 1px solid #C6D4E0
   }

   .hp-door {
      min-height: 46px;
      padding: 11px 10px;
      font-family: Archivo, system-ui, sans-serif;
      font-size: 14.5px;
      font-weight: 500;
      line-height: 1.2;
      color: #001751;
      background: #fff;
      border: none;
      cursor: pointer;
      transition: background .25s, color .25s, font-weight .25s
   }

   .page-1[data-door="agence"] .hp-door[data-pick="agence"],
   .page-1[data-door="produit"] .hp-door[data-pick="produit"] {
      font-weight: 600;
      color: #fff;
      background: #000A1C
   }

   /* Un onglet à la fois : la porte non retenue sort du flux, sans quoi les
     deux panneaux s'empileraient l'un sous l'autre. */
   .page-1[data-door="agence"] .hp-pane-b,
   .page-1[data-door="produit"] .hp-pane-a {
      display: none
   }

   /* Les deux portes partagent les mêmes appels à l'action, posés sous le
     panneau ; ceux de chaque porte n'ont plus lieu d'être. */
   .page-30,
   .page-36 {
      display: none
   }

   .hp-hero-cta {
      display: flex;
      flex-direction: column;
      align-self: stretch;
      gap: 10px;
      margin-top: 26px
   }

   .hp-hero-cta .contact-8,
   .hp-hero-cta .contact-10 {
      padding: 16px 24px;
      font-size: 15.5px
   }

   /* Les deux boutons prennent les couleurs de leur porte : sur le panneau
     sombre, le bouton plein d'origine — sombre lui aussi — disparaîtrait, et
     le bouton cerné de noir avec. C'est la logique déjà suivie par les boutons
     « Entrer côté… » qu'ils remplacent. */
   .hp-pane-a .hp-hero-cta .contact-8 {
      background: #FFBA13;
      color: #000A1C
   }

   .hp-pane-a .hp-hero-cta .contact-10 {
      background: transparent;
      border-color: rgba(211, 226, 237, .55);
      color: #fff
   }

   .hp-pane-b .hp-hero-cta .contact-8 {
      background: #000A1C;
      color: #fff
   }

   .hp-pane-b .hp-hero-cta .contact-10 {
      background: transparent;
      border-color: #000A1C;
      color: #000A1C
   }

   .hp-pane {
      padding: 32px 20px 32px;
      cursor: default
   }

   .page-1[data-door] .hp-pane-a,
   .page-1[data-door] .hp-pane-b,
   .page-24:has(.hp-pane-a:hover) .hp-pane,
   .page-24:has(.hp-pane-b:hover) .hp-pane {
      flex: none;
      opacity: 1
   }

   .hp-bar {
      margin: 16px 0 22px
   }

   .page-28,
   .page-34 {
      font-size: 34px;
      margin-bottom: 18px
   }

   .page-29,
   .page-35 {
      font-size: 16px;
      margin-bottom: 0
   }

   .page-30,
   .page-36 {
      align-self: stretch;
      justify-content: center;
      padding: 16px 20px;
      font-size: 15px
   }

   /* gouttières communes */
   .page-38,
   .realisations-2,
   .temoignages-2,
   .methode-2,
   .garanties-1,
   .stack-2,
   .tarif-1,
   .page-60,
   .fianarantsoa-1,
   .faq-1,
   .contact-3,
   .page-74,
   .page-85 {
      padding-left: 20px;
      padding-right: 20px
   }

   .page-38 {
      padding-top: 52px;
      padding-bottom: 48px
   }

   .realisations-2 {
      padding-top: 48px;
      padding-bottom: 56px
   }

   .temoignages-2 {
      padding-top: 52px;
      padding-bottom: 52px
   }

   .garanties-1 {
      padding-top: 56px;
      padding-bottom: 52px
   }

   .stack-2 {
      padding-top: 48px;
      padding-bottom: 50px
   }

   .tarif-1 {
      padding-top: 52px;
      padding-bottom: 52px
   }

   .fianarantsoa-1 {
      padding-top: 56px
   }

   .faq-1 {
      padding-top: 52px;
      padding-bottom: 54px
   }

   .contact-3 {
      padding-top: 52px;
      padding-bottom: 52px
   }

   /* Les titres cessent de se brider en `ch` : la largeur suffit à les cadrer. */
   .page-28,
   .page-34,
   .page-42,
   .page-43,
   .realisations-17,
   .realisations-18,
   .temoignages-10,
   .garanties-3,
   .garanties-4,
   .garanties-9,
   .garanties-17,
   .stack-5,
   .stack-6,
   .tarif-3,
   .community-2,
   .community-3,
   .offres-3,
   .fianarantsoa-4,
   .fianarantsoa-5,
   .fianarantsoa-6,
   .faq-2,
   .faq-3,
   .contact-5,
   .contact-6,
   .page-101,
   .page-145,
   .page-164 {
      max-width: none
   }

   /* En-têtes de section : le chapô passe sous le titre. */
   .page-39,
   .realisations-14,
   .temoignages-9,
   .garanties-2,
   .stack-4,
   .tarif-2,
   .offres-2,
   .tarif-20 {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px
   }

   .page-43,
   .realisations-18,
   .temoignages-11,
   .garanties-4,
   .stack-6,
   .tarif-4,
   .offres-4,
   .tarif-22,
   .realisations-5,
   .methode-4,
   .methode-7 {
      margin-left: 0;
      margin-right: 0
   }

   .page-43 {
      margin-bottom: 0
   }

   .offres-4 {
      text-align: left
   }

   .page-42,
   .realisations-17,
   .temoignages-10,
   .garanties-3,
   .tarif-3,
   .community-2,
   .offres-3,
   .faq-2,
   .contact-5,
   .fianarantsoa-4 {
      font-size: 29px
   }

   .stack-5 {
      font-size: 25px
   }

   /* preuves, offres, réalisations */
   .page-44 {
      grid-template-columns: 1fr 1fr;
      gap: 18px 16px;
      padding-bottom: 32px
   }

   .page-51 {
      grid-template-columns: 1fr;
      gap: 16px
   }

   .page-52 {
      padding: 24px 20px 22px
   }

   .realisations-3 {
      flex-wrap: wrap;
      gap: 8px 16px
   }

   .realisations-9 {
      padding: 16px 24px;
      gap: 14px
   }

   .realisations-19 {
      grid-template-columns: 1fr
   }

   .realisations-20 {
      padding: 28px 20px 26px
   }

   .realisations-27 {
      font-size: 23px
   }

   .offres-6 {
      grid-template-columns: 34px 1fr;
      gap: 8px 12px;
      padding: 20px 0
   }

   .offres-9,
   .offres-10 {
      grid-column: 2
   }

   .offres-10 {
      justify-self: start;
      text-align: left
   }

   .offres-8 {
      font-size: 20px
   }

   /* témoignages */
   .temoignages-13 {
      grid-template-columns: 1fr;
      gap: 16px
   }

   .temoignages-14 {
      padding: 24px 20px
   }

   .temoignages-21 {
      font-size: 17px;
      max-width: none
   }

   .temoignages-24 {
      width: 76px;
      height: 76px
   }

   /* méthode */
   .methode-2 {
      padding-top: 38px;
      padding-bottom: 42px
   }

   .methode-3 {
      gap: 12px;
      margin-bottom: 12px
   }

   .methode-4 {
      overflow-x: auto;
      max-width: 100%
   }

   .methode-5 {
      grid-template-columns: 1fr
   }

   .methode-6 {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
      padding-top: 20px
   }

   .hp-step {
      padding: 16px 18px 18px
   }

   .hp-method-detail {
      font-size: 15px
   }

   /* garanties et socle */
   .garanties-5,
   .garanties-13 {
      grid-template-columns: 1fr
   }

   .garanties-6,
   .garanties-11,
   .garanties-12,
   .garanties-14 {
      padding: 28px 20px 30px
   }

   .garanties-9,
   .garanties-17 {
      font-size: 22px
   }

   .stack-7 {
      grid-template-columns: repeat(2, 1fr)
   }

   .stack-8,
   .stack-19 {
      padding: 20px 14px 18px
   }

   /* tarifs : le tableau devient une fiche par ligne, en gardant ses colonnes */
   .tarif-5,
   .tarif-9 {
      grid-template-columns: repeat(3, 1fr);
      gap: 6px 12px
   }

   .tarif-5 {
      padding-top: 10px
   }

   .tarif-5> :first-child {
      grid-column: 1 / -1;
      padding-bottom: 2px
   }

   .tarif-6,
   .tarif-7,
   .tarif-8 {
      padding: 0 0 6px
   }

   .tarif-9 {
      padding: 16px 0
   }

   .tarif-11 {
      grid-column: 1 / -1;
      padding: 0 0 10px
   }

   .tarif-14,
   .tarif-15,
   .tarif-16 {
      padding: 0
   }

   .tarif-12 {
      font-size: 18px
   }

   .tarif-14 {
      font-size: 13px
   }

   .tarif-15 {
      font-size: 19px
   }

   .tarif-16 {
      font-size: 11px
   }

   .tarif-19 {
      grid-template-columns: 1fr;
      gap: 34px
   }

   .tarif-23 {
      grid-template-columns: 1fr
   }

   .tarif-24 {
      padding: 22px 0 20px
   }

   .tarif-29 {
      padding: 22px 20px 20px;
      border-left: none;
      border-top: 1px solid rgba(141, 169, 196, .22)
   }

   .tarif-33 {
      padding: 22px 0 24px;
      border-left: none;
      border-top: 1px solid rgba(141, 169, 196, .22)
   }

   .tarif-26 {
      font-size: 42px
   }

   /* Le simulateur ne défile plus latéralement : chaque profil se replie. Fermé,
     il tient sur une ligne — intitulé, résumé, sous-total, chevron. Ouvert, il
     déplie ses réglages en dessous. Les cinq cellules d'origine sont toutes là,
     réparties sur trois lignes de grille. */
   .tarif-37 {
      overflow-x: visible
   }

   .tarif-38,
   .tarif-40,
   .tarif-43,
   .tarif-47,
   .tarif-49 {
      min-width: 0
   }

   .tarif-38,
   .tarif-40,
   .tarif-43,
   .tarif-47 {
      padding-left: 20px;
      padding-right: 20px
   }

   .tarif-38 {
      flex-wrap: wrap;
      gap: 4px 14px
   }

   .tarif-39 {
      margin-left: 0
   }

   /* L'en-tête de colonnes n'a plus de colonnes à nommer : « NB » et « JOURS »
     reviennent en étiquette dans la ligne dépliée, le reste se lit tout seul. */
   .tarif-40 {
      display: none
   }

   .hp-prow-sum,
   .hp-prow-caret,
   .hp-prow-lab {
      display: block
   }

   .tarif-43 {
      grid-template-columns: minmax(0, 1fr) auto auto 16px;
      gap: 12px 10px;
      align-items: center;
      padding-top: 15px;
      padding-bottom: 15px;
      cursor: pointer
   }

   /* Placement explicite : l'ordre du balisage ne suffirait pas à répartir les
     sept cellules sur trois lignes de longueurs différentes. */
   .hp-prow-name {
      grid-area: 1 / 1 / 2 / 2;
      font-size: 16px
   }

   .hp-prow-sum {
      grid-area: 1 / 2 / 2 / 3;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .08em;
      color: #8DA9C4;
      white-space: nowrap
   }

   .hp-prow-total {
      grid-area: 1 / 3 / 2 / 4;
      text-align: right
   }

   .hp-prow-caret {
      grid-area: 1 / 4 / 2 / 5;
      font-size: 13px;
      line-height: 1;
      color: #8DA9C4;
      text-align: right;
      transition: transform .3s cubic-bezier(.2, .7, .2, 1)
   }

   .hp-prow.is-open .hp-prow-caret {
      transform: rotate(180deg);
      color: #FFBA13
   }

   .tarif-45 {
      grid-area: 2 / 1 / 3 / 5;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px
   }

   /* Les deux groupes se calent sur les bords : leur largeur ne dépend plus de
     l'endroit où tombe la frontière des colonnes de l'en-tête. */
   .tarif-46:nth-of-type(1) {
      grid-area: 3 / 1 / 4 / 3;
      justify-self: start
   }

   .tarif-46:nth-of-type(2) {
      grid-area: 3 / 3 / 4 / 5;
      justify-self: end
   }

   .tarif-46 {
      gap: 8px
   }

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

   /* Fermée, la ligne ne montre que son en-tête. */
   .hp-prow:not(.is-open) .tarif-45,
   .hp-prow:not(.is-open) .tarif-46 {
      display: none
   }

   /* Dépliées, les pastilles ont la place d'écrire le niveau en toutes lettres. */
   .hp-lvl {
      width: auto;
      height: 40px;
      font-size: 10.5px;
      letter-spacing: .1em
   }

   .hp-lvl-s {
      display: none
   }

   .hp-lvl-l {
      display: inline
   }

   .hp-pm {
      width: 34px;
      height: 34px
   }

   /* La durée commune : l'intitulé prend sa ligne, les quatre choix la suivante. */
   .tarif-48 {
      flex: 0 0 100%
   }

   /* Le total reste à droite de son libellé, comme sur grand écran. Il ne se
     coupe pas : c'est la colonne de gauche qui cède la place. */
   .tarif-49 {
      align-items: flex-end;
      gap: 14px;
      padding: 20px
   }

   .tarif-49>div {
      min-width: 0
   }

   .tarif-52 {
      flex: none;
      font-size: 30px;
      white-space: nowrap
   }

   .hp-mode {
      padding: 11px 15px;
      font-size: 13.5px
   }

   /* fuseau horaire */
   .page-60 {
      flex-direction: column;
      align-items: flex-start;
      gap: 22px;
      padding-top: 32px;
      padding-bottom: 34px
   }

   .page-61,
   .page-64 {
      flex: none
   }

   .page-62 {
      font-size: 44px
   }

   .page-65 {
      flex: none;
      width: 100%;
      min-width: 0
   }

   .page-66 {
      flex-wrap: wrap;
      gap: 10px 16px
   }

   .page-71 {
      margin-left: 0
   }

   /* community management */
   .community-1 {
      grid-template-columns: 1fr;
      gap: 24px
   }

   .community-7 {
      grid-template-columns: 1fr
   }

   .hp-plan {
      padding: 26px 20px 24px
   }

   .community-17 {
      white-space: normal
   }

   /* Fianarantsoa */
   .fianarantsoa-7 {
      grid-template-rows: auto;
      height: auto;
      gap: 10px
   }

   /* 16/9 pour l'affiche : c'est le format de la vidéo, la rogner masquerait
     le texte incrusté. */
   .fianarantsoa-8 {
      aspect-ratio: 16/9
   }

   .fianarantsoa-17 {
      aspect-ratio: 16/10
   }

   .fianarantsoa-14 {
      flex-wrap: wrap;
      align-items: baseline;
      gap: 2px 12px;
      left: 14px;
      right: 14px;
      bottom: 12px
   }

   .fianarantsoa-16 {
      margin-left: 0
   }

   .fianarantsoa-11 {
      width: 64px;
      height: 64px
   }

   .fianarantsoa-13 {
      border-left-width: 18px;
      border-top-width: 11px;
      border-bottom-width: 11px
   }

   .fianarantsoa-23 {
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      padding: 40px 0 64px
   }

   .fianarantsoa-29 {
      font-size: 14px;
      margin-top: 11px
   }

   /* Deux par ligne comme sur grand écran ; le portrait rétrécit pour laisser
     de quoi lire la fonction à côté. */
   .fianarantsoa-37 {
      grid-template-columns: 1fr 1fr;
      gap: 16px 12px
   }

   .fianarantsoa-38 {
      gap: 10px
   }

   .fianarantsoa-39 {
      width: 60px;
      height: 75px
   }

   .fianarantsoa-42 {
      font-size: 13.5px
   }

   /* Le panneau de la carte est `position:fixed` sur cette largeur : aucun de
     ses ancêtres ne doit porter de transformation, sans quoi il devient leur
     bloc conteneur et le plein écran se réduit à la vignette. `agRise`
     translate — même arrivée à 0, la `transform` calculée n'est pas `none`.
     `agFade` donne la même apparition au défilement, en opacité seule. */
   [data-leads] {
      animation-name: agFade
   }

   /* La carte ouverte crée le contexte d'empilement du panneau : c'est elle,
     pas lui, qui doit dépasser la barre fixe du bas (z-index 50). */
   [data-leads].is-on {
      z-index: 100
   }

   /* Le panneau ne tient plus dans sa vignette : il devient une feuille collée
     au bas de l'écran. Sa hauteur suit son contenu, plafonnée à la moitié
     basse — la page reste visible au-dessus, et toucher à côté referme. */
   .hp-leads {
      position: fixed;
      top: auto;
      left: 0;
      right: 0;
      bottom: 0;
      width: auto;
      max-height: 56vh;
      overflow-y: auto;
      overscroll-behavior: contain;
      z-index: 100;
      padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
      border: none;
      border-top: 1px solid rgba(255, 186, 19, .45);
      box-shadow: 0 -24px 64px rgba(0, 10, 28, .55);
      transform: translateY(12px)
   }

   /* Le panneau porte sa propre transformation d'ouverture : il est donc le
     bloc conteneur de ce bouton, qui se cale sur le haut de la feuille et ne
     défile pas avec la liste. */
   .hp-leads-close {
      display: flex;
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 3;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      padding: 0;
      font-size: 22px;
      line-height: 1;
      color: #8DA9C4;
      background: transparent;
      border: 1px solid rgba(141, 169, 196, .35);
      cursor: pointer;
      transition: color .25s, border-color .25s
   }

   .hp-leads-close:hover {
      color: #FFBA13;
      border-color: rgba(255, 186, 19, .55)
   }

   /* L'en-tête du panneau dégage la croix. */
   .fianarantsoa-34 {
      flex-wrap: wrap;
      gap: 4px 12px;
      padding-right: 46px
   }

   .fianarantsoa-36 {
      margin-left: 0
   }

   /* questions fréquentes */
   .faq-1 {
      grid-template-columns: 1fr;
      gap: 28px
   }

   .hp-faq-head {
      gap: 12px;
      padding: 18px 0
   }

   .hp-faq-q {
      font-size: 17px
   }

   .faq-7 {
      padding: 0 0 20px 40px
   }

   /* contact */
   .contact-3 {
      flex-direction: column;
      align-items: stretch;
      gap: 24px
   }

   .contact-7 {
      margin-left: 0;
      min-width: 0
   }

   /* pied de page */
   .page-74 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px 20px;
      padding-top: 48px;
      padding-bottom: 30px
   }

   .page-80,
   .page-81,
   .page-83 {
      overflow-wrap: break-word
   }

   .page-85 {
      flex-wrap: wrap;
      gap: 8px 18px;
      padding-top: 20px;
      padding-bottom: 32px
   }

   .page-87 {
      margin-left: 0
   }

   /* bandeau de capacité */
   .page-89 {
      top: 10px;
      right: 12px
   }

   .hp-scarcity {
      max-height: 80vh;
      overflow-y: auto
   }

   .page-91 {
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
      padding: 16px 20px 18px
   }

   .page-92 {
      width: auto;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 16px
   }

   .page-100 {
      flex: none;
      min-width: 0;
      border-left: none;
      border-top: 1px solid rgba(141, 169, 196, .28);
      padding: 12px 0 0
   }

   .page-101 {
      font-size: 18px
   }

   .page-103 {
      width: auto;
      border-left: none;
      border-top: 1px solid rgba(141, 169, 196, .28);
      padding: 12px 0 0
   }

   .page-109 {
      align-items: stretch
   }

   /* Empilé, le bandeau prendrait la moitié de l'écran : même contenu, resserré. */
   .page-102 {
      font-size: 12.5px
   }

   .page-104 {
      margin-bottom: 9px
   }

   .hp-intent {
      padding: 9px 12px;
      font-size: 12.5px
   }

   .page-110 {
      font-size: 9.5px
   }

   .page-111 {
      padding: 13px 20px;
      font-size: 14.5px
   }

   .hp-scarcity-tab {
      left: 16px;
      bottom: 16px
   }

   .hp-fab {
      right: 16px;
      bottom: calc(16px + var(--bar-h, 0px));
      width: 54px;
      height: 54px
   }

   /* vidéo et visionneuse */
   .hp-video {
      padding: 16px
   }

   .page-116 {
      width: 100%
   }

   .page-117 {
      flex-wrap: wrap;
      gap: 8px 14px
   }

   .page-118 {
      margin-left: 0
   }

   .page-123 {
      width: 100%;
      height: min(64vh, 460px)
   }

   .page-124 {
      padding: 12px 14px;
      gap: 12px
   }

   .page-127 {
      top: 12px;
      right: 14px
   }

   .hp-lb {
      padding: 12px
   }

   .hp-lbarrow {
      width: 40px;
      height: 40px;
      font-size: 24px
   }

   .hp-lbarrow.is-prev {
      left: 8px
   }

   .hp-lbarrow.is-next {
      right: 8px
   }

   /* fenêtre de brief : plein écran, en-tête sombre puis formulaire */
   .hp-brief {
      padding: 0
   }

   .page-129 {
      position: relative;
      width: 100%;
      max-width: none;
      height: 100vh;
      max-height: 100vh;
      grid-template-columns: 1fr;
      grid-template-rows: auto minmax(0, 1fr)
   }

   .page-130 {
      max-height: 40vh;
      padding: 18px 20px 20px;
      gap: 12px
   }

   .page-132 {
      font-size: 21px
   }

   .page-133 {
      font-size: 13.5px
   }

   .page-134 {
      gap: 10px;
      padding-top: 16px
   }

   .page-140 {
      position: static;
      overflow: auto
   }

   /* Le doigt qui arrive en bout de course ne fait pas défiler la page dessous. */
   .page-130,
   .page-140 {
      overscroll-behavior: contain
   }

   .page-141 {
      top: 14px;
      right: 14px;
      z-index: 6;
      color: #8DA9C4;
      padding: 8px
   }

   .page-143 {
      padding: 44px 22px
   }

   .page-145 {
      font-size: 24px
   }

   .page-147 {
      gap: 10px
   }

   .page-152 {
      padding: 22px 20px 28px;
      gap: 18px
   }

   .page-155,
   .page-158 {
      grid-template-columns: 1fr;
      gap: 14px
   }

   /* 16 px : en deçà, iOS agrandit la page au moment de la saisie. */
   .page-157,
   .page-159 {
      font-size: 16px
   }

   .page-161 {
      flex-direction: column;
      align-items: stretch;
      gap: 14px
   }

   .page-162 {
      width: 100%
   }
}

/* La hauteur d'écran dynamique évite la barre d'URL mobile, là où elle existe. */
@supports (height:100dvh) {
   @media (max-width:900px) {
      .page-129 {
         height: 100dvh;
         max-height: 100dvh
      }

      .page-130 {
         max-height: 40dvh
      }

      .hp-leads {
         max-height: 56dvh
      }
   }
}


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

   .page-28,
   .page-34 {
      font-size: 30px
   }

   .page-42,
   .realisations-17,
   .temoignages-10,
   .garanties-3,
   .tarif-3,
   .community-2,
   .offres-3,
   .faq-2,
   .contact-5,
   .fianarantsoa-4 {
      font-size: 26px
   }

   .page-47 {
      font-size: 31px
   }

   .page-62 {
      font-size: 38px
   }

   .tarif-26 {
      font-size: 36px
   }

   .tarif-52 {
      font-size: 32px
   }

   .realisations-27 {
      font-size: 21px
   }

   .temoignages-5,
   .temoignages-6 {
      font-size: 19px
   }

   .page-101 {
      font-size: 16.5px
   }

   .page-102 {
      font-size: 12.5px
   }

   .fianarantsoa-23 {
      gap: 12px
   }

   .fianarantsoa-39 {
      width: 52px;
      height: 65px
   }

   .page-44 {
      gap: 16px 14px
   }

   /* Les intitulés espacés du pied de page ne tiennent plus à deux colonnes. */
   .page-74 {
      grid-template-columns: 1fr;
      gap: 26px
   }

   .page-49 {
      max-width: none
   }

   .tarif-38,
   .tarif-40,
   .tarif-43,
   .tarif-47 {
      padding-left: 14px;
      padding-right: 14px
   }

   .tarif-43 {
      grid-template-columns: minmax(0, 1fr) auto auto 14px;
      gap: 12px 8px
   }

   /* Trois colonnes de prix sur 320 px : on repasse à deux lignes lisibles. */
   .tarif-5,
   .tarif-9 {
      grid-template-columns: 1fr 1fr
   }

   .tarif-5> :nth-child(4),
   .tarif-16 {
      grid-column: 1 / -1;
      text-align: left
   }

   .tarif-16 {
      padding-top: 6px
   }
}

.hp-mobile-fab {
   position: fixed;
   left: 0px;
   right: 0px;
   bottom: 0px;
   z-index: 50;
   display: flex;
   gap: 8px;
   padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
   background: rgba(0, 10, 28, 0.97);
   backdrop-filter: blur(10px);
   border-top: 1px solid rgba(141, 169, 196, 0.24);
}

/* La barre est fixe */
@media (max-width: 767.98px) {
   .page-1 {
      --fab-h: calc(73px + env(safe-area-inset-bottom));
   }

   .page-85 {
      padding-bottom: calc(32px + var(--fab-h));
   }

   .hp-scarcity-tab {
      bottom: calc(16px + var(--fab-h));
   }
}

/* ================================
   Display Utilities
   ================================ */
.d-none {
   display: none !important;
}

.d-block {
   display: block !important;
}

.d-flex {
   display: flex !important;
}

/* sm: 640px */
@media (min-width: 640px) {
   .d-sm-none {
      display: none !important;
   }

   .d-sm-block {
      display: block !important;
   }

   .d-sm-flex {
      display: flex !important;
   }
}

/* md: 768px */
@media (min-width: 768px) {
   .d-md-none {
      display: none !important;
   }

   .d-md-block {
      display: block !important;
   }

   .d-md-flex {
      display: flex !important;
   }
}

/* lg: 1024px */
@media (min-width: 1024px) {
   .d-lg-none {
      display: none !important;
   }

   .d-lg-block {
      display: block !important;
   }

   .d-lg-flex {
      display: flex !important;
   }
}

.hp-slide-map {
  width: 28px;
  height: 28px;

  background-image: url("/assets/images/map-akata.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border: 1px solid white;
  border-radius: 4px;
  box-sizing: border-box;

  position: absolute;
  right: 8px;
  top: 8px;

  overflow: hidden;

  /* Animation du conteneur */
  transition: width 0.3s ease;
}

/* Le conteneur s'agrandit */
.hp-slide-map:hover {
  width: 100px;
}

.hp-slide-map-overlay {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.hp-slide-map-icon {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 4px;
  white-space: nowrap;
}

.hp-slide-map-icon > svg {
  flex-shrink: 0;
}

.hp-slide-map-text {
  font-size: 10px;
  color: white;

  /* Texte caché */
  opacity: 0;

  transition: opacity 0.2s ease;
}

.hp-slide-map:hover .hp-slide-map-text {
  opacity: 1;
}