/*
 * Recherche IA : le parcours en 5 étapes (accueil, connexion, conversation, récapitulatif, résultats).
 * Posé ici plutôt que dans le CSS compilé (public/build) pour ne pas avoir à le régénérer.
 * Les bulles de la conversation, partagées avec le chatbot, restent dans recherche-ia.css.
 */

.ria-page { width: 100%; background: rgb(15 23 42); color: rgb(226 232 240); }
.ria-wrap { max-width: 1200px; margin: 0 auto; padding: 24px 16px 64px; }
.ria-page [hidden] { display: none !important; }
.ria-page h1 { font-size: 1.75rem; line-height: 2.25rem; font-weight: 700; color: rgb(241 245 249); }
.ria-page h2 { font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; color: rgb(241 245 249); }
.ria-muted { color: rgb(148 163 184); }
/* Slate 400 et non 500 : le 500 sur fond slate 900 n'atteint que 3,8 de contraste */
.ria-dim { color: rgb(148 163 184); font-size: .875rem; margin-top: 0.5rem; }
.ria-page a.ria-lien { color: rgb(248 113 113); text-decoration: underline; text-underline-offset: 2px; }
.ria-page a.ria-lien:hover { color: rgb(252 165 165); }

/* --- La barre du parcours : frise à gauche, « Nouvelle recherche » et initiales à droite --- */
.ria-barre-fond { width: 100%; border-bottom: 1px solid rgb(30 41 59); }
.ria-barre { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 16px 16px; }
.ria-barre-actions { padding-top: 2px; }
.ria-barre-actions { display: flex; align-items: center; gap: 16px; font-size: .875rem; }
.ria-barre-actions a { color: rgb(148 163 184); }
.ria-barre-actions a:hover { color: rgb(241 245 249); }
.ria-qui { display: inline-flex; align-items: center; gap: 8px; color: rgb(226 232 240); font-weight: 500; }
.ria-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9999px; background: rgb(99 102 241); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.ria-avatar.grande { width: 44px; height: 44px; font-size: .9375rem; }

/* --- La frise des 5 étapes (calquée sur la maquette : point, trait de liaison, libellé sous le point) --- */
.ria-frise { list-style: none; margin: 0; padding: 0; display: flex; flex: 1 1 auto; min-width: 0; max-width: 640px; }
.ria-frise li { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; font-size: .875rem; line-height: 1.45; color: rgb(125 132 159); padding-right: 12px; }
/* Le trait qui relie un point au suivant */
.ria-frise li::before { content: ""; position: absolute; top: 7px; left: 16px; right: 0; height: 2px; background: rgb(58 63 107); }
.ria-frise li:last-child::before { display: none; }
.ria-frise .k { position: relative; z-index: 1; flex: none; box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; background: rgb(15 23 42); border: 2px solid rgb(58 63 107); }
.ria-frise .libelle { display: block; font-weight: 500; }
.ria-frise .libelle .court { display: none; }
/* Étape franchie : point plein et trait colorés */
.ria-frise li.done { color: rgb(241 243 249); }
.ria-frise li.done .k { background: rgb(239 68 68); border-color: rgb(239 68 68); }
.ria-frise li.done::before { background: rgb(239 68 68); }
/* Étape en cours : point cerclé d'un halo */
.ria-frise li.now { color: rgb(241 243 249); }
.ria-frise li.now .k { border-color: rgb(239 68 68); box-shadow: 0 0 0 4px rgb(239 68 68 / .28); }
.ria-frise li.now .libelle { font-weight: 600; }

/* Compacte (pop-up de connexion) : les points et les traits seuls, le libellé de l'étape est écrit en dessous */
.ria-frise.compacte li { padding-right: 8px; }
.ria-frise.compacte .libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Verticale (accueil : « Comment ça se passe ») : le point à gauche, le trait descend, le texte à droite */
.ria-frise.verticale { flex-direction: column; max-width: none; }
.ria-frise.verticale li { flex: none; flex-direction: row; align-items: flex-start; gap: 14px; padding: 0 0 22px; }
.ria-frise.verticale li:last-child { padding-bottom: 0; }
.ria-frise.verticale li::before { top: 16px; left: 7px; right: auto; bottom: 0; width: 2px; height: auto; }
.ria-frise.verticale li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ria-frise.verticale b { display: block; font-weight: 500; color: inherit; }
.ria-frise.verticale li.now b { font-weight: 600; }
.ria-frise.verticale .st { font-weight: 400; color: rgb(169 175 198); }
.ria-frise.verticale li.now .st { color: rgb(244 122 98); }
.ria-frise.verticale .val { display: block; font-weight: 400; color: rgb(169 175 198); }

/* --- Deux colonnes : le contenu, puis un panneau latéral --- */
.ria-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.ria-panneau { background: rgb(30 41 59); border: 1px solid rgb(51 65 85); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.ria-panneau .ria-note { border-top: 1px solid rgb(51 65 85); padding-top: 14px; }

/* --- La page de conversation : pleine hauteur, seuls les messages défilent, la saisie reste en bas (comme un client de messagerie) ---
   --ria-vh : la hauteur visible (visualViewport, pour le clavier virtuel) ; --ria-entete : la hauteur de l'en-tête du site. Posées par le script de la page. */
.ria-chat { display: flex; flex-direction: column; height: calc(var(--ria-vh, 100dvh) - var(--ria-entete, 64px)); min-height: 320px; overflow: hidden; }
.ria-chat .ria-barre-fond { flex: none; }
.ria-chat .ria-wrap { flex: 1 1 auto; min-height: 0; width: 100%; box-sizing: border-box; padding: 16px 16px; }
.ria-chat .ria-grille { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.ria-chat-main { display: flex; flex-direction: column; min-height: 0; }
/* Le fil des messages : la seule zone qui défile */
.ria-chat-fil { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 12px 0; }
/* Barres de défilement discrètes, dans les tons de la page */
.ria-chat-fil, .ria-chat .ria-compris, .ria-compris-contenu { scrollbar-width: thin; scrollbar-color: rgb(51 65 85) transparent; }
.ria-chat-fil .ria-panneau { margin: 8px 0; }
/* La zone de saisie, fixe en bas : la question en cours, les réponses rapides, le champ */
.ria-chat-saisie { flex: none; padding-top: 12px; border-top: 1px solid rgb(30 41 59); background: rgb(15 23 42); }
.ria-chat-saisie .ria-question { margin-bottom: 10px; }
.ria-chat-saisie .ria-chips { margin-bottom: 12px; }
.ria-chat-saisie #recherche-ia-restants { margin-bottom: 10px; }
/* Le panneau « Ce que nous avons compris » : à droite sur ordinateur, il défile seul s'il est trop haut */
.ria-chat .ria-compris { align-self: start; max-height: 100%; overflow-y: auto; box-sizing: border-box; }
.ria-compris-toggle { display: none; }

/* --- La conversation --- */
.ria-question { font-size: .875rem; color: rgb(148 163 184); margin-bottom: 16px; }
.ria-question strong { color: rgb(241 245 249); }
.ria-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ria-chip { padding: 8px 14px; border-radius: 9999px; border: 1px solid rgb(71 85 105); background: rgb(30 41 59); color: rgb(226 232 240); font-size: .875rem; cursor: pointer; transition: background-color .2s ease-in-out, border-color .2s ease-in-out; }
.ria-chip:hover { background: rgb(51 65 85); border-color: rgb(239 68 68); }
.ria-chip:disabled { opacity: .5; cursor: default; }
.ria-compose-pied { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .75rem; color: rgb(148 163 184); }

/* Le tableau du lead (composant front-recherche-ia-recap), dans le panneau latéral et sur la page de récapitulatif */
.ria-recap { margin: 0; background: rgb(30 41 59); border: 1px solid rgb(51 65 85); border-radius: 12px; overflow: hidden; }
.ria-recap > div { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 16px 20px; border-top: 1px solid rgb(51 65 85); }
.ria-recap > div:first-child { border-top: 0; }
.ria-recap dt { flex: 0 0 120px; font-size: .8125rem; font-weight: 600; color: rgb(169 175 198); padding-top: 2px; }
.ria-recap dd { flex: 1; min-width: 0; margin: 0; font-size: .9375rem; line-height: 1.5; color: rgb(241 243 249); overflow-wrap: anywhere; }
.ria-recap dd .en-cours { color: rgb(244 122 98); }
.ria-recap dd .a-venir, .ria-recap dd .non-precise { color: rgb(125 132 159); }
.ria-contexte { margin: 0; padding-left: 18px; }
.ria-contexte li { margin: 2px 0; }
.ria-tag-integ { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 6px; background: rgb(99 102 241 / .2); color: rgb(165 180 252); font-size: .75rem; font-weight: 600; line-height: 1.4; vertical-align: 2px; }

/* Empilé (panneau latéral) : le libellé au-dessus de la valeur */
.ria-recap-stack > div { flex-direction: column; gap: 4px; padding: 12px 16px; }
.ria-recap-stack dt { flex-basis: auto; padding-top: 0; }
.ria-recap-stack dd { font-size: .875rem; }

/* Modifier un champ (page de récapitulatif) */
.ria-recap details { flex: 0 0 auto; }
.ria-recap details summary { display: inline-block; cursor: pointer; list-style: none; color: rgb(248 113 113); font-size: .8125rem; font-weight: 600; white-space: nowrap; padding-top: 2px; }
.ria-recap details summary::-webkit-details-marker { display: none; }
.ria-recap details[open] summary { color: rgb(148 163 184); }
.ria-recap details[open] { flex-basis: 100%; }
.ria-recap details form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ria-recap details textarea { width: 100%; box-sizing: border-box; resize: none; border: 1px solid rgb(71 85 105); border-radius: 8px; padding: 10px; color: rgb(15 23 42); background: #fff; outline: none; }
.ria-recap details textarea:focus { border-color: rgb(239 68 68); }
.ria-recap details .actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ria-choix { display: flex; flex-wrap: wrap; gap: 8px 20px; border: 0; margin: 0; padding: 0; }
.ria-choix label { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; color: rgb(226 232 240); cursor: pointer; }
.ria-choix input { accent-color: rgb(239 68 68); width: 16px; height: 16px; }

/* Ressources proposées à un non-lead */
.ria-ressources { display: flex; flex-direction: column; gap: 8px; }
.ria-ressources a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 8px; background: rgb(30 41 59); color: rgb(241 245 249); transition: background-color .2s ease-in-out; }
.ria-ressources a:hover { background: rgb(51 65 85); }
.ria-ressources a b { display: block; font-weight: 600; }
.ria-ressources a span { display: block; font-size: .8125rem; color: rgb(148 163 184); }

/* --- Les boutons --- */
.ria-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; border-radius: 6px; font-size: .875rem; font-weight: 600; transition: background-color .3s ease-in-out; cursor: pointer; }
.ria-btn-primaire { background: rgb(220 38 38); color: #fff; width: 100%; }
.ria-btn-primaire:hover { background: rgb(185 28 28); }
.ria-btn-primaire:disabled { opacity: .5; cursor: not-allowed; }
.ria-btn-primaire.en-cours:disabled { opacity: .85; cursor: progress; }

/* Le loader d'un bouton : un anneau qui tourne, à la place de l'icône */
.ria-loader { display: inline-block; width: 16px; height: 16px; border-radius: 9999px; border: 2px solid rgb(255 255 255 / .35); border-top-color: #fff; animation: ria-tourne .8s linear infinite; }
@keyframes ria-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ria-loader { animation-duration: 2s; } }
.ria-btn-secondaire { background: transparent; border: 1px solid rgb(71 85 105); color: rgb(226 232 240); }
.ria-btn-secondaire:hover { background: rgb(30 41 59); }

/* --- Les résultats --- */
.ria-info { padding: 12px 16px; border-radius: 8px; background: rgb(251 191 36 / .12); color: rgb(253 224 71); font-size: .875rem; margin-bottom: 20px; }
.ria-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ria-carte { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 12px; background: rgb(30 41 59); border: 1px solid rgb(51 65 85); }
.ria-carte header { display: flex; align-items: center; gap: 14px; }
.ria-carte header img { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; border-radius: 8px; background: #fff; }
.ria-carte header h2 { font-size: 1.0625rem; line-height: 1.4; }
.ria-carte header .sub { display: block; font-size: .8125rem; color: rgb(148 163 184); }
.ria-carte .desc { color: rgb(203 213 225); line-height: 1.6; font-size: .9375rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ria-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ria-tags li { padding: 3px 10px; border-radius: 9999px; background: rgb(34 197 94 / .15); color: rgb(134 239 172); font-size: .75rem; font-weight: 600; }
.ria-carte .hors-origine { font-size: .75rem; color: rgb(251 191 36); }
.ria-carte .fiche { margin-top: auto; color: rgb(248 113 113); font-weight: 600; font-size: .875rem; }
.ria-carte .fiche:hover { color: rgb(252 165 165); }
.ria-integrateurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ria-integrateurs article { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 12px; background: rgb(30 41 59); border: 1px solid rgb(51 65 85); }
.ria-integrateurs article h3 { font-weight: 600; color: rgb(241 245 249); }
.ria-integrateurs article h3 a:hover { color: rgb(248 113 113); }
.ria-integrateurs article .km { margin-top: 6px; font-size: .8125rem; font-weight: 600; color: rgb(165 180 252); }
.ria-integrateurs article .fiche { margin-top: auto; padding-top: 12px; color: rgb(248 113 113); font-weight: 600; font-size: .875rem; }
.ria-integrateurs article .fiche:hover { color: rgb(252 165 165); }
.ria-pied { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgb(30 41 59); font-size: .875rem; color: rgb(148 163 184); }

/* --- Tablette et mobile --- */
@media (max-width: 1099px) {
    .ria-grille { grid-template-columns: minmax(0, 1fr); }
    .ria-cartes { grid-template-columns: minmax(0, 1fr); }
    .ria-integrateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 743px) {
    .ria-wrap { padding: 16px 16px 48px; }
    .ria-page h1 { font-size: 1.375rem; line-height: 1.875rem; }
    .ria-barre { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 16px; }
    .ria-frise { max-width: none; width: 100%; }
    /* Les cinq libellés restent lisibles : plus petits, et « Récapitulatif » devient « Récap » */
    .ria-frise li { padding-right: 6px; font-size: .6875rem; gap: 6px; }
    .ria-frise:not(.verticale) .libelle { line-height: 1.2; }
    .ria-frise:not(.verticale) .libelle .long { display: none; }
    .ria-frise:not(.verticale) .libelle .court { display: inline; }
    .ria-barre-actions { font-size: .8125rem; gap: 12px; }
    .ria-barre-actions .ria-avatar { width: 26px; height: 26px; font-size: .6875rem; }
    /* Sur mobile, le panneau « Ce que nous avons compris » devient un tiroir au-dessus des messages */
    .ria-chat .ria-wrap { padding: 8px 12px 10px; }
    .ria-chat .ria-grille { grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
    /* Pas de max-height en % sur le tiroir : il se résoudrait contre sa ligne de grille (auto) et l'écraserait ; la limite est sur son contenu */
    .ria-chat .ria-compris { order: -1; align-self: stretch; max-height: none; display: flex; flex-direction: column; padding: 0; gap: 0; overflow: visible; position: relative; z-index: 5; }
    .ria-chat .ria-compris > h2 { display: none; }
    .ria-compris-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 16px; font-size: .875rem; font-weight: 600; color: rgb(241 245 249); text-align: left; cursor: pointer; }
    .ria-compris-toggle .nb { font-weight: 400; color: rgb(148 163 184); }
    .ria-compris-toggle svg { flex: none; transition: transform .2s ease-in-out; }
    .ria-compris.ouvert .ria-compris-toggle svg { transform: rotate(180deg); }
    .ria-compris-contenu { display: none; }
    /* Ouvert, le contenu se superpose aux messages (position absolue) : la zone de saisie ne bouge pas et reste visible */
    .ria-compris.ouvert .ria-compris-contenu { display: flex; flex-direction: column; gap: 12px; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(var(--ria-vh, 100dvh) * .45); overflow-y: auto; padding: 0 12px 12px; background: rgb(30 41 59); border: 1px solid rgb(51 65 85); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 16px 32px rgb(2 6 23 / .5); }
    .ria-compris.ouvert { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .ria-compris-contenu .ria-note { margin: 0; }
    .ria-integrateurs { grid-template-columns: minmax(0, 1fr); }
    .ria-recap dt { flex-basis: 100%; padding-top: 0; }
}