/* plan.css — le plan du site : le bloc de liens posé au-dessus du pied de
   page de TOUTES les pages, catalogue comme accueil et témoignages.

   C'est lui qui empêche une page orpheline : les 34 pages du catalogue y
   sont listées, sans JavaScript. Il a sa feuille à lui parce qu'il est le
   seul morceau partagé entre deux familles de pages qui, sinon, n'ont rien
   en commun — l'accueil a home.css, le catalogue a catalogue.css.

   Les classes `plan-*` viennent des styles inline de la version 2,
   converties par outils/v2/convertis.mjs ; le suffixe -hv porte le survol. */

.plan-1 {
   background: #000A1C;
   color: #D3E2ED;
   font-family: Archivo, system-ui, sans-serif;
   border-top: 1px solid rgba(141, 169, 196, .22)
}

.plan-2 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 64px 64px 48px;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 40px
}

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

.plan-4 {
   display: flex;
   flex-direction: column;
   gap: 11px
}

.plan-5 {
   font-size: 14.5px;
   line-height: 1.35;
   color: #D3E2ED;
   transition: color .2s
}

.plan-6-hv:hover {
   color: #FFBA13 !important
}

.plan-7 {
   grid-column: span 2
}

.plan-8 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 32px;
   row-gap: 11px
}

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

@media (max-width:1180px) {
   .plan-2 {
      padding: 56px 40px 44px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 36px
   }

   /* Les expertises tenaient sur deux colonnes de la grille : sur une grille
     à deux colonnes, elles reprennent une colonne entière. */
   .plan-7 {
      grid-column: span 2
   }

   .plan-8 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: 24px
   }
}

@media (max-width:900px) {
   .plan-2 {
      padding: 44px 20px 36px;
      grid-template-columns: minmax(0, 1fr);
      gap: 32px
   }

   .plan-7 {
      grid-column: auto
   }

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

@media (max-width:560px) {
   .plan-8 {
      grid-template-columns: minmax(0, 1fr)
   }
}