/* =========================================================
   DOUJANI.FR — Pages d'information (donnees.html « Vos données », accessibilite.html « Déclaration d'accessibilité »)
   Texte facile à lire (FALC) : grandes lettres, phrases courtes, une idée par ligne, un petit dessin par idée,
   et un bouton 🔊 à côté de chaque phrase (le script de la page l'ajoute).
   Marche avec css/atelier.css (variables --ink, --line, --paper…), en ligne comme en file://.
   Les textes ci-dessous sont tous à 4,5:1 au moins sur leur fond.
   ========================================================= */
.info { padding-bottom: 56px; }
.info-sprites { position: absolute; width: 0; height: 0; overflow: hidden; }
.info h1 { margin: 22px 0 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.info h1 .say-btn { width: 52px; height: 52px; flex: 0 0 52px; font-size: 24px; }
.info-intro { font-size: 22px; line-height: 1.4; margin: 0 0 14px; max-width: 46em; }
.info-sommaire { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 22px; }
.info-sommaire a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 18px; border: var(--border); border-radius: 999px;
  background: #fff; color: var(--ink); font-family: var(--font-title); font-weight: 700; font-size: 18px; text-decoration: none; box-shadow: var(--shadow-sm); }
.info-sommaire a:hover { background: var(--paper-2); }

.info-carte { margin: 0 0 26px; padding: 22px 26px 26px; scroll-margin-top: 80px; }
.info-carte > h2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 6px; }
.info-carte > h2 .say-btn { width: 48px; height: 48px; flex: 0 0 48px; font-size: 22px; }
.info-carte h3 { font-size: 24px; margin: 22px 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.info-carte h3 .say-btn, .info-carte .say-btn { width: 44px; height: 44px; flex: 0 0 44px; font-size: 20px; }
.info-carte p { font-size: 19px; line-height: 1.5; margin: 8px 0; max-width: 52em; }
.info-carte .info-tout { margin: 8px 0 4px; }

/* Une phrase = un petit dessin, la phrase, le bouton 🔊 */
.info-phrases { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.info-phrases li { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 2px dashed #cfc7b4; }
.info-phrases li:last-child { border-bottom: 0; }
.info-phrases .pic { width: 56px; height: 56px; }
.info-phrases .t { font-family: var(--font-body); font-size: 24px; line-height: 1.35; font-weight: 600; }
.info-phrases .t b { font-weight: 800; }
.pic { display: block; fill: none; stroke: #1d1b2f; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }

/* Le tableau pour les parents : une ligne = une sorte de données */
.info-tableau { width: 100%; border-collapse: separate; border-spacing: 0; margin: 12px 0 4px; font-size: 18px; line-height: 1.4; border: var(--border); border-radius: 16px; overflow: hidden; background: #fff; }
.info-tableau caption { text-align: left; font-family: var(--font-title); font-weight: 700; font-size: 20px; padding: 0 0 8px; caption-side: top; }
.info-tableau th, .info-tableau td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 2px solid #e5dfcf; }
.info-tableau thead th { background: var(--ink); color: #fff; font-family: var(--font-title); font-size: 17px; }
.info-tableau tbody th { font-weight: 800; width: 24%; background: var(--paper-2); }
.info-tableau tbody tr:last-child th, .info-tableau tbody tr:last-child td { border-bottom: 0; }
.info-tableau th .say-btn { margin-top: 8px; }
.info-tableau td small { display: block; margin-top: 4px; color: var(--muted); font-size: 16px; }

.info-liste { margin: 8px 0; padding-left: 1.3em; font-size: 19px; line-height: 1.55; max-width: 52em; }
.info-liste li { margin: 4px 0; }
.info-liste li > .say-btn { vertical-align: middle; margin-left: 6px; width: 38px; height: 38px; flex-basis: 38px; font-size: 18px; }
.info-etapes { list-style: none; counter-reset: etape; margin: 10px 0; padding: 0; display: grid; gap: 10px; max-width: 52em; }
.info-etapes li { counter-increment: etape; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 20px; line-height: 1.4; }
.info-etapes li::before { content: counter(etape); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--font-title); font-weight: 700; font-size: 22px; }
.info-contact { margin: 12px 0; padding: 14px 18px; border: var(--border); border-radius: 18px; background: var(--ok-bg); font-size: 20px; line-height: 1.45; max-width: 52em; }
.info-contact b { font-family: var(--font-title); }
.info-etat { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border: var(--border); border-radius: 999px; background: #fff3c4; font-family: var(--font-title); font-weight: 700; font-size: 22px; }
.info-note { font-size: 16px; color: var(--muted); }
.info .info-pied { margin: 26px 0 0; display: flex; gap: 14px; flex-wrap: wrap; }
.info a:not(.btn):not(.pas-lien) { color: #1d4fb0; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.info .info-sommaire a { color: var(--ink); text-decoration: none; }

@media (max-width: 760px) {
  .info-carte { padding: 16px 14px 20px; }
  .info-intro { font-size: 20px; }
  .info-phrases li { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; }
  .info-phrases .pic { width: 44px; height: 44px; }
  .info-phrases .t { font-size: 21px; }
  /* le tableau devient une pile de cartes : chaque case porte son titre */
  .info-tableau, .info-tableau tbody, .info-tableau tr, .info-tableau th, .info-tableau td { display: block; width: auto; }
  .info-tableau { border-radius: 14px; }
  .info-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .info-tableau tbody th { width: auto; border-bottom: 2px solid #e5dfcf; }
  .info-tableau tbody tr { border-bottom: 3px solid var(--ink); }
  .info-tableau tbody tr:last-child { border-bottom: 0; }
  .info-tableau td::before { content: attr(data-label); display: block; font-family: var(--font-title); font-weight: 700; font-size: 15px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
}
@media print {
  .topbar, .say-btn, .info-sommaire, .info-pied { display: none !important; }
  .info-carte { box-shadow: none; border: 1px solid #000; break-inside: avoid; }
  body { background: #fff; }
  /* texte clair sur fond foncé : le navigateur n'imprime pas les fonds par défaut, le texte blanc disparaissait (numéros des étapes, en-tête du tableau) */
  .info-tableau thead th { background: none; color: #000; border-bottom: 2px solid #000; }
  .info-etapes li::before { background: none; color: #000; border: 2px solid #000; }
}