/* clients.css — page Clients (source : `clients`).
   Une grille de logos encadrée, puis deux blocs qui s'élargissent au survol.
   Mesuré : tout arrive au chargement, en cascade sur treize cibles (SPEC §9). */

.clients-header_component {
  display: grid; grid-template-columns: .75fr 1fr; gap: 16px;
  place-items: start;
  width: 100%;
}
.clients-header_head-wrap { max-width: 47.5rem; }

/* Les cases se chevauchent d'un pixel : sans cela, les filets se doubleraient
   à chaque jonction et le trait paraîtrait deux fois plus épais. */
.clients_list { display: grid; grid-template-columns: repeat(4, 1fr); }
.clients_component {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  width: 100%; height: var(--size--size-27);
  padding-top: var(--size--size-11); padding-bottom: var(--size--size-11);
  margin-left: -1px; margin-right: -1px;
}
.clients_logo { position: absolute; max-width: 80%; height: 33%; object-fit: scale-down; }
.clients_border { position: absolute; inset: 0 0 auto; width: 100%; height: 1px; background-color: var(--_colors---bleu--200); }
.clients_border.right  { inset: 0 0 0 auto; width: 1px; height: 100%; }
.clients_border.left   { inset: 0 auto 0 0;  width: 1px; height: 100%; }
.clients_border.bottom { inset: auto 0 0;    width: 100%; height: 1px; }

/* Grille sans logos (11 sept. 2026) : Specteur ne cite aucun client sauf
   Yaslan. Les cases portent le type de client, trois colonnes pour six cases ;
   chaque case porte son filet gauche, le chevauchement d'un pixel évite le
   doublon. La case Yaslan garde le logo et un libellé discret en bas. */
.clients_list.is-types { grid-template-columns: repeat(3, 1fr); }
.clients_type { position: relative; padding: 0 var(--size--size-8); text-align: center; }
.clients_reference-label { position: absolute; bottom: var(--size--size-8); color: var(--_colors---grey--400); }

/* ======================================================================= */
/* Résultats mesurés — deux blocs qui se partagent la largeur              */
/* ======================================================================= */
.blocks_components { display: flex; flex-direction: column; }
.blocks_items { display: flex; gap: 16px; width: 100%; }
/* Au survol, l'un prend 130 % et l'autre se comprime. Transition CSS, pas
   GSAP : c'est ce que fait la source. */
.blocks_item {
  position: relative;
  width: 100%; height: 33.75rem;
  border-radius: var(--border-radius--xxsmall);
  overflow: clip;
  transition: width .5s cubic-bezier(.608, .008, .25, 1);
}
.blocks_item:hover { width: 130%; }
.blocks_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blocks_content {
  position: absolute; inset: auto 0 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: var(--size--size-5);
  width: 100%; height: 30%;
  padding: var(--size--size-15);
  background-image: linear-gradient(#0000, #000000e6);
  color: var(--_colors---primary--white);
}
.blocks_title-wrap { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--size--size-2); }
.blocks_text { max-width: 24rem; color: var(--_colors---white--90); font-size: var(--size--size-7); }

/* ======================================================================= */
/* Adaptations                                                              */
/* ======================================================================= */
@media (max-width: 991px) {
  .clients-header_component { grid-template-columns: 1fr; }
  .clients_list { grid-template-columns: repeat(2, 1fr); }
  .clients_list.is-types { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  /* Sans survol, l'élargissement n'a plus de sens : les deux blocs s'empilent. */
  .blocks_items { flex-direction: column; }
  .blocks_item, .blocks_item:hover { width: 100%; height: 22rem; }
}

/* ======================================================================= */
/* Comment on travaille — accordéons sur fond sombre                       */
/* ======================================================================= */
.section_expand { background-color: var(--_colors---grey--800); }
.expand_content {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  gap: var(--size--size-13);
  max-width: 30rem;
}
.expand_head { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.expand_items { display: flex; flex-direction: column; gap: var(--size--size-10); }

/* La ligne d'accordéon : un filet au-dessus, le titre, le « + » à droite.
   Pas de carte ici — c'est la variante sombre de l'accordéon de la FAQ. */
.accordion_component { border-radius: var(--border-radius--xxsmall); cursor: pointer; overflow: clip; }
.accordion_title-wrap {
  display: flex; flex-direction: row; justify-content: space-between; align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding-top: var(--size--size-6);
  border-top: 1px solid var(--_colors---grey--600);
  text-align: left;
}
.accordion_title {
  color: var(--_colors---primary--white);
  font-size: var(--size--size-12);
  line-height: 1.3;
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: -.01em;
}
.accordion_plus { position: relative; display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; flex: none; }
.accordion_plus-line { position: absolute; width: var(--size--size-10); height: 1px; flex: none; background-color: var(--_colors---grey--500); }
.accordion_plus-line.is-second { transform: rotate(90deg); }
.accordion_text-wrap { display: flex; flex-direction: column; overflow: hidden; }
.accordion_text { color: var(--_colors---white--50); padding-top: .75rem; }

.expand_image-wrap {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  width: 100%; aspect-ratio: 1;
  border-radius: var(--border-radius--small);
  overflow: clip;
}
/* Les quatre repères posés sur l'image, sur un voile qui assombrit le bas. */
.expand_labels {
  position: absolute; inset: auto 0 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: var(--size--size-2);
  width: 100%; height: 30%;
  padding: var(--size--size-14);
  background-image: linear-gradient(#08080800, #08080878);
}