/* Regles conservees en inline : elles redefinissent des selecteurs
     deja presents dans un CSS partage. Les extraire changerait leur
     position dans la cascade, donc le rendu. Voir AGENTS.md §3 P2. */
    :root { --primary-blue:#1A4DFB; --primary-blue-hover:#0F37BE; --text-main:#0F172A; --text-muted:#64748B; --border-color:#E2E8F0; --bg-soft:#F8FAFC; --accent-green:#0F7A38; }
    * { box-sizing: border-box; }
    body { margin:0; font-family: var(--font-body); color:#334155; }
    .container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
    .breadcrumb { font-size:0.82rem; color:var(--text-muted); padding: 16px 0 0; }
    .breadcrumb a { color:var(--text-muted); text-decoration:none; }
    .section-heading { font-family: var(--font-heading); font-weight:800; font-size:clamp(1.3rem,2.4vw,1.7rem); color:var(--text-main); margin: 48px 0 16px; }
    .method-box .num { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:#EDF2FF; color:var(--primary-blue); font-weight:800; font-family:var(--font-heading); margin-bottom:12px; }
    .product-card .tag { align-self:flex-start; background:#EDF2FF; color:var(--primary-blue-hover); font-size:0.72rem; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:10px; }
    .product-card .tag.curatif { background:var(--accent-green-bg,#EAF7EC); color:#2F7A3C; }

    .photo-gallery figure { margin:0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-color); }
    .photo-gallery figcaption { padding: 10px 14px; font-size: 0.85rem; color: var(--text-muted); }

/* ==========================================================================
   Motifs auparavant decrits en style="" dans le HTML de cette page.
   ========================================================================== */

/* Accordeon de questions frequentes en bas de page. */
.faq-panel {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 4px 20px;
}
.faq-panel__question {
  padding: 16px 0;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
}
.faq-panel__text {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.faq-stack { display: grid; gap: 12px; margin-bottom: 56px; }

/* Filet colore d'un encadre de methode. */
.method-box.method-box--blue  { border-left: 3px solid var(--primary-blue); }
.method-box.method-box--green { border-left: 3px solid var(--accent-green); }

/* Variantes de l'encart de note. */
.note-box.note-box--neutral { background: #F8FAFC; border-color: #E2E8F0; color: #475569; }
.note-box.note-box--info    { background: #EDF2FF; border-color: #C7D9FF; color: #0F37BE; }

/* Variantes de grille de methodes. */
.method-grid.method-grid--wide   { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.method-grid.method-grid--single { grid-template-columns: 1fr; }

/* Variantes d'espacement de la galerie photo. */
.photo-gallery.photo-gallery--tight { margin: 32px 0 8px; }
.photo-gallery.photo-gallery--three { grid-template-columns: repeat(3, 1fr); margin: 32px 0 40px; }

/* Sous-titre introduisant un bloc de procedure. */
.procedure-subtitle {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--text-main);
  margin: 32px 0 4px;
}

/* Paragraphes ponctuels de la page. */
.method-box p.procedure-intro { font-size: 0.95rem; color: var(--text-muted); line-height: 1.75; margin: 0; }
.gallery-caption { font-size: 0.85rem; color: var(--text-muted); margin: -8px 0 40px; }
.lead-text.lead-text--tight { margin-top: 8px; }
.product-grid.product-grid--spaced { margin-top: 16px; }
.figure-img--380 { width: 100%; max-height: 380px; object-fit: cover; display: block; }