/* Page Intégrations : cartes par famille, filtres, statuts (Disponible / Bientôt disponible / À l'étude) */
.it{display:grid;gap:clamp(36px,5vw,64px);padding-bottom:clamp(56px,8vw,96px)}
.it-filtres{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;position:sticky;top:calc(env(safe-area-inset-top,0px) + 72px);z-index:5;
  padding:12px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px -18px rgba(11,21,48,.35)}
.it-groupe{display:flex;flex-wrap:wrap;gap:6px}
.it-groupe button{font:inherit;font-size:14px;font-weight:700;color:var(--navy);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.it-groupe button:hover{border-color:rgba(11,21,48,.3)}
.it-groupe button[aria-pressed="true"]{background:var(--navy);color:var(--white);border-color:var(--navy)}
.it-famille{display:grid;gap:18px}
.it-famille[hidden]{display:none}
.it-entete h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;line-height:1.15;margin:0 0 6px;text-wrap:balance}
.it-entete p{margin:0;color:var(--muted);max-width:64ch}
.it-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.it-carte{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--white);
  box-shadow:0 1px 0 rgba(11,21,48,.04),0 18px 40px -30px rgba(11,21,48,.45);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.it-carte:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(11,21,48,.04),0 26px 50px -30px rgba(11,21,48,.55)}
.it-carte[hidden]{display:none}
.it-carte[data-statut="disponible"]{border-color:rgba(34,197,94,.45);background:linear-gradient(180deg,#F3FCF6 0,#fff 60%)}
.it-tete{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:4px;align-items:center}
.it-logo,.it-picto{grid-row:1/3;width:44px;height:44px;border-radius:12px;object-fit:contain;background:var(--white)}
.it-picto{display:grid;place-items:center;background:var(--blue-soft);color:var(--blue)}
.it-picto svg{width:24px;height:24px}
.it-tete h3{margin:0;font-size:17px;line-height:1.25;letter-spacing:-.01em}
.it-carte p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.it-statut{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.02em;padding:3px 10px;border-radius:999px;white-space:nowrap}
.it-statut::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.it-disponible{background:#E5F6EC;color:#167A3E}
.it-bientot{background:var(--blue-soft);color:var(--blue)}
.it-etude{background:var(--mist);color:var(--muted)}
.it-vide{margin:0;color:var(--muted)}
.it-legende{display:flex;flex-wrap:wrap;gap:10px 28px;padding:18px 20px;border-radius:18px;background:var(--mist)}
.it-legende p{margin:0;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.it-comment h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;margin:0 0 18px}
.it-etapes{list-style:none;counter-reset:e;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.it-etapes li{counter-increment:e;position:relative;padding:22px 22px 22px 22px;border-radius:22px;background:var(--navy);color:#fff;display:grid;gap:8px}
.it-etapes li::before{content:counter(e);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:var(--blue);color:#fff}
.it-etapes b{font-size:17px}
.it-etapes span{color:rgba(255,255,255,.78);font-size:15px;line-height:1.55}
.it-note{margin:16px 0 0;font-size:13px;color:var(--muted);max-width:90ch}

@media (prefers-reduced-motion:reduce){.it-carte{transition:none}.it-carte:hover{transform:none}}
/* Type de connexion : connecteur natif ou compatibilité via webhooks (jamais présentée comme une application native) */
.it-type{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:8px;border:1px solid var(--line);color:var(--navy);background:var(--white)}
.it-type-natif::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--navy)}
.it-type-webhooks{border-style:dashed;color:var(--muted)}
.it-type-webhooks::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid currentColor;box-sizing:border-box}
.it-carte-note{font-size:13px!important;color:var(--navy)!important;background:var(--mist);border-radius:10px;padding:6px 10px}
.it-legende .it-type{margin-top:0}
/* Téléphone : marges, tailles et filtres resserrés pour rester lisibles à 390 px comme à 360 px */
@media (max-width:640px){
  .it{gap:32px}
  .it-filtres{position:static;padding:10px;gap:8px;border-radius:14px}
  .it-groupe{gap:6px;width:100%}
  .it-groupe button{font-size:13px;padding:7px 12px}
  .it-entete h2{font-size:22px}
  .it-entete p{font-size:15px}
  .it-grille{gap:12px}
  .it-carte{padding:18px;gap:10px;border-radius:18px}
  .it-tete{grid-template-columns:40px 1fr;column-gap:12px}
  .it-logo,.it-picto{width:40px;height:40px;border-radius:10px}
  .it-tete h3{font-size:16px}
  .it-carte p{font-size:14.5px}
  .it-legende{padding:14px;gap:10px}
  .it-legende p{font-size:13.5px;gap:8px}
  .it-etapes li{padding:18px;border-radius:18px}
}
@media (max-width:380px){
  .it-carte{padding:16px}
  .it-statut{font-size:11.5px;padding:3px 8px}
  .it-groupe button{font-size:12.5px;padding:6px 10px}
}