:root
{
	--jdgFont:"Avenir Next","Segoe UI",sans-serif;
	--jdgHtmlBk:#98b265; /* #fff3 par dessus #7e9e3e */
	--jdgBodyBk:#7e9e3e;
	--jdgTheMenuBk:#657f31; /* #0003 par dessus #7e9e3e */
	--jdgTheMenuColor:#fff;
	--jdgMainBk:#fff;
	--jdgMainBk2:#f3f3f3;
	--jdgMainColor:#000;
	--jdgAsideBk:#f3f3f3;
	--jdgAsideColor:#000;
	--jdgButtonColor:#000;
	--jdgButtonBk:#eee;
	--jdgButtonBorderColor:#777;
	--jdgInputTextBorderColor:#777;
	--jdgBorderColor:#d9d9d9;
	--jdgAlertColor:#f00;
	--jdgJapaneseColor:#7e9e3e;
	--jdgChineseColor:#7e3e3e;
	--jdgKoreanColor:#3e7e7e;
	--jdgFrenchColor:#5e5e5e;
	--jdgEnglishColor:#5e3e7e;
	--jdgFocusBk:rgba(0,0,0,0.05);
	--jdgHoverBk:rgba(0,0,0,0.1);
	--jdgOnButtonFocusBk:rgba(0,0,0,0.15);
	--jdgOnButtonHoverBk:rgba(0,0,0,0.20);
	--jdgOnDarkFocusBk:rgba(0,0,0,0.2);
	--jdgOnDarkHoverBk:rgba(0,0,0,0.4);
	--jdgDisabledColor:rgba(0,0,0,0.3);
	
	/* pour avoir des marges laterales qui augmentent progressivement */
	/* en fonction de la largeur du viewport, mais qu'a partir de 2*19em */
	/* a 38em, 19vw==7.22em, (jdgMarginA-jdgMarginB)==0, la marge est de 0 */
	/* au dessus de 38em, 19vw>7.22em, une marge apparait */
	--jdgMarginA:19vw;
	--jdgMarginB:7.22em; /* (2*19/100)*19 */
	/* au dessus de 76em, on recommence avec une marge de 0 */
	/* et le menu est toujours visible */
	--jdgMarginC:19vw;
	--jdgMarginD:14.44em; /* (76/100)*19 */
	/* au dessus de 152em, on n'augmente plus la largeur du contenu */
	/* la marge devient constante elle-aussi et vaut jdgMarginD */
	/* car 152 est le double de 76 */
}
@media (prefers-contrast:more)
{
	:root
	{
		--jdgBk:#657f31;
		--jdgTheMenuBk:#526627;
		--jdgJapaneseColor:#526627;
		--jdgChineseColor:#662727;
		--jdgKoreanColor:#276666;
		--jdgFrenchColor:#3e3e3e;
		--jdgEnglishColor:#522766;
	}
}
html
{
	background:var(--jdgHtmlBk);
	scroll-behavior:smooth;
}
body
{
	position:relative;
	box-sizing:border-box;
	background:var(--jdgBodyBk);
	font-family:var(--jdgFont);
	min-width:9.5em;
	margin:0 auto;
	padding:0 calc(var(--jdgMarginA) - var(--jdgMarginB));
	min-height:47.5em; /* hauteur minimal pour s'aligner sur le menu */
	/* hyphenisation mieux ici que dans le @media (max-width:19em) (si petits gobans) */
	hyphens:auto;
	overflow-wrap:anywhere; 
}
hr
{
	color:var(--jdgBorderColor);
	background:var(--jdgBorderColor);
	border:0;
	height:1px;
	margin:1em 0;
}
img
{
	/* ne pas specifier de width ici */
	/* permet ainsi d'utiliser la valeur de l'attribut width */
	/* par contre il faut specifier height:auto si max-width:100%; entre en action */
	display:block;
	max-width:100%;
	height:auto;
}
noscript img
{
	max-width:min(100%,20em);
}
h1, h2, h3, h4, b, span.definition
{
	font-weight:600;
}
ul,li{margin:0;padding:0 0 0 0.5em;}
ul {list-style-type:'\2022';}
li>ul {list-style-type:'\25E6';}
li>ul>li>ul {list-style-type:'\25AA';}
li>ul>li>ul>li>ul {list-style-type:'\25AB';}
button,
input,
summary
{
	font-family:var(--jdgFontFamily);
	font-weight:var(--jdgFontWeight);
}
dl
{
	border-top:1px solid var(--jdgBorderColor);
}
dd
{
	border-bottom:1px solid var(--jdgBorderColor);
	padding:0 0 1em 0;
	margin:0 0 1em 0;
}
dt
{
	margin:1em 0;
}
dt>span
{
	padding-right:1em;
}
figure
{
	margin:0;
	padding:0;
}
figure em
{
	display:block;
	font-size:0.75em;
}
/* siteSearch */
.siteSearch
{
	box-sizing:border-box;
	position:absolute;
	z-index:40;
	display:block;
	padding:0.5em 1em;
	width:19em;
	max-width:calc(100% - 4em);
	height:4em;
}
.siteSearch .gsc-control-cse,
.siteSearch .gsc-search-box,
.siteSearch .gsc-search-box *
{
	box-sizing:border-box !important;
	padding:0 !important;
	margin:0 !important;
	border:0 !important;
	border-radius:0 !important;
	background:transparent !important;
	width:100% !important;
}
.siteSearch table
{
	border-spacing:0 !important;
}
.siteSearch .gsc-input-box input
{
	color:#fff !important;
	font-family:var(--jdgFont) !important;
	height:2rem !important;
	line-height:2rem !important;
	border-bottom:1px solid #fff !important;
}
.siteSearch .gsc-input-box input::placeholder
{
	color:rgba(255,255,255,0.75) !important;
	font-size:0.875rem !important;
}
.siteSearch .gsc-input-box .gscb_a
{
	color:var(--jdgTheMenuColor) !important;
}
.siteSearch button.gsc-search-button
{
	border:1px solid rgba(255,255,255,1) !important;
	border-radius:0.25rem !important; /* 1em = 0 ici ? */
	height:2rem !important;
	width:3rem !important;
	padding:0.5rem !important;
	margin-left:1rem !important;
}
.siteSearch button.gsc-search-button svg
{
	fill:rgba(255,255,255,1) !important;
	display:block !important;
	margin:0 auto !important;
	height:100% !important;
	width:100% !important;
}
.siteSearch button.gsc-search-button:focus
{
	background-color:var(--jdgOnDarkFocusBk) !important;
}
.siteSearch button.gsc-search-button:hover
{
	background-color:var(--jdgOnDarkHoverBk) !important;
}
/* accessibility link */
a.accessibilityLink
{
	display:block;
	position:absolute;
	top:0.25em;
	right:1em;
	width:2.5em;
	height:2.5em;
	pointer-events:auto;
}
a.accessibilityLink img
{
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:100%;
	height:auto;
	margin:0;
}
/* header */
header
{
	position:relative;
	z-index:30;
	background-image:url("../_img/divers/logo_ffg_grey.webp");
	background-repeat:no-repeat;
	background-size:5em 3em;
	background-position:1em 4em;
	padding:4em 0 0 7em;
	margin:0 auto;
	height:3em;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:start;
	overflow:hidden;
	pointer-events:none;
}
header img
{
	height:2.4em;
	width:auto;
	z-index:5;
	margin:0.5em 4em 0 4em;
	filter:invert(100%);
}
header img:first-of-type
{
	margin-left:0;
}
/* menus */
.theMenu
{
	box-sizing:border-box;
	position:absolute;
	z-index:20;
	top:0;
	bottom:0;
	left:calc(var(--jdgMarginA) - var(--jdgMarginB));
	width:19em;
	margin:0;
	padding:8em 1em 0 1em;
	color:var(--jdgTheMenuColor);
	display:flex;
	justify-content:space-between;
	pointer-events:none;
}
.theMenu summary,
.theMenu>a,
.theMenu details[open]
{
	pointer-events:auto;
}
.theMenu summary,
.theMenu a
{
	color:inherit;
	display:block;
	height:1.5em;
	line-height:1.5em;
	position:relative;
}
.theMenu summary
{
	list-style-type:none; /* Firefox */
}
.theMenu summary::-webkit-details-marker
{
	display:none; /* Chrome */
}
.theMenu summary>span
{
	text-decoration:underline;
}
.theMenu details>ul
{
	box-sizing:border-box;
	display:block;
	position:absolute;
	top:0;
	left:0;
	min-height:100%;
	z-index:-1;
	padding:10.5em 1.5em 0 2em;
	width:19em;
	background-color:var(--jdgTheMenuBk);
}
.theMenu details>ul>li:last-of-type
{
	padding-bottom:8em;
	background-image:url("../_img/dico/illustration/ishiToGoke.webp");
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:8em;
}
.theMenu>a
{
	z-index:1;
}
@keyframes openMenu
{
	/* transition ne marche pas avec chrome ou safari, 15/09/20 */
	/* safari ne rejoue pas l'animation 2 fois sans JS */
	0%   {left:calc(var(--jdgMarginB) - var(--jdgMarginA) - 19em);}
	100% {left:0;}
}
.theMenu details[open]>ul
{
	animation:openMenu 0.5s forwards;
}
.theMenu summary,
.theMenu>a
{
	padding-left:1.25em;
}
.theMenu summary::before,
.theMenu>a::before
{
	content:"";
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-repeat:no-repeat;
	background-size:1em 1em;
	background-position:0 center;
	padding-left:1.25em;
	filter:invert(100%);
}
.theMenu summary::before
{
	background-image:url("../_img/icon/menu.svg");
}
.theMenu>a.homeMenuItem::before
{
	background-image:url("../_img/icon/home.svg");
}
.theMenu>a.contentMenuItem::before
{
	background-image:url("../_img/icon/content.svg");
}
.theMenu li a::before
{
	content:"";
	box-sizing:border-box;
	position:absolute;
	z-index:-1;
	left:-2em;
	right:0;
	top:0;
	bottom:0;
	padding-left:2em;
}
.shortMenu
{
	display:flex;
	flex-wrap:wrap;
	margin:1em 0;
}
.shortMenu a,
.shortMenu span
{
	display:block;
	height:2em;
	line-height:2em;
	margin-right:2em;
}
.shortMenu span
{
	color:var(--jdgDisabledColor);
}
.shortMenu a.aboutMenuItem,
.shortMenu a.homeMenuItem,
.shortMenu a.backMenuItem,
.shortMenu a.searchMenuItem,
.shortMenu a.downloadMenuItem,
.shortMenu a.tableMenuItem,
.shortMenu a.linkMenuItem,
a.videoLink
{
	background-repeat:no-repeat;
	background-size:1em 1em;
	background-position:0 center;
	padding-left:1.25em;
}
.shortMenu a.aboutMenuItem
{
	background-image:url("../_img/icon/about.svg");
}
.shortMenu a.homeMenuItem
{
	background-image:url("../_img/icon/home.svg");
}
.shortMenu a.backMenuItem
{
	background-image:url("../_img/icon/backMenuIcon.svg");
}
.shortMenu a.searchMenuItem
{
	background-image:url("../_img/icon/search.svg");
}
.shortMenu a.downloadMenuItem
{
	background-image:url("../_img/icon/downloadMenuIcon.svg");
}
.shortMenu a.tableMenuItem
{
	background-image:url("../_img/icon/tableMenuIcon.svg");
}
.shortMenu a.linkMenuItem
{
	background-image:url("../_img/icon/linkMenuIcon.svg");
}
a.videoLink
{
	background-image:url("../_img/icon/video.svg");
	display:inline-block;
	margin-right:2em;
}
.langMenu
{
	display:flex;
	min-height:1.5em;
	margin:1em 0;
	gap:1em;
}
.langMenu a
{
	display:inline-flex;
	gap:0.25em;
}
.langMenu a img
{
	border:0;
	width:auto;
	height:1.5em;
}
/* main */
main
{
	position:relative;
	z-index:1;
	margin:3em 0 0 0;
	padding:1em 2vw calc(3vw + 1em) 2vw;
	color:var(--jdgMainColor);
}
main::before
{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:-1;
	background:var(--jdgMainBk);
	transform:skew(0,-3deg);
}
main::after
{
	content:"";
	position:absolute;
	z-index:1;
	display:block;
	top:-8.5em;
	right:0;
	height:9.75em;
	width:13em;
	background-image:url("../_img/dico/illustration/goban.webp");
	background-repeat:no-repeat;
	background-position:right -0.5em bottom;
	background-size:13em 9.75em;
}
main>h1
{
	margin-top:calc(3vw - 0.5em);
	margin-bottom:0.5em;
	padding:2px;
	text-align:center;
}
main ul
{
	line-height:2em;
}
main a
{
	color:var(--jdgMainColor);
}
main a.skipAheadLink img,
main a.skipBackLink img,
main a.skipAheadLink img,
main a.skipBackLink img
{
	width:1em;
	height:auto;
	margin:auto;
}
main .pageList
{
	display:grid;
	grid-template-columns:repeat(auto-fill,3em);
	margin:1em 0;
}
main .pageList+.pageList
{
	border-top:1px solid var(--jdgBorderColor);
	padding-top:1em;
}
main .pageList input[type="submit"]
{
	color:var(--jdgMainColor);
	border:0;
	border-radius:0;
	margin:0;
	padding:0;
	background:var(--jdgMainBk);
	font-size:1em;
	width:3em;
	height:2em;
}
main .pageList a
{
	text-decoration:underline;
}
main .pageList>*
{
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0;
	padding:0;
	width:3em;
	height:3em;
}
main a.selectedIndex,
main .pageList input[type="submit"].selectedInput
{
	color:var(--jdgAlertColor);
}
main.dico .largeDicoAllTerms,
main.dico .smallDicoAllTerms,
main.dico .largeDicoAllTerms ul,
main.dico .largeDicoAllTerms li,
main.dico .smallDicoAllTerms li
{
	margin:0;
	padding:0;
	list-style:none;
}
main.dico .largeDicoAllTerms>li,
main.dico .smallDicoAllTerms>li
{
	padding:1em 0;
	border-bottom:1px solid var(--jdgBorderColor);
}
main.dico .largeDicoAllTerms>li:first-of-type,
main.dico .smallDicoAllTerms>li:first-of-type
{
	border-top:1px solid var(--jdgBorderColor);
}
main.dico .largeDicoAllTerms>li>ul>li span:not(:last-of-type)::after
{
	content:",";
}
main.dico .largeDicoAllTerms>li>ul>li a
{
	text-decoration:none; 
}
main.dico .largeDicoAllTerms>li>ul>li a::after
{
	content:"\000A0:";
}
main .french
{
	color:var(--jdgFrenchColor);
}
main .traduction th:nth-of-type(2),
main .traduction td:nth-of-type(2),
main .japanese
{
	color:var(--jdgJapaneseColor);
}
main .traduction th:nth-of-type(3),
main .traduction td:nth-of-type(3),
main .traduction th:nth-of-type(4),
main .traduction td:nth-of-type(4),
main .chinese
{
	color:var(--jdgChineseColor);
}
main .traduction th:nth-of-type(5),
main .traduction td:nth-of-type(5),
main .traduction th:nth-of-type(6),
main .traduction td:nth-of-type(6),
main .korean
{
	color:var(--jdgKoreanColor);
}
main .traduction th:nth-of-type(1),
main .traduction td:nth-of-type(1),
main .english
{
	color:var(--jdgEnglishColor);
}
main.dico a span.japanese
{
	text-decoration:underline;
}
main.playOnline section,
main.faq section,
main.yose section
{
	padding-bottom:1em;
	border-bottom:1px solid var(--jdgBorderColor);
}
main.playOnline section:last-of-type,
main.faq section:last-of-type,
main.yose section:last-of-type
{
	border-bottom:0;
}
main aside.potdBox
{
	float:left;
	box-sizing:border-box;
	padding:1em;
	margin:0 2vw 2vw 0;
	max-width:calc(1em * 282 / 16 + 2em);
	color:var(--jdgAsideColor);
	background:var(--jdgAsideBk);
}
main aside.potdBox h2
{
	box-sizing:border-box;
	font-size:1.5em;
	text-align:center;
	margin:0;
	padding:0;
}
main aside.potdBox a
{
	display:block;
	text-align:center;
}
main .egc2024
{
	margin:-1em auto 1em auto;
}
main .egc2024 *
{
	margin:0 auto;
}
main .egc2024 span
{
	display:block;
	text-align:center;
	position:relative;
	top:calc(-1 * min(5vw,1em));
}
main .news,
main .news hr,
nav.pageList,
.shortMenu
{
	clear:both;
}
main .news figure
{
	margin:0 1em 1em 0;
	float:left;
}
main .news figure:nth-of-type(2n)
{
	margin:0 0 1em 1em;
	float:right;
}
main .border
{
	border:1px solid var(--jdgBorderColor);
	max-width:calc(100% - 2px);
}
main .news ul
{
	position:relative;
	left:1em;
	margin-right:1em;
}
main .video-16-9
{
	display:block;
	width:100%;
	max-width:38em;
	margin:0 auto;
	aspect-ratio:16 / 9;
}
main .video-16-9+.video-16-9
{
	margin-top:1em;
}
main .w600 {--w:600;}
main .w320 {--w:320;}
main .w300 {--w:300;}
main .w240 {--w:240;}
main .w225 {--w:225;}
main .w213 {--w:213;}
main .w212 {--w:212;}
main .w200 {--w:200;}
main .w116 {--w:116;}
main .w100 {--w:100;}
main .news img,
main .egc2024 img
{
	max-width:min(100%,calc(1em * var(--w,300) / 16));
	width:calc(1em * var(--w,300) / 16);
	height:auto;
}
main .news img.border
{
	max-width:min(calc(100% - 2px),calc(1em * var(--w,300) / 16));
}
main .winner
{
	color:var(--jdgAlertColor);
}
main table,
main table *
{
	box-sizing:border-box;
}
main table
{
	margin:1em 0;
	border-collapse:collapse;
}
main th
{
	background:var(--jdgMainBk2);
	border:1px solid var(--jdgBorderColor);
	font-weight:400;
	padding:0.25em;
}
main td
{
	border:1px solid var(--jdgBorderColor);
}
main .gameList
{
	width:100%;
}
main .eventGlobal
{
	--matchNum:8;
	--bw:2.5em;
	margin-top:1em;
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(calc(var(--matchNum) * var(--bw) + 7em),1fr));
}
main.oneMatch .eventGlobal {--matchNum:1;}
main.twoMatches .eventGlobal {--matchNum:2;}
main.threeMatches .eventGlobal {--matchNum:3;}
main.fourMatches .eventGlobal {--matchNum:4;}
main.fiveMatches .eventGlobal {--matchNum:5;}
main.sixMatches .eventGlobal {--matchNum:6;}
main.sevenMatches .eventGlobal {--matchNum:7;}
main.eightMatches .eventGlobal {--matchNum:8;}
main .eventTable
{
	max-width:max-content;
	border-collapse:collapse;
	height:min-content;
}
main .eventTable th
{
	width:6em;
}
main .eventTable td
{
	/* min-height sans effet sur ces tds ? */
	width:var(--bw);
	height:var(--bw);
	text-align:center;
	padding:0;
}
main.history figure
{
	display:flex;
	flex-direction:column;
	align-items:center;
}
/* form */
main .jdgForm
{
	margin:1em 0;
}
main .jdgForm fieldset
{
	padding:0;
	border:0;
	margin:0 0 0.5em 0;
}
main .connectForm .inputsField,
main .searchGameForm .inputsField,
main .contactForm .inputsField
{
	display:grid;
	grid-template-columns:1fr 1fr;
	max-width:30em;
	gap:0.5em;
}
main .searchDicoForm .inputsField,.buttonsField
{
	display:inline-block;
	height:2em;
	line-height:2em;
}
main input[type="submit"][value="Rechercher"]
{
	background-image:url("../_img/icon/search.svg");
	background-repeat:no-repeat;
	background-size:0.75em 0.75em;
	background-position:0.5em center;
	padding-left:1.75em;
	margin:0.25em 0 0 0;
}
main input[type="text"],
main input[type="search"],
main input[type="email"],
main input[type="password"]
{
	border:1px solid var(--jdgInputTextBorderColor);
}
main input[type="submit"],
main input[type="reset"],
main button.audioBtn
{
	color:var(--jdgButtonColor);
	background:var(--jdgButtonBk);
	border:1px solid var(--jdgButtonBorderColor);
	border-radius:0.25em;
	min-width:2.5em;
	padding-top:0.25em;
	padding-bottom:0.25em;
	margin:0;
}
main button.audioBtn:not(:first-of-type)
{
	margin-left:0.5em;
}
/* technics */
main ul.diagramList
{
	list-style-type:none;
	display:flex;
	flex-wrap:wrap;
	margin:0;
	padding:0;
}
main ul.diagramList li
{
	
	margin:0;
	padding:0.125em;
}
main a.gosStarter
{
	display:block;
	padding:0;
	max-width:10em;
}
main a.gosStarter *
{
	pointer-events:none;
}
/* maxiGos */
/* nouveau maxiGos */
/* on parametre font-family meme si le theme jdg a deja la bonne */
/* car il y a pas que le theme jdg qui est utilise */
main div.mxGlobal,
main div.mxGlobal button,
main div.mxGlobal input
{
	font-family:inherit;
}
main.mori div.mxGlobal,
main.joseki div.mxGlobal,
main.lifeAndDeath div.mxGlobal,
main.fourLessons div.mxGlobal,
main.lesson div.mxGlobal
{
	--gobanScale:1.25;
}
/* on parametre max-width, sinon petit tressautement quand le goban n'a pas 12 colonnes */
main aside.potdBox div.mxGlobal {max-width:var(--gobanMaxWidth);}
main aside.potdBox div.mxGlobal .mxCommentBox {height:2.5em;}
/* vieux maxiGos */
main div.mxGlobalBoxDiv {margin:1em 0;}
main div.mxGlobalBoxDiv,
main div.mxGlobalBoxDiv button,
main div.mxGlobalBoxDiv input
{
	font-family:var(--jdgFont);
}
main div.mxGlobalBoxDiv .mxSolveDiv button {margin:0 min(2.5vw,0.25em);}
main aside.potdBox div.mxGlobalBoxDiv {margin:0;}
main.goRules figure.g7x7 div.mxGlobalBoxDiv
{
	--gobanMaxWidth:calc(1em * 169 / 16);
}
main.goRules figure.g9x9 div.mxGlobalBoxDiv
{
	--gobanMaxWidth:calc(1em * 215 / 16);
}
main.goRules figure.g19x19 div.mxGlobalBoxDiv
{
	--gobanMaxWidth:calc(1em * 445 / 16);
}
main.history div.mxGlobalBoxDiv {margin:0 auto;}
main.gameDB div.mxGlobalBoxDiv {margin:1em auto;}
main.mori div.mxGlobalBoxDiv
{
	--gobanMaxWidth:calc(1em * 307 / 16);
}
main.mori div.mxGlobalBoxDiv.mxProblemConfig,
main.mori div.mxGlobalBoxDiv.mxTreeConfig,
main.lesson div.mxGlobalBoxDiv.mxTreeConfig
{
	margin:1em auto;
}
main .diagramList div.mxGlobalBoxDiv,
main .dicoList div.mxInnerGobanDiv {margin:0;}
main .dicoList div.mxInnerNotSeenDiv:not(:empty) {margin: 0.5em 0 0 0;}
main.fourLessons div.mxGlobalBoxDiv {--gobanMaxWidth:calc(1em * 215 / 16);}
main.joseki div.mxGlobalBoxDiv {margin:1em auto;}
main.joseki div.mxGlobalBoxDiv,
main.lesson div.mxGlobalBoxDiv {--gobanMaxWidth:24.5em;} /* ~ 1.5 * 261 / 16 */ 
main.lifeAndDeath div.mxGlobalBoxDiv {margin:2em auto;}
main.lifeAndDeath div.mxGlobalBoxDiv {--gobanMaxWidth:20em;} /* ~ 1.5 * 213 / 16 */
main.yose div.mxInnerGobanDiv {margin:0;}
/* footer et .scrollTop */
footer
{
	text-align:center;
	padding:3.5vw 1em 1em 1em;
}
footer::after
{
	content:"";
	display:block;
	height:5.25em;
	width:5em;
	background-image:url("../_img/divers/goban4bk.svg");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100%;
	margin:1em auto;
}
footer>span,
footer>a
{
	position:relative;
	z-index:10;
	display:inline-block;
	padding:1em;
	margin:0.25em;
	border-radius:50%;
	color:var(--jdgTheMenuColor);
}
.scrollTop
{
	--hz:200vh; /* ligne d'horizon */
	container:scrollTop/size;
	position:absolute;
	z-index:1;
	top:var(--hz);
	left:0;
	right:0;
	height:calc(100% - var(--hz));
	pointer-events:none;
}
.scrollTop>a
{
	--ws:min(10vmin,1rem);
	font-size:var(--ws);
	position:sticky;
	top:calc(100vh - 5 * var(--ws));
	margin:0 calc(2 * var(--ws)) 0 auto;
	z-index:100;
	display:block;
	color:transparent;
	border-radius:50%;
	width:calc(3 * var(--ws));
	height:calc(3 * var(--ws));
	bottom:calc(2 * var(--ws));
	overflow:clip;
	pointer-events:auto;
	transition:transform 1s;
}
@container scrollTop (max-height:4rem)
{
	/* doit etre apres le code precedent */
	.scrollTop>a {transform:scale(0);visible:hidden;}
}
footer>span::before,
footer>a::before,
.scrollTop>a::before
{
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	bottom:0;
	right:0;
	display:inline-block;
	border-radius:50%;
	background-color:#0003;
}
footer>span::before,
footer>a::before
{
	content:'';
}
.scrollTop>a::before
{
	content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill="none" stroke="white" d="M6 3V9M3 7L6 3L9 7"/></svg>');
}
/* focus, hover et cursor */
.mxGlobal.mxMinimalistTheme.mxEditConfig .mxMenuBox .mxSubMenu:has(button:focus-visible),
.mxGlobal.mxMinimalistTheme.mxEditConfig .mxMenuBox .mxSubMenu:has(button:hover)
{
	background:#fff;
}
.mxGlobalBoxDiv.mxMinimalistTheme.mxEditConfig .mxMenuDiv .mxSubMenuDiv:has(button:focus-visible),
.mxGlobalBoxDiv.mxMinimalistTheme.mxEditConfig .mxMenuDiv .mxSubMenuDiv:has(button:hover)
{
	background:#fff;
}
*:focus:not([type="radio"]):not([type="checkbox"]) {outline:none;}
.theMenu summary:focus,
.theMenu>a:focus,
a.accessibilityLink:focus,
.theMenu li a:focus::before,
footer>a:focus,
.scrollTop>a:focus
{
	background-color:var(--jdgOnDarkFocusBk);
}
.theMenu summary:hover,
.theMenu>a:hover,
a.accessibilityLink:hover,
.theMenu li a:hover::before,
footer>a:hover,
.scrollTop>a:hover
{
	background-color:var(--jdgOnDarkHoverBk);
}
main input[type="submit"]:focus,
main input[type="reset"]:focus,
main button.audioBtn:focus
{
	background-color:var(--jdgOnButtonFocusBk);
}
main input[type="submit"]:hover,
main input[type="reset"]:hover,
main button.audioBtn:hover
{
	background-color:var(--jdgOnButtonHoverBk);
}
main a:focus-visible,
main .pageList input[type="submit"]:focus-visible,
.mxGlobal.mxMinimalistTheme button:focus-visible,
.mxGlobal.mxMinimalistTheme.mxEditConfig button:focus-visible,
.mxGlobal.mxMinimalistTheme.mxEditConfig textarea:focus-visible,
.mxGlobal.mxMinimalistTheme.mxEditConfig .mxSubMenu button:focus-visible,
.mxGlobal.mxMinimalistTheme.mxEditConfig .mxTreeDiv:focus-visible,

.mxGlobalBoxDiv.mxMinimalistTheme button:focus-visible,
.mxGlobalBoxDiv.mxMinimalistTheme.mxEditConfig button:focus-visible,
.mxGlobalBoxDiv.mxMinimalistTheme.mxEditConfig .mxMenuDiv .mxSubMenuDiv button:focus-visible,
.mxGlobalBoxDiv.mxMinimalistTheme.mxEditConfig .mxEditCommentToolDiv textarea:focus-visible,
.mxGlobalBoxDiv.mxMinimalistTheme.mxEditConfig .mxTreeDiv:focus-visible
{
	background:var(--jdgFocusBk);
}
main a:hover,
main .pageList input[type="submit"]:hover,
.mxGlobal.mxMinimalistTheme button:hover,
.mxGlobal.mxMinimalistTheme.mxEditConfig .mxSubMenu button:hover,
.mxGlobalBoxDiv.mxMinimalistTheme button:hover,
.mxGlobalBoxDiv.mxMinimalistTheme.mxEditConfig .mxMenuDiv .mxSubMenuDiv button:hover
{
	background:var(--jdgHoverBk);
}
main a.gosStarter:focus
{
	filter:brightness(1.1);
}
input[type="submit"],
input[type="reset"],
button,
summary,
main a.gosStarter:hover
{
	cursor:pointer;
}
input[type="submit"][disabled],
input[type="reset"][disabled],
button[disabled],
.shortMenu span
{
	cursor:default;
}
.dede
{
	width:min(100%,42em);
	aspect-ratio:4/3;
	background:#ccc;
	margin:0 auto;
}
/* Responsivite */
/* La classe large est uniquement presente si JS est actif */
/* et si la largeur de l'ecran est suffisante */
body.large
{
	padding-left:calc(var(--jdgMarginC) - var(--jdgMarginD));
	padding-right:calc(var(--jdgMarginC) - var(--jdgMarginD));
}
body.large .theMenu
{
	left:calc(var(--jdgMarginC) - var(--jdgMarginD));
}
body.large .theMenu details[open]>ul
{
	animation:none;
}
body.large .theMenu>a.homeMenuItem
{
	position:absolute;
	left:2em;
}
body.large .theMenu>a.contentMenuItem
{
	position:absolute;
	right:2em;
}
body.large .theMenu summary
{
	display:none;
}
body.large main
{
	margin-left:19em;
	margin-top:1.5em;
}
body.large main::after
{
	top:-7em;
}
body.large footer
{
	padding:3.5vw 1em 1em 20em;
}
body.fullWidth
{
	padding-left:0;
	padding-right:0;
	max-width:190em;
}
body.fullWidth .theMenu
{
	left:0;
}
@media (min-width:152em) /* = 2 x 76 = 4 x 38 = 8 x 19 */
{
	body.large
	{
		padding-left:var(--jdgMarginD);
		padding-right:var(--jdgMarginD);
		max-width:152em;
	}
	body.large .theMenu
	{
		left:var(--jdgMarginD);
	}
	body.large main
	{
		padding:1em calc(152em * 2 / 100) calc(calc(152em * 3 / 100) + 1em) calc(152em * 2 / 100);
	}
	body.large main>h1
	{
		margin-top:calc((152em * 3 / 100 / 2) - 0.5em); /* h1 has a font-size of 2em */
	}
	body.large footer
	{
		padding:calc(152em * 3.5 / 100) 1em 1em 20em;
	}
	body.large main aside.potdBox
	{
		margin:0 calc(152em * 2 / 100) calc(152em * 2 / 100) 0;
	}
}
@media (max-width:38em)
{
	body
	{
		padding-left:0;
		padding-right:0;
	}
	.theMenu
	{
		left:0;
	}
	main aside.potdBox
	{
		float:none;
		margin:0 auto 1em auto;
	}
	main .news figure:nth-of-type(2n+1),
	main .news figure:nth-of-type(2n)
	{
		float:none;
		margin:0 0 1em 0;
	}
	main .news ul
	{
		left:0;
		margin-right:0;
	}
	main .gameList th:nth-of-type(3),
	main .gameList th:nth-of-type(4),
	main .gameList td:nth-of-type(3),
	main .gameList td:nth-of-type(4),
	main .gameListNote
	{
		display:none;
	}
	main .eventGlobal
	{
		--bs:-1px;
	}
	main .eventGlobal,
	main .eventTable,
	main .eventTable tr,
	main .eventTable th
	{
		display:block;
	}
	main .eventTable
	{
		margin:1em 0;
	}
	main .eventTable th
	{
		width:max(6em,calc(100% - var(--bs)));
	}
	main .eventTable th
	{
		margin:0 var(--bs) var(--bs) 0;
	}
	main .eventTable td
	{
		display:inline-flex;
		justify-content:center;
		align-items:center;
		margin:0 var(--bs) var(--bs) 0;
	}
	main dt.asianWord>span
	{
		display:block;
		margin:0.25em 0;
	}
}
@media (max-width:19em)
{
	/* calc(max(100vw,9.5em) / 19) = 1em si 100vw=19em */
	/* si viewport > 19em, les dimensions sont en em */
	/* si 9.5em < viewport < 19em, les dimensions sont en vw */
	/* si viewport < 9.5em, les dimensions sont en em (mais 2 fois plus petites) */
	body
	{
		--ww:max(100vw,9.5em); /* "width" speciale */
		--www:calc(var(--ww) / 19); /* "em" speciale */
	}
	ul ul,li
	{
		padding-left:calc(var(--www) * 0.5);
	}
	.siteSearch {display:none;}
	a.accessibilityLink
	{
		top:calc(var(--www) * 0.25);
		right:calc(var(--www) * 1);
	}
	header
	{
		padding-left:calc(var(--www) * 7);
		padding-top:calc(2em + var(--www) * 0.25);
		padding-bottom:2em;
		background-size:calc(var(--www) * 5) auto;
		background-position:calc(var(--www) * 1) calc(2em + var(--www) * 0.25);
		height:calc(var(--www) * 3);
	}
	header>img:first-of-type
	{
		margin:calc(var(--www) * 0.6) 0 0 0;
		height:calc(var(--www) * 2.4);
	}
	header>img:not(:first-of-type)
	{
		display:none;
	}
	.theMenu
	{
		width:var(--ww);
		flex-direction:column;
		justify-content:flex-start;
		padding-top:calc(2em + var(--www) * 3.5);
		padding-left:calc(var(--www) * 1);
		padding-right:calc(var(--www) * 1);
	}
	.theMenu details>ul
	{
		padding:calc(7em + var(--www) * 3.5) calc(var(--www) * 1.5) 0 calc(var(--www) * 2);
		width:var(--ww);
	}
	.theMenu ul a
	{
		min-height:1.5em;
		height:auto;
	}
	.theMenu li a::before
	{
		left:calc(var(--www) * -2);
		right:0;
		top:0;
		bottom:0;
		padding-left:calc(var(--www) * 2);
	}
	.theMenu details>ul>li:last-of-type
	{
		padding-bottom:calc(var(--www) * 8);
		background-size:calc(var(--www) * 8);
	}
	.shortMenu
	{
		flex-direction:column;
	}
	.shortMenu a,
	.shortMenu span
	{
		min-height:1.5em;
		height:auto;
	}
	.langMenu
	{
		flex-direction:column;
	}
	main::after
	{
		top:calc(var(--www) * -8.5);
		height:calc(var(--www) * 9.75);
		width:calc(var(--www) * 13);
		background-position:right calc(var(--www) * -0.5) bottom;
		background-size:calc(var(--www) * 13) calc(var(--www) * 9.75);
	}
	main .connectForm .inputsField,
	main .searchGameForm .inputsField,
	main .contactForm .inputsField
	{
		grid-template-columns:1fr;
	}
	footer::after
	{
		width:calc(3em + var(--www) * 2);
		height:calc(3.3em + var(--www) * 2.2);
	}
}