:root{--primary:#5bcaf0;--bg:#e3f7ff;--text:#24292c;--card:#ffffff;--border:#e2e8ee;--radius:8px;--shadow:0 4px 16px rgba(0,0,0,0.08);}
#Code {
	text-align:left;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #FFF;
	background-color: #000;
	height: auto;
	width: auto;
	padding:3px 10px;
	margin:5px 0
}
#Code p{text-align:left;
}
/* dark theme */
body.dark{--bg:#1b1f22;--text:#e6eef3;--card:#24292c;--border:#30363c;}
body.dark .card-index, body.dark .dernieres-videos-index div {background-color: slategrey}
body.dark .search {color: white}
body.dark a {color:white}
body.dark a:hover {color:black}
body.dark .derniers-article {background-color: #607080}
body.dark .derniers-article:hover {background-color: gray}
/* RESET */
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,Arial;}
body{background:var(--bg);color:var(--text);transition:.25s;}

a { text-decoration: none; color: cornflowerblue; font-weight: bold}
a:hover {color: blue}
/* HEADER */
header{background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;}
.header{max-width:1200px;margin:auto;display:flex;align-items:center;gap:15px;padding:12px 20px;}

/* search */
.search{margin-left:auto;padding:8px 10px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);}

/* theme toggle */
.theme{cursor:pointer;font-size:18px;}

/* HERO */

.hero{padding:30px 0 0 0;text-align:center;background: #000000;background: radial-gradient(circle,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 52%, rgba(87, 87, 115, 1) 100%); color:darkgrey}
.hero div#menu {position: relative; bottom: 0; margin-top: 20px; height:40px; background-color: dodgerblue;vertical-align: middle}
.hero div#menu ul {margin: 0; padding: 0; height: 100%;}
.hero div#menu ul li {list-style: none; width:90px;height: 40px; display: inline-grid; padding: 0;padding-top: 8px}
.hero div#menu ul li:hover {background-color:navy}
.hero div#menu ul li a {text-decoration: none; font-weight: bold; color: white}
.hero h1{ font-size:34px;margin-bottom:10px;}

/* logo */
.logo{font-weight:700;font-size:20px;}
.logo-header {width:600px}

/* CATEGORIES */

.categories{max-width:1200px;margin:auto;display:flex;gap:10px;padding:15px;overflow-x:auto;}
.cat{background:var(--card);border:1px solid var(--border);padding:6px 12px;border-radius:var(--radius);font-size:14px;cursor:pointer;}
.cat.active{background:var(--primary);color:white;border:none;}

/* GRID */

.container{max-width:1200px;margin:auto;padding:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;
}

/* CARD */

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:.25s;opacity:0;transform:translateY(20px);}
.card.visible{opacity:1;transform:translateY(0);}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
/* image */
.card img{width:100%;height:170px;object-fit:cover;}
/* content */
.card-content{padding:14px;}
.card h3{font-size:18px;margin-bottom:6px;}
.card p{font-size:14px;color:#6b7280;}
/* tags */
.tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;}
.tag{font-size:11px;padding:3px 6px;background:var(--primary);color:white;border-radius:4px;}

/* Page Centrale */
.content{ padding: 0;margin: 10px;text-align: center}
.content ul {  display : inline-block;
  margin :auto;
  text-align:left;}
.content ul li {list-style: square;}

.dernieres-videos-index div img {width: 90%}
.card-index{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; padding: 10px; background-color:white; margin-top:10px; height: auto}
.card-index img {float:right}

.dernieres-videos-index {width:250px; margin-right: 10px}
.dernieres-videos-index div {border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; padding: 10px; background-color:white; margin-top:10px; text-align: center; font-size: 12px}
.dernieres-videos-index div img {margin: 10px 0; width: 100%}
.dernieres-videos-index a {font-size: 20px; line-height: 19px}

.index-right {width:100%;}
.index-content {display: inline-flex}

.derniers-article {display: inline-block; border-radius: 20px; border: solid 1px #e2f6fe; background-color:#e3f7ff; margin: 2px; padding:5px 10px;box-shadow: inset 0px 0px 10px rgba(0,0,0,0.4);}
.derniers-article:hover {background-color: white; transform: translate(1px, 1px);
   box-shadow: inset 0px 0px 3px rgba(0,0,0,0.2);}
.derniers-article a {color:black; }

input, select,textarea {width: 300px; margin-left:auto;padding:8px 10px;border-radius:var(--radius);border:1px solid var(--border);background:white;}


#youtubevid-container {text-align: center; width: 100%; margin:auto; padding:0}
/* PAGE VIDEO YOUTUBE - Titre */
#youtubevid-container .youtubevid-title {width: 100%; padding: 10px;  text-align:center; background-color: brown}

/* PAGE VIDEO YOUTUBE - Video */
#youtubevid-container .youtubevid-video {padding:10px; width:660px;}
#youtubevid-container .youtubevid-video iframe {width:640px; height:320px}

/* PAGE VIDEO YOUTUBE - Description */
#youtubevid-container .youtubevid-description {padding: 10px}
#youtubevid-container .youtubevid-description div {width: 100%; text-align: center; display: block}

/* PAGE VIDEO YOUTUBE - Commentaires */
#youtubevid-container .youtubevid-comments {padding: 10px; width:100%; text-align: center;margin-top: 10px;}

#youtubevid-container .youtubevid-title, #youtubevid-container .youtubevid-video, #youtubevid-container .youtubevid-description, #youtubevid-container .youtubevid-comments {width:650px; margin: auto; background:var(--card);border:1px solid var(--border);border-radius:var(--radius); overflow:hidden;transition:.25s;transform:translateY(20px);}

/* FOOTER */
footer{margin-top:40px;padding:25px;text-align:center;border-top:1px solid var(--border);}
.footer {width:100%;clear: both}


@media (max-width: 650px) {
	.index-content {display: inline}
	.logo-header {width:380px}
	.dernieres-videos-index {width:100%}
	#youtubevid-container .youtubevid-video {padding:10px; margin-right:10px; width:400px;}
#youtubevid-container .youtubevid-video iframe {width:380px; height:230px}
#youtubevid-container .youtubevid-title, #youtubevid-container .youtubevid-video, #youtubevid-container .youtubevid-description, #youtubevid-container .youtubevid-comments {width:400px;}
	.baseline {font-size: 12px}
	.hero div#menu {height: 80px}
}