/*
  Le CSS des pages outils, partagé.

  D'OÙ IL VIENT, ET POURQUOI C'EST IMPORTANT

  Ce fichier est l'extraction VERBATIM du bloc <style> de
  `public/outils/rapport-triglycerides-hdl-calculer/index.html` — la seule page du
  site qui ait franchi la porte A (2 994 clics sur 16 mois, 87 % du compte). Rien
  n'a été reformaté, rien n'a été « amélioré » : une mise en page qui marche ne se
  réinvente pas à chaque fabrication.

  La page d'origine garde sa copie en ligne et n'est pas touchée (décision de
  Huzine du 25/09). Les pages fabriquées à partir de `_modele/` lient ce fichier
  au lieu de recopier 123 lignes de CSS dans leur <head>.

  Classes documentées dans `public/outils/_commun/charte.md` § 5 et dans
  `public/outils/_modele/blocs.md`.

  AJOUTS après extraction — signalés, jamais mélangés : voir la section
  « Blocs ajoutés par le modèle » en fin de fichier.
*/

:root {
  --ink: #0F2C59;
  --ink-deep: #071828;
  --paper: #F8FAFC;
  --cream: #F1F5F9;
  --sage: #00B894;
  --sage-light: #059669;
  --sage-glow: #34D399;
  --sage-muted: #ECFDF5;
  --sage-texte: #047857;
  --text: #1E293B;
  --text-mid: #475569;
  --text-light: #94A3B8;
  --border: #E2E8F0;
  --card: #FFFFFF;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--paper);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

/* Header */
.header {
  background: rgba(7,24,40,0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 14px 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: 'Instrument Serif', serif;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
}

.logo span {
  color: var(--sage);
}

.header-nav {
  display: flex;
  gap: 16px;
  align-items: center;
}

.header-nav a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.header-nav a:hover {
  color: var(--sage);
}

.btn-member {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.btn-member:hover {
  border-color: var(--sage);
  color: var(--sage);
}

/* Back link */
.back-link {
  max-width: 800px;
  margin: 24px auto 0;
  padding: 0 20px;
}

.back-link a {
  color: var(--sage-texte);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.back-link a:hover {
  text-decoration: underline;
}

/* Article */
.article {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

.article h1 {
  font-family: 'Instrument Serif', serif;
  font-size: 36px;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 24px;
  letter-spacing: -0.03em;
}

.article h2, #outils-lies h2 {
  font-family: 'Instrument Serif', serif;
  font-size: 26px;
  color: var(--ink);
  margin: 40px 0 16px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

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

.article p {
  margin-bottom: 16px;
  color: var(--text-mid);
  font-size: 16px;
  line-height: 1.8;
}

.article strong {
  color: var(--text);
  font-weight: 600;
}

.article ul, .article ol {
  margin: 16px 0;
  padding-left: 24px;
}

.article li {
  margin-bottom: 8px;
  color: var(--text-mid);
  font-size: 16px;
  line-height: 1.7;
}

.article a {
  color: var(--sage-texte);
  text-decoration: underline;
}

.article table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}

.article th, .article td {
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: left;
}

.article th {
  background: var(--cream);
  font-weight: 600;
  color: var(--ink);
}

/* Calculateur */
.calc {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
}

.calc-title {
  font-family: 'Instrument Serif', serif;
  font-size: 23px;
  color: var(--ink);
  margin-bottom: 4px;
}

.calc-sub {
  font-size: 13.5px;
  color: var(--text-light);
  margin-bottom: 14px;
  line-height: 1.5;
}

.calc-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.calc-field {
  flex: 1;
  min-width: 150px;
}

.calc-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-mid);
  margin-bottom: 5px;
}

.calc-input {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.calc-input:focus-visible, .calc-unit:focus-visible {
  outline: 2px solid var(--sage-light);
  outline-offset: 1px;
}

.calc-unit {
  width: 100%;
  margin-top: 8px;
  padding: 10px 8px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.calc-err {
  display: block;
  font-size: 12.5px;
  color: #b91c1c;
  margin-top: 5px;
  min-height: 1px;
}

.calc-out {
  margin-top: 14px;
}

.res {
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.res-k {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

.res-v {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  margin: 4px 0;
}

.res-z {
  font-size: 15px;
  font-weight: 700;
}

.res-p {
  font-size: 14px;
  color: var(--text-mid);
  margin: 12px 0 0;
  line-height: 1.55;
  text-align: left;
}

.res-calc {
  font-size: 13px;
  color: var(--text-light);
  margin: 8px 0 0;
  text-align: left;
}

/* Partage de l'outil — sous le résultat ;
  seul le lien de la page circule */
.partage {
  margin: 14px 0 0;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.partage[hidden] {
  display: none;
}

.partage-t {
  font-size: 13.5px;
  color: var(--text-mid);
  margin: 0 0 10px;
  line-height: 1.5;
}

.partage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.partage-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  padding: 11px 18px;
  border: 1px solid var(--sage);
  border-radius: 100px;
  background: var(--sage);
  color: #071828;
  text-decoration: none;
  cursor: pointer;
}

.partage-btn-2 {
  background: transparent;
  border-color: var(--border);
  color: var(--sage-texte);
}

/* Bouton de partage écrit en lien (WhatsApp) dans .article : sans ces deux
  règles, `.article a` (0,1,1) l'emporte sur `.partage-btn` (0,1,0) et le
  texte passe en vert foncé souligné sur fond vert, 2,16:1 (#470). */
.article a.partage-btn {
  color: #071828;
  text-decoration: none;
}

.article a.partage-btn-2 {
  color: var(--sage-texte);
}

.partage-btn:focus-visible {
  outline: 2px solid var(--sage-light);
  outline-offset: 2px;
}

.partage-btn[hidden] {
  display: none;
}

.partage-msg {
  display: block;
  font-size: 12.5px;
  color: var(--text-mid);
  margin-top: 8px;
  min-height: 1px;
}

/* Après le calcul (mission 07) — un seul lien, affiché seulement quand un
   résultat est là : `.calc-out` vide = rien à suivre. */
.apres-calcul {
  display: none;
  margin: 14px 0 0;
  text-align: center;
}

.calc-out:not(:empty) + .apres-calcul {
  display: block;
}

.apres-calcul a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-width: 100%;
  padding: 12px 22px;
  border-radius: 100px;
  background: var(--sage);
  color: #071828;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.apres-calcul a:hover {
  background: var(--sage-glow);
}

.apres-calcul a:focus-visible {
  outline: 2px solid var(--sage-light);
  outline-offset: 2px;
}

/* Capture email — s'ajoute SOUS le résultat, qui reste affiché en entier */
.capture {
  margin-top: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

.capture-t {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.capture-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.capture-row .calc-input {
  flex: 1;
  min-width: 170px;
}

.capture-btn {
  flex: 0 0 auto;
  background: var(--sage);
  color: #071828;
  border: 0;
  border-radius: 100px;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}

.capture-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.capture-btn:focus-visible, .capture-row .calc-input:focus-visible {
  outline: 2px solid var(--sage-light);
  outline-offset: 2px;
}

.capture-n {
  font-size: 12.5px;
  color: var(--text-light);
  margin: 8px 0 0;
  line-height: 1.5;
}

.capture-m {
  font-size: 13.5px;
  color: var(--sage-texte);
  margin: 8px 0 0;
  line-height: 1.5;
}

.capture-m.err {
  color: #b91c1c;
}

.faq-q {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}

.faq-q summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  padding: 10px 0;
  list-style-position: outside;
}

.faq-q summary:focus-visible {
  outline: 2px solid var(--sage-light);
  outline-offset: 2px;
}

.faq-q p {
  margin: 0 0 12px;
}

/* Outils liés — version fond clair des classes de _commun/outil.css */
#outils-lies {
  padding: 0 0 60px;
}

#outils-lies .wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.liens-outils {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 10px;
}

.liens-outils li {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.liens-outils a {
  display: block;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

.liens-outils a:hover {
  color: var(--sage-light);
}

/* Offre — renvoi vers l'outil gratuit du site */
.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: rgba(7,24,40,0.97);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bar-t {
  font-size: 12.5px;
  color: rgba(255,255,255,0.72);
  line-height: 1.35;
}

.bar-btn {
  flex: 0 0 auto;
  background: var(--sage);
  color: #071828;
  padding: 12px 20px;
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.outil-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 8px;
}

.outil-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.outil-actions .btn-calc {
  background: var(--sage);
  color: #071828;
}

.outil-actions .btn-offre {
  color: var(--sage-texte);
  border: 1px solid var(--sage);
}

body {
  padding-bottom: 82px;
}

/* Footer */
.footer {
  background: var(--ink-deep);
  padding: 32px 20px;
  text-align: center;
}

.footer-logo {
  font-family: 'Instrument Serif', serif;
  font-size: 18px;
  color: #fff;
  margin-bottom: 10px;
}

.footer-logo span {
  color: var(--sage);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
}

.footer-copy {
  font-size: 10px;
  color: rgba(255,255,255,0.25);
}

@media (min-width: 768px) {
  .article h1 {
  font-size: 44px;
}

.article h2, #outils-lies h2 {
  font-size: 30px;
}

.calc {
  padding: 24px;
}

.calc-unit {
  width: auto;
  min-width: 110px;
}
}

@media (min-width: 900px) {
  .bar {
  position: static;
  background: transparent;
  backdrop-filter: none;
  border-top: 0;
  max-width: 800px;
  margin: 0 auto 40px;
  padding: 20px 20px 0;
  border-radius: 0;
}

.bar-t {
  color: var(--text-mid);
  font-size: 14px;
}

body {
  padding-bottom: 0;
}
}
/* ─────────────────────────────────────────────────────────────────────────────
   Blocs ajoutés par le modèle

   Ce qui suit N'EXISTE PAS dans la page d'origine. C'est séparé exprès : on doit
   pouvoir voir d'un coup d'œil ce qui est éprouvé et ce qui est nouveau.
   ───────────────────────────────────────────────────────────────────────────── */

/* Bandeau de la page modèle. Rouge, gros, impossible à confondre avec une page
   publiable : une page modèle qui ressemble à une vraie page finit publiée. */
.bandeau-modele {
  background: #7F1D1D; color: #fff; padding: 12px 20px; text-align: center;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
}
.bandeau-modele code { background: rgba(255,255,255,.18); padding: 1px 6px; border-radius: 4px; }

/* Étiquette d'un bloc, dans la page modèle seulement. */
.etiq-bloc {
  display: inline-block; margin: 32px 0 8px; padding: 3px 10px;
  background: var(--ink); color: #fff; border-radius: 100px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
/* La première n'a pas de marge haute : elle est déjà sous le lien de retour, et
   32 px de plus poussent le premier champ sous la ligne de flottaison. */
.etiq-bloc-1 { margin-top: 4px; }

/* LE CHAPÔ : UNE phrase, et une seule.
   Ce n'est pas une préférence de style. Mesuré le 25/09 sur la page modèle :
   un chapô de trois lignes à 18 px pousse le premier champ de saisie 213 px sous
   la ligne de flottaison à 390 × 844. Le lecteur arrive de Google avec une
   question et ne voit pas où taper. La classe existe pour que la contrainte soit
   dans le CSS et pas seulement dans une consigne qu'on oublie. */
.chapo {
  font-size: 18px; color: var(--text-mid); line-height: 1.6;
  margin-bottom: 16px;
}

/* Schéma léger : un dessin qui explique, en SVG inline, sans requête réseau.
   Jamais une photo de banque d'images, jamais une image générée présentée comme
   une photo. Le SVG est le bon format ici : il pèse quelques centaines d'octets,
   reste net sur tous les écrans, et son contenu est du texte donc lisible. */
.schema { margin: 20px 0; padding: 16px; background: var(--cream); border-radius: 12px; }
.schema svg { display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto; }
.schema figcaption {
  margin-top: 10px; font-size: 13px; color: var(--text-mid); text-align: center;
}

/* Barre de résultat : la lecture visuelle de la valeur, dessinée, pas décorée. */
.jauge { margin: 14px 0 4px; }
.jauge-piste {
  position: relative; height: 10px; border-radius: 100px; overflow: hidden;
  background: linear-gradient(90deg, #16A34A 0%, #16A34A 40%, #CA8A04 40%, #CA8A04 70%, #DC2626 70%);
}
.jauge-curseur {
  position: absolute; top: -3px; width: 4px; height: 16px; border-radius: 2px;
  background: var(--ink-deep); box-shadow: 0 0 0 2px #fff;
  transition: left .18s ease-out;
}
.jauge-bornes {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text-mid); margin-top: 6px;
}

/* « Ce que vous cherchez ensuite » : les questions suivantes, traitées, pas
   listées. Une question posée sans réponse renvoie le lecteur sur Google. */
.suite { margin: 28px 0; }
.suite h3 { font-size: 20px; margin-bottom: 8px; }
.suite-item { padding: 14px 0; border-bottom: 1px solid var(--border); }
.suite-item:last-child { border-bottom: 0; }
.suite-q { font-weight: 600; color: var(--ink); margin-bottom: 4px; }

/* Bloc de confiance : sources, date, relecture. En bas, visible, daté. */
.confiance {
  margin: 32px 0; padding: 18px 20px; background: var(--cream);
  border-radius: 12px; border-left: 3px solid var(--sage);
  font-size: 14px; color: var(--text-mid);
}
.confiance h3 { font-size: 16px; color: var(--ink); margin-bottom: 10px; }
.confiance ul { margin: 8px 0 0 18px; }
.confiance li { margin-bottom: 6px; }
.confiance time { font-variant-numeric: tabular-nums; }