/* planlibertin.fr — feuille de style publique (reprend les couleurs de l'ancien thème) */
:root {
  --rouge: #db3a34;
  --rouge-fonce: #b92d28;
  --rose: #fdeceb;
  --texte: #404040;
  --gris: #f4f4f4;
  --nuit: #222;
  --or: #f5b301;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 Lato, "Helvetica Neue", Arial, sans-serif; color: var(--texte); background: #fff; }
a { color: var(--rouge); }
img { max-width: 100%; height: auto; }
.conteneur { max-width: 990px; margin: 0 auto; padding: 0 16px; }

.entete { padding-top: 22px; }
.marque { display: inline-block; color: var(--rouge); font: 700 36px/1.2 "Open Sans", Arial, sans-serif; text-decoration: none; }
.slogan { margin: 4px 0 18px; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; }
.menu { background: var(--nuit); }
.menu .conteneur { display: flex; flex-wrap: wrap; }
.menu a { color: #fff; text-decoration: none; text-transform: uppercase; font-weight: 700; font-size: 14px; padding: 13px 16px; }
.menu a:hover, .menu a.actif { background: var(--rouge); }

.contenu { padding-top: 26px; padding-bottom: 40px; }
.contenu h1 { color: var(--nuit); }
.bloc-titre { color: var(--nuit); text-transform: uppercase; font: 700 22px/1.3 "Open Sans", Arial, sans-serif; margin: 34px 0 10px; }
h3.bloc-titre { font-size: 18px; }
h4.bloc-titre { font-size: 16px; }
.bloc-texte p { margin: 0 0 1em; }
.bloc-image { margin: 16px 0; text-align: center; }
.bloc-intro { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: center; margin-bottom: 20px; }

/* classement */
.classement { margin: 24px 0; border: 1px solid #eee; }
.cl-entete, .cl-ligne { display: grid; grid-template-columns: 26% 34% 18% 22%; align-items: center; }
.cl-entete { background: var(--rouge); color: #fff; text-transform: uppercase; font-weight: 700; font-size: 14px; text-align: center; }
.cl-entete span { padding: 8px 4px; }
.cl-ligne { border-top: 1px solid #eee; padding: 12px 0; }
.cl-ligne:nth-child(even) { background: #fafafa; }
.cl-top { background: var(--rose) !important; }
.cl-site { display: flex; align-items: center; gap: 12px; padding: 0 12px; }
.cl-rang { flex: 0 0 34px; font: 700 24px/1 "Open Sans", Arial, sans-serif; color: var(--rouge); text-align: center; }
.cl-top1 .cl-rang, .cl-top2 .cl-rang, .cl-top3 .cl-rang { color: var(--or); }
.cl-site img { max-height: 70px; width: auto; }
.cl-carac { padding: 0 12px; font-size: 14px; }
.cl-carac strong { display: block; text-align: center; color: var(--nuit); }
.cl-carac ul { list-style: none; margin: 4px 0 0; padding: 0; }
.cl-carac li::before { content: "✓"; color: var(--rouge); font-weight: 700; margin-right: 6px; }
.cl-avis { display: flex; flex-direction: column; align-items: center; font-size: 13px; }
.cl-note { font: 700 22px/1 "Open Sans", Arial, sans-serif; color: var(--nuit); }
.etoiles { --pct: calc(var(--note) / 5 * 100%); font-size: 16px; line-height: 1.3; letter-spacing: 2px;
  background: linear-gradient(90deg, var(--or) var(--pct), #ddd var(--pct)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.etoiles::before { content: "★★★★★"; }
.cl-label { font-weight: 700; }
.cl-cta { text-align: center; padding: 0 12px; }
.bouton { display: inline-block; background: var(--rouge); color: #fff; text-decoration: none; text-transform: uppercase; font-weight: 700; font-size: 13px; padding: 12px 16px; border-radius: 3px; transition: transform .15s, background .15s; }
.bouton:hover { background: var(--rouge-fonce); transform: scale(.97); }

.pied { background: #333; color: #ccc; padding: 30px 0 10px; font-size: 14px; }
.pied .colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.pied h3 { color: #fff; font-size: 15px; text-transform: uppercase; margin: 0 0 10px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin: 4px 0; }
.pied a { color: #ccc; text-decoration: none; }
.pied a:hover { color: #fff; }
.copyright { border-top: 1px solid #444; margin-top: 24px; padding-top: 12px; font-size: 13px; }

@media (max-width: 720px) {
  .marque { font-size: 26px; }
  .bloc-intro { grid-template-columns: 1fr; }
  .cl-entete { display: none; }
  .cl-ligne { grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 0; }
  .cl-site { grid-column: 1 / -1; justify-content: center; }
  .cl-cta { grid-column: 1 / -1; }
  .bouton { display: block; }
}