/* =========================================================================
   CARRIA — A5 (la preuve) et A6 (intégrations)
   Annexes A5, A6 (visuels), C2 (jetons), C4 (typographie), C5 (gabarit,
   mouvement), D1 (responsive).

   Aucune valeur hexadécimale en dur, à UNE exception près : les fonds de
   monogramme de A6, imposés à la valeur près par l'annexe A6 (relevés dans
   front/lib/services/connector_service_impl.dart). Ils sont regroupés à la
   fin de cette feuille et commentés un par un.

   ⚠️ L'ancien violet, assombri lors de l'audit d'accessibilité (annexe C1),
   n'apparaît nulle part ici et sa valeur n'est même pas citée : le brief §6
   refuse la page sur sa seule présence dans le CSS. Tout l'accent de cette
   feuille vient de --accent, servi par tokens.css.
   ========================================================================= */

/* =========================================================================
   A5 — LA PREUVE
   Fond blanc, quinconce ≥ 1024 px, empilement TEXTE PUIS IMAGE en dessous.
   Pas de fenêtre de navigateur factice, pas de barre d'adresse dessinée,
   pas de reflet en verre sur les visuels.
   ========================================================================= */

.a5-entete {
  display: flex;
  flex-direction: column;
  gap: var(--sp-base);
  margin-bottom: 88px;
}

.a5-titre-section {
  max-width: 20ch;
}

.a5-chapo {
  color: var(--muted);
}

.a5-blocs {
  display: flex;
  flex-direction: column;
  gap: 88px;
}

/* Sous 1024 px : une seule colonne. La figure suit le texte dans le DOM,
   l'ordre d'empilement est donc acquis sans intervention (D1). */
.a5-bloc {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-xxl);
  align-items: center;
}

.a5-texte {
  display: flex;
  flex-direction: column;
  gap: var(--sp-base);
  max-width: 68ch; /* colonnes de texte plafonnées à 68 caractères (C4) */
}

.a5-titre {
  color: var(--ink);
}

.a5-corps {
  color: var(--muted);
}

/* --- La figure et son emplacement réservé ---
   Les captures n'existent pas encore (B2). L'emplacement garde le gabarit
   exact du visuel à venir — 1440 × 900, soit 16/10 — pour que l'intégration
   ne déplace rien (CLS < 0,05, D2). Il ne porte aucun texte : une capture
   manquante se signale, elle ne se remplace pas (B1). */

.a5-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.a5-emplacement,
.a5-figure img {
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-card);
}

.a5-emplacement {
  aspect-ratio: 16 / 10;
  background-color: var(--bg-2);
  /* Hachure très discrète : signale un emplacement réservé sans écrire quoi
     que ce soit dessus, et sans imiter une interface. */
  background-image: repeating-linear-gradient(
    135deg,
    var(--rule-20) 0,
    var(--rule-20) 1px,
    transparent 1px,
    transparent 14px
  );
}

.a5-legende {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted-2);
}

@media (min-width: 1024px) {
  .a5-bloc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }

  /* Quinconce : A à droite, B inversée, C à droite, D inversée, E à droite.
     L'inversion est purement visuelle — l'ordre du DOM reste texte puis
     image, ce qui garantit l'ordre de lecture et l'ordre d'empilement. */
  .a5-bloc--inverse > .a5-texte {
    grid-column: 2;
    grid-row: 1;
  }

  .a5-bloc--inverse > .a5-figure {
    grid-column: 1;
    grid-row: 1;
  }
}

@media (max-width: 768px) {
  .a5-entete {
    margin-bottom: 56px;
  }

  .a5-blocs {
    gap: 64px;
  }
}

/* =========================================================================
   A6 — INTÉGRATIONS
   Fond --bg-grad, une carte en verre par famille, monogramme carré 40 px.
   Sept familles, jamais une de plus (règle bloquante A6).
   ========================================================================= */

.a6-entete {
  display: flex;
  flex-direction: column;
  gap: var(--sp-base);
  margin-bottom: var(--sp-xxxl);
}

.a6-titre-section {
  max-width: 20ch;
}

.a6-chapo {
  color: var(--muted);
}

.a6-grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.a6-carte {
  /* .verre porte le fond, le flou, la bordure, le rayon et l'ombre (C3). */
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.a6-carte:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-elev), inset 0 1px 0 var(--inset-highlight);
}

.a6-monogrammes {
  display: flex;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-xs);
}

/* Monogramme : carré 40 px, --r-xs, deux lettres Inter SemiBold blanc 16 px
   sur fond teinté — exactement ce que fait l'application (A6).
   aria-hidden dans le HTML : le nom de l'outil est écrit juste en dessous,
   les lettres ne portent donc aucune information propre. */
.a6-monogramme {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--r-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: #ffffff;
  user-select: none;
}

.a6-famille {
  color: var(--ink);
}

.a6-outils {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted-2);
}

.a6-tire {
  margin-top: auto;
  padding-top: var(--sp-md);
  border-top: 1px solid var(--rule-25);
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

/* Encadré final : surface en verre, --r-md, padding --pad, bordure gauche
   3 px --accent (A6). .verre pose déjà une bordure 1 px --hairline ; seule
   la bordure gauche est reprise. */
.a6-encadre {
  margin-top: var(--sp-xxxl);
  padding: var(--pad);
  border-left: 3px solid var(--accent);
}

.a6-encadre-texte {
  color: var(--muted);
  max-width: 68ch;
}

.a6-encadre-titre {
  color: var(--ink);
  font-weight: 600;
}

@media (min-width: 768px) {
  .a6-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .a6-grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------------
   Fonds de monogramme — SEULES valeurs hexadécimales en dur autorisées ici.
   Imposées par l'annexe A6, relevées dans le produit
   (front/lib/services/connector_service_impl.dart). Ne pas « harmoniser »,
   ne pas en inventer pour les outils sans couleur relevée.
   ------------------------------------------------------------------------- */

/* Zelty */
.a6-monogramme--ze {
  background-color: #ff6b35;
}

/* Izipass Pro */
.a6-monogramme--ip {
  background-color: #0f3d7e;
}

/* KEYTCHENS — l'app applique exactement --ink : la pastille se confondrait
   avec le texte. Écart assumé par l'annexe A6. */
.a6-monogramme--kt {
  background-color: #2f3168;
}

/* CERCA */
.a6-monogramme--ce {
  background-color: #0f62fe;
}

/* Notion — l'app applique un noir pur, indiscernable de KEYTCHENS côte à
   côte. Écart assumé par l'annexe A6. */
.a6-monogramme--no {
  background-color: #111111;
}

/* Pennylane · Qonto · Google Business Profile · Combo — aucune couleur de
   marque relevée pour ces quatre-là : --ink-3 uniforme, et rien d'inventé. */
.a6-monogramme--neutre {
  background-color: var(--ink-3);
}