/* =========================================================================
   alertefeu - Pages de contenu (guides, pages légales)
   Feuille AUTONOME : la carte (style.css) verrouille body{overflow:hidden},
   ce qui est incompatible avec des pages qui défilent. Les tokens de couleur
   sont volontairement dupliqués à l'identique pour garder une seule identité.
   ========================================================================= */

:root {
  --bg: #e9edf2;
  --panel-solid: #ffffff;
  --surface-2: #f3f6fa;
  --border: #dbe2ea;
  --border-strong: #c4cdda;
  --text: #16212c;
  --muted: #5b6775;
  --accent: #dc2f1e;
  --accent-weak: #dc2f1e14;
  --ember: #ea580c;
  --danger: #d92d20;
  --ok: #1a7f4b;
  --warn: #b45309;
  --info: #1d4ed8;
  --hover: #16212c0d;
  --shadow-sm: 0 1px 2px #16212b12;
  --shadow: 0 6px 20px #16212b17;
  --radius: 14px;
  --radius-sm: 10px;
  --topbar-bg: #ffffffe8;
}
:root[data-theme="dark"] {
  --bg: #0d1117;
  --panel-solid: #161b22;
  --surface-2: #ffffff0d;
  --border: #2a3038;
  --border-strong: #3a424d;
  --text: #e6edf3;
  --muted: #94a2b2;
  --accent: #ff6b35;
  --accent-weak: #ff6b3524;
  --ember: #ff8a1a;
  --danger: #f87171;
  --ok: #4ade80;
  --warn: #fbbf24;
  --info: #60a5fa;
  --hover: #ffffff12;
  --shadow-sm: 0 1px 2px #0006;
  --shadow: 0 8px 24px #0008;
  --topbar-bg: #0d1117ee;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
img {
  max-width: 100%;
  height: auto;
}

/* --- Barre d'avertissement (identique à la carte) ----------------------- */
.legal-bar {
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  padding: 7px 14px;
}
.legal-bar a {
  color: #fff;
  text-decoration: underline;
}

/* --- En-tête ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
}
.brand-flame {
  width: 26px;
  height: 26px;
  flex: none;
}
.brand-name {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.brand-name .hot {
  color: var(--accent);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.site-nav a:hover {
  background: var(--hover);
  color: var(--text);
}
.site-nav a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-weak);
}
.nav-map {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.theme-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-solid);
  color: var(--muted);
  cursor: pointer;
}
.theme-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.theme-btn svg {
  width: 17px;
  height: 17px;
}
:root[data-theme="dark"] .ic-sun,
:root:not([data-theme="dark"]) .ic-moon {
  display: none;
}

/* --- Mise en page ------------------------------------------------------- */
.wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 34px 20px 64px;
}
.wrap-wide {
  max-width: 1060px;
}
.breadcrumb {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
}
.breadcrumb a {
  color: var(--muted);
}
h1 {
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  font-weight: 800;
}
.lead {
  font-size: 18px;
  color: var(--muted);
  margin: 0 0 26px;
}
h2 {
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 44px 0 14px;
  font-weight: 750;
  scroll-margin-top: 80px;
}
h3 {
  font-size: 19px;
  margin: 30px 0 10px;
  font-weight: 700;
  scroll-margin-top: 80px;
}
p {
  margin: 0 0 16px;
}
ul,
ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
li {
  margin-bottom: 8px;
}
a {
  color: var(--info);
}
a:hover {
  text-decoration: none;
}
strong,
b {
  font-weight: 680;
}
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}
code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 0.9em;
}

/* --- Sommaire ----------------------------------------------------------- */
.toc {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 34px;
}
.toc-title {
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 8px;
}
.toc ol {
  margin: 0;
  padding-left: 20px;
  font-size: 15px;
}
.toc li {
  margin-bottom: 4px;
}

/* --- Encarts ------------------------------------------------------------ */
.callout {
  border-left: 3px solid var(--muted);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  margin: 24px 0;
}
.callout p:last-child {
  margin-bottom: 0;
}
.callout-title {
  font-weight: 700;
  margin-bottom: 6px;
}
.callout-danger {
  border-left-color: var(--danger);
  background: var(--accent-weak);
}
.callout-warn {
  border-left-color: var(--warn);
}
.callout-info {
  border-left-color: var(--info);
}
.callout-ok {
  border-left-color: var(--ok);
}

/* --- Tableaux ----------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  background: var(--panel-solid);
}
th,
td {
  text-align: left;
  padding: 11px 15px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th {
  background: var(--surface-2);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}
tbody tr:last-child td {
  border-bottom: 0;
}

/* --- Cartes (hub guides) ------------------------------------------------ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 0 0 34px;
}
.gcard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.gcard:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.gcard-tag {
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
}
.gcard h2,
.gcard h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
}
.gcard p {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
}

/* --- Niveaux Météo des forêts ------------------------------------------ */
.levels {
  display: grid;
  gap: 10px;
  margin: 0 0 26px;
}
.level {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: var(--radius-sm);
  background: var(--panel-solid);
}
.level-1 {
  border-left-color: #16a34a;
}
.level-2 {
  border-left-color: #eab308;
}
.level-3 {
  border-left-color: #f97316;
}
.level-4 {
  border-left-color: #dc2626;
}
.level-name {
  font-weight: 750;
  margin-bottom: 3px;
}
.level p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

/* --- Bloc d'appel vers la carte ---------------------------------------- */
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 24px;
  margin: 40px 0 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cta-text strong {
  display: block;
  font-size: 17px;
  margin-bottom: 3px;
}
.cta-text span {
  font-size: 14.5px;
  color: var(--muted);
}
.btn-primary {
  display: inline-block;
  padding: 11px 20px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.btn-primary:hover {
  filter: brightness(1.08);
}

/* --- Métadonnées d'article --------------------------------------------- */
.meta {
  font-size: 13.5px;
  color: var(--muted);
  padding-bottom: 20px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}

/* Signature d'auteur, posée par le générateur au-dessus du corps du guide.
   Elle vit juste sous le h1 et au-dessus de la ligne .meta du fragment : pas
   de bordure ici, sinon deux traits horizontaux se suivent. */
.byline {
  font-size: 13.5px;
  color: var(--muted);
  margin: -6px 0 18px;
}
.byline a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sources {
  font-size: 14.5px;
  color: var(--muted);
}
.sources li {
  margin-bottom: 6px;
}

/* --- Pied de page ------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--panel-solid);
  padding: 34px 20px 40px;
}
.footer-inner {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 28px;
}
.footer-col h3 {
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 0 0 12px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li {
  margin-bottom: 7px;
}
.footer-col a {
  color: var(--text);
  text-decoration: none;
  font-size: 14.5px;
}
.footer-col a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.footer-bottom {
  max-width: 1060px;
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
.footer-bottom p {
  margin: 0 0 6px;
}

@media (max-width: 640px) {
  .site-header {
    padding: 10px 14px;
  }
  .site-nav a {
    padding: 5px 8px;
    font-size: 13.5px;
  }
  .wrap {
    padding: 26px 16px 48px;
  }
  h2 {
    font-size: 22px;
  }
}

/* --- Emplacements publicitaires -------------------------------------------
   Trois exigences, dans cet ordre.

   1. Ne pas déplacer le texte. La hauteur est réservée en HTML (min-height sur
      le <ins>) AVANT que l'annonce n'arrive. Une annonce qui pousse le
      paragraphe en cours de lecture, c'est du CLS : Google le mesure et le
      fait payer au classement.
   2. Se distinguer du contenu. Le règlement AdSense impose que l'annonce ne
      puisse pas être prise pour de l'éditorial. D'où le libellé « Publicité »,
      qui est aussi la seule mention autorisée (« Liens sponsorisés » et
      « Annonces utiles » ne le sont pas).
   3. Rester discret. Le sujet est une catastrophe naturelle : une page qui
      clignote pendant qu'un feu approche détruit la confiance, et la confiance
      est ce qui ramène le lecteur. */
.ad-slot {
  display: block;
  margin: 32px 0;
  padding: 0;
  border: 0;
  clear: both;
  /* La réserve vit sur le <ins> : la donner AUSSI ici doublerait le blanc
     quand l'annonce se charge plus petite que prévu. */
}
.ad-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #7a7a7a);
  text-align: center;
}
.ad-slot ins {
  display: block;
  width: 100%;
  background: var(--ad-bg, #fafafa);
}
[data-theme="dark"] .ad-slot ins {
  background: #17181b;
}
/* Sur très petit écran, une réserve de 280 px mange l'écran entier. On la
   ramène à une hauteur qui laisse voir du texte autour : une annonce seule à
   l'écran est mal vue par le lecteur ET moins bien payée. */
@media (max-width: 480px) {
  .ad-slot ins {
    min-height: 250px !important;
  }
}
/* Impression : on n'imprime pas de publicité. */
@media print {
  .ad-slot {
    display: none;
  }
}

/* --- Foire aux questions ---------------------------------------------------
   Le bloc .faq est LU par le générateur (extractFaq) pour produire le balisage
   schema.org FAQPage. La règle de Google est stricte : le balisage n'est
   autorisé que si la question et sa réponse sont visibles sur la page. Le
   couplage est donc voulu, pas accidentel : pas de bloc visible, pas de
   balisage. */
.faq {
  margin: 28px 0;
  border-top: 1px solid var(--line, #e6e6e6);
}
.faq h3 {
  margin: 22px 0 8px;
  font-size: 17px;
  line-height: 1.35;
}
.faq p {
  margin: 0 0 10px;
}