/**
 * Les deux formes d'affichage.
 *
 * Story 3.2. Aucune charte de lieu n'est embarquee : les couleurs passent par
 * des variables que le site redefinit, et les valeurs posees ici sont neutres
 * et contrastees, non decoratives. Le meme paquet sert cinq lieux.
 *
 * Les cibles tactiles font 44 px au minimum, contraste AA sur tous les textes.
 */

.clameurs-agents {
	--clameurs-agents-fond: #1c2733;
	--clameurs-agents-texte: #ffffff;
	--clameurs-agents-action-fond: #ffffff;
	--clameurs-agents-action-texte: #121a23;
	--clameurs-agents-contour: rgba( 255, 255, 255, 0.28 );
	--clameurs-agents-mention: #cdd6e0;

	/*
	 * De quoi porter la charte d'un site, et pas seulement ses couleurs.
	 *
	 * Les couleurs seules ne suffisaient pas : un site dont les boutons sont
	 * en capitales, dans une police de titrage et a angles droits recevait un
	 * bandeau aux bonnes teintes qui restait etranger a sa charte. Ces
	 * variables portent le reste, et leurs valeurs par defaut ne decident de
	 * rien : la police est heritee, la casse est celle du texte saisi.
	 */
	--clameurs-agents-police-titre: inherit;
	--clameurs-agents-police-action: inherit;
	--clameurs-agents-action-casse: none;
	--clameurs-agents-action-interlettre: normal;
	--clameurs-agents-action-graisse: 600;
	--clameurs-agents-rayon: 4px;

	/*
	 * Le survol, que rien ne portait.
	 *
	 * L'action ne changeait que de soulignement au survol. Sur un site dont
	 * les boutons changent de fond, l'ecart se voit. Par defaut, ces deux
	 * valeurs reprennent celles du repos : le comportement d'origine est
	 * conserve tant qu'un site ne les redefinit pas.
	 */
	--clameurs-agents-action-fond-survol: var( --clameurs-agents-action-fond );
	--clameurs-agents-action-texte-survol: var( --clameurs-agents-action-texte );

	/*
	 * 🔴 De quoi s'ecarter de ce qui occupe deja le coin bas droit.
	 *
	 * Un cadenas de consentement, un bouton d'aide, un appel a l'action
	 * flottant : beaucoup de sites y posent quelque chose, et la croix de
	 * fermeture se retrouve dessous, donc inatteignable. Constate sur le
	 * premier deploiement, ou l'icone du gestionnaire de consentement
	 * recouvrait exactement la croix.
	 *
	 * Le paquet ne peut pas connaitre ces elements, ils appartiennent au
	 * site. Le site redefinit donc ces deux marges, et rien ici n'a besoin
	 * de savoir ce qu'il y a en dessous.
	 */
	--clameurs-agents-marge-bas: 0px;
	--clameurs-agents-marge-droite: 0px;

	position: fixed;
	z-index: 99990;
	box-sizing: border-box;
	background: var( --clameurs-agents-fond );
	color: var( --clameurs-agents-texte );
	font-family: inherit;
	font-size: 16px;
	line-height: 1.45;
	box-shadow: 0 -2px 24px rgba( 0, 0, 0, 0.22 );
}

.clameurs-agents[hidden] {
	display: none;
}

/*
 * L'essai : pose dans le document, mesurable au survol, invisible a l'oeil.
 *
 * Ni « visibility: hidden » ni « display: none » ne conviennent : les deux
 * retirent l'element du test de survol, donc de ce qu'on cherche justement a
 * mesurer. L'opacite nulle laisse l'element se faire tester tout en ne
 * peignant rien.
 */
.clameurs-agents--essai {
	opacity: 0;
}

.clameurs-agents *,
.clameurs-agents *::before,
.clameurs-agents *::after {
	box-sizing: inherit;
}

.clameurs-agents__corps {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/*
 * Alignement a gauche impose, et c'est une reprise de main sur le theme.
 *
 * Mesure du 01/09/2026 sur le site pilote : son theme applique
 * `text-align: justify` a tous les paragraphes, et nos trois textes en
 * heritaient. Dans une fenetre de 280 px, la justification creuse des trous
 * entre les mots, au point de rendre le message penible a lire.
 *
 * Le conteneur etait deja en `start`, mais un alignement ne se transmet pas
 * a des enfants qui recoivent leur propre regle : c'est l'heritage du theme
 * qui gagnait sur les `p`. Une regle simple suffit, aucun `!important`
 * n'est necessaire, verifie sur la page rendue avant d'ecrire ceci.
 */
.clameurs-agents__titre,
.clameurs-agents__message,
.clameurs-agents__mention {
	text-align: left;
}

.clameurs-agents__titre {
	margin: 0;
	font-family: var( --clameurs-agents-police-titre );
	font-size: 17px;
	font-weight: 700;
}

.clameurs-agents__message {
	margin: 0;
	color: var( --clameurs-agents-texte );
}

.clameurs-agents__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: var( --clameurs-agents-rayon );
	background: var( --clameurs-agents-action-fond );
	color: var( --clameurs-agents-action-texte );
	font-family: var( --clameurs-agents-police-action );
	font-weight: var( --clameurs-agents-action-graisse );
	letter-spacing: var( --clameurs-agents-action-interlettre );
	text-transform: var( --clameurs-agents-action-casse );
	transition: background 0.2s, color 0.2s;
	text-align: center;
	text-decoration: none;
}

.clameurs-agents__action:hover,
.clameurs-agents__action:focus {
	background: var( --clameurs-agents-action-fond-survol );
	color: var( --clameurs-agents-action-texte-survol );
	text-decoration: underline;
}

/*
 * La mention d'information. Discrete, jamais illisible : 13 px et un contraste
 * qui reste au dessus du seuil AA, la ou beaucoup de sites la posent en gris
 * clair sur fond clair pour la faire disparaitre sans l'enlever.
 */
.clameurs-agents__mention {
	margin: 0;
	color: var( --clameurs-agents-mention );
	font-size: 13px;
	line-height: 1.35;
}

.clameurs-agents--bandeau .clameurs-agents__mention {
	flex: 0 0 auto;
	order: 3;
	width: 100%;
	/*
	 * La mention se detache de l'action au lieu de s'y coller.
	 *
	 * La marge negative la remontait sous le bouton, et les deux se lisaient
	 * comme un seul bloc : la mention d'information de FR-18 avait l'air d'une
	 * legende du bouton, alors qu'elle porte sur le dispositif entier.
	 */
	margin-top: 6px;
}

.clameurs-agents__fermer {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var( --clameurs-agents-contour );
	border-radius: 4px;
	background: transparent;
	color: var( --clameurs-agents-texte );
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.clameurs-agents__fermer:hover {
	background: rgba( 255, 255, 255, 0.12 );
}

/* Le contour de focus est visible sur le fond sombre comme sur le bouton clair. */
.clameurs-agents__action:focus-visible,
.clameurs-agents__fermer:focus-visible {
	outline: 3px solid #ffd24d;
	outline-offset: 2px;
}

/*
 * Bandeau : une ligne et un bouton, fixe en bas, sur toute la largeur.
 */
.clameurs-agents--bandeau {
	right: 0;
	bottom: var( --clameurs-agents-marge-bas );
	left: 0;
	padding: 14px calc( 72px + var( --clameurs-agents-marge-droite ) ) 14px 20px;
}

/* Le bandeau est bas : la croix s'y centre, au lieu de se caler en haut. */
.clameurs-agents--bandeau .clameurs-agents__fermer {
	top: 50%;
	right: calc( 14px + var( --clameurs-agents-marge-droite ) );
	transform: translateY( -50% );
}

.clameurs-agents--bandeau .clameurs-agents__corps {
	flex-flow: row wrap;
	align-items: center;
	gap: 6px 18px;
	max-width: 1180px;
	margin: 0 auto;
}

/*
 * Le texte a gauche, l'action a droite, sur une seule ligne tant que la place
 * le permet.
 *
 * Le message prenait toute la largeur disponible et repoussait l'action a la
 * ligne suivante, ou elle se retrouvait seule sous un paragraphe : la lecture
 * y perdait le rapport entre ce qui est propose et ce sur quoi on clique. Une
 * base de 340 px laisse le message occuper l'espace restant sans chasser
 * l'action, qui va se caler a droite.
 */
.clameurs-agents--bandeau .clameurs-agents__message {
	flex: 1 1 340px;
}

.clameurs-agents--bandeau .clameurs-agents__action {
	margin-left: auto;
}

.clameurs-agents--bandeau .clameurs-agents__action {
	flex: 0 0 auto;
}

/*
 * Fenetre legere : 280 px, ancree en bas a droite.
 */
.clameurs-agents--fenetre_legere {
	right: calc( 20px + var( --clameurs-agents-marge-droite ) );
	bottom: calc( 20px + var( --clameurs-agents-marge-bas ) );
	width: 280px;
	max-width: calc( 100vw - 40px );
	padding: 18px 18px 20px;
	border-radius: 8px;
}

.clameurs-agents--fenetre_legere .clameurs-agents__titre {
	padding-right: 44px;
}

.clameurs-agents--fenetre_legere .clameurs-agents__action {
	width: 100%;
}

/*
 * Sous 782 px, la fenetre devient un tiroir pleine largeur, et le bandeau
 * empile ses elements plutot que de comprimer son bouton sous la cible
 * tactile minimale.
 */
@media ( max-width: 782px ) {
	/*
	 * La place de la croix est reservee sur le message seul, et non sur tout
	 * le bandeau : sinon le bouton s'arrete sous elle et laisse un vide a
	 * droite, alors qu'il est empile et devrait prendre toute la largeur.
	 */
	.clameurs-agents--bandeau {
		padding: 14px 16px 16px;
	}

	.clameurs-agents--bandeau .clameurs-agents__message {
		padding-right: 46px;
	}

	.clameurs-agents--bandeau .clameurs-agents__fermer {
		top: 12px;
		right: 12px;
		transform: none;
	}

	.clameurs-agents--bandeau .clameurs-agents__corps {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	/*
	 * 🔴 La base flex redevient automatique des que le corps passe en colonne.
	 *
	 * En ligne, « flex-basis: 340px » est une largeur et empeche le message de
	 * chasser l'action. En colonne, le meme chiffre devient une HAUTEUR de
	 * base : le bandeau passait de 232 px a 462 px sur un telephone, soit plus
	 * de la moitie de l'ecran. Mesure du 31/08/2026 en 390 px de large.
	 */
	.clameurs-agents--bandeau .clameurs-agents__message {
		flex: 1 1 auto;
	}

	/* En colonne, l'action ne se cale plus a droite, elle occupe la largeur. */
	.clameurs-agents--bandeau .clameurs-agents__action {
		margin-left: 0;
	}

	.clameurs-agents--bandeau .clameurs-agents__action {
		width: 100%;
	}

	.clameurs-agents--fenetre_legere {
		right: 0;
		bottom: var( --clameurs-agents-marge-bas );
		left: 0;
		width: auto;
		max-width: none;
		padding: 18px 18px 22px;
		border-radius: 12px 12px 0 0;
	}

	/* La poignee du tiroir, qui montre que le glissement vers le bas ferme. */
	.clameurs-agents--fenetre_legere::before {
		content: "";
		display: block;
		width: 44px;
		height: 4px;
		margin: 0 auto 14px;
		border-radius: 2px;
		background: var( --clameurs-agents-contour );
	}
}

/*
 * L'apparition est une transition courte, et rien du tout pour qui a demande
 * a ce que les animations se taisent.
 */
@media ( prefers-reduced-motion: no-preference ) {
	.clameurs-agents:not( .clameurs-agents--essai ) {
		animation: clameurs-agents-apparition 220ms ease-out;
	}

	@keyframes clameurs-agents-apparition {
		from {
			opacity: 0;
			transform: translateY( 12px );
		}

		to {
			opacity: 1;
			transform: translateY( 0 );
		}
	}
}