/* Confort de lecture (confort.php). Les classes sont posées sur <html> par le
   script, et sur <body> par le serveur pour un compte connecté. */

/* La taille s'applique une seule fois, à la racine : sur <html> et <body> à la
   fois, les deux pourcentages se multiplieraient. */
.ins-lecture--grand, body.ins-lecture--grand { font-size: 112%; }
.ins-lecture--tres-grand, body.ins-lecture--tres-grand { font-size: 128%; }
.ins-lecture--grand body, .ins-lecture--tres-grand body { font-size: 100%; }

.ins-lecture--espace body, body.ins-lecture--espace {
  letter-spacing: .035em;
  word-spacing: .12em;
  line-height: 1.85;
}
.ins-lecture--espace p, body.ins-lecture--espace p { max-width: 62ch; }

.ins-lecture--contraste body, body.ins-lecture--contraste {
  --ins-doux: #2c3a33;
  --ins-ligne: #7d8b83;
  background: #fff;
  color: #0d1a13;
}
.ins-lecture--contraste .ins-meta, body.ins-lecture--contraste .ins-meta { color: #2c3a33; }
.ins-lecture--contraste a, body.ins-lecture--contraste a { text-decoration: underline; }

/* Le panneau lui-même */
.ins-lecture { margin: 18px 0; border: 1px solid var(--ins-ligne, #dfe6e1); border-radius: 12px; background: #fff; }
.ins-lecture > summary { padding: 10px 14px; cursor: pointer; font-weight: 600; }
.ins-lecture__corps { padding: 0 14px 14px; display: grid; gap: 10px; }
.ins-lecture fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ins-lecture legend { padding: 0; font-size: 13px; font-weight: 700; }
.ins-lecture label { display: inline-flex; gap: 6px; align-items: center; }
.ins-lecture__case { font-size: 15px; }