/* ---------------------------------------------------------------------------
   jurisystem.css -- le specifique de jurisystem.fr, et rien d'autre

   Les cinq feuilles ax-*.css d'a cote viennent de la charte Alexia, adaptees
   a ce site. Elles sont pretes a servir telles quelles : aucune etape de
   fabrication, rien a lancer avant un deploiement.

   Le jour ou la charte evolue et qu'il faut les reprendre, voici les quatre
   changements appliques a chaque feuille, dans cet ordre :

   1. Les commentaires sont retires. Ceux de la charte documentent son
      architecture interne -- chemins de fichiers, noms de scripts, notes de
      recette -- et ces informations n'ont pas a etre servies par ce site.
   2. Le crochet de nommage .alexia devient .jurisystem, 1 430 fois. Epargner
      le contenu des url() : le motif y attraperait aussi un nom de domaine et
      le corromprait.
   3. Quatre regles tirent une image de www.alexia.fr -- la photo de fond du
      heros et le monogramme en filigrane des trois panneaux de la demarche.
      Leur background-image passe a none : ce serait afficher le logo d'une
      autre marque, depuis un autre domaine.
   4. Les @font-face pointent en absolu sur /css/alexia/fonts/ ; les remettre
      sur /assets/jurisystem/fonts/, ou vivent les huit fichiers.

   Le prefixe ax- des classes et des jetons se garde : ce sont deux lettres,
   pas un nom, et le renommer rendrait toute reprise ulterieure impraticable.

   Tout le specifique du site vit ici, prefixe jsy-.

   Le kit porte ses jetons sur son crochet de nommage et non sur :root : le
   corps de page doit donc porter class="jurisystem", et le bloc ci-dessous
   reprend le meme selecteur pour gagner par l'ordre de chargement.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1. La gamme

   Le logo etant orange, primary et secondary sont echangees : la gamme
   secondaire de la charte devient primaire, et inversement. Aucune valeur
   n'est inventee, ce sont les deux echelles d'Alexia telles quelles.

   Une consequence a connaitre : la gamme secondaire de la charte n'a pas de
   ton foncé. Son 900, #f29559, donne 2,3:1 sur blanc -- il ne peut donc pas
   porter de texte, ni recevoir du blanc. La section 3 en tire les
   conclusions la ou ca compte.

   Deux effets heureux, en revanche. ax-btn--primary est cale sur
   --ax-secondary-900 et non sur primary : le bouton passe donc du orange a
   2,3:1 au vert a 5,6:1. Et le texte courant, en --ax-neutral-900, ne bouge
   pas : 18,4:1 sur blanc.
   --------------------------------------------------------------------------- */
.jurisystem {
	/* Gamme secondaire de la charte, passee en primaire. */
	--ax-primary-900: #f29559;
	--ax-primary-800: #f5aa7a;
	--ax-primary-700: #f6b58b;
	--ax-primary-600: #f7bf9b;
	--ax-primary-500: #f9caac;
	--ax-primary-400: #fad5bd;
	--ax-primary-300: #fbdfcd;
	--ax-primary-200: #fceade;
	--ax-primary-100: #fef4ee;
	--ax-primary-40: #fefbf8;

	/* Gamme primaire de la charte, passee en secondaire. */
	--ax-secondary-900: #37716b;
	--ax-secondary-800: #5f8d89;
	--ax-secondary-700: #739b98;
	--ax-secondary-600: #87aaa6;
	--ax-secondary-500: #9bb8b5;
	--ax-secondary-400: #afc6c4;
	--ax-secondary-300: #c3d4d3;
	--ax-secondary-200: #d7e3e1;
	--ax-secondary-100: #ebf1f0;
	--ax-secondary-40: #f7f9f9;

	/* La largeur de contenu, par le jeton. Le kit en tire lui-meme le
	   max-width du conteneur -- calc(--ax-container-max + 2 * --ax-sp-5) --
	   et cinq autres regles le lisent, dont la boite verte des domaines.
	   Le poser ici les resserre toutes d'un coup. */
	--ax-container-max: 998px;
}

/* ---------------------------------------------------------------------------
   2. Entete

   Une seule page, donc des ancres et pas d'URL. Pas de panneau burger : celui
   de la charte demande un script que ce site n'a pas, et cinq entrees tiennent
   sur une ligne qui se replie d'elle-meme.
   --------------------------------------------------------------------------- */
/* Le logo prend sa taille reelle. Les retraits de l'entete se resserrent
   pour l'accueillir : le kit met --ax-sp-4 en haut et en bas, ce qui, avec
   un logo de 87 px, poussait la barre a 111 px de haut. Seules ces deux
   declarations changent -- les autres de ax-header__inner sont celles du kit,
   il n'y a pas a les repeter.

   Le repli s'y ajoute : le kit ne le prevoit pas, parce que chez alexia.fr
   les liens disparaissent derriere un burger que ce site n'a pas. Il faut
   donc bien qu'ils aillent quelque part quand la place manque.

   La marge negative rattrape le vide que le SVG porte au-dessus de sa
   lettre : le trace ne remplit pas toute sa boite. */
.jurisystem .ax-header__inner {
	padding-top: var(--ax-sp-1);
	padding-bottom: var(--ax-sp-1);
	flex-wrap: wrap;
	row-gap: var(--ax-sp-2);
}

/* Le logo. Les deux tailles reduites sont indispensables et ne repetent pas
   le kit : le kit descend bien a 95 px sous 768, mais depuis ax-responsive,
   que jurisystem.css suit dans l'ordre de chargement -- a poids de selecteur
   egal, ma valeur de 225 px l'ecrasait, y compris sur un telephone.

   225 px sur les 351 px utiles d'un ecran de 375 n'en laissaient que 114 pour
   quatre liens et un bouton qui en reclament plus de 400. */
.jurisystem .ax-header__logo img {
	display: block;
	width: 225px;
	height: auto;
	margin-top: calc(-1 * var(--ax-sp-1));
}

@media (max-width: 1024px) {
	.jurisystem .ax-header__logo img { width: 170px; }
}

@media (max-width: 768px) {
	.jurisystem .ax-header__logo img { width: 130px; }
}

/* Le groupe reste colle a droite sur grand ecran. La marge automatique avale
   tout l'espace libre, ce qui rend sans effet l'ecart entre le logo et les
   liens : le rendu est celui d'avant la sortie du bouton, au pixel. */
.jurisystem .jsy-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-left: auto;
	gap: var(--ax-sp-5);
}

.jurisystem .jsy-nav__link {
	color: var(--ax-color-text);
	text-decoration: none;
	font-weight: 500;
	transition: color var(--ax-transition);
}


/* ---------------------------------------------------------------------------
   3. Le heros, et ce qui se pose sur l'orange

   Le heros retrouve la photo de la charte, servie depuis ce site et non plus
   depuis un autre domaine. Le voile noir de ax-herophoto reprend donc son
   role -- asseoir du texte blanc sur une image -- et je le laisse faire : la
   regle qui l'eteignait disparait.

   Le sous-titre et la moitie accentuee du titre suivaient --ax-color-accent,
   donc le vert depuis l'echange des gammes, et le vert sur une photo
   assombrie ne se lit pas. L'accent prend l'orange, le sous-titre le blanc.

   Restent les surfaces orange PLEINES, sans photo dessous : la section de
   contact. Le kit y pose du blanc, soit 2,3:1. L'encre du kit y donne 8,1:1
   -- on ne change aucune couleur de la charte, on choisit lequel de ses
   neutres se pose sur la bande. Le logo fait exactement cela.
   --------------------------------------------------------------------------- */
.jurisystem .jsy-hero {
	background-image: url("/assets/jurisystem/img/hero.jpg");
	background-image: image-set(url("/assets/jurisystem/img/hero.webp") type("image/webp"),
	                            url("/assets/jurisystem/img/hero.jpg") type("image/jpeg"));
}

/* Le surtitre. Prefixe jsy- et non ax- : la charte a bien des eyebrow, mais
   sur demarche, avocats, presspage -- jamais sur le heros. Inventer un
   ax-hero__eyebrow serait poser un nom que le kit pourrait reprendre un jour
   pour autre chose. */
.jurisystem .jsy-hero__eyebrow {
	margin: 0 0 var(--ax-sp-3);
	color: var(--ax-neutral-0);
	font-size: var(--ax-body-xs);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}

/* Le sous-titre et la moitie accentuee du titre passent a l'orange. Ils
   suivaient --ax-secondary-900, donc le vert depuis l'echange, et le vert
   sur une photo assombrie ne tient pas : 3,1:1 au bout le plus sombre du
   voile, 1,3:1 au plus clair. L'orange y donne 7,6:1 et 3,3:1.

   Le titre est en --ax-text-1, soit 76 px : c'est du grand texte, dont le
   seuil est 3:1 et non 4,5. L'orange le passe sur toute la largeur de la
   bande, y compris la ou le voile s'eclaircit. */
.jurisystem .jsy-hero .ax-hero__accent { color: var(--ax-primary-900); }

/* Le titre monte d'un cran, a --ax-text-1 : c'est le seul titre de la page,
   et la charte reserve ce cran a un heros.

   Le max-width est indispensable et non redondant : le kit borne le contenu
   du heros a 550 px -- calibre pour la carte de recherche d'alexia.fr, qui
   est etroite. Sans cette ligne, un titre de 76 px se replie sur trois
   lignes dans une bande large de mille. Le conteneur ne le rattrape pas :
   il est au-dessus dans l'arbre, pas au meme niveau. */
.jurisystem .ax-hero__content {
	max-width: 998px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ax-sp-4);
}

.jurisystem .ax-hero__title {
	font-size: var(--ax-text-1);
	text-align: center;
}

/* La moitie accentuee prend sa ligne : "Le droit est complexe." et la
   reponse ne se lisent pas d'un trait. */
.jurisystem .ax-hero__title span.ax-hero__accent { display: block; }

/* Le sous-titre repasse au blanc : 17,4:1 au bout sombre du voile contre
   7,6:1 pour l'orange, et il reste une ligne de texte courant, pas du
   grand texte. Sa largeur est bornee plus court que le titre. */
.jurisystem .jsy-hero p.ax-hero__subtitle {
	color: var(--ax-neutral-0);
	max-width: 650px;
	margin: var(--ax-sp-5) auto 0;
	text-align: center;
}

/* Le titre et le chapeau de deux sections se centrent. Le kit les cale a
   gauche -- h2c pose text-align: left, subc justifie -- d'ou l'accrochage a
   ax-text-center, une classe du kit, plutot qu'a un nom invente. Deux
   classes contre une : la regle l'emporte sans dependre de l'ordre. */
.jurisystem .ax-avispage__h2c.ax-text-center,
.jurisystem .ax-avispage__subc.ax-text-center { text-align: center; }

/* Les citations se resserrent sous leur texte. */
.jurisystem .ax-avispage__med-quote { margin-bottom: var(--ax-sp-2); }

/* Les logos de presse passent en couleur. Le kit les grise et les attenue :
   c'est une facon d'obtenir de l'homogeneite, mais elle les eteint.

   En couleur, l'harmonie doit venir d'ailleurs. Sans contrainte, Le Figaro
   fait 203 px de large et BFMTV 30, soit sept fois moins : la rangee
   ressemble a un depot. Chaque logo est donc centre dans une case de meme
   largeur, hauteur bornee a 28 px -- les marques longues se reduisent, les
   carrees gardent leur taille, et la ligne de base est commune. */
.jurisystem .ax-avispage__logos-row a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: 40px;
	opacity: 1;
	filter: none;
}

.jurisystem .ax-avispage__logos-row img {
	max-height: 28px;
	max-width: 100%;
}

/* Les logos des plateformes d'avis. Hauteur commune plutot que largeur
   commune : trois sont carres, celui d'Alexia est un logotype long. Les
   caler en largeur ecraserait ce dernier a quatorze pixels de haut. */
.jurisystem .ax-avispage__pf img {
	flex: 0 0 auto;
	height: 28px;
	width: auto;
	max-width: 96px;
}

/* Le mot mis en valeur dans un titre de section. L'accueil le fait deja sur
   ax-t2 ; les pages Alexia emploient ax-t4, que rien ne touchait -- le <b>
   n'y portait que sa graisse, dans l'encre du reste du titre, et ne se
   voyait donc pas.

   L'orange serait le choix naturel, c'est la couleur du logo. Il ne tient
   pas : 2,28:1 sur blanc, 1,99 sur le vert pale, 1,89 sur le violet, quand
   le seuil du grand texte est de 3. Le vert donne 5,6 / 4,9 / 4,7 et le
   violet 13,2 sur la bande qui lui repond -- ce sont les deux memes tons
   que l'accueil emploie deja sur #services et #team. */
.jurisystem .ax-avispage .ax-t4 b { color: var(--ax-secondary-900); }
.jurisystem .jsy-bande--violet .ax-t4 b { color: var(--ax-tertiary-900); }

/* Le titre de page monte d'un cran, de 39 a 49 px. Le kit met le heros de
   ax-avispage au meme cran que les titres de section, ce qui se comprend
   chez alexia.fr ou ce titre est une phrase entiere ; ici il fait cinq
   mots, et la page alignait six titres de la meme taille sans qu'aucun ne
   domine. */
.jurisystem .ax-avispage__intro .ax-t4 { font-size: var(--ax-text-3); }

/* La bande de contact passe au vert, et le probleme de contraste s'en va
   avec l'orange : le blanc y donne 5,6:1 contre 2,3:1 sur l'aplat orange.
   Plus besoin d'y forcer l'encre foncee.

   A signaler cote alexia.fr, avec les deux autres manques deja releves : le
   kit fournit ax-section--soft, --tinted et --primary, mais pas --secondary.
   C'est le pendant exact de --primary, et la charte l'ajoutera sans doute un
   jour ; on garde donc son nom plutot que d'en inventer un en jsy-. */
.jurisystem .ax-section--secondary {
	background-color: var(--ax-secondary-900);
	color: var(--ax-neutral-0);
}

.jurisystem .ax-section--secondary .ax-t2 {
	font-size: var(--ax-text-2);
	color: var(--ax-neutral-0);
}

/* Les liens de contenu heritent de --ax-primary-900, l'orange, a 2,3:1 sur
   blanc. Ils prennent le vert d'accent, qui tient 5,6:1 -- c'est la couleur
   que la charte donnait deja a ses liens avant l'echange. */
.jurisystem .ax-link { color: var(--ax-secondary-900); }
.jurisystem .jsy-nav__link:hover { color: var(--ax-secondary-900); }

/* ---------------------------------------------------------------------------
   4. Colonnes de lecture

   Le conteneur fait 1200 px : une ligne de texte y depasse les 130 signes,
   soit le double de ce qui se lit confortablement.
   --------------------------------------------------------------------------- */
.jurisystem .jsy-prose--centre { margin: 0 auto var(--ax-sp-8); }

/* Justifie, avec la cesure : sans elle le francais justifie creuse des
   rivieres de blanc, les mots y etant longs et les articles courts. La
   langue est declaree sur <html>, le navigateur sait donc ou couper. */
.jurisystem .jsy-prose,
.jurisystem .ax-footer__about,
.jurisystem .jsy-service p,
.jurisystem .ax-page p {
	text-align: justify;
	hyphens: auto;
}
.jurisystem .jsy-prose p + p { margin-top: var(--ax-sp-4); }

/* ---------------------------------------------------------------------------
   5. Services, realisations, equipe
   --------------------------------------------------------------------------- */
.jurisystem .jsy-services,
.jurisystem .jsy-work,
.jurisystem .jsy-team {
	margin-top: var(--ax-sp-6);
	gap: var(--ax-sp-6);
}

.jurisystem .jsy-service {
	display: flex;
	flex-direction: column;
	gap: var(--ax-sp-3);
}

/* L'icone dans sa pastille, comme les tuiles du panneau de la charte. */
.jurisystem .jsy-service__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--ax-radius-md);
	/* Le pale de la gamme verte, et non plus celui de l'orange : l'icone
	   etant verte, elle se posait sur un fond d'une autre famille. Le vert
	   sur son propre pale donne 4,9:1, au-dessus du seuil. */
	background-color: var(--ax-secondary-100);
	color: var(--ax-secondary-900);
}

.jurisystem .jsy-service__ico .ax-icon { font-size: 24px; }

/* Meme correction que celle des carets, pour la meme raison : le glyphe
   n'est pas centre dans sa chasse, une boite de largeur fixe le recentre
   dans sa pastille. */
.jurisystem .jsy-service__ico .ax-icon::before {
	display: inline-block;
	width: 18px;
	text-align: center;
}
.jurisystem .jsy-service p { margin: 0; }

/* La carte-lien reprend la remise a zero des cartes de resultat de la
   charte, sans quoi le navigateur souligne tout son contenu en bleu. */
.jurisystem a.jsy-work__item {
	text-decoration: none;
	color: inherit;
}

.jurisystem .jsy-work__desc {
	margin: 0 0 var(--ax-sp-5);
	padding: 0 var(--ax-sp-5);
	color: var(--ax-color-text-muted);
}

.jurisystem .jsy-work__item {
	display: flex;
	flex-direction: column;
	gap: var(--ax-sp-3);
	padding: 0;
	overflow: hidden;
}

.jurisystem .jsy-work__img {
	display: block;
	width: 100%;
	height: auto;
}

.jurisystem .jsy-work__item .ax-card__title {
	display: block;
	padding: 0 var(--ax-sp-5);
}

/* Chaque membre dans sa carte. Le role reste lisible sur ce fond plus
   soutenu : tertiary-800 y donne 4,8:1, contre 5,9 sur le fond de section --
   au-dessus du seuil dans les deux cas. */
.jurisystem .jsy-membre {
	text-align: center;
	padding: var(--ax-sp-5);
	background-color: var(--ax-tertiary-200);
	border-radius: var(--ax-radius-lg);
}

.jurisystem .jsy-membre__photo {
	display: block;
	width: 160px;
	height: 160px;
	margin: 0 auto var(--ax-sp-3);
	object-fit: cover;
	border-radius: 50%;
	background-color: var(--ax-color-bg-soft);
}

.jurisystem .jsy-membre__nom {
	margin: 0;
	font-weight: 600;
	color: var(--ax-tertiary-900);
}

/* --ax-tertiary-800 et non 600 : sur le violet pale de la section, le 600
   donne 3,2:1 pour du texte de 13 px, dont le seuil est 4,5. Le 700 n'y
   arrive pas non plus (4,3:1) ; le 800 tient a 5,9:1 tout en restant
   nettement plus clair que le nom, qui est en 900. */
.jurisystem .jsy-membre__role {
	margin: 0;
	font-size: var(--ax-body-xs);
	color: var(--ax-tertiary-800);
}

/* La place a prendre : un filet interrompu, qui la distingue des huit
   autres sans avoir a l'ecrire. */
.jurisystem .jsy-membre--vous .jsy-membre__photo {
	border: 2px dashed var(--ax-tertiary-900);
}

/* ---------------------------------------------------------------------------
   6. Une gamme par section

   Trois bandes, trois gammes de la charte : le vert pale aux services, le
   violet pale a l'equipe, le vert plein au contact. Les fonds sont pris au
   cran 100, assez clair pour laisser un titre au 700 par-dessus.

   Le titre de section s'allege et prend le violet. font-weight: 400 et non
   100 : la Neue Haas n'est chargee qu'en 400, 500 et 600, un 100 retomberait
   sur le 400 sans que la feuille le dise. Autant l'ecrire.

   Contrastes mesures, seuil de 3:1 pour ces titres qui sont du grand texte :
   5,2:1 sur blanc, 4,5:1 sur le vert pale, 4,3:1 sur le violet pale.
   --------------------------------------------------------------------------- */
/* Les deux bandes teintees, en classes et non plus accrochees a #services
   et #team : elles ne servaient que l'accueil, les trois pages du site
   partagent desormais le meme rythme.

   Elles remplacent aussi ax-section--soft et --tinted partout ou la bande
   porte des cartes blanches. Mesure a l'appui : le soft du kit donne
   1,03:1 contre une carte blanche et le tinted 1,08 -- la carte s'y noie.
   Le vert pale monte a 1,14 et le violet a 1,21, ou elle se detache.
   Le texte courant y reste a 8,7:1 et 8,2:1. */
.jurisystem .jsy-bande--vert { background-color: var(--ax-secondary-100); }
.jurisystem .jsy-bande--violet { background-color: var(--ax-tertiary-100); }

.jurisystem .ax-t2 {
	font-size: var(--ax-text-2);
	font-weight: 400;
	color: var(--ax-tertiary-700);
}

/* Chaque titre se dedouble : le mot qui porte le sens prend un demi-cran de
   graisse et le ton de sa bande, le reste du titre reste au 700 violet.

   La graisse est declaree une fois pour tous les titres, et non trois fois
   sous trois sections : c'est la meme regle typographique partout, seule la
   couleur change d'une bande a l'autre.

   Contrastes releves, seuil de 3:1 pour du grand texte : le vert du titre
   des services donne 4,9:1 sur le vert pale, l'encre des realisations 18,4:1
   sur blanc, le blanc du contact 5,6:1 sur le vert plein. */
.jurisystem .ax-t2 b { font-weight: 500; }

.jurisystem .ax-section#services .ax-t2 { color: var(--ax-secondary-900); }
.jurisystem .ax-section#work .ax-t2 { color: var(--ax-neutral-900); }
.jurisystem .ax-section#team .ax-t2 b { color: var(--ax-tertiary-900); }

/* ---------------------------------------------------------------------------
   7. Contact et pied
   --------------------------------------------------------------------------- */
.jurisystem .jsy-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: var(--ax-sp-4);
	align-items: center;
}

.jurisystem .jsy-contact__ligne {
	display: flex;
	align-items: flex-start;
	gap: var(--ax-sp-3);
	margin: var(--ax-sp-4) 0 0;
}

.jurisystem .jsy-contact__ligne a { color: inherit; }

.jurisystem .jsy-contact__plan iframe {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
	border-radius: var(--ax-radius-lg);
}

/* Le kit met les liens du paragraphe de pied en gras, pour les reperer sans
   dependre de la couleur. Un souligne fait le meme travail sans peser dans
   un bloc qui n'est que de la mention legale. */
.jurisystem .ax-footer__about a.ax-link {
	font-weight: normal;
	text-decoration: underline;
}

/* Deux retouches au bandeau haut du pied. L'ecart d'abord : le kit met
   --ax-sp-9 entre le logo et le texte, ce qui creusait un trou une fois la
   page resserree a 998 px.

   Le repli ensuite. Le bandeau est un flex sans flex-wrap, et il porte
   desormais trois colonnes au lieu de deux ; sans repli, les trois se
   serrent jusqu'a l'illisible sur un telephone. Le kit ne le prevoit pas :
   chez alexia.fr le pied n'a que deux colonnes. */
.jurisystem .ax-footer__top {
	gap: var(--ax-sp-5);
	flex-wrap: wrap;
}

/* La colonne des liens ne se comprime pas : le paragraphe legal, lui, a de
   quoi se replier, et c'est a lui de ceder la place. */
.jurisystem .ax-footer__top .ax-footer__links { flex: 0 0 auto; }

/* La mention de droits. La charte ne fournit pas de classe pour elle. */

.jurisystem .jsy-copy { color: var(--ax-color-text-muted); }

@media (max-width: 900px) {
	.jurisystem .jsy-contact {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ax-sp-6);
	}
}

@media (max-width: 768px) {
	/* Les liens disparaissent : la barre tient alors sur une seule ligne,
	   logo et bouton. C'est le choix de la charte, qui les range derriere un
	   burger -- ce site n'en a pas, ils s'effacent donc simplement. Rien
	   n'est perdu : ce sont des ancres vers des sections de la meme page,
	   qu'on atteint en faisant defiler.
	
	   Le bouton survit parce qu'il est frere de jsy-nav et non son enfant.
	   S'il y etait reste, il disparaitrait avec les liens.
	
	   Ni gap ni font-size ici : sur un element efface, ils ne peignent rien. */
	.jurisystem .jsy-nav { display: none; }

	/* La barre se resserre en hauteur, et d'un cran a droite : le conteneur
	   pose --ax-sp-mobile-lr des deux cotes, mais le bouton porte deja son
	   propre retrait, il n'a pas besoin d'autant. */
	.jurisystem .ax-header__inner {
		padding-top: var(--ax-sp-2);
		padding-bottom: var(--ax-sp-2);
		padding-right: var(--ax-sp-2);
	}

	/* Les bandes respirent un peu plus que ce que pose le kit, qui descend a
	   --ax-sp-mobile-tb, soit 16 px. */
	.jurisystem .ax-section {
		padding-top: var(--ax-sp-5);
		padding-bottom: var(--ax-sp-5);
	}

	/* Le heros se resserre. Le titre descend d'un cran, de 49 a 39 px : a
	   49 px il tenait sur quatre lignes dans les 351 px d'un telephone. */
	.jurisystem .jsy-hero__eyebrow {
		font-size: 8px;
		letter-spacing: 0.75px;
	}

	.jurisystem .ax-hero__title { font-size: var(--ax-text-2); }

	.jurisystem .jsy-hero p.ax-hero__subtitle { font-size: var(--ax-body-xs); }

	/* Seule l'equipe garde deux colonnes : une photo et deux lignes tiennent
	   dans 172 px. Les services et les realisations reviennent a la colonne
	   unique du kit -- a deux colonnes il ne restait que 122 px de texte par
	   carte, soit quinze signes par ligne, et ce texte est justifie.
	
	   Le selecteur ne cite pas ax-grid--4 : il pese autant que celui du kit,
	   c'est l'ordre de chargement qui tranche, et il ne vise que l'equipe. */
	.jurisystem .jsy-team { grid-template-columns: repeat(2, 1fr); }

	.jurisystem .jsy-services,
	.jurisystem .jsy-work,
	.jurisystem .jsy-team {
		margin-top: var(--ax-sp-0);
		gap: var(--ax-sp-2);
	}

	.jurisystem .jsy-prose--centre { margin-bottom: var(--ax-sp-0); }

	/* La carte de membre se resserre. Le margin: auto du releve n'est pas
	   repris : la regle de base pose deja margin: 0 auto var(--ax-sp-3), seul
	   le bas change. */
	.jurisystem .jsy-membre { padding: var(--ax-sp-2); }

	.jurisystem .jsy-membre__photo {
		width: 120px;
		height: 120px;
		margin-bottom: var(--ax-sp-2);
	}

	.jurisystem .jsy-contact__plan iframe { height: 240px; }
}