/* --- Variables & Reset --- */
:root {
  --primary-color: #bc2125;
  --primary-hover: #600;
  --bg-dark: #d3d3d3;
  --bg-light: #f6f6f6;
  --text-dark: #000;
  --shadow: 1px 1px 10px rgba(0,0,0,0.5);
  --border-radius: 10px;
}
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% */
}
/* --- Titres : Clarté et Modernité --- */
h1 {
  text-align: center;
  font-size: 1.8em;
  padding: 30px 10px;
  font-weight: 700;
  color: var(--text-dark);
}
h2 {
  text-align: center;
  font-size: 1.4em;
  padding: 15px 10px;
  background-color: #fff; /* Fond blanc */
  border-bottom: 3px solid var(--primary-color); /* Souligné pour la structure */
  margin: 50px 15px;
  font-weight: 700;
}
h3 { 
  font-size: 1.25em; 
  padding: 10px 15px; 
  margin: 30px 10px 10px 10px; 
  font-style: italic;
  border-left: 4px solid var(--primary-color); /* Rappel vertical */
}
h4, h5, h6 {
  padding: 10px 15px;
  color: var(--primary-color);
}
p { 
  margin: 15px 5%;
  /* Suppression de l'indentation pour un look plus "web" et propre */
}
a, a:visited { 
  text-decoration: none; 
  color: var(--primary-color); 
  transition: 0.3s; 
  font-weight: 700;
}
a:hover { 
  color: var(--primary-hover);
 }
/* --- Structure --- */
article,aside, footer {
  margin: 0 auto;
  padding: 60px 0;
  max-width: 100%;
  background-color: #fff;
  box-shadow: var(--shadow);
}
/* --- divers --- */
.mid{text-align:center}
.cadre img{background-color:#f6f6f6}
figure{
  font-size:.7em;
  font-style:italic;
  padding:0 15px;
  margin:20px auto;
  max-width:100%;
  height:auto;
  display:block;
  text-align:center;
}
figure img{margin:0 auto}
a img{border:none}
img {
  margin:20px auto;
  max-width:100%;
  height:auto;
  display:block
}
ul{margin:0 5px;padding:0 2%}
ol{margin:0;padding:0 10%}
li{margin:0 2px;float:none;padding:0}
dt{font-style:italic;padding:0 10px; font-weight: 700;}
.listicle li{padding:20px 0}
/* --- Bloc "Lire l'article" optimisé --- */
.lire-article {
  font-size: 1.1em;
  background-color: #ffffff;
  margin: 50px auto;
  padding: 30px 20px;
  max-width: 800px;
  box-shadow: var(--shadow-soft);
  border-radius: 12px;
  border-left: 6px solid var(--primary-color); /* Harmonisé en rouge */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lire-article:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.lire-article a {
  color: var(--primary-color);
  text-decoration: underline;
}
.lire-article p {
  margin: 15px 5%;
  color: #333;
}
.lire-article::before {
  content: "➜ EN SAVOIR PLUS ";
  display: block;
  font-weight: bold;
  font-size: 0.85em;
  color: var(--primary-color);
  margin-bottom: 12px;
  letter-spacing: 1.5px;
}
.clic::after,.fila li a::after{content:"\0000a0➤"}
.fila ol{margin:0;padding:0}
.fila li,.inlineblock{display:inline-block}
.fila
{
  box-shadow:1px 1px 5px #000;
  border-radius:10px;
  margin:50px 15px;
  font-size:.8em;
  background-color:#f6f6f6;
  margin:10px;
  padding:20px 5px
}
.fila a{text-decoration:none;color:#000}
.sommaire {
  font-family:"Segoe UI","Trebuchet MS",sans-serif;
  box-shadow:1px 1px 5px #000;
  border-radius:10px;
  margin:50px 15px;
  background-color:#f6f6f6;
  margin:10px;
  padding:20px 5px
}
.sommaire p{font-size:1.3em;font-weight: 700;}
.auth {
  background-color:#f6f6f6;
  margin:10px;
  padding:20px 5px;
  font-size:.8em
}
.auth a {text-decoration:none;color:#000}
.red{color:red;font-weight: 700;}
.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}
.home img{display:inline;float:right;margin:10px}
.big {font-size:1.3em;font-weight: 700;}
.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}
.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%}}