/* RU Outils IA : façade « Outils pour créateurs » (maquette approuvée par Dany le 2026-10-05).
   Portée : #ru-outils seulement. Couleurs : jetons RU Design (charte bleue), avec repli.
   Standard mobile RU : cibles de 44 px au toucher, une colonne, onglets qui glissent
   dans leur rangée, recherche pleine largeur, aucun défilement de côté. */
#ru-outils{
  --ou-accent:var(--ru-accent,#1d5c8f);
  --ou-accent-doux:var(--ru-accent-doux,#eef3f8);
  --ou-accent-filet:var(--ru-accent-filet,rgba(29,92,143,.35));
  --ou-sur-accent:var(--ru-sur-accent,#fff);
  --ou-texte:var(--ru-texte,#0e2438);
  --ou-texte-2:var(--ru-texte-2,#3b4a5a);
  --ou-discret:var(--ru-discret,#6b7280);
  --ou-bord:var(--ru-bord,rgba(14,36,56,.09));
  --ou-fond:var(--ru-fond,#fff);
  --ou-surface:var(--ru-surface,#f7f8fa);
  display:block;width:100%;max-width:100%;min-width:0;
  color:var(--ou-texte);
  font:14px/1.5 var(--ru-police,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif);
  -webkit-font-smoothing:antialiased;
}
#ru-outils,#ru-outils *,#ru-outils *::before,#ru-outils *::after{box-sizing:border-box}
#ru-outils [hidden]{display:none}
#ru-outils button,#ru-outils input,#ru-outils select{font:inherit;color:inherit;margin:0}
#ru-outils svg{display:block;flex:none}
#ru-outils .ou-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#ru-hub-section-outils > .sh{display:none}

/* En-tête léger : logo RU, titre, sous-titre ; recherche et Grille / Liste à droite. */
#ru-outils .ou-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 18px}
#ru-outils .ou-marque{display:flex;align-items:center;gap:12px;min-width:0}
#ru-outils .ou-logo{display:block;width:auto;height:32px;max-width:96px;object-fit:contain;flex:none;margin:0}
#ru-outils .ou-tete-tx{min-width:0}
#ru-outils .ou-titre{margin:0;padding:0;font-family:inherit;font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--ou-texte);text-transform:none;border:0;background:none}
#ru-outils .ou-sous-titre{margin:2px 0 0;padding:0;font-size:13px;line-height:1.4;color:var(--ou-discret)}
#ru-outils .ou-barre{display:flex;align-items:center;gap:8px;min-width:0}
#ru-outils .ou-recherche{display:flex;align-items:center;gap:8px;height:38px;min-width:300px;padding:0 12px;margin:0;background:var(--ou-fond);border:1px solid var(--ou-bord);border-radius:10px;cursor:text;font-weight:400}
#ru-outils .ou-recherche:focus-within{border-color:var(--ou-accent-filet);box-shadow:0 0 0 3px var(--ou-accent-doux)}
#ru-outils .ou-recherche svg{width:16px;height:16px;color:var(--ou-discret)}
#ru-outils .ou-recherche input{flex:1;min-width:0;width:100%;height:100%;padding:0;border:0;outline:0;box-shadow:none;background:transparent;font-size:14px;color:var(--ou-texte);-webkit-appearance:none;appearance:none}
#ru-outils .ou-recherche input::-webkit-search-cancel-button{cursor:pointer}

/* Petit menu Trier (fournisseur, ordre). */
#ru-outils .ou-menu{position:relative}
#ru-outils .ou-menu summary{list-style:none;display:flex;align-items:center;gap:6px;height:38px;padding:0 10px;background:var(--ou-fond);border:1px solid var(--ou-bord);border-radius:9px;color:var(--ou-texte-2);font-size:12.5px;cursor:pointer;user-select:none}
#ru-outils .ou-menu summary::-webkit-details-marker{display:none}
#ru-outils .ou-menu summary svg{width:15px;height:15px}
#ru-outils .ou-menu[open] summary,#ru-outils .ou-menu summary:hover{border-color:var(--ou-accent-filet);color:var(--ou-accent)}
#ru-outils .ou-menu-corps{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:240px;display:grid;gap:12px;padding:14px;background:var(--ou-fond);border:1px solid var(--ou-bord);border-radius:12px;box-shadow:0 12px 32px rgba(14,36,56,.12)}
#ru-outils .ou-menu-champ{display:grid;gap:6px;margin:0;font-size:12px;font-weight:600;color:var(--ou-texte-2)}
#ru-outils .ou-menu-champ select{width:100%;height:36px;padding:0 10px;border:1px solid var(--ou-bord);border-radius:8px;background:var(--ou-fond);font-size:13px;font-weight:400;color:var(--ou-texte);box-shadow:none}

/* Bascule Grille / Liste. */
#ru-outils .ou-vue{display:flex;padding:3px;background:var(--ou-fond);border:1px solid var(--ou-bord);border-radius:9px}
#ru-outils .ou-vue button{height:30px;padding:0 10px;border:0;border-radius:6px;background:transparent;font-size:12.5px;color:var(--ou-texte-2);cursor:pointer;box-shadow:none;line-height:1}
#ru-outils .ou-vue button:hover{color:var(--ou-accent)}
#ru-outils .ou-vue button.on{background:var(--ou-accent-doux);color:var(--ou-accent);font-weight:600}

/* Onglets de catégories : bande sobre, compte discret, glisse de côté dans sa rangée. */
#ru-outils .ou-onglets{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;padding:4px;margin:0 0 20px;background:var(--ou-fond);border:1px solid var(--ou-bord);border-radius:12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
#ru-outils .ou-onglets::-webkit-scrollbar{display:none}
#ru-outils .ou-onglet{flex:none;display:flex;align-items:center;gap:6px;padding:7px 12px;border:0;border-radius:8px;background:transparent;font-size:13px;font-weight:500;line-height:1.3;color:var(--ou-texte-2);white-space:nowrap;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:0}
#ru-outils .ou-onglet:hover{background:var(--ou-surface);color:var(--ou-texte)}
#ru-outils .ou-onglet.on{background:var(--ou-accent);color:var(--ou-sur-accent)}
#ru-outils .ou-onglet-n{font-size:11px;opacity:.7}
#ru-outils.ou-cherche .ou-onglet.on{background:transparent;color:var(--ou-texte-2)}
#ru-outils .ou-onglet:focus-visible,#ru-outils .ou-vue button:focus-visible,#ru-outils .ou-menu summary:focus-visible,#ru-outils .ou-carte:focus-visible{outline:2px solid var(--ou-accent);outline-offset:2px}

/* Section d'une catégorie. */
#ru-outils .ou-panneau + .ou-panneau{margin-top:24px}
#ru-outils .ou-sec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 10px}
#ru-outils .ou-sec-titre{margin:0;padding:0;font-family:inherit;font-size:15px;line-height:1.3;font-weight:700;color:var(--ou-texte);text-transform:none;letter-spacing:0;border:0;background:none}
#ru-outils .ou-sec-n{font-size:12px;color:var(--ou-discret);white-space:nowrap}

/* Cartes compactes : toute la carte est le lien. */
#ru-outils .ou-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
#ru-outils .ou-carte{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:12px 14px;background:var(--ou-fond);border:1px solid var(--ou-bord);border-radius:12px;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
#ru-outils a.ou-carte:hover{border-color:var(--ou-accent-filet);box-shadow:0 4px 14px rgba(14,36,56,.06);color:inherit}
#ru-outils .ou-carte[hidden]{display:none}
#ru-outils .ou-logo-outil{width:36px;height:36px;flex:none;display:grid;place-items:center;overflow:hidden;border:1px solid var(--ou-bord);border-radius:9px;background:var(--ou-fond)}
#ru-outils .ou-logo-outil img{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:contain;padding:4px;border-radius:0}
#ru-outils .ou-logo-outil--initiale{font-size:14px;font-weight:700;line-height:1;color:var(--ou-accent);background:var(--ou-accent-doux);border-color:var(--ou-accent-filet)}
#ru-outils .ou-corps{display:block;flex:1;min-width:0}
#ru-outils .ou-haut{display:flex;align-items:baseline;gap:6px;min-width:0}
#ru-outils .ou-nom{font-size:14px;font-weight:600;line-height:1.35;color:var(--ou-texte);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ru-outils .ou-fournisseur{font-size:12px;color:var(--ou-discret);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#ru-outils .ou-desc{display:-webkit-box;margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--ou-texte-2);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#ru-outils .ou-ext{flex:none;margin-top:2px;color:var(--ru-discret-2,#9aa3ad)}
#ru-outils .ou-ext svg{width:15px;height:15px}
#ru-outils a.ou-carte:hover .ou-ext{color:var(--ou-accent)}

/* Vue Liste. */
#ru-outils.ou-liste .ou-grille{grid-template-columns:1fr;gap:0;overflow:hidden;background:var(--ou-fond);border:1px solid var(--ou-bord);border-radius:12px}
#ru-outils.ou-liste .ou-carte{border-width:0 0 1px;border-radius:0;padding:10px 14px}
#ru-outils.ou-liste .ou-carte:last-child{border-bottom:0}
#ru-outils.ou-liste a.ou-carte:hover{box-shadow:none;background:var(--ou-surface)}

#ru-outils .ou-vide{margin:8px 2px 0;padding:16px;font-size:13px;color:var(--ou-discret);background:var(--ou-fond);border:1px dashed var(--ou-bord);border-radius:12px;text-align:center}

/* Hubs et page Outils : la boîte blanche (comme avant), avec de l'air ; aperçu dans l'admin : sans marge. */
#ru-outils.ru-outils-hub{padding:24px;background:var(--ou-fond,#fff);border:1px solid var(--ou-bord,rgba(14,36,56,.09));border-radius:16px;box-shadow:0 1px 3px rgba(14,36,56,.04)}
#ru-outils.ru-outils-admin{padding:4px 0 0}

/* Téléphone (standard mobile RU) : une colonne, recherche pleine largeur, cibles de 44 px. */
@media (max-width:640px){
  #ru-outils .ou-tete{align-items:stretch;gap:12px}
  #ru-outils .ou-marque{width:100%}
  #ru-outils .ou-logo{height:28px;max-width:72px}
  #ru-outils .ou-titre{font-size:20px}
  #ru-outils .ou-barre{width:100%;flex-wrap:wrap}
  #ru-outils .ou-recherche{min-width:0;width:100%;flex:1 1 100%;height:44px}
  #ru-outils .ou-recherche input{font-size:16px}
  #ru-outils .ou-menu{flex:1 1 0}
  #ru-outils .ou-menu summary{height:44px;justify-content:center}
  #ru-outils .ou-menu-corps{left:0;right:auto;width:min(280px,calc(100vw - 32px))}
  #ru-outils .ou-menu-champ select{height:44px;font-size:16px}
  #ru-outils.ru-outils-hub{padding:16px}
  #ru-outils .ou-vue{flex:1 1 0;padding:0;gap:4px;border:0;background:transparent}
  #ru-outils .ou-vue button{flex:1;height:44px;border:1px solid var(--ou-bord);border-radius:9px;background:var(--ou-fond)}
  #ru-outils .ou-vue button.on{border-color:var(--ou-accent-filet)}
  #ru-outils .ou-onglet{min-height:44px;padding:0 14px}
  #ru-outils .ou-grille{grid-template-columns:1fr}
  #ru-outils .ou-carte{min-height:56px}
}
@media (pointer:coarse){
  #ru-outils .ou-onglet{min-height:44px}
  #ru-outils .ou-recherche,#ru-outils .ou-menu summary{min-height:44px}
  #ru-outils .ou-recherche input,#ru-outils .ou-menu-champ select{font-size:16px}
  #ru-outils .ou-vue{padding:2px}
  #ru-outils .ou-vue button{min-height:40px}
  #ru-outils .ou-carte,#ru-outils .ou-onglet,#ru-outils .ou-vue button,#ru-outils .ou-menu summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
}
@media (prefers-reduced-motion:reduce){
  #ru-outils .ou-carte{transition:none}
}