/* Styles Midnight Blue & Salmon accents */
:root{
  --bg: #0b1220;
  --panel: #111a2e;
  --border: #243554;
  --text: #eaf0ff;
  --muted: #9db0d1;
  --accent: #2d6cdf;
  --accent-light: #5aa9ff;
  --link: #5aa9ff;
  --link-hover: #7ec0ff;
  --salmon: #ff8a8f;
  --salmon-light: #ffb1a6;
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
}
/* Thème clair moderne - Contraste renforcé */
[data-theme="light"]{
  --bg: #ffffff;
  --panel: #ffffff;
  --border: #d0d7e2;
  --text: #0f172a;
  --muted: #475569;
  --accent: #3b82f6;
  --accent-light: #2563eb;
  --link: #2563eb;
  --link-hover: #1d4ed8;
  --salmon: #dc2626;
  --salmon-light: #ef4444;
  --success: #16a34a;
  --warning: #ca8a04;
  --error: #dc2626;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:.3px;scroll-behavior:smooth}
body{padding-top:0}
/* Bouton retour au haut */
#back-to-top{position:fixed;bottom:30px;right:30px;padding:12px 16px;background:var(--accent);color:white;border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;opacity:0;visibility:hidden;transition:all .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:999}
#back-to-top:hover{background:var(--accent-light);transform:scale(1.1)}
#back-to-top.show{opacity:1;visibility:visible}
.container{max-width:920px;margin:0 auto;padding:20px}
header{padding-top:32px}
.tagline{margin:8px 0 16px 0;color:var(--muted);font-size:17px}
.search input{width:100%;padding:14px 16px;border-radius:12px;border:2px solid var(--border);background:var(--panel);color:var(--text);transition:all .3s ease;font-size:16px}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,108,223,.3)}
.search input::placeholder{color:var(--muted)}
main{margin-top:16px}
.articles{list-style:none;padding:0;margin:0}
.articles li{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;margin:10px 0;border:1px solid var(--border);background:var(--panel);border-radius:12px;transition:all .2s ease}
.articles li:hover{border-color:var(--link);box-shadow:0 4px 20px rgba(45,108,223,.25);transform:translateY(-2px)}
.articles a{color:var(--text);text-decoration:none;font-weight:600;font-size:15px}
.articles a:hover{color:var(--link)}
.muted{color:var(--muted)}
.small{font-size:13px}
.footer{padding-top:20px;padding-bottom:40px}
.pill-list a{display:inline-block;margin:6px 6px 0 0;padding:7px 12px;border:1px solid var(--border);border-radius:999px;color:var(--link);text-decoration:none;transition:all .2s ease;background:rgba(45,108,223,.08);font-weight:500}
.pill-list a:hover{color:var(--link-hover);border-color:var(--accent);background:rgba(255,138,143,.18)}

.article{max-width:780px;margin:0 auto}
.breadcrumbs{font-size:14px;margin:12px 0;color:var(--muted)}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;transition:all .2s ease}
.card:hover{border-color:var(--link);box-shadow:0 8px 32px rgba(45,108,223,.2)}
.card h1{margin:0 0 8px 0;color:var(--text)}
.lead{color:var(--muted);font-size:16px}
.note{background:rgba(0,255,65,.1);border:1px solid rgba(0,255,65,.4);border-radius:12px;padding:14px 16px;color:#00ff41}
.ad{margin:20px 0;display:flex;align-items:center;justify-content:center}
.ad-placeholder{width:100%;min-height:100px;border:2px dashed var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:rgba(0,0,0,.2)}
hr{border:none;border-top:1px solid var(--border);margin:24px 0}

.content h2{margin:24px 0 12px 0;color:var(--text);font-size:20px;font-weight:700}
.content ol{padding-left:20px}
.content li{margin:10px 0;line-height:1.7}
.content a{color:var(--link);text-decoration:none;font-weight:500}
.content a:hover{color:var(--link-hover);text-decoration:underline}
.aside{font-size:14px;color:var(--muted)}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;background:linear-gradient(135deg,#2d6cdf,#ff8a8f);border:none;color:white;text-decoration:none;font-weight:600;cursor:pointer;transition:all .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,138,143,.35)}

/* Suggestions dropdown */
.suggestions{position:relative;margin-top:8px}
.suggestions .suggestion{display:block;padding:10px 14px;margin:6px 0;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--muted);text-decoration:none;transition:all .2s ease;cursor:pointer}
.suggestions .suggestion-count{margin:8px 0 6px;color:var(--muted);font-size:13px}
.suggestions .suggestion:hover{color:var(--link);border-color:var(--accent);background:rgba(255,138,143,.12)}

/* Onglets Guide / Notice officielle */
.tabs{margin-top:18px}
.tabs input[type="radio"]{display:none}
.tabs label{display:inline-block;margin-right:2px;padding:10px 16px;border:1px solid var(--border);border-bottom:2px solid var(--border);border-radius:10px 10px 0 0;background:rgba(0,0,0,.2);cursor:pointer;color:var(--muted);font-weight:600;transition:all .2s ease}
.tabs label:hover{color:var(--text)}
.tabs .tab-panel{display:none;border:1px solid var(--border);border-radius:0 8px 8px 8px;padding:16px;background:var(--panel)}
.tabs input#tab-guide:checked ~ label[for="tab-guide"],
.tabs input#tab-notice:checked ~ label[for="tab-notice"]{background:var(--panel);border-bottom-color:var(--link);color:var(--link);border-bottom:3px solid var(--link)}
.tabs input#tab-guide:checked ~ #panel-guide{display:block}
.tabs input#tab-notice:checked ~ #panel-notice{display:block}
.manual-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:10px}
.manual-img{margin:0}
.manual-img img{width:100%;height:auto;border:1px solid var(--border);border-radius:6px}
.links{list-style:none;padding:0;margin:0 0 10px 0}
.links li{margin:6px 0}

/* Barre de tête + navigation */
.header-bar{display:flex;align-items:center;justify-content:space-between;margin-top:0;margin-bottom:16px;gap:16px;flex-wrap:wrap}
/* Navigation principale visible */
.header-bar nav.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.header-bar nav.inline .btn-ghost{background:rgba(45,108,223,.18);border-color:rgba(90,169,255,.5)}
.header-bar nav.inline .btn-ghost:hover{background:rgba(45,108,223,.32);border-color:var(--accent-light)}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px}
.brand a{color:var(--text);text-decoration:none}
.brand .logo{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#2d6cdf,#ff8a8f);box-shadow:0 4px 16px rgba(255,138,143,.45)}
.brand .logo svg{width:20px;height:20px;fill:white}
.btn-ghost{
  background:linear-gradient(180deg, rgba(90,169,255,.15), rgba(90,169,255,.08));
  border:2.5px solid rgba(90,169,255,.7);
  color:var(--text);
  padding:9px 16px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  letter-spacing:.3px;
  transition:all .2s ease;
  backdrop-filter: blur(10px);
  box-shadow:0 3px 12px rgba(45,108,223,.3);
}
.btn-ghost:hover{border-color:var(--accent-light);color:var(--link-hover);background:linear-gradient(180deg, rgba(90,169,255,.3), rgba(255,138,143,.2));transform:translateY(-2px);box-shadow:0 8px 20px rgba(45,108,223,.45)}
.btn-ghost:focus{outline:2px solid var(--link);outline-offset:2px}

/* Actions d’article */
.article-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px 0}
.article-actions .btn-ghost{background:rgba(45,108,223,.3);border-color:rgba(90,169,255,.8);box-shadow:0 4px 14px rgba(45,108,223,.4)}

/* Navigation suivant / précédent */
.article-nav{display:flex;justify-content:space-between;gap:12px;margin:18px 0 8px 0;flex-wrap:wrap}
.article-nav .btn-ghost{background:rgba(255,138,143,.3);border-color:rgba(255,177,166,.85);box-shadow:0 4px 14px rgba(255,138,143,.4)}

/* Grille catégories */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.tile{background:linear-gradient(135deg,rgba(45,108,223,.08),rgba(255,138,143,.08)),var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px;text-decoration:none;color:var(--text);display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;transition:all .3s ease}
.tile:hover{border-color:var(--accent);box-shadow:0 12px 40px rgba(45,108,223,.3);transform:translateY(-4px);background:linear-gradient(135deg,rgba(45,108,223,.15),rgba(255,138,143,.15)),var(--panel)}
.tile .ico{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(135deg,rgba(45,108,223,.3),rgba(255,138,143,.3));filter:saturate(1.5)}
.tile span:last-child{font-weight:700;font-size:16px}

/* Hero header */
.hero{padding-top:72px;padding-bottom:28px;margin-top:24px}
.home .hero{background:linear-gradient(135deg, rgba(45,108,223,.14), rgba(255,138,143,.12));border-bottom:2px solid var(--border);border-radius:16px;padding:32px;box-shadow:0 8px 32px rgba(45,108,223,.12)}
[data-theme="light"] .home .hero{background:linear-gradient(135deg, #e8f0fc, #f0f5fe);border:2px solid #d0e0f5;box-shadow:0 8px 32px rgba(59,130,246,.15);}
.home h1{font-size:40px;margin:12px 0 8px;font-weight:800;background:linear-gradient(135deg,#2d6cdf,#ff8a8f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.home .tagline{font-size:19px;color:var(--muted)}

/* TOC flottant pour les articles */
.toc-fab{position:fixed;right:18px;bottom:18px;z-index:50}
.toc-fab button{background:var(--panel);border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.25);cursor:pointer}
.toc-panel{position:fixed;right:18px;bottom:64px;max-width:320px;max-height:60vh;overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.35);padding:10px;z-index:49}
.toc-panel a{display:block;color:var(--text);text-decoration:none;padding:6px 8px;border-radius:8px}
.toc-panel a:hover{background:#0f1a20}

/* Petits effets */
.card{transition:box-shadow .2s ease, transform .2s ease}
.card:hover{box-shadow:0 10px 30px rgba(0,0,0,.22);transform:translateY(-2px)}
.articles li{transition:transform .1s ease, box-shadow .2s ease}
.articles li:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.12)}

/* Pied de page */
.site-footer{margin-top:24px;padding:16px 0;border-top:1px solid var(--border);color:var(--muted);font-size:14px}
.site-footer .inline a{color:var(--muted);text-decoration:none;margin-right:10px}
.site-footer .inline a:hover{color:var(--text)}

/* Impression propre */
@media print{
  header,.header-bar,.toc-fab,.ad,.site-footer,nav,.btn-ghost,#toggle-theme{display:none !important}
  body{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
  .card{box-shadow:none;border:0}
}

/* Emoji-friendly fonts (fix missing icons on Windows) */
html,body{font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}

/* Skip link accessibilité */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:absolute;left:10px;top:10px;width:auto;height:auto;padding:10px 14px;z-index:1000;background:var(--panel);color:var(--text);border:2px solid var(--link);border-radius:8px;text-decoration:none}

/* Barre AZ : ligne arrondie avec lettres (AZ) */
.az-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  margin: 12px auto 24px;
  max-width: 1000px;
  background: linear-gradient(135deg, #e0ebf7, #d4e5f7);
  border: 2px solid #90b8e8;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.az-nav::-webkit-scrollbar { display: none; }

/* Pastilles de lettres */
.az-link, .az-nav .az-missing {
  display: inline-block;
  min-width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 9999px;
  font-weight: 600;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
}

.az-link {
  color: #0f172a;
  background: linear-gradient(135deg, #e0ebf7, #d0e0f0);
  border: 2px solid #5b8fd9;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  transition: background-color .15s, transform .05s, color .15s, border-color .15s;
}
.az-link:hover { background: linear-gradient(135deg, #60a5fa, #5b8fd9); color: #ffffff; border-color: #1e40af; transform: translateY(-2px); }
.az-link:active { transform: translateY(0.5px); }
.az-link:focus { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, .25); }

/* Lettres manquantes, grisées */
.az-nav .az-missing {
  color: #8892a0;
  border: 2px dashed #90b8e8;
  background: rgba(255, 255, 255, 0.5);
  cursor: default;
  opacity: .7;
}

/* Barre AZ : rectangle pleine largeur avec séparateurs */
.az-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100vw; /* plein écran */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 12px;
  margin-bottom: 24px;
  background: var(--bg); /* même fond que len-tête (pas vert ni bleu foncé) */
  border: 1px solid var(--border);
  border-radius: 6px; /* angles très légèrement arrondis */
  overflow: hidden;
}

/* Élément (lettre) */
.az-nav > .az-link,
.az-nav > .az-missing {
  flex: 1 1 0;
  text-align: center;
  padding: 10px 0;
  text-decoration: none;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 0;
  font-weight: 700;
}

/* Séparateurs verticaux entre lettres */
.az-nav > * + * { border-left: 1px solid var(--border); }

/* Lettres absentes, grisées */
.az-nav > .az-missing { color: var(--muted); cursor: default; }

/* Survol subtil */
.az-nav > .az-link:hover { background: rgba(0,0,0,.04); }

/* Thème clair: barre A-Z claire */
[data-theme="light"] .az-nav {
  background: linear-gradient(135deg, #e0ebf7, #d4e5f7) !important;
  border-color: #90b8e8 !important;
}
[data-theme="light"] .az-nav > .az-link {
  background: linear-gradient(135deg, #e0ebf7, #d0e0f0) !important;
  border-color: #5b8fd9 !important;
  color: #0f172a !important;
}
[data-theme="light"] .az-nav > .az-link:hover {
  background: linear-gradient(135deg, #60a5fa, #5b8fd9) !important;
  color: #ffffff !important;
  border-color: #1e40af !important;
}
[data-theme="light"] .az-nav > .az-missing {
  border-color: #90b8e8 !important;
  background: rgba(255, 255, 255, 0.5) !important;
}

/* Réglage placement barre AZ - Thème sombre par défaut */
.az-nav {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 8px !important;
  margin-bottom: 20px !important;
  border-radius: 9999px !important;
}
.az-nav > .az-link,
.az-nav > .az-missing {
  line-height: 44px !important;
}

/* Placement fin: espace harmonisé après le titre */
h2 + .az-nav { margin-top: 12px !important; }

/* S'assurer que la nav n'hérite pas d'un centrage imprévu */
.az-nav { align-self: stretch !important; }

/* Barre AZ: corrections dalignement et découpage */
.az-nav {
  width: 100% !important;
  overflow-x: auto !important;   /* défilement horizontal si nécessaire */
  overflow-y: hidden !important;
  -ms-overflow-style: none;       /* IE/Edge legacy */
  scrollbar-width: none;          /* Firefox */
}
.az-nav::-webkit-scrollbar { display: none; }

/* Lettres: largeur fixe pour stabilité, pas détirement */
.az-nav > .az-link,
.az-nav > .az-missing {
  flex: 0 0 40px !important;      /* ~40px par lettre */
  text-align: center !important;
  line-height: 44px !important;
  padding: 0 !important;
}
/* Séparateur: pas sur la première lettre */
.az-nav > :first-child { border-left: none !important; }

/* Barre A‑Z en grille (27 colonnes) pour occuper toute la largeur sans scroll */
.az-nav {
  display: grid !important;
  grid-template-columns: repeat(27, 1fr) !important; /* A..Z + # */
  gap: 0 !important;
  width: 100% !important;
  margin: 10px 0 22px !important;
  background: #102028 !important;
  border: 1px solid #1f2c33 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
.az-nav > .az-link,
.az-nav > .az-missing {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  line-height: 44px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  text-decoration: none !important;
}
/* Traits verticaux entre cases, pas sur la première */
.az-nav > :nth-child(n+2) { border-left: 1px solid #1f2c33 !important; }
/* Hover discret sur lettres actives */
.az-nav > .az-link:hover { background: rgba(255,255,255,.04) !important; }

/* AZ: padding interne pour ne pas couper la première lettre */
.az-nav { padding: 0 8px !important; }

/* AZ: éviter la coupe des extrémités */
.az-nav { box-sizing: border-box !important; }

/* AZ: visibilité des bords gauche/droite */
.az-nav > :first-child { padding-left: 10px !important; justify-content: flex-start !important; }
.az-nav > :last-child  { padding-right: 10px !important; justify-content: flex-end !important; }

/* AZ: override final pour affichage complet sans coupe */
.az-nav {
  display: grid !important;
  grid-template-columns: repeat(27, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 10px 0 18px !important;
  padding: 0 !important;            /* pas de padding conteneur */
  overflow: visible !important;      /* ne pas couper A/Z */
  background: #102028 !important;
  border: 1px solid #1f2c33 !important;
  border-radius: 4px !important;
}
.az-nav > .az-link,
.az-nav > .az-missing {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  line-height: 44px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  text-decoration: none !important;
}
.az-nav > .az-link:first-child,
.az-nav > .az-missing:first-child { padding-left: 10px !important; justify-content: flex-start !important; }
.az-nav > .az-link:last-child,
.az-nav > .az-missing:last-child  { padding-right: 10px !important; justify-content: flex-end !important; }
.az-nav > :nth-child(n+2) { border-left: 1px solid #1f2c33 !important; }

/* AZ: recentrage et marge interne pour afficher toutes les lettres */
.az-nav { padding: 0 8px !important; box-sizing: border-box !important; }
.az-nav > .az-link, .az-nav > .az-missing { justify-content: center !important; }
.az-nav > :first-child, .az-nav > :last-child { padding-left: 0 !important; padding-right: 0 !important; }
/* Cartes de catégories - Encadrés élégants */
.article-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 2px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  gap: 8px;
}

.article-card:hover {
  border-color: var(--link);
  box-shadow: 0 8px 24px rgba(90, 169, 255, 0.3);
  transform: translateY(-6px);
  background: var(--border);
}

.article-card h3 {
  margin: 0;
  font-size: 18px;
  color: var(--link);
  font-weight: 700;
}

.article-card p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.article-card:hover h3 {
  color: var(--link-hover);
}

.article-card:hover p {
  color: var(--text);
}

/* Grille de marques */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.brand-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  transition: all .3s ease;
  cursor: pointer;
}
.brand-card:hover {
  border-color: var(--accent);
  background: var(--panel);
  box-shadow: 0 6px 20px rgba(45, 108, 223, .2);
  transform: translateY(-4px);
  color: var(--accent-light);
}

/* Breadcrumbs */
.breadcrumbs {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.breadcrumbs a {
  color: var(--link);
  text-decoration: none;
  transition: color .2s ease;
}
.breadcrumbs a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
.breadcrumbs a::after {
  content: ' / ';
  margin: 0 6px;
  color: var(--muted);
}
.breadcrumbs a:last-of-type::after {
  display: none;
}

/* Mode lecture épuré */
.btn-reader {
  position: fixed;
  top: 80px;
  left: 30px;
  padding: 10px 16px;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all .25s ease;
  z-index: 998;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.btn-reader:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

body.reader-mode header,
body.reader-mode .site-footer,
body.reader-mode .ad,
body.reader-mode .article-actions,
body.reader-mode .article-nav,
body.reader-mode .breadcrumbs,
body.reader-mode #back-to-top,
body.reader-mode .share-buttons,
body.reader-mode .qr-code-box,
body.reader-mode .btn-print {
  display: none !important;
}

body.reader-mode .container.article {
  max-width: 900px;
  margin: 0 auto;
  padding-top: 24px;
}

body.reader-mode article.card {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

body.reader-mode .content {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.85;
}

body.reader-mode .content h2,
body.reader-mode .content h3 {
  margin-top: 1.7em;
}

/* Optimisation pour l'impression */
@media print {
  /* Masquer les éléments non nécessaires */
  nav, .site-footer, button, .btn-print, .btn-reader, #back-to-top, .share-buttons, .qr-code-box, input, .tagline {
    display: none !important;
  }
  
  /* Styles pour l'article */
  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
  }
  
  article, .article {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  h1 {
    font-size: 20pt;
    page-break-after: avoid;
  }
  
  h2 {
    font-size: 16pt;
    page-break-after: avoid;
  }
  
  h3 {
    font-size: 14pt;
    page-break-after: avoid;
  }
  
  p, li {
    font-size: 11pt;
    line-height: 1.6;
  }
  
  /* Éviter les coupures de page */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  p, li {
    page-break-inside: avoid;
  }
  
  /* Afficher les liens */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
  }
  
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  
  .breadcrumbs, .container, header {
    display: block !important;
  }
}