/**
 * Tikus, côté site.
 *
 * AUCUN COMPOSANT N'EST RÉINVENTÉ. Les boutons sont les `.bouton`,
 * `.bouton--second` de Corpus, les blocs d'alerte ses `message filet
 * message--*`. Redessiner un bouton, c'est oublier un état : le 17 août 2026,
 * mon `.tikus-bouton` n'avait pas de couleur de texte au survol, et le
 * `a:hover` global de Corpus reprenait la main, texte accent sur fond accent,
 * donc illisible.
 *
 * AUCUNE COULEUR N'EST ÉCRITE ICI, pas même en valeur de secours : uniquement
 * les jetons de Corpus. Sur un autre template, ces jetons n'existent pas et la
 * couleur est simplement héritée, ce qui vaut mieux qu'une valeur inventée qui
 * jurerait avec le reste du site.
 *
 * Les blocs d'état et d'avertissement n'ont AUCUNE règle ici : ils emploient
 * les classes de Corpus telles quelles, `message filet message--info`,
 * `message--alerte`, `message--succes`. Couleurs, pictogramme, filet et angles
 * viennent donc du template et suivent la teinte choisie par le client.
 *
 * Les messages du fil reprennent la même grammaire visuelle : fond doux et
 * intitulé écrit, mais leur filet passe **à gauche**, comme sur une citation,
 * parce qu'un échange n'est pas une alerte.
 */

.tikus {
	--tikus-fond: var(--fond);
	--tikus-fond-alt: var(--fond-alt);
	--tikus-texte: var(--texte);
	--tikus-texte-doux: var(--texte-doux);
	--tikus-trait: var(--filet-couleur);
	--tikus-accent: var(--accent);
	--tikus-accent-texte: var(--accent-texte);
	--tikus-succes: var(--succes);
	--tikus-alerte: var(--alerte);
	--tikus-info: var(--info);
	--tikus-info-fond: var(--info-fond);
	--tikus-angle: var(--forme-carte-angle, 6px);
	--tikus-angle-champ: var(--forme-champ-angle, 6px);
	--tikus-angle-message: var(--forme-message-angle, var(--tikus-angle));

	color: var(--tikus-texte);
	inline-size: 100%;
}

/* ---- Toute la largeur disponible ------------------------------------ */

.tikus-formulaire,
.tikus-formulaire-clore,
.tikus-messages,
.tikus-demandes,
.tikus-liens {
	inline-size: 100%;
	max-inline-size: none;
}

/* L'éditeur de Joomla se pose dans un conteneur qui, laissé à lui-même,
   garde la largeur d'un champ de formulaire. */
.tikus-formulaire .control-group,
.tikus-formulaire .controls,
.tikus-formulaire .js-editor-none,
.tikus-formulaire .editor,
.tikus-formulaire .tox-tinymce,
.tikus-formulaire textarea,
.tikus-formulaire input[type="text"],
.tikus-formulaire select {
	inline-size: 100%;
	max-inline-size: none;
	box-sizing: border-box;
}

.tikus-formulaire .tox-tinymce {
	min-block-size: 18rem;
}

.tikus-formulaire label {
	display: block;
	font-weight: 600;
	margin-block-end: 0.3rem;
}

/* ---- Mes demandes ---------------------------------------------------- */

.tikus-demandes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tikus-demande {
	border-block-end: 1px solid var(--filet-couleur);
	padding-block: 1rem;
}

.tikus-demande:last-child {
	border-block-end: none;
}

.tikus-demande h3 {
	margin: 0 0 0.3rem;
}

.tikus-meta {
	font-size: 0.88rem;
	color: var(--tikus-texte-doux);
	margin: 0.2rem 0 0.6rem;
}

.tikus-meta span + span::before {
	content: " · ";
}

/* ---- Le fil ---------------------------------------------------------- */

.tikus-messages {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

.tikus-message {
	padding: 0.9rem 1.1rem 1rem;
	margin-block-end: 1rem;
	border-radius: var(--tikus-angle-message);
	background: var(--tikus-fond-alt);
	--filet-couleur: var(--accent);
}

/* La réponse de l'assistance se distingue comme un bloc d'information de
   Corpus : même fond, même couleur de filet. */
.tikus-message--assistance {
	background: var(--tikus-info-fond);
	--filet-couleur: var(--info);
}

.tikus-message-entete {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: space-between;
	margin: 0 0 0.5rem;
	font-size: 0.88rem;
	color: var(--tikus-texte-doux);
}

.tikus-auteur {
	font-weight: 700;
	color: var(--filet-couleur, var(--tikus-texte));
}

.tikus-corps > :first-child {
	margin-block-start: 0;
}

.tikus-corps > :last-child {
	margin-block-end: 0;
}

/* ---- Liens de captures ----------------------------------------------- */

.tikus-liens {
	list-style: none;
	margin: 0.8rem 0 0;
	padding: 0;
	font-size: 0.9rem;
}

.tikus-liens li {
	border: 1px solid var(--filet-couleur);
	border-radius: var(--tikus-angle);
	padding: 0.4rem 0.7rem;
	margin-block-end: 0.4rem;
	word-break: break-all;
	background: var(--tikus-fond);
}

.tikus-hote-inconnu {
	color: var(--alerte);
	font-weight: 700;
	font-size: 0.82rem;
}

/* ---- Formulaires ----------------------------------------------------- */

.tikus-actions {
	margin-block-start: 1.2rem;
}

.tikus-formulaire-clore {
	margin-block-start: 2.5rem;
	padding-block-start: 1.2rem;
	border-block-start: 1px solid var(--filet-couleur);
}

.tikus-retour {
	font-size: 0.92rem;
}

/* ---- Le module « Mon assistance » ------------------------------------ */

.tikus-module-compte {
	font-weight: 600;
	margin-block: 0 0.6rem;
}

.tikus-module-liste {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	font-size: 0.92rem;
}

.tikus-module-liste li {
	border-block-end: 1px solid var(--filet-couleur);
	padding-block: 0.5rem;
}

.tikus-module-liste li:last-child {
	border-block-end: none;
}

.tikus-module-liste .tikus-etat,
.tikus-module-liste .tikus-meta {
	display: block;
}

.tikus-module-liste .tikus-etat {
	font-weight: 600;
	font-size: 0.85rem;
}

/* La mention de nouvelle fenêtre est lue, pas vue : RGAA 13.2. */
.tikus-nouvelle-fenetre {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Le trait des échanges -------------------------------------------

   Un fil de discussion n'est pas une suite d'alertes : le trait passe à
   gauche, comme sur une citation, au lieu de courir sous le bloc.

   La géométrie n'est pas inventée, elle est recopiée de `blockquote::after`
   de Corpus, qui fait déjà exactement cela :

       top: auto; bottom: 0; left: 0;
       width: var(--filet-epaisseur);
       height: var(--filet-part);

   Le trait part donc de l'angle en bas à gauche et remonte sur
   `--filet-part`, réglé à 70 % par le template. Rien d'autre n'est repris
   de la citation : ni son fond, ni son italique, ni sa police.

   Écrire 70 % en dur aurait cassé la variante `sans-filet` de Corpus, qui
   se contente de poser `--filet-part: 0` pour faire disparaître tous les
   filets du site. En passant par le jeton, le nôtre disparaît avec eux.

   Le reste (contenu, position absolue, couleur, arrondi) vient de la règle
   `.filet::after` de Corpus, déjà appliquée par la classe `filet` posée sur
   le bloc. Ne vise que `.tikus-message` : les blocs d'état et
   d'avertissement gardent le filet du dessous. */
.tikus-message.filet::after {
	top: auto;
	bottom: 0;
	left: 0;
	width: var(--filet-epaisseur);
	height: var(--filet-part);
}

/* ---- Les pièces jointes ----------------------------------------------

   Même habillage que les liens juste au-dessus : un cadre au filet de
   Corpus, l'angle et le fond de Tikus. Rien de nouveau n'est inventé, les
   deux listes disent la même chose et doivent se ressembler.

   La vignette est bornée en hauteur, pas en largeur : une capture d'écran
   est large et plate, la brider par la largeur la réduirait à un timbre. */
.tikus-pieces {
	list-style: none;
	margin: 0.8rem 0 0;
	padding: 0;
	font-size: 0.9rem;
}

.tikus-piece {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--filet-couleur);
	border-radius: var(--tikus-angle);
	padding: 0.4rem 0.7rem;
	margin-block-end: 0.4rem;
	word-break: break-all;
	background: var(--tikus-fond);
}

.tikus-vignette {
	display: block;
	max-block-size: 6rem;
	inline-size: auto;
	border-radius: var(--tikus-angle);
}

.tikus-depot {
	margin-block: 1rem;
}

.tikus-depot input[type="file"] {
	display: block;
	margin-block-start: 0.3rem;
}

/* ---- La progression d'un dépôt ---------------------------------------

   Corpus n'a pas de barre de progression : une recherche de `.progress`
   dans sa feuille ne rend aucune règle. On prend donc l'élément `progress`
   du navigateur, qui est accessible sans classe et annonce sa valeur tout
   seul aux lecteurs d'écran. Il ne lui manque que ses deux couleurs, et
   elles viennent des jetons de Corpus, pas d'un code écrit ici.

   Les trois pseudo-éléments sont la seule façon de peindre cet élément :
   WebKit veut `::-webkit-progress-bar` pour le fond et
   `::-webkit-progress-value` pour la part remplie, Firefox veut
   `::-moz-progress-bar` pour la part remplie. Ils ne se regroupent pas :
   un sélecteur inconnu invaliderait toute la règle. */
.tikus-barre {
	inline-size: 100%;
	block-size: 1rem;
	appearance: none;
	border: 0;
	border-radius: var(--tikus-angle);
	background: var(--tikus-fond);
}

.tikus-barre::-webkit-progress-bar {
	background: var(--tikus-fond);
	border-radius: var(--tikus-angle);
}

.tikus-barre::-webkit-progress-value {
	background: var(--filet-couleur, var(--accent));
	border-radius: var(--tikus-angle);
}

.tikus-barre::-moz-progress-bar {
	background: var(--filet-couleur, var(--accent));
	border-radius: var(--tikus-angle);
}

/* Les deux boutons d'une pièce restent groupés à droite de son nom. */
.tikus-piece-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-inline-start: auto;
}

/* Le nom d'une pièce et sa vignette restent groupés à gauche de la ligne. */
.tikus-piece-nom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

/* ---- La page publique d'accueil -------------------------------------- */

/*
 * Le texte d'introduction vient de l'élément de menu : on ne sait pas ce
 * qu'il contient, on lui donne donc seulement de l'air, pas une mise en
 * forme qui lutterait avec celle du modèle du site.
 */
.tikus-accueil-intro > :first-child {
	margin-block-start: 0;
}

.tikus-accueil-intro > :last-child {
	margin-block-end: 0;
}

/*
 * Les quatre sortes de demandes. Deux colonnes dès qu'il y a la place, une
 * seule sinon : `auto-fit` s'en charge sans point de rupture à surveiller.
 */
.tikus-types {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
	margin: 0 0 2rem;
	padding: 0;
}

.tikus-type {
	border-radius: var(--tikus-angle);
	background: var(--tikus-fond-alt);
	padding: 1rem 1.2rem;
}

.tikus-type-titre {
	margin: 0 0 0.3rem;
	font-weight: 600;
	color: var(--filet-couleur, var(--tikus-texte));
}

.tikus-type p:last-child {
	margin-block-end: 0;
}

/* L'appel à l'action ferme la page : les boutons côte à côte, puis la note. */
.tikus-accueil-action p {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.tikus-accueil-action .note {
	display: block;
	color: var(--tikus-texte-doux);
	font-size: 0.9em;
}