/* Catalogue public : la même palette, une grille plus dense que la vitrine. */
.catalogue-skip { position: fixed; top: -6rem; left: 1rem; z-index: 30; padding: 0.7rem 1rem; background: var(--papier-clair); }
.catalogue-skip:focus { top: 0.5rem; }
.integrations-hero { padding-block: 2.2rem 4rem; overflow: hidden; }
.integrations-hero-grille { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 3rem; }
.integrations-retour { display: inline-block; margin-bottom: 2.7rem; color: var(--gris-chaud); font-size: 0.84rem; text-decoration: none; }
.integrations-hero h1 { max-width: 16ch; font-size: clamp(2.5rem, 4.6vw, 3.6rem); line-height: 1.08; }
.integrations-hero .lede { max-width: 40ch; margin-block: 1.8rem; }
.integrations-explorer { display: inline-flex; align-items: center; gap: 1.3rem; font-size: 0.95rem; font-weight: 700; text-decoration: none; }
.integrations-explorer span { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--marine-filet); border-radius: 50%; }
.integrations-scene { position: relative; aspect-ratio: 1; max-width: 29rem; width: 100%; justify-self: end; }
.integrations-orbite { position: absolute; inset: 10% 2% 12%; border: 1px dashed var(--marine-filet); border-radius: 50%; transform: rotate(-18deg); }
.integrations-mascotte { position: absolute; inset: 9% 9% auto; width: 82%; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse at center, #000 48%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 48%, transparent 72%); }
.integration-satellite { position: absolute; display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.9rem; border: 1px solid var(--filet); border-radius: 14px; background: var(--papier-clair); box-shadow: 0 5px 15px #0e223808; font-size: 0.85rem; font-weight: 650; }
.integration-satellite img { width: 1.8rem; height: 1.8rem; object-fit: contain; }
.satellite-notion { top: 10%; left: 5%; transform: rotate(-7deg); }
.satellite-slack { top: 18%; right: 0; transform: rotate(6deg); }
.satellite-hubspot { bottom: 20%; left: -3%; transform: rotate(-5deg); }
.satellite-qonto { bottom: 13%; right: 0; transform: rotate(7deg); }
.integrations-scene-note { position: absolute; bottom: 0; width: 100%; text-align: center; font: italic 1rem var(--serif); color: var(--gris-chaud); }
.integrations-catalogue { padding-block: 3.4rem 4rem; border-top: 1px solid var(--filet); background: var(--papier-clair); scroll-margin-top: 5rem; }
.catalogue-entete { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.catalogue-entete .kicker { margin-bottom: 0.8rem; }
.catalogue-entete h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.catalogue-commandes { padding: 1rem; border: 1px solid var(--filet); border-radius: 20px; background: var(--blanc); }
.catalogue-recherche { display: flex; align-items: center; gap: 0.8rem; min-height: 3.5rem; padding-inline: 1rem; border: 1px solid var(--marine-filet); border-radius: 12px; background: var(--papier-clair); color: var(--marine); }
.catalogue-recherche:focus-within { outline: 2px solid var(--marine); outline-offset: 2px; }
.catalogue-recherche svg { flex: none; }
.catalogue-recherche input { width: 100%; min-width: 0; padding-block: 0.8rem; border: 0; border-radius: 0; outline: none; font: inherit; font-size: 1rem; color: var(--encre); background: transparent; }
.catalogue-recherche input::placeholder { color: var(--gris-chaud); opacity: 1; }
.catalogue-recherche input::-webkit-search-cancel-button { display: none; }
.catalogue-effacer, .catalogue-reinitialiser { flex: none; padding: 0.4rem 0; border: 0; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--marine); background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.catalogue-filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.catalogue-filtre { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem; border: 1px solid var(--filet); border-radius: var(--r-pilule); color: var(--encre-douce); background: var(--papier-clair); font: 550 0.78rem/1.4 var(--sans); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.catalogue-filtre:hover { border-color: var(--marine); }
.catalogue-filtre[aria-pressed="true"] { border-color: var(--marine); color: var(--papier-clair); background: var(--marine); }
[data-catalogue-resultats] { margin-top: 1.6rem; }
.catalogue-reinitialiser { margin-top: 0.8rem; }
.catalogue-groupe { margin-bottom: 2rem; }
.catalogue-groupe h3 { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; font-size: 0.95rem; letter-spacing: -0.015em; }
.catalogue-groupe h3::before { content: ""; height: 0.45rem; width: 0.45rem; border-radius: 50%; background: var(--bleu-mascotte); }
.catalogue-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; padding: 0; margin: 0; list-style: none; }
.catalogue-carte { display: flex; align-items: start; gap: 0.85rem; height: 100%; min-height: 6.2rem; padding: 1.1rem 1rem; border: 1px solid #e8e7e2; border-radius: 14px; background: var(--blanc); box-shadow: 0 3px 9px #0e223804; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.catalogue-carte:hover { border-color: var(--marine-filet); box-shadow: 0 4px 12px #0e22380a; }
.catalogue-logo { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border: 1px solid #eeede8; border-radius: 9px; background: var(--papier-clair); overflow: hidden; }
.catalogue-logo > span { font: 650 0.8rem var(--mono); color: var(--marine); }
.catalogue-logo img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 5px; object-fit: contain; background: var(--blanc); }
.catalogue-carte h4 { margin: 0 0 0.25rem; font-size: 0.88rem; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.catalogue-carte p { margin: 0; color: var(--gris-chaud); font-size: 0.76rem; line-height: 1.5; }
.catalogue-note { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--filet); color: var(--gris-chaud); font-size: 0.82rem; }
.catalogue-vide { display: grid; grid-template-columns: 12rem minmax(0, 35rem); align-items: center; justify-content: center; gap: 2rem; padding: 2.5rem 1rem 3rem; }
.catalogue-vide img { mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 40%, transparent 72%); }
.catalogue-vide h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.catalogue-vide p:not(.kicker) { color: var(--gris-chaud); font-size: 0.95rem; }
.catalogue-vide .btn { margin-top: 0.7rem; }
.integrations-sur-mesure { padding-block: var(--esp-bande); background: var(--marine-pale); border-top: 1px solid #cbd8e7; }
.integrations-sur-mesure-grille { display: grid; grid-template-columns: 1fr 2.4fr; gap: 4rem; align-items: start; }
.integrations-signe { display: grid; place-items: center; width: 10rem; height: 10rem; margin-top: 1rem; border: 1px solid var(--marine-filet); border-radius: 50%; color: var(--marine); font: 7rem/1 var(--sans); transform: rotate(-10deg); }
.integrations-sur-mesure h2 { max-width: 20ch; }
.integrations-sur-mesure p:not(.kicker) { max-width: 58ch; }
.integrations-sur-mesure .epigraphe { margin-block: 1.5rem; }

@media (max-width: 64rem) {
  .catalogue-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .integrations-hero-grille { gap: 1.5rem; }
  .integrations-scene { max-width: 24rem; }
  .integration-satellite { font-size: 0.75rem; padding: 0.5rem 0.65rem; }
}
@media (max-width: 48rem) {
  .integrations-hero-grille { grid-template-columns: 1fr; }
  .integrations-hero h1 { max-width: 20ch; }
  .integrations-hero .lede { max-width: 48ch; }
  .integrations-retour { margin-bottom: 2rem; }
  .integrations-scene { justify-self: center; max-width: 22rem; }
  .integrations-scene-note { font-size: 0.9rem; }
  .catalogue-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogue-entete { align-items: start; gap: 1rem; }
  .integrations-sur-mesure-grille { grid-template-columns: 1fr; gap: 1.5rem; }
  .integrations-signe { width: 4rem; height: 4rem; font-size: 2.8rem; margin: 0; }
  .catalogue-vide { grid-template-columns: 1fr; gap: 1rem; padding-inline: 0; }
  .catalogue-vide img { width: 9rem; }
}
@media (max-width: 34rem) {
  .integrations-scene { display: none; }
  .integrations-page .header-barre > .btn { font-size: 0.75rem; padding: 0.65rem 0.85rem; }
  .integrations-hero { padding-bottom: 2.5rem; }
  .integrations-hero h1 { font-size: 2.55rem; }
  .integrations-catalogue { padding-top: 2.5rem; }
  .catalogue-entete { flex-direction: column; }
  .catalogue-commandes { padding: 0.7rem; }
  .catalogue-recherche { padding-inline: 0.7rem; gap: 0.5rem; }
  .catalogue-recherche input { font-size: 0.9rem; }
  .catalogue-filtre { padding: 0.5rem 0.7rem; font-size: 0.75rem; }
  .catalogue-grille { grid-template-columns: 1fr; }
  .catalogue-carte { min-height: 5rem; align-items: center; }
  .catalogue-carte h4 { font-size: 0.95rem; }
  .catalogue-carte p { font-size: 0.82rem; }
}