/* ==========================================================================
   JR Properties — Section « preuve chiffrée » ([jr_preuve_chiffree])
   --------------------------------------------------------------------------
   Chargée uniquement là où la section est rendue (voir inc/preuve-chiffree.php).

   AUCUNE url() DANS CETTE FEUILLE, ET C'EST UNE CONTRAINTE, PAS UN HASARD.
   tools/build-css.mjs ne traite que custom.css : une url() écrite ici
   n'hériterait d'aucun ?ver= et retomberait au cache de 30 minutes du frontal
   IONOS. La seule image de la section (l'emblème en filigrane) est donc passée
   en style en ligne depuis PHP, via jrp_asset_versionne().

   Les jetons sont déclarés sur .jr-preuve, jamais sur :root — même principe que
   .jr-estim-page : la section emporte sa palette avec elle et aucune autre page
   n'en hérite. Les valeurs sont celles du relevé de charte, y compris les
   couleurs hors palette Kadence mais structurantes sur le site.
   ========================================================================== */

.jr-preuve {
	/* --- Palette de la charte ------------------------------------------- */
	--jr-preuve-eucalyptus: #33443B;
	--jr-preuve-calcaire: #F7F4EE;
	--jr-preuve-vert-pale: #E7EAE0;
	--jr-preuve-sauge: #8B9D77;
	--jr-preuve-encre: #2E2E2A;
	--jr-preuve-attenue: #5F5D56;

	/*
	 * DEUX SAUGES, DEUX EMPLOIS — la distinction n'est pas décorative, elle
	 * répare un défaut déjà corrigé une fois sur ce site (constat SEO-022,
	 * lot 2).
	 *
	 * --jr-preuve-sauge (#8B9D77) remplit les barres. Une barre ne porte pas de
	 * texte : le critère applicable est le 1.4.11 (3:1 pour un élément
	 * d'interface porteur de sens), et la sauge sur eucalyptus donne 3,5:1.
	 *
	 * --jr-preuve-sauge-texte (#5F724A) est la sauge des TEXTES sur fond clair.
	 * La sauge pure y tombe à 2,7:1 sur calcaire, très en dessous des 4,5:1
	 * exigés ; #5F724A remonte à 4,9:1. C'est elle qui colore l'intertitre du
	 * bandeau (« Sur les biens que nous gérons… »).
	 *
	 * --jr-preuve-sauge-clair (#C6D6B0) est la sauge des textes sur fond
	 * SOMBRE, pour la même raison en sens inverse.
	 */
	--jr-preuve-sauge-texte: #5F724A;
	--jr-preuve-sauge-clair: #C6D6B0;

	/*
	 * Terracotta : unique accent chaud de la charte. Sur l'eucalyptus il donne
	 * 3,42:1 — insuffisant pour du texte courant, suffisant pour du GRAND texte
	 * (le critère 1.4.3 demande 3:1 au-delà de 24px en graisse normale). Il ne
	 * sert donc ici QUE dans le titre de section, dont la taille minimale est
	 * de 1,9rem soit 30,4px. Ne pas le reprendre sur du texte courant.
	 */
	--jr-preuve-terracotta: #C08863;


	/*
	 * Textes posés sur l'eucalyptus. Les opacités ne sont pas choisies à l'œil :
	 * du calcaire à 62 % sur eucalyptus donne un gris-vert à 4,7:1, soit tout
	 * juste au-dessus des 4,5:1 exigés pour la mention de source, qui est le
	 * plus petit texte de la section. Descendre plus bas la ferait échouer.
	 */
	--jr-preuve-sur-fond: #F7F4EE;
	--jr-preuve-sur-fond-doux: rgba(247, 244, 238, 0.70);
	--jr-preuve-sur-fond-discret: rgba(247, 244, 238, 0.62);
	--jr-preuve-piste: rgba(247, 244, 238, 0.12);
	--jr-preuve-marche: rgba(247, 244, 238, 0.45);
	--jr-preuve-bord: rgba(247, 244, 238, 0.16);

	/*
	 * BORDURE DU SÉLECTEUR — mesurée, pas choisie à l'œil.
	 *
	 * Le fond de la piste ne peut pas porter seul la séparation d'avec la
	 * section : à 10 % de calcaire sur l'eucalyptus il donne 1,33:1, et
	 * l'éclaircir davantage ferait passer le libellé inactif SOUS les 4,5:1
	 * exigés — les deux surfaces montent ensemble. C'est donc la bordure qui
	 * porte le contour, et elle seule.
	 *
	 * 45 % de calcaire donne 3,28:1 contre le fond de section, soit au-dessus
	 * des 3:1 que le critère 1.4.11 demande à la limite d'un composant
	 * d'interface. À 35 % on n'obtenait que 2,58:1 : visible, mais sous le
	 * seuil.
	 */
	--jr-preuve-bord-switch: rgba(247, 244, 238, 0.45);

	/*
	 * FOND DE PISTE À 6 %, ET C'EST UN CALCUL, PAS UN GOÛT.
	 *
	 * Le libellé inactif est du calcaire à 70 %. Posé sur une piste à 10 % il
	 * ne donne que 4,45:1, soit sous les 4,5:1 exigés — les deux surfaces
	 * montent ensemble. En ramenant la piste à 6 % on remonte à 4,87:1. Le
	 * contour du contrôle, lui, ne dépend pas de ce fond : il est porté par
	 * --jr-preuve-bord-switch.
	 */
	--jr-preuve-piste-switch: rgba(247, 244, 238, 0.06);

	/* --- Typographie, courbes, rayons ------------------------------------ */
	--jr-preuve-titre: 'Prata', Georgia, 'Times New Roman', serif;
	--jr-preuve-corps: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--jr-preuve-ease: cubic-bezier(.22, .61, .36, 1);
	--jr-preuve-radius: 16px;
	--jr-preuve-pilule: 999px;

	/*
	 * Pleine largeur, comme les six autres sections du gabarit Propriétaires.
	 * Le calc() se résout contre un conteneur centré, ce qui est le cas de
	 * #main sur tous les gabarits JR comme dans le flux d'un article.
	 */
	position: relative;
	overflow: hidden;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;

	background-color: var(--jr-preuve-eucalyptus);
	font-family: var(--jr-preuve-corps);
	/* Filet de securite : Kadence pose color: var(--global-palette4) (#2D3748)
	   sur le <body>. Tout texte de la section qui oublierait de declarer sa
	   couleur en heriterait — un gris ardoise sur l'eucalyptus, illisible. */
	color: var(--jr-preuve-sur-fond);
}

/* Emblème en filigrane : même traitement que les sections colorées voisines
   (l'URL, versionnée, vient de PHP). data-parallax est lu par about.js quand il
   est présent ; sinon le calque reste immobile, ce qui convient. */
.jr-preuve__deco {
	position: absolute;
	z-index: 0;
	top: -14%;
	right: -6%;
	width: min(40rem, 70%);
	aspect-ratio: 671 / 800;
	opacity: 0.05;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	pointer-events: none;
}

.jr-preuve__inner {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 2rem);
}


/* ==========================================================================
   BLOC A — COMPARATIF MARCHÉ
   ========================================================================== */

.jr-preuve__panel {
	text-align: center;
}

.jr-preuve__title-accent {
	color: var(--jr-preuve-terracotta);
}

.jr-preuve__title {
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
	font-family: var(--jr-preuve-titre);
	font-weight: 400;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--jr-preuve-sur-fond);
}


/* --- Le sélecteur ---------------------------------------------------------
   Deux colonnes de largeur égale, et la pastille glisse de sa propre largeur.
   Des colonnes égales font que la pastille n'a jamais besoin d'être mesurée en
   JavaScript : sa position de repos et sa position d'arrivée sont deux valeurs
   CSS. Le script ne touche qu'à un attribut sur le conteneur.
   -------------------------------------------------------------------------- */

.jr-preuve__switch {
	position: relative;
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
	padding: 4px;
	border: 1px solid var(--jr-preuve-bord-switch);
	border-radius: var(--jr-preuve-pilule);
	background-color: var(--jr-preuve-piste-switch);
	max-width: 100%;
}

/*
 * LA PASTILLE EST LE FOND DU BOUTON ACTIF, PAS UN CALQUE QUI GLISSE DESSOUS.
 *
 * C'est la correction d'un défaut qui a été vu en production, et il vaut d'être
 * expliqué en entier.
 *
 * Kadence déclare, pour TOUS les <button> du site :
 *     button:hover, button:focus, button:active { background-color: eucalyptus }
 * Sa spécificité est (0,1,1). Un simple `.jr-preuve__opt { background: none }`
 * ne pèse que (0,1,0) : Kadence gagnait. Après un clic — donc avec :focus qui
 * reste — le bouton actif se peignait en eucalyptus PAR-DESSUS la pastille
 * (le bouton est au-dessus dans l'ordre d'empilement), et son libellé, lui
 * aussi eucalyptus, disparaissait dedans. On voyait un trou sombre sous
 * l'option active, et le seul libellé lisible était celui de l'INACTIVE.
 *
 * Deux corrections, et il fallait les deux :
 *
 *   1. Les sélecteurs ci-dessous montent à (0,3,0) et (0,4,0) en reprenant
 *      explicitement :hover, :focus et :active. Ils passent donc devant ceux de
 *      Kadence sans recourir à !important.
 *
 *   2. Le fond de la pastille est porté par le bouton actif lui-même, désigné
 *      par [aria-checked="true"]. Il n'y a plus de calque séparé positionné
 *      d'après data-jr-etat : la position de la pastille et l'état ARIA ne
 *      peuvent plus diverger, puisqu'ils sont la même chose.
 *
 * On y perd le glissement de la pastille ; on y gagne un contrôle qui ne peut
 * pas mentir sur son propre état.
 */
.jr-preuve .jr-preuve__opt,
.jr-preuve .jr-preuve__opt:hover,
.jr-preuve .jr-preuve__opt:focus,
.jr-preuve .jr-preuve__opt:active {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0.7rem clamp(0.55rem, 2.5vw, 1.6rem);
	border: 0;
	border-radius: var(--jr-preuve-pilule);
	background-color: transparent;
	box-shadow: none;
	font-family: inherit;
	font-size: clamp(0.78rem, 1.6vw, 0.94rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--jr-preuve-sur-fond-doux);
	cursor: pointer;
	transition: background-color 0.35s var(--jr-preuve-ease), color 0.35s var(--jr-preuve-ease);
	-webkit-appearance: none;
	appearance: none;
}

.jr-preuve .jr-preuve__opt[aria-checked="true"],
.jr-preuve .jr-preuve__opt[aria-checked="true"]:hover,
.jr-preuve .jr-preuve__opt[aria-checked="true"]:focus,
.jr-preuve .jr-preuve__opt[aria-checked="true"]:active {
	background-color: var(--jr-preuve-calcaire);
	color: var(--jr-preuve-eucalyptus);
	font-weight: 700;
}

.jr-preuve__opt:focus-visible {
	outline: 2px solid var(--jr-preuve-calcaire);
	outline-offset: 3px;
}


/* --- Les jauges -----------------------------------------------------------
   Mobile d'abord : une colonne. Les trois colonnes n'apparaissent qu'à partir
   de 768px.
   -------------------------------------------------------------------------- */

.jr-preuve__gauges {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.6rem, 4vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.jr-preuve__gauge {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.jr-preuve__gauge-label {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jr-preuve-sur-fond-doux);
}

.jr-preuve__gauge-value {
	font-family: var(--jr-preuve-titre);
	font-size: clamp(1.9rem, 4vw, 2.4rem);
	line-height: 1.1;
	color: var(--jr-preuve-sur-fond);
	/* Les chiffres défilent : sans chasse fixe, la largeur du nombre change à
	   chaque image et le libellé voisin tremble. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

.jr-preuve__track {
	display: block;
	height: 10px;
	margin-top: 0.3rem;
	border-radius: var(--jr-preuve-pilule);
	background-color: var(--jr-preuve-piste);
	overflow: hidden;
}

/*
 * La LARGEUR du remplissage est posée image par image par le script (courbe
 * easeOutCubic) : aucune transition CSS dessus, les deux se combattraient. Seule
 * la couleur est animée en CSS, au basculement.
 */
.jr-preuve__fill {
	display: block;
	height: 100%;
	border-radius: var(--jr-preuve-pilule);
	background-color: var(--jr-preuve-marche);
	transition: background-color 0.5s var(--jr-preuve-ease);
}

.jr-preuve[data-jr-etat="jr"] .jr-preuve__fill {
	background-color: var(--jr-preuve-sauge);
}

.jr-preuve__source {
	max-width: 46rem;
	margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
	font-size: 0.75rem;
	line-height: 1.55;
	color: var(--jr-preuve-sur-fond-discret);
}

/* Zone d'annonce du basculement : lue par les synthèses vocales, invisible à
   l'écran. Pas de display:none ni de visibility:hidden, qui la retireraient de
   l'arbre d'accessibilité en même temps que de l'écran. */
.jr-preuve__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}


/* ==========================================================================
   BLOC B — BANDEAU DE SAISON
   --------------------------------------------------------------------------
   Posé sur le calcaire, en pleine lumière, quand le bloc A vit sur
   l'eucalyptus. C'est ce contraste de fond qui porte la séparation : les deux
   blocs ne comparent pas la même chose (le A contre la concurrence, le B contre
   la saison précédente) et rien ne doit laisser croire que le sélecteur du bloc
   A les commande tous les deux.
   ========================================================================== */

.jr-preuve__band {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border-radius: var(--jr-preuve-radius);
	background-color: var(--jr-preuve-calcaire);
	color: var(--jr-preuve-encre);
	text-align: center;
}

.jr-preuve__band-title {
	margin: 0 0 clamp(1.5rem, 3.5vw, 2.25rem);
	font-family: var(--jr-preuve-corps);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jr-preuve-sauge-texte);
}

.jr-preuve__stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3.5vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jr-preuve__stat {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.jr-preuve__stat-value {
	font-family: var(--jr-preuve-titre);
	font-size: clamp(1.9rem, 4.2vw, 2.6rem);
	line-height: 1.05;
	/*
	 * VERT, ET C'EST --jr-preuve-sauge-texte QU'IL FAUT.
	 *
	 * La sauge des barres (#8B9D77) ne donne que 2,66:1 sur le calcaire : elle
	 * échoue au texte courant ET au grand texte, exactement comme le terracotta
	 * brut avant elle. --jr-preuve-sauge-texte existe pour ce cas précis — c'est
	 * « la sauge des TEXTES sur fond clair » déclarée en tête de feuille — et
	 * elle donne 4,79:1, au-dessus même des 4,5:1 du texte courant.
	 *
	 * Le plancher de 1,9rem posé ci-dessus n'est donc plus une contrainte de
	 * contraste ici ; il reste une contrainte de composition.
	 */
	color: var(--jr-preuve-sauge-texte);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

.jr-preuve__stat-label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jr-preuve-attenue);
}

/*
 * Troisième ligne du compteur : la base de comparaison, « vs 2025 ».
 *
 * Elle était verte et en gras tant qu'elle portait la progression. Maintenant
 * que la progression EST le grand chiffre, la garder colorée ferait deux
 * accents dans une colonne qui n'en demande qu'un, et la note se lirait comme
 * une seconde donnée. Elle passe donc en gris atténué, en graisse normale :
 * c'est une légende, pas un chiffre.
 *
 * Plus petite que le libellé qui la surmonte, pour que l'œil descende
 * chiffre → libellé → note sans hésiter sur l'ordre.
 */
.jr-preuve__stat-ref {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--jr-preuve-attenue);
}

.jr-preuve__band-concl {
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
	font-family: var(--jr-preuve-titre);
	font-size: clamp(1.05rem, 2.2vw, 1.35rem);
	line-height: 1.3;
	color: var(--jr-preuve-eucalyptus);
}


/* ==========================================================================
   768px ET AU-DELÀ : les trois jauges et les trois chiffres passent en ligne.
   ========================================================================== */

@media (min-width: 768px) {
	.jr-preuve__gauges,
	.jr-preuve__stats {
		grid-template-columns: repeat(3, 1fr);
	}

	.jr-preuve__stats {
		gap: clamp(1.5rem, 3vw, 2.5rem);
	}
}


/* ==========================================================================
   MOTEUR D'ANIMATION PARTAGÉ (about.js)
   --------------------------------------------------------------------------
   La section reprend les classes du site (.jr-anim, .jr-anim--mask/--rise) pour
   apparaître comme ses voisines. Ces états ne s'appliquent QUE sous le gate
   .jr-about-ready, posé par about.js : sur une page qui ne charge pas ce
   script, les classes ne font rien et la section est simplement visible.

   La règle générique donne au cache de reveal la couleur calcaire ; ici le fond
   est l'eucalyptus. Même spécificité que la règle générique (0,2,0), mais notre
   feuille est déclarée après custom.css — elle gagne.
   ========================================================================== */

.jr-about-ready .jr-preuve__panel {
	--jr-mask: #33443B;
}


/* ==========================================================================
   MOUVEMENT RÉDUIT
   --------------------------------------------------------------------------
   Le script coupe déjà toute animation de valeur et affiche les cibles
   directement. Restent les transitions CSS — glissement de la pastille et
   changement de couleur des barres — qui sont coupées ici. Le basculement reste
   entièrement fonctionnel : il devient instantané.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.jr-preuve .jr-preuve__opt,
	.jr-preuve .jr-preuve__opt:hover,
	.jr-preuve .jr-preuve__opt:focus,
	.jr-preuve .jr-preuve__opt:active,
	.jr-preuve__fill {
		transition: none;
	}
}


/* ==========================================================================
   L'ACTE « LES DEUX MOIS DE LA SAISON »
   --------------------------------------------------------------------------
   Charte JR, pas rupture extranet : ce bloc affirme une donnée maison, il doit
   donc porter les couleurs de la maison. Il n'emprunte aucun des jetons --jrp-bk
   des graphiques, et n'en déclare aucun de son côté — tout vient de --jr-preuve,
   déclarés sur .jr-preuve et jamais sur :root.

   LES COULEURS DE TEXTE SONT CELLES DÉJÀ MESURÉES DANS CETTE FEUILLE, et ce
   n'est pas une commodité. Sur l'eucalyptus, la sauge pure (#8B9D77) ne donne
   que 3,54:1 et échoue pour du texte courant — c'est le constat SEO-022 lot 2,
   déjà corrigé une fois. Le surtitre et le nom du mois prennent donc
   --jr-preuve-sauge-clair (6,71:1), jamais la sauge des barres.

   LE TERRACOTTA NE PORTE QUE LE GRAND TEXTE. À 3,42:1 il satisfait le critère
   1.4.3 au-delà de 24px, et rien d'autre. La progression est à 1,75rem minimum
   (28px) pour cette raison précise : ne pas descendre sous cette taille.
   ========================================================================== */

/*
 * UNE SEULE MESURE PAR ACTE, ET ELLE EST CENTRÉE.
 *
 * Le défaut corrigé ici touchait les trois actes, pas seulement le premier :
 * leurs TITRES couraient sur toute la largeur du conteneur (1100px) pendant que
 * leurs FIGURES étaient plafonnées plus étroit — 768px pour les deux mois,
 * 560px pour la grille de points — et calées à gauche. Chaque acte présentait
 * donc un bord droit en escalier, très visible à côté du bandeau et de la carte
 * de visibilité qui, eux, remplissent la largeur.
 *
 * La correction est au niveau du conteneur : c'est L'ACTE qui porte la mesure,
 * et tout ce qu'il contient s'y aligne. Les plafonds posés sur les figures
 * deviennent inutiles et sont retirés — deux plafonds concurrents, c'est
 * exactement ce qui produisait l'escalier.
 *
 * CENTRÉE, parce que c'est l'usage de la section : la carte de graphique
 * (560px), son annexe et la source du bloc A sont déjà centrées dans le
 * conteneur. Un acte calé à gauche était le seul bloc à ne pas l'être.
 */
.jr-preuve__acte {
	max-width: 48rem;
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}

.jr-preuve__acte-sur {
	margin: 0 0 0.75rem;
	font-family: var(--jr-preuve-corps);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jr-preuve-sauge-clair);
}

.jr-preuve__acte-titre {
	margin: 0 0 0.75rem;
	font-family: var(--jr-preuve-titre);
	font-weight: 400;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	line-height: 1.18;
	letter-spacing: 0.01em;
	color: var(--jr-preuve-sur-fond);
}

.jr-preuve__acte-sous {
	max-width: 54ch;
	margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--jr-preuve-sur-fond-doux);
}

.jr-preuve__acte-note {
	margin: clamp(1.5rem, 3vw, 2rem) 0 0;
	font-size: 0.75rem;
	line-height: 1.55;
	color: var(--jr-preuve-sur-fond-discret);
}

/* --- Les deux cartes ------------------------------------------------------ */

.jr-saison__mois-liste {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jr-saison__carte {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid var(--jr-preuve-bord);
	border-radius: var(--jr-preuve-radius);
}

.jr-saison__mois {
	margin: 0 0 1.5rem;
	font-family: var(--jr-preuve-corps);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jr-preuve-sauge-clair);
}

/*
 * LES BARRES ET LES MILLÉSIMES SONT DEUX RANGÉES DISTINCTES, et c'est
 * volontaire. Mettre le millésime dans la colonne, sous la barre, ferait porter
 * le pourcentage de hauteur sur une zone qui contient AUSSI le libellé : une
 * barre à 100 % ne remplirait plus la zone de tracé, et le rapport dessiné ne
 * serait plus celui calculé. Ici la zone de tracé ne contient que des barres,
 * donc 79,40 % valent exactement 79,40 % de sa hauteur.
 */
.jr-saison__barres {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(1rem, 3vw, 1.6rem);
	height: 150px;
}

/*
 * LARGEUR PLAFONNÉE, ET LES DEUX RANGÉES PARTAGENT LE MÊME PLAFOND.
 *
 * Sans ce plafond, deux barres qui se partagent la largeur d'une carte
 * deviennent des carrés — à 375px elles font 118px de large pour 150 de haut,
 * et l'œil n'y lit plus un graphique mais deux aplats. C'est le seul écart
 * assumé avec le prototype.
 *
 * Le plafond et le gap sont identiques ici et sur .jr-saison__an : c'est ce qui
 * garde chaque millésime sous sa barre, les deux rangées étant centrées.
 */
.jr-saison__barre {
	flex: 1 1 0;
	min-width: 0;
	max-width: 5.25rem;
	border-radius: 2px 2px 0 0;
	/* L'animation joue sur scaleY, jamais sur la hauteur : celle-ci vient d'un
	   style en ligne écrit par PHP et doit rester intacte. */
	transform-origin: bottom;
}

/* L'année de référence prend le jeton du marché — c'est le même rôle : la base
   de comparaison, présente mais en retrait. */
.jr-saison__barre--avant { background-color: var(--jr-preuve-marche); }
.jr-saison__barre--apres { background-color: var(--jr-preuve-terracotta); }

.jr-saison__ans {
	display: flex;
	justify-content: center;
	gap: clamp(1rem, 3vw, 1.6rem);
	margin-top: 0.6rem;
}

.jr-saison__an {
	flex: 1 1 0;
	min-width: 0;
	max-width: 5.25rem;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-align: center;
	color: var(--jr-preuve-sur-fond-discret);
}

.jr-saison__delta {
	margin: 1.25rem 0 0;
	/* Sur l'axe du groupe de barres, qui est centré dans la carte. Calée à
	   gauche, la progression pendait sous le vide laissé à gauche des barres. */
	text-align: center;
	font-family: var(--jr-preuve-titre);
	/* 28px au minimum : en dessous, le terracotta ne passe plus (voir l'en-tête
	   de section). Ne pas réduire. */
	font-size: clamp(1.75rem, 3.4vw, 2.25rem);
	line-height: 1;
	color: var(--jr-preuve-terracotta);
}


/* --------------------------------------------------------------------------
   L'ACTE « LE FRANCHISSEMENT »
   --------------------------------------------------------------------------
   Un axe, une ligne de seuil, deux points de part et d'autre. Toutes les
   positions viennent de PHP en pourcentages : rien n'est placé à l'œil, et
   déplacer une note dans les données déplace son point.

   COULEURS. Le trajet parcouru prend --jr-preuve-sauge (3,54:1 sur
   l'eucalyptus, élément graphique, au-dessus des 3:1 du critère 1.4.11). Le
   point « avant » prend --jr-preuve-marche, le jeton qui désigne déjà la
   référence dans les jauges du bloc A. La ligne du seuil prend le terracotta :
   c'est le seul trait de la figure qui doive s'imposer.

   Les textes, eux : compteur en --jr-preuve-sauge-clair (6,71:1), étiquettes et
   échelle en --jr-preuve-sur-fond-discret (4,74:1).
   -------------------------------------------------------------------------- */

/*
 * LA SECONDE PHRASE DU TITRE, EN VERT ET SUR SA PROPRE LIGNE.
 *
 * display:block plutôt qu'un simple changement de couleur : le titre coupait
 * « Au-dessus » en deux, la césure tombant après « Au- » en fin de première
 * ligne. Un franchissement se lit en deux temps, chacun sur sa ligne.
 *
 * --jr-preuve-sauge-clair donne 6,71:1 sur l'eucalyptus, conforme même pour du
 * texte courant. La sauge des barres (3,54:1) n'aurait tenu qu'en grand texte,
 * et la sauge de texte sur fond clair (1,97:1 ici) échouerait franchement :
 * c'est le jeton des fonds SOMBRES qu'il faut, et c'est aussi celui du
 * compteur — les deux verts du bloc sont le même.
 *
 * PAS DE MARGE NÉGATIVE ICI. L'espace qui sépare les deux phrases est resté
 * dans le texte, mais il ouvre une boîte de bloc : le navigateur le supprime
 * de lui-même en début de ligne. Le compenser décalait la seconde ligne de
 * 6,4px à 375px et de 7,9px au-delà — mesuré — au lieu de l'aligner.
 */
.jr-note__bascule {
	display: block;
	color: var(--jr-preuve-sauge-clair);
}

.jr-note__scene {
	position: relative;
	/* Réserve latérale : le compteur et les étiquettes sont centrés sur leur
	   position par translateX(-50%). Sans elle, une position proche des bords
	   les ferait sortir du bloc. */
	padding: 0 3rem;
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.jr-note__valeur {
	position: relative;
	left: var(--part, 100%);
	transform: translateX(-50%);
	width: max-content;
	margin: 0 0 0.7rem;
	text-align: center;
	line-height: 1;
}

.jr-note__compteur {
	display: block;
	font-family: var(--jr-preuve-titre);
	/* Il reste le plus gros élément du bloc — 1,6 fois le titre au lieu de 2,05
	   auparavant — sans plus l'écraser. */
	font-size: clamp(2.6rem, 5.5vw, 3.6rem);
	line-height: 1;
	color: var(--jr-preuve-sauge-clair);
	font-variant-numeric: tabular-nums;
}

/* --- L'axe ---------------------------------------------------------------- */

.jr-note__axe {
	position: relative;
	height: 34px;
	/* L'étiquette du seuil sort par le haut : on lui réserve sa place plutôt que
	   de la laisser recouvrir le compteur. */
	margin-top: 1.4rem;
}

.jr-note__piste {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 6px;
	margin-top: -3px;
	border-radius: 3px;
	background-color: var(--jr-preuve-piste);
}

/* Le trajet va d'une position à l'autre : les deux bornes viennent de PHP, la
   largeur s'en déduit. L'animation joue sur scaleX depuis la gauche, elle ne
   touche donc ni à `left` ni à `width`. */
.jr-note__trajet {
	position: absolute;
	top: 50%;
	left: var(--de, 0%);
	width: calc(var(--a, 100%) - var(--de, 0%));
	height: 6px;
	margin-top: -3px;
	border-radius: 3px;
	background-color: var(--jr-preuve-sauge);
	transform-origin: left;
}

/* La ligne du seuil traverse l'axe de part en part : c'est elle qu'on franchit,
   elle doit se lire comme une frontière et non comme une graduation. */
.jr-note__seuil {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	margin-left: -1.5px;
	border-radius: 2px;
	background-color: var(--jr-preuve-terracotta);
}

.jr-note__point {
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
}

/* Le point d'arrivée porte un halo de la couleur du fond : il se détache du
   trajet qu'il termine au lieu de s'y fondre. */
.jr-note__point--apres {
	box-shadow: 0 0 0 4px var(--jr-preuve-eucalyptus);
}

.jr-note__point--avant { background-color: var(--jr-preuve-marche); }
.jr-note__point--apres { background-color: var(--jr-preuve-sauge-clair); }

/* --- Les étiquettes -------------------------------------------------------- */

.jr-note__etiquettes {
	position: relative;
	height: 1.2em;
	margin: 0.55rem 0 0;
	font-size: 0.75rem;
	line-height: 1.2;
	color: var(--jr-preuve-sur-fond-discret);
}

.jr-note__etiq {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	white-space: nowrap;
}

/*
 * L'ÉTIQUETTE DU SEUIL EST AU-DESSUS DE L'AXE, LA NOTE DE DÉPART EN DESSOUS.
 *
 * Les deux positions ne sont séparées que de 16 % de l'axe : à 375px, cela ne
 * laissait que 3px entre « 8,0 » et « le marché » sur une même ligne — assez
 * pour ne pas se chevaucher au pixel près, beaucoup trop peu pour se lire. Sur
 * deux niveaux, la collision n'est plus possible à aucune largeur, et
 * l'étiquette reste accrochée à la ligne qu'elle nomme.
 */
.jr-note__seuil-etiq {
	position: absolute;
	bottom: calc(100% + 0.35rem);
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 0.75rem;
	line-height: 1.2;
	/*
	 * PAS DE TERRACOTTA SUR CETTE ÉTIQUETTE. Il donne 3,42:1 sur l'eucalyptus :
	 * assez pour la LIGNE, qui est un élément graphique soumis au 1.4.11 et à
	 * ses 3:1, très insuffisant pour douze pixels de texte qui en demandent 4,5.
	 * L'étiquette prend donc --jr-preuve-sur-fond (9,42:1) ; c'est aussi ce qui
	 * la distingue des deux autres légendes, plus discrètes. Le lien avec la
	 * ligne est porté par la proximité, pas par la couleur.
	 */
	color: var(--jr-preuve-sur-fond);
}

/* Les deux bouts de l'échelle, écrits : un axe tronqué se déclare, c'est la
   règle que suit déjà le graphique A dont ce bloc reprend le bas. */
.jr-note__echelle {
	display: flex;
	justify-content: space-between;
	margin: 0.35rem 0 0;
	font-size: 0.7rem;
	line-height: 1.2;
	color: var(--jr-preuve-sur-fond-discret);
}


/* ==========================================================================
   L'ACTE « LE FRANCHISSEMENT » — ANIMATION
   --------------------------------------------------------------------------
   Le compteur est animé par le script, depuis data-depuis et non depuis zéro.
   Le reste est ici : le trajet se déploie, le point d'arrivée apparaît au bout.
   Le point « avant » et la ligne du seuil, eux, sont là DÈS LE DÉPART — ce
   qu'on regarde, c'est une ligne franchie, il faut donc voir la ligne et le
   point de départ avant que quoi que ce soit ne bouge.
   ========================================================================== */

/*
 * LA LIGNE DU MARCHÉ SE TRACE SUR PLACE, DU HAUT VERS LE BAS.
 *
 * Elle n'arrive pas d'ailleurs : elle apparaît à son abscisse définitive et
 * s'allonge jusqu'à l'axe. Le geste descendant est là, l'attente aussi, mais
 * la ligne n'occupe jamais une autre position que la sienne.
 *
 * POURQUOI PAS UNE LIGNE QUI DESCEND DEPUIS LE COMPTEUR. Cette version-là a
 * été codée et comparée instant par instant. Sur cet axe, la valeur du marché
 * est portée par l'abscisse — 36 % de la piste, constante d'un bout à l'autre
 * des deux animations : un déplacement vertical ne code donc aucune baisse.
 * Deux mesures ont tranché quand même. À 0 s, la ligne flottait détachée de
 * l'axe, à hauteur du compteur, un trait sans support. Et pendant tout le
 * trajet son étiquette longeait le compteur à 27 px, déjà lisible à 87 %
 * d'opacité : douze pixels de texte au flanc d'un nombre de 41,6 px, et une
 * fenêtre bien assez longue pour qu'on y lise « le marché a reculé ». Un bloc
 * dont chaque valeur est dérivée ne peut pas se permettre le seul mouvement
 * qui appelle une lecture fausse.
 */
.jr-note-anim .jr-note__seuil {
	transform: scaleY(0);
	transform-origin: top;
}

.jr-note-anim.is-in .jr-note__seuil {
	transform: none;
	transition: transform 0.6s var(--jr-preuve-ease);
}

/* L'étiquette ne bouge pas non plus : elle se révèle une fois la ligne
   tracée, sans quoi elle nommerait un trait encore incomplet. */
.jr-note-anim .jr-note__seuil-etiq {
	opacity: 0;
	transform: translateX(-50%);
}

.jr-note-anim.is-in .jr-note__seuil-etiq {
	opacity: 1;
	transform: translateX(-50%);
	transition: opacity 0.4s var(--jr-preuve-ease) 0.45s;
}

.jr-note-anim .jr-note__trajet {
	transform: scaleX(0);
}

.jr-note-anim.is-in .jr-note__trajet {
	transform: scaleX(1);
	transition: transform 1.1s var(--jr-preuve-ease);
}

.jr-note-anim .jr-note__point--apres {
	opacity: 0;
	transform: scale(0.4);
}

.jr-note-anim.is-in .jr-note__point--apres {
	opacity: 1;
	transform: none;
	transition: opacity 0.4s var(--jr-preuve-ease) 0.9s, transform 0.4s var(--jr-preuve-ease) 0.9s;
}

@media (prefers-reduced-motion: reduce) {
	.jr-note-anim .jr-note__trajet,
	.jr-note-anim.is-in .jr-note__trajet,
	.jr-note-anim .jr-note__point--apres,
	.jr-note-anim.is-in .jr-note__point--apres,
	.jr-note-anim .jr-note__seuil,
	.jr-note-anim.is-in .jr-note__seuil {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* L'étiquette garde son centrage : « transform: none » la décalerait d'une
	   demi-largeur vers la droite. */
	.jr-note-anim .jr-note__seuil-etiq,
	.jr-note-anim.is-in .jr-note__seuil-etiq {
		opacity: 1;
		transform: translateX(-50%);
		transition: none;
	}
}


/* ==========================================================================
   L'ACTE — 768px ET AU-DELÀ : les deux mois passent côte à côte, et la liste
   des catégories passe sur une seule ligne par poste.
   ========================================================================== */

@media (min-width: 768px) {
	.jr-saison__mois-liste {
		grid-template-columns: 1fr 1fr;
	}

}


/* ==========================================================================
   L'ACTE — ANIMATION
   --------------------------------------------------------------------------
   Même mécanique que les graphiques et les avis, et pour la même raison : le
   gate .jr-saison-anim est posé par jr-preuve.js. Sans JavaScript la classe
   n'arrive jamais, aucune règle ci-dessous ne s'applique, et les barres sont à
   la hauteur que PHP leur a donnée. Le script ne pose pas non plus le gate
   quand le visiteur demande un mouvement réduit.

   La transition est déclarée sur l'ÉTAT D'ARRIVÉE. Sur l'état à zéro, la pose
   du gate animerait la mise à zéro : on verrait les barres se vider au
   chargement.

   Le décalage vient de --i, écrit en PHP sur la carte et hérité par ses
   descendants — aucun style en ligne de transition-delay.
   ========================================================================== */

.jr-saison-anim .jr-saison__barre {
	transform: scaleY(0);
}

.jr-saison-anim.is-in .jr-saison__barre {
	transform: scaleY(1);
	transition: transform 0.9s var(--jr-preuve-ease);
	transition-delay: calc(var(--i, 0) * 140ms);
}

.jr-saison-anim .jr-saison__delta {
	opacity: 0;
	transform: translateY(8px);
}

/* La progression arrive APRÈS sa barre : elle en est la conclusion, l'annoncer
   pendant la montée la priverait de son effet. */
.jr-saison-anim.is-in .jr-saison__delta {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s var(--jr-preuve-ease), transform 0.5s var(--jr-preuve-ease);
	transition-delay: calc(var(--i, 0) * 140ms + 750ms);
}

@media (prefers-reduced-motion: reduce) {
	.jr-saison-anim .jr-saison__barre,
	.jr-saison-anim.is-in .jr-saison__barre,
	.jr-saison-anim .jr-saison__delta,
	.jr-saison-anim.is-in .jr-saison__delta {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* ==========================================================================
   LES DEUX GRAPHIQUES « EXTRANET »
   --------------------------------------------------------------------------
   RUPTURE GRAPHIQUE ASSUMÉE. Rien ici n'appartient à la charte JR : ni le
   blanc, ni le bleu, ni le jaune, ni la police système. C'est l'effet
   recherché — on doit reconnaître la provenance de la donnée au premier coup
   d'œil, sans la confondre avec une affirmation maison.

   Les jetons --jrp-bk-* sont déclarés sur .jr-preuve__graph, jamais sur :root
   ni même sur .jr-preuve : cette palette étrangère ne doit pouvoir déteindre
   sur aucune autre partie de la section, et encore moins sur le reste du site.

   AUCUNE url() ICI NON PLUS — même raison qu'en tête de fichier.

   CE QUI EST VOLONTAIREMENT ABSENT : logo, nom de marque composé comme une
   marque, faux onglets, fausse barre d'URL, faux boutons d'interface.
   Reproduire l'allure d'un graphique est licite ; donner à croire qu'on affiche
   l'interface d'un tiers ne l'est pas. La mention « Reproduction » sous chaque
   carte est là pour cette raison et n'est pas décorative.
   ========================================================================== */

.jr-preuve__graphs {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 3vw, 1.75rem);
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.jr-preuve__graph,
.jr-preuve__avis {
	--jrp-bk-bleu: #0071C2;
	/* Bleu foncé des pastilles de note. Blanc dessus : 11,53:1. */
	--jrp-bk-bleu-fonce: #003580;
	/* Vert des barres de visibilité. Sur le gris de piste #E7E7E7 : 4,15:1. */
	--jrp-bk-vert: #008009;
	--jrp-bk-bleu-clair: #A3C7ED;
	--jrp-bk-jaune: #FEBB02;
	--jrp-bk-gris: #737373;
	--jrp-bk-titre: #1A1A1A;
	--jrp-bk-texte: #6B6B6B;
	--jrp-bk-grille: #E7E7E7;
	--jrp-bk-bord: #E7E7E7;
	--jrp-bk-radius: 4px;
	--jrp-bk-police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/*
 * L'HABILLAGE DE CARTE NE VAUT QUE POUR LES GRAPHIQUES.
 *
 * Les jetons ci-dessus sont partagés par les deux blocs ; ce qui suit ne l'est
 * pas. Dans le bloc avis, la carte blanche est portée par chaque AVIS
 * (.jrp-bk-avis) : c'est le conteneur qui reste transparent, sur l'eucalyptus,
 * pour que son intertitre et sa mention restent dans la voix du site.
 */
.jr-preuve__graph {
	/* Le plafond n'est pas cosmétique : le SVG a un viewBox fixe, donc sa
	   typographie grandit avec lui. Au-delà de ~560px les libellés d'axe
	   deviendraient plus gros que le sous-titre de la carte. */
	max-width: 560px;
	width: 100%;
	margin: 0 auto;
	padding: 24px;
	box-sizing: border-box;
	/* Colonne : la grille étire les deux cartes à la même hauteur, et la légende
	   du bas (margin-top:auto plus loin) vient alors se caler sur le même
	   alignement d'une carte à l'autre plutôt que de flotter au milieu de la
	   plus courte. */
	display: flex;
	flex-direction: column;
	border: 1px solid var(--jrp-bk-bord);
	border-radius: var(--jrp-bk-radius);
	background-color: #FFFFFF;
	/* Ombre de la famille « encre » du site (rgba(46,46,42,α)) : une carte
	   blanche posée à plat sur l'eucalyptus paraît découpée au cutter ; une
	   ombre douce la fait reposer sur le fond au lieu d'y être collée. */
	box-shadow: 0 2px 10px rgba(46, 46, 42, 0.18);
	font-family: var(--jrp-bk-police);
	color: var(--jrp-bk-titre);
}

/* --- En-tête de carte : textes à gauche, légende à droite ------------------ */

.jrp-bk-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-bottom: 1.25rem;
}

.jrp-bk-head__txt {
	flex: 1 1 15rem;
	min-width: 0;
}

.jrp-bk-titre {
	margin: 0;
	font-family: var(--jrp-bk-police);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--jrp-bk-titre);
}

.jrp-bk-soustitre {
	margin: 4px 0 0;
	font-family: var(--jrp-bk-police);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--jrp-bk-texte);
}

.jrp-bk-leg {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.jrp-bk-leg__item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 12px;
	line-height: 1.2;
	color: var(--jrp-bk-texte);
	white-space: nowrap;
}

.jrp-bk-leg__dot {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	/* Le jaune est très clair : sans ce liseré, la pastille se dissout dans le
	   blanc de la carte et la légende perd son seul repère visuel. */
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.jrp-bk-leg__dot--nous { background-color: var(--jrp-bk-bleu); }
.jrp-bk-leg__dot--conc { background-color: var(--jrp-bk-jaune); }

/* --- Le tracé -------------------------------------------------------------- */

.jrp-bk-plot {
	/* Le SVG a un viewBox fixe et s'étire en largeur : sa hauteur suit toute
	   seule, il n'y a aucune hauteur à déclarer ici. */
	margin: 0;
}

.jrp-bk-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.jrp-bk-grille {
	stroke: var(--jrp-bk-grille);
	stroke-width: 1;
}

.jrp-bk-axe {
	stroke: var(--jrp-bk-bleu-clair);
	stroke-width: 1.5;
}

.jrp-bk-ylab,
.jrp-bk-xlab {
	fill: var(--jrp-bk-gris);
	font-family: var(--jrp-bk-police);
	/*
	 * ATTENTION : cette taille est en UNITÉS DE viewBox, pas en pixels rendus.
	 * Le SVG mesure 640 unités de large et s'affiche à la largeur de la carte :
	 * la taille rendue vaut donc cette valeur multipliée par (largeur / 640).
	 * Les paliers plus bas compensent ce facteur pour garder les libellés
	 * lisibles d'un bout à l'autre — ils ne « grossissent » pas le texte, ils
	 * l'empêchent de rétrécir avec la carte.
	 */
	font-size: 13px;
	font-weight: 400;
}

/* Libellés de l'axe X : version longue par défaut, version courte sur petit
   écran. Seul le graphique A émet les deux (« sept. 2025 » -> « 09/25 ») ;
   celui dont les libellés tiennent déjà, comme les notes 1 à 10, n'a pas de
   classe --long et n'est donc jamais masqué ici. */
.jrp-bk-xlab--court { display: none; }

/* --- Animation des barres --------------------------------------------------
   Le gate .jr-graph-anim est posé par jr-preuve.js. Sans JavaScript, la classe
   n'apparaît jamais : aucune de ces règles ne s'applique et les barres sont à
   leur hauteur définitive. Le script ne pose pas non plus le gate quand le
   visiteur demande un mouvement réduit.

   Le décalage vient de --i, écrit en PHP sur chaque barre (rang du balayage).
   -------------------------------------------------------------------------- */

.jrp-bk-barre {
	transform-box: fill-box;
	transform-origin: bottom;
}

/*
 * LA TRANSITION EST DÉCLARÉE SUR L'ÉTAT D'ARRIVÉE, JAMAIS SUR L'ÉTAT À ZÉRO.
 *
 * Ce n'est pas un détail de style. Le gate est posé par le script APRÈS la
 * première peinture, donc alors que les barres sont déjà dessinées à leur
 * hauteur définitive. Si la transition vivait ici, cette mise à zéro serait
 * elle-même animée : on verrait les barres DESCENDRE de leur hauteur vers zéro
 * pendant 750 ms, puis remonter au défilement. Sans transition sur cette règle,
 * la mise à zéro est instantanée — et comme les graphiques sont tout en bas de
 * la quatrième section, elle se produit hors de l'écran.
 *
 * La règle .is-in, elle, apporte à la fois la hauteur finale ET la transition :
 * le changement de classe déclenche donc bien l'animation de montée, avec son
 * décalage.
 */
.jr-graph-anim .jrp-bk-barre {
	transform: scaleY(0);
}

.jr-graph-anim.is-in .jrp-bk-barre {
	transform: scaleY(1);
	transition: transform 0.75s var(--jr-preuve-ease);
	transition-delay: calc(var(--i, 0) * 60ms);
}

.jrp-bk-barre--nous,
.jrp-bk-barre--seule { fill: var(--jrp-bk-bleu); }
.jrp-bk-barre--conc  { fill: var(--jrp-bk-jaune); }

.jrp-bk-legende {
	/* margin-top:auto pousse la mention en bas quand la grille étire la carte
	   (voir la note sur display:flex). Il vaut 0 quand il n'y a pas de place à
	   reprendre : l'écart minimal vient donc du padding, pas de la marge, sinon
	   la mention viendrait coller au graphique sur la carte la plus haute. */
	margin: auto 0 0;
	padding-top: 14px;
	font-family: var(--jrp-bk-police);
	font-size: 12px;
	line-height: 1.45;
	color: var(--jrp-bk-gris);
}


/* ==========================================================================
   GRAPHIQUES — ADAPTATION AUX LARGEURS
   ========================================================================== */

/* PLUS DE GRILLE À DEUX COLONNES : IL NE RESTE QU'UN GRAPHIQUE.

   L'histogramme de répartition est devenu l'acte « les 72 avis ». La règle qui
   passait à deux colonnes au-delà de 1000px enfermerait désormais le graphique
   restant dans la moitié gauche du conteneur, calé à gauche d'un vide de même
   largeur. Elle est donc retirée, et le conteneur garde sa colonne unique.

   ET ON NE LÈVE PAS SON PLAFOND DE LARGEUR pour autant, contrairement à ce que
   fait la carte de visibilité avec max-width:none. Les 560px de
   .jr-preuve__graph ne sont pas cosmétiques : le SVG a un viewBox fixe, sa
   typographie grandit donc avec sa largeur, et au-delà de ~560px les libellés
   d'axe deviendraient plus gros que le sous-titre de la carte. La carte de
   visibilité peut s'en affranchir parce qu'elle est en HTML et n'a pas de
   viewBox — le graphique, lui, ne le peut pas. Il reste plafonné et se centre
   par son margin:0 auto, exactement comme il le faisait déjà sous 1000px. */

@media (max-width: 767px) {
	.jr-preuve__graph {
		padding: 16px;
	}

	.jrp-bk-xlab--long { display: none; }
	.jrp-bk-xlab--court { display: inline; }
}

/* Paliers de compensation de l'échelle du SVG (voir la note sur font-size). */
@media (max-width: 620px) {
	.jrp-bk-ylab,
	.jrp-bk-xlab { font-size: 17px; }
}

@media (max-width: 430px) {
	.jrp-bk-ylab,
	.jrp-bk-xlab { font-size: 22px; }
}


/* ==========================================================================
   GRAPHIQUES — MOUVEMENT RÉDUIT
   --------------------------------------------------------------------------
   Le script ne pose déjà pas le gate dans ce cas ; cette règle est la seconde
   ceinture, au cas où la classe arriverait par un autre chemin.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.jr-graph-anim .jrp-bk-barre,
	.jr-graph-anim.is-in .jrp-bk-barre {
		transform: none;
		transition: none;
	}
}


/* ==========================================================================
   LE BLOC AVIS
   --------------------------------------------------------------------------
   Même facture que les graphiques : cartes blanches, radius 4px, police
   système, jetons --jrp-bk-* (déclarés plus haut, sur les deux blocs à la
   fois). Reproduction en HTML d'avis publics — pas de capture d'écran, pas de
   logo, pas de nom composé comme une marque, pas de faux chrome.

   L'INTERTITRE ET LA MENTION SONT DANS LA VOIX JR, PAS DANS CELLE DE LA
   REPRODUCTION. Ils sont posés sur l'eucalyptus, hors des cartes blanches :
   c'est le site qui présente les avis, et les cartes qui les reproduisent. La
   séparation est visuelle autant qu'éditoriale.
   ========================================================================== */

.jr-preuve__avis {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.jr-preuve__avis-titre {
	margin: 0 0 clamp(1.5rem, 3.5vw, 2.25rem);
	font-family: var(--jr-preuve-corps);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	/* Sauge éclaircie : 6,71:1 sur l'eucalyptus. La sauge pure y échouerait. */
	color: var(--jr-preuve-sauge-clair);
}

.jrp-bk-avis-liste {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jrp-bk-avis {
	/*
	 * HAUTEUR HOMOGÈNE PAR RANGÉE, CONTENU TOUJOURS EN HAUT.
	 *
	 * La grille étire les cartes d'une même rangée à la hauteur de la plus haute
	 * (align-items: stretch, par défaut). C'est voulu et on le garde : les
	 * cartes forment une trame régulière.
	 *
	 * NE PAS CENTRER VERTICALEMENT LE CONTENU. Ça a été essayé pour qu'une carte
	 * courte ne paraisse pas vide, et c'était une erreur : dans une rangée, TOUTE
	 * carte moins haute que sa voisine reçoit du jeu, pas seulement la plus
	 * courte. Le centrage décalait donc leur contenu vers le bas, et les
	 * pastilles de note, les noms et les dates ne s'alignaient plus d'une colonne
	 * à l'autre — ce qui se voit immédiatement sur une grille de cartes.
	 *
	 * Le bon comportement est celui-ci : tout en haut, sans exception, et
	 * l'espace libre reste en bas de la carte qui en a.
	 */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;

	padding: 20px;
	border: 1px solid var(--jrp-bk-bord);
	border-radius: var(--jrp-bk-radius);
	background-color: #FFFFFF;
	/* Même ombre « encre » que les cartes de graphique : une carte blanche à
	   plat sur l'eucalyptus paraît découpée. */
	box-shadow: 0 2px 10px rgba(46, 46, 42, 0.18);
	font-family: var(--jrp-bk-police);
	color: var(--jrp-bk-texte);
}

.jrp-bk-avis__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.jrp-bk-note {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: var(--jrp-bk-radius);
	background-color: var(--jrp-bk-bleu-fonce);
	color: #FFFFFF;
	font-family: var(--jrp-bk-police);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.jrp-bk-avis__qui {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.jrp-bk-avis__nom {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--jrp-bk-titre);
}

.jrp-bk-avis__date {
	font-size: 13px;
	line-height: 1.3;
	color: var(--jrp-bk-gris);
}

.jrp-bk-avis__titre {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--jrp-bk-titre);
}

.jrp-bk-avis__texte {
	/* <blockquote> : le navigateur lui pose une marge et une indentation par
	   défaut, on remet tout à plat. Aucun guillemet décoratif n'est ajouté —
	   la carte dit déjà que c'est une citation. */
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	font-size: 14px;
	line-height: 1.55;
	color: var(--jrp-bk-texte);
}

.jrp-bk-avis__trad {
	margin: 10px 0 0;
	font-size: 12px;
	font-style: italic;
	line-height: 1.4;
	color: var(--jrp-bk-gris);
}

/*
 * La mention est posée sur l'eucalyptus, pas dans une carte blanche : le gris
 * --jrp-bk-gris (#737373) des légendes de graphique n'y donnerait que 2,18:1.
 * On reprend donc le traitement de la mention de source du bloc A — calcaire à
 * 62 %, soit 4,74:1 — en gardant la police système pour rester dans la même
 * famille visuelle que ce qu'elle légende.
 */
.jr-preuve__avis-legende {
	margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
	font-family: var(--jrp-bk-police);
	font-size: 12px;
	line-height: 1.45;
	text-align: center;
	color: var(--jr-preuve-sur-fond-discret);
}


/* --- Apparition : fondu + léger décalage, 80 ms entre les cartes -----------
   Même mécanique que les barres, et même leçon : la transition est déclarée sur
   l'ÉTAT D'ARRIVÉE. Si elle vivait sur l'état masqué, la pose du gate par le
   script animerait la disparition des cartes au chargement.

   Sans JavaScript, le gate n'arrive jamais : aucune de ces règles ne s'applique
   et les quatre avis sont simplement lisibles.
   -------------------------------------------------------------------------- */

.jr-avis-anim .jrp-bk-avis {
	opacity: 0;
	transform: translateY(16px);
}

.jr-avis-anim.is-in .jrp-bk-avis {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s var(--jr-preuve-ease), transform 0.6s var(--jr-preuve-ease);
	transition-delay: calc(var(--i, 0) * 80ms);
}

@media (min-width: 768px) {
	.jrp-bk-avis-liste {
		grid-template-columns: 1fr 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jr-avis-anim .jrp-bk-avis,
	.jr-avis-anim.is-in .jrp-bk-avis {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* ==========================================================================
   LA CARTE « NOTE DE VISIBILITÉ »
   --------------------------------------------------------------------------
   Elle reprend .jr-preuve__graph pour sa coque (carte blanche, radius, ombre,
   mention calée en bas) et n'ajoute ici que la barre et ses deux textes.

   Elle n'est pas plafonnée comme la carte de graphique : une barre horizontale
   unique se lit mieux large, on lève donc le max-width de .jr-preuve__graph.

   MARGE HAUTE PLEINE, ET C'EST UN CHANGEMENT. Elle portait la MOITIÉ de
   l'écart courant de la section — clamp(1.25rem, 3vw, 1.75rem) — parce qu'elle
   suivait alors immédiatement le conteneur des graphiques et prolongeait le
   même groupe. Elle a été remontée sous l'acte des deux mois : elle n'est plus
   la suite de rien, c'est un bloc entre deux blocs. Elle reprend donc l'écart
   commun à la section (bandeau, actes, graphiques, avis), faute de quoi elle
   se collait à l'acte au-dessus — 28px au lieu de 56px, mesuré.
   ========================================================================== */

.jr-preuve__visi {
	max-width: none;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.jrp-bk-visi-piste {
	/* Vert Booking sur gris de piste : 4,15:1, bien au-delà des 3:1 demandés à
	   un élément d'interface porteur de sens. */
	height: 20px;
	border-radius: 2px;
	background-color: var(--jrp-bk-grille);
	overflow: hidden;
}

.jrp-bk-visi-barre {
	display: block;
	height: 100%;
	border-radius: 2px;
	background-color: var(--jrp-bk-vert);
	/* La largeur vient du style en ligne posé par PHP : elle est la donnée.
	   L'animation, elle, passe par transform — jamais par width, qui relayoute
	   à chaque image. */
	transform-origin: left center;
}

.jrp-bk-visi-fort {
	margin: 14px 0 0;
	font-family: var(--jrp-bk-police);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--jrp-bk-titre);
}

.jrp-bk-visi-note {
	margin: 6px 0 0;
	font-family: var(--jrp-bk-police);
	font-size: 13px;
	line-height: 1.5;
	color: var(--jrp-bk-gris);
}

/* Remplissage à l'entrée. Même leçon que partout ailleurs dans cette feuille :
   la transition est sur l'ÉTAT D'ARRIVÉE, sinon la pose du gate animerait la
   mise à zéro et l'on verrait la barre se vider au chargement. */
.jr-visi-anim .jrp-bk-visi-barre {
	transform: scaleX(0);
}

.jr-visi-anim.is-in .jrp-bk-visi-barre {
	transform: scaleX(1);
	transition: transform 0.75s var(--jr-preuve-ease);
}

@media (prefers-reduced-motion: reduce) {
	.jr-visi-anim .jrp-bk-visi-barre,
	.jr-visi-anim.is-in .jrp-bk-visi-barre {
		transform: none;
		transition: none;
	}
}