/* ============================================================================
   PAGES DE CONTENU — LE THEME SOMBRE          18/09/2026
   Blog (2 pages) et Coloriages (14 pages) : seize pages nees du meme moule, qui vivaient encore sur la palette
   KRAFT ABANDONNEE (--terracotta #e2725b, --charbon #2b353e, --fond #F5F5F5) que la charte liste comme morte.

   POURQUOI UNE FEUILLE ET PAS SEIZE BLOCS COLLES : le fondateur a ecrit noir sur blanc dans CLAUDE.md que « des
   couches et des surcouches s accumulent au fil des agents ». Seize copies d une meme couleur, c est seize endroits
   ou la corriger. Ici, une seule. Une couleur est decidee par UNE ligne.

   CE QU ELLE NE TOUCHE PAS, ET C EST LE POINT IMPORTANT :
   `.page-imprimable` reste BLANCHE, a l encre. C est une feuille destinee au PAPIER — l enfant l imprime et la
   colorie. Elle n a aucune raison de suivre l ecran, et l assombrir couterait de l encre a l impression pour rien.
   Meme famille de decision que les champs de saisie de Contact et le magasin de la Boutique : une surface qui a un
   METIER garde l allure de son metier.

   Elle est lue APRES commun.css et AVANT le style propre de chaque page, mais APRES rien du tout du cote du
   panneau de controle : celui-ci ecrit sa feuille en dernier. D ou les `!important` la ou il repeint.
   POUR REVENIR : retirer le lien vers ce fichier dans les seize pages.
   ============================================================================ */

html.qz-fond-sombre{
  --qzc-fond:#1e2b35;        /* le fond de page : le navy de marque */
  --qzc-carte:#33434f;       /* navy 2 — la carte, 1,42 contre le fond : un panneau, pas une surface lumineuse */
  --qzc-texte:#dedede;       /* 10,75 sur le fond ; 7,59 sur une carte */
  --qzc-second:#b6c0c8;      /* le secondaire : 7,83 sur le fond ; 5,53 sur une carte */
  --qzc-orange-ecrit:#ff9147;/* l orange ECRIT : meme teinte 24 deg, saturation a 100 %. Sur fond sombre on
                                eclaircit en SATURANT, jamais en blanchissant. 6,47 sur le fond. */
  --qzc-orange:#d96c2f;      /* l orange de marque : pour les surfaces et les traits, jamais pour ecrire */
  --qzc-encre:#10181f;       /* ce qu on pose SUR l orange (5,23) ou sur le gris (13,31) */
  --qzc-gris:#dedede;
  --qzc-filet:#dedede26;
}

/* ===== Le fond, commun aux seize. Le panneau pose le sien : il faut etre plus precis que lui. ===== */
html.qz-fond-sombre body{ background:var(--qzc-fond) !important; color:var(--qzc-texte) !important; }
html.qz-fond-sombre body h1,
html.qz-fond-sombre body h2,
html.qz-fond-sombre body h3{ color:var(--qzc-texte) !important; }

/* Le surtitre portait la terracotta morte. En petit texte l orange de marque ne vaut que 4,23 sur ce navy :
   il prend sa forme ECRITE. */
html.qz-fond-sombre body .eyebrow{ color:var(--qzc-orange-ecrit) !important; }
html.qz-fond-sombre body .blk p.lead{ color:var(--qzc-texte) !important; }

/* ===== BLOG ===== */
html.qz-fond-sombre body .blog-entete p{ color:var(--qzc-second) !important; }
html.qz-fond-sombre body .blog-carte{
  background:var(--qzc-carte) !important; border-color:var(--qzc-filet) !important; color:var(--qzc-texte) !important;
}
html.qz-fond-sombre body .blog-carte p{ color:var(--qzc-second) !important; }
html.qz-fond-sombre body .blog-carte .date,
html.qz-fond-sombre body .blog-article .date{ color:var(--qzc-orange-ecrit) !important; }
html.qz-fond-sombre body .blog-carte img{ background:var(--qzc-fond) !important; }
html.qz-fond-sombre body .blog-vide{ color:var(--qzc-second) !important; }
html.qz-fond-sombre body .blog-article img.couverture{ background:var(--qzc-fond) !important; }
html.qz-fond-sombre body .blog-article .contenu a{ color:var(--qzc-orange-ecrit) !important; }
html.qz-fond-sombre body .blog-article .retour{ color:var(--qzc-texte) !important; }
html.qz-fond-sombre body .blog-article .retour:hover{ color:var(--qzc-orange-ecrit) !important; }

/* ===== COLORIAGES — la bibliotheque ===== */
html.qz-fond-sombre body .carte-lib{
  background:var(--qzc-carte) !important; border-color:var(--qzc-filet) !important; color:var(--qzc-texte) !important;
}
html.qz-fond-sombre body .carte-lib-diff{ color:var(--qzc-second) !important; }

/* ===== COLORIAGES — une page de coloriage ===== */
html.qz-fond-sombre body .fil,
html.qz-fond-sombre body .fil a{ color:var(--qzc-second) !important; }
html.qz-fond-sombre body .fil a:hover{ color:var(--qzc-orange-ecrit) !important; }

/* La pastille de difficulte etait en creme #F2EEDF, un jeton mort. Elle reprend la pastille grise du site. */
html.qz-fond-sombre body .badge-diff{ background:var(--qzc-gris) !important; color:var(--qzc-encre) !important; }

/* « Imprimer ce coloriage » : c est L ACTION de la page. Il etait navy sur fond clair — sur le navy il
   disparaitrait purement et simplement. Il prend l orange de marque et l encre, comme les boutons de l accueil. */
html.qz-fond-sombre body .btn-imprimer{ background:var(--qzc-orange) !important; color:var(--qzc-encre) !important; }
html.qz-fond-sombre body .btn-imprimer:hover{ background:#df824e !important; }

/* Le rappel boutique etait une carte navy posee sur une page claire. Sur une page navy elle se confondrait avec
   le fond : elle passe en navy 2, comme toutes les cartes du site. */
html.qz-fond-sombre body .cta-boutique{ background:var(--qzc-carte) !important; }
html.qz-fond-sombre body .cta-boutique h2{ color:var(--qzc-texte) !important; }
html.qz-fond-sombre body .cta-boutique p{ color:var(--qzc-second) !important; }   /* etait un beige kraft */
html.qz-fond-sombre body .cta-boutique-btn{ background:var(--qzc-orange) !important; color:var(--qzc-encre) !important; }
html.qz-fond-sombre body .cta-boutique-btn:hover{ background:#df824e !important; }

/* Les autres coloriages, en bas de page. */
html.qz-fond-sombre body .carte-autre span{ color:var(--qzc-texte) !important; }
html.qz-fond-sombre body .carte-autre:hover span{ color:var(--qzc-orange-ecrit) !important; }
html.qz-fond-sombre body .carte-autre img{ border-color:var(--qzc-filet) !important; }

/* ===== LA FEUILLE A IMPRIMER — on n y touche pas, et on l ecrit pour que personne n y touche plus tard. =====
   Elle est blanche a l encre parce qu elle finit sur du PAPIER. Sa legende, sa grille, son en-tete et sa baseline
   vivent dedans et gardent leurs couleurs d origine. Aucune regle de cette feuille ne la vise ; cette ligne est la
   pour l affirmer, pas pour corriger quoi que ce soit. */

/* ===== 18/09, rattrapage : LA FEUILLE ANCRE SON PROPRE TEXTE =====
   J ai ecrit plus haut qu aucune regle ne visait la feuille a imprimer, et c etait vrai — mais faux en pratique.
   Elle ne fixait que son FOND blanc ; sa legende, son titre et ses numeros HERITAIENT la couleur du corps de page,
   que je venais de passer en gris clair. Resultat : gris sur blanc, 1,35, dans la partie qui finit sur du papier.
   La lecon est celle de l accueil, prise par l autre bout : changer une couleur de TEXTE oblige a regarder toutes
   les surfaces qui l heritent. Une surface qui garde son fond doit aussi ancrer son encre. */
html.qz-fond-sombre body .page-imprimable,
html.qz-fond-sombre body .page-imprimable h2,
html.qz-fond-sombre body .page-imprimable .nom,
html.qz-fond-sombre body .page-imprimable .num,
html.qz-fond-sombre body .page-imprimable .titre-grand-c,
html.qz-fond-sombre body .page-imprimable .wordmark-c{ color:#10181f !important; }

/* Deux valeurs de la feuille imprimee etaient DEJA sous le seuil avant aujourd hui, et elles s impriment :
   la baseline portait la terracotta morte (3,09 sur blanc) et l adresse un gris trop clair (3,15). Elles passent
   aux valeurs de la charte — l orange ECRIT sur fond clair, et un gris qui tient. Cela change ce qui sort de
   l imprimante, en mieux. */
html.qz-fond-sombre body .page-imprimable .baseline-c{ color:#9c4514 !important; }   /* 5,6 sur blanc */
html.qz-fond-sombre body .page-imprimable .url-c{ color:#5a6672 !important; }        /* 5,87 sur blanc */

/* ============================================================================
   LES DEUX GUIDES                                18/09/2026
   `quadreti-guide-interactif.html` et `quadreti-guide-codification.html`.
   Ils etaient deja sur la palette du site (navy, gris, orange), mais en CLAIR. Le fondateur a tranche la seule
   question qui valait d etre posee : « utilise navy 2 pour creer la grille ». Les tesselles des schemas ne
   descendent donc pas au fond de page — elles restent des OBJETS POSES DESSUS.

   POURQUOI LES DEUX GUIDES NE RECOIVENT PAS LE MEME TRAITEMENT :
   — Le guide INTERACTIF est une maquette de L APPLICATION. L app est passee au navy en septembre : ses panneaux
     blancs deviennent donc des cartes navy 2. Le montrer clair serait montrer une app qui n existe plus.
   — Le guide de CODIFICATION illustre le PRODUIT PHYSIQUE : des visuels imprimes, le dos d une tesselle, des
     pochettes. Ses surfaces claires sont du papier et du plastique, pas de l interface. Elles RESTENT CLAIRES,
     pour la meme raison que la feuille a imprimer des coloriages : une surface qui a un metier garde l allure
     de son metier. Les assombrir ne serait pas une harmonisation, ce serait une erreur de description.

   UN PIEGE RENCONTRE POUR LA TROISIEME FOIS AUJOURD HUI : `--encre` sert ici a DEUX choses — la couleur du texte,
   et le fond des surfaces sombres (le cadre des grilles, l onglet actif, le bouton suivant). Le renommer touche
   vingt-cinq regles. Il garde donc sa valeur — elle reste juste dans ses deux roles — et ce sont les TEXTES qui
   basculent, un par un, la ou ils se retrouvent sur du sombre. Voir la meme lecon dans Mon Espace.
   ============================================================================ */

/* ----- Ce qui vaut pour les deux ----- */
html.qz-fond-sombre body.qz-guide{
  --fond:#1e2b35;          /* le fond de page */
  --tesselle:#33434f;      /* navy 2 : LA GRILLE, decision du fondateur */
  --bord:#dedede26;
  --encre-douce:#b6c0c8;   /* 7,83 sur le fond */
}
html.qz-fond-sombre body.qz-guide{ background:var(--fond) !important; color:#dedede !important; }
html.qz-fond-sombre body.qz-guide h1,
html.qz-fond-sombre body.qz-guide h2,
html.qz-fond-sombre body.qz-guide h3{ color:#dedede !important; }

/* La grille et le mur : les tesselles passent en navy 2. Le cadre reste navy — les interstices dessinent donc
   la grille sans qu on ait besoin d un trait. */
html.qz-fond-sombre body.qz-guide .grid7 i,
html.qz-fond-sombre body.qz-guide .murgrille i{ background:var(--tesselle) !important; }
/* Effet de bord utile : `.grid7 i.k` valait DEJA #dedede, exactement comme la tesselle par defaut — les deux
   etaient donc indistinguables depuis toujours. Maintenant que le defaut est navy 2, la difference se voit. */

/* ----- Le guide INTERACTIF : maquette de l app, donc cartes navy 2 ----- */
html.qz-fond-sombre body.qz-guide-app{ --blanc:#33434f; --gris-doux:#33434f; --second-doux:#3b4d5c; }
html.qz-fond-sombre body.qz-guide-app header p b,
html.qz-fond-sombre body.qz-guide-app footer.guide-foot .sig,
html.qz-fond-sombre body.qz-guide-app .tilenav .cell,
html.qz-fond-sombre body.qz-guide-app .pop-nav button{ color:#dedede !important; }
/* Les etats ACTIFS gardent leur fond navy et leur texte clair : ils restent lisibles tels quels. */

/* ----- Le guide de CODIFICATION : le produit physique reste clair, et ancre son encre -----
   Meme correctif que la feuille a imprimer des coloriages : ces surfaces ne fixaient que leur FOND, leur texte
   heritait du corps de page que je viens de passer en clair. Elles ancrent desormais leur propre encre. */
html.qz-fond-sombre body.qz-guide-produit .visuel,
html.qz-fond-sombre body.qz-guide-produit .visuel-verso,
html.qz-fond-sombre body.qz-guide-produit .visuel-mini,
html.qz-fond-sombre body.qz-guide-produit .pochettes,
html.qz-fond-sombre body.qz-guide-produit .mur,
html.qz-fond-sombre body.qz-guide-produit .decompo,
html.qz-fond-sombre body.qz-guide-produit .lecture,
html.qz-fond-sombre body.qz-guide-produit .legende,
html.qz-fond-sombre body.qz-guide-produit .quiz{ color:var(--encre) !important; }

/* ----- 18/09, mesure : quatre familles du guide de l app restaient ecrites pour un fond clair -----
   Elles avaient toutes la meme cause : leur SURFACE a change (les panneaux blancs sont devenus navy 2), pas leur
   texte. C est, pour la quatrieme fois aujourd hui, la meme lecon — changer un fond oblige a regarder tout ce qui
   est pose dessus. */
html.qz-fond-sombre body.qz-guide-app .mockbtn{ color:#dedede !important; }                    /* etait navy : 1,42 */
html.qz-fond-sombre body.qz-guide-app .scene-tabs button{ color:#b6c0c8 !important; }          /* etait #6a727b : 2,09 */
html.qz-fond-sombre body.qz-guide-app .scene-tabs button.on{ color:#dedede !important; }
/* Les pastilles numerotees du SECOND reperage etaient navy a l encre — 1,24. Elles prennent la pastille grise du
   site : 13,31. Les deux familles restent distinctes (orange = premier reperage, gris = second), et lisibles. */
html.qz-fond-sombre body.qz-guide-app .hot.second{ background:#dedede !important; box-shadow:0 3px 10px rgba(0,0,0,.45) !important; }
/* La signature du pied : l orange de marque ne vaut que 4,23 en petit texte sur le navy. Forme ECRITE. */
html.qz-fond-sombre body.qz-guide-app footer.guide-foot .sig span{ color:#ff9147 !important; }

/* ----- 18/09 : LE GUIDE DE CODIFICATION, repris. Je m etais trompe sur sa structure. -----
   Je l avais lu comme une page claire portant des cartes. C est en realite une SUITE DE SECTIONS PLEINE LARGEUR
   en clair. Passer le fond de page au navy n a donc rien fait : les sections sont restees blanches, et le texte,
   lui, avait bascule en clair. Vingt et une familles illisibles.
   Le partage est net, et deux regles suffisent a le poser : `section.ecran` et `header.hero` SONT la page, elles
   passent au sombre. Tout le reste de ce qui est clair ici — le dos d un visuel, une pochette, une page d album,
   une planche de reperage — EST le produit physique, en papier et en plastique. Ca reste clair, et ca ancre son
   encre, exactement comme la feuille a imprimer des coloriages. */
html.qz-fond-sombre body.qz-guide-produit section.ecran{ background:#1e2b35 !important; }
html.qz-fond-sombre body.qz-guide-produit header.hero{ background:#33434f !important; }

/* Ce qui est pose sur le PRODUIT garde son encre. */
html.qz-fond-sombre body.qz-guide-produit .album-page,
html.qz-fond-sombre body.qz-guide-produit .album-page *,
html.qz-fond-sombre body.qz-guide-produit .onglet.actif{ color:#5a6672 !important; }
html.qz-fond-sombre body.qz-guide-produit .album-page .page-titre b{ color:#10181f !important; }

/* Ce qui etait ecrit en navy et se retrouve sur le navy. */
html.qz-fond-sombre body.qz-guide-produit .decompo .bloc.b1 .big,
html.qz-fond-sombre body.qz-guide-produit .gestes .geste .num,
html.qz-fond-sombre body.qz-guide-produit .question .q-txt .code-c,
html.qz-fond-sombre body.qz-guide-produit .onglets .onglet{ color:#dedede !important; }

/* L orange de marque pose sur du CLAIR ne vaut que 2,54. Sur clair, l orange qui s ecrit est #9C4514 : 5,6. */
html.qz-fond-sombre body.qz-guide-produit .visuel-verso .code-position,
html.qz-fond-sombre body.qz-guide-produit .visuel-mini .t,
html.qz-fond-sombre body.qz-guide-produit .mini-bn .mcell.mhit{ color:#9c4514 !important; }
/* Sur du SOMBRE, c est l inverse : l orange de marque n y vaut que 4,23, il prend sa forme ecrite #ff9147. */
html.qz-fond-sombre body.qz-guide-produit .bn-caption span.t{ color:#ff9147 !important; }

/* ----- 18/09, deuxieme passe : sept familles encore ecrites en navy, desormais posees sur du navy.
   Toutes sont des LEGENDES de schema (le tag de section, les reperes A1/B2 de la planche, les axes du mur,
   la lettre de lecture). Elles accompagnent le produit mais ne sont pas dessus : elles sont sur la page. */
html.qz-fond-sombre body.qz-guide-produit .ecran-tag,
html.qz-fond-sombre body.qz-guide-produit .bn .lbl,
html.qz-fond-sombre body.qz-guide-produit .bn-caption b,
html.qz-fond-sombre body.qz-guide-produit .mur-detail .axe,
html.qz-fond-sombre body.qz-guide-produit .lecture .lc{ color:#dedede !important; }

/* L onglet ACTIF, lui, a un fond clair : son texte redescend a l encre. Ecrit APRES la regle des onglets, et
   plus precis qu elle — sinon la regle generale, posee plus haut, le repeindrait en clair. */
html.qz-fond-sombre body.qz-guide-produit .onglets .onglet.actif{ color:#10181f !important; }

/* Le separateur du dos de visuel est une marque IMPRIMEE sur du papier clair : il reste sombre.
   CORRIGE : je lui avais aussi donne un FOND. C est un point median de TEXTE, le « · » entre B2 et D5 — pas une
   pastille. Un fond en faisait un petit bloc d encre de 5 sur 13 pixels. Regarder ce qu est reellement un element
   avant de lui poser une surface. */
html.qz-fond-sombre body.qz-guide-produit .visuel-verso .dot{ color:#10181f !important; }
/* Le bouton PRINCIPAL est pose sur l orange : ma regle sur .mockbtn l a repeint en gris clair — 2,54.

   Une regle large attrape toujours un cas qu on n avait pas en tete. Il reprend l encre : 5,23. */

html.qz-fond-sombre body.qz-guide-app .mockbtn.primary{ color:#10181f !important; }

/* ----- 18/09 : la FAQ des guides. Ses questions sont ecrites en --encre, qui garde sa valeur navy (voir plus

   haut : ce jeton sert aussi de surface sombre). Posees sur le fond de page devenu navy, elles valaient 1.

   Le survol, lui, garde son orange fonce pensе pour du clair : il bascule aussi. */

html.qz-fond-sombre body.qz-guide .faq summary{ color:#dedede !important; }

html.qz-fond-sombre body.qz-guide .faq summary:hover{ color:#ff9147 !important; }