/* Modèle d'IA d'un agent : bloc de la fiche (écran Agents) et fenêtre de choix.

   Même langage que l'écran Applications : relief par la seule clarté (aucune bordure au repos, une marche
   de ton pour ce qui ressort), aucune ombre sauf la fenêtre qui flotte, turquoise réservé à l'état
   « Actuel » / « Fonctionne », action principale par inversion (fond ivoire, texte marine).

   Un seul écart (--mdl-gap, 8 px) entre lignes, dans le bloc comme dans la fenêtre. Le bloc reprend la
   grille des deux colonnes du dessus (écart 28 px, colonnes égales) : leurs bords tombent au même endroit.
   Hauteurs : ligne principale 68 px, ligne de secours 60 px, avec ou sans données (le squelette a la
   taille réelle, rien ne bouge à l'arrivée de la réponse). */

.mdl-cols, .mdl-modal {
  --mdl-gap: 8px;
  --mdl-rest: rgba(246,242,234,.045);
  --mdl-raised: rgba(246,242,234,.075);
  --mdl-hover: rgba(246,242,234,.10);
  --mdl-press: rgba(246,242,234,.14);
  --mdl-chip: rgba(246,242,234,.10);
}

/* ── Bloc de la fiche ───────────────────────────────────────────────────── */

.mdl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px; margin-top: 28px; min-width: 0; }
.mdl-col { display: flex; flex-direction: column; gap: var(--mdl-gap); min-width: 0; }
.mdl-col > .label { margin-bottom: 2px; }
.mdl-rows { display: flex; flex-direction: column; gap: var(--mdl-gap); }

.mdl-row { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 60px; padding: 8px 8px 8px 16px; background: var(--mdl-rest); }
.mdl-row.is-primary { min-height: 68px; padding: 12px 16px; background: var(--mdl-raised); }
.mdl-num { flex: none; width: 14px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mute); }
.mdl-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mdl-name { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ivory); overflow-wrap: anywhere; }
.mdl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.mdl-prov { font-size: 12.5px; line-height: 20px; color: var(--mute); }
.mdl-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 22px; }

.mdl-row .btn { flex: none; min-height: 36px; padding: 0 14px; font-size: 13px; }
.mdl-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; background: none; border: 0;
  color: var(--mute); cursor: pointer; transition: background .15s ease, color .15s ease; }
.mdl-x:hover { background: var(--mdl-hover); color: var(--ivory); }
.mdl-x:focus-visible, .mdl-link:focus-visible, .mdl-row .btn:focus-visible { outline: 2px solid var(--turq); outline-offset: 2px; }
.mdl-x:focus-visible { outline-offset: -2px; }

.mdl-help { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mute); }
.mdl-none { margin: 0; padding: 8px 0; font-size: 14px; line-height: 20px; color: var(--mute); }

/* Action discrète : du texte souligné, aligné sur le bord gauche comme l'aide en dessous. */
.mdl-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 36px; margin: 0; padding: 0; background: none; border: 0;
  color: var(--ivory); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(246,242,234,.4); text-underline-offset: 3px; }
.mdl-link:hover { text-decoration-color: var(--ivory); }
.mdl-link.add { text-decoration: none; }
.mdl-link.add:hover { text-decoration: underline; text-decoration-color: var(--ivory); }
.mdl-link .ico { flex: none; }

.mdl-error { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 4px 12px; min-height: 68px; padding: 14px 16px; background: var(--mdl-rest); color: var(--sand); font-size: 14px; line-height: 1.5; }
.mdl-error p { margin: 0; }
.mdl-error .mdl-link { grid-column: 2; }
.mdl-error .ico { color: var(--danger); margin-top: 3px; }

/* Squelette : barres plates à la taille des vraies lignes. */
.mdl-row.is-skel { pointer-events: none; }
.mdl-sk { display: block; background: rgba(246,242,234,.08); }
.mdl-sk.s-name { width: 44%; height: 12px; margin: 4px 0; }
.mdl-sk.s-sub { width: 64%; height: 10px; margin: 6px 0; }
.mdl-sk.s-btn { flex: none; width: 84px; height: 36px; }
.mdl-skline { display: flex; align-items: center; min-height: 36px; }
.mdl-sk.s-link { width: 190px; height: 12px; }
.mdl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Étiquettes ─────────────────────────────────────────────────────────── */

.mdl-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; background: var(--mdl-chip);
  color: var(--sand); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.mdl-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.mdl-bars i { display: block; width: 3px; background: rgba(246,242,234,.28); }
.mdl-bars i:nth-child(1) { height: 5px; }
.mdl-bars i:nth-child(2) { height: 8px; }
.mdl-bars i:nth-child(3) { height: 11px; }
.mdl-bars.t1 i:nth-child(-n+1), .mdl-bars.t2 i:nth-child(-n+2), .mdl-bars.t3 i { background: var(--ivory); }
.mdl-cur { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--turq); white-space: nowrap; }
.mdl-dot { flex: none; width: 6px; height: 6px; background: var(--turq); }
.mdl-mute { color: var(--mute); font-size: 12.5px; }

/* ── Fenêtre de choix ───────────────────────────────────────────────────── */

.modal.mdl-modal { max-width: 600px; height: min(740px, 90vh); max-height: none; padding: 24px 24px 20px; gap: 16px; overflow: hidden;
  background: #16214A; border: 0; box-shadow: 0 24px 64px rgba(4,8,22,.55); }
.modal.mdl-modal:focus { outline: none; }
.mdl-m-head { flex: none; min-width: 0; }
.mdl-modal .mdl-m-head .display { margin: 0; font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
.mdl-m-lead { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--sand); }

.modal .mdl-search { position: relative; flex: none; display: block; width: 100%; font-weight: 400; }
.mdl-search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--mute); pointer-events: none; }
.modal .mdl-search input { width: 100%; height: 40px; min-height: 40px; padding: 0 12px 0 38px; margin: 0;
  background: rgba(246,242,234,.06); border: 1px solid transparent; color: var(--ivory);
  font: inherit; font-size: 14px; outline: none; color-scheme: dark; transition: background .15s ease, border-color .15s ease; }
.mdl-search input::placeholder { color: var(--mute); opacity: 1; }
.mdl-search input::-webkit-search-cancel-button { filter: invert(1) brightness(1.4); opacity: .6; cursor: pointer; }
.modal .mdl-search input:hover { background: rgba(246,242,234,.08); }
.modal .mdl-search input:focus { background: rgba(246,242,234,.08); border-color: var(--turq); }

/* La liste défile seule ; la barre de défilement se colle au bord de la fenêtre. */
.mdl-list { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 -24px; padding: 0 24px; overflow-y: auto; overscroll-behavior: contain; }
.mdl-grp + .mdl-grp, .mdl-opts-wrap + .mdl-off { margin-top: 16px; }
.mdl-opts { display: flex; flex-direction: column; gap: var(--mdl-gap); }
.mdl-ghead { position: sticky; top: 0; z-index: 1; padding: 6px 0 8px; background: #16214A;
  font-size: 13px; font-weight: 600; line-height: 20px; color: var(--ivory); }
.mdl-ghead .n { color: var(--mute); font-weight: 500; font-variant-numeric: tabular-nums; }
.mdl-ghead.plain { color: var(--mute); }

.mdl-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 10px 14px 10px 16px;
  background: var(--mdl-rest); border: 0; color: var(--ivory); font: inherit; text-align: left; cursor: pointer; transition: background .15s ease; }
.mdl-opt:hover:not(:disabled) { background: var(--mdl-hover); }
.mdl-opt[aria-selected="true"], .mdl-opt[aria-selected="true"]:hover { background: var(--mdl-press); }
.mdl-opt:focus-visible, .mdl-offhead:focus-visible { outline: 2px solid var(--turq); outline-offset: 2px; }
.mdl-opt:disabled { cursor: default; }
.mdl-opt.off { opacity: .55; }
.mdl-opt-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.mdl-opt-name { flex: 1 1 180px; min-width: 0; font-size: 14px; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }
.mdl-opt-tags { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mdl-opt-tags:empty { display: none; }
.mdl-opt-note { flex: 1 1 100%; font-size: 12.5px; line-height: 17px; color: var(--mute); }
/* Choisi : case ivoire pleine, coche marine (même inversion que les filtres actifs). */
.mdl-check { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--navy); }
.mdl-opt[aria-selected="true"] .mdl-check { background: var(--ivory); }

/* Fournisseurs indisponibles : repliés, grisés, avec la raison en clair. */
.mdl-offp + .mdl-offp { margin-top: var(--mdl-gap); }
.mdl-offhead { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 10px 14px 10px 16px;
  background: var(--mdl-rest); border: 0; color: var(--sand); font: inherit; text-align: left; cursor: pointer; transition: background .15s ease; }
button.mdl-offhead:hover { background: var(--mdl-hover); }
.mdl-offhead.static { cursor: default; }
.mdl-offtxt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mdl-offname { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--sand); }
.mdl-offreason { font-size: 12.5px; line-height: 17px; color: var(--mute); }
.mdl-chev { flex: none; display: grid; place-items: center; color: var(--mute); transition: transform .15s ease; }
.mdl-chev.open { transform: rotate(180deg); }
.mdl-offp .mdl-opts { margin-top: var(--mdl-gap); }

.mdl-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; min-height: 60px; padding: 12px 16px; background: var(--mdl-rest); color: var(--sand); font-size: 14px; line-height: 1.5; }
.mdl-empty p { margin: 0; }

/* Bandeau : ce qui est choisi, ses limites, le résultat du test. */
.mdl-info { flex: none; display: flex; flex-direction: column; gap: 8px; max-height: 40%; overflow-y: auto; padding: 12px 16px;
  background: rgba(246,242,234,.06); font-size: 13.5px; line-height: 1.5; color: var(--sand); }
.mdl-info p { margin: 0; }
.mdl-pick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.mdl-pick-name { font-size: 14px; font-weight: 600; color: var(--ivory); }
.mdl-res { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; }
.mdl-res .ico, .mdl-ask .ico { flex: none; margin-top: 3px; }
.mdl-res.ok { color: var(--turq); }
.mdl-res.err { color: var(--danger); font-weight: 500; }
.mdl-ask { display: flex; align-items: flex-start; gap: 8px; color: var(--ivory); }
.mdl-ask p + p { margin-top: 4px; }

.mdl-note { flex: none; margin: 0; font-size: 13px; line-height: 1.5; color: var(--mute); }
.mdl-foot { flex: none; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; }
.mdl-foot .btn { min-height: 40px; }
.btn[aria-disabled="true"] { cursor: default; }
.btn.mdl-primary { background: var(--ivory); color: var(--navy); }
.btn.mdl-primary:hover:not(:disabled) { background: #FFFFFF; }
.btn.mdl-primary:focus-visible, .mdl-foot .btn:focus-visible { outline: 2px solid var(--turq); outline-offset: 2px; }
.mdl-primary .spinner { border-color: rgba(36,51,93,.25); border-top-color: var(--navy); }

/* ── Tablette et téléphone ──────────────────────────────────────────────── */

@media (max-width: 860px) {
  .mdl-cols { gap: 22px; }
  .mdl-row .btn { min-height: 44px; }
  .mdl-x { width: 44px; height: 44px; }
  .mdl-link { min-height: 44px; }
  .mdl-skline { min-height: 44px; }
  /* Feuille pleine largeur en bas de l'écran, comme les autres fenêtres du produit. */
  .modal.mdl-modal { max-width: none; height: 92dvh; max-height: 92dvh; gap: 14px; padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .mdl-list { margin: 0 -16px; padding: 0 16px; }
  .modal .mdl-search input { height: 44px; min-height: 44px; font-size: 16px; }
  .mdl-opt { min-height: 56px; }
  .mdl-offhead { min-height: 60px; }
  .mdl-foot .btn { min-height: 44px; }
}
@media (max-width: 560px) {
  /* Sur écran étroit, toutes les lignes ont la même forme : nom, étiquettes, puis précision. */
  .mdl-opt-name { flex-basis: 100%; }
  .mdl-foot .btn { flex: 1 1 0; padding-inline: 10px; white-space: normal; }
  .mdl-foot .mdl-primary { flex: 1 1 100%; order: -1; }
}

/* ── Accès limité aux modèles gratuits de Nous (zone de saisie, accueil) ────────────── */

/* Un seul modèle, ou aucun : un libellé, pas un bouton de choix (ni flèche, ni survol). */
.model-pill.is-fixed { gap: 6px; border-color: transparent; background: rgba(246,242,234,.06); color: var(--sand); cursor: default; }
.model-pill.is-fixed:hover { color: var(--sand); background: rgba(246,242,234,.06); border-color: transparent; }
.model-pill.is-fixed.disabled { opacity: 1; color: var(--mute); }
.model-pill.is-fixed .ico { opacity: .7; }

/* La phrase discrète sous la zone de saisie, et le message quand plus aucun modèle gratuit ne répond. */
.policy-note { max-width: 820px; margin: 4px auto 0; font-size: 11px; line-height: 1.4; color: var(--mute); }
.policy-warn { max-width: 820px; margin: 0 auto 8px; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  background: rgba(226,167,60,.12); color: var(--ivory); font-size: 13px; line-height: 1.5; }
.policy-warn .ico { flex: none; margin-top: 2px; color: var(--ochre-light); }
.policy-warn p { margin: 0; }

@media (max-width: 560px) {
  .policy-note { font-size: 10.5px; }
  /* Accueil : trois tuiles seulement (les missions ne sont pas proposées) — la dernière prend toute la largeur. */
  .stats.stats-3 .stat:last-child { grid-column: 1 / -1; }
}