/* =========================================================================
 *  ARC CHATBOT — widget public
 *
 *  Tout est rangé sous `#arc-cb` (le conteneur racine posé par
 *  `ARC_Chatbot_Front::rendre()`), et c'est délibéré :
 *
 *   - le kit Elementor et le thème Hello stylent `button`, `textarea`, `a`,
 *     `h2`… avec des sélecteurs du type `.elementor-kit-XXXX button:hover`
 *     (spécificité 0,2,1). Une simple classe perdrait au survol ; un
 *     identifiant gagne partout sans `!important` ;
 *   - rien de ce fichier ne peut déteindre sur le reste du site.
 *
 *  Les jetons de couleur reprennent ceux du thème enfant (`--arc-*`). Ils ne
 *  sont PAS sur `:root` côté thème (posés sur les conteneurs du tunnel « pour
 *  que rien ne déteigne ») : on les REDÉCLARE donc ici, sur notre racine, avec
 *  les mêmes valeurs. Si le thème venait à les publier globalement, ce sont
 *  les siens qui l'emporteraient grâce au `var(--x, repli)`.
 * ========================================================================= */

/* === JETONS === */
#arc-cb {
	--cb-bleu: var(--arc-bleu, #009fe3);
	--cb-bleu-fonce: var(--arc-bleu-fonce, #007095);
	--cb-bleu-clair: var(--arc-bleu-clair, #60cdfc);
	--cb-bleu-pale: var(--arc-bleu-pale, #eaf6fd);
	/* Bouton d'ouverture : le bleu du site (#009fe3) se confond avec le footer
	   et de nombreux blocs qu'il survole. Bleu d'accent sombre, éclairci au
	   survol sans remonter jusqu'au bleu du site, où il redeviendrait invisible. */
	--cb-accent: #00587d;
	--cb-accent-survol: #00729f;
	--cb-nuit: #1b2a4a;
	--cb-carte: var(--arc-carte, #f5f8fb);
	--cb-bordure: var(--arc-bordure, #e4ebf2);
	--cb-texte: var(--arc-texte, #1d1d1d);
	--cb-texte-doux: var(--arc-texte-doux, #5b6b85);
	--cb-gris: var(--arc-gris, #b5b5b5);
	--cb-gris-pale: var(--arc-gris-pale, #f0f2f5);
	--cb-rouge: var(--arc-rouge, #c0392b);
	--cb-rouge-pale: var(--arc-rouge-pale, #fdeceb);
	--cb-rayon: var(--arc-rayon, 13px);
	--cb-rayon-doux: var(--arc-rayon-doux, 8px);
	/* Le panneau flottant arrondit un peu plus que les cartes du site : il
	   se détache de la page. Dérivé du jeton, il suit toute évolution. */
	--cb-rayon-panneau: calc(var(--cb-rayon) + 3px);
	/* Bordures bleu pâle (bulles d'accueil, sources, roue, bouton « + »). */
	--cb-bordure-bleue: #cfe9f8;
	--cb-bordure-bleue-forte: #b7e0f5;
	--cb-ombre-active: var(--arc-ombre-active, 0 6px 18px rgba(0, 159, 227, 0.22));
	--cb-ombre-panneau: 0 18px 48px rgba(27, 42, 74, 0.22), 0 2px 6px rgba(27, 42, 74, 0.08);
	--cb-titre: var(--arc-titre, Lora, Georgia, "Times New Roman", serif);
	--cb-ui: var(--arc-ui, Roboto, "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
	--cb-transition: var(--arc-transition, 0.22s ease);

	position: fixed;
	bottom: var(--arc-cb-y, 20px);
	z-index: 99990;
	font-family: var(--cb-ui);
	font-size: 15px;
	line-height: 1.5;
	color: var(--cb-texte);
	text-align: left;
	letter-spacing: normal;
	text-transform: none;
}

#arc-cb.arc-cb--droite { right: var(--arc-cb-x, 20px); }
#arc-cb.arc-cb--gauche { left: var(--arc-cb-x, 20px); }

/* === PANNEAU OUVERT SUR ORDINATEUR : ANCRAGE BORNÉ ===
 * Les décalages réglés (jusqu'à 400 px) placent le BOUTON. Panneau ouvert,
 * l'ancrage est ramené pour qu'il reste au moins 360 px de haut et 300 px
 * de large utiles (ou tout l'écran s'il est plus petit), 8 px du bord au
 * minimum. Sur un écran courant, rien ne change : le décalage s'applique. */
@media (min-width: 768px) {
	#arc-cb.arc-cb--ouvert {
		--arc-cb-bas: clamp(8px, calc(100vh - 376px), var(--arc-cb-y, 20px));
		--arc-cb-cote: clamp(8px, calc(100vw - 316px), var(--arc-cb-x, 20px));
		bottom: var(--arc-cb-bas);
	}

	#arc-cb.arc-cb--ouvert.arc-cb--droite { right: var(--arc-cb-cote); }
	#arc-cb.arc-cb--ouvert.arc-cb--gauche { left: var(--arc-cb-cote); }
}

#arc-cb[hidden],
#arc-cb [hidden] { display: none !important; }

#arc-cb *,
#arc-cb *::before,
#arc-cb *::after { box-sizing: border-box; }

/* === REMISE À ZÉRO DES ÉLÉMENTS STYLÉS PAR LE THÈME === */
#arc-cb button {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	box-shadow: none;
	/* Le reset de Hello Elementor pose nowrap, user-select:none et
	 * transition:all .3s sur tous les boutons : un libellé long (« Démarrer »
	 * paramétrable, « Réessayer ») serait coupé par le panneau. Les boutons
	 * qui doivent rester sur une ligne le déclarent eux-mêmes. */
	white-space: normal;
	-webkit-user-select: auto;
	user-select: auto;
	transition: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

#arc-cb button:disabled { cursor: not-allowed; }

#arc-cb a { text-decoration: none; box-shadow: none; }

#arc-cb h2,
#arc-cb h3,
#arc-cb p,
#arc-cb ul,
#arc-cb li { margin: 0; padding: 0; }

#arc-cb ul { list-style: none; }

#arc-cb .arc-cb-svg { display: block; flex: none; }

/* Texte réservé aux lecteurs d'écran. */
#arc-cb .arc-cb-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Focus clavier : jamais supprimé (même règle que le tunnel). */
#arc-cb :focus-visible {
	outline: 3px solid var(--cb-bleu-clair);
	outline-offset: 2px;
}

/* === BOUTON D'OUVERTURE === */
/* Invisible tant que le script n'est pas prêt : sans lui, le bouton ne
 * ferait rien, et un bouton qui ne répond pas est pire que pas de bouton. */
#arc-cb:not(.arc-cb--pret) .arc-cb-lanceur { visibility: hidden; }

#arc-cb .arc-cb-lanceur {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cb-accent);
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 88, 125, 0.32);
	transition: background-color var(--cb-transition), transform var(--cb-transition), box-shadow var(--cb-transition);
}

#arc-cb .arc-cb-lanceur:hover,
#arc-cb .arc-cb-lanceur:focus-visible {
	background: var(--cb-accent-survol);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 88, 125, 0.4);
}

#arc-cb .arc-cb-lanceur .arc-cb-svg { width: 28px; height: 28px; }

#arc-cb .arc-cb-lanceur--texte {
	width: auto;
	height: 54px;
	padding: 0 22px 0 18px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
}

#arc-cb .arc-cb-lanceur--texte .arc-cb-svg { width: 24px; height: 24px; }

#arc-cb .arc-cb-lanceur__icone { display: inline-flex; }

#arc-cb .arc-cb-lanceur__texte { white-space: nowrap; }

#arc-cb.arc-cb--ouvert .arc-cb-lanceur { display: none; }

/* === PANNEAU === */
#arc-cb .arc-cb-panneau {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Taille calculée depuis la place RÉELLE au-dessus et à côté du point
	 * d'ancrage (variables --arc-cb-bas / --arc-cb-cote, cf. plus bas), avec
	 * 16 px de marge : jamais deux fois le décalage, jamais une hauteur
	 * nulle quand l'agent règle un grand décalage. */
	width: min(400px, calc(100vw - var(--arc-cb-cote, 20px) - 16px));
	height: min(640px, calc(100vh - var(--arc-cb-bas, 20px) - 16px));
	height: min(640px, calc(100dvh - var(--arc-cb-bas, 20px) - 16px));
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--cb-bordure);
	border-radius: var(--cb-rayon-panneau);
	box-shadow: var(--cb-ombre-panneau);
	animation: arc-cb-apparition 0.22s ease-out;
}

@keyframes arc-cb-apparition {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

/* --- En-tête --- */
#arc-cb .arc-cb-entete {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 14px 14px 18px;
	background: var(--cb-bleu);
	color: #fff;
	flex: none;
}

#arc-cb .arc-cb-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	flex: none;
}

#arc-cb .arc-cb-avatar .arc-cb-svg { width: 22px; height: 22px; }

#arc-cb .arc-cb-titre {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--cb-titre);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#arc-cb .arc-cb-fermer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	flex: none;
	transition: background-color var(--cb-transition);
}

#arc-cb .arc-cb-fermer:hover,
#arc-cb .arc-cb-fermer:focus-visible { background: rgba(255, 255, 255, 0.2); color: #fff; }

#arc-cb .arc-cb-fermer:focus-visible { outline-color: #fff; }

/* --- Bandeau d'identité --- */
#arc-cb .arc-cb-bandeau {
	padding: 9px 18px;
	background: var(--cb-bleu-pale);
	border-bottom: 1px solid var(--cb-bordure);
	color: var(--cb-nuit);
	font-size: 13px;
	line-height: 1.45;
	white-space: pre-line;
	flex: none;
}

#arc-cb .arc-cb-bandeau--inactif {
	background: #fff6e5;
	border-bottom-color: #f3d9a4;
}

/* --- Barre d'onglets --- */
#arc-cb .arc-cb-barre {
	display: flex;
	/* En haut : si les onglets passent sur deux lignes, le « + » reste
	 * aligné sur la première. */
	align-items: flex-start;
	gap: 6px;
	padding: 10px 12px 8px;
	border-bottom: 1px solid var(--cb-bordure);
	background: #fff;
	flex: none;
}

/* Les onglets PASSENT À LA LIGNE plutôt que de défiler : avec trois
 * conversations, une barre défilante masquait l'onglet « Contact » derrière
 * une barre de défilement (constaté au navigateur, panneau de 400 px).
 * Tout reste visible et cliquable, sans geste de défilement à découvrir. */
#arc-cb .arc-cb-onglets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 2px;
}

#arc-cb .arc-cb-onglet {
	display: inline-flex;
	align-items: stretch;
	flex: none;
	border: 1px solid var(--cb-bordure);
	border-radius: var(--cb-rayon-doux);
	background: var(--cb-carte);
	transition: background-color var(--cb-transition), border-color var(--cb-transition);
}

#arc-cb .arc-cb-onglet:hover { background: var(--cb-bleu-pale); }

#arc-cb .arc-cb-onglet--actif,
#arc-cb .arc-cb-onglet--actif:hover {
	background: var(--cb-bleu);
	border-color: var(--cb-bleu);
	box-shadow: 0 2px 6px rgba(0, 159, 227, 0.35);
}

#arc-cb .arc-cb-onglet__bouton {
	padding: 7px 10px;
	border: 0;
	border-radius: var(--cb-rayon-doux);
	background: transparent;
	color: var(--cb-nuit);
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}

#arc-cb .arc-cb-onglet__bouton:hover,
#arc-cb .arc-cb-onglet__bouton:focus { background: transparent; color: var(--cb-nuit); }

#arc-cb .arc-cb-onglet--actif .arc-cb-onglet__bouton,
#arc-cb .arc-cb-onglet--actif .arc-cb-onglet__bouton:hover,
#arc-cb .arc-cb-onglet--actif .arc-cb-onglet__bouton:focus { color: #fff; }

#arc-cb .arc-cb-onglet--fermable .arc-cb-onglet__bouton { padding-right: 4px; }

#arc-cb .arc-cb-onglet__fermer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	margin: 4px 4px 4px 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--cb-texte-doux);
	font-size: 16px;
	line-height: 1;
}

#arc-cb .arc-cb-onglet__fermer:hover,
#arc-cb .arc-cb-onglet__fermer:focus-visible { background: rgba(27, 42, 74, 0.1); color: var(--cb-nuit); }

#arc-cb .arc-cb-onglet--actif .arc-cb-onglet__fermer { color: rgba(255, 255, 255, 0.85); }

#arc-cb .arc-cb-onglet--actif .arc-cb-onglet__fermer:hover,
#arc-cb .arc-cb-onglet--actif .arc-cb-onglet__fermer:focus-visible { background: rgba(255, 255, 255, 0.22); color: #fff; }

#arc-cb .arc-cb-onglet--actif .arc-cb-onglet__bouton:focus-visible,
#arc-cb .arc-cb-onglet--actif .arc-cb-onglet__fermer:focus-visible { outline-color: var(--cb-nuit); }

#arc-cb .arc-cb-plus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	margin-top: 2px;
	padding: 7px 11px;
	border: 1px dashed var(--cb-bordure-bleue-forte);
	border-radius: var(--cb-rayon-doux);
	background: #fff;
	color: var(--cb-bleu-fonce);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color var(--cb-transition), border-color var(--cb-transition);
}

#arc-cb .arc-cb-plus:hover:not(:disabled),
#arc-cb .arc-cb-plus:focus-visible:not(:disabled) {
	background: var(--cb-bleu-pale);
	border-color: var(--cb-bleu);
	color: var(--cb-bleu-fonce);
}

#arc-cb .arc-cb-plus:disabled {
	border-color: var(--cb-bordure);
	background: var(--cb-gris-pale);
	color: var(--cb-gris);
}

#arc-cb .arc-cb-plus__signe { font-size: 17px; line-height: 1; }

/* Texte « Nouvelle conversation » masqué quand la barre est pleine : le
 * signe reste, le nom accessible aussi (aria-label posé par le script). */
#arc-cb .arc-cb-plus--compact { padding: 7px 12px; }
#arc-cb .arc-cb-plus--compact .arc-cb-plus__texte { display: none; }

/* --- Vues (conversation / contact) --- */
#arc-cb .arc-cb-vue {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	background: #fff;
}

#arc-cb .arc-cb-vue:focus { outline: none; }

/* --- Écran de démarrage --- */
#arc-cb .arc-cb-depart {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex: 1 1 auto;
	padding: 28px 24px;
	overflow-y: auto;
	text-align: center;
}

#arc-cb .arc-cb-depart__intro {
	max-width: 320px;
	color: var(--cb-texte-doux);
	font-size: 14.5px;
	white-space: pre-line;
}

#arc-cb .arc-cb-depart__aide { color: var(--cb-texte-doux); font-size: 13.5px; max-width: 320px; }

#arc-cb .arc-cb-depart__statut { color: var(--cb-texte-doux); font-size: 13.5px; }

#arc-cb .arc-cb-captcha { display: flex; justify-content: center; min-height: 65px; max-width: 100%; }

/* Mention exigée par Google quand son badge reCAPTCHA v3 est masqué
   (voir plus bas) : discrète, mais lisible et ses liens repérables. */
#arc-cb .arc-cb-recaptcha-mention {
	max-width: 320px;
	margin: 0;
	color: var(--cb-texte-doux);
	font-size: 11.5px;
	line-height: 1.45;
}

#arc-cb .arc-cb-recaptcha-mention a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#arc-cb .arc-cb-recaptcha-mention a:hover,
#arc-cb .arc-cb-recaptcha-mention a:focus-visible { color: var(--cb-bleu-fonce); }

/* --- Boutons génériques --- */
#arc-cb .arc-cb-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 24px;
	border: 1px solid transparent;
	border-radius: var(--cb-rayon);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	transition: background-color var(--cb-transition), border-color var(--cb-transition), color var(--cb-transition);
}

#arc-cb .arc-cb-bouton--principal { background: var(--cb-bleu); border-color: var(--cb-bleu); color: #fff; }

#arc-cb .arc-cb-bouton--principal:hover:not(:disabled),
#arc-cb .arc-cb-bouton--principal:focus-visible:not(:disabled) {
	background: var(--cb-bleu-fonce);
	border-color: var(--cb-bleu-fonce);
	color: #fff;
}

#arc-cb .arc-cb-bouton--principal:disabled { background: var(--cb-gris); border-color: var(--cb-gris); color: #fff; }

#arc-cb .arc-cb-bouton--secondaire {
	background: #fff;
	border-color: #d6e4ee;
	color: #1077b3;
	padding: 7px 14px;
	font-size: 13.5px;
	border-radius: var(--cb-rayon-doux);
}

#arc-cb .arc-cb-bouton--secondaire:hover,
#arc-cb .arc-cb-bouton--secondaire:focus-visible { background: #eef4f9; color: #1077b3; border-color: #d6e4ee; }

/* --- Fil de discussion --- */
#arc-cb .arc-cb-fil {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
	min-height: 0;
	padding: 16px 14px 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
}

#arc-cb .arc-cb-msg {
	max-width: 88%;
	padding: 10px 14px;
	border-radius: var(--cb-rayon);
	font-size: 14.5px;
	line-height: 1.55;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

#arc-cb .arc-cb-msg--user {
	align-self: flex-end;
	background: var(--cb-bleu);
	color: #fff;
	border-bottom-right-radius: 4px;
}

#arc-cb .arc-cb-msg--bot,
#arc-cb .arc-cb-msg--accueil {
	align-self: flex-start;
	background: var(--cb-carte);
	border: 1px solid var(--cb-bordure);
	color: var(--cb-texte);
	border-bottom-left-radius: 4px;
}

#arc-cb .arc-cb-msg--accueil { background: var(--cb-bleu-pale); border-color: var(--cb-bordure-bleue); }

#arc-cb .arc-cb-msg__texte { white-space: pre-line; }

/* Renvoi [S1] dans le corps de la réponse. */
#arc-cb .arc-cb-ref {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	margin: 0 1px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--cb-bleu);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	vertical-align: 2px;
	transition: background-color var(--cb-transition);
}

#arc-cb .arc-cb-ref:hover,
#arc-cb .arc-cb-ref:focus-visible { background: var(--cb-bleu-fonce); color: #fff; }

#arc-cb a.arc-cb-ref { cursor: pointer; }

/* Infobulle des renvois : titre de l'article au survol (posée par le JS en
 * position fixe, hors du fil qui défile). */
#arc-cb .arc-cb-infobulle {
	position: fixed;
	z-index: 2;
	max-width: min(300px, calc(100vw - 16px));
	padding: 8px 12px;
	border-radius: var(--cb-rayon-doux);
	background: var(--cb-nuit);
	color: #fff;
	box-shadow: 0 8px 22px rgba(27, 42, 74, 0.28);
	font-size: 13px;
	line-height: 1.35;
	pointer-events: none;
}

#arc-cb .arc-cb-infobulle::after {
	content: "";
	position: absolute;
	top: 100%;
	left: var(--arc-cb-fleche, 50%);
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: var(--cb-nuit);
}

#arc-cb .arc-cb-infobulle--dessous::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: var(--cb-nuit);
}

#arc-cb .arc-cb-infobulle__action {
	display: block;
	margin-bottom: 2px;
	color: var(--cb-bleu-clair);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

#arc-cb .arc-cb-infobulle__titre { display: block; font-weight: 500; }

/* Bloc « Articles de référence » reconstruit depuis `sources`. */
#arc-cb .arc-cb-sources {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--cb-bordure);
	white-space: normal;
}

#arc-cb .arc-cb-sources__titre {
	margin-bottom: 8px;
	color: var(--cb-texte-doux);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#arc-cb .arc-cb-sources__liste { display: flex; flex-direction: column; gap: 6px; }

#arc-cb .arc-cb-source {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--cb-bordure-bleue-forte);
	border-radius: var(--cb-rayon-doux);
	background: #fff;
	color: var(--cb-bleu-fonce);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	transition: background-color var(--cb-transition), border-color var(--cb-transition);
}

#arc-cb a.arc-cb-source:hover,
#arc-cb a.arc-cb-source:focus-visible { background: var(--cb-bleu-pale); border-color: var(--cb-bleu); color: var(--cb-bleu-fonce); }

#arc-cb .arc-cb-source--sans-lien { color: var(--cb-texte-doux); border-color: var(--cb-bordure); }

#arc-cb .arc-cb-source__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--cb-bleu);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	flex: none;
}

#arc-cb .arc-cb-source__titre { flex: 1 1 auto; min-width: 0; }

#arc-cb .arc-cb-source .arc-cb-svg { width: 15px; height: 15px; opacity: 0.75; }

/* --- Attente de réponse --- */
#arc-cb .arc-cb-attente {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--cb-texte-doux);
}

#arc-cb .arc-cb-roue {
	width: 18px;
	height: 18px;
	border: 2.5px solid var(--cb-bordure-bleue);
	border-top-color: var(--cb-bleu);
	border-radius: 50%;
	flex: none;
	animation: arc-cb-rotation 0.8s linear infinite;
}

@keyframes arc-cb-rotation {
	to { transform: rotate(360deg); }
}

#arc-cb .arc-cb-attente__texte { font-size: 13.5px; font-style: italic; }

/* --- Erreur sous un message --- */
#arc-cb .arc-cb-erreur {
	align-self: flex-end;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	max-width: 88%;
	padding: 10px 14px;
	border: 1px solid #e0a0a0;
	border-radius: var(--cb-rayon-doux);
	background: var(--cb-rouge-pale);
	color: var(--cb-rouge);
	font-size: 13.5px;
	white-space: pre-line;
}

#arc-cb .arc-cb-erreur--bloc { align-self: stretch; max-width: none; }

/* --- Zone de saisie --- */
#arc-cb .arc-cb-saisie {
	flex: none;
	padding: 8px 12px 12px;
	border-top: 1px solid var(--cb-bordure);
	background: #fff;
}

#arc-cb .arc-cb-saisie__infos {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
	color: var(--cb-texte-doux);
	font-size: 12.5px;
}

#arc-cb .arc-cb-saisie__compteur--alerte { color: var(--cb-rouge); font-weight: 600; }

#arc-cb .arc-cb-saisie__ligne { display: flex; align-items: flex-end; gap: 8px; }

#arc-cb textarea.arc-cb-champ {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-height: 44px;
	max-height: 140px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--cb-bordure);
	border-radius: var(--cb-rayon-doux);
	background: #fff;
	color: var(--cb-texte);
	font-family: var(--cb-ui);
	font-size: 14.5px;
	line-height: 1.4;
	resize: none;
	box-shadow: none;
	transition: border-color var(--cb-transition), box-shadow var(--cb-transition), background-color var(--cb-transition);
}

#arc-cb textarea.arc-cb-champ::placeholder { color: #8a97ab; opacity: 1; }

#arc-cb textarea.arc-cb-champ:focus {
	border-color: var(--cb-bleu);
	box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
	outline: none;
}

#arc-cb .arc-cb-envoyer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--cb-rayon-doux);
	background: var(--cb-bleu);
	color: #fff;
	flex: none;
	transition: background-color var(--cb-transition);
}

#arc-cb .arc-cb-envoyer:hover:not(:disabled),
#arc-cb .arc-cb-envoyer:focus-visible:not(:disabled) { background: var(--cb-bleu-fonce); color: #fff; }

#arc-cb .arc-cb-envoyer:disabled { background: #c7d3df; color: #fff; }

#arc-cb .arc-cb-envoyer .arc-cb-svg { width: 20px; height: 20px; }

/* Conversation terminée : SEULE la barre de saisie est grisée, le fil reste
 * lisible tel quel (décision produit). */
#arc-cb .arc-cb-saisie--bloquee .arc-cb-saisie__ligne { opacity: 0.55; }

#arc-cb .arc-cb-saisie--bloquee textarea.arc-cb-champ {
	background: var(--cb-gris-pale);
	border-color: var(--cb-bordure);
	cursor: not-allowed;
}

/* --- Chargement / erreur de vue --- */
#arc-cb .arc-cb-etat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex: 1 1 auto;
	padding: 24px;
	color: var(--cb-texte-doux);
	font-size: 14px;
	text-align: center;
	white-space: pre-line;
}

/* --- Contact --- */
#arc-cb .arc-cb-contact { overflow-y: auto; }

#arc-cb .arc-cb-contact__corps { padding: 20px 20px 24px; }

#arc-cb .arc-cb-contact__titre {
	margin-bottom: 14px;
	color: var(--cb-nuit);
	font-family: var(--cb-titre);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

#arc-cb .arc-cb-contact__liste {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--cb-bordure);
	border-radius: var(--cb-rayon);
	background: var(--cb-carte);
}

#arc-cb .arc-cb-contact__ligne { display: flex; flex-direction: column; gap: 2px; }

#arc-cb .arc-cb-contact__libelle {
	color: var(--cb-texte-doux);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#arc-cb .arc-cb-contact__valeur { color: var(--cb-texte); font-size: 14.5px; }

#arc-cb .arc-cb-contact__lien { color: #1077b3; font-size: 15px; font-weight: 600; }

#arc-cb .arc-cb-contact__lien:hover,
#arc-cb .arc-cb-contact__lien:focus-visible { color: #007fb8; text-decoration: underline; }

#arc-cb .arc-cb-contact__action { margin-top: 16px; }

#arc-cb .arc-cb-contact__action .arc-cb-bouton { width: 100%; }

/* --- Pied --- */
#arc-cb .arc-cb-pied {
	flex: none;
	padding: 8px 16px 10px;
	border-top: 1px solid var(--cb-bordure);
	background: var(--cb-carte);
	color: var(--cb-texte-doux);
	font-size: 11.5px;
	line-height: 1.45;
}

#arc-cb .arc-cb-pied a { color: #1077b3; text-decoration: underline; }

#arc-cb .arc-cb-pied a:hover { color: #007fb8; }

/* === MOBILE : PANNEAU PLEIN ÉCRAN === */
@media (max-width: 767px) {
	#arc-cb.arc-cb--ouvert {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	#arc-cb .arc-cb-panneau {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-height: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	#arc-cb .arc-cb-entete { padding-top: max(14px, env(safe-area-inset-top)); }

	#arc-cb .arc-cb-saisie { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

	#arc-cb .arc-cb-fermer { width: 44px; height: 44px; }

	/* 16 px minimum dans les champs : en dessous, iOS zoome sur la page. */
	#arc-cb textarea.arc-cb-champ { font-size: 16px; }

	#arc-cb .arc-cb-msg { max-width: 92%; }
}

/* === BADGE reCAPTCHA v3 ===
   Google place son badge en bas à droite, par-dessus le bouton du chatbot.
   Masqué UNIQUEMENT après que le chatbot a lui-même sollicité reCAPTCHA v3
   (classe posée sur <html> par chatbot.js) : la mention exigée par Google
   est alors affichée dans le panneau. Avant cela, le badge éventuel des
   formulaires Elementor reste visible, comme le veulent ses conditions.
   `visibility` et non `display` : Google déconseille de retirer le badge
   du rendu, le jeton pourrait ne plus être délivré. */
html.arc-cb-recaptcha .grecaptcha-badge { visibility: hidden !important; }

/* Hôte du widget invisible de repli (hors panneau) : n'occupe aucune place. */
.arc-cb-recaptcha-hote { position: absolute; width: 0; height: 0; overflow: visible; }

/* La page derrière le panneau plein écran ne défile plus. */
html.arc-cb-verrou,
html.arc-cb-verrou body { overflow: hidden !important; }

/* === PRÉFÉRENCE D'ANIMATION RÉDUITE === */
@media (prefers-reduced-motion: reduce) {
	#arc-cb .arc-cb-panneau { animation: none; }

	#arc-cb .arc-cb-roue {
		animation-duration: 2.4s;
	}

	#arc-cb .arc-cb-lanceur,
	#arc-cb .arc-cb-lanceur:hover,
	#arc-cb .arc-cb-lanceur:focus-visible { transform: none; }

	#arc-cb *,
	#arc-cb *::before,
	#arc-cb *::after { transition-duration: 0.01ms !important; }
}