/* ==========================================================================
   ai-panel.css — Atelier IA partagé (Dokitscript)
   Source unique de style pour le drawer IA (SPEC-AI-PANEL.md §5) et les
   composants de carte partagés (§7 : bandeau quota, barre d'atelier, pills).
   Préfixe de classe EXCLUSIF : aip- (zéro collision avec l'existant).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — repli autonome (SPEC §1 / §2 Autonomie)
   history.html déclare aujourd'hui des tokens de MÊME NOM que DESIGN.md mais
   avec des valeurs qui DIVERGENT (--text:#5b21b6 au lieu de #0f172a,
   --border:#e9e6ff au lieu de #e2e8f0, --surface:#fff au lieu de #f8fafc,
   --radius:10px au lieu de 12px…). Un simple var(--text, #0f172a) hériterait
   donc SILENCIEUSEMENT de la valeur fautive de la page hôte : ce ne serait
   pas de l'autonomie. Pour les 8 tokens ci-dessous où le repli host==canon
   est vérifié vrai aujourd'hui (primary*, radius-sm/lg, text-light,
   border-2), var(--nom, canon) est sans risque. Pour les tokens qui
   divergent ou sont absents du host, la valeur canonique est posée en dur.
   -------------------------------------------------------------------------- */
:root {
  /* Marque & interactif — host==canon vérifié, repli var() sûr */
  --aip-primary: var(--primary, #7c3aed);
  --aip-primary-hover: var(--primary-hover, #6d28d9);
  --aip-primary-light: var(--primary-light, #ede9fe);
  --aip-primary-50: var(--primary-50, #f5f3ff);

  /* Neutres — host diverge (surface/border/text) ou absent (bg) : dur */
  --aip-bg: #ffffff;
  --aip-surface: #f8fafc;
  --aip-surface-2: #f1f5f9;
  --aip-border: #e2e8f0;
  --aip-border-2: var(--border-2, #cbd5e1);
  --aip-text: #0f172a;
  --aip-text-muted: #64748b;
  --aip-text-light: var(--text-light, #94a3b8);

  /* États — absents du <style> de history.html : repli sûr */
  --aip-success: var(--success, #10b981);
  --aip-success-bg: rgba(16, 185, 129, 0.12);
  --aip-error: var(--error, #ef4444);
  --aip-error-bg: #fef2f2;
  --aip-error-border: #fecaca;
  --aip-warn: var(--warn, #f59e0b);

  /* Désactivé — unifié le 27/08 (les boutons de ce fichier divergeaient .5/.6) */
  --aip-disabled-opacity: 0.55;

  /* Ombres — teintées navy (DESIGN.md §2), jamais gris neutre */
  --aip-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(50, 50, 93, 0.06));
  --aip-shadow: var(--shadow, 0 4px 12px -2px rgba(50, 50, 93, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.05));
  --aip-shadow-md: var(--shadow-md, 0 12px 24px -6px rgba(50, 50, 93, 0.14), 0 4px 8px -4px rgba(0, 0, 0, 0.06));
  --aip-shadow-lg: var(--shadow-lg, 0 30px 45px -30px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.10));

  /* Radius — -sm/-lg matchent le host, --radius (12px) diverge (host:10px) */
  --aip-radius-sm: var(--radius-sm, 8px);
  --aip-radius: 12px;
  --aip-radius-lg: var(--radius-lg, 16px);

  /* Motion (§1 / §5bis DESIGN.md) */
  --aip-ease: cubic-bezier(.22, 1, .36, 1);
  --aip-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

/* --------------------------------------------------------------------------
   2. Scrim (fond assombri derrière le drawer)
   Teinte dérivée de --aip-text (slate-900, 15 23 42) plutôt qu'un noir
   générique : reste dans la famille de couleur de la marque même pour un
   voile, cohérent avec l'interdiction des ombres grises neutres.
   -------------------------------------------------------------------------- */
.aip-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-ui, 200ms) var(--aip-ease);
}
/* aip-open = classe réelle posée/retirée par ai-panel.js (confirmé après coup :
   la spec §5 ne nommait que les conteneurs, pas les classes d'état). is-open
   conservé en repli inoffensif au cas où. */
.aip-scrim.is-open,
.aip-scrim.aip-open { opacity: 1; pointer-events: auto; }
.aip-scrim[hidden] { display: none; }

/* --------------------------------------------------------------------------
   3. Drawer — coquille
   Desktop : panneau latéral droit fixe (translateX). Le sens "droit" est
   posé en dur (pas inset-inline-end) car l'entrée d'animation du §5 de la
   spec est UNE SEULE valeur non conditionnelle : "translateX(100%) → 0".
   Une position logique inset-inline-end se serait inversée en RTL (arabe),
   ce qui aurait exigé translateX(-100%) → 0 côté RTL — la spec ne prévoit
   pas cette bifurcation, donc le panneau reste physiquement à droite dans
   les 12 langues. Le RTL est géré à l'intérieur (paddings/marges logiques).
   -------------------------------------------------------------------------- */
.aip {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(480px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--aip-bg);
  box-shadow: var(--aip-shadow-lg);
  z-index: 1001;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--aip-text);
  transform: translateX(100%);
  transition: transform var(--dur-enter, 550ms) var(--aip-ease);
  overflow: hidden;
}
.aip[hidden] { display: none; }
.aip.is-open,
.aip.aip-open,
.aip[data-open="true"] { transform: translateX(0); }
.aip, .aip *, .aip *::before, .aip *::after { box-sizing: border-box; }

@media (max-width: 640px) {
  /* Feuille plein écran mobile — entrée translateY (§5) */
  .aip {
    right: 0;
    left: 0;
    width: 100%;
    border-radius: 0;
    transform: translateY(100%);
  }
  .aip.is-open,
  .aip.aip-open,
  .aip[data-open="true"] { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   4. En-tête
   -------------------------------------------------------------------------- */
.aip-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4, 16px);
  padding: var(--s-6, 24px) var(--s-6, 24px) var(--s-4, 16px);
  border-bottom: 1px solid var(--aip-border);
}
.aip-head-txt { min-width: 0; }
.aip-title {
  font-size: var(--t-section, 20px);
  font-weight: 700; /* jamais 800, jamais 300 — SPEC §1 */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--aip-text);
}
/* Métadonnées en ligne : plateforme (forte) · date · durée, séparées par des
   points CSS (.aip-dot) — refonte 05/09, maquette « Atelier IA ». */
.aip-sub {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  margin-top: var(--s-1, 4px);
  font-size: var(--t-ui, 13px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--aip-text-muted);
  white-space: nowrap;
  overflow: hidden;
}
.aip-sub strong { font-weight: 600; color: var(--aip-text); }
.aip-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--aip-border-2);
  flex-shrink: 0;
}
.aip-close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--aip-radius-sm);
  color: var(--aip-text-muted);
  font-size: var(--t-section, 20px);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-ui, 200ms), color var(--dur-ui, 200ms), transform var(--dur-press, 80ms);
}
.aip-close:hover { background: var(--aip-surface); color: var(--aip-text); }
.aip-close:active { transform: scale(var(--press-scale, 0.97)); }

/* --------------------------------------------------------------------------
   5. Bandeau quota (§7 — "en tête de page, permanent" ET en tête de drawer)
   Un seul composant sert les deux emplacements : `renderQuotaBar(el)` injecte
   probablement le même markup que le `data-aip-quota` du drawer. Le traiter
   comme UNE source (DRY, §0 de la spec) plutôt que dupliquer deux styles.
   -------------------------------------------------------------------------- */
/* Refonte 05/09 (maquette « Atelier IA ») : le quota du drawer n'est plus un
   bloc lavande, c'est UNE ligne clé-valeur « utilisées / cap » + une barre de
   4 px — même composant que la jauge du menu compte (user-menu.css). Le DOM
   est reconstruit par paintQuota() dans ai-panel.js. */
.aip-quota {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2, 8px);
  padding: 0 var(--s-6, 24px) var(--s-4, 16px);
  box-sizing: border-box;
}
.aip-quota[hidden] { display: none; }
.aip-quota-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3, 12px);
}
.aip-quota-label { font-size: var(--t-ui, 13px); font-weight: 500; color: var(--aip-text-muted); }
.aip-quota-val {
  font-size: var(--t-ui, 13px);
  font-weight: 600;
  color: var(--aip-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  direction: ltr; /* bidi : « 212 / 250 » ne doit jamais se lire « 250 / 212 » en RTL */
}
.aip-quota-val .muted { font-weight: 500; color: var(--aip-text-light); }
.aip-quota-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--aip-surface-2);
  overflow: hidden;
}
.aip-quota-bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--aip-primary);
  transition: width var(--dur-enter, 550ms) var(--aip-ease);
}
.aip-quota-bar > span.warn { background: var(--aip-warn); }
.aip-quota-bar > span.danger { background: var(--aip-error); }
.aip-quota-foot { font-size: var(--t-meta, 12px); color: var(--aip-text-light); }
/* État épuisé (remaining<=0 && credits<=0) — §7 : la ligne passe en --error,
   la barre est pleine et rouge (classe .danger posée par paintQuota). */
.aip-quota.is-empty .aip-quota-label,
.aip-quota.aip-quota-empty .aip-quota-label { color: var(--aip-error); font-weight: 600; }

/* --------------------------------------------------------------------------
   5bis. Bandeau quota — variante PAGE (§7), classes réelles ai-panel.js.
   Composant distinct de .aip-quota (celui-ci n'a pas de marge de drawer,
   il vit dans le conteneur passé à renderQuotaBar(el)).
   -------------------------------------------------------------------------- */
.aip-quotabar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4, 16px);
  flex-wrap: wrap;
  padding: var(--pad-card, 16px 20px);
  background: var(--aip-primary-50);
  border: 1px solid var(--aip-border);
  border-radius: var(--aip-radius);
  box-sizing: border-box;
  font-size: var(--t-body, 15px);
  color: var(--aip-text-muted);
}
.aip-quotabar-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--aip-primary);
  display: inline-flex;
}
.aip-quotabar-icon svg { display: block; width: 100%; height: 100%; }
.aip-quotabar-text { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.aip-quotabar-text strong,
.aip-quotabar-text b { font-weight: 700; color: var(--aip-primary); }
.aip-quotabar-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2, 8px);
  min-height: 44px;
  padding: 0 var(--s-4, 16px);
  font-size: var(--t-ui, 13px);
  font-weight: 600;
  color: var(--aip-primary);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-ui, 200ms), transform var(--dur-press, 80ms);
}
.aip-quotabar-cta:hover { color: var(--aip-primary-hover); text-decoration: underline; }
.aip-quotabar-cta:active { transform: scale(var(--press-scale, 0.97)); }
/* Quota ET crédits épuisés — §7 : bordure #fecaca, fond #fef2f2 (valeurs
   explicites de la spec pour cet état, aussi documentées DESIGN.md §2
   "--error : fond #fef2f2, bordure #fecaca") */
.aip-quotabar-empty {
  background: var(--aip-error-bg);
  border-color: var(--aip-error-border);
}
.aip-quotabar-empty .aip-quotabar-icon { color: var(--aip-error); }
.aip-quotabar-empty .aip-quotabar-cta {
  color: #fff;
  background: var(--aip-error);
  border-radius: var(--aip-radius-sm);
  padding: 0 var(--s-4, 16px);
}
/* Assombrissement au hover via filter, pas un nouveau hex hors-tokens */
.aip-quotabar-empty .aip-quotabar-cta:hover { filter: brightness(0.9); text-decoration: none; }

@media (max-width: 600px) {
  .aip-quotabar { flex-direction: column; align-items: flex-start; }
  .aip-quotabar-cta { align-self: stretch; justify-content: center; }
}

/* --------------------------------------------------------------------------
   6. Corps du drawer — groupes de fonctions
   -------------------------------------------------------------------------- */
.aip-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--s-5, 20px) var(--s-6, 24px) var(--s-6, 24px);
  border-top: 1px solid var(--aip-border);
  display: flex;
  flex-direction: column;
  gap: var(--gap-zone, 24px);
}
.aip-group { display: flex; flex-direction: column; gap: var(--s-3, 12px); }
.aip-group-title {
  font-size: var(--t-meta, 12px);
  font-weight: 700;
  letter-spacing: 1px; /* +1px — SPEC §1 */
  text-transform: uppercase; /* no-op en ar/ja/ko/zh/hi — attendu, pas un bug */
  color: var(--aip-primary);
}
.aip-grid {
  display: grid;
  /* 2 colonnes : le drawer (480px) est plus étroit que l'ancien modal
     (700px) et chaque bouton porte un libellé ET une description — 3
     colonnes n'auraient laissé aucune place au texte. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3, 12px);
}
/* Groupe à effectif IMPAIR (COMPRENDRE : 3, VERIFIER : 3 — la ligne
   "question" n'entre pas dans cette grille : buildGroupSection() dans
   ai-panel.js la filtre via `!f.isQuestion` et la rend à part, en sibling,
   dans .aip-ask). La 1re carte prend alors toute la largeur au lieu de
   laisser un vide à droite de la 3e. `:first-child:nth-last-child(odd)` ne
   sélectionne le premier enfant QUE si le total d'enfants est impair (sa
   position depuis la fin vaut alors le total, donc un nombre impair) :
   zéro JS nécessaire, et le groupe PUBLIER (4, pair) n'est pas affecté.
   Effet attendu et vérifié par construction : keypoints/chapters se
   retrouvent sur la même rangée, la grille égalise leur hauteur, et le
   décalage du badge PRO de chapters disparaît mécaniquement. */
.aip-grid > .aip-fn:first-child:nth-last-child(odd) {
  grid-column: 1 / -1;
}
@media (max-width: 380px) {
  /* Micro-seuil justifié : sous 380px, 2 colonnes compressent la
     description sur une police déjà petite (12px) au point de la rendre
     illisible dans certaines langues (allemand, mots composés longs). */
  .aip-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   7. Bouton fonction (.aip-fn)
   -------------------------------------------------------------------------- */
/* Refonte 05/09 (maquette « Atelier IA ») : carte blanche, bordure --border,
   radius 8 ; survol = bordure --border-2 + ombre navy, JAMAIS un aplat violet ;
   carte active (résultat affiché en bas) = bordure violette + anneau
   --primary-light ; résultat déjà en base = coche verte, la bordure ne change
   pas. Le badge Pro est une pill bordée (voir .aip-badge-pro). */
.aip-fn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1, 4px);
  min-height: 44px;
  padding: var(--s-3, 12px) 14px;
  background: var(--aip-bg);
  border: 1px solid var(--aip-border);
  border-radius: var(--aip-radius-sm);
  color: var(--aip-text);
  text-align: start;
  cursor: pointer;
  transition: background var(--dur-ui, 200ms), border-color var(--dur-ui, 200ms), box-shadow var(--dur-ui, 200ms), transform var(--dur-press, 80ms);
}
.aip-fn:hover:not(:disabled) {
  border-color: var(--aip-border-2);
  box-shadow: var(--aip-shadow-sm);
}
.aip-fn:active:not(:disabled) { transform: scale(var(--press-scale, 0.97)); }
.aip-fn:disabled,
.aip-fn.is-locked,
.aip-fn[data-locked="true"] { opacity: var(--aip-disabled-opacity, 0.55); cursor: not-allowed; }
.aip-fn.is-active,
.aip-fn.is-active:hover:not(:disabled) {
  border-color: var(--aip-primary);
  background: var(--aip-primary-50);
  box-shadow: 0 0 0 3px var(--aip-primary-light);
}
.aip-fn.is-active .aip-fn-label::before { background-color: var(--aip-primary); }

.aip-fn-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2, 8px);
  font-size: var(--t-body, 15px);
  font-weight: 600;
  line-height: 1.3;
}
.aip-fn-label::before { color: var(--aip-text-muted); background-color: var(--aip-text-muted); }
.aip-fn-desc {
  font-size: var(--t-ui, 13px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--aip-text-muted);
  transition: color var(--dur-ui, 200ms);
}
/* Coin haut-droit de la carte : coche verte (résultat en base) ou spinner
   (génération en cours). Boîte 16 px alignée sur la ligne du libellé. */
.aip-fn-state {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 16px;
  height: 16px;
  line-height: 1;
}
.aip-fn-saved:not(.is-loading) .aip-fn-state::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--aip-success);
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E");
}
.aip-fn.is-active.aip-fn-saved:not(.is-loading) .aip-fn-state::before { background-color: var(--aip-primary); }
/* Laisse la place à la coche à droite du libellé (et du badge Pro). */
.aip-fn-saved { padding-inline-end: 38px; }
/* État chargement (posé par generate() dans ai-panel.js) — réutilise
   l'emplacement du "✓" (coin sup. droit du bouton), jamais occupé au moment
   où generate() démarre : onFeatureClick() n'appelle generate() que pour un
   type SANS résultat sauvegardé, sauf régénération, où remplacer le ✓ par un
   spinner pendant le chargement est le comportement voulu. Zéro nouveau
   nœud DOM créé côté JS. */
.aip-fn.is-loading .aip-fn-state {
  width: 14px;
  height: 14px;
  border: 2px solid var(--aip-border-2);
  border-top-color: var(--aip-primary);
  border-radius: 50%;
  animation: aip-spin 700ms linear infinite;
}
@keyframes aip-spin {
  to { transform: rotate(360deg); }
}


/* Badge PRO — SIBLING du libellé traduit (pas enfant : imbriqué dans le
   span data-i18n, il se ferait effacer par setLanguage() qui réécrit le
   textContent du span à chaque changement de langue). inline-flex : reste
   sur la même ligne que .aip-fn-label sans dépendre du wrapper parent. */
/* Pill bordée, jamais un aplat (refonte 05/09) */
.aip-badge-pro {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--s-2, 8px);
  margin-inline-start: var(--s-2, 8px);
  border-radius: 999px;
  border: 1px solid var(--primary-200, #c4b5fd);
  background: var(--aip-bg);
  color: var(--aip-primary);
  font-size: var(--t-meta, 12px); /* échelle "Badges/pills" DESIGN.md §2 (12-13px), pas de taille inventée */
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}

/* Icônes CSS mask — reprises TELLES QUELLES de history.html (~L239-251).
   -webkit-mask-image/mask-image en data-URI : survivent aux réécritures de
   textContent par setLanguage(). Ne pas redessiner, ne pas convertir en
   <svg>, ne pas "nettoyer" le path. Seul changement : préfixe de sélecteur
   .ai-btn-label → .aip-fn-label. */
.aip-fn-label[data-ico]::before { content: ''; width: 15px; height: 15px; flex-shrink: 0; background-color: currentColor; -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }
.aip-fn-label[data-ico="summary"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%203H6a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V9z'/%3E%3Cpath%20d='M14%203v6h6'/%3E%3Cpath%20d='M8%2013h8M8%2017h5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%203H6a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V9z'/%3E%3Cpath%20d='M14%203v6h6'/%3E%3Cpath%20d='M8%2013h8M8%2017h5'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="keypoints"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%206h11M9%2012h11M9%2018h11'/%3E%3Cpath%20d='M4%206h.01M4%2012h.01M4%2018h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%206h11M9%2012h11M9%2018h11'/%3E%3Cpath%20d='M4%206h.01M4%2012h.01M4%2018h.01'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="translate"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M3%2012h18'/%3E%3Cpath%20d='M12%203a15%2015%200%200%201%200%2018%2015%2015%200%200%201%200-18z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M3%2012h18'/%3E%3Cpath%20d='M12%203a15%2015%200%200%201%200%2018%2015%2015%200%200%201%200-18z'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="rewrite"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020h9'/%3E%3Cpath%20d='M16.5%203.5a2.12%202.12%200%200%201%203%203L7%2019l-4%201%201-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020h9'/%3E%3Cpath%20d='M16.5%203.5a2.12%202.12%200%200%201%203%203L7%2019l-4%201%201-4z'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="caption"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="blogpost"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='4'%20width='16'%20height='16'%20rx='2'/%3E%3Cpath%20d='M8%209h8M8%2013h8M8%2017h5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='4'%20width='16'%20height='16'%20rx='2'/%3E%3Cpath%20d='M8%209h8M8%2013h8M8%2017h5'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="chapters"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20'/%3E%3Cpath%20d='M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20'/%3E%3Cpath%20d='M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="factcheck"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z'/%3E%3Cpath%20d='M9%2012l2%202%204-4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z'/%3E%3Cpath%20d='M9%2012l2%202%204-4'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="learnmore"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%203h6a4%204%200%200%201%204%204v14a3%203%200%200%200-3-3H2z'/%3E%3Cpath%20d='M22%203h-6a4%204%200%200%200-4%204v14a3%203%200%200%201%203-3h7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%203h6a4%204%200%200%201%204%204v14a3%203%200%200%200-3-3H2z'/%3E%3Cpath%20d='M22%203h-6a4%204%200%200%200-4%204v14a3%203%200%200%201%203-3h7z'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="sources"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M21%2021l-4.3-4.3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M21%2021l-4.3-4.3'/%3E%3C/svg%3E");}
/* ---- Ajouts 23/08/2026 — catalogue étendu pour scripts/generate-transcription-
   cluster.js et scripts/generate-translation-cluster.js (retrait des emoji des
   deux générateurs SEO). Même format strict que les 10 icônes ci-dessus, aucune
   d'elles modifiée. Ces générateurs produisent du HTML statique autonome : ils
   embarquent leur PROPRE copie de ces mêmes paths (ils ne chargent pas ce
   fichier) — ces 12 règles servent de catalogue pour un futur consommateur côté
   app (aip-fn-label ou autre), pas de dépendance active depuis les générateurs. */
.aip-fn-label[data-ico="target"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='5'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='5'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='1'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="clock"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3%203'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3%203'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="speakers"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='7'%20cy='8'%20r='3'/%3E%3Ccircle%20cx='17'%20cy='8'%20r='3'/%3E%3Cpath%20d='M2%2020c0-3.3%202.2-5.5%205-5.5s5%202.2%205%205.5'/%3E%3Cpath%20d='M12%2020c0-3.3%202.2-5.5%205-5.5s5%202.2%205%205.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='7'%20cy='8'%20r='3'/%3E%3Ccircle%20cx='17'%20cy='8'%20r='3'/%3E%3Cpath%20d='M2%2020c0-3.3%202.2-5.5%205-5.5s5%202.2%205%205.5'/%3E%3Cpath%20d='M12%2020c0-3.3%202.2-5.5%205-5.5s5%202.2%205%205.5'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="sparkle"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l1.8%205.7L19%2010.5l-5.2%201.8L12%2018l-1.8-5.7L5%2010.5l5.2-1.8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l1.8%205.7L19%2010.5l-5.2%201.8L12%2018l-1.8-5.7L5%2010.5l5.2-1.8z'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="robot"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='7'%20width='14'%20height='12'%20rx='2'/%3E%3Ccircle%20cx='9'%20cy='13'%20r='1.5'/%3E%3Ccircle%20cx='15'%20cy='13'%20r='1.5'/%3E%3Cpath%20d='M12%207V4'/%3E%3Ccircle%20cx='12'%20cy='3'%20r='1'/%3E%3Cpath%20d='M9%2017h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='7'%20width='14'%20height='12'%20rx='2'/%3E%3Ccircle%20cx='9'%20cy='13'%20r='1.5'/%3E%3Ccircle%20cx='15'%20cy='13'%20r='1.5'/%3E%3Cpath%20d='M12%207V4'/%3E%3Ccircle%20cx='12'%20cy='3'%20r='1'/%3E%3Cpath%20d='M9%2017h6'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="bolt"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13%202L3%2014h9l-1%208%2010-12h-9l1-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13%202L3%2014h9l-1%208%2010-12h-9l1-8z'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="clipboard"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%202h6a1%201%200%200%201%201%201v2H8V3a1%201%200%200%201%201-1z'/%3E%3Crect%20x='5'%20y='4'%20width='14'%20height='17'%20rx='2'/%3E%3Cpath%20d='M9%2012h6M9%2016h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%202h6a1%201%200%200%201%201%201v2H8V3a1%201%200%200%201%201-1z'/%3E%3Crect%20x='5'%20y='4'%20width='14'%20height='17'%20rx='2'/%3E%3Cpath%20d='M9%2012h6M9%2016h6'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="eye"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%2012s4-7%2011-7%2011%207%2011%207-4%207-11%207-11-7-11-7z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%2012s4-7%2011-7%2011%207%2011%207-4%207-11%207-11-7-11-7z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="film"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='16'%20rx='2'/%3E%3Cpath%20d='M10%209l6%203-6%203z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='16'%20rx='2'/%3E%3Cpath%20d='M10%209l6%203-6%203z'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="podcast"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='2'%20width='6'%20height='11'%20rx='3'/%3E%3Cpath%20d='M5%2010a7%207%200%200%200%2014%200'/%3E%3Cpath%20d='M12%2017v4'/%3E%3Cpath%20d='M8%2021h8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='2'%20width='6'%20height='11'%20rx='3'/%3E%3Cpath%20d='M5%2010a7%207%200%200%200%2014%200'/%3E%3Cpath%20d='M12%2017v4'/%3E%3Cpath%20d='M8%2021h8'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="headphones"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2014v-2a9%209%200%200%201%2018%200v2'/%3E%3Crect%20x='3'%20y='14'%20width='5'%20height='7'%20rx='2'/%3E%3Crect%20x='16'%20y='14'%20width='5'%20height='7'%20rx='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2014v-2a9%209%200%200%201%2018%200v2'/%3E%3Crect%20x='3'%20y='14'%20width='5'%20height='7'%20rx='2'/%3E%3Crect%20x='16'%20y='14'%20width='5'%20height='7'%20rx='2'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico="waveform"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='4'%20y1='10'%20x2='4'%20y2='14'/%3E%3Cline%20x1='8'%20y1='6'%20x2='8'%20y2='18'/%3E%3Cline%20x1='12'%20y1='3'%20x2='12'%20y2='21'/%3E%3Cline%20x1='16'%20y1='6'%20x2='16'%20y2='18'/%3E%3Cline%20x1='20'%20y1='10'%20x2='20'%20y2='14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='4'%20y1='10'%20x2='4'%20y2='14'/%3E%3Cline%20x1='8'%20y1='6'%20x2='8'%20y2='18'/%3E%3Cline%20x1='12'%20y1='3'%20x2='12'%20y2='21'/%3E%3Cline%20x1='16'%20y1='6'%20x2='16'%20y2='18'/%3E%3Cline%20x1='20'%20y1='10'%20x2='20'%20y2='14'/%3E%3C/svg%3E");}
.aip-fn-label[data-ico].locked::before,
.aip-fn.is-locked .aip-fn-label[data-ico]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='11'%20width='14'%20height='10'%20rx='2'/%3E%3Cpath%20d='M8%2011V7a4%204%200%200%201%208%200v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='11'%20width='14'%20height='10'%20rx='2'/%3E%3Cpath%20d='M8%2011V7a4%204%200%200%201%208%200v4'/%3E%3C/svg%3E");}

/* --------------------------------------------------------------------------
   8. Ligne "Poser une question" (groupe Vérifier)
   -------------------------------------------------------------------------- */
.aip-ask { display: flex; gap: var(--s-2, 8px); margin-top: var(--s-1, 4px); padding: 0 var(--s-6, 24px) var(--s-6, 24px); flex: 0 0 auto; }
.aip-ask-input { flex: 1 1 auto; min-width: 0; }
.aip-ask-go { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   9. Sélecteur de langue (traduction) — masqué hors contexte translation
   -------------------------------------------------------------------------- */
.aip-langrow { display: flex; gap: var(--s-2, 8px); align-items: stretch; padding: 0 var(--s-6, 24px) var(--s-4, 16px); flex: 0 0 auto; }
.aip-langrow[hidden] { display: none; }
.aip-lang-select { flex: 1 1 auto; min-width: 0; }
.aip-lang-go { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   10. Champs — font-size:16px minimum PARTOUT (anti-zoom iOS, règle absolue)
   -------------------------------------------------------------------------- */
.aip-ask-input,
.aip-lang-select,
.aip select,
.aip input,
.aip textarea {
  font-size: var(--t-field, 16px);
  min-height: 44px;
}
.aip-ask-input,
.aip-lang-select,
.aip select,
.aip input[type="text"],
.aip input[type="search"],
.aip textarea {
  padding: var(--s-3, 12px) var(--s-4, 16px);
  border: 1px solid var(--aip-border);
  border-radius: var(--aip-radius-sm);
  font-family: inherit;
  color: var(--aip-text);
  background: var(--aip-bg);
  outline: none;
  transition: border-color var(--dur-ui, 200ms), box-shadow var(--dur-ui, 200ms);
}
.aip-ask-input:focus,
.aip-lang-select:focus,
.aip select:focus,
.aip input:focus,
.aip textarea:focus {
  border-color: var(--aip-primary);
  box-shadow: 0 0 0 3px var(--aip-primary-light);
}
.aip-ask-input::placeholder,
.aip input::placeholder,
.aip textarea::placeholder { color: var(--aip-text-light); }

.aip-ask-go,
.aip-lang-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-5, 20px);
  border: none;
  border-radius: var(--aip-radius-sm);
  background: var(--aip-primary);
  color: #fff;
  font-size: var(--t-body, 15px);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-ui, 200ms), transform var(--dur-press, 80ms);
}
.aip-ask-go:hover, .aip-lang-go:hover { background: var(--aip-primary-hover); }
.aip-ask-go:active:not(:disabled), .aip-lang-go:active:not(:disabled) { transform: scale(var(--press-scale, 0.97)); }
.aip-ask-go:disabled, .aip-lang-go:disabled { opacity: var(--aip-disabled-opacity, 0.55); cursor: not-allowed; }

@supports (-webkit-touch-callout: none) {
  /* Filet iOS Safari, même pattern que history.html mais scopé à .aip pour
     ne jamais fuiter sur le reste de la page hôte */
  .aip input, .aip select, .aip textarea { font-size: var(--t-field, 16px) !important; }
}

/* --------------------------------------------------------------------------
   11. Zone résultat
   -------------------------------------------------------------------------- */
/* Refonte 05/09 (maquette « Atelier IA ») : pied sur fond --surface, en-tête
   = nom du résultat · « Enregistré » vert, actions en boutons ghost 36 px. */
.aip-result {
  flex: 0 0 auto;
  padding: var(--s-3, 12px) var(--s-6, 24px) var(--s-6, 24px);
  border-top: 1px solid var(--aip-border);
  background: var(--aip-surface);
}
.aip-result[hidden] { display: none; }
.aip-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3, 12px);
  flex-wrap: wrap;
  margin-bottom: var(--s-3, 12px);
}
.aip-result-id { display: flex; align-items: center; gap: var(--s-2, 8px); min-width: 0; }
.aip-result-label { font-size: var(--t-ui, 13px); font-weight: 600; color: var(--aip-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aip-result-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1, 4px);
  font-size: var(--t-ui, 13px);
  font-weight: 500;
  color: var(--aip-success);
  white-space: nowrap;
}
.aip-result-status[hidden] { display: none; }
.aip-result-status::before {
  content: '';
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--aip-border-2);
  margin-inline-end: var(--s-1, 4px);
}
.aip-result-status svg { flex-shrink: 0; }
.aip-result-actions { display: flex; align-items: center; gap: var(--s-2, 8px); flex-wrap: wrap; }

.aip-icon-btn,
.aip-regen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2, 8px);
  height: 36px;
  min-width: 36px;
  padding: 0 var(--s-3, 12px);
  border: 1px solid var(--aip-border-2);
  border-radius: var(--aip-radius-sm);
  background: var(--aip-bg);
  color: var(--aip-text-muted);
  font-family: inherit;
  font-size: var(--t-ui, 13px);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-ui, 200ms), color var(--dur-ui, 200ms), background var(--dur-ui, 200ms), transform var(--dur-press, 80ms);
}
.aip-icon-btn { padding: 0; width: 36px; }
.aip-icon-btn svg { display: block; width: 16px; height: 16px; }
.aip-regen { color: var(--aip-primary); }
.aip-icon-btn:hover, .aip-regen:hover {
  border-color: var(--primary-200, #c4b5fd);
  background: var(--aip-primary-50);
}
.aip-icon-btn:hover { color: var(--aip-text); }
.aip-icon-btn:active, .aip-regen:active { transform: scale(var(--press-scale, 0.97)); }
/* N'existait pour aucun des deux avant le 27/08 — .aip-regen peut désormais
   être désactivé pendant une génération en cours ailleurs dans le panneau
   (verrou posé par generate() dans ai-panel.js) : sans cette règle, le
   bouton restait cliquable à l'œil bien que déjà inerte au clic. */
.aip-icon-btn:disabled, .aip-regen:disabled { opacity: var(--aip-disabled-opacity, 0.55); cursor: not-allowed; }
/* Icône mask UNIQUEMENT sur les boutons qui en déclarent une. Avant le 05/09
   la règle visait aussi `.aip-icon-btn` nu : copier/télécharger portent déjà
   un <svg> inline (ai-panel.js) et n'ont pas de mask-image — le ::before
   restait un carré plein de 14 px en currentColor, à côté de l'icône. C'est
   « le carré noir » signalé sur la capture du 05/09. */
.aip-icon-btn[data-act]::before, .aip-icon-btn.aip-copy::before, .aip-icon-btn.aip-download::before, .aip-regen::before {
  content: '';
  width: 14px; height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
}
/* Icônes actions résultat — reprises telles quelles de history.html (~L284-287) */
.aip-regen::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='23%204%2023%2010%2017%2010'/%3E%3Cpolyline%20points='1%2020%201%2014%207%2014'/%3E%3Cpath%20d='M3.51%209a9%209%200%200%201%2014.85-3.36L23%2010M1%2014l4.64%204.36A9%209%200%200%200%2020.49%2015'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='23%204%2023%2010%2017%2010'/%3E%3Cpolyline%20points='1%2020%201%2014%207%2014'/%3E%3Cpath%20d='M3.51%209a9%209%200%200%201%2014.85-3.36L23%2010M1%2014l4.64%204.36A9%209%200%200%200%2020.49%2015'/%3E%3C/svg%3E");}
.aip-icon-btn[data-act="copy"]::before,
.aip-icon-btn.aip-copy::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='9'%20width='13'%20height='13'%20rx='2'/%3E%3Cpath%20d='M5%2015H4a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h9a2%202%200%200%201%202%202v1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='9'%20width='13'%20height='13'%20rx='2'/%3E%3Cpath%20d='M5%2015H4a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h9a2%202%200%200%201%202%202v1'/%3E%3C/svg%3E");}
.aip-icon-btn[data-act="download"]::before,
.aip-icon-btn.aip-download::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4'/%3E%3Cpolyline%20points='7%2010%2012%2015%2017%2010'/%3E%3Cline%20x1='12'%20y1='15'%20x2='12'%20y2='3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4'/%3E%3Cpolyline%20points='7%2010%2012%2015%2017%2010'/%3E%3Cline%20x1='12'%20y1='15'%20x2='12'%20y2='3'/%3E%3C/svg%3E");}

.aip-result-body {
  font-size: var(--t-body, 15px);
  line-height: 1.6;
  color: var(--aip-text);
  white-space: pre-wrap;
  max-height: 45vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Rendu markdown (markdownToHtml, §6 spec) — seul chemin autorisé vers
   innerHTML : le texte est échappé (&<>) AVANT composition. */
.aip-md-h { margin: var(--s-4, 16px) 0 var(--s-2, 8px); font-size: var(--t-body, 15px); font-weight: 700; color: var(--aip-text); line-height: 1.3; }
.aip-md-h:first-child { margin-top: 0; }
.aip-md-p { margin: 0 0 var(--s-3, 12px); }
.aip-md-p:last-child { margin-bottom: 0; }
.aip-md-list { margin: 0 0 var(--s-3, 12px); padding-inline-start: var(--s-5, 20px); }
.aip-md-list:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Synthèse vocale (traduction, Starter+)
   -------------------------------------------------------------------------- */
.aip-tts { margin-top: var(--s-4, 16px); padding-top: var(--s-4, 16px); border-top: 1px solid var(--aip-primary-light); }
.aip-tts[hidden] { display: none; }
.aip-tts-btn {
  display: inline-flex; align-items: center; gap: var(--s-2, 8px);
  min-height: 44px; padding: 0 var(--s-5, 20px);
  border: 1.5px solid var(--aip-primary); border-radius: var(--aip-radius-sm);
  background: var(--aip-primary); color: #fff;
  font-size: var(--t-body, 15px); font-weight: 600; cursor: pointer;
  transition: filter var(--dur-ui, 200ms), transform var(--dur-press, 80ms);
}
.aip-tts-btn:hover:not(:disabled) { filter: brightness(1.08); }
.aip-tts-btn:active:not(:disabled) { transform: scale(var(--press-scale, 0.97)); }
.aip-tts-btn:disabled { opacity: var(--aip-disabled-opacity, 0.55); cursor: wait; }
.aip-tts-player { margin-top: var(--s-3, 12px); }
.aip-tts-player audio { width: 100%; height: 44px; }
.aip-tts-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3, 12px); margin-top: var(--s-2, 8px); flex-wrap: wrap; }
.aip-tts-dl {
  display: inline-flex; align-items: center; gap: var(--s-2, 8px); min-height: 44px;
  font-size: var(--t-ui, 13px); font-weight: 600; color: var(--aip-primary); text-decoration: none;
  transition: color var(--dur-ui, 200ms), transform var(--dur-press, 80ms);
}
.aip-tts-dl:hover { text-decoration: underline; }
.aip-tts-dl:active { transform: scale(var(--press-scale, 0.97)); }
.aip-tts-quota { font-size: var(--t-meta, 12px); color: var(--aip-text-muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   13. Citations (factcheck/learnmore/sources/question — réponses Perplexity)
   Compteur manuel sur .aip-cit (pas de classe de liste connue à l'avance) :
   fonctionne quel que soit le tag utilisé pour les items (li/div).
   -------------------------------------------------------------------------- */
.aip-cit { margin-top: var(--s-4, 16px); padding-top: var(--s-4, 16px); border-top: 1px solid var(--aip-primary-light); counter-reset: aipcit; }
.aip-cit[hidden] { display: none; }
.aip-cit ol, .aip-cit ul { list-style: none; display: flex; flex-direction: column; gap: var(--gap-list, 8px); }
.aip-cit li {
  counter-increment: aipcit;
  display: flex; align-items: flex-start; gap: var(--s-2, 8px);
  font-size: var(--t-ui, 13px); line-height: 1.5; color: var(--aip-text-muted);
}
.aip-cit li::before {
  content: counter(aipcit);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--aip-primary-light); color: var(--aip-primary);
  font-size: var(--t-meta, 12px); font-weight: 700;
}
.aip-cit a { color: var(--aip-primary); text-decoration: none; word-break: break-word; }
.aip-cit a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   14. Composants de carte (§7) — barre d'atelier en pied de carte
   -------------------------------------------------------------------------- */
.aip-toolbar { display: flex; align-items: center; gap: var(--s-2, 8px); flex-wrap: wrap; }
.aip-toolbar-shortcuts {
  display: flex; gap: var(--s-2, 8px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.aip-toolbar-shortcuts::-webkit-scrollbar { display: none; }

.aip-shortcut {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: var(--s-2, 8px);
  height: 44px; padding: 0 var(--s-4, 16px);
  background: transparent;
  border: 1px solid var(--aip-border-2);
  border-radius: var(--aip-radius-sm);
  color: var(--aip-primary);
  font-size: var(--t-body, 15px); font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-ui, 200ms), border-color var(--dur-ui, 200ms), transform var(--dur-press, 80ms);
}
.aip-shortcut:hover {
  background: var(--aip-primary-50);
  /* DESIGN.md §4 (bouton ghost) suggère #c4b5fd au hover — hors de la
     liste de tokens §1 de cette spec, repli sur --aip-primary (autorisé) */
  border-color: var(--aip-primary);
}
.aip-shortcut:active { transform: scale(var(--press-scale, 0.97)); }

.aip-launch {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2, 8px);
  height: 44px; padding: 0 var(--s-6, 24px);
  background: var(--aip-primary); color: #fff;
  border: none; border-radius: var(--aip-radius-sm);
  font-size: var(--t-body, 15px); font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-ui, 200ms), box-shadow var(--dur-ui, 200ms), transform var(--dur-press, 80ms);
}
.aip-launch:hover { background: var(--aip-primary-hover); box-shadow: var(--aip-shadow-sm); }
.aip-launch:active { transform: scale(var(--press-scale, 0.97)); }

@media (max-width: 640px) {
  .aip-toolbar { flex-wrap: wrap; }
  .aip-toolbar-shortcuts { flex: 1 1 100%; flex-wrap: nowrap; }
  .aip-launch { flex: 1 1 100%; order: 3; }
}

/* --------------------------------------------------------------------------
   15. Pills de résultats (sous l'extrait de carte)
   -------------------------------------------------------------------------- */
.aip-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-1, 4px);
  height: 28px; padding: 0 var(--s-3, 12px);
  border-radius: 999px;
  background: var(--aip-primary-light);
  color: var(--aip-primary);
  font-size: var(--t-meta, 12px); font-weight: 600;
  border: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-ui, 200ms), color var(--dur-ui, 200ms), transform var(--dur-press, 80ms);
}
.aip-pill:hover { background: var(--aip-primary); color: #fff; }
.aip-pill:active { transform: scale(var(--press-scale, 0.97)); }
/* Cible tactile réelle 44px sans agrandir la pill visuellement (§7 impose
   28px de hauteur) — hit-slop invisible, pattern WCAG 2.5.5 */
.aip-pill::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: 44px;
}

/* --------------------------------------------------------------------------
   16. Accessibilité clavier
   -------------------------------------------------------------------------- */
.aip *:focus-visible,
.aip-pill:focus-visible,
.aip-shortcut:focus-visible,
.aip-launch:focus-visible,
.aip-quotabar-cta:focus-visible {
  outline: 2px solid var(--aip-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   17. Motion réduite — tout désactivé (SPEC §1)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aip-scrim,
  .aip,
  .aip-fn,
  .aip-fn-desc,
  .aip-pill,
  .aip-pill::after,
  .aip-shortcut,
  .aip-launch,
  .aip-close,
  .aip-icon-btn,
  .aip-regen,
  .aip-quotabar-cta,
  .aip-ask-go,
  .aip-lang-go,
  .aip-tts-btn,
  .aip-tts-dl,
  .aip-cit a,
  .aip select, .aip input, .aip textarea {
    transition: none !important;
  }
  .aip, .aip-scrim { transform: none !important; }
  .aip-fn.is-loading .aip-fn-state { animation: none !important; }
}