/* Section « intégrations » + rangée de logos de Créations (2026-10-06, agents-integrations/construction.md).
   Feuille externe chargée dans le body (sous la ligne de flottaison), hors budget « home CSS inline ».
   Passe finale (revues design + juridique) : logos en encre pleine au repos (ancien : gris --ink-3,
   recoloration refusée par plusieurs guides de marque), couleur de marque (--c) au survol ; marques
   noires servies avec --c = --ink (blanc en thème sombre). Grille plate des intégrations branchées,
   ligne « Arrivent ensuite » en noms seuls, mention de marques. Anciennes règles par catégorie
   (.int-cats, .int-cat, .int-cat-h) et badge .int-soon retirées avec leur markup.
   Final v2 (décision 1 du fondateur) : les 28 en grille par catégorie (.int-cats/.int-cat/.int-cat-h
   rétablies, titre à gauche dès 1024 px) ; .int-next n'a plus de markup (gardée pour l'archive v1).
   Repos = encre pleine et non gris clair : plusieurs chartes refusent un logo recoloré hors mono. */
.int-ic{display:block;flex:none;width:24px;height:24px;background:var(--ink);
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;
  transition:background-color var(--dur-micro,160ms) ease,transform 200ms ease}
.int-gen{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Rangée de Créations (remplace la bande texte « Où Glamzn agit », même place dans la grille). */
.int-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-5);list-style:none;margin:0;padding:var(--s-2) 0 0}
.int-strip li{display:flex}
.int-strip li:hover .int-ic{background:var(--c);transform:translateY(-1px)}
.int-strip-name{font-size:var(--t-5);font-weight:600;line-height:24px;color:var(--ink)}
.int-strip-more{margin-left:auto}
.int-strip-more a{font-size:var(--t-5);font-weight:600;color:var(--brand-ink);text-underline-offset:3px}
@media (max-width:599px){.int-strip{gap:var(--s-4)}.int-strip-more{margin-left:0;flex-basis:100%}}

/* ANCIEN bloc « Section » (7 catégories en grandes cartes), commenté le 2026-10-06 (integrations-compact,
   demande du fondateur : plus compact, plus pro). Commentaires internes réécrits (* *) pour rester valides.
(* Section *)
.int-head{display:grid;gap:var(--s-3);max-width:62ch;margin-bottom:var(--stack)}
.int-cats{display:grid;gap:var(--s-5)}
.int-cat-h{margin:0 0 var(--s-2);font-size:var(--t-5);font-weight:600;line-height:1.4;color:var(--ink-2)}
.int-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--s-2);list-style:none;margin:0;padding:0}
.int-it{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:var(--s-3);row-gap:2px;align-items:center;
  align-content:center;padding:var(--s-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);
  transition:border-color var(--dur-micro,160ms) ease,transform 200ms ease}
.int-it b{min-width:0;font-weight:600;font-size:var(--t-5);line-height:1.3;color:var(--ink)}
.int-d{display:none;grid-column:2;font-size:var(--t-5);line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.int-it:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.int-it:hover .int-ic{background:var(--c)}
.int-next{margin-top:var(--s-5);font-size:var(--t-5);line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.int-next .g-meta{margin-right:var(--s-2)}
.int-tm{margin-top:var(--s-4);font-size:12px;line-height:1.5;color:var(--ink-2)}
(* Final v2 : 600-1199 px, nom + icône sans phrase (3-4 col.) ; 1200 px et plus, catégories empaquetées
   sur 6 colonnes communes (--n = nb de colonnes de la catégorie, posé dans la vue ; dense : Productivité
   remonte à côté de Sites et CMS), phrase sous le nom. Ancien : phrase dès 600 px, titre à gauche à 1024. *)
@media (min-width:600px){
  .int-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s-3)}
  .int-it b{font-size:var(--t-4)}
}
(* Finitions 2026-10-06 : l'empaquetage dense sur 6 colonnes laissait 2 cases vides sous Réseaux sociaux
   (10 sur 6) et posait Productivité à côté de Sites et CMS. Ancien bloc ≥1200 px, gardé en commentaire :
   .int-cats{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row dense;column-gap:var(--s-3);row-gap:var(--s-6,var(--s-5))}
   .int-cat{grid-column:span var(--n,6);display:flex;flex-direction:column}
   .int-cat .int-grid{flex:1;grid-template-columns:repeat(var(--n,6),minmax(0,1fr))}
   Désormais une bande par catégorie (titre à gauche, filet au-dessus) et une grille commune de 5 colonnes :
   10 réseaux = 2 rangées pleines, mêmes largeurs de cartes partout, une catégorie ne partage jamais sa rangée. *)
@media (min-width:1200px){
  .int-cats{grid-template-columns:minmax(0,1fr);row-gap:0}
  .int-cat{display:grid;grid-template-columns:180px minmax(0,1fr);column-gap:var(--s-5);align-items:start;
    padding-block:var(--s-5);border-top:1px solid var(--line)}
  .int-cat:last-child{border-bottom:1px solid var(--line)}
  .int-cat-h{margin:0;padding-top:var(--s-3)}
  .int-cat .int-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .int-it{align-items:center;align-content:start;padding:var(--s-4)}
  .int-d{display:block;grid-column:1/-1;margin-top:var(--s-2)}
}
*/
/* Section compacte (2026-10-06, integrations-compact/final.md) : 4 groupes, tuiles petites logo + nom,
   grille régulière. Phrase de l'outil en infobulle (survol, focus clavier, tap mobile), CSS seul.
   Jusqu’à 1099 px : tuiles sur 2 colonnes par groupe (groupes en 2 x 2 dès 760 px).
   1100 px et plus : 5 colonnes communes, Publier sur 2 colonnes, chaque autre groupe sur 1 colonne. */
.int-head{display:grid;gap:var(--s-3);max-width:62ch;margin-bottom:var(--s-6)}
.int-cats{display:grid;gap:var(--s-5)}
.int-cat{min-width:0}
.int-cat-h{display:flex;align-items:baseline;gap:var(--s-2);margin:0 0 var(--s-3);padding-bottom:var(--s-2);
  border-bottom:1px solid var(--line);font-size:var(--t-5);font-weight:600;line-height:1.4;color:var(--ink)}
.int-cat-n{font-size:12px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.int-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:6px;list-style:none;margin:0;padding:0}
.int-it{position:relative;display:flex;align-items:center;gap:10px;min-width:0;min-height:42px;padding:5px 10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);cursor:default;
  transition:border-color var(--dur-micro,160ms) ease}
.int-it .int-ic,.int-it .int-gen{width:20px;height:20px}
.int-it b{min-width:0;font-size:var(--t-5);font-weight:600;line-height:1.25;color:var(--ink)}
.int-it:hover,.int-it:focus{border-color:var(--line-strong)}
.int-it:focus{outline:none}
.int-it:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.int-it:hover .int-ic,.int-it:focus .int-ic{background:var(--c)}
/* Infobulle : dans le DOM en permanence (lue par les lecteurs d'écran), visible au survol ou au focus.
   2 colonnes : 17rem au plus, jamais plus large que deux tuiles ; tuile de droite = bulle alignée à droite. */
.int-d{position:absolute;z-index:5;left:-1px;bottom:calc(100% + 6px);width:min(17rem,calc(200% + 8px));
  padding:8px 10px;border-radius:var(--r-2);background:var(--ink);color:var(--surface);
  font-size:12.5px;font-weight:400;line-height:1.45;text-wrap:pretty;box-shadow:0 8px 24px -10px rgba(11,17,14,.35);
  opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity 140ms ease,transform 140ms ease}
.int-it:nth-child(2n) .int-d{left:auto;right:-1px}
.int-it:hover .int-d,.int-it:focus .int-d{opacity:1;transform:none;pointer-events:auto}
/* 2026-10-07 (integrations-40, demande du fondateur) : 40 outils en 4 groupes de 10. Tous les groupes en
   2 colonnes sous 1100 px (5 rangées pleines), bandes de 5 colonnes x 2 rangées dès 1100 px (titre à gauche).
   Anciens blocs (28 outils : Publier et Équipe sur 3 colonnes en mobile, 5 colonnes communes en desktop), gardés :
(* 375-759 px : noms courts sur 3 colonnes (Publier 4 rangées au lieu de 5, Équipe 2 au lieu de 3) ;
   Site et référencement et Publicité et ventes restent sur 2 (noms Google et « Ads » trop longs). Bulle : colonne 1 à
   gauche, colonne 2 centrée, colonne 3 à droite, 17rem au plus (jamais hors de la grille). *)
@media (min-width:375px) and (max-width:759px){
  .int-cat:is(.int-cat--publish,.int-cat--team) .int-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .int-cat:is(.int-cat--publish,.int-cat--team) .int-it{gap:8px;padding-inline:8px}
  .int-cat:is(.int-cat--publish,.int-cat--team) .int-it .int-d{left:-1px;right:auto;width:17rem}
  .int-cat:is(.int-cat--publish,.int-cat--team) .int-it:nth-child(3n+2) .int-d{left:calc(50% - 8.5rem)}
  .int-cat:is(.int-cat--publish,.int-cat--team) .int-it:nth-child(3n) .int-d{left:auto;right:-1px}
}
@media (min-width:1100px){
  .int-cats{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--s-4)}
  .int-cat--publish{grid-column:span 2}
  .int-cat:not(.int-cat--publish) .int-grid{grid-template-columns:minmax(0,1fr)}
  .int-d,.int-it:nth-child(2n) .int-d{left:-1px;right:-1px;width:auto}
}
*/
@media (min-width:760px){
  .int-cats{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-5);row-gap:var(--s-6)}
}
@media (min-width:1100px){
  .int-cats{grid-template-columns:minmax(0,1fr);row-gap:0}
  .int-cat{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:var(--s-5);align-items:start;
    padding-block:var(--s-4);border-top:1px solid var(--line)}
  .int-cat:last-child{border-bottom:1px solid var(--line)}
  .int-cat-h{margin:0;padding:12px 0 0;border-bottom:0}
  .int-cat .int-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .int-cat .int-it .int-d{left:-1px;right:auto;width:17rem}
  .int-cat .int-it:nth-child(5n) .int-d,.int-cat .int-it:nth-child(5n+4) .int-d{left:auto;right:-1px}
}
.int-tm{margin-top:var(--s-5);font-size:12px;line-height:1.5;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.int-d{transition:none;transform:none}}
/* Apparition au scroll, CSS seul : même porte que agents.css (html.motion, reduced-motion = statique). */
@keyframes int-in{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  .motion .int-head,.motion .int-cat{animation:int-in linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}}