/* Pokémon Life, styling inspired by the 2008-2011 versions of the site */
:root{--vert:#2B7A67;--vert-fonce:#1e5a4c;--rouge:#C10000;--rouge-vif:#cc0000;
--jaune:#FEE257;--bleu:#008CE4;--bleu-fonce:#336699;--gris:#474747;--creme:#fcf5e6;}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;background:var(--vert);
background-image:linear-gradient(180deg,var(--vert-fonce),var(--vert) 320px);
background-attachment:fixed;color:#333;font-size:14px;line-height:1.6}
a{color:var(--bleu-fonce);text-decoration:none}
a:hover{color:var(--rouge-vif)}
/* language visibility: default English */
html[data-lang="en"] .l-fr{display:none!important}
html[data-lang="fr"] .l-en{display:none!important}
#corps{max-width:980px;margin:0 auto;background:#fff;box-shadow:0 0 18px rgba(0,0,0,.35)}
header{background:linear-gradient(135deg,var(--rouge) 0%,var(--rouge-vif) 55%,#8f0000 100%);
color:#fff;padding:26px 30px 20px;position:relative;overflow:hidden}
header::after{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;
border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 28%,#111 28% 34%,var(--rouge) 34% 100%);
opacity:.25}
header h1{font-size:34px;letter-spacing:1px}
header h1 a{color:var(--jaune);text-shadow:2px 2px 0 #7a0000}
header p.tagline{color:#ffe;font-size:13px;margin-top:4px}
#langbtn{position:absolute;top:14px;right:16px;z-index:5;background:#fff;color:#8f0000;
border:2px solid var(--jaune);border-radius:16px;padding:5px 14px;font-weight:bold;
font-size:12px;cursor:pointer;font-family:inherit;box-shadow:0 1px 4px rgba(0,0,0,.3)}
#langbtn:hover{background:var(--jaune);color:#7a0000}
nav.principal{background:var(--gris);border-bottom:4px solid var(--jaune)}
nav.principal ul{list-style:none;display:flex;flex-wrap:wrap}
nav.principal li a{display:block;padding:10px 16px;color:#fff;font-weight:bold;font-size:13px}
nav.principal li a:hover{background:var(--rouge-vif);color:#fff}
#colonne{display:flex;align-items:flex-start}
aside{width:230px;flex-shrink:0;padding:18px 14px;background:var(--creme);
border-right:1px solid #e2d8bd;min-height:400px}
aside h3{background:var(--rouge);color:#fff;font-size:13px;padding:6px 10px;
margin:14px 0 8px;border-radius:3px}
aside h3:first-child{margin-top:0}
aside ul{list-style:none}
aside li{padding:2px 0 2px 16px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="4.5" fill="%23C10000" stroke="%23333" stroke-width="0.5"/><rect x="0.5" y="4.4" width="9" height="1.2" fill="%23333"/><circle cx="5" cy="5" r="1.6" fill="%23fff" stroke="%23333" stroke-width="0.6"/></svg>') no-repeat left center;font-size:12px}
main{flex:1;padding:22px 26px;min-width:0}
main h2{color:var(--rouge);font-size:22px;border-bottom:3px solid var(--jaune);
padding-bottom:6px;margin-bottom:14px}
main h3{color:var(--bleu-fonce);font-size:16px;margin:18px 0 8px}
main p{margin:0 0 12px}
.chemin{font-size:11px;color:#888;margin-bottom:12px}
.chemin a{color:#888;text-decoration:underline}
table.fiche{border-collapse:collapse;margin:0 0 16px;width:100%;max-width:460px}
table.fiche th{background:var(--rouge);color:#fff;text-align:left;padding:5px 10px;
font-size:12px;width:90px;border:1px solid #a00}
table.fiche td{border:1px solid #ddd;padding:5px 10px;background:var(--creme);font-size:13px}
.news{border:1px solid #e0e0e0;border-left:4px solid var(--rouge);background:#fafafa;
padding:12px 16px;margin-bottom:14px;border-radius:0 4px 4px 0}
.news h3{margin:0 0 6px;color:var(--rouge-vif);font-size:15px}
.news .date{font-size:11px;color:#999;margin-bottom:6px}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:12px 0}
.grille a{display:block;background:var(--creme);border:1px solid #e2d8bd;padding:9px 12px;
border-radius:4px;font-size:13px;font-weight:bold;color:var(--bleu-fonce)}
.grille a:hover{background:var(--jaune);border-color:#d4b400;color:#333}
.encart{background:#eef6ee;border:1px solid #cfe3cf;border-radius:4px;padding:12px 16px;margin:0 0 14px}
footer{background:var(--gris);color:#ccc;font-size:11px;padding:16px 26px;line-height:1.7}
footer a{color:var(--jaune)}
@media(max-width:760px){#colonne{flex-direction:column}aside{width:100%;min-height:0;border-right:none;border-bottom:1px solid #e2d8bd}header h1{font-size:26px}header{padding-top:52px}}