:root {
	--APPROCHE: -2.0px;
	--APPROCHE-SYL: -5px;
	--WORD-SPACE: 10px;
	--SLANT:-50deg;
	--INDENT: 4ch;
	--STROKE:1;
	--WIDTH:60ch;
}
svg {
}

.bbox {
	display: none;
}
body {
	background:var(--background);
	margin: var(--interligne) auto;
}
main {max-width:var(--WIDTH);margin:auto}
main section, main p {
	display: flex;
	justify-content:space-evenly;
	flex-wrap: wrap;
	align-items: baseline;
	flex-direction:var(--DIRECTION);
	width: 100%;
	margin: 0;
	padding: 0;
}
.paragraphe{
margin-top:var(--interligne);
margin-bottom:calc(var(--interligne) * 1)}
.paragraphe{
	gap: calc(var(--interligne) ) var(--WORD-SPACE);
}
svg {
	height: var(--corps);
	margin-top: auto;
	margin-bottom: 0;
}
.mot {
	display: flex;
	max-width: 100%;
	width: fit-content;
	flex-wrap: wrap;
	align-items: end;
	align-self: end;
	/*border: 5px solid var(--COLOR-07-CYAN);*/
	height:calc(var(--interligne) * 0.0); /* + var(--corps));*/
}
a.mot{height:0;transform:translateY(-10px)}
.syllabe {
	display: flex;
	align-self: end;
	flex-wrap: wrap;
}
.mot:nth-of-type(2n) .char {
}
.syllabe:nth-of-type(2n) {
	/*border-bottom: 5px solid purple;*/
}
.espace {
	width: var(--WORD-SPACE);
	height: 1px;
	background-color: green;
}

.char:not(:first-of-type) {
	margin-left: calc(var(--APPROCHE));
}

.syllabe:not(:first-of-type) {
	margin-left: var(--APPROCHE-SYL);
}
.char {
	align-self: end;
	/*border: 1px solid red;*/
}
.a:hover svg {
	/*transform: translateX(-2px) skew(-30deg);*/
}
.a {
	box-sizing: border-box;
	cursor: pointer !important;
}
a:after{display:none !important}
.a:after{content:'';width:100%;height:1px;background:var(--07-CYAN);
	transform:translateY(calc(var(--corps) * -.5));
}
.mot:not(a):hover {cursor: text;}
.paragraphe+.paragraphe .mot:first-of-type {
	margin-left: var(--INDENT);
}
.quote a {font-style:italic}
a .a {

	color:var(--07-CYAN);
}
a {
	top:calc(var(--interligne) * -0.5);
	align-self:center !important;
	margin-left:0 !important; white-space:pre}
img {
	margin: 40px auto;
	width:100%;
	display: block;
	filter: blur(20px);
	border-radius: 50%;
	height: 100%;
	transition: all 9s;
}
img:hover {
	transform: scale(1.5, 1);
}
.image {
	margin:0 auto;
	max-width:50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

h1 {
	display:flex;
	justify-content:center
}

.quote svg {
	transform:skew(var(--SLANT));
}
main:has(a:hover) div:not(.a) .syllabe {opacity:0}