/* --- Variables & Reset --- */
:root {
  --primary-color: #bc2125;
  --primary-hover: #600;
  --bg-dark: #515151;
  --bg-light: #f6f6f6;
  --text-dark: #000;
  --shadow: 1px 1px 10px rgba(0,0,0,0.5);
  --border-radius: 10px;
}
 {
  box-sizing: border-box; /* Aide à la gestion des paddings */
}
body {
  margin: 0;
  background-color: var(--bg-dark);  
  font-family:Verdana,sans-serif;
  font-size: 1.1em;
  line-height: 1.6; /* Un ratio de 1.6 est souvent plus lisible que 200% */
}

/* --- Typographie & Liens --- */
h1, h2, .big, .sommaire p, dt, .lire-article a { font-weight: 700; }

h1 { text-align: center; font-size: 1.6em; padding: 20px 10px; }

h2 {
  text-align: center;
  font-size: 1.3em;
  padding: 20px 10px;
  background-color: #ececec;
  box-shadow: 1px 1px 5px var(--text-dark);
  border-radius: var(--border-radius);
  margin: 50px 15px;
}

h3 { font-size: 1.2em; padding: 30px 10px; margin: 20px 10px; font-style: italic; }
h4,h5,h6{padding:10px 15px}

a { text-decoration: none; color: var(--primary-color); transition: 0.3s; }
a:hover { color: var(--primary-hover); }
a:link,a:visited {color:#bc2125}

p { margin: 10px 5%; text-indent: 5%; }

/* --- Structure --- */
article,aside, footer {
  margin: 0 auto;
  padding: 60px 0;
  max-width: 100%;
  background-color: #fff;
  box-shadow: var(--shadow);
}

.mid,.time,figure{text-align:center}
.cadre img{background-color:#f6f6f6}
.time{font-size:.8em;font-style:italic;font-weight:400;line-height:100%;margin:.5em 0}
.big,.lire-article a:link,.red,.sommaire p,a,dt,h1{font-weight:700}

ul{margin:0 5px;padding:0 2%}
ol{margin:0;padding:0 10%}
li{margin:0 2px;float:none;padding:0}

figure,img{margin:20px auto}
dt{font-style:italic;padding:0 10px}
figure{font-size:.7em;font-style:italic;padding:0 15px}
figure img{margin:0 auto}

a img{border:none}
figure,img{max-width:100%;height:auto;display:block}
.listicle li{padding:20px 0}
.lire-article{font-size:1.1em;background-color:#f6f6f6;margin:10px;padding:20px 5px}
.lire-article a:link{font-weight:700}
.lire-article p{margin:20px 10%;}
.lire-article::before{content:"\0000a0En savoir plus ->>\0000a0 " }
.clic::after,.fila li a::after{content:"\0000a0➤"}
.fila ol{margin:0;padding:0}
.fila li,.inlineblock{display:inline-block}
.auth,.fila{font-size:.8em}
.big,.sommaire p{font-size:1.3em}
.sommaire{font-family:"Segoe UI","Trebuchet MS",sans-serif}
.auth,.fila,.sommaire{background-color:#f6f6f6;margin:10px;padding:20px 5px}
.auth a,.fila a,.sommaire a{text-decoration:none;color:#000}
.red{color:red}
.grey{background-color:#e3e3e3;padding:10px 0}
.first::first-letter{font-weight:700;color:red}
.cadre img{border:1px solid #000;padding:10px}
.text-color-orange{color:#ffad00;background-color:#000}
.text-color-bleu{color:#42adff;background-color:#000}
.text-color-jaune{color:#ff0;background-color:#000}
.text-color-vert{color:#12dc12;background-color:#000}
.text-color-rouge{color:red;background-color:#000}
.search{padding:10px 5px;background-color:#f6f6f6}
.home img{display:inline;float:right;margin:10px}
.menu{background-color:#fff;border:1px solid #000}
.menu img{margin:0 30px 0 10px;display:inline}
.menu ul{margin:0;padding:0;list-style-type:none;display:inline}
.menu li{background-color:#ebebeb;margin:1px;width:98%;display:inline-block;border:1px solid #000}
.menu li a{display:block;padding:2px 5px;color:#000;font-size:1.9em}
.menu li a:hover{color:#fff;background-color:#949494}
.fila,.lire-article,.sommaire{box-shadow:1px 1px 5px #000;border-radius:10px;margin:50px 15px}
.men{background-color:#fff;text-shadow:2px 2px 4px #999;position:fixed;top:10px;text-align:left;z-index:0;width:80%;padding-left:10%;left:-90%;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-transition:left .4s cubic-bezier(.72,.89,.28,1.39);transition:left .4s cubic-bezier(.72,.89,.28,1.39)}
.men>a:after{font-weight:700}
.men img{display:inline;margin:2px 15px 2px 2px;max-height:35px;width:auto}
.men ul{list-style-type:none;margin:0;padding:0}
.men li{background:#f6f6f6;margin:3px}
.men li a{background-color:#f6f6f6;text-shadow:2px 2px 4px #999;display:block;padding:2px 10px 0 5px;border-radius:10px;font-size:.9em;color:#000;-webkit-tap-highlight-color:transparent}
.men li a:hover{color:#fff;background-color:#949494;text-shadow:2px 2px 4px #000}
.nav-open,body:target .nav-close{display:inline;text-decoration:none}
.nav-close,body:target .nav-open{display:none}
.men>a:after{content:"\2261";position:absolute;top:.3rem;right:-3rem;color:#000;font-size:3rem;cursor:pointer}
body:target .men{left:-10%}

@media screen and (min-width:1000px){article,aside,footer{width:900px}.menu li{width:32.2%}.menu li a{font-size:1em}.men{width:20%;left:-30%}}