/* =========================================================
   THÈME « Quiz arène » — PAGES D'INFORMATION : accessibilite.html, donnees.html, guide.html
   Lot I du plan « Quiz partout » (_plan-1.0/rapports-1.0/plan-quiz-partout.md § 8, rapport quiz-info.md).
   Chargée APRÈS css/themes/quiz.css (la BASE : polices, jetons --q-*, boutons, cartes, focus, aides, impression, .qz-*).
   Mêmes règles d'écriture que la BASE : chaque sélecteur commence par html[data-theme="quiz"] (même dans un @media) ; couleurs par les jetons --q-* ;
   aucune forme décorative, aucune animation ; rien dans le cœur. Retirer data-theme="quiz" d'une page la ramène en arrière.

   Ce que chaque page reçoit (les couleurs viennent des classes qz-* posées par les pages) :
   - accessibilite.html et donnees.html : le titre (h1 + phrase d'intro) dans une grande bande de couleur (.qz-entete) ; le sommaire en grosses tuiles de jeu,
     une couleur chacune ; chaque carte (.info-carte) a la couleur de sa tuile, son titre en pastille (.qz-titre) ; plus d'air entre les cartes et entre les phrases.
     Une tuile qui mène à l'AUTRE page a la couleur de la bande de cette page (« Vos données » turquoise, « Accessibilité » rose).
   - guide.html (document d'adultes, imprimé) : la COQUILLE seulement : la bande de titre (.g-hero), ses boutons, l'anneau de focus bleu sur les cartes blanches.
     Le corps (.g-main > section, notes, tableaux, frise, fiches) garde son style.
   Géométrie seulement à l'écran (@media screen) : l'impression retrouve la mise en page d'avant (blocs @media print en bas).
   ========================================================= */

/* ---------- Anneau de focus ----------
   Dans une bande de couleur : la couleur du texte de la bande (encre sur les bandes claires, blanc sur les foncées) ; le jaune du thème s'y perdrait.
   Sur les surfaces blanches du guide (sommaire, sections) : bleu (le jaune y faisait 1,2:1 ; 811 liens). Les cartes d'information (.card) l'ont déjà de la BASE. */
html[data-theme="quiz"] .qz-entete { --focus: var(--rub-fg, #fff); }
html[data-theme="quiz"] :is(.g-toc, .g-main) { --focus: var(--q-bleu); }

@media screen {
  /* ======================= accessibilite.html et donnees.html ======================= */
  html[data-theme="quiz"] .info { --info-gap: 34px; padding-bottom: 76px; }

  /* la bande de titre : h1 + phrase (avec son 🔊) */
  html[data-theme="quiz"] .info > .qz-entete { margin: 30px 0 var(--info-gap); padding: 30px 38px 34px; border-radius: 28px; box-shadow: 0 7px 0 var(--rub-o, var(--q-ombre)); }
  html[data-theme="quiz"] .info > .qz-entete h1 { margin: 0 0 12px; }
  html[data-theme="quiz"] .info > .qz-entete .info-intro { max-width: none; margin: 0; line-height: 1.45; }
  html[data-theme="quiz"] .info > .qz-entete .info-intro .say-btn { vertical-align: middle; margin-left: 10px; }

  /* le sommaire : de grosses tuiles de jeu, une couleur chacune (arête dessous, comme les boutons) ; 64 px de haut au moins */
  html[data-theme="quiz"] .info-sommaire { gap: 18px 20px; margin: 0 0 var(--info-gap); }
  html[data-theme="quiz"] .info .info-sommaire a {
    min-height: 64px; padding: 10px 28px; gap: 10px; border: 0; border-radius: 20px;
    background: var(--rub, var(--q-lav)); color: var(--rub-fg, var(--q-encre)); box-shadow: 0 6px 0 var(--rub-o, var(--q-lav-o));
    font-size: calc(21em / var(--info-ref)); font-weight: 900; text-decoration: none;   /* (21 px ; en em, voir « Taille du texte » plus bas) */
    transition: transform .07s ease, box-shadow .07s ease; overflow-wrap: normal;   /* (jamais de mot coupé dans une tuile : avec « texte très grand » elle passe en pleine largeur) */
  }
  html[data-theme="quiz"] .info .info-sommaire a:hover { background: var(--rub, var(--q-lav)); transform: translateY(-2px); box-shadow: 0 8px 0 var(--rub-o, var(--q-lav-o)); filter: brightness(1.07); }
  html[data-theme="quiz"].aff-contraste .info .info-sommaire a { border: 4px solid #000; }   /* contraste fort : contour noir de 4 px, comme les autres boutons */
  html[data-theme="quiz"] .info .info-sommaire a:active { transform: translateY(6px); box-shadow: 0 0 0 var(--rub-o, var(--q-lav-o)); filter: none; }

  /* les cartes : plus d'air dedans et entre elles (26 → 34 px), le titre en pastille de la couleur de la carte */
  html[data-theme="quiz"] .info-carte { margin: 0 0 var(--info-gap); padding: 34px 38px 38px; scroll-margin-top: 100px; }
  html[data-theme="quiz"] .info-carte > h2.qz-titre { gap: 12px; padding: 8px 24px; margin: 0 0 20px; border-radius: 18px; box-shadow: 0 5px 0 var(--rub-o, var(--q-ombre)); }
  html[data-theme="quiz"] .info-carte h3 { margin: 38px 0 10px; }
  html[data-theme="quiz"] .info-carte p { margin: 12px 0; line-height: 1.55; }
  html[data-theme="quiz"] .info-carte .info-tout { margin: 4px 0 10px; }

  /* « Pour toi » : une phrase = une ligne de lavande, bien séparée de la suivante */
  html[data-theme="quiz"] .info-phrases { gap: 14px; margin: 14px 0 0; }
  html[data-theme="quiz"] .info-phrases li { gap: 20px; padding: 16px 20px; border: 0; border-radius: 20px; background: #f4efff; }
  html[data-theme="quiz"] .info-phrases .t { line-height: 1.4; }

  /* le tableau des parents : l'en-tête de la couleur de la carte */
  html[data-theme="quiz"] .info-tableau { margin: 18px 0 8px; border-radius: 20px; }
  html[data-theme="quiz"] .info-tableau thead th { background: var(--rub, var(--q-barre)); color: var(--rub-fg, #fff); padding: 16px 18px; font-size: 18px; }
  html[data-theme="quiz"] .info-tableau th, html[data-theme="quiz"] .info-tableau td { padding: 16px 18px; border-bottom-color: #e2d9f6; }
  html[data-theme="quiz"] .info-tableau tbody th { background: var(--paper-2); }

  /* listes, étapes numérotées (le numéro porte la couleur de la carte), contact, état */
  html[data-theme="quiz"] .info-liste { margin: 14px 0; line-height: 1.6; }
  html[data-theme="quiz"] .info-liste li { margin: 12px 0; }
  html[data-theme="quiz"] .info-etapes { gap: 16px; margin: 16px 0; }
  html[data-theme="quiz"] .info-etapes li { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; }
  html[data-theme="quiz"] .info-etapes li::before { width: 48px; height: 48px; border-radius: 14px; background: var(--rub, var(--q-barre)); color: var(--rub-fg, #fff); box-shadow: 0 4px 0 var(--rub-o, var(--q-ombre)); font-weight: 900; }
  html[data-theme="quiz"] .info-contact { margin: 20px 0; padding: 18px 24px; border: 0; border-radius: 20px; background: var(--q-lav); box-shadow: 0 5px 0 var(--q-lav-o); }
  html[data-theme="quiz"] .info-etat { padding: 10px 24px; border: 0; border-radius: 18px; background: var(--q-lav); color: var(--q-encre); box-shadow: 0 5px 0 var(--q-lav-o); font-weight: 900; }

  /* le bas de page : « ⬅ Accueil » en bouton principal (vert), l'autre lien en lavande (BASE) */
  html[data-theme="quiz"] .info .info-pied { gap: 18px; margin: 34px 0 0; }
  html[data-theme="quiz"] .info .info-pied .btn:first-child { --bg: var(--q-vert); --sh: var(--q-vert-o); --fg: #fff; }

  /* ======================= guide.html : la coquille seulement ======================= */
  /* la bande de titre : kicker, h1, phrase, pastilles, boutons, date de vérification ; tout reprend la couleur du texte de la bande (encre sur le ciel) */
  html[data-theme="quiz"] .g-hero { margin: 30px auto 36px; padding: 32px 44px 36px; gap: 40px; border-radius: 28px; box-shadow: 0 7px 0 var(--rub-o, var(--q-ombre)); }
  html[data-theme="quiz"] .g-hero .g-kicker { color: inherit; font-size: 16px; font-weight: 900; letter-spacing: .6px; margin-bottom: 8px; }
  html[data-theme="quiz"] .g-hero h1 { margin-bottom: 14px; }
  html[data-theme="quiz"] .g-hero .g-lead { color: inherit; font-size: 20px; line-height: 1.5; }
  html[data-theme="quiz"] .g-hero .g-facts { gap: 10px; margin: 20px 0 8px; }
  html[data-theme="quiz"] .g-hero .g-actions { gap: 14px; margin-top: 18px; }
  html[data-theme="quiz"] .g-hero .g-actions .btn { min-height: 50px; padding: 8px 20px; }
  html[data-theme="quiz"] .g-hero .g-maj { color: inherit; font-size: 15px; line-height: 1.45; margin-top: 18px; }
  html[data-theme="quiz"] .g-layout { gap: 40px; }
}

/* ---------- Défauts mesurés avec les aides du panneau « Mes réglages » (déjà là avant le thème ; réparés ici sans toucher au corps du guide) ----------
   - une adresse longue (formulaire.defenseurdesdroits.fr) ou un bloc de code ne font plus défiler la page de côté (375 px, lettres espacées ou texte grand) ;
   - les étapes numérotées du guide (.g-steps, une grille) ne s'élargissent plus à la largeur de leur plus long mot (118 px de trop à 375 px avec « texte très grand ») ;
   - « Couleurs très contrastées » : les liens bleus du guide (6,5:1), les totaux des mondes (texte blanc sur fond translucide) et les pastilles de niveau passent à 7:1 au moins. */
html[data-theme="quiz"] .info :is(a, h1, h2, h3) { overflow-wrap: anywhere; }   /* (titres : « accessibilité » en « texte très grand » sur 320 px ; ne coupe un mot que s'il ne tient pas sur sa ligne) */
html[data-theme="quiz"] .g-steps { grid-template-columns: minmax(0, 1fr); }
html[data-theme="quiz"] :is(.g-main code, .g-main a, .g-toc a) { overflow-wrap: anywhere; }
html[data-theme="quiz"] .g-main :is(li, p) { overflow-wrap: break-word; }   /* (un long mot gras dans une liste étroite, 320 px avec « texte très grand » : ne coupe que si ça déborde) */
html[data-theme="quiz"].aff-contraste :is(.g-main, .g-src) a:not(.g-act) { color: #003a8c; }
html[data-theme="quiz"].aff-contraste .g-monde-h .tot { background: #000; }
html[data-theme="quiz"].aff-contraste .g-niv-dot { background: color-mix(in srgb, var(--c-plein, var(--c)) 62%, #000); }

/* ---------- Guide à 360 et 320 px (défaut d'avant le thème : 6 px de défilement de côté à 360 px) ----------
   Les grilles de fiches (.g-cards, 290 px) et de séances (.g-sessions, 330 px) imposent une colonne plus large que l'écran. min(…, 100%) : sur un écran large
   le résultat est le même qu'avant ; sur un écran plus étroit que la colonne, elle prend la largeur disponible. Écran seulement (l'impression a ses propres colonnes). */
@media screen {
  html[data-theme="quiz"] .g-cards { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
  html[data-theme="quiz"] .g-sessions { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }
}

/* ---------- Taille du texte (aides « Texte plus grand » et « Texte très grand ») ----------
   Le cœur ne change que la taille du texte de <body> (20 px, 18 px sous 700 px ; 23 ou 26 px avec l'aide). info.css écrit toutes ses tailles en px :
   rien ne grandissait sur ces pages. Ici les mêmes tailles en em (« N px » devient calc(Nem / --info-ref)) : sans aide le résultat est celui d'avant,
   avec une aide tout suit le <body>. --info-ref = la taille du <body> sans aide (celle du cœur : à changer ici si le cœur la change).
   Écran seulement : l'impression garde les px d'info.css. Pas de cascade d'em : chaque élément ci-dessous a pour parent un élément à la taille du <body>,
   sauf .info-etat (dans un p de 19 px : 22 ÷ 19), ::before (÷ 20) et les cases du tableau (÷ 18). */
@media screen {
  html[data-theme="quiz"] { --info-ref: 20; }
  html[data-theme="quiz"] .info h1 { font-size: clamp(calc(32em / var(--info-ref)), 5vw, calc(52em / var(--info-ref))); }
  html[data-theme="quiz"] .info-carte > h2 { font-size: clamp(calc(26em / var(--info-ref)), 3.6vw, calc(38em / var(--info-ref))); }
  html[data-theme="quiz"] .info-carte h3 { font-size: calc(24em / var(--info-ref)); }
  html[data-theme="quiz"] .info-intro { font-size: calc(22em / var(--info-ref)); }
  html[data-theme="quiz"] .info-carte p, html[data-theme="quiz"] .info-liste { font-size: calc(19em / var(--info-ref)); }
  html[data-theme="quiz"] .info-phrases .t { font-size: calc(24em / var(--info-ref)); }
  html[data-theme="quiz"] .info-tableau { font-size: calc(18em / var(--info-ref)); }              /* (th et td en héritent) */
  html[data-theme="quiz"] .info-tableau caption { font-size: calc(20em / 18); }
  html[data-theme="quiz"] .info-tableau thead th { font-size: inherit; }
  html[data-theme="quiz"] .info-tableau td small { font-size: calc(16em / 18); }
  html[data-theme="quiz"] .info-etapes li { font-size: calc(20em / var(--info-ref)); }
  html[data-theme="quiz"] .info-etapes li::before { font-size: 1.1em; }                         /* 22 px */
  html[data-theme="quiz"] .info-contact { font-size: calc(20em / var(--info-ref)); }
  html[data-theme="quiz"] .info-etat { font-size: calc(22em / 19); }
}
@media screen and (max-width: 700px) { html[data-theme="quiz"] { --info-ref: 18; } }

/* ======================= Téléphone ======================= */
@media screen and (max-width: 760px) {
  html[data-theme="quiz"] .info { --info-gap: 26px; }
  html[data-theme="quiz"] .info > .qz-entete { margin: 20px 0 var(--info-gap); padding: 22px 20px 26px; border-radius: 24px; }
  html[data-theme="quiz"] .info-sommaire { gap: 14px; }
  html[data-theme="quiz"] .info .info-sommaire a { flex: 1 1 calc(50% - 8px); justify-content: center; text-align: center; padding: 10px 14px; font-size: calc(19em / var(--info-ref)); }
  html[data-theme="quiz"] .info-carte { padding: 24px 16px 28px; }
  html[data-theme="quiz"] .info-carte > h2.qz-titre { padding: 6px 18px; margin-bottom: 16px; }
  html[data-theme="quiz"] .info-phrases { gap: 12px; }
  html[data-theme="quiz"] .info-phrases li { gap: 10px; padding: 12px 12px; }
  html[data-theme="quiz"] .info-etapes li { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; }
  html[data-theme="quiz"] .info-etapes li::before { width: 44px; height: 44px; }
  html[data-theme="quiz"] .info-etat { max-width: 100%; overflow-wrap: anywhere; }   /* (« Partiellement conforme » avec « texte très grand » sur un écran de 320 px) */
  html[data-theme="quiz"] .info-intro { font-size: calc(20em / var(--info-ref)); }
  html[data-theme="quiz"] .info-phrases .t { font-size: calc(21em / var(--info-ref)); }
  html[data-theme="quiz"] .info-tableau td::before { font-size: calc(15em / 18); }
}
@media screen and (max-width: 700px) {
  html[data-theme="quiz"] .g-hero { margin: 20px auto 26px; padding: 24px 20px 28px; gap: 18px; border-radius: 24px; }
  html[data-theme="quiz"] .g-hero .g-lead { font-size: 18px; }
  html[data-theme="quiz"] .g-layout { gap: 26px; }
}

/* ======================= Impression : comme avant (page blanche, ni bande, ni pastille, ni arête) =======================
   La BASE rend déjà le texte des bandes et des pastilles noir, sans fond ni ombre ; ici seulement la géométrie qu'elle leur donne (padding, marge, arrondi),
   et le cadre noir des cartes (la BASE met le contour de .card transparent). */
@media print {
  html[data-theme="quiz"] .info-carte { border: 1px solid #000; }
  html[data-theme="quiz"] .info > .qz-entete { padding: 0; margin: 0; border-radius: 0; }
  html[data-theme="quiz"] .info > .qz-entete > :last-child { margin-bottom: 14px; }
  html[data-theme="quiz"] .info-carte > h2.qz-titre { display: flex; padding: 0; margin: 0 0 6px; border-radius: 0; }
  html[data-theme="quiz"] .g-hero.qz-entete { padding: 0 0 18px; margin: 0 auto; border-radius: 0; }
}