/* ============================================================
   GABARIT « ARTICLE » (pages PIC / CBN / Gestion des stocks / MCD cours)
   Source UNIQUE — 2026-08-05. Ces 92 lignes étaient recopiées à l'identique
   dans chaque page ; toute correction devait donc être faite 4 fois.
   Pages qui chargent ce fichier : plan-industriel-commercial, gestion-des-stocks-texte,
   mcd-cours, calcul-des-besoins-nets.
   ⚠️ À charger APRÈS chapter.css/menu.css et AVANT le <style> propre à la page
   (l'ordre de cascade d'origine est ainsi préservé).
   ⚠️ Voir REGLES.md § 3b-bis : la colonne de lecture reste à 1000px dans les DEUX
   états du sommaire.
   ============================================================ */

  /* ============================================================
     PIC — page texte À DÉFILEMENT (contenu long, détail dépliable).
     data-no-fit sur le <main> : on garde le docking + le reveal du
     modèle --text, mais fit.js ne réduit PAS la police (pas de « fit
     à un écran ») → l'article défile normalement.
     ============================================================ */
  .chapter-content__header h1 { flex: 0 1 auto; }

  .pic { padding: 8px clamp(22px, 3.4vw, 60px) 40px; max-width: 1000px; margin: 0 auto;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

  /* Repli du sommaire → le carré blanc S'ÉLARGIT et le texte se recompose (demande client
     2026-07-09). Exception LOCALE à la règle « recentre, jamais resize » des pages texte :
     cette page défile normalement (data-no-fit), fit.js n'y recalcule aucune police. */
  @media (min-width: 1100px) {
    main.chapter-content--text { transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    body.book-nav-collapsed main.chapter-content--text { width: min(1500px, calc(100vw - 80px)); }
    /* ⚠️ RÈGLE (client 2026-08-05) : la COLONNE DE LECTURE NE S'ÉLARGIT JAMAIS.
       Au repli du sommaire, la carte peut grandir, mais le texte garde sa mesure
       (1000px) et se RECENTRE — sinon il occupe presque toute la page sur 27".
       Ceci ANNULE la règle du 2026-07-09 (« le texte se recompose », 1240px). */
    body.book-nav-collapsed .pic { max-width: 1000px; }
  }

  /* --- Essentiel (toujours visible) --- */
  .pic-kicker { font-family: Verdana, Geneva, sans-serif; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; font-size: 0.7rem; color: var(--mondrian-red); margin: 6px 0 8px;
    text-align: left; white-space: nowrap; }
  @media (max-width: 720px) { .pic-kicker { white-space: normal; } }
  .pic { hyphenate-limit-chars: 8 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; }   /* césure seulement sur mots ≥8 lettres (audit D5) */
  .pic-lead { font-size: 1.5rem; line-height: 1.44; margin: 0 0 16px; text-align: justify; hyphens: auto; }
  .pic p { font-size: 1.24rem; line-height: 1.5; margin: 0 0 15px; text-align: justify; hyphens: auto; }
  .pic-lead .pic-cite { font-style: italic; }
  .pic strong { color: var(--mondrian-blue); }

  /* --- Citation forte : l'atout SQUALP (texte d'Ali) --- */
  .pic-quote { background: var(--mondrian-black); color: #fff; border-left: 10px solid var(--mondrian-red);
    padding: 24px 28px; margin: 24px 0 30px; font-size: 1.32rem; line-height: 1.46; }
  .pic-quote p { color: #fff; font-size: inherit; margin: 0; text-align: left; }
  .pic-quote strong { color: var(--mondrian-yellow); }

  /* --- Bloc « détail à la demande » --- */
  .pic-more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; border-top: 4px solid var(--mondrian-black); padding-top: 18px; margin-top: 8px; }
  .pic-more-head h2 { font-family: Verdana, Geneva, sans-serif; font-weight: 900; text-transform: uppercase;
    font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.1; margin: 0; color: var(--mondrian-black); }
  .pic-hint { font-size: 0.92rem; color: var(--mondrian-grey, #5B5B54); font-weight: 700; }

  /* --- Sections Mondrian (ex-accordéons, tout est visible — demande client 2026-07-07) --- */
  .pic-sec { border: 3px solid var(--mondrian-black); background: #fff; margin: 14px 0; box-shadow: 3px 3px 0 var(--mondrian-black); }
  .pic-sec__title { display: flex; align-items: center; gap: 16px; padding: 15px 20px; margin: 0;
    background: var(--mondrian-cream); border-bottom: 3px solid var(--mondrian-black);
    font-family: Verdana, Geneva, sans-serif; font-weight: 900; text-transform: uppercase;
    font-size: 1.12rem; line-height: 1.15; color: var(--mondrian-black); }
  .pic-sec__body { padding: 18px 24px 20px; }
  .pic-sec__body p:last-child, .pic-sec__body ul:last-child { margin-bottom: 0; }
  .pic-sec__body .pic-sub { font-family: Verdana, Geneva, sans-serif; font-weight: 900; color: var(--mondrian-red);
    font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 4px 0 8px; }

  /* --- Formules mathématiques : vraies fractions posées (numérateur / barre /
     dénominateur), y compris imbriquées. Registre algébrique → serif italique
     (Georgia), exception typo assumée comme la couverture. Classes réutilisables. --- */
  .formula-block { text-align: center; margin: 18px auto 22px; max-width: 100%; overflow-x: auto; }
  .formula { display: inline-flex; align-items: center; gap: 0.4em;
    font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic;
    font-size: 1.45rem; line-height: 1.3; color: var(--mondrian-black); white-space: nowrap; }
  .formula--inline { display: inline; font-size: 1.1em; white-space: normal; }
  .fraction { display: inline-flex; flex-direction: column; align-items: center;
    vertical-align: middle; margin: 0 0.15em; line-height: 1.3; }
  .numerator { display: inline-flex; align-items: center; gap: 0.35em;
    padding: 0 0.5em 0.12em; border-bottom: 2px solid var(--mondrian-black); }
  .denominator { padding: 0.12em 0.5em 0; }
  @media (max-width: 720px) {
    .formula { font-size: 1.2rem; }
  }

  .pic ul { margin: 8px 0 15px; padding: 0; list-style: none; }
  .pic ul li { position: relative; padding: 4px 0 4px 26px; font-size: 1.2rem; line-height: 1.45; text-align: justify; hyphens: auto; }
  .pic ul li::before { content: "\203A"; position: absolute; left: 4px; top: 2px; color: var(--mondrian-red); font-weight: 900; font-size: 1.3em; }
  .pic ul.pic-sublist { margin: 6px 0 10px; padding-left: 22px; }
  .pic ul.pic-sublist li { font-size: 1.08rem; padding: 2px 0 2px 24px; }
  .pic ul.pic-sublist li::before { content: "\2013"; }

  @media (max-width: 720px) {
    .pic { padding: 14px 18px 30px; }
    .pic-lead { font-size: 1.15rem; }
    .pic p, .pic ul li { font-size: 1.02rem; }
    .pic-quote { font-size: 1.08rem; padding: 18px 18px; }
    .pic ul.pic-sublist li { font-size: 0.98rem; }
  }