/* ═══════════════════════════════════════════════════════════════════
   Section « Les briques réunies » — six tuiles de front.

   TRAITEMENT : contour vert foncé, décor d'angle, aucune ombre.
   C'est la version du bloc fourni : surface blanche, filet de 1,5 px
   en #0B3B2C, quart de cercle vert clair en haut à droite, première
   tuile en aplat sombre. Les classes du balisage (`brick`, `brick-go`…)
   sont conservées : seul l'habillage change.

   PAS D'OMBRE, ET C'EST LE PARTI PRIS
   Le reste de la page fait flotter ses blocs sur une ombre verte très
   diffuse. Ici, le contour porte seul la séparation — un trait net
   plutôt qu'un halo. Les deux cohabitent parce que la couleur reste la
   même famille ; ce serait faux avec un gris neutre.

   LA CONTRAINTE ASSUMÉE
   À cinq de front dans 1 180 px, chaque tuile gagne une mesure plus
   confortable, tout en gardant le rythme horizontal de la section.
   ═══════════════════════════════════════════════════════════════════ */

.brick-grid {
  --brick-edge:   #0B3B2C;   /* contour des tuiles — la signature */
  --brick-dark:   #0B3B2C;   /* fond de la tuile mise en avant */
  --brick-accent: #15803D;   /* survol */
  --brick-tint:   #D8EFD2;   /* carré d'icône et décor d'angle */
  --brick-ink:    #0F1F19;
  /* 5,27:1 sur blanc et 4,73:1 sur le décor d'angle (qui vaut #eaf6e6
     une fois son opacité de 55 % appliquée). Le #6B7C74 du bloc
     d'origine tombait à 4,41:1 — mesuré, pas estimé. */
  --brick-muted:  #616F68;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  /* 48 px sous le sous-titre : la valeur du rail de production
     (.capability-track { margin-top: 48px }). */
  margin-top: 48px;
  color: var(--brick-ink);
}

/* This wider editorial measure belongs only to the six-card module. It keeps
   its updated introductory message on two calm, balanced lines. */
#solutions .section-heading { max-width: 800px; }
#solutions .section-heading > p {
  width: 800px;
  max-width: 100%;
  text-wrap: wrap;
}

.brick {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 22px 20px;
  background: #fff;
  border: 1.5px solid var(--brick-edge);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  /* `.35s` sans propriété = `all`, exactement ce que fait la carte de
     production. Le mouvement porte sur transform, border et ombre. */
  transition: .35s;
}
/* Survol repris de la production, résultat de DEUX couches superposées :
   styles.css pose le mouvement (translateY(-12px) rotate(-1deg)) et
   brand-system.css écrase ensuite la bordure et l'ombre. Prendre la
   première seule aurait donné une bordure verte pleine et la mauvaise
   ombre. */
.brick:hover {
  transform: translateY(-12px) rotate(-1deg);
  border-color: rgba(73, 162, 94, .34);
  box-shadow: 0 22px 50px rgba(36, 95, 56, .13);
}
.brick:hover::after { transform: scale(1.7); }


/* Contour réel au clavier. Le bloc d'origine faisait `outline: none`
   puis dessinait un halo au box-shadow avec `color-mix` : si celui-ci
   n'est pas interprété, l'outline a déjà été supprimé et il ne reste
   AUCUN repère. On repose un contour, sans halo. */
.brick:focus-visible {
  outline: 3px solid var(--brick-accent);
  outline-offset: 2px;
  border-color: var(--brick-accent);
}

/* Décor d'angle : un quart de cercle ancré en haut à droite, et non un
   cercle décalé. La différence se voit au coin arrondi de la tuile. */
.brick::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  background: var(--brick-tint);
  border-bottom-left-radius: 100%;
  opacity: .55;
  transition: .35s;
  pointer-events: none;
}

.brick-icon {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--brick-tint);
  color: var(--brick-edge);
  display: grid;
  place-items: center;
  font-size: 26px;
  flex-shrink: 0;
}

.brick h3 {
  position: relative;
  z-index: 1;
  margin: 30px 0 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: inherit;
  text-wrap: balance;
  hyphens: auto;
}

.brick p {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--brick-muted);
  /* Césure : à 21 signes par ligne, « indépendant » ou « prévisionnel »
     chassent seuls et déchirent le bloc. `lang="fr"` est posé sur
     <html>, la coupure suit donc les règles françaises. */
  hyphens: auto;
  text-wrap: pretty;
}

.brick-go {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: inherit;
}
.brick-go .material-symbols-outlined {
  font-size: 17px;
  transition: transform .18s ease;
}
.brick:hover .brick-go .material-symbols-outlined { transform: translateX(3px); }

/* ── La tuile mise en avant ─────────────────────────────────────── */
.brick--lead {
  background: var(--brick-dark);
  border-color: var(--brick-dark);
  color: #fff;
}
.brick--lead::after { background: #17513C; opacity: 1; }
.brick--lead .brick-icon { background: #fff; color: var(--brick-dark); }
/* Blanc à 74 % sur #0B3B2C : 7,58:1. Large marge au-dessus du seuil. */
.brick--lead p { color: rgba(255, 255, 255, .74); }
.brick--lead:focus-visible { outline-color: #4ADE80; border-color: #4ADE80; }

/* ── Écrans étroits ─────────────────────────────────────────────────
   La mesure s'améliore d'elle-même à mesure que les tuiles
   s'élargissent : la césure devient inutile et le texte peut grandir. */
@media (max-width: 1100px) {
  .brick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brick h3 { hyphens: manual; }
  .brick p { font-size: 14px; hyphens: manual; }
}
@media (max-width: 700px) {
  .brick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .brick-grid { grid-template-columns: 1fr; }
  .brick { min-height: 0; }
  .brick p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .brick, .brick::after, .brick-go .material-symbols-outlined { transition: none; }
  .brick:hover { transform: none; }
  .brick:hover::after { transform: none; }
}

@media (prefers-contrast: more) {
  .brick { border-width: 2px; }
  .brick::after { opacity: .3; }
  .brick p { color: #3D4A44; }
}