@charset "utf-8";

:root {
	--syntaxe-bkg: #e8e8e8;
}
* {box-sizing:border-box;}

html {
	scroll-behavior:smooth;
}
body {
	width:98%; 
	max-width:1000px; 
	margin:0px auto; 
	font-family:Arial; 
	font-size:10pt;
}
h1 {
	color:#002080;
	font-size:200%;
}
h2 {
	color:#002080;
	font-size:150%;
	margin:40px 0px 10px 0px;
}
h3 {
	color:#002080;
	font-size:110%;
	font-weight:bold;
	margin:12px 0px;
}
h4 {
	font-size:100%;
	font-weight:bold;
	margin:20px 0 0 0;
}
:link {
	text-decoration:none;
}
sup {
	all:initial;
	vertical-align:top;
	font-size:0.75em;
}
#page {
	clear:left;
	display:flex;
}

#frm-search {}
#frm-search #search {
	width:130px;
	margin:0;
}
#frm-search #submit {
	background:linear-gradient(0,#e0e0ff,white);
}

#tdm {
	flex-basis:250px; 
	min-width:220px; 
	padding:0 1% 20px 1%; 
	background-color:#e0e0ff;
	border-right:solid 1px silver;
}
#tdm h2 {
	border-bottom:solid 1px #002080;
	cursor:pointer;
	font-size:1.2em;
	margin:20px 0 10px 0;
}
#tdm h3 {
	margin:30px 0px 20px;
	font-size:1.5em;
}
#tdm #btn-remarque {
	width:100%;
	padding:5px 0;
	background:linear-gradient(0,#e0e0ff,white);
}
#tdm-lettres {			/* Container Index alphabétique */
	display:flex;
	flex-wrap:wrap;
	margin:30px 0px;
	position:sticky;
	top:0px;
	background-color:lightblue;
	border:ridge 5px lightblue;
	padding:5px;
}
.tdm-lettre {			/* Élément Index alphabétique */
	flex-basis:14%;
	font-weight:bold;
	text-align:center;
	cursor:pointer;
}
.tdm-alpha {				/* TDM d'une lettre */
}
.tdm-alpha h3 {
	display:flex;
	justify-content:space-between;
}

#cbDeprecated {vertical-align:sub;}
#cbExperimental{vertical-align:sub;}
#tdm .standardized::before {content:'    ';}	/* 3 caractères   */
#tdm .deprecated {display:none;}
#tdm .deprecated::before {content:'✗ ';color:red; font-weight:bold;}
#tdm .experimental {display:none;}
#tdm .experimental::before {content:'⚠ '; color:orange;}
.tdm-item {
	padding:0 5px;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}
.tdm-item:hover {
	background-color:white;
}

.index-families {
	columns:2 250px;
	column-gap:5%;
	column-rule:solid 1px silver;
}
.index-families h3 {
	margin:10px 0 0 0;
}
.index-family {
	break-inside:avoid;
}

#hamburger {
	display:none;
	width:60px;
	float:left;
	margin-right:10px;
}
#hamburger img {
	width:60px;
}
#contenu {
	width:calc(100% - 150px);
	padding:0px 1%;
}
.center {
	text-align:center;
	margin-left:auto; margin-right:auto;
}

code,tag { /* mot du langage ou balise HTML inséré dans le texte */
	font-family:courrier, monospace;  
	font-weight:bold;
	color:#606060;
	white-space:pre;
	tab-size:3;
	font-size-adjust:0.52;
}
tag {color:blue;} /* pour repérer ces usages et les supprimer */
tag:before {content:'<';}
tag:after {content:'>';}

kbd { /* balise HTML insérée dans le texte */
	font-family:courrier, monospace;  
	font-weight:bold;
	color:#606060;
	font-size-adjust:0.52;
}
kbd:before {content:'<';}
kbd:after {content:'>';}

ul.syntaxes {
	padding-left:15px;
	counter-reset:syntaxes;
}
ul.syntaxes>li {
	margin:30px 0 0 0;
	counter-increment:syntaxes;
	list-style-image:url('../v2-img/puce-syntaxes.png');
}
/* ul.syntaxes li>div{margin-top:10px;} */
ul.syntaxes .syntaxe {margin:0;}
ul.syntaxes  ol {
	list-style-image:none;
	list-style-type:disc;
}
ul.syntaxes ol li {margin:0;}
.syntaxe-avec-numero {display:flex;}
.syntaxe-numero {background: var(--syntaxe-bkg); border-top: solid 1px black;}
.syntaxe-numero:before {
	content:counter(syntaxes); 
	font-size:3em; 
	margin-left:0.5ch;
}
.syntaxe-code {
	flex:1 0 auto; 
	background: var(--syntaxe-bkg); 
	font-family:'courrier', monospace; 
	font-weight:bold; 
	color:#606060; 
	white-space:pre; 
	padding:0 0 12px 20px;
	border-top: solid 1px black;
}
.syntaxe-avec-exemple {display:flex; }
.syntaxe-exemple {flex:0 0 100px; height:60px; margin:1em 10px 0 0;}

.syntaxe,.syntaxe-masquable {
	background-color: var(--syntaxe-bkg);
	margin:0 0 20px 0;
	line-height:1em;
}
.syntaxe {
	padding:0px 0px 12px 20px;
}
.syntaxe-masquable style {
	padding:0px 20px 1em 10px;
	border-top:solid 1px silver;
	border-bottom:solid 1px silver;
}
.values-by-number {display:flex; flex-flow:wrap; justify-content:space-around;}
.values-by-number div {flex-basis:160px; padding:10px; text-align:center;}

#voir-aussi {
	margin:20px 0px;
}
#footer {
	border-top:solid 1px lightblue;
	text-align:center;
	margin:20px 0px 50px 0px;
	padding-top:10px;
}
.erreur {
	margin:20px auto; padding:1%;
	width:75%;
	color:red;
	border:double 3px red;
}
.demo {
/*	width:100%; */
	min-height:60px;
	text-align:center; 
	font-size:120%; 
	margin:20px auto; 
	padding:1%;
	border:solid 1px silver;
	background:#f8f8f8;
}
table.demo {padding:0px;}
table.demo td {border:solid 1px silver;}
.demo-font,.demo-prefix {
	margin:10px 0;
}
.demo-buttons {
	display:-ms-grid;
	-ms-grid-columns:max-content 1fr;
	display:grid;
	grid-template-columns:max-content auto;
	align-items:baseline;
}
.demo-buttons :nth-child(1){-ms-grid-row:1; -ms-grid-column:1;}
.demo-buttons :nth-child(2){-ms-grid-row:1; -ms-grid-column:2;}
.demo-buttons :nth-child(3){-ms-grid-row:2; -ms-grid-column:1;}
.demo-buttons :nth-child(4){-ms-grid-row:2; -ms-grid-column:2;}
.demo-buttons :nth-child(5){-ms-grid-row:3; -ms-grid-column:1;}
.demo-buttons :nth-child(6){-ms-grid-row:3; -ms-grid-column:2;}
.demo-buttons :nth-child(7){-ms-grid-row:4; -ms-grid-column:1;}
.demo-buttons :nth-child(8){-ms-grid-row:4; -ms-grid-column:2;}
.demo-buttons :nth-child(9){-ms-grid-row:5; -ms-grid-column:1;}
.demo-buttons :nth-child(10){-ms-grid-row:5; -ms-grid-column:2;}
.demo-title {
	margin-right:1em;
}
.demo-title-font{min-width:150px;}
.demo-title-prefix {min-width:150px;}
.demo-options {
	display:flex; 
	flex-wrap:wrap;
}
.demo-options div {
	min-width:130px;
	margin-bottom:5px;
}
.demo-options ruby {ruby-position:above; color:silver; margin:0 5px;}
.demo-options ruby rt {font-size:100%; margin:0 3px; color:black;}
.demo-options ruby rt input {margin:0 10px;}

.demo-options input {vertical-align:middle;}
.demo-label-radio {vertical-align:middle;}
.demo-input-radio {margin-top:-1px;}
.demo-label-text {vertical-align:middle; margin-left:20px;}

.demo-valeur,.demo-nuance,.demo-angle {
	font-size:inherit;
	border:none;
	background-color:#f0f0f0;
	text-align:center;
	vertical-align:text-bottom;
}
.demo-valeur{width:60px;}
.demo-nuance{width:100px;}
.demo-angle{width:50px;}
.demo-infos {
	position:relative; top:25px; left:10px;
	color:silver;
	height:0px;
}
#contenu p.deprecated { 
	color:red;
	border:double 3px red;
	padding:10px;
}
#contenu p.experimental {
	color:orange;
	border:double 3px orange;
	padding:10px;
}
#contenu span.standard {font-weight:bold;}
#contenu span.deprecated {font-weight:bold; color:red;}
#contenu span.experimental {font-weight:bold; color:orange;}

.not-supported {
	color:red;
	text-decoration:line-through;
}
.annotation {
    text-indent: -15px;
    margin-left: 15px;
}
.annotation:first-letter {
	font-size:75%; 
	vertical-align:text-top;
}
.info-legale {
	position:fixed;
}
.adsense-in-article {
}
.adsense-local {
	border:inset 3px silver;
	background-color:#fffff0;
	height:190px;
}
[lang='en'] {
	color:darkblue;
}

@keyframes flash {
	0% {opacity:0.5;} 
	5% {opacity:1}
	100% {opacity:0.5;}
}
#flash {
	animation:flash 1s infinite;
	color:orangered;
	text-align:center;
	padding:5px;
	border:ridge 5px lightblue;
}
#flash .exemples {font-size:1.2rem;}

/* Tableau des caractéristiques résumées d'une propriété */


#abstract-property {
	display:grid;
	grid-template-columns:max-content 1fr;
	grid-gap:3px;
	border:solid medium;
	width:75%;
	margin:20px auto;
	background-color:lavender;
}
#abstract-property div {
	border:solid 1px silver;
	padding:2px 5px;
}
#abstract-property .title {
	grid-column:1 / span 2;
	text-align:center;
}
#abstract-property .label {
}
#abstract-property .carac {
}

/* Tableaux Caniuse */

.caniuse-link {
	cursor:pointer;
	color:blue;
}
.caniuse-result {
	display:none;
}
[onclick] {
	cursor:pointer;
}
@media only screen and (max-width: 720px) {
  #hamburger {display:block; }	/* Menu hamburger */
  #privacy  {font-size:0.75em;}	/* boite RGPD */
  #contenu {width:100%;}
  #abstract-property {width:100%; grid-template-columns:min-content 1fr;}
  .tdm-screen {display:none;}
}

/* Formulaire de remarques */

#frm-remarque {display:none; width:400px; margin:10px auto; padding:5px; border:ridge 3px silver;}
#frm-remarque div {margin:5px 0;}
#frm-remarque #rem-description {width:100%; max-width:100%;}
#frm-remarque #rem-buttons {text-align:right; margin-top:20px;}
#frm-remarque #rem-ar {color:red;}