/* Fiche de préparation civique : bandeau bleu pétrole, titres Bitter, texte Public Sans,
     état du foyer sur l'échelle de vigilance (rouge → vert). Une colonne sur mobile, deux sur grand écran. */
  :root {
    --paper: #eef2f3;     /* fond, gris bleuté */
    --sheet: #ffffff;     /* surfaces */
    --ink: #10232b;       /* texte */
    --muted: #4f626b;     /* texte secondaire */
    --rule: #cdd8dc;      /* filets */
    --petrol: #0f3d4c;    /* accent : bleu pétrole de la signalétique */
    --petrol-ink: #ffffff;
    --link: #0b5a70;
    --tag: #fbe7a6;       /* étiquette « hors guide » */
    --tag-ink: #5b4300;
    --v-rouge: #c4302b; --v-orange: #dd7313; --v-jaune: #e2b51d; --v-vert: #2b8a4b;
    --display: "Bitter", Georgia, "Times New Roman", serif;
    --body: "Public Sans", "Segoe UI", system-ui, sans-serif;
    --num: "Public Sans", "Segoe UI", system-ui, sans-serif;  /* chiffres : police du texte, chasse tabulaire */
    --gutter-l: max(16px, env(safe-area-inset-left, 0px));
    --gutter-r: max(16px, env(safe-area-inset-right, 0px));
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #0c171c; --sheet: #13222a; --ink: #e4ecef; --muted: #93a7b0; --rule: #26383f;
      --petrol: #8fd0df; --petrol-ink: #08242d; --link: #8fd0df; --tag: #4a3c12; --tag-ink: #f3dc8f;
      --v-rouge: #ef5a52; --v-orange: #f2943c; --v-jaune: #f0cd4f; --v-vert: #4fbf74; color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --paper: #0c171c; --sheet: #13222a; --ink: #e4ecef; --muted: #93a7b0; --rule: #26383f;
    --petrol: #8fd0df; --petrol-ink: #08242d; --link: #8fd0df; --tag: #4a3c12; --tag-ink: #f3dc8f;
    --v-rouge: #ef5a52; --v-orange: #f2943c; --v-jaune: #f0cd4f; --v-vert: #4fbf74; color-scheme: dark;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 1.0625rem/1.55 var(--body); }
  .wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
  h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; text-wrap: balance; margin: 0; }
  a { color: var(--link); text-underline-offset: 3px; }
  :focus-visible { outline: 3px solid var(--v-jaune); outline-offset: 2px; }

  /* Bandeau */
  .bandeau { background: var(--petrol); color: var(--petrol-ink); }
  .bandeau .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px;
                   padding-block: calc(10px + env(safe-area-inset-top, 0px)) 10px; }
  .marque { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none;
            font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
  .plaque { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 2px solid currentColor;
            border-radius: 4px; font: 700 .8rem/1 var(--body); }
  .nav { display: flex; gap: 18px; font-size: .95rem; }
  .nav a { color: inherit; text-decoration: none; opacity: .85; }
  .nav a:hover { opacity: 1; text-decoration: underline; }
  @media (max-width: 560px) { .nav { display: none; } }

  /* Ouverture */
  .ouverture { padding-block: 28px 8px; display: grid; gap: 24px; }
  @media (min-width: 900px) { .ouverture { grid-template-columns: 1.15fr 1fr; align-items: start; padding-block: 44px 16px; gap: 40px; } }
  .source { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
  h1 { font-size: clamp(2.05rem, 7.6vw, 3.3rem); letter-spacing: -.012em; line-height: 1.08; }
  h1 em { font-style: normal; color: var(--link); }
  .chapo { max-width: 34rem; margin: 14px 0 0; color: var(--muted); font-size: 1.08rem; }
  .etapes { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; max-width: 30rem; counter-reset: etape; }
  .etapes li { display: grid; grid-template-columns: 2rem 1fr; gap: 10px; align-items: baseline; counter-increment: etape; }
  .etapes li::before { content: counter(etape); font: 700 1rem var(--num); color: var(--link); border: 2px solid currentColor;
                       border-radius: 3px; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; }
  @media (max-width: 899px) { .etapes { display: none; } }

  /* Formulaire foyer */
  .foyer { background: var(--sheet); border: 1px solid var(--rule); border-radius: 6px; padding: 18px; }
  .foyer h2 { font-size: 1.3rem; margin-bottom: 14px; }
  .compteurs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .compteur { border: 1px solid var(--rule); border-radius: 4px; padding: 10px 10px 8px; min-width: 0; display: flex; flex-direction: column; }
  .compteur label { display: block; font-size: .88rem; color: var(--muted); }
  .compteur .ligne { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 4px; }
  .compteur input { width: 3ch; border: 0; background: transparent; color: var(--ink); text-align: center;
                    font: 700 1.6rem/1 var(--num); -moz-appearance: textfield; padding: 0; }
  .compteur input::-webkit-outer-spin-button, .compteur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .pas { width: 44px; height: 44px; flex: none; border-radius: 4px; border: 1px solid var(--rule); background: var(--paper);
         color: var(--ink); font: 600 1.4rem/1 var(--body); cursor: pointer; }
  .pas:hover { border-color: var(--petrol); }
  .options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .option { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
            border: 1px solid var(--rule); border-radius: 99px; cursor: pointer; font-size: .95rem; }
  .option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .option::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--muted); border-radius: 3px; flex: none; }
  .option:has(input:checked) { background: var(--petrol); border-color: var(--petrol); color: var(--petrol-ink); }
  .option:has(input:checked)::before { border-color: currentColor; background: currentColor;
            box-shadow: inset 0 0 0 2px var(--petrol); }
  .option:has(input:focus-visible) { outline: 3px solid var(--v-jaune); outline-offset: 2px; }

  /* Étiquette de stock : les trois chiffres clés */
  .etiquette { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; border-top: 2px solid var(--ink); }
  .etiquette div { padding: 10px 6px 0 0; min-width: 0; }
  .etiquette div + div { padding-left: 10px; border-left: 1px solid var(--rule); }
  .etiquette strong { display: block; font: 700 clamp(1.6rem, 6vw, 2.1rem)/1 var(--num); font-variant-numeric: tabular-nums; }
  .etiquette span { font-size: .85rem; color: var(--muted); }

  /* Vigilance (barre collante pendant qu'on coche) */
  .vigilance { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--paper);
               border-bottom: 1px solid var(--rule); }
  body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
  .vigilance .wrap { display: flex; align-items: center; gap: 14px; padding-block: 12px; flex-wrap: wrap; }
  .vigilance h2 { font-size: 1.45rem; margin-right: auto; }
  .niveau { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; }
  .pastille { width: 14px; height: 14px; border-radius: 50%; background: var(--v); }
  .jauge { flex-basis: 100%; height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; }
  .jauge span { display: block; height: 100%; width: 0; background: var(--v); transition: width .3s ease; }
  #vigilance[data-level="rouge"] { --v: var(--v-rouge); }
  #vigilance[data-level="orange"] { --v: var(--v-orange); }
  #vigilance[data-level="jaune"] { --v: var(--v-jaune); }
  #vigilance[data-level="vert"] { --v: var(--v-vert); }
  .compte { font: 600 .95rem var(--num); color: var(--muted); font-variant-numeric: tabular-nums; }

  /* Liste */
  .liste { display: grid; gap: 8px 40px; padding-block: 8px 8px; }
  @media (min-width: 900px) {
    /* Colonnes de journal : les catégories s'empilent sans laisser de trous. */
    .liste { display: block; columns: 2; column-gap: 48px; }
    .liste .cat { break-inside: avoid; }
    .liste .item-corps { display: flex; align-items: flex-start; gap: 12px; }
    .liste .item-label { flex: 1; }
    .liste .item-achat { margin: 14px 0 0 auto; white-space: nowrap; }
    .liste .item-qte { min-width: 4.5em; text-align: right; }
  }
  .cat { min-width: 0; padding-top: 14px; }
  .cat-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 1.2rem;
               padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
  .cat-compte { font: 600 .85rem var(--num); color: var(--muted); font-variant-numeric: tabular-nums; }
  .items { list-style: none; margin: 0; padding: 0; }
  .item { display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--rule); }
  .item-qte { padding-top: 12px; }
  .item-label { min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding-block: 11px; cursor: pointer; position: relative; }
  .item-label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .case { flex: none; width: 24px; height: 24px; margin-top: 1px; border: 2px solid var(--ink); border-radius: 3px;
          display: grid; place-items: center; }
  .item-label input:focus-visible + .case { outline: 3px solid var(--v-jaune); outline-offset: 2px; }
  .item-label input:checked + .case { background: var(--petrol); border-color: var(--petrol); }
  .item-label input:checked + .case::after { content: ""; width: 6px; height: 12px; margin-top: -3px;
          border: solid var(--petrol-ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
  .item-text { min-width: 0; }
  .item-nom { display: block; }
  .is-done .item-nom { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
  .item-note { display: block; font-size: .88rem; color: var(--muted); }
  .item-hors { display: inline-block; margin-top: 3px; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
               background: var(--tag); color: var(--tag-ink); padding: 1px 6px; border-radius: 2px; }
  .item-qte { flex: none; font: 700 1rem var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .item-corps { flex: 1; min-width: 0; }
  .item-achat { display: inline-block; margin: -10px 0 10px 36px; font-size: .85rem; }
  .actions { display: flex; flex-wrap: wrap; gap: 10px; padding-block: 18px 6px; }
  .btn { min-height: 44px; padding: 0 18px; border-radius: 4px; border: 2px solid var(--petrol); background: var(--petrol);
         color: var(--petrol-ink); font: 700 1rem var(--body); cursor: pointer; }
  .btn.sec { background: transparent; color: var(--ink); border-color: var(--rule); }
  .discret { font-size: .88rem; color: var(--muted); margin: 6px 0 0; }

  /* Sections de bas de page */
  .bloc { padding-block: 36px 8px; }
  .bloc h2 { font-size: 1.65rem; margin-bottom: 14px; }
  .deux { display: grid; gap: 28px; }
  @media (min-width: 900px) { .deux { grid-template-columns: 1fr 1fr; gap: 48px; } }
  .prose { max-width: 38rem; }
  .prose p { margin: 0 0 12px; }
  .numeros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .numeros li.large { grid-column: 1 / -1; }
  .numeros a { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--rule);
               border-radius: 4px; color: var(--ink); text-decoration: none; background: var(--sheet); height: 100%; }
  .numeros a:hover { border-color: var(--petrol); }
  .numeros strong { font: 700 1.8rem/1 var(--num); color: var(--link); }
  .numeros span { font-size: .9rem; color: var(--muted); }
  .numeros .principal { flex-direction: row; align-items: center; gap: 14px;
                        background: var(--petrol); border-color: var(--petrol); color: var(--petrol-ink); }
  .numeros .principal strong, .numeros .principal span { color: inherit; }
  .faq details { border-bottom: 1px solid var(--rule); }
  .faq summary { cursor: pointer; padding-block: 14px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font: 700 1.2rem/1 var(--num); color: var(--muted); }
  .faq details[open] summary::after { content: "−"; }
  .faq details p { margin: 0 0 14px; max-width: 38rem; color: var(--muted); }
  footer { margin-top: 40px; border-top: 1px solid var(--rule); }
  footer .wrap { padding-block: 18px calc(24px + env(safe-area-inset-bottom, 0px)); font-size: .88rem; color: var(--muted);
                 display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

  @media (prefers-reduced-motion: reduce) { .jauge span { transition: none; } }


  /* Pages guides */
  .page-guide { display: grid; gap: 32px; padding-bottom: 8px; }
  @media (min-width: 1000px) { .page-guide { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; } }
  .aside { display: grid; gap: 24px; min-width: 0; }
  @media (min-width: 1000px) { .aside { position: sticky; top: calc(24px + env(safe-area-inset-top, 0px)); padding-top: 52px; } }
  .carte-calcul { background: var(--petrol); color: var(--petrol-ink); border-radius: 6px; padding: 20px; }
  .carte-calcul h2 { font-size: 1.35rem; margin: 0 0 8px; }
  .carte-calcul p { margin: 0 0 14px; font-size: .95rem; opacity: .9; }
  .carte-calcul .chiffres { display: flex; gap: 0; border-top: 2px solid currentColor; margin-bottom: 16px; }
  .carte-calcul .chiffres div { flex: 1; padding-top: 8px; }
  .carte-calcul .chiffres div + div { border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent); padding-left: 10px; }
  .carte-calcul .chiffres b { display: block; font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
  .carte-calcul .chiffres span { font-size: .8rem; opacity: .85; }
  .carte-calcul .cta { background: var(--petrol-ink); color: var(--petrol); }
  .fil { font-size: .85rem; color: var(--muted); padding-block: 18px 0; }
  .fil a { color: var(--muted); }
  .article { max-width: 42rem; padding-block: 12px 8px; }
  .article h1 { font-size: clamp(1.9rem, 6.5vw, 2.8rem); margin: 6px 0 12px; }
  .article .chapo { margin: 0 0 22px; }
  .article h2 { font-size: 1.4rem; margin: 30px 0 10px; }
  .article p, .article li { max-width: 40rem; }
  .article ul, .article ol { padding-left: 1.2rem; }
  .article li { margin-bottom: 6px; }
  .article table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
  .article th, .article td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .article th { font-size: .85rem; color: var(--muted); font-weight: 600; }
  .table { overflow-x: auto; }
  .encadre { background: var(--sheet); border: 1px solid var(--rule); border-radius: 6px; padding: 16px 18px; margin: 22px 0; }
  .encadre p:last-child { margin-bottom: 0; }
  .cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 4px; background: var(--petrol);
         color: var(--petrol-ink); font-weight: 700; text-decoration: none; }
  .source-note { font-size: .88rem; color: var(--muted); }
  .voir { border-top: 2px solid var(--ink); padding-top: 12px; }
  .voir h2 { font-size: 1.2rem; margin: 0 0 8px; }
  .voir ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
  .voir li { border-bottom: 1px solid var(--rule); margin: 0; }
  .voir a { display: block; padding-block: 10px; text-decoration: none; font-weight: 600; }
  .guides { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .guides a { display: block; height: 100%; padding: 14px; border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet);
              color: var(--ink); text-decoration: none; }
  .guides a:hover { border-color: var(--petrol); }
  .guides strong { display: block; font-family: var(--display); font-size: 1.1rem; margin-bottom: 4px; }
  .guides span { font-size: .9rem; color: var(--muted); }

  /* Impression : la liste seule, cases vides, à coller sur le frigo */
  @media print {
    :root { --ink: #000; --muted: #444; --rule: #bbb; --paper: #fff; --sheet: #fff; }
    .bandeau, .foyer, .nav, .actions, .discret, .bloc, footer, .vigilance .jauge, .item-achat, body::before { display: none !important; }
    .vigilance { position: static; border: 0; }
    .ouverture { display: block; padding: 0; }
    .chapo, .source { display: none; }
    h1 { font-size: 22pt; }
    .liste { grid-template-columns: 1fr 1fr; gap: 0 24px; }
    .item-label input:checked + .case { background: none; border-color: #000; }
    .item-label input:checked + .case::after { border-color: #000; }
    .is-done .item-nom { text-decoration: none; color: #000; }
    .cat { break-inside: avoid; }
    .fil, .voir, .cta, .encadre, .aside { display: none !important; }
    .page-guide { display: block; }
    .article { max-width: none; }
    .article h1 { font-size: 20pt; }
    .liste-statique .item-hors { background: none; padding: 0; color: #444; }
    body { font-size: 10pt; }
    .liste-statique .cat-titre { font-size: 13pt; padding-bottom: 3px; }
    .liste-statique .item-label { padding-block: 4px; gap: 8px; }
    .liste-statique .case { width: 12px; height: 12px; border-width: 1.5px; margin-top: 2px; }
    .liste-statique .item-note { font-size: 8pt; }
    .liste-statique .item-hors { font-size: 6.5pt; margin-top: 0; }
    .liste-statique .item-qte { padding-top: 4px; font-size: 10pt; }
    .liste-statique .cat { padding-top: 8px; }
    .article h2 { font-size: 13pt; margin: 14px 0 4px; }
    .article li { margin-bottom: 2px; }
  }