/* La seule police ajoutée par un thème : l'italique d'Instrument Serif,
   pour le mot mis en valeur du thème « porcelaine ». Un @import doit
   précéder toute règle : il reste donc tout en haut du fichier. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

/* CE QUI EST CACHÉ RESTE CACHÉ (25 septembre 2026). Un élément marqué
   « hidden » réapparaissait dès que sa classe lui donnait un affichage
   (display:flex) : sur la page de dépôt, le bloc de copier-coller pour
   Claude et l'en-tête « ·· — se déconnecter » se montraient avant l'heure.
   Cette règle, valable pour tout le site, rétablit le sens de « hidden ». */
[hidden]{display:none !important}

/* =====================================================================
   CDMP — SYSTÈME DE THÈMES (fichier commun à tout le site)
   ---------------------------------------------------------------------
   À charger APRÈS le <style> de chaque page : les règles d'ici doivent
   pouvoir remplacer les couleurs écrites en dur dans les pages.

   Comment ça marche ?
   L'attribut « data-theme » est posé sur la balise <html> par le script
   cdmp-themes.js. Chaque thème redéfinit une palette complète : non
   seulement les 3 couleurs d'accent, mais AUSSI le fond, les halos, les
   étoiles et le texte. C'est ce qui rend les ambiances vraiment
   différentes les unes des autres.

   Pour ajouter un thème : copier un bloc ci-dessous, changer les
   couleurs, puis ajouter la vignette dans cdmp-themes.js (liste THEMES).
   ===================================================================== */

/* =====================================================================
   1. ARDOISE — thème par défaut. Sobre, neutre, professionnel.
   C'est ce que voit un nouveau visiteur : calme, sans esbroufe.
   ===================================================================== */
:root,
html[data-theme="ardoise"]{
  --bleu:#5B8DEF; --violet:#7B87B8; --teal:#4EC5B5; --soleil:#E8B45C; --rose:#D98BA8;
  --nuit:#0A0D13; --texte:#E7ECF5; --doux:#98A4BA;
  --fond-grad:radial-gradient(130% 90% at 50% -15%,#1a2130 0%,#11151f 52%,#070910 100%);
  --voile-grad:linear-gradient(180deg,rgba(10,13,19,.30),rgba(10,13,19,.60));
  --verre:rgba(255,255,255,.05); --verre-fort:rgba(255,255,255,.09);
  --bord:rgba(255,255,255,.13); --bord-clair:rgba(255,255,255,.26);
  --halo-op:.24; --halo-blend:screen; --etoiles-op:.18;
  --marque-grad:linear-gradient(100deg,#fff 10%,#9FB6E8 60%,#B9C4DC);
  --grille-a:rgba(91,141,239,.26); --grille-b:rgba(123,135,184,.20);
  --ombre:0 30px 70px rgba(2,4,10,.6); --ombre-douce:0 14px 38px rgba(2,4,10,.45);
  /* galaxie 3D de la page d'accueil */
  --gx-fond:#080b12; --gx-fog:#0b0f18; --gx-int:#dfe6f5; --gx-mid:#8fa4cc; --gx-ext:#5b8def; --gx-coeur:#eaf0ff;
  --carte-a:#1b2231e0; --carte-b:#131824e6;
  --promo:#FF5A5F; --promo-2:#D91E4A;
  --promo-txt:#FF8085;
}

/* =====================================================================
   2. GALAXIE — l'ambiance spatiale d'origine. Violet, bleu, cosmos.
   ===================================================================== */
html[data-theme="galaxie"]{
  --bleu:#4F7CFF; --violet:#8B5CF6; --teal:#2DD4BF; --soleil:#FFC24B; --rose:#FF6FC7;
  --nuit:#070b18; --texte:#EAF0FF; --doux:#9FB0D6;
  --fond-grad:radial-gradient(130% 90% at 50% -15%,#13204d 0%,#0a1024 52%,#05070f 100%);
  --voile-grad:linear-gradient(180deg,rgba(7,11,24,.30),rgba(7,11,24,.55));
  --verre:rgba(255,255,255,.055); --verre-fort:rgba(255,255,255,.10);
  --bord:rgba(255,255,255,.14); --bord-clair:rgba(255,255,255,.30);
  --halo-op:.5; --halo-blend:screen; --etoiles-op:.6;
  --marque-grad:linear-gradient(100deg,#fff 10%,#2DD4BF 60%,#8B5CF6);
  --grille-a:rgba(79,124,255,.45); --grille-b:rgba(139,92,246,.35);
  --ombre:0 30px 70px rgba(2,5,16,.6); --ombre-douce:0 14px 38px rgba(2,5,16,.45);
  --gx-fond:#05060f; --gx-fog:#06081a; --gx-int:#ffe2b0; --gx-mid:#c88bff; --gx-ext:#4f8bff; --gx-coeur:#fff0d6;
  --carte-a:#161e3ad1; --carte-b:#0c1126db;
  --promo:#FF4D8D; --promo-2:#C026D3;
  --promo-txt:#FF7FB0;
}

/* =====================================================================
   3. CAFÉ — l'ambiance café de quartier : bois, torréfaction, crème.
   ===================================================================== */
html[data-theme="cafe"]{
  /* violet éclairci : #B4643C tombait à 4,4:1 sur ce fond très sombre */
  --bleu:#D99A5B; --violet:#C9754B; --teal:#E8C89A; --soleil:#F0B860; --rose:#C77E63;
  --nuit:#150E09; --texte:#F7EDE0; --doux:#C3A78B;
  --fond-grad:radial-gradient(130% 90% at 50% -15%,#4a3324 0%,#2a1c13 52%,#130c07 100%);
  /* Voile renforcé : la tasse du décor 3D est beige clair, et le texte
     gris passait dessus sans se détacher. Le voile uniformise le fond
     sous le texte sans effacer le décor. */
  --voile-grad:linear-gradient(180deg,rgba(21,14,9,.52),rgba(21,14,9,.74));
  --verre:rgba(255,240,220,.08); --verre-fort:rgba(255,240,220,.15);
  --bord:rgba(255,225,190,.17); --bord-clair:rgba(255,225,190,.34);
  --halo-op:.40; --halo-blend:screen; --etoiles-op:.10;
  --marque-grad:linear-gradient(100deg,#FFF3E2 10%,#E8C89A 60%,#D99A5B);
  --grille-a:rgba(217,154,91,.30); --grille-b:rgba(180,100,60,.24);
  --ombre:0 30px 70px rgba(12,7,3,.62); --ombre-douce:0 14px 38px rgba(12,7,3,.48);
  --gx-fond:#130c07; --gx-fog:#1c120b; --gx-int:#FFE7C4; --gx-mid:#D99A5B; --gx-ext:#8a4f2d; --gx-coeur:#FFF0DC;
  --carte-a:#3a2718d6; --carte-b:#241710e0;
  --promo:#E8722B; --promo-2:#B03A17;
  --promo-txt:#F5A15E;
}

/* =====================================================================
   4. FORÊT — sous-bois, mousse, lumière filtrée dans les feuilles.
   ===================================================================== */
html[data-theme="foret"]{
  --bleu:#4ADE80; --violet:#1F9D6B; --teal:#A3E635; --soleil:#D9E85C; --rose:#7DD3A0;
  --nuit:#050D08; --texte:#E9F7EC; --doux:#9CC0A7;
  --fond-grad:radial-gradient(130% 90% at 50% -15%,#1a4128 0%,#0e2416 52%,#040b07 100%);
  --voile-grad:linear-gradient(180deg,rgba(5,13,8,.28),rgba(5,13,8,.58));
  --verre:rgba(230,255,235,.05); --verre-fort:rgba(230,255,235,.10);
  --bord:rgba(200,255,215,.16); --bord-clair:rgba(200,255,215,.32);
  --halo-op:.38; --halo-blend:screen; --etoiles-op:.16;
  --marque-grad:linear-gradient(100deg,#F0FFF4 10%,#A3E635 60%,#22A06B);
  --grille-a:rgba(74,222,128,.28); --grille-b:rgba(163,230,53,.22);
  --ombre:0 30px 70px rgba(2,10,5,.6); --ombre-douce:0 14px 38px rgba(2,10,5,.45);
  --gx-fond:#040b07; --gx-fog:#08160d; --gx-int:#EBFFD6; --gx-mid:#A3E635; --gx-ext:#1F9D6B; --gx-coeur:#F2FFE4;
  --carte-a:#12351fd6; --carte-b:#0a1d11e0;
  --promo:#D9600F; --promo-2:#B01818;
  --promo-txt:#FFA35C;
}

/* =====================================================================
   5. OCÉAN — pleine mer, lumière qui descend dans le bleu profond.
   ===================================================================== */
html[data-theme="ocean"]{
  /* violet éclairci : #3B6EE8 tombait à 4,3:1 sur ce fond très sombre */
  --bleu:#38BDF8; --violet:#5C8BF5; --teal:#22D3EE; --soleil:#7DE0E8; --rose:#5AA9F0;
  --nuit:#020A12; --texte:#E6F5FF; --doux:#8FB6CE;
  --fond-grad:radial-gradient(130% 90% at 50% -15%,#0c3f5e 0%,#052335 52%,#010a12 100%);
  --voile-grad:linear-gradient(180deg,rgba(2,10,18,.26),rgba(2,10,18,.58));
  --verre:rgba(220,245,255,.055); --verre-fort:rgba(220,245,255,.11);
  --bord:rgba(190,235,255,.17); --bord-clair:rgba(190,235,255,.34);
  --halo-op:.44; --halo-blend:screen; --etoiles-op:.20;
  --marque-grad:linear-gradient(100deg,#FFFFFF 10%,#22D3EE 60%,#3B6EE8);
  --grille-a:rgba(56,189,248,.34); --grille-b:rgba(59,110,232,.26);
  --ombre:0 30px 70px rgba(1,8,16,.62); --ombre-douce:0 14px 38px rgba(1,8,16,.46);
  --gx-fond:#010a12; --gx-fog:#03151f; --gx-int:#DFF7FF; --gx-mid:#22D3EE; --gx-ext:#1E5AC0; --gx-coeur:#E8FBFF;
  --carte-a:#0a3247d6; --carte-b:#04202ee0;
  --promo:#D93C4A; --promo-2:#B01238;
  --promo-txt:#FF8C8C;
}

/* =====================================================================
   6. COUCHANT — fin de journée, ciel orange et pourpre.
   ===================================================================== */
html[data-theme="couchant"]{
  --bleu:#FF7A45; --violet:#FF4D8D; --teal:#FFB23F; --soleil:#FFD166; --rose:#FF8FA8;
  --nuit:#14060E; --texte:#FFEFE8; --doux:#D6A3AE;
  --fond-grad:radial-gradient(130% 90% at 50% -15%,#6b2444 0%,#3a1329 52%,#150610 100%);
  --voile-grad:linear-gradient(180deg,rgba(20,6,14,.26),rgba(20,6,14,.58));
  --verre:rgba(255,235,240,.055); --verre-fort:rgba(255,235,240,.11);
  --bord:rgba(255,215,225,.17); --bord-clair:rgba(255,215,225,.34);
  --halo-op:.46; --halo-blend:screen; --etoiles-op:.22;
  --marque-grad:linear-gradient(100deg,#FFF6EE 10%,#FFB23F 60%,#FF4D8D);
  --grille-a:rgba(255,122,69,.32); --grille-b:rgba(255,77,141,.26);
  --ombre:0 30px 70px rgba(16,4,10,.62); --ombre-douce:0 14px 38px rgba(16,4,10,.46);
  --gx-fond:#150610; --gx-fog:#240c1a; --gx-int:#FFE3C4; --gx-mid:#FF7A45; --gx-ext:#B3306B; --gx-coeur:#FFEFD9;
  --carte-a:#4a1a30d6; --carte-b:#2a0f1de0;
  --promo:#7C3AED; --promo-2:#4F46E5;
  --promo-txt:#C4A5FF;
}

/* =====================================================================
   7. CERISIER — printemps, pétales roses, mauve doux.
   ===================================================================== */
html[data-theme="cerisier"]{
  --bleu:#FF8FC7; --violet:#C084FC; --teal:#FDBA9B; --soleil:#FFD4A8; --rose:#FFA8D8;
  --nuit:#120813; --texte:#FFEDF7; --doux:#D0A8C8;
  --fond-grad:radial-gradient(130% 90% at 50% -15%,#57265a 0%,#301340 52%,#12071a 100%);
  --voile-grad:linear-gradient(180deg,rgba(18,8,19,.26),rgba(18,8,19,.58));
  --verre:rgba(255,240,250,.055); --verre-fort:rgba(255,240,250,.11);
  --bord:rgba(255,220,240,.17); --bord-clair:rgba(255,220,240,.34);
  --halo-op:.42; --halo-blend:screen; --etoiles-op:.24;
  --marque-grad:linear-gradient(100deg,#FFFFFF 10%,#FF8FC7 60%,#C084FC);
  --grille-a:rgba(255,143,199,.30); --grille-b:rgba(192,132,252,.24);
  --ombre:0 30px 70px rgba(14,5,16,.6); --ombre-douce:0 14px 38px rgba(14,5,16,.45);
  --gx-fond:#12071a; --gx-fog:#1d0c26; --gx-int:#FFE8F4; --gx-mid:#FF8FC7; --gx-ext:#8B4FD1; --gx-coeur:#FFF0F8;
  --carte-a:#3d1c3ed6; --carte-b:#22112be0;
  --promo:#F43F5E; --promo-2:#BE123C;
  --promo-txt:#FF8098;
}

/* =====================================================================
   8. PAPIER — le seul thème CLAIR. Ambiance cahier, encre et crème.
   Attention : ici le texte devient sombre, le « verre » devient blanc
   et les halos passent en mode « multiply » pour rester visibles.
   ===================================================================== */
html[data-theme="papier"]{
  /* Sur fond crème, le teal d'origine (#0B8578) ne donnait que 4,1:1 —
     sous le seuil lisible, et c'est la couleur des mots en gras du guide.
     Assombri à 5,8:1. Le bleu et le violet sont remontés de la même façon. */
  --bleu:#2F53C4; --violet:#6C3DC0; --teal:#076B60; --soleil:#8A5E08; --rose:#A93069;
  /* --doux était à #5A6580 : 5,3:1 sur ce fond clair, soit tout juste la
     limite lisible. Assombri à 6,7:1, confortable sur papier crème. */
  --nuit:#F6F3EA; --texte:#141A28; --doux:#4A556E;
  --fond-grad:radial-gradient(130% 90% at 50% -15%,#FFFDF7 0%,#F5F2E8 52%,#E8E4D7 100%);
  /* Voile renforcé : le décor 3D de la salle de classe alterne des zones
     très claires (murs) et très sombres (tableau, pupitres). Le texte
     gris disparaissait sur les secondes. */
  --voile-grad:linear-gradient(180deg,rgba(255,253,247,.55),rgba(240,236,225,.72));
  --verre:rgba(255,255,255,.76); --verre-fort:rgba(255,255,255,.90);
  --bord:rgba(20,26,40,.13); --bord-clair:rgba(20,26,40,.26);
  --halo-op:.20; --halo-blend:multiply; --etoiles-op:0;
  --marque-grad:linear-gradient(100deg,#141A28 10%,#3B62D9 60%,#7C4DD1);
  /* Le dégradé des mots mis en valeur dans les titres. Sur les sept
     thèmes sombres il part de bleu pâle et finit en violet pâle, ce qui
     brille sur du noir. Sur du crème, ces deux extrémités disparaissent :
     le titre de l'accueil et le prénom de la page « à propos » étaient
     illisibles. On garde les mêmes teintes, assombries. */
  --lueur-grad:linear-gradient(100deg,#2F53C4,#076B60 55%,#6C3DC0);
  --grille-a:rgba(59,98,217,.16); --grille-b:rgba(124,77,209,.13);
  --ombre:0 24px 56px rgba(60,55,40,.16); --ombre-douce:0 10px 26px rgba(60,55,40,.12);
  --gx-fond:#F6F3EA; --gx-fog:#EFEBDE; --gx-int:#C9A227; --gx-mid:#7C4DD1; --gx-ext:#3B62D9; --gx-coeur:#FFF6D8;
  --carte-a:#ffffffd9; --carte-b:#f3efe3e6;
  --promo:#DC2626; --promo-2:#9F1239;
  --promo-txt:#C81E1E;
}

/* =====================================================================
   9. FRANCO — le thème d'accueil.
   ---------------------------------------------------------------------
   Thème de JOUR, clair, en vert franco-ontarien. C'est celui que
   découvre un visiteur qui arrive pour la première fois.

   Il n'a AUCUN décor 3D, et c'est voulu : « franco » n'est plus inscrit
   dans les constructeurs de cdmp-decors3d.js, donc la page masque la
   toile et le fond est simplement le dégradé ci-dessous, animé par les
   halos. Une boutique de fiches à imprimer se juge sur la lisibilité de
   ce qu'elle montre, et le blanc est ce qui ressemble le plus à une
   feuille.

   Le vert #00693C est celui du drapeau franco-ontarien. Il dit le public
   visé sans rien brandir, et il est assez sombre pour porter du texte
   blanc dans un bouton comme pour s'écrire en gras sur du blanc.

   RÈGLE À TENIR SI ON RETOUCHE CES COULEURS : sur un fond clair, tout ce
   qui porte du texte doit être franchement sombre. Les couleurs d'accent
   des sept thèmes sombres sont choisies pour BRILLER sur du noir; les
   reprendre telles quelles ici donnerait du texte pâle sur du blanc. Les
   valeurs ci-dessous tiennent toutes au moins 5:1 sur le fond le plus
   clair de la page.

   Les neutres tirent vers le vert plutôt que d'être des gris purs : un
   gris neutre à côté d'un vert franc paraît sale.
   ===================================================================== */
html[data-theme="franco"]{
  --bleu:#00693C; --violet:#155E4C; --teal:#0B6E60; --soleil:#8A5E08; --rose:#A93069;
  --nuit:#F7FAF8; --texte:#0E1A15; --doux:#3A4A43;
  --fond-grad:radial-gradient(130% 90% at 50% -12%,#FFFFFF 0%,#F4F9F5 50%,#E6EFE9 100%);
  /* Voile en dégradé circulaire, blanc. Le texte du site est centré et
     large, et les drapeaux passent derrière : on éclaircit fort au
     centre, là où le texte tombe, et on laisse les drapeaux respirer sur
     les bords. Un voile uniforme assez dense pour rendre le texte
     lisible délaverait toute la scène. */
  /* Voile en COLONNE, pas en cercle. Les drapeaux sont maintenant posés
     à gauche et à droite en alternance, et le texte occupe la bande
     centrale. Le voile est donc étroit et haut : dense au milieu pour
     que le texte se lise, et franchement transparent sur les côtés pour
     que les drapeaux gardent leurs couleurs. C'est ce qui règle le
     défaut des versions précédentes, où un voile assez dense pour le
     texte délavait forcément les drapeaux, puisqu'ils étaient dessous. */
  --voile-grad:radial-gradient(38% 100% at 50% 50%,
      rgba(255,255,255,.94) 0%, rgba(255,255,255,.90) 58%,
      rgba(250,252,251,.52) 82%, rgba(247,250,248,0) 100%);
  /* Panneaux franchement opaques. Les thèmes sombres se contentent d'un
     voile blanc à 6 % parce que le fond est noir; ici, un panneau
     translucide laisserait passer le dégradé et le texte perdrait son
     assise. */
  --verre:rgba(255,255,255,.88); --verre-fort:rgba(255,255,255,.96);
  --bord:rgba(14,26,21,.14); --bord-clair:rgba(14,26,21,.28);
  --halo-op:.16; --halo-blend:multiply; --etoiles-op:0;
  --marque-grad:linear-gradient(100deg,#0E1A15 10%,#00693C 60%,#0B6E60);
  --lueur-grad:linear-gradient(100deg,#00693C,#0B6E60 55%,#155E4C);
  --grille-a:rgba(0,105,60,.15); --grille-b:rgba(11,110,96,.12);
  --ombre:0 24px 56px rgba(18,42,32,.15); --ombre-douce:0 10px 26px rgba(18,42,32,.11);
  --gx-fond:#F7FAF8; --gx-fog:#ECF3EE; --gx-int:#BFE3CE; --gx-mid:#0B6E60; --gx-ext:#00693C; --gx-coeur:#E8F6EE;
  --carte-a:#ffffffee; --carte-b:#f2f8f4f2;
  --promo:#C0392B; --promo-2:#8E2A20;
  --promo-txt:#B02D22;
}

/* =====================================================================
   COULEURS DES BOUTONS PLEINS
   ---------------------------------------------------------------------
   Pourquoi un dégradé séparé ? Parce que les couleurs d'accent (--bleu,
   --violet) sont choisies pour BRILLER sur un fond sombre. Certaines
   sont donc trop claires pour porter du texte blanc : un « Se connecter »
   blanc sur le vert vif du thème Forêt serait illisible. Chaque thème
   fournit donc une version assombrie, réservée aux boutons.
   ===================================================================== */
:root,
html[data-theme="ardoise"]{ --btn-a:#3F6ED0; --btn-b:#5C68A6; }
html[data-theme="galaxie"]{ --btn-a:#4F7CFF; --btn-b:#8B5CF6; }
html[data-theme="cafe"]    { --btn-a:#A05A29; --btn-b:#7C3F20; }
html[data-theme="foret"]   { --btn-a:#1C7A4C; --btn-b:#14603B; }
html[data-theme="ocean"]   { --btn-a:#1A66B8; --btn-b:#0E7490; }
html[data-theme="couchant"]{ --btn-a:#C24425; --btn-b:#A82359; }
html[data-theme="cerisier"]{ --btn-a:#BE3B85; --btn-b:#8B4FD1; }
html[data-theme="papier"]  { --btn-a:#3B62D9; --btn-b:#7C4DD1; }
html[data-theme="franco"]  { --btn-a:#00693E; --btn-b:#0B6E60; }

.btn-primaire,
.cdmp-cc .connexion{
  background:linear-gradient(135deg, var(--btn-a), var(--btn-b)) !important;
  color:#fff !important;
}

/* =====================================================================
   APPLICATION DES VARIABLES AUX DÉCORS DES PAGES
   Ces règles remplacent les couleurs écrites en dur dans chaque page.
   ===================================================================== */
body{background:var(--nuit); color:var(--texte)}

/* LES MOTS EN DÉGRADÉ DES TITRES.
   ---------------------------------------------------------------------
   Les pages écrivent ce dégradé en dur avec deux teintes pâles, pensées
   pour un fond noir. La valeur par défaut ci-dessous reprend exactement
   celles-là, si bien que les sept thèmes sombres ne changent pas d'un
   pixel ; seul le thème papier, qui redéfinit --lueur-grad, reçoit une
   version assombrie.

   « background-image » et non « background » : le raccourci remettrait
   background-clip à border-box, et le dégradé s'afficherait en
   rectangle plein par-dessus le titre au lieu de le colorer. */
:root{ --lueur-grad:linear-gradient(100deg,#9FC0FF,var(--teal) 55%,#E0A8FF) }

/* La liste couvre TOUS les endroits où ce dégradé est écrit en dur.
   Ma première version ne visait que « .hero h1 .lueur », et le titre de
   la boutique, qui n'est pas dans un .hero, restait illisible sur crème.
   Chercher « 9FC0FF » dans le dossier donne la liste complète : si un
   nouveau titre en dégradé apparaît un jour, il faut l'ajouter ici. */
.hero h1 .lueur,
.tete-page h1{ background-image:var(--lueur-grad) !important }

/* LE TEXTE POSÉ SUR LE DÉCOR 3D.
   ---------------------------------------------------------------------
   Le paragraphe d'accroche de l'accueil ne repose sur aucun panneau :
   il est directement sur le canevas de la salle de classe. Sur les
   thèmes sombres, du gris clair sur un décor sombre tient très bien.
   Sur un décor clair, le même gris disparaît, quelle que soit sa valeur,
   parce qu'un décor n'est pas une couleur unie : il alterne des zones
   claires et des zones foncées sous une même ligne de texte.

   Sur les deux thèmes clairs, ce paragraphe passe donc en couleur de
   texte pleine, pas en gris d'appoint. */
html[data-theme="franco"] .hero p.sous,
html[data-theme="papier"] .hero p.sous{ color:var(--texte) }
.fond,.aurore{background:var(--fond-grad) !important}
#voile{background:var(--voile-grad) !important}
.etoiles{opacity:var(--etoiles-op) !important}
.halo{opacity:var(--halo-op) !important; mix-blend-mode:var(--halo-blend)}
.halo.b3,.halo.h3{opacity:calc(var(--halo-op) * .68) !important}
/* ATTENTION : utiliser « background-image » et NON le raccourci
   « background ». Le raccourci réinitialise background-clip à
   border-box — le dégradé s'affichait alors en rectangle plein
   par-dessus le nom du site, qui paraissait surligné. */
.marque b{
  background-image:var(--marque-grad) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}
/* La pastille de niveau a un fond sombre fixe posé sur la couverture :
   son texte doit rester blanc, même sur le thème clair. Les autres
   étiquettes (Gratuit, Nouveau, Équipe) ont un fond CLAIR et un texte
   sombre volontaire — ne pas y toucher. */
.niv{color:#fff}
/* Cartes de ressources et pages du livre : leur fond était figé en bleu
   nuit, ce qui rendait le texte illisible sur le thème clair. */
.carte{background:linear-gradient(160deg, var(--carte-a), var(--carte-b)) !important}
.page{background:linear-gradient(145deg, var(--carte-a), var(--carte-b)) !important}
html{scrollbar-color:var(--violet) var(--nuit)}
::-webkit-scrollbar-track{background:var(--nuit)}
::-webkit-scrollbar-thumb{border-color:var(--nuit)}
::selection{background:color-mix(in srgb, var(--bleu) 45%, transparent); color:var(--texte)}
.grille-perspective::before{
  background-image:linear-gradient(var(--grille-a) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grille-b) 1px,transparent 1px) !important}

/* Les bulles de confirmation (« Ajouté au panier », « Merci, ta note est
   enregistrée »…) ont un fond bleu nuit FIGÉ, écrit page par page bien
   avant qu'il existe des thèmes clairs. Leur texte, lui, suivait
   var(--texte) et devenait donc presque noir sur ce bleu nuit dès qu'on
   passait au thème clair : 1,33 sur 1 de contraste, mesuré. Autrement
   dit, plus aucun message de confirmation n'était lisible.

   Le fond restant sombre sur tous les thèmes, on fixe le texte en blanc
   plutôt que d'aller réécrire la règle dans chacune des pages. */
.toast{ color:#fff }

/* Thème clair : quelques retouches indispensables pour rester lisible */
html[data-theme="franco"] .verre{box-shadow:var(--ombre-douce), inset 0 1px 0 rgba(255,255,255,.9)}
html[data-theme="franco"] .etoiles{display:none}
/* Sur un téléphone, le texte occupe presque toute la largeur : la
   colonne de voile de 38 % le laissait déborder sur les drapeaux, et
   c'est là que la lecture devenait pénible. On l'élargit franchement.
   Les drapeaux y deviennent plus discrets, et c'est le bon compromis :
   sur un écran de cette taille, on vient lire, pas contempler. */
@media (max-width:760px){
  html[data-theme="franco"]{
    --voile-grad:radial-gradient(128% 100% at 50% 50%,
        rgba(255,255,255,.94) 0%, rgba(255,255,255,.90) 62%,
        rgba(250,252,251,.62) 100%);
  }
}
/* Les drapeaux sont le sujet de la page d'accueil : on les montre en
   entier plutôt qu'en filigrane, et c'est le voile ci-dessus qui protège
   la lecture, pas une transparence du décor. */
html[data-theme="franco"] #galaxie-bg{opacity:1}
html[data-theme="papier"] .verre{box-shadow:var(--ombre-douce), inset 0 1px 0 rgba(255,255,255,.9)}
html[data-theme="papier"] .etoiles{display:none}
html[data-theme="papier"] #galaxie-bg{opacity:.5}

/* Transition douce quand on change de thème */
body,.fond,.aurore,#voile,.verre{transition:background-color .45s ease, background .45s ease, color .35s ease}

/* =====================================================================
   LE SÉLECTEUR DE THÈME (injecté dans la barre de navigation)
   ===================================================================== */
.cdmp-theme{position:relative; display:inline-flex; flex:0 0 auto}
/* Pages sans barre de navigation : bouton flottant en haut à droite */
.cdmp-theme-flottant{position:fixed; top:16px; right:16px; z-index:150}
.cdmp-theme-btn{width:42px; height:42px; border-radius:13px; cursor:pointer; font-size:1.15rem; line-height:1;
  display:grid; place-items:center; color:var(--texte); font-family:inherit;
  background:var(--verre-fort); border:1px solid var(--bord);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .18s ease, filter .2s ease}
.cdmp-theme-btn:hover{transform:translateY(-2px) rotate(-8deg); filter:brightness(1.12)}
.cdmp-theme-btn[aria-expanded="true"]{border-color:var(--bord-clair)}

.cdmp-theme-menu{position:absolute; top:calc(100% + 12px); right:0; z-index:200; width:296px; padding:16px;
  border-radius:20px; background:linear-gradient(160deg,var(--verre-fort),var(--verre)); border:1px solid var(--bord);
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  box-shadow:var(--ombre);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97);
  transition:opacity .2s ease, transform .2s ease, visibility .2s}
.cdmp-theme-menu.ouvert{opacity:1; visibility:visible; transform:none}
.cdmp-theme-menu h3{font-family:var(--display),system-ui,sans-serif; font-weight:700; font-size:.95rem;
  margin:0 0 3px; color:var(--texte)}
.cdmp-theme-menu .sous{display:block; font-size:.76rem; color:var(--doux); margin-bottom:13px; line-height:1.4}
.cdmp-theme-grille{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
.cdmp-vignette{position:relative; cursor:pointer; padding:0; border-radius:13px; overflow:hidden;
  border:2px solid transparent; background:none; font-family:inherit;
  transition:transform .16s ease, border-color .16s ease}
.cdmp-vignette:hover{transform:translateY(-3px) scale(1.05)}
.cdmp-vignette .apercu{display:block; height:42px; border-radius:10px; position:relative; overflow:hidden}
.cdmp-vignette .apercu::after{content:""; position:absolute; inset:0;
  background:radial-gradient(80% 120% at 22% 12%, rgba(255,255,255,.42), transparent 62%)}
.cdmp-vignette .nom{display:block; font-size:.63rem; font-weight:600; color:var(--doux);
  margin-top:5px; text-align:center; letter-spacing:.01em}
.cdmp-vignette[aria-pressed="true"]{border-color:var(--texte)}
.cdmp-vignette[aria-pressed="true"] .nom{color:var(--texte)}
.cdmp-vignette[aria-pressed="true"] .apercu::before{content:"✓"; position:absolute; inset:0; z-index:2;
  display:grid; place-items:center; font-size:1rem; font-weight:800; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.65)}

@media (max-width:520px){
  /* Le panneau se centrait sur le BOUTON 🎨, pas sur l'écran : « left:50% »
     se rapporte au plus proche ancêtre positionné, qui était la boîte de
     42 px du bouton. Sur un écran de 375 px, un quart du panneau sortait
     donc de la fenêtre et deux vignettes sur huit — Forêt et Papier —
     devenaient inatteignables. Il provoquait en plus 143 px de défilement
     horizontal alors même qu'il était fermé : un élément en
     « visibility:hidden » occupe quand même sa place dans la mise en page.

     En retirant le positionnement de la boîte du bouton, le référentiel
     devient la barre de l'entête. Que ce soit elle (elle porte un
     backdrop-filter, qui fait référentiel) ou l'entête elle-même si le
     navigateur ne le gère pas, les deux sont pleine largeur et centrées
     sur l'écran : le panneau se centre alors pour de bon. */
  .cdmp-theme{position:static}
  .cdmp-theme-menu{width:min(300px, calc(100vw - 24px)); right:auto; left:50%;
    transform:translate(-50%,-8px) scale(.97)}
  .cdmp-theme-menu.ouvert{transform:translate(-50%,0)}
}

/* Respecte le réglage « animations réduites » du système */
@media (prefers-reduced-motion: reduce){
  body,.fond,.aurore,#voile,.verre,.cdmp-theme-menu,.cdmp-vignette,.cdmp-theme-btn{transition:none !important}
}

/* =====================================================================
   TÉLÉPHONE
   ---------------------------------------------------------------------
   Ces règles ne s'appliquent QUE sous 640 pixels de large. Au-dessus,
   le navigateur ne les lit même pas : la version sur ordinateur est
   rigoureusement inchangée.

   Mesuré sur la boutique, écran de 375 × 812 :
   la barre du haut occupait 357 px, soit 44 % de l'écran, et elle était
   collée en haut, donc elle suivait le défilement. Il restait 455 px
   pour regarder des ressources.
   ===================================================================== */
@media (max-width:640px){

  /* La barre reste en haut de la PAGE, mais ne suit plus le défilement.
     On la retrouve en remontant, comme dans n'importe quelle boutique.
     C'est ce qui rend l'écran à nouveau utilisable. */
  .entete{position:static !important}

  /* Le conseiller et son personnage. Sur un grand écran ils occupent un
     coin vide; sur un téléphone ils se posent par-dessus les ressources,
     c'est-à-dire par-dessus ce qu'on est venu voir. */
  #guide{display:none !important}

  /* Les halos décoratifs. Ils ne se voient presque pas sur un petit
     écran et coûtent du calcul à chaque défilement, ce qui rend le
     défilement saccadé sur les appareils modestes. */
  .halo{display:none !important}

  /* Le badge « Équipe CDMP ». Une carte fait 160 px de large sur un
     téléphone, le badge en prend 112 et vient buter contre le cœur.
     Or toutes les ressources de la boutique le portent : il ne
     distingue rien et mange la moitié de la vignette. Il reste sur
     grand écran, où la place ne manque pas. */
  .badge-equipe{display:none !important}
}

/* =====================================================================
   10. FEUILLE — LE VISAGE DU SITE (20 septembre 2026)
   ---------------------------------------------------------------------
   Bastien a demandé « un truc simple, mais qui se démarque vraiment ».
   Neuf ambiances au choix, c'était trop : aucun grand site de ressources
   n'en propose, chaque changement devait rester beau neuf fois, et des
   pochettes déjà très colorées se battaient avec les décors.

   L'idée vient de la classe elle-même : LA FEUILLE MOBILE. Des lignes
   bleues, une marge rouge, trois trous, et un coup de surligneur jaune
   sur les mots qui comptent. Tout enseignant la reconnaît au premier
   regard, et aucune boutique de ressources ne s'en sert. Elle ne coûte
   rien : ce sont des dégradés CSS, sans image, sans 3D, sans script.

   Le reste est volontairement calme : du blanc, de l'encre, le vert du
   drapeau franco-ontarien pour les boutons. Les pochettes sont la seule
   chose colorée de la page, donc ce sont elles qu'on regarde.

   Les neuf autres ambiances existent toujours : ajouter « ?themes=1 » à
   l'adresse fait revenir le bouton 🎨 (voir cdmp-themes.js).
   ===================================================================== */
html[data-theme="feuille"]{
  --bleu:#00693C; --violet:#0B4F33; --teal:#00693C; --soleil:#8A5E08; --rose:#A93069;
  --nuit:#FCFCFA; --texte:#15211B; --doux:#44524B;
  --fond-grad:linear-gradient(#FCFCFA,#FCFCFA);
  --voile-grad:none;
  --verre:#FFFFFF; --verre-fort:#FFFFFF;
  --bord:rgba(21,33,27,.13); --bord-clair:rgba(21,33,27,.26);
  --halo-op:0; --halo-blend:normal; --etoiles-op:0;
  --marque-grad:linear-gradient(100deg,#15211B,#15211B);
  --lueur-grad:linear-gradient(100deg,#15211B,#15211B);
  --grille-a:rgba(0,105,60,.10); --grille-b:rgba(0,105,60,.08);
  --ombre:0 18px 40px rgba(21,33,27,.10); --ombre-douce:0 6px 18px rgba(21,33,27,.07);
  --gx-fond:#FCFCFA; --gx-fog:#F1F4F2; --gx-int:#BFE3CE; --gx-mid:#0B6E60; --gx-ext:#00693C; --gx-coeur:#E8F6EE;
  --carte-a:#ffffff; --carte-b:#f6f8f6;
  --promo:#C0392B; --promo-2:#8E2A20; --promo-txt:#B02D22;
  /* Les trois couleurs de la feuille mobile. */
  --ligne:rgba(64,118,190,.20); --marge:rgba(208,58,58,.62); --surligneur:#FFE45C;
  --btn-a:#00693C; --btn-b:#00693C;
}
/* Plus de verre dépoli, de halos ni d'étoiles : des panneaux blancs nets. */
html[data-theme="feuille"] .verre{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff;
  border:1px solid var(--bord);box-shadow:var(--ombre-douce)}
html[data-theme="feuille"] .halo,
html[data-theme="feuille"] .etoiles,
html[data-theme="feuille"] .aurore{display:none !important}
html[data-theme="feuille"] #voile{background:none !important}
html[data-theme="feuille"] #galaxie-bg,
html[data-theme="feuille"] #decor3d{display:none !important}
html[data-theme="feuille"] .hero p.sous{color:var(--texte)}

/* LA FEUILLE : le premier écran de l'accueil est une feuille lignée.
   Trois couches de dégradés, de haut en bas : les trois trous, la marge
   rouge, les lignes bleues. Sur un téléphone la marge se resserre. */
html[data-theme="feuille"] .hero{
  --pas:34px; --x-marge:clamp(44px,9vw,120px);
  background:
    radial-gradient(circle at calc(var(--x-marge) * .45) 22%, #E3E8E5 0 9px, transparent 10px),
    radial-gradient(circle at calc(var(--x-marge) * .45) 50%, #E3E8E5 0 9px, transparent 10px),
    radial-gradient(circle at calc(var(--x-marge) * .45) 78%, #E3E8E5 0 9px, transparent 10px),
    linear-gradient(90deg, transparent calc(var(--x-marge) - 1px), var(--marge) calc(var(--x-marge) - 1px), var(--marge) calc(var(--x-marge) + 1px), transparent calc(var(--x-marge) + 1px)),
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--pas) - 1px), var(--ligne) calc(var(--pas) - 1px), var(--ligne) var(--pas)),
    #FFFFFF;
  border-bottom:1px solid var(--bord);
}
/* Le titre s'écrit à l'encre, et la seconde ligne reçoit le surligneur.
   Le trait est légèrement penché et ne couvre pas toute la hauteur :
   c'est ce qui le fait ressembler à un vrai coup de feutre. */
/* Les « !important » répondent à celui de la règle commune plus haut
   (« .hero h1 .lueur{ background-image:… !important } »), écrite pour des
   titres en dégradé découpé dans le texte. Ici le titre est à l'encre
   pleine : sans eux, il s'affichait en rectangles noirs. */
html[data-theme="feuille"] .hero h1 .lueur,
html[data-theme="feuille"] .tete-page h1{background-image:none !important;-webkit-background-clip:border-box !important;
  background-clip:border-box !important;color:var(--texte) !important;-webkit-text-fill-color:var(--texte) !important;filter:none}
html[data-theme="feuille"] .hero h1 .mot:last-child{
  background-image:linear-gradient(178deg, transparent 0 46%, var(--surligneur) 46% 90%, transparent 90%) !important;
  padding:0 .18em;margin:0 -.18em;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* La recherche et les boutons : francs, sans dégradé ni lueur. */
html[data-theme="feuille"] .btn-primaire{box-shadow:0 2px 0 #004D2C !important}
html[data-theme="feuille"] .btn-primaire:hover{transform:translateY(-1px)}
html[data-theme="feuille"] .btn-verre{background:#fff;border:1px solid var(--bord-clair);color:var(--texte)}
/* Un titre de rangée se souligne comme on souligne un titre dans un cahier. */
html[data-theme="feuille"] .titre-rang h2{background:linear-gradient(transparent 82%, var(--surligneur) 82%);display:inline;padding:0 .1em}

/* =====================================================================
   11. PORCELAINE — proposition de look, EN APERÇU SEULEMENT
   ---------------------------------------------------------------------
   Réponses de Bastien le 20 septembre 2026 : « haut de gamme, sobre »,
   fond CLAIR, garder LE VERRE DÉPOLI, et surtout ni « scolaire, cliché »
   ni « banal ». Donc aucun décor d'école ici (pas de craie, de cartable,
   de feuille lignée), et autre chose qu'un fond blanc uni.

   L'idée : une boutique de belle papeterie. Un fond porcelaine, traversé
   de trois grandes nappes de couleur très pâles (sauge, champagne, gris
   bleuté) qui ne bougent pas. Elles ne servent qu'à une chose : donner au
   verre dépoli quelque chose à dépolir. Par-dessus, des panneaux de verre
   blanc, une encre presque noire, un seul vert profond pour les boutons,
   et un filet champagne. Le seul geste : le mot mis en valeur du titre
   passe en italique à empattements. C'est le contraste entre la linéale
   du site et cet italique qui fait « maison d'édition ».

   Ce thème n'est proposé à personne : on le voit en ajoutant
   « ?apercu=porcelaine » à une adresse du site (voir cdmp-themes.js).
   ===================================================================== */
html[data-theme="porcelaine"]{
  --bleu:#0F5A3C; --violet:#0B4630; --teal:#0F5A3C; --soleil:#8A6A2F; --rose:#A93069;
  --nuit:#F6F7F5; --texte:#101614; --doux:#55615B;
  --fond-grad:
    radial-gradient(58% 46% at 10% 0%,  #DCEAE1 0%, rgba(220,234,225,0) 62%),
    radial-gradient(48% 44% at 100% 26%, #F3EADA 0%, rgba(243,234,218,0) 64%),
    radial-gradient(60% 56% at 42% 108%, #E2E7F1 0%, rgba(226,231,241,0) 62%),
    #F6F7F5;
  --voile-grad:none;
  --verre:rgba(255,255,255,.58); --verre-fort:rgba(255,255,255,.84);
  --bord:rgba(16,22,20,.09); --bord-clair:rgba(16,22,20,.18);
  --halo-op:.20; --halo-blend:multiply; --etoiles-op:0;
  --marque-grad:linear-gradient(100deg,#101614,#101614);
  --lueur-grad:linear-gradient(100deg,#101614,#101614);
  --grille-a:rgba(15,90,60,.08); --grille-b:rgba(176,141,87,.08);
  --ombre:0 30px 60px -28px rgba(16,22,20,.22); --ombre-douce:0 18px 40px -22px rgba(16,22,20,.18);
  --gx-fond:#F6F7F5; --gx-fog:#EEF1EE; --gx-int:#DCEAE1; --gx-mid:#0F5A3C; --gx-ext:#0B4630; --gx-coeur:#F3EADA;
  --carte-a:rgba(255,255,255,.92); --carte-b:rgba(246,247,245,.96);
  --promo:#B23A2B; --promo-2:#8E2A20; --promo-txt:#A8321F;
  --btn-a:#0F5A3C; --btn-b:#0F5A3C;
  --champagne:#B08D57;
}
html[data-theme="porcelaine"] body{background:var(--fond-grad);background-attachment:fixed}
html[data-theme="porcelaine"] #voile{background:none !important}
html[data-theme="porcelaine"] .etoiles,
html[data-theme="porcelaine"] #galaxie-bg,
html[data-theme="porcelaine"] #decor3d{display:none !important}

/* Le verre : blanc, très flou, un liseré de lumière en haut. */
html[data-theme="porcelaine"] .verre{
  background:var(--verre);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(16,22,20,.05), var(--ombre-douce)}

/* Le titre : encre pleine, et le dernier groupe de mots en italique à
   empattements, vert profond. Les « !important » répondent à celui de la
   règle commune « .hero h1 .lueur{ background-image:… !important } ». */
html[data-theme="porcelaine"] .hero h1 .lueur,
html[data-theme="porcelaine"] .tete-page h1{background-image:none !important;-webkit-background-clip:border-box !important;
  background-clip:border-box !important;color:var(--texte) !important;-webkit-text-fill-color:var(--texte) !important;filter:none}
html[data-theme="porcelaine"] .hero h1{letter-spacing:-.035em}
html[data-theme="porcelaine"] .hero h1 .mot:last-child{
  font-family:'Instrument Serif','Iowan Old Style','Palatino Linotype',Georgia,serif;font-style:italic;font-weight:400;
  letter-spacing:-.01em;color:#0F5A3C !important;-webkit-text-fill-color:#0F5A3C !important;font-size:1.08em}
html[data-theme="porcelaine"] .hero p.sous{color:var(--doux)}

/* Les boutons : pleins, calmes, en pilule. Pas de dégradé, pas de lueur. */
html[data-theme="porcelaine"] .btn{border-radius:999px}
html[data-theme="porcelaine"] .btn-primaire{box-shadow:0 10px 24px -12px rgba(15,90,60,.55) !important}
/* Les autres boutons pleins (« Se connecter », « Magasiner », le gros
   bouton du compte, le logo) gardaient une ombre bleu-violet de l'ancien
   thème sous un fond vert : la même ombre verte, douce, partout. */
html[data-theme="porcelaine"] .gros:not(.danger),html[data-theme="porcelaine"] .cdmp-cc .connexion,
html[data-theme="porcelaine"] .btn:not(.btn-fant):not(.btn-verre):not(.secondaire),html[data-theme="porcelaine"] .logo,
html[data-theme="porcelaine"] .onglets button.actif{box-shadow:0 10px 24px -12px rgba(15,90,60,.55) !important}
html[data-theme="porcelaine"] .avatar{box-shadow:0 10px 24px -12px rgba(15,90,60,.45) !important}
/* Les étiquettes « Gratuit » et « Nouveau » posent un texte sombre sur
   --teal et --soleil, vifs dans les autres ambiances mais profonds ici. */
html[data-theme="porcelaine"] .etiq-gratuit,html[data-theme="porcelaine"] .etiq-nouveau,
html[data-theme="porcelaine"] .etiq-ensemble{color:#fff}
html[data-theme="porcelaine"] input:focus,html[data-theme="porcelaine"] textarea:focus,html[data-theme="porcelaine"] select:focus{
  border-color:#0F5A3C !important;box-shadow:0 0 0 3px rgba(15,90,60,.16) !important}
html[data-theme="porcelaine"] .btn-verre{background:rgba(255,255,255,.7);border:1px solid var(--bord-clair);color:var(--texte)}

/* Un titre de rangée : un court filet champagne au-dessus, rien d'autre. */
html[data-theme="porcelaine"] .titre-rang h2{position:relative;padding-top:14px;letter-spacing:-.02em}
html[data-theme="porcelaine"] .titre-rang h2::before{content:"";position:absolute;left:0;top:0;width:34px;height:2px;background:var(--champagne)}
html[data-theme="porcelaine"] .lien-voir{color:var(--texte);text-decoration:underline;text-decoration-color:var(--champagne);text-underline-offset:5px}

/* LES CARTES. Le panneau au survol, la pastille de prix et l'étiquette de
   niveau étaient noirs : ici ils deviennent du verre blanc, à l'encre. */
html[data-theme="porcelaine"] .carte{box-shadow:0 0 0 1px rgba(16,22,20,.06), 0 22px 44px -26px rgba(16,22,20,.30)}
html[data-theme="porcelaine"] .carte .corps{
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.80) 13%,rgba(255,255,255,.95) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);color:#101614}
html[data-theme="porcelaine"] .carte .corps h3,
html[data-theme="porcelaine"] .carte .corps h3 a{color:#101614}
html[data-theme="porcelaine"] .carte .corps .dedans li{color:#3E4A44}
html[data-theme="porcelaine"] .carte .corps .dedans li::before{background:#0F5A3C}
html[data-theme="porcelaine"] .carte .corps .note,
html[data-theme="porcelaine"] .carte .corps .meta{color:#55615B !important}
html[data-theme="porcelaine"] .carte .corps .prix{color:#101614}
html[data-theme="porcelaine"] .carte .corps .prix .gratuit,
html[data-theme="porcelaine"] .carte .corps .economie{color:#0F5A3C}
html[data-theme="porcelaine"] .carte .corps .prix .prix-avant{color:#5F6B65}
html[data-theme="porcelaine"] .carte .corps .prix .prix-promo{color:#A8321F}
html[data-theme="porcelaine"] .prix-flottant,
html[data-theme="porcelaine"] .niv{background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);color:#101614;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 6px 16px -8px rgba(16,22,20,.35)}
html[data-theme="porcelaine"] .prix-flottant .gratuit{color:#0F5A3C}
html[data-theme="porcelaine"] .prix-flottant .prix-avant{color:#5F6B65}
html[data-theme="porcelaine"] .prix-flottant .prix-promo{color:#A8321F}
html[data-theme="porcelaine"] .prix-flottant .compte-long{color:#55615B}

/* LA FENÊTRE D'UNE RESSOURCE : un voile clair derrière, du verre devant. */
html[data-theme="porcelaine"] .modale-fond,
html[data-theme="porcelaine"] .fond-panier{background:rgba(246,247,245,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html[data-theme="porcelaine"] .apercu{background:rgba(16,22,20,.03)}

/* Les raccourcis par année et par matière. */
html[data-theme="porcelaine"] .raccourci{background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(16,22,20,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-theme="porcelaine"] .chiffres b{color:#101614}

/* Les pages de gestion (dépôt, mes ressources) dans le thème porcelaine.
   Leurs boutons étaient en dégradé ambre et violet avec une lueur mauve :
   ici, le bouton principal est le vert du site, et le bouton de l'IA un
   verre blanc cerné de champagne. Même maison, mêmes boutons. */
html[data-theme="porcelaine"] .btn-pub{background:#0F5A3C !important;color:#fff;box-shadow:0 10px 24px -12px rgba(15,90,60,.55) !important;border-radius:999px}
html[data-theme="porcelaine"] .btn-ia{background:rgba(255,255,255,.78) !important;color:#101614;border:1px solid var(--champagne);
  border-radius:999px;box-shadow:0 6px 16px -10px rgba(16,22,20,.35)}
html[data-theme="porcelaine"] .btn-ia:hover{background:#fff !important}