/* index-catalogue.css — les trois pages d'index : /fr/expertises,
   /fr/services, /fr/secteurs. La chrome est dans catalogue.css.

   Écrite à la main : ces pages n'existaient pas dans la version 2. Elle
   reprend son vocabulaire visuel — héros sombre, filet diagonal, chiffres en
   IBM Plex Mono, accent ambre — pour qu'elles ne détonnent pas à côté des 34
   pages converties. */

/* -- Le héros ------------------------------------------------------------ */

.idx-1 {
   position: relative;
   background: #000A1C;
   color: #fff;
   overflow: hidden
}

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

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

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

.idx-5 {
   color: #FFBA13
}

.idx-6 {
   color: #8DA9C4
}

.idx-7 {
   color: #fff
}

.idx-8 {
   padding: 44px 0 64px;
   animation: agRise .9s cubic-bezier(.2, .7, .2, 1) both
}

.idx-9 {
   margin: 0 0 22px;
   font-size: 64px;
   line-height: 1.02;
   font-weight: 600;
   letter-spacing: -.045em;
   max-width: 24ch;
   text-wrap: balance
}

.idx-10 {
   color: var(--ag-accent)
}

.idx-11 {
   margin: 0;
   font-size: 18px;
   line-height: 1.6;
   color: #B9CCDD;
   max-width: 62ch;
   text-wrap: pretty
}

.idx-12 {
   display: flex;
   gap: 12px;
   margin-top: 36px;
   flex-wrap: wrap
}

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

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

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

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

/* -- La liste ------------------------------------------------------------ */

.idx-17 {
   border-bottom: 1px solid #D3E2ED
}

.idx-18 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 72px 64px 80px;
   display: flex;
   flex-direction: column;
   gap: 56px
}

.idx-20 {
   margin: 0 0 18px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: .16em;
   font-weight: 600;
   color: #946200
}

/* Les filets sont portés par les cartes, pas par un fond que le `gap`
   laisserait voir : sept expertises sur trois colonnes, c'est une dernière
   rangée à deux cases vides — et elles se seraient remplies de bleu. */
.idx-21 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   border-top: 1px solid #D3E2ED;
   border-left: 1px solid #D3E2ED
}

.idx-22 {
   background: #fff;
   border-right: 1px solid #D3E2ED;
   border-bottom: 1px solid #D3E2ED;
   padding: 24px 24px 22px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-height: 150px;
   transition: background .25s, color .25s
}

.idx-23-hv:hover {
   background: #000A1C !important;
   color: #fff !important
}

.idx-24 {
   display: flex;
   align-items: center;
   gap: 10px
}

.idx-25 {
   width: 22px;
   height: 22px;
   display: block;
   object-fit: contain
}

.idx-26 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10.5px;
   letter-spacing: .12em;
   color: #946200
}

.idx-22:hover .idx-26 {
   color: #FFBA13
}

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

.idx-28 {
   font-size: 14px;
   line-height: 1.5;
   color: #5C7897;
   text-wrap: pretty
}

.idx-22:hover .idx-28 {
   color: #D3E2ED
}

.idx-29 {
   margin-top: auto;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   color: #946200
}

.idx-22:hover .idx-29 {
   color: #FFBA13
}

/* -- L'appel à l'action -------------------------------------------------- */

.idx-30 {
   background: #000A1C;
   color: #fff
}

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

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

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

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

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

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

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

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

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


/* -- Petits écrans ------------------------------------------------------- */

@media (max-width:1180px) {

   .idx-3,
   .idx-18,
   .idx-31 {
      padding-left: 40px;
      padding-right: 40px
   }

   .idx-9 {
      font-size: 52px
   }
}

@media (max-width:1100px) {

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

   .idx-31 {
      grid-template-columns: minmax(0, 1fr);
      gap: 40px
   }

   .idx-35 {
      min-width: 0
   }
}

@media (max-width:900px) {

   .idx-3,
   .idx-18,
   .idx-31 {
      padding-left: 20px;
      padding-right: 20px
   }

   .idx-18 {
      padding-top: 48px;
      padding-bottom: 56px;
      gap: 40px
   }

   .idx-9 {
      font-size: 38px
   }

   .idx-11 {
      font-size: 16.5px
   }

   .idx-33 {
      font-size: 32px
   }

   .idx-21 {
      grid-template-columns: minmax(0, 1fr)
   }
}

@media (max-width:560px) {

   .idx-9 {
      font-size: 31px
   }

   .idx-33 {
      font-size: 26px
   }

   .idx-27 {
      font-size: 19px
   }
}