/*
Theme Name: Routes vers l'IA
Theme URI: https://www.ene.fr/
Author: ENE — Experts du Numérique en Entreprises
Author URI: https://www.ene.fr/
Description: Thème de blocs du site « Les Routes vers l'IA dans l'Industrie », programme porté par l'ENE et la DREETS Auvergne-Rhône-Alpes. Conçu pour ce site uniquement : tout y est éditable depuis l'éditeur de site, sans code.
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.3
Version: 1.2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: routes-vers-ia
Tags: one-column, full-site-editing, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, translation-ready, wide-blocks
*/

/*
Routes vers l'IA WordPress Theme, (C) 2026 ENE — Experts du Numérique en Entreprises.
Routes vers l'IA is distributed under the terms of the GNU GPL version 2 or later.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
*/

/*
 * Ce fichier ne contient que ce que theme.json ne sait pas exprimer.
 * Tout ce qui peut être déclaré dans theme.json doit l'être : c'est la source
 * de vérité du thème, et c'est ce que l'éditeur de site sait relire.
 *
 * Ne rien ajouter ici sans avoir vérifié que theme.json ne peut pas le faire.
 */

/* --------------------------------------------------------------------------
 * Bandeau partenaires
 * -------------------------------------------------------------------------- */

.rvia-bandeau {
	border-bottom: 1px solid var(--wp--preset--color--lilas);
}

/* Les logos sont séparés par un filet, sauf le premier de chaque groupe. */
.rvia-bandeau__logos .rvia-bandeau__logo {
	margin: 0;
	padding: 0 28px;
	border-left: 1px solid var(--wp--preset--color--lilas);
}

.rvia-bandeau__logos .rvia-bandeau__logo:first-child {
	padding-left: 0;
	border-left: 0;
}

.rvia-bandeau__logo img {
	display: block;
	mix-blend-mode: multiply;
}

/*
 * Sous 960 px, les intitulés disparaissent et les logos se centrent.
 * L'artefact bascule à 760 px, mais à cette largeur le bandeau passait déjà
 * sur deux rangées et doublait de hauteur : on anticipe d'un cran.
 */
@media (width <= 960px) {
	.rvia-bandeau__intitule {
		display: none;
	}

	.rvia-bandeau > .wp-block-group {
		justify-content: center;
	}

	.rvia-bandeau__logos .rvia-bandeau__logo {
		padding: 0 16px;
	}
}

/* --------------------------------------------------------------------------
 * Grammaire d'interaction
 * -------------------------------------------------------------------------- */

/*
 * Le design system ne donne pas que des couleurs et des tailles : il donne
 * des durées, une courbe, une échelle d'ombres et un anneau de focus. Rien de
 * tout cela ne passe par theme.json, et rien de tout cela n'était repris.
 * Les valeurs viennent de tokens.css et de components/bundle.css.
 */
:root {
	--rvia-duree-rapide: 140ms;
	--rvia-duree: 220ms;
	--rvia-elan: cubic-bezier(0.2, 0.6, 0.2, 1);

	--rvia-ombre-s: 0 1px 2px rgba(13, 6, 118, 0.05), 0 4px 14px rgba(13, 6, 118, 0.07);
	--rvia-ombre: 0 2px 4px rgba(13, 6, 118, 0.05), 0 10px 28px rgba(13, 6, 118, 0.09);
	--rvia-ombre-l: 0 4px 10px rgba(13, 6, 118, 0.06), 0 20px 48px rgba(13, 6, 118, 0.13);
	--rvia-ombre-violet: 0 6px 18px rgba(84, 28, 255, 0.28);

	/* Bord discret des cartes, et le violet de survol des boutons. Tenus ici
	   plutôt que dans la palette : ce sont des valeurs de rendu, pas des
	   couleurs à proposer aux éditeurs. */
	--rvia-bord-fin: #e6e9f5;
	--rvia-violet-survol: #4816e0;
}

/*
 * Toute l'animation du thème tient dans des transitions de 140 à 220 ms. Qui
 * demande moins de mouvement n'en a aucun : la règle ci-dessous coupe tout,
 * y compris le défilement adouci.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
 * Mise en page générale
 * -------------------------------------------------------------------------- */

/*
 * Les liens d'ancre — « Voir l'agenda », « Découvrir le programme » — amenaient
 * leur cible sous la barre de menu, qui est collante. La marge de défilement
 * réserve sa hauteur.
 *
 * Pas de « scroll-behavior: smooth » : mesuré, il **casse** les ancres d'une
 * page à l'autre. Chrome anime le saut au chargement, la hauteur du document
 * change pendant que les images arrivent, l'animation est annulée et la page
 * reste en haut. « Découvrir le programme » menait ainsi en haut de l'agenda
 * au lieu du programme.
 */
:target {
	scroll-margin-top: 100px;
}

/*
 * Les titres se coupent mieux quand le navigateur équilibre leurs lignes, et
 * les textes d'introduction évitent les lignes veuves. Progressif : les
 * navigateurs qui l'ignorent rendent exactement comme avant.
 */
:is(h1, h2, h3) {
	text-wrap: balance;
}

.entry-content p {
	text-wrap: pretty;
}

::selection {
	background: var(--wp--preset--color--lilas);
	color: var(--wp--preset--color--bleu-nuit);
}


/*
 * WordPress glisse une marge entre chaque enfant direct de .wp-site-blocks.
 * Elle posait une bande blanche de 54 px entre le bandeau partenaires, la
 * barre de menu et la première section — l'en-tête paraissait trois fois
 * plus épais qu'il ne l'est. Les sections portent déjà leur marge
 * intérieure : celle-ci n'a rien à faire là.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
 * En-tête
 * -------------------------------------------------------------------------- */

/* L'artefact donne 76 px à la barre, sans marge au-dessus ni en dessous. */
.rvia-entete > .wp-block-group {
	min-height: 76px;
}

/*
 * La barre était déclarée collante mais ne collait pas : « position: sticky »
 * portait sur le groupe intérieur, qui ne peut pas bouger à l'intérieur de
 * la partie de modèle qui l'enveloppe et qui fait exactement sa hauteur.
 * C'est l'enveloppe qu'il faut rendre collante.
 */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 50;
}

.rvia-entete {
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* --------------------------------------------------------------------------
 * Pied de page
 * -------------------------------------------------------------------------- */

.rvia-pied__bas {
	border-top: 1px solid var(--wp--preset--color--lilas);
}

.rvia-pied__liens {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rvia-pied__liens li + li {
	margin-top: 8px;
}

.rvia-pied__liens a,
.rvia-pied__legal a {
	color: var(--wp--preset--color--bleu-nuit);
}

.rvia-pied__logos figure {
	margin: 0;
}

.rvia-pied__logos img {
	display: block;
	mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
 * Pastille à pictogramme (programme d'une conférence)
 * -------------------------------------------------------------------------- */

/*
 * Le pictogramme se superpose à la pastille, centré dans ses 80 % supérieurs :
 * la pointe de la goutte occupe le bas et doit rester vide.
 */
.rvia-pastille {
	position: relative;
	width: 45px;
}

.rvia-pastille__fond,
.rvia-pastille__picto {
	margin: 0;
}

.rvia-pastille__picto {
	position: absolute;
	inset: 0 0 auto 0;
	height: 80%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
 * Visuels encadrés
 * -------------------------------------------------------------------------- */

.rvia-visuel img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 2px 4px rgba(13, 6, 118, 0.05), 0 10px 28px rgba(13, 6, 118, 0.09);
}

/* --------------------------------------------------------------------------
 * Présentation
 * -------------------------------------------------------------------------- */

/* Les chiffres clés sont séparés du titre par un filet, comme dans l'artefact. */
.rvia-chiffres {
	border-left: 1px solid var(--wp--preset--color--lilas);
}

@media (width <= 960px) {
	.rvia-chiffres {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--lilas);
		padding-left: 0 !important;
		padding-top: var(--wp--preset--spacing--60);
	}
}

/*
 * Portrait rond, cerclé d'un halo violet de 12 px. Le halo déborde du cadre
 * de l'image : sans la marge, il venait toucher le nom juste dessous.
 * Sélecteur à deux classes, parce que la mise en page de blocs remet à zéro
 * les marges de ses enfants.
 */
.rvia-interviewe__portrait img {
	box-shadow: 0 0 0 12px rgba(84, 28, 255, 0.14);
}

.rvia-interviewe > .rvia-interviewe__portrait {
	margin: 12px;
}

/* Numéro de question : pastille ronde centrée. */
.rvia-qr__numero {
	width: 36px;
	height: 36px;
	text-align: center;
}

/* --------------------------------------------------------------------------
 * Formulaire de contact (Contact Form 7)
 * -------------------------------------------------------------------------- */

/*
 * La première étiquette du formulaire se posait exactement au niveau du haut
 * de « Avançons ensemble » : une étiquette de 14 px alignée sur un titre de
 * 32 px paraît flotter au-dessus de lui. Douze pixels suffisent à la faire
 * descendre sur la ligne du titre.
 */
@media (width > 960px) {
	.rvia-formulaire {
		padding-top: var(--wp--preset--spacing--30);
	}
}

.rvia-formulaire .wpcf7-form p {
	margin: 0 0 var(--wp--preset--spacing--50);
}

.rvia-formulaire label {
	display: block;
	font-size: 14px;
	font-weight: 700;
}

.rvia-formulaire__ligne {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--50);
}

@media (width <= 640px) {
	.rvia-formulaire__ligne {
		grid-template-columns: 1fr;
	}
}

.rvia-formulaire input[type="text"],
.rvia-formulaire input[type="email"],
.rvia-formulaire select,
.rvia-formulaire textarea {
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
	/* 13px de part et d'autre portent la hauteur à 44px, seuil tactile. */
	padding: 13px 14px;
	border: 1px solid var(--wp--preset--color--lilas);
	border-radius: 6px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	color: var(--wp--preset--color--bleu-nuit);
	background: var(--wp--preset--color--blanc);
}

.rvia-formulaire :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--violet-ene);
	outline-offset: 2px;
}

/*
 * Une case à cocher mesure une douzaine de pixels : c'est son étiquette qui
 * doit offrir la zone tactile, d'où la hauteur minimale.
 */
.rvia-formulaire .wpcf7-acceptance label,
.rvia-formulaire .wpcf7-list-item label {
	display: flex;
	gap: 10px;
	align-items: center;
	min-height: 44px;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
}

.rvia-formulaire .wpcf7-list-item {
	margin: 0;
}

.rvia-formulaire input[type="submit"] {
	min-height: 44px;
	padding: 14px var(--wp--preset--spacing--50);
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--violet-ene);
	color: var(--wp--preset--color--blanc);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.rvia-formulaire input[type="submit"]:hover {
	background: var(--wp--preset--color--violet-700);
}

/* --------------------------------------------------------------------------
 * Chatbot
 * -------------------------------------------------------------------------- */

/* Repères de confiance : le pictogramme ne doit pas se rétrécir. */
.rvia-repere__picto {
	margin: 0;
	flex: none;
}

/* Sur l'aplat violet, les pictogrammes doivent ressortir en clair. */
.is-style-section-violet .rvia-repere__picto img {
	filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
 * Questions fréquentes
 * -------------------------------------------------------------------------- */

/*
 * L'artefact pose chaque question dans une carte blanche cerclée d'un bord
 * fin, avec un « + » violet à droite qui devient « – » à l'ouverture. Je
 * n'avais repris qu'un filet sous chaque ligne : la liste se lisait mal, et
 * rien n'indiquait qu'on pouvait déplier.
 */
.rvia-faq .wp-block-details {
	background: var(--wp--preset--color--blanc);
	border: 1px solid var(--rvia-bord-fin);
	border-radius: 6px;
	padding: 0 var(--wp--preset--spacing--50);
	transition: box-shadow var(--rvia-duree) var(--rvia-elan);
}

.rvia-faq .wp-block-details:hover,
.rvia-faq .wp-block-details[open] {
	box-shadow: var(--rvia-ombre-s);
}

.rvia-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--fagun);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--bleu-nuit);
	cursor: pointer;
	padding: var(--wp--preset--spacing--40) 0;
	list-style: none;
}

.rvia-faq summary::-webkit-details-marker {
	display: none;
}

/*
 * Le repère est dessiné, pas écrit : un « + » en texte serait lu à voix
 * haute par certains lecteurs d'écran, alors que l'état plié ou déplié est
 * déjà porté par l'élément lui-même.
 */
.rvia-faq summary::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background:
		linear-gradient(var(--wp--preset--color--violet-ene) 0 0) center / 100% 2px no-repeat,
		linear-gradient(var(--wp--preset--color--violet-ene) 0 0) center / 2px 100% no-repeat;
	transition:
		background-size var(--rvia-duree) var(--rvia-elan),
		transform var(--rvia-duree) var(--rvia-elan);
}

.rvia-faq .wp-block-details[open] > summary::after {
	background-size: 100% 2px, 2px 0;
	transform: rotate(180deg);
}

.rvia-faq summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--violet-ene);
	outline-offset: 2px;
}

.rvia-faq .wp-block-details p {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--bleu-nuit-doux);
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
 * Filet de sécurité sur les mots longs
 * -------------------------------------------------------------------------- */

/*
 * Les titres sont fluides (clamp) pour tenir sur les écrans étroits, comme
 * dans l'artefact. Ce filet attrape les cas restants : un nom de ville ou
 * d'entreprise plus long que la colonne doit se couper plutôt que déborder.
 */
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
 * En-tête : repli de la barre sur écran étroit
 * -------------------------------------------------------------------------- */

/*
 * La navigation reste toujours visible, sans superposition : c'est ce que
 * fait l'artefact, dont la barre se replie simplement, et cela garantit que
 * le menu reste atteignable sans JavaScript — ce qu'exige le cadrage §10.
 */
@media (width <= 640px) {
	.rvia-entete > .wp-block-group {
		justify-content: center;
		row-gap: var(--wp--preset--spacing--20);
		column-gap: var(--wp--preset--spacing--30);
	}
}

/*
 * Zones tactiles : les liens du menu et du pied de page doivent faire au
 * moins 44 px de haut, seuil en deçà duquel ils deviennent difficiles à
 * viser au doigt.
 */
.rvia-entete .wp-block-navigation-item__content,
.rvia-pied__liens a,
.rvia-pied__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* --------------------------------------------------------------------------
 * Liens, logos : les détails de rendu du design system
 * -------------------------------------------------------------------------- */

/*
 * Le soulignement des liens de l'artefact est fin et décollé du texte —
 * 1 px, 3 px plus bas — ce qui laisse respirer les jambages. Les accents
 * français en profitent particulièrement.
 */
.entry-content a:not(.wp-block-button__link),
.rvia-pied a {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--rvia-duree-rapide) var(--rvia-elan);
}

.entry-content a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--violet-700);
}

.rvia-pied__liens a:hover,
.rvia-pied__legal a:hover {
	color: var(--wp--preset--color--violet-ene);
}

/*
 * Les logos partenaires sont des liens vers les sites des partenaires. Rien
 * ne le disait : ils prennent un léger relief au survol.
 */
.rvia-bandeau__logo,
.rvia-pied__logos a {
	transition: opacity var(--rvia-duree-rapide) var(--rvia-elan);
}

.rvia-bandeau__logo:hover,
.rvia-pied__logos a:hover {
	opacity: 0.72;
}

/* --------------------------------------------------------------------------
 * Focus clavier
 * -------------------------------------------------------------------------- */

/*
 * Le contour par défaut du navigateur est fin et de couleur variable. On le
 * remplace par un contour plus épais et contrasté, aux couleurs de la
 * charte — ce que le cadrage §10 autorise explicitement, à condition d'être
 * plus visible que l'original.
 *
 * :focus-visible et non :focus : le contour n'apparaît qu'à la navigation
 * clavier, pas au clic à la souris.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--violet-ene);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Sur l'aplat violet, le violet ne se verrait pas : on passe au blanc. */
.is-style-section-violet :where(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--wp--preset--color--blanc);
}

/* --------------------------------------------------------------------------
 * Frise jalonnée — la route du programme
 * -------------------------------------------------------------------------- */

/*
 * Les segments colorés se touchent pour former une route continue : aucun
 * espace entre les colonnes de la grille. L'aération se fait sur les textes,
 * par leur propre marge intérieure.
 */
.rvia-route {
	gap: 0;
}

/* La pastille repose sur la route, légèrement au-dessus d'elle. */
.rvia-route__pastille {
	min-height: 88px;
	align-items: flex-end;
	padding-bottom: 6px;
}

.rvia-route__pastille figure {
	margin: 0;
}

.rvia-route__segment {
	width: 100%;
}

/* Sous 640 px, la route se redresse : les étapes s'empilent. */
@media (width <= 640px) {
	.rvia-route {
		grid-template-columns: 1fr;
	}

	.rvia-route__etape + .rvia-route__etape {
		margin-top: var(--wp--preset--spacing--60);
	}
}

/* --------------------------------------------------------------------------
 * Carte d'intervenant
 * -------------------------------------------------------------------------- */

/*
 * Reprise de l'artefact : dégradé violet, texte blanc, photo ronde en noir et
 * blanc cerclée de blanc translucide. La carte est un objet graphique, pas une
 * vignette discrète.
 */
.rvia-intervenant {
	background: linear-gradient(180deg, #825efb 0%, #551eff 100%);
	text-align: center;
}

.rvia-intervenant__portrait {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.rvia-intervenant__portrait img {
	filter: grayscale(1);
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------------------------------
 * Titres de section et leur chapeau
 * -------------------------------------------------------------------------- */

/*
 * Dans l'artefact, le titre d'une section et son chapeau forment un couple
 * serré, espacé de 16 px. Sans cette règle, c'est l'espacement général de la
 * section qui s'applique — 40 px — et le chapeau se détache du titre.
 */
:is(.is-style-section-defaut, .is-style-section-lavande, .is-style-section-violet)
	> :is(h1, h2) + p {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* --------------------------------------------------------------------------
 * Aperçu du chatbot sur l'accueil
 * -------------------------------------------------------------------------- */

/*
 * Décor, pas chatbot : les pastilles et la barre de saisie sont des liens
 * vers la page Chatbot. Le widget réel, lui, se branchera sur cette page.
 */
.rvia-chat {
	box-shadow: 0 2px 4px rgba(13, 6, 118, 0.05), 0 10px 28px rgba(13, 6, 118, 0.09);
}

.rvia-chat__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	/*
	 * WordPress applique une marge intérieure généreuse à tout élément portant
	 * une couleur de fond. Ici elle fait gonfler le carré de l'avatar : on la
	 * remet à zéro.
	 */
	padding: 0;
}

/* La pastille verte « en ligne ». */
.rvia-chat__statut::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 50%;
	background: #1f9d55;
}

.rvia-chat__piste {
	margin: 0;
}

.rvia-chat__piste a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--violet-ene);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--violet-ene);
	background: var(--wp--preset--color--blanc);
}

.rvia-chat__piste a:hover {
	background: var(--wp--preset--color--lavande);
}

.rvia-chat__saisie a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--lilas);
	border-radius: 6px;
	font-size: 15px;
	text-decoration: none;
	color: var(--wp--preset--color--bleu-nuit-doux);
	background: var(--wp--preset--color--blanc);
}

.rvia-chat__saisie a::after {
	content: "";
	width: 20px;
	height: 20px;
	flex: none;
	background: center / contain no-repeat var(--rvia-picto-envoi);
}

.rvia-chat__saisie a:hover {
	border-color: var(--wp--preset--color--violet-ene);
}

/* --------------------------------------------------------------------------
 * Reliefs filaires de bas de section
 * -------------------------------------------------------------------------- */

/*
 * L'artefact ne pose pas une image de montagnes : il trace un relief en
 * perspective, lignes et colonnes, à partir d'un générateur déterministe.
 * tools/generer-relief.js rejoue ce générateur et livre des SVG statiques —
 * nets à toutes les tailles, sans JavaScript dans le thème.
 *
 * Les bandes du relief se peignent de la couleur de la section pour masquer
 * ce qui passe derrière les crêtes : chaque fond a donc sa version. Une
 * section sans ton déclaré prend celle sur blanc.
 *
 * aria-hidden par nature : ce sont des décors, et ils ne portent aucune
 * information. Ils disparaissent à l'impression.
 */
.is-style-relief-montagnes,
.is-style-relief-paysage {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.is-style-relief-montagnes::after,
.is-style-relief-paysage::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	pointer-events: none;
	background: bottom center / cover no-repeat;
}

/*
 * Montagnes : 220 px dans l'artefact, et la section réserve la moitié de
 * cette hauteur pour que les crêtes ne passent jamais sous le texte.
 */
.is-style-relief-montagnes {
	padding-bottom: calc(var(--wp--preset--spacing--100) + 110px);
}

.is-style-relief-montagnes::after {
	height: 220px;
	background-image: var(--rvia-relief-montagnes-blanc);
}

.is-style-section-lavande.is-style-relief-montagnes::after {
	background-image: var(--rvia-relief-montagnes-lavande);
}

.is-style-section-violet.is-style-relief-montagnes::after {
	background-image: var(--rvia-relief-montagnes-violet);
}

/*
 * Paysage : un sol quadrillé de 560 px, sur lequel le contenu se pose. Pas
 * de marge réservée — le relief passe derrière, comme dans l'artefact.
 */
.is-style-relief-paysage::after {
	height: 560px;
	background-image: var(--rvia-relief-paysage-blanc);
}

.is-style-section-lavande.is-style-relief-paysage::after {
	background-image: var(--rvia-relief-paysage-lavande);
}

.is-style-section-violet.is-style-relief-paysage::after {
	background-image: var(--rvia-relief-paysage-violet);
}

@media (width <= 640px) {
	.is-style-relief-montagnes {
		padding-bottom: calc(var(--wp--preset--spacing--90) + 70px);
	}

	.is-style-relief-montagnes::after {
		height: 140px;
	}

	.is-style-relief-paysage::after {
		height: 320px;
	}
}

@media print {
	.is-style-relief-montagnes::after,
	.is-style-relief-paysage::after {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Les gestes de l'interface
 * -------------------------------------------------------------------------- */

/*
 * L'artefact pose la règle pour ses animations : « dessin unique à l'entrée
 * dans la vue, jamais en boucle ». Tout ce qui suit s'y tient.
 *
 * Rien n'est caché tant qu'assets/js/interface.js n'a pas pris la main : si
 * le script ne s'exécute pas, la page s'affiche telle quelle, complète.
 */

/* --- Les sections se lèvent ----------------------------------------------- */

.rvia-interface-prete .rvia-apparait {
	opacity: 0;
	translate: 0 14px;
	transition:
		opacity 520ms var(--rvia-elan) var(--rvia-apparition-delai, 0ms),
		translate 520ms var(--rvia-elan) var(--rvia-apparition-delai, 0ms);
}

.rvia-interface-prete .rvia-apparait.rvia-apparu {
	opacity: 1;
	translate: 0 0;
}

/* --- La route se trace ---------------------------------------------------- */

/*
 * Le geste du composant RoutePath de l'artefact, appliqué à nos frises : le
 * segment s'étire vers la droite, et la pastille de l'étape apparaît quand
 * le tracé l'atteint.
 */
.rvia-interface-prete .rvia-route--a-tracer .rvia-route__segment {
	/*
	 * « transform » plutôt que la propriété « scale », que ces blocs
	 * ignorent — mesuré : même posée en ligne, elle reste sans effet.
	 */
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 420ms var(--rvia-elan) var(--rvia-trace-delai, 0ms);
}

.rvia-interface-prete .rvia-route--tracee .rvia-route__segment {
	transform: scaleX(1);
}

.rvia-interface-prete .rvia-route--a-tracer .rvia-route__pastille,
.rvia-interface-prete .rvia-route--a-tracer .rvia-route__textes {
	opacity: 0;
	translate: 0 8px;
	transition:
		opacity 320ms var(--rvia-elan) calc(var(--rvia-trace-delai, 0ms) + 180ms),
		translate 320ms var(--rvia-elan) calc(var(--rvia-trace-delai, 0ms) + 180ms);
}

.rvia-interface-prete .rvia-route--tracee .rvia-route__pastille,
.rvia-interface-prete .rvia-route--tracee .rvia-route__textes {
	opacity: 1;
	translate: 0 0;
}

/* --- La barre de menu une fois décollée ----------------------------------- */

.wp-site-blocks > header {
	transition: box-shadow var(--rvia-duree) var(--rvia-elan);
}

.wp-site-blocks > header.est-decollee {
	box-shadow: 0 1px 0 rgba(13, 6, 118, 0.06), 0 8px 24px rgba(13, 6, 118, 0.08);
}

/* --- La route parcourue --------------------------------------------------- */

/*
 * Un filet sous la barre de menu, qui se remplit à mesure qu'on descend.
 * Ce n'est pas une barre de progression de plus : c'est la route du
 * programme, aux couleurs de ses étapes.
 *
 * Le dégradé est posé sur la largeur de la fenêtre, et le filet le découvre :
 * une couleur correspond donc à un endroit de la page, pas à un étirement.
 */
.rvia-parcours {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	height: 4px;
	width: calc(var(--rvia-parcours, 0) * 100%);
	background-image: linear-gradient(
		90deg,
		#5d0d6e 0 14.28%,
		#ed4353 14.28% 28.57%,
		#124660 28.57% 42.85%,
		#0fac71 42.85% 57.14%,
		#04bbff 57.14% 71.42%,
		#d26e4e 71.42% 85.71%,
		#49cfb9 85.71% 100%
	);
	background-size: 100vw 100%;
	background-repeat: no-repeat;
	pointer-events: none;
}

/*
 * Mouvement réduit : tout est posé d'emblée. Le script, de son côté, ne
 * surveille plus rien et marque tout comme déjà apparu.
 */
@media (prefers-reduced-motion: reduce) {
	.rvia-interface-prete .rvia-apparait,
	.rvia-interface-prete .rvia-route--a-tracer .rvia-route__segment,
	.rvia-interface-prete .rvia-route--a-tracer .rvia-route__pastille,
	.rvia-interface-prete .rvia-route--a-tracer .rvia-route__textes {
		opacity: 1;
		translate: none;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Le tronçon de route sous les titres de section
 * -------------------------------------------------------------------------- */

/*
 * Un motif, pour que l'identité traverse le site et ne reste pas cantonnée
 * aux deux frises : un court tronçon de route sous chaque titre de section,
 * dans l'ordre des couleurs de l'affiche. Cinq pixels, cinquante-six de
 * large — assez pour se voir, trop peu pour encombrer.
 */
:is(.is-style-section-defaut, .is-style-section-lavande, .is-style-section-violet)
	> :is(h1, h2)::after {
	content: "";
	display: block;
	width: 56px;
	height: 5px;
	margin-top: var(--wp--preset--spacing--40);
	border-radius: 3px;
	background: linear-gradient(
		90deg,
		#5d0d6e 0 25%,
		#ed4353 25% 50%,
		#124660 50% 75%,
		#0fac71 75% 100%
	);
}

/* Centré quand le titre l'est. */
:is(.is-style-section-defaut, .is-style-section-lavande, .is-style-section-violet)
	> :is(h1, h2).has-text-align-center::after {
	margin-inline: auto;
}

/*
 * Sur l'aplat violet, les teintes sombres de la route disparaissent : le
 * tronçon y passe aux couleurs claires de la charte ENE.
 */
.is-style-section-violet > :is(h1, h2)::after {
	background: linear-gradient(
		90deg,
		#86c2eb 0 33.33%,
		#8ec899 33.33% 66.66%,
		#ffe964 66.66% 100%
	);
}

/* --------------------------------------------------------------------------
 * La route en lacets
 * -------------------------------------------------------------------------- */

/*
 * L'emblème du programme, repris de l'affiche : un ruban qui serpente, chaque
 * portion d'une couleur de territoire. Le fichier porte sa propre animation —
 * la route se dessine à l'affichage, une fois.
 */
.rvia-route-lacets {
	margin-block: var(--wp--preset--spacing--60) 0;
}

.rvia-route-lacets img {
	display: block;
	width: 100%;
	height: auto;
}

@media (width <= 640px) {
	/*
	 * Le tracé est panoramique : sur un téléphone il deviendrait un filet.
	 * On le déborde légèrement pour qu'il garde sa présence.
	 */
	.rvia-route-lacets {
		margin-inline: calc(-1 * var(--wp--preset--spacing--50));
	}
}

/* --------------------------------------------------------------------------
 * Carrousel
 * -------------------------------------------------------------------------- */

/*
 * L'artefact fait défiler les conférences et les intervenants. Le rang est
 * une bande qui s'aimante sur les cartes ; assets/js/carrousel.js y ajoute
 * deux flèches et des pastilles de position, en vrais boutons.
 *
 * Sans JavaScript, la bande se fait toujours glisser au doigt, à la molette
 * et au clavier, et garde la barre de défilement qui le dit. Le script la
 * retire quand il prend la main.
 *
 * Les flèches reprennent celles de l'artefact : 40 px, cerclées d'un bord
 * fin, posées de part et d'autre du rang. Les pastilles sont un ajout — sans
 * elles, rien ne disait combien de cartes attendent.
 */
.wp-block-group.is-style-carrousel {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: none;

	/*
	 * La largeur de carte est une fraction du rang : tant qu'il y a peu de
	 * cartes elles remplissent la ligne et rien ne défile ; dès qu'il y en a
	 * plus, la suivante dépasse et annonce la suite.
	 */
	--rvia-carrousel-carte: clamp(240px, 26%, 300px);

	grid-auto-columns: var(--rvia-carrousel-carte);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 0;
	padding-bottom: var(--wp--preset--spacing--40);

	/* Barre fine, tant que le script n'a pas posé ses commandes. */
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--violet-ene) transparent;
}

.wp-block-group.is-style-carrousel > * {
	scroll-snap-align: start;
}

/* Les photos de conférence sont plus larges que les portraits. */
.rvia-grille--large.is-style-carrousel {
	--rvia-carrousel-carte: clamp(280px, 32%, 380px);
}

/* Le script a pris la main : la barre n'a plus à être visible. */
.rvia-carrousel-pret .wp-block-group.is-style-carrousel {
	scrollbar-width: none;
	padding-bottom: 0;
}

.rvia-carrousel-pret .wp-block-group.is-style-carrousel::-webkit-scrollbar {
	display: none;
}

.rvia-carrousel {
	position: relative;
}

/* Rien ne dépasse : les commandes n'ont rien à commander. */
.rvia-carrousel--fixe .rvia-carrousel__commandes {
	display: none;
}

/* --- Les flèches ---------------------------------------------------------- */

.rvia-carrousel__fleche {
	position: absolute;
	top: calc(50% - 20px);
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--rvia-bord-fin);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.92);
	background-image: var(--rvia-picto-fleche);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	box-shadow: 0 1px 4px rgba(13, 6, 118, 0.12);
	cursor: pointer;
	transition:
		border-color var(--rvia-duree-rapide) var(--rvia-elan),
		background-color var(--rvia-duree-rapide) var(--rvia-elan),
		opacity var(--rvia-duree-rapide) var(--rvia-elan);
}

.rvia-carrousel__fleche--precedent {
	left: -20px;
	rotate: 180deg;
}

.rvia-carrousel__fleche--suivant {
	right: -20px;
}

.rvia-carrousel__fleche:hover:not(:disabled) {
	background-color: var(--wp--preset--color--blanc);
	border-color: var(--wp--preset--color--violet-ene);
}

.rvia-carrousel__fleche:disabled {
	opacity: 0.3;
	cursor: default;
}

/* --- Les pastilles -------------------------------------------------------- */

.rvia-carrousel__commandes {
	display: flex;
	justify-content: center;
}

.rvia-carrousel__pastilles {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: var(--wp--preset--spacing--50);
}

.rvia-carrousel__pastille {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--violet-ene);
	opacity: 0.26;
	cursor: pointer;
	transition:
		opacity var(--rvia-duree) var(--rvia-elan),
		scale var(--rvia-duree) var(--rvia-elan);
}

.rvia-carrousel__pastille:hover {
	opacity: 0.55;
}

.rvia-carrousel__pastille.est-active {
	opacity: 1;
	scale: 1.35;
}

/*
 * Les pastilles sont petites : la zone cliquable, elle, ne doit pas l'être.
 * Un pseudo-élément l'étend à 44 px sans toucher au dessin.
 */
.rvia-carrousel__pastille {
	position: relative;
}

.rvia-carrousel__pastille::after {
	content: "";
	position: absolute;
	inset: -17px -5px;
}

/* Sur l'aplat violet, les pastilles se lisent en blanc. */
.is-style-section-violet .rvia-carrousel__pastille {
	background-color: var(--wp--preset--color--blanc);
}

@media (width <= 960px) {
	.rvia-carrousel__fleche--precedent {
		left: -8px;
	}

	.rvia-carrousel__fleche--suivant {
		right: -8px;
	}
}

/* À l'impression, le carrousel redevient une grille : tout doit sortir. */
@media print {
	.wp-block-group.is-style-carrousel {
		display: grid;
		grid-auto-flow: row;
		grid-template-columns: repeat(2, 1fr);
		overflow: visible;
	}

	.rvia-carrousel__commandes {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Carte de conférence
 * -------------------------------------------------------------------------- */

.rvia-conference {
	overflow: hidden;
	border: 1px solid var(--rvia-bord-fin);
	box-shadow: var(--rvia-ombre-s);
	transition: box-shadow var(--rvia-duree) var(--rvia-elan);
}

/*
 * La carte n'est pas cliquable : elle ne se soulève pas au survol, ce qui
 * promettrait un lien qui n'existe pas. Elle se détache un peu, c'est tout.
 */
.rvia-conference:hover {
	box-shadow: var(--rvia-ombre);
}

.rvia-conference__photo {
	margin: 0;
}

.rvia-conference__photo img {
	display: block;
	width: 100%;
}

/* La légende occupe un pavé, comme dans l'artefact : ce n'est pas une petite
   ligne sous l'image. */
.rvia-conference__legende {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Repère inscrit dans la pastille de la frise
 * -------------------------------------------------------------------------- */

.rvia-route__pastille {
	position: relative;
	width: 72px;
	margin: 0 auto;
	min-height: 95px;
}

.rvia-route__goutte {
	margin: 0;
}

/*
 * Le repère se centre dans la partie haute de la goutte : sa pointe, en bas,
 * doit rester vide.
 */
.rvia-route__repere {
	position: absolute;
	inset: 0 0 auto 0;
	height: 78%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
 * En-tête : la marque ne doit pas se comprimer
 * -------------------------------------------------------------------------- */

/*
 * Sans ces deux déclarations, le menu comprime le titre du site, qui se
 * replie alors sur plusieurs lignes et fait enfler l'en-tête — jusqu'à cinq
 * lignes en fenêtre étroite. La marque garde sa largeur ; c'est le menu qui
 * passe à la ligne si la place manque.
 */
.rvia-entete .wp-block-site-title {
	flex: none;
	white-space: nowrap;
	letter-spacing: -0.015em;
}

/* En dessous, la marque peut enfin se replier : le menu est déjà en dessous. */
@media (width <= 640px) {
	.rvia-entete .wp-block-site-title {
		white-space: normal;
		text-align: center;
	}
}

/* Le bandeau se resserre avant de passer sur deux rangées. */
@media (640px < width <= 960px) {
	.rvia-bandeau__logo img {
		height: 40px !important;
		width: auto !important;
	}

	.rvia-bandeau__logos .rvia-bandeau__logo {
		padding: 0 14px;
	}
}

/* --------------------------------------------------------------------------
 * Fenêtre de conversation (décor)
 * -------------------------------------------------------------------------- */

.rvia-fenetre {
	overflow: hidden;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.rvia-fenetre__barre {
	border-bottom: 1px solid var(--wp--preset--color--lilas);
}

.rvia-fenetre__corps {
	min-height: 420px;
}

.rvia-fenetre__cote {
	border-right: 1px solid var(--wp--preset--color--lilas);
	/* Les colonnes de WordPress répartissent l'espace restant : on fige la
	   largeur du panneau, comme la fenêtre de l'artefact. */
	flex: 0 0 260px;
	max-width: 260px;
}

.rvia-fenetre__neuf,
.rvia-fenetre__hist {
	margin: 0;
}

/* La réponse de l'utilisateur s'aligne à droite, comme dans une messagerie. */
.rvia-fenetre__vous {
	margin-left: auto;
	max-width: 80%;
}

.rvia-fenetre .rvia-chat__bulle {
	max-width: 80%;
	margin: 0;
}

/* Dans la fenêtre, pistes et saisie sont du décor : ni liens ni champs. */
.rvia-fenetre .rvia-chat__piste span,
.rvia-fenetre__saisie span {
	display: inline-flex;
	align-items: center;
}

.rvia-fenetre .rvia-chat__piste span {
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--violet-ene);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--violet-ene);
}

.rvia-fenetre__saisie {
	margin: auto 0 0;
}

.rvia-fenetre__saisie span {
	justify-content: space-between;
	width: 100%;
	min-height: 52px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--lilas);
	border-radius: 6px;
	font-size: 15px;
	color: var(--wp--preset--color--bleu-nuit-doux);
}

.rvia-fenetre__saisie span::after {
	content: "";
	width: 20px;
	height: 20px;
	flex: none;
	background: center / contain no-repeat var(--rvia-picto-envoi);
}

@media (width <= 640px) {
	.rvia-fenetre__cote {
		display: none;
	}
}

/*
 * Sur téléphone, les trois logos s'empilent et le bandeau atteignait 246 px
 * avant le moindre contenu. On les réduit : ils restent lisibles, et la page
 * commence enfin dans l'écran.
 */
@media (width <= 640px) {
	.rvia-bandeau__logo img {
		height: 34px !important;
		width: auto !important;
	}

	.rvia-bandeau__logos .rvia-bandeau__logo {
		padding: 0 10px;
	}

	.rvia-bandeau {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
}

/* ==========================================================================
 * Corrections du 22 octobre — seconde relecture d'Aurélien Preto
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * Le piège des éléments colorés
 * -------------------------------------------------------------------------- */

/*
 * WordPress applique une marge intérieure généreuse — 1.25em 2.375em — à tout
 * élément portant une couleur de fond. Sur une pastille de taille fixe, elle
 * la fait déborder : l'avatar du chat passait de 44 à 120 px, et les numéros
 * de l'interview chevauchaient les questions.
 */
.rvia-qr__numero,
.rvia-chat__avatar,
.rvia-fenetre__hist {
	padding: 0;
}

.rvia-qr__numero {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	margin: 0;
}

.rvia-fenetre__hist {
	padding: 10px 12px;
}

/* --------------------------------------------------------------------------
 * Menu : hauteur et survol
 * -------------------------------------------------------------------------- */

/*
 * Le menu était trop haut : mes zones tactiles de 44 px gonflaient la barre.
 * L'artefact serre ses liens — 15 px, bleu nuit, 4 px de marge au-dessus et
 * 2 px en dessous — et réserve le soulignement violet à la page courante.
 * Le survol l'affiche aussi, ce qu'Aurélien Preto a demandé.
 */
.rvia-entete .wp-block-navigation-item__content {
	display: inline-block;
	min-height: 0;
	padding: 4px 0 2px;
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--bleu-nuit);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color 0.15s, border-color 0.15s;
}

.rvia-entete .wp-block-navigation-item__content:hover,
.rvia-entete .current-menu-item > .wp-block-navigation-item__content,
.rvia-entete [aria-current="page"] {
	color: var(--wp--preset--color--violet-ene);
	border-bottom-color: var(--wp--preset--color--violet-ene);
}

/* La marque reprend la taille de l'artefact. */
.rvia-entete .wp-block-site-title {
	font-size: 26px;
	line-height: 1;
}

/* --------------------------------------------------------------------------
 * Boutons
 * -------------------------------------------------------------------------- */

/*
 * Le cœur impose, en :where(), un rayon de 9999 px et un rembourrage en em.
 * L'artefact veut 14 px sur 24, et un rayon de 6 px.
 */
.wp-block-button__link {
	padding: 14px 24px;
	border-radius: 6px;
	line-height: 1.2;
	letter-spacing: 0.01em;
	transition:
		background-color var(--rvia-duree-rapide) var(--rvia-elan),
		box-shadow var(--rvia-duree-rapide) var(--rvia-elan),
		transform var(--rvia-duree-rapide) var(--rvia-elan);
}

/*
 * Le bouton plein se soulève d'un pixel et prend l'ombre violette, comme
 * dans l'artefact (.rvia-btn:hover .rvia-btn__face). Le violet de survol est
 * celui du design system, --violet-600.
 */
.wp-block-button:not(.is-style-outline):not(.is-style-bouton-inverse) > .wp-block-button__link:hover {
	background-color: var(--rvia-violet-survol);
	box-shadow: var(--rvia-ombre-violet);
	transform: translateY(-1px);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* Sur l'aplat violet, le bouton inverse est blanc : il se contente de l'ombre. */
.is-style-bouton-inverse > .wp-block-button__link:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	transform: translateY(-1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 12px 22px;
	border-width: 2px;
}

/* --------------------------------------------------------------------------
 * Lisibilité sur l'aplat violet
 * -------------------------------------------------------------------------- */

/*
 * La section violette met tout son texte en blanc. À l'intérieur, la fenêtre
 * de conversation est blanche : son texte y devenait invisible. On rétablit
 * le bleu nuit dans la fenêtre, et dans toute carte claire posée sur violet.
 */
.is-style-section-violet .rvia-fenetre,
.is-style-section-violet .rvia-fenetre :is(p, h1, h2, h3, h4, span) {
	color: var(--wp--preset--color--bleu-nuit);
}

.is-style-section-violet .rvia-fenetre .rvia-chat__avatar,
.is-style-section-violet .rvia-fenetre__vous {
	color: var(--wp--preset--color--blanc);
}

.is-style-section-violet .rvia-fenetre .rvia-chat__statut {
	color: var(--wp--preset--color--bleu-nuit-doux);
}

.is-style-section-violet .rvia-fenetre .rvia-chat__piste span {
	color: var(--wp--preset--color--violet-ene);
}

/* --------------------------------------------------------------------------
 * Repère de la frise
 * -------------------------------------------------------------------------- */

/*
 * L'intérieur de la goutte est blanc : un repère blanc y était invisible,
 * et les ronds paraissaient vides. Il prend la couleur de son étape.
 */
.rvia-route__repere {
	color: var(--wp--preset--color--bleu-nuit) !important;
}

/* --------------------------------------------------------------------------
 * Portraits de la page Présentation
 * -------------------------------------------------------------------------- */

/*
 * L'artefact donne 200 px aux deux portraits — l'interview et le contact —
 * avec 20 px entre les éléments et un halo violet de 12 px.
 */
.rvia-interviewe {
	gap: 20px;
}

.rvia-interviewe__portrait img {
	width: 200px !important;
	height: 200px !important;
}

/* --------------------------------------------------------------------------
 * Fenêtre de chat
 * -------------------------------------------------------------------------- */

/*
 * Indus'IA rédige. L'artefact a son indicateur de frappe — trois points qui
 * clignotent, aux couleurs des trois premiers segments de la route :
 * aubergine, rouge, bleu nuit. Le texte est lu par les lecteurs d'écran mais
 * ne s'affiche pas : les points le disent.
 */
.rvia-chat__frappe {
	width: fit-content;
}

.rvia-chat__points {
	position: relative;
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 10px;
	border-radius: 50%;
	font-size: 0;
	line-height: 6px;
	color: transparent;
	background-color: var(--wp--preset--color--rouge);
	animation: rvia-clignote 1s infinite 0.15s;
}

.rvia-chat__points::before,
.rvia-chat__points::after {
	content: "";
	position: absolute;
	top: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.rvia-chat__points::before {
	left: -10px;
	background-color: var(--wp--preset--color--aubergine);
	animation: rvia-clignote 1s infinite;
}

.rvia-chat__points::after {
	left: 10px;
	background-color: var(--wp--preset--color--navy);
	animation: rvia-clignote 1s infinite 0.3s;
}

@keyframes rvia-clignote {
	0%,
	80%,
	100% {
		opacity: 0.25;
	}

	40% {
		opacity: 1;
	}
}

/* Mouvement réduit : trois points figés, que seule la couleur distingue. */
@media (prefers-reduced-motion: reduce) {
	.rvia-chat__points,
	.rvia-chat__points::before,
	.rvia-chat__points::after {
		animation: none;
		opacity: 0.75;
	}
}

/* « En ligne » : la pastille verte de l'artefact. */
.rvia-chat__statut {
	display: flex;
	align-items: center;
	gap: 6px;
}

.rvia-chat__statut::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #1fbf5f;
}

/*
 * Le panneau latéral mesurait 293 px pour 260 demandés : une colonne de
 * blocs compte sa largeur hors marge intérieure, qui s'ajoute donc par
 * dessus. --chat-side vaut 260 px dans le design system.
 */
.rvia-fenetre .rvia-fenetre__cote {
	box-sizing: border-box;
}


/*
 * La zone de saisie était collée aux pastilles de suggestion : « margin-top:
 * auto » ne pousse rien dans une mise en page de blocs ordinaire. Le fil
 * devient une colonne flexible, et la saisie retrouve sa place en bas.
 */
.rvia-fenetre__fil {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.rvia-fenetre__fil > * {
	margin-block: 0;
}

.rvia-fenetre__saisie {
	margin-top: auto !important;
	padding-top: var(--wp--preset--spacing--40);
}