/* =========================================================================
   Merydar — Le Sanctuaire : l'habillage de grimoire
   -------------------------------------------------------------------------
   Aucune image, aucune ressource externe : le papier, le grain, les taches
   d'age, les plis, les bords dechires, la lettrine et le coin de page sont
   calcules par le navigateur.

   La seule image est le clip de laiton, injecte par l'extension dans
   --mrd-clip. S'il n'est pas renseigne, --mrd-clip vaut none et les onglets
   restent lisibles, simplement sans metal.

   Contrastes mesures sur la tache la plus dense, pas sur le papier propre :
     texte courant   var(--mrd-encre-forte)  ->  9,0:1
     encre seconde   var(--mrd-encre)  ->  6,5:1
     lettrine        var(--mrd-encre-douce)  ->  4,0:1  (admis : tres grand texte)
     etiquette clip  var(--mrd-encre-forte) sur #F0E4D2  ->  10,9:1
   ========================================================================= */

:root{--mrd-clip:none;--mrd-clip-v:none;}

/* ---------- le frontispice ---------- */

.mrd-grim-front{font-family:var(--mrd-police-corps)!important;color:var(--mrd-encre-forte)!important;
  margin:clamp(1rem,4vw,2.5rem) 0!important;padding:0!important;box-sizing:border-box!important;max-width:100%!important;}
.mrd-grim-front *{box-sizing:border-box!important;}
.mrd-grim-front .mrd-gf-tome{position:relative!important;isolation:isolate!important;
  padding:clamp(1.6rem,5.5vw,3.6rem) clamp(1.3rem,4.5vw,3.2rem) clamp(1.6rem,4.5vw,3rem)!important;}
.mrd-grim-front .mrd-gf-tome::before{content:""!important;position:absolute!important;z-index:-1!important;
  top:0!important;left:0!important;right:0!important;bottom:0!important;
  background-color:var(--mrd-papier)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.84 0 0 0 0 0.68 0 0 0 0 0.52 0 0 0 -1.1 0.55'/%3E%3C/filter%3E%3Crect width='560' height='560' filter='url(%23t)'/%3E%3C/svg%3E"),linear-gradient(101deg,transparent 18%,rgba(216,213,205,.34) 18.4%,transparent 19%),linear-gradient(-97deg,transparent 61%,rgba(255,255,255,.55) 61.5%,transparent 62%),linear-gradient(88deg,transparent 39%,rgba(216,213,205,.26) 39.5%,transparent 40%),radial-gradient(ellipse at 14% 10%,rgba(216,213,205,.40),transparent 58%),radial-gradient(ellipse at 86% 90%,rgba(216,213,205,.34),transparent 52%),repeating-linear-gradient(0deg,rgba(216,213,205,.10) 0 1px,transparent 1px 4px)!important;
  background-size:320px 320px,560px 560px,auto,auto,auto,auto,auto,auto!important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='1160' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-5%25' y='-3%25' width='110%25' height='107%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.017' numOctaves='3' seed='11' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='10' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='12' y='14' width='776' height='1132' fill='%23ffffff' filter='url(%23d)'/%3E%3C/svg%3E")!important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='1160' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-5%25' y='-3%25' width='110%25' height='107%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.017' numOctaves='3' seed='11' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='10' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='12' y='14' width='776' height='1132' fill='%23ffffff' filter='url(%23d)'/%3E%3C/svg%3E")!important;
  -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
  filter:drop-shadow(3px 4px 0 rgba(216,213,205,.9)) drop-shadow(7px 9px 16px rgba(28,51,28,.26))!important;}
.mrd-grim-front .mrd-gf-reliure{position:absolute!important;z-index:-1!important;
  top:clamp(.6rem,2vw,1.4rem)!important;bottom:clamp(.6rem,2vw,1.4rem)!important;left:0!important;
  width:clamp(.45rem,1.4vw,.75rem)!important;
  background-image:linear-gradient(90deg,var(--mrd-encre-forte),var(--mrd-encre) 55%,var(--mrd-encre-douce))!important;
  border-radius:2px 0 0 2px!important;}
.mrd-grim-front .mrd-gf-sur{font-family:var(--mrd-police-titres)!important;font-weight:400!important;
  font-size:var(--mrd-t-petit)!important;line-height:var(--mrd-interligne)!important;
  letter-spacing:.24em!important;text-transform:uppercase!important;color:var(--mrd-encre)!important;
  text-align:center!important;display:block!important;margin:0 0 clamp(.5rem,2vw,.9rem)!important;}
.mrd-grim-front h1{font-family:'Jellyka Delicious Cake','Cinzel Decorative',serif!important;font-weight:400!important;
  font-size:calc(var(--mrd-corps) * 3.3)!important;line-height:var(--mrd-interligne)!important;
  color:var(--mrd-encre)!important;text-align:center!important;margin:0 0 clamp(.4rem,1.6vw,.7rem)!important;}
.mrd-grim-front .mrd-gf-devise{font-style:italic!important;text-align:center!important;color:var(--mrd-encre)!important;
  font-size:var(--mrd-corps)!important;line-height:var(--mrd-interligne)!important;
  margin:0 auto clamp(1.2rem,4vw,2.2rem)!important;max-width:32rem!important;}
.mrd-grim-front .mrd-gf-filet{border:0!important;height:clamp(.6rem,2vw,1rem)!important;
  margin:0 auto clamp(1.2rem,4vw,2.2rem)!important;max-width:22rem!important;
  background-image:linear-gradient(var(--mrd-encre-douce),var(--mrd-encre-douce)),linear-gradient(var(--mrd-encre-douce),var(--mrd-encre-douce)),radial-gradient(circle,var(--mrd-laiton) 40%,transparent 42%)!important;
  background-size:38% 1px,38% 1px,clamp(.5rem,1.6vw,.8rem) clamp(.5rem,1.6vw,.8rem)!important;
  background-position:left center,right center,center center!important;background-repeat:no-repeat!important;}
.mrd-grim-front .mrd-gf-liminaire{list-style:none!important;margin:0 auto clamp(1.2rem,4vw,2rem)!important;
  padding:0 0 clamp(.9rem,3vw,1.4rem)!important;max-width:46rem!important;border-bottom:1px solid var(--mrd-filet)!important;
  display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:.4rem clamp(1rem,4vw,2.4rem)!important;}
.mrd-grim-front .mrd-gf-liminaire a{font-family:var(--mrd-police-titres)!important;font-weight:400!important;
  font-size:var(--mrd-t-petit)!important;line-height:var(--mrd-interligne)!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;text-decoration:none!important;}
.mrd-grim-front .mrd-gf-sections{list-style:none!important;margin:0 auto!important;padding:0!important;max-width:46rem!important;}
.mrd-grim-front .mrd-gf-sections>li{margin:0 0 clamp(1rem,3.2vw,1.7rem)!important;padding:0!important;}
.mrd-grim-front .mrd-gf-sections>li:last-child{margin-bottom:0!important;}
.mrd-grim-front .mrd-gf-tete{display:grid!important;grid-template-columns:clamp(1.7rem,5.5vw,2.6rem) 1fr auto!important;
  align-items:baseline!important;gap:clamp(.4rem,1.5vw,.8rem)!important;
  padding:clamp(.35rem,1.4vw,.6rem) 0!important;border-bottom:1px dotted var(--mrd-filet)!important;text-decoration:none!important;}
.mrd-grim-front .mrd-gf-num{font-family:var(--mrd-police-titres)!important;font-weight:700!important;
  font-size:var(--mrd-corps)!important;line-height:var(--mrd-interligne)!important;color:var(--mrd-encre)!important;}
.mrd-grim-front .mrd-gf-nom{font-family:var(--mrd-police-titres)!important;font-weight:400!important;
  font-size:calc(var(--mrd-corps) * 1.2)!important;line-height:var(--mrd-interligne)!important;color:var(--mrd-encre)!important;}
.mrd-grim-front .mrd-gf-nb{font-style:italic!important;font-size:var(--mrd-corps)!important;
  line-height:var(--mrd-interligne)!important;color:var(--mrd-encre)!important;white-space:nowrap!important;}
.mrd-grim-front .mrd-gf-quoi{font-style:italic!important;color:var(--mrd-encre)!important;
  font-size:var(--mrd-corps)!important;line-height:var(--mrd-interligne)!important;
  margin:clamp(.35rem,1.4vw,.6rem) 0 0!important;padding:0 0 0 clamp(2.1rem,7vw,3.4rem)!important;}
.mrd-grim-front .mrd-gf-notices{list-style:none!important;margin:clamp(.5rem,1.8vw,.8rem) 0 0!important;
  padding:0 0 0 clamp(2.1rem,7vw,3.4rem)!important;}
.mrd-grim-front .mrd-gf-notices li{margin:0 0 clamp(.25rem,1vw,.4rem)!important;display:grid!important;
  grid-template-columns:1fr auto!important;gap:clamp(.4rem,1.5vw,.8rem)!important;align-items:baseline!important;
  border-bottom:1px dotted var(--mrd-filet)!important;padding-bottom:clamp(.2rem,.9vw,.35rem)!important;}
.mrd-grim-front .mrd-gf-notices a{font-family:var(--mrd-police-corps)!important;
  font-size:var(--mrd-corps)!important;line-height:var(--mrd-interligne)!important;text-decoration:none!important;}
.mrd-grim-front .mrd-gf-notices .mrd-gf-nb{font-size:var(--mrd-t-petit)!important;}
.mrd-grim-front .mrd-gf-tete:hover .mrd-gf-nom,.mrd-grim-front .mrd-gf-tete:focus .mrd-gf-nom,
.mrd-grim-front .mrd-gf-notices a:hover,.mrd-grim-front .mrd-gf-notices a:focus,
.mrd-grim-front .mrd-gf-liminaire a:hover,.mrd-grim-front .mrd-gf-liminaire a:focus{color:var(--mrd-encre-forte)!important;
  text-decoration:underline!important;text-decoration-color:var(--mrd-laiton)!important;text-underline-offset:.18em!important;}
.mrd-grim-front a:focus{outline:2px solid var(--mrd-encre)!important;outline-offset:3px!important;}
.mrd-grim-front .mrd-gf-pied{text-align:center!important;font-style:italic!important;color:var(--mrd-encre)!important;
  font-size:var(--mrd-corps)!important;line-height:var(--mrd-interligne)!important;
  margin:clamp(1.4rem,4vw,2.4rem) auto 0!important;max-width:34rem!important;
  padding-top:clamp(.8rem,2.5vw,1.3rem)!important;border-top:1px solid var(--mrd-filet)!important;}
.mrd-grim-front a:link,.mrd-grim-front a:visited{color:var(--mrd-encre)!important;background-color:transparent!important;}
.mrd-grim-front a:active{color:var(--mrd-encre-forte)!important;}


/* ---------- une page du livre ---------- */

.mrd-grim{
  /* ====== LES TROIS VALEURS A CHANGER QUAND L'ILLUSTRATION EST PRETE ====== */
  /* Aucune adresse d'image dans ce fichier : elle se choisit dans la
     mediatheque, et l'extension l'ecrit ici. « none » veut dire « pas de
     dessin » — c'est alors le laiton dessine en CSS qui prend le relais. */
  --mrd-clip:none;
  --mrd-clip-v:none;   /* facultatif : version verticale dessinee expres. Sinon on pivote la premiere. */
  /* ======================================================================= */

  /* ====== LA GEOMETRIE DES ONGLETS, EN UN SEUL ENDROIT ======
     Une page trop courte coupait la colonne d'onglets : il en manquait un.
     Ces quatre valeurs servent DEUX FOIS — a dessiner les onglets, et a
     calculer la hauteur minimale du papier pour qu'ils tiennent tous. Elles
     ne peuvent donc plus se desaccorder.
     --mrd-onglets-nb est reecrit par l'extension avec le nombre reel
     d'onglets. 6 est la valeur de secours : c'est le maximum possible
     (Preambule, Carte, Journal, Contes, Carnets, Atelier).            */
  --mrd-onglets-nb:6;
  --mrd-onglet-l:clamp(6rem,9.6vw,7.8rem);            /* largeur sur la tranche */
  --mrd-onglet-h:calc(var(--mrd-onglet-l) * var(--mrd-onglet-ratio));     /* hauteur : rapport 2/3 */
  --mrd-onglet-ec:clamp(.3rem,1vw,.5rem);             /* l'ecart entre deux */
  --mrd-onglet-haut:clamp(2.4rem,6vw,4rem);           /* le retrait du haut */
  font-family:var(--mrd-police-corps)!important;color:var(--mrd-encre-forte)!important;
  margin:clamp(1rem,4vw,2.5rem) 0!important;padding:0!important;box-sizing:border-box!important;max-width:100%!important;}
@media (min-width:56rem){.mrd-grim{padding-right:clamp(2.1rem,3.4vw,2.7rem)!important;}}
.mrd-grim *{box-sizing:border-box!important;}
.mrd-grim .mrd-g-tome{position:relative!important;padding:0!important;isolation:isolate!important;}

.mrd-grim .mrd-g-onglets{display:flex!important;gap:clamp(.2rem,1vw,.4rem)!important;
  flex-wrap:wrap!important;justify-content:center!important;
  row-gap:clamp(.15rem,.8vw,.3rem)!important;
  overflow:visible!important;list-style:none!important;
  position:relative!important;z-index:3!important;
  padding:0 clamp(.3rem,1.6vw,.9rem) 0!important;
  margin:0 0 calc(-1 * clamp(1.8rem,6vw,2.6rem))!important;}
.mrd-grim .mrd-g-onglets li{margin:0!important;flex:0 0 auto!important;position:relative!important;}

/* ---------- le clip : votre dessin ----------
   image 1536x1024, exactement 3:2. Fenetre de l'etiquette mesuree au pixel :
   horizontalement 16%->84%, verticalement 19%->38%, donc centre a 29% du haut.
   Le retrait du bas (42%) place le texte exactement dans la fenetre.          */
.mrd-grim .mrd-g-onglets a{position:relative!important;isolation:isolate!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  font-family:var(--mrd-police-titres)!important;font-weight:700!important;
  font-size:var(--mrd-t-menu)!important;line-height:1.05!important;letter-spacing:.05em!important;
  text-transform:uppercase!important;text-decoration:none!important;text-align:center!important;
  color:var(--mrd-encre-forte)!important;
  width:clamp(5.4rem,19vw,7rem)!important;aspect-ratio:3/2!important;
  padding:0 16% 28%!important;border-radius:0!important;box-shadow:none!important;
  background-color:transparent!important;
  /* DEUX COUCHES, et c'est ce qui manquait.
     Le commentaire disait « sinon le laiton dessine en CSS prend le relais » —
     il n'existait pas. Quand --mrd-clip vaut none, l'onglet n'avait donc AUCUN
     fond : de l'encre vert sombre sur du cuir sombre, illisible.
     Maintenant le laiton dessine est toujours dessous. Si vous choisissez une
     image, elle se pose par-dessus et le recouvre entierement. */
  background-image:var(--mrd-clip),var(--mrd-laiton-h)!important;
  background-size:100% 100%,100% 100%!important;
  background-position:center,center!important;
  background-repeat:no-repeat,no-repeat!important;}

/* etat actif : l'etiquette s'assombrit, exactement dans la fenetre du clip */
.mrd-grim .mrd-g-onglets .mrd-g-actif a{color:var(--mrd-laiton)!important;}
.mrd-grim .mrd-g-onglets .mrd-g-actif a::before{content:""!important;position:absolute!important;z-index:-1!important;
  top:19%!important;bottom:62%!important;left:16%!important;right:16%!important;
  background-color:rgba(28,51,28,.88)!important;border-radius:2px!important;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.5)!important;}
.mrd-grim .mrd-g-onglets .mrd-g-actif a:hover::before,.mrd-grim .mrd-g-onglets .mrd-g-actif a:focus::before{background-color:rgba(28,51,28,.96)!important;}
.mrd-grim .mrd-g-onglets .mrd-g-actif a:hover,.mrd-grim .mrd-g-onglets .mrd-g-actif a:focus{color:var(--mrd-laiton-vif)!important;}
.mrd-grim .mrd-g-onglets a:hover,.mrd-grim .mrd-g-onglets a:focus{color:var(--mrd-encre-noire)!important;}
.mrd-grim .mrd-g-onglets a:focus{outline:2px solid var(--mrd-encre-forte)!important;outline-offset:2px!important;}

/* variations de pose, tres legeres : ce sont des clips de metal pinces sur une tranche */
.mrd-grim .mrd-g-onglets li:nth-child(1) a{transform:rotate(-.35deg) translateY(1px)!important;}
.mrd-grim .mrd-g-onglets li:nth-child(2) a{transform:rotate(.3deg)!important;}
.mrd-grim .mrd-g-onglets li:nth-child(3) a{transform:rotate(-.2deg) translateY(2px)!important;}
.mrd-grim .mrd-g-onglets li:nth-child(4) a{transform:rotate(.4deg)!important;}
.mrd-grim .mrd-g-onglets li:nth-child(5) a{transform:rotate(-.3deg) translateY(1px)!important;}
.mrd-grim .mrd-g-onglets .mrd-g-actif a{transform:rotate(0) translateY(-2px)!important;}

/* ---------- au-dela de 56rem : les clips passent sur la tranche droite ----------
   Le meme fichier pivote d'un quart de tour : la languette pointe alors vers la
   gauche, donc sur le papier, et la fenetre devient verticale, centree a 71%
   depuis le bord gauche — d'ou le retrait de 42% a gauche.                      */
@media (min-width:56rem){
  .mrd-grim .mrd-g-onglets{position:absolute!important;
    top:var(--mrd-onglet-haut)!important;
    right:calc(-1 * clamp(2.1rem,3.4vw,2.7rem))!important;left:auto!important;
    display:block!important;overflow:visible!important;padding:0!important;margin:0!important;
    width:var(--mrd-onglet-l)!important;}
  .mrd-grim .mrd-g-onglets li{margin:0 0 var(--mrd-onglet-ec)!important;}
  .mrd-grim .mrd-g-onglets li:last-child{margin-bottom:0!important;}

  /* Le format de page ci-dessus suffit largement a loger la colonne
     d'onglets. Ce plancher n'est la que comme filet : si un jour vous
     ajoutez des sections, la page s'allonge d'elle-meme au lieu de couper
     le dernier onglet. C'est ce qui manquait, et c'est ce qui coupait.  */
  .mrd-grim .mrd-g-page{
    min-height:calc(
      var(--mrd-onglet-haut) * 2
      + var(--mrd-onglet-h) * var(--mrd-onglets-nb)
      + var(--mrd-onglet-ec) * (var(--mrd-onglets-nb) - 1)
    )!important;}
  /* Le texte est enferme dans la fenetre mesuree — 62%->81% en largeur,
     16%->84% en hauteur — plus 2 a 4 points de garde de chaque cote,
     pour qu'il ne vienne jamais toucher le laiton.                      */
  .mrd-grim .mrd-g-onglets a{writing-mode:vertical-rl!important;text-orientation:mixed!important;
    width:100%!important;height:var(--mrd-onglet-h)!important;aspect-ratio:auto!important;
    font-size:var(--mrd-t-petit)!important;letter-spacing:.06em!important;
    white-space:nowrap!important;
    padding:20% 20% 20% 64%!important;
    /* AUCUN fond ici : le dessin du clip est porte par ::after, qui passe
       DERRIERE l'onglet. Un fond opaque a cet endroit masque le dessin —
       c'est exactement ce qui s'est produit. Le laiton de secours est donc
       dans ::after lui aussi, sous le dessin. */
    background-image:none!important;
    border-radius:0!important;box-shadow:none!important;}
  /* le dessin, pivote : largeur = hauteur du clip, hauteur = largeur du clip */
  .mrd-grim .mrd-g-onglets a::after{content:""!important;position:absolute!important;z-index:-2!important;
    top:50%!important;left:50%!important;
    width:150%!important;height:66.6667%!important;
    transform:translate(-50%,-50%) rotate(90deg)!important;transform-origin:center center!important;
    /* Deux couches, dans cet ordre : VOTRE dessin devant, le laiton de
       secours derriere. S'il y a un dessin, il masque le degrade ; s'il n'y
       en a pas, le degrade prend sa place. ::after etant pivote d'un quart
       de tour, le degrade « horizontal » y devient vertical a l'ecran. */
    background-image:var(--mrd-clip),var(--mrd-laiton-h)!important;
    background-size:100% 100%,100% 100%!important;
    background-position:center,center!important;
    background-repeat:no-repeat,no-repeat!important;}
  /* si une version verticale est dessinee un jour, elle reprend la main sans rotation */
  .mrd-grim.mrd-clip-vertical .mrd-g-onglets a::after{transform:translate(-50%,-50%)!important;
    width:100%!important;height:100%!important;
    background-image:var(--mrd-clip-v),var(--mrd-laiton-v)!important;}
  /* la fenetre pivote aussi : elle est desormais a droite */
  .mrd-grim .mrd-g-onglets .mrd-g-actif a::before{top:16%!important;bottom:16%!important;
    left:62%!important;right:19%!important;}
  .mrd-grim .mrd-g-onglets li:nth-child(1) a{transform:rotate(.3deg) translateX(-1px)!important;}
  .mrd-grim .mrd-g-onglets li:nth-child(2) a{transform:rotate(-.25deg)!important;}
  .mrd-grim .mrd-g-onglets li:nth-child(3) a{transform:rotate(.2deg) translateX(-2px)!important;}
  .mrd-grim .mrd-g-onglets li:nth-child(4) a{transform:rotate(-.35deg)!important;}
  .mrd-grim .mrd-g-onglets li:nth-child(5) a{transform:rotate(.25deg) translateX(-1px)!important;}
  .mrd-grim .mrd-g-onglets .mrd-g-actif a{transform:rotate(0) translateX(-4px)!important;}
}

/* ---------- LE FORMAT DE PAGE ----------
   Une page de livre a un format, et il ne depend pas de ce qu'on a ecrit
   dessus. Toutes les pages du Sanctuaire ont donc la meme proportion :
   1 de large pour 1,414 de haut, le format d'un livre. Une page a moitie
   vide reste une page entiere, avec du blanc en bas.
   Un texte plus long qu'une page fait descendre le papier : c'est le seul
   cas ou la hauteur bouge, et c'est necessaire — sinon le texte serait
   coupe. Le decoupage en pages successives, c'est le feuilletage, etape 2. */
.mrd-grim .mrd-g-page{position:relative!important;isolation:isolate!important;
  padding:clamp(3.2rem,9vw,4.2rem) clamp(1.3rem,4.2vw,2.9rem) clamp(3rem,6.5vw,4rem)!important;
  aspect-ratio:1 / var(--mrd-page-ratio,1.414)!important;}
@media (min-width:56rem){
  .mrd-grim .mrd-g-page{
  padding-top:clamp(1.4rem,4vw,2.4rem)!important;
  padding-right:clamp(5.6rem,9.4vw,6.9rem)!important;}}
.mrd-grim .mrd-g-page::before{content:""!important;position:absolute!important;z-index:-1!important;
  top:0!important;left:0!important;right:0!important;bottom:0!important;
  background-color:var(--mrd-papier)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.84 0 0 0 0 0.68 0 0 0 0 0.52 0 0 0 -1.1 0.55'/%3E%3C/filter%3E%3Crect width='560' height='560' filter='url(%23t)'/%3E%3C/svg%3E"),linear-gradient(103deg,transparent 22%,rgba(216,213,205,.32) 22.4%,transparent 23%),linear-gradient(-94deg,transparent 57%,rgba(255,255,255,.55) 57.5%,transparent 58%),linear-gradient(86deg,transparent 74%,rgba(216,213,205,.24) 74.5%,transparent 75%),radial-gradient(ellipse at 12% 8%,rgba(216,213,205,.42),transparent 56%),radial-gradient(ellipse at 88% 94%,rgba(216,213,205,.34),transparent 50%),repeating-linear-gradient(0deg,rgba(216,213,205,.10) 0 1px,transparent 1px 4px)!important;
  background-size:320px 320px,560px 560px,auto,auto,auto,auto,auto,auto!important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='1160' preserveAspectRatio='none'%3E%3Cfilter id='d2' x='-5%25' y='-3%25' width='110%25' height='107%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016' numOctaves='3' seed='23' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='10' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='12' y='16' width='776' height='1128' fill='%23ffffff' filter='url(%23d2)'/%3E%3C/svg%3E")!important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='1160' preserveAspectRatio='none'%3E%3Cfilter id='d2' x='-5%25' y='-3%25' width='110%25' height='107%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016' numOctaves='3' seed='23' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='10' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='12' y='16' width='776' height='1128' fill='%23ffffff' filter='url(%23d2)'/%3E%3C/svg%3E")!important;
  -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
  filter:drop-shadow(3px 4px 0 rgba(216,213,205,.85)) drop-shadow(6px 5px 0 rgba(216,213,205,.5)) drop-shadow(9px 11px 18px rgba(28,51,28,.26))!important;}
.mrd-grim .mrd-g-reliure{position:absolute!important;z-index:-1!important;
  top:clamp(.6rem,2vw,1.4rem)!important;bottom:clamp(.6rem,2vw,1.4rem)!important;left:0!important;
  width:clamp(.45rem,1.4vw,.75rem)!important;
  background-image:linear-gradient(90deg,var(--mrd-encre-forte),var(--mrd-encre) 55%,var(--mrd-encre-douce))!important;border-radius:2px 0 0 2px!important;}

.mrd-grim .mrd-g-entete{display:flex!important;flex-wrap:wrap!important;justify-content:space-between!important;
  gap:.3rem 1rem!important;align-items:baseline!important;border-bottom:1px solid var(--mrd-filet)!important;
  padding-bottom:clamp(.4rem,1.5vw,.7rem)!important;margin:0 0 clamp(1rem,3.5vw,1.9rem)!important;}
@media (max-width:40rem){.mrd-grim .mrd-g-entete span:last-child{display:none!important;}}
.mrd-grim .mrd-g-entete span{font-family:var(--mrd-police-titres)!important;
  font-size:var(--mrd-t-menu)!important;line-height:1.4!important;
  letter-spacing:.18em!important;text-transform:uppercase!important;color:var(--mrd-encre)!important;}
.mrd-grim .mrd-g-corps{display:grid!important;grid-template-columns:1fr!important;gap:clamp(1rem,3vw,1.8rem)!important;}
@media (min-width:52rem){.mrd-grim .mrd-g-corps{grid-template-columns:minmax(0,1fr) minmax(0,clamp(9.5rem,18vw,13rem))!important;gap:clamp(1.2rem,3vw,2.2rem)!important;}}
.mrd-grim .mrd-g-texte{max-width:36rem!important;}
.mrd-grim h1{font-family:var(--mrd-police-titres)!important;font-weight:400!important;
  font-size:var(--mrd-t-h1)!important;line-height:1.15!important;
  color:var(--mrd-encre)!important;margin:0 0 clamp(.7rem,2.5vw,1.2rem)!important;}
.mrd-grim h2{font-family:var(--mrd-police-titres)!important;font-weight:700!important;
  font-size:var(--mrd-t-h2)!important;line-height:1.35!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--mrd-encre)!important;
  margin:clamp(1.4rem,4vw,2.2rem) 0 clamp(.5rem,1.8vw,.8rem)!important;}
.mrd-grim p{font-size:var(--mrd-corps)!important;line-height:var(--mrd-interligne)!important;
  font-family:var(--mrd-police-corps)!important;
  margin:0 0 clamp(.8rem,2.4vw,1.2rem)!important;}
.mrd-grim .mrd-g-ouv::first-letter{font-family:var(--mrd-police-titres)!important;
  font-size:var(--mrd-t-lettrine)!important;line-height:.84!important;
  float:left!important;padding:.08em .12em 0 0!important;color:var(--mrd-encre-douce)!important;}
.mrd-grim .mrd-g-souffle{text-align:center!important;font-style:italic!important;color:var(--mrd-encre)!important;
  font-size:calc(var(--mrd-corps) * 1.2)!important;line-height:var(--mrd-interligne)!important;
  margin:clamp(1.2rem,4vw,2.2rem) auto!important;max-width:26rem!important;}
.mrd-grim .mrd-g-orn{text-align:center!important;color:var(--mrd-laiton)!important;letter-spacing:.7em!important;
  font-size:var(--mrd-corps)!important;line-height:1!important;margin:clamp(1.2rem,4vw,2.2rem) 0!important;}
.mrd-grim .mrd-g-marge{font-size:var(--mrd-corps)!important;line-height:var(--mrd-interligne)!important;color:var(--mrd-encre)!important;}
@media (min-width:52rem){.mrd-grim .mrd-g-marge{position:sticky!important;position:-webkit-sticky!important;
  top:clamp(1rem,3vw,2rem)!important;align-self:start!important;
  max-height:calc(100vh - clamp(2rem,6vw,4rem))!important;overflow-y:auto!important;overscroll-behavior:contain!important;}}
.mrd-grim .mrd-g-marge .mrd-g-mt{font-family:var(--mrd-police-titres)!important;font-weight:700!important;
  font-size:var(--mrd-t-menu)!important;line-height:var(--mrd-interligne)!important;letter-spacing:.16em!important;
  text-transform:uppercase!important;color:var(--mrd-encre)!important;margin:0 0 clamp(.5rem,1.8vw,.8rem)!important;}
.mrd-grim .mrd-g-renvoi{border-left:2px solid var(--mrd-laiton)!important;padding:0 0 0 clamp(.6rem,2vw,.9rem)!important;
  margin:0 0 clamp(.8rem,2.4vw,1.2rem)!important;font-style:italic!important;}
.mrd-grim .mrd-g-renvoi:last-child{margin-bottom:0!important;}
.mrd-grim .mrd-g-folioref{font-style:normal!important;font-family:var(--mrd-police-titres)!important;
  font-size:var(--mrd-t-menu)!important;letter-spacing:.1em!important;text-transform:uppercase!important;
  color:var(--mrd-encre)!important;display:block!important;margin-top:.2em!important;}
.mrd-grim .mrd-g-folio{position:absolute!important;
  left:clamp(1.3rem,4.2vw,2.9rem)!important;right:auto!important;
  bottom:clamp(1rem,2.6vw,1.5rem)!important;text-align:left!important;
  font-family:var(--mrd-police-titres)!important;font-size:var(--mrd-t-menu)!important;
  line-height:1!important;letter-spacing:.3em!important;color:var(--mrd-encre)!important;}
/* Le folio : a gauche sur telephone, ou le coin corne occupe la droite ;
   centre au bas de la page des 56rem, comme dans un livre.
   ATTENTION : cette regle doit rester APRES celle du dessus. Elle y etait
   avant, et la regle de base la recouvrait — le folio restait a gauche
   partout sans qu'on comprenne pourquoi. */
@media (min-width:56rem){
  .mrd-grim .mrd-g-folio{left:0!important;right:0!important;text-align:center!important;}}
.mrd-grim .mrd-g-coin{position:absolute!important;right:clamp(.4rem,1.4vw,.9rem)!important;bottom:clamp(.4rem,1.4vw,.9rem)!important;
  width:clamp(6.6rem,19vw,10rem)!important;height:clamp(6.6rem,19vw,10rem)!important;
  display:block!important;text-decoration:none!important;}
.mrd-grim .mrd-g-coin::before{content:""!important;position:absolute!important;right:0!important;bottom:0!important;
  width:100%!important;height:100%!important;
  background:linear-gradient(315deg,color-mix(in srgb,var(--mrd-filet) 70%,var(--mrd-papier)) 0 40%,color-mix(in srgb,var(--mrd-filet) 50%,transparent) 40% 43%,transparent 43%)!important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' preserveAspectRatio='none'%3E%3Cfilter id='c' x='-12%25' y='-12%25' width='128%25' height='128%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' seed='9' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='9' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='0' y='0' width='214' height='214' fill='%23ffffff' filter='url(%23c)'/%3E%3C/svg%3E")!important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' preserveAspectRatio='none'%3E%3Cfilter id='c' x='-12%25' y='-12%25' width='128%25' height='128%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' seed='9' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='9' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='0' y='0' width='214' height='214' fill='%23ffffff' filter='url(%23c)'/%3E%3C/svg%3E")!important;
  -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;}
.mrd-grim .mrd-g-coin span{position:absolute!important;right:clamp(.3rem,1.2vw,.6rem)!important;bottom:clamp(.3rem,1.2vw,.6rem)!important;
  display:block!important;max-width:clamp(4.4rem,12.5vw,6.8rem)!important;text-align:right!important;
  font-family:var(--mrd-police-titres)!important;font-size:var(--mrd-t-menu)!important;
  line-height:var(--mrd-interligne)!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--mrd-encre-forte)!important;}
.mrd-grim .mrd-g-coin em{display:block!important;font-family:var(--mrd-police-corps)!important;
  font-size:var(--mrd-t-petit)!important;letter-spacing:0!important;text-transform:none!important;
  line-height:var(--mrd-interligne)!important;color:var(--mrd-encre)!important;margin-top:.15em!important;}
.mrd-grim .mrd-g-coin:hover::before,.mrd-grim .mrd-g-coin:focus::before{background:linear-gradient(315deg,var(--mrd-laiton) 0 44%,rgba(240,194,153,.55) 44% 47%,transparent 47%)!important;}
.mrd-grim .mrd-g-coin:focus{outline:2px solid var(--mrd-encre)!important;outline-offset:-4px!important;}
.mrd-grim a:link,.mrd-grim a:visited{color:var(--mrd-encre)!important;text-decoration:underline!important;
  text-decoration-color:var(--mrd-laiton)!important;text-decoration-thickness:1px!important;text-underline-offset:.18em!important;background-color:transparent!important;}
.mrd-grim a:hover,.mrd-grim a:focus{color:var(--mrd-encre-forte)!important;text-decoration-color:var(--mrd-encre-douce)!important;text-decoration-thickness:2px!important;}
.mrd-grim a:active{color:var(--mrd-encre-forte)!important;}
.mrd-grim .mrd-g-onglets a:link,.mrd-grim .mrd-g-onglets a:visited,.mrd-grim .mrd-g-coin:link,.mrd-grim .mrd-g-coin:visited{text-decoration:none!important;}


/* ---------- le titre repris dans la page ---------- */
.mrd-grim .mrd-g-titre{font-family:var(--mrd-police-titres)!important;font-weight:400!important;
  font-size:var(--mrd-t-h1)!important;line-height:1.15!important;
  color:var(--mrd-encre)!important;margin:0 0 clamp(.7rem,2.5vw,1.2rem)!important;}

/* ---------- le contenu ecrit en blocs ---------- */
.mrd-grim .mrd-g-texte>*:first-child{margin-top:0!important;}
.mrd-grim .mrd-g-texte>p:first-of-type::first-letter{font-family:var(--mrd-police-titres)!important;
  font-size:var(--mrd-t-lettrine)!important;line-height:.84!important;
  float:left!important;padding:.08em .12em 0 0!important;color:var(--mrd-encre-douce)!important;}
.mrd-grim .mrd-g-texte h2,.mrd-grim .mrd-g-texte h3,.mrd-grim .mrd-g-texte h4{
  font-family:var(--mrd-police-titres)!important;font-weight:700!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--mrd-encre)!important;
  margin:clamp(1.4rem,4vw,2.2rem) 0 clamp(.5rem,1.8vw,.8rem)!important;}
.mrd-grim .mrd-g-texte h2{font-size:var(--mrd-t-h2)!important;line-height:1.35!important;}
.mrd-grim .mrd-g-texte h3{font-size:var(--mrd-t-petit)!important;line-height:var(--mrd-interligne)!important;}
.mrd-grim .mrd-g-texte h4{font-size:var(--mrd-t-petit)!important;line-height:var(--mrd-interligne)!important;}
.mrd-grim .mrd-g-texte blockquote{margin:clamp(1.2rem,4vw,2.2rem) auto!important;
  padding:0 0 0 clamp(.9rem,3vw,1.5rem)!important;border-left:3px solid var(--mrd-laiton)!important;
  font-style:italic!important;color:var(--mrd-encre)!important;
  font-size:calc(var(--mrd-corps) * 1.2)!important;line-height:var(--mrd-interligne)!important;max-width:30rem!important;}
.mrd-grim .mrd-g-texte blockquote p{font-size:inherit!important;line-height:inherit!important;}
.mrd-grim .mrd-g-texte ul,.mrd-grim .mrd-g-texte ol{font-size:var(--mrd-corps)!important;
  line-height:var(--mrd-interligne)!important;margin:0 0 clamp(.8rem,2.4vw,1.2rem) clamp(1.1rem,3.4vw,1.6rem)!important;padding:0!important;}
.mrd-grim .mrd-g-texte li{margin:0 0 .35em!important;}
.mrd-grim .mrd-g-texte figure,.mrd-grim .mrd-g-texte .wp-block-image{margin:clamp(1.2rem,4vw,2rem) 0!important;max-width:100%!important;}
.mrd-grim .mrd-g-texte img{max-width:100%!important;height:auto!important;display:block!important;border-radius:2px!important;
  box-shadow:0 3px 14px rgba(28,51,28,.2)!important;}
.mrd-grim .mrd-g-texte figcaption{font-style:italic!important;color:var(--mrd-encre)!important;text-align:center!important;
  font-size:var(--mrd-t-petit)!important;line-height:1.55!important;margin-top:.5em!important;}
.mrd-grim .mrd-g-texte hr{border:0!important;height:clamp(.8rem,2.4vw,1.2rem)!important;
  margin:clamp(1.4rem,4vw,2.4rem) auto!important;max-width:14rem!important;
  background-image:radial-gradient(circle,var(--mrd-laiton) 40%,transparent 42%)!important;
  background-size:clamp(.4rem,1.2vw,.6rem) clamp(.4rem,1.2vw,.6rem)!important;
  background-position:center!important;background-repeat:space no-repeat!important;}

/* ---------- si aucune image de clip n'est choisie ----------
   Le laiton dessine ci-dessus s'affiche a sa place. On garde seulement une
   hauteur minimale, pour que l'etiquette ne soit jamais ecrasee. */
.mrd-grim .mrd-g-onglets a{min-height:2.4rem!important;
  border-radius:2px 2px 0 0!important;
  box-shadow:inset 0 -1px 0 rgba(110,74,34,.4),
             0 1px 3px rgba(28,51,28,.25)!important;}


/* =====================================================================
   LES CINQ COMPOSITIONS
   Chacune se pose dans le corps de l'article depuis l'insertion de blocs
   (le « + » bleu, onglet Compositions, categorie Le Sanctuaire). Elles
   n'existent visuellement que dans le parchemin : hors du Sanctuaire,
   ce sont des blocs WordPress ordinaires, et ce n'est pas grave.
   Toute la palette est celle du livre : encre var(--mrd-encre-forte), encre seconde
   var(--mrd-encre), filet var(--mrd-filet), laiton var(--mrd-laiton).
   ===================================================================== */

/* ---------- 1. la planche ---------- */
.mrd-grim .mrd-g-texte .mrd-m-planche{margin:clamp(1.6rem,5vw,2.8rem) 0!important;
  padding:clamp(.9rem,3vw,1.5rem)!important;
  border:1px solid var(--mrd-filet)!important;border-radius:2px!important;
  background-color:rgba(255,255,255,.28)!important;}
.mrd-grim .mrd-g-texte .mrd-m-planche-rang{font-family:var(--mrd-police-titres)!important;
  text-transform:uppercase!important;letter-spacing:.14em!important;
  font-size:var(--mrd-t-petit)!important;color:var(--mrd-encre)!important;
  text-align:center!important;margin:0 0 clamp(.6rem,2vw,1rem)!important;}
.mrd-grim .mrd-g-texte .mrd-m-planche-image{margin:0 0 clamp(.8rem,2.5vw,1.3rem)!important;}
.mrd-grim .mrd-g-texte .mrd-m-planche-notes{counter-reset:mrd-note!important;list-style:none!important;
  margin:0!important;padding:0!important;}
.mrd-grim .mrd-g-texte .mrd-m-planche-notes>li{counter-increment:mrd-note!important;
  position:relative!important;list-style:none!important;
  padding-left:clamp(1.9rem,5.5vw,2.4rem)!important;
  margin:0 0 clamp(.4rem,1.4vw,.6rem)!important;
  font-size:var(--mrd-corps)!important;line-height:1.55!important;color:var(--mrd-encre)!important;}
.mrd-grim .mrd-g-texte .mrd-m-planche-notes>li::before{content:counter(mrd-note)!important;
  position:absolute!important;left:0!important;top:.1em!important;
  width:clamp(1.25rem,3.6vw,1.5rem)!important;height:clamp(1.25rem,3.6vw,1.5rem)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid var(--mrd-encre)!important;border-radius:50%!important;
  font-family:var(--mrd-police-titres)!important;
  font-size:var(--mrd-t-petit)!important;color:var(--mrd-encre)!important;}
.mrd-grim .mrd-g-texte .mrd-m-planche-notes>li strong{color:var(--mrd-encre-forte)!important;}

/* ---------- 2. les quatre etapes ---------- */
.mrd-grim .mrd-g-texte .mrd-m-etapes{margin:clamp(1.6rem,5vw,2.8rem) 0!important;
  padding-top:clamp(.8rem,2.5vw,1.2rem)!important;border-top:1px solid var(--mrd-filet)!important;}
.mrd-grim .mrd-g-texte .mrd-m-etapes>h3{text-align:center!important;margin-top:0!important;}
.mrd-grim .mrd-g-texte .mrd-m-etapes-rang{display:flex!important;flex-wrap:wrap!important;
  align-items:flex-start!important;gap:clamp(.5rem,2vw,1rem)!important;margin:0!important;}
.mrd-grim .mrd-g-texte .mrd-m-etapes-rang .wp-block-column{
  flex-basis:calc(50% - clamp(.25rem,1vw,.5rem))!important;min-width:0!important;}
@media (min-width:48rem){
  .mrd-grim .mrd-g-texte .mrd-m-etapes-rang .wp-block-column{
    flex-basis:calc(25% - clamp(.375rem,1.5vw,.75rem))!important;}}
.mrd-grim .mrd-g-texte .mrd-m-etapes-rang figure{margin:0!important;}
.mrd-grim .mrd-g-texte .mrd-m-etapes-rang figcaption{text-align:left!important;
  font-size:var(--mrd-t-petit)!important;font-style:normal!important;}
.mrd-grim .mrd-g-texte .mrd-m-etapes-rang figcaption strong{font-family:var(--mrd-police-titres)!important;
  color:var(--mrd-encre-forte)!important;margin-right:.25em!important;}

/* ---------- 3. l'emplacement de carte ---------- */
.mrd-grim .mrd-g-texte .mrd-m-carte{margin:clamp(1.4rem,4.5vw,2.4rem) 0!important;
  padding:clamp(.8rem,2.6vw,1.2rem) clamp(.9rem,3vw,1.4rem)!important;
  border:1px solid var(--mrd-filet)!important;border-left:3px solid var(--mrd-laiton)!important;border-radius:2px!important;
  background-color:rgba(255,255,255,.22)!important;}
.mrd-grim .mrd-g-texte .mrd-m-carte-tete{font-family:var(--mrd-police-titres)!important;
  text-transform:uppercase!important;letter-spacing:.13em!important;
  font-size:var(--mrd-t-petit)!important;color:var(--mrd-encre)!important;
  margin:0 0 .45em!important;}
.mrd-grim .mrd-g-texte .mrd-m-carte-lieu{margin:0 0 .5em!important;text-indent:0!important;
  font-size:var(--mrd-corps)!important;line-height:1.5!important;}
.mrd-grim .mrd-g-texte .mrd-m-carte-lien{margin:0!important;text-indent:0!important;
  font-style:italic!important;font-size:var(--mrd-corps)!important;}

/* ---------- 4. le bandeau de regime ---------- */
.mrd-grim .mrd-g-texte .mrd-m-regime{margin:clamp(.9rem,3vw,1.5rem) 0 clamp(1.4rem,4.5vw,2.2rem)!important;
  padding:clamp(.5rem,1.8vw,.75rem) 0!important;
  border-top:1px solid var(--mrd-filet)!important;border-bottom:1px solid var(--mrd-filet)!important;}
.mrd-grim .mrd-g-texte .mrd-m-regime-liste{list-style:none!important;margin:0!important;padding:0!important;
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(.3rem,1.4vw,.5rem) clamp(.8rem,3vw,1.6rem)!important;}
@media (min-width:48rem){
  .mrd-grim .mrd-g-texte .mrd-m-regime-liste{grid-template-columns:repeat(4,minmax(0,1fr))!important;}}
.mrd-grim .mrd-g-texte .mrd-m-regime-liste>li{list-style:none!important;margin:0!important;padding:0!important;
  line-height:1.4!important;}
.mrd-grim .mrd-g-texte .mrd-m-regime-cle{display:inline!important;
  font-family:var(--mrd-police-titres)!important;text-transform:uppercase!important;
  letter-spacing:.11em!important;font-size:var(--mrd-t-menu)!important;
  color:var(--mrd-encre)!important;margin-right:.4em!important;}
.mrd-grim .mrd-g-texte .mrd-m-regime-val{font-size:var(--mrd-corps)!important;color:var(--mrd-encre-forte)!important;}

/* ---------- 5. le cartouche de fiche ---------- */
.mrd-grim .mrd-g-texte .mrd-m-cartouche{margin:0 0 clamp(1.2rem,4vw,2rem)!important;
  text-align:center!important;padding-bottom:clamp(.7rem,2.2vw,1.1rem)!important;
  border-bottom:1px solid var(--mrd-filet)!important;}
.mrd-grim .mrd-g-texte .mrd-m-cartouche-nom{font-family:var(--mrd-police-titres)!important;
  font-size:var(--mrd-t-h1)!important;line-height:1.25!important;
  color:var(--mrd-encre-forte)!important;margin:0 0 .2em!important;text-indent:0!important;}
.mrd-grim .mrd-g-texte .mrd-m-cartouche-alias{font-style:italic!important;color:var(--mrd-encre)!important;
  font-size:var(--mrd-corps)!important;margin:0 0 .5em!important;text-indent:0!important;}
.mrd-grim .mrd-g-texte .mrd-m-cartouche-ou{margin:0!important;text-indent:0!important;
  font-size:var(--mrd-corps)!important;color:var(--mrd-encre-forte)!important;}

/* La lettrine : la regle existante visant p:first-of-type continue de tomber
   sur le premier paragraphe meme si un module est pose avant lui. Rien a faire. */


/* =====================================================================
   LE SOMMAIRE D'UN CHAPITRE
   Une page de chapitre n'est pas une liste d'articles : c'est une table.
   Un folio a droite, un titre a gauche, une ligne pointillee entre les
   deux — et sous chaque entree, en plus petit, ce qu'on y trouve.
   Meme palette que partout : encre var(--mrd-encre-forte), encre seconde var(--mrd-encre),
   filet var(--mrd-filet), laiton var(--mrd-laiton).
   ===================================================================== */

.mrd-grim .mrd-g-sommaire{list-style:none!important;counter-reset:none!important;
  margin:0!important;padding:0!important;}
.mrd-grim .mrd-g-sommaire>li{list-style:none!important;margin:0 0 clamp(.7rem,2.2vw,1.1rem)!important;
  padding:0!important;}

.mrd-grim .mrd-g-entree-lien{display:flex!important;align-items:baseline!important;
  gap:clamp(.3rem,1.2vw,.6rem)!important;text-decoration:none!important;
  background-color:transparent!important;}
.mrd-grim .mrd-g-entree-nom{font-family:var(--mrd-police-corps)!important;
  font-size:var(--mrd-corps)!important;line-height:1.35!important;
  color:var(--mrd-encre-forte)!important;flex:0 1 auto!important;}
.mrd-grim .mrd-g-entree-fil{flex:1 1 auto!important;min-width:1.5rem!important;
  height:1px!important;align-self:flex-end!important;position:relative!important;
  bottom:.28em!important;
  background-image:radial-gradient(circle,var(--mrd-filet) 45%,transparent 47%)!important;
  background-size:5px 1px!important;background-repeat:repeat-x!important;}
.mrd-grim .mrd-g-entree-folio{font-family:var(--mrd-police-titres)!important;
  font-size:var(--mrd-t-petit)!important;letter-spacing:.14em!important;
  color:var(--mrd-encre)!important;flex:0 0 auto!important;}
.mrd-grim .mrd-g-entree-dit{margin:.15em 0 0!important;text-indent:0!important;
  font-size:var(--mrd-corps)!important;line-height:1.5!important;
  font-style:italic!important;color:var(--mrd-encre)!important;}

.mrd-grim .mrd-g-entree-lien:hover .mrd-g-entree-nom,
.mrd-grim .mrd-g-entree-lien:focus .mrd-g-entree-nom{color:var(--mrd-encre-noire)!important;
  text-decoration:underline!important;text-decoration-color:var(--mrd-laiton)!important;
  text-underline-offset:.18em!important;}
.mrd-grim .mrd-g-entree-lien:focus{outline:2px solid var(--mrd-encre)!important;outline-offset:3px!important;}

/* les trois sortes de fiches des Carnets */
.mrd-grim .mrd-g-sortes{list-style:none!important;margin:0!important;padding:0!important;}
.mrd-grim .mrd-g-sortes>li{list-style:none!important;
  display:flex!important;align-items:baseline!important;
  gap:clamp(.3rem,1.2vw,.6rem)!important;
  margin:0 0 clamp(.3rem,1.2vw,.5rem)!important;padding:0 0 clamp(.25rem,1vw,.4rem)!important;
  border-bottom:1px dotted var(--mrd-filet)!important;}
.mrd-grim .mrd-g-sortes a{font-family:var(--mrd-police-corps)!important;
  font-size:var(--mrd-corps)!important;text-decoration:none!important;
  color:var(--mrd-encre-forte)!important;background-color:transparent!important;flex:1 1 auto!important;}
.mrd-grim .mrd-g-sortes a:hover,.mrd-grim .mrd-g-sortes a:focus{color:var(--mrd-encre-noire)!important;
  text-decoration:underline!important;text-decoration-color:var(--mrd-laiton)!important;}

.mrd-grim .mrd-g-vide{font-style:italic!important;color:var(--mrd-encre)!important;text-indent:0!important;}

/* Sur une page de chapitre il n'y a pas de lettrine : la premiere ligne
   est une phrase de presentation, pas une ouverture de recit. */
.mrd-grim-chapitre .mrd-g-texte>p:first-of-type::first-letter{font-family:inherit!important;
  font-size:inherit!important;line-height:inherit!important;float:none!important;
  margin:0!important;padding:0!important;color:inherit!important;}


/* =====================================================================
   LE LIVRE : LARGEUR BORNEE, DOUBLE PAGE, PAGES QUI SE TOURNENT
   ---------------------------------------------------------------------
   Trois defauts reglés ici, et ils n'en font qu'un :

   1. La page prenait toute la largeur du conteneur. Sur un ecran de
      2400 px, le conteneur Elementor fait 1500 px : la page faisait
      1457 px de large, donc 2060 px de haut. Ce n'est pas un livre,
      c'est une affiche. La page a maintenant une LARGEUR DE PAGE, et
      le livre se centre.

   2. Un article long debordait par le bas. Il ne deborde plus : le
      texte coule dans des colonnes CSS de la hauteur d'une page.
      Chaque colonne EST une page.

   3. Deux pages cote a cote des qu'il y a la place, avec la reliure au
      milieu — un livre ouvert. Sous 56rem, une seule page et on fait
      defiler : c'etait la demande.
   ===================================================================== */

/* =====================================================================
   LE PUPITRE DE REGLAGE
   ---------------------------------------------------------------------
   Toutes les valeurs qu'on peut vouloir changer sont ici, et NULLE PART
   AILLEURS. Le reste de la feuille les utilise, il ne les redecide pas.
   L'extension les reecrit depuis Reglages -> Le Sanctuaire : vous n'avez
   donc jamais a ouvrir ce fichier.

   C'etait un defaut : 58 tailles etaient ecrites en dur, et changer le
   corps du texte demandait de repasser partout.
   ===================================================================== */
.mrd-grim{
  /* ---- la page ---- */
  --mrd-page-l:clamp(19rem,92vw,42rem);        /* largeur d'UNE page */
  --mrd-page-ratio:1.414;                      /* hauteur / largeur d'une page */
  --mrd-page-h:calc(var(--mrd-page-l) * var(--mrd-page-ratio));
  --mrd-onglet-ratio:1.5;                      /* hauteur / largeur d'un onglet */
  --mrd-gouttiere:clamp(1.6rem,4vw,3.2rem);    /* l'espace entre les deux pages */
  --mrd-marge:clamp(1.4rem,3.6vw,2.6rem);      /* la marge interieure du papier */
  --mrd-marge-onglets:clamp(1.6rem,4vw,2.8rem);/* la marge sous les onglets */
  --mrd-onglet-dehors:.66;                     /* part de l'onglet hors du volume */

  /* ---- le laiton dessine, quand aucune image n'est choisie ----
     Contraste verifie : l'encre var(--mrd-encre-forte) sur le ton median #D9B382 donne
     6,96 contre 1, et 8,5 sur les parties claires. Lisible partout. */
  /* Le degrade de laiton se construit sur UNE seule couleur : --mrd-plaque.
     Les six teintes qui le composent en sont des melanges, calcules par le
     navigateur. Changez la plaque, tout le laiton suit — les onglets, les
     boutons de page, sans avoir a retoucher six valeurs a la main. */
  --mrd-plaque:#D9B382;
  --mrd-l1:color-mix(in srgb,var(--mrd-plaque) 55%,#ffffff);
  --mrd-l2:color-mix(in srgb,var(--mrd-plaque) 78%,#ffffff);
  --mrd-l3:var(--mrd-plaque);
  --mrd-l4:color-mix(in srgb,var(--mrd-plaque) 88%,#000000);
  --mrd-l5:color-mix(in srgb,var(--mrd-plaque) 86%,#ffffff);
  --mrd-l6:color-mix(in srgb,var(--mrd-plaque) 92%,#000000);
  --mrd-laiton-h:linear-gradient(176deg,
    var(--mrd-l1) 0%,var(--mrd-l2) 22%,var(--mrd-l3) 48%,
    var(--mrd-l4) 62%,var(--mrd-l5) 82%,var(--mrd-l6) 100%);
  --mrd-laiton-v:linear-gradient(86deg,
    var(--mrd-l6) 0%,var(--mrd-l5) 18%,var(--mrd-l4) 38%,
    var(--mrd-l3) 52%,var(--mrd-l2) 78%,var(--mrd-l1) 100%);

  /* ---- la palette ----
     Six couleurs portent tout le livre. Elles etaient ecrites en dur, la
     premiere 46 fois : changer l'encre demandait de repasser partout. */
  --mrd-papier:#FBF6F1;        /* le fond du parchemin */
  --mrd-encre:#2A4A3D;         /* l'encre courante */
  --mrd-encre-forte:#1C331C;   /* les titres, le texte principal */
  --mrd-encre-douce:#3F6B57;   /* les chiffres de chapitre, la reliure */
  --mrd-filet:#D8D5CD;         /* les traits, les pointilles, les taches */
  --mrd-laiton:#F0C299;        /* les accents dores */
  --mrd-laiton-vif:#FBD6BA;    /* le laiton au survol */
  --mrd-plaque-ombre:#E0A874;  /* le bord d'une plaque de laiton */
  --mrd-encre-terne:#4A4034;   /* l'encre d'un bouton desactive */
  --mrd-encre-noire:#000000;   /* l'encre au survol d'un lien */

  /* ---- les polices ---- */
  --mrd-police-corps:'Cormorant Garamond',Garamond,serif;
  --mrd-police-titres:'Cinzel Decorative',serif;

  /* ---- le corps du texte ----
     Tout ce qui suit se calcule sur --mrd-corps. Le diminuer diminue
     l'article entier d'un coup, titres et legendes comprises, et fait
     donc moins de pages.                                             */
  --mrd-corps:1.02rem;
  --mrd-interligne:1.72;

  /* ---- ce qui en decoule, en proportion du corps ---- */
  --mrd-t-h1:calc(var(--mrd-corps) * 1.85);
  --mrd-t-h2:calc(var(--mrd-corps) * .88);
  --mrd-t-h3:calc(var(--mrd-corps) * 1.02);
  --mrd-t-h4:calc(var(--mrd-corps) * .84);
  --mrd-t-petit:calc(var(--mrd-corps) * .86);   /* legendes, notes de marge */
  --mrd-t-menu:calc(var(--mrd-corps) * .66);    /* onglets, entete, folios */
  --mrd-t-lettrine:calc(var(--mrd-corps) * 3.3);
}

/* ---------- le livre, centre, jamais pleine largeur ---------- */
.mrd-grim.mrd-livre{max-width:100%!important;margin-inline:auto!important;}
.mrd-grim.mrd-livre .mrd-g-tome{
  width:var(--mrd-page-l)!important;max-width:100%!important;
  margin-inline:auto!important;}

/* ---------- la page ---------- */
.mrd-grim.mrd-livre .mrd-g-page{
  width:100%!important;
  aspect-ratio:auto!important;          /* la hauteur vient du cahier */
  min-height:0!important;
  height:auto!important;
  /* Les marges du papier, prises au pupitre de reglage. */
  padding:var(--mrd-marge) var(--mrd-marge) calc(var(--mrd-marge) * 1.6)!important;}

/* ---------- le cahier : la fenetre par laquelle on voit les pages ---------- */
.mrd-grim .mrd-g-cahier{
  position:relative!important;
  height:var(--mrd-page-h)!important;
  overflow:hidden!important;}

/* ---------- le flux : le texte coule en colonnes de la hauteur d'une page ---------- */
.mrd-grim .mrd-g-flux{
  height:100%!important;
  column-width:var(--mrd-colonne-l,100%)!important;
  column-gap:var(--mrd-gouttiere)!important;
  column-fill:auto!important;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)!important;
  will-change:transform!important;}

/* Rien ne doit se couper en deux au passage d'une page a l'autre. */
.mrd-grim .mrd-g-flux figure,
.mrd-grim .mrd-g-flux blockquote,
.mrd-grim .mrd-g-flux .mrd-m-planche,
.mrd-grim .mrd-g-flux .mrd-m-carte,
.mrd-grim .mrd-g-flux .mrd-m-cartouche,
.mrd-grim .mrd-g-flux .mrd-m-regime,
.mrd-grim .mrd-g-flux .mrd-g-entree{break-inside:avoid!important;}
.mrd-grim .mrd-g-flux h1,
.mrd-grim .mrd-g-flux h2,
.mrd-grim .mrd-g-flux h3{break-after:avoid!important;break-inside:avoid!important;}
/* Une image ne doit jamais depasser la hauteur d'une page, sinon elle
   creuse un trou d'une page entiere. */
.mrd-grim .mrd-g-flux img{max-height:calc(var(--mrd-page-h) * .62)!important;
  width:auto!important;max-width:100%!important;object-fit:contain!important;}
.mrd-grim .mrd-g-flux figure{width:auto!important;max-width:100%!important;
  left:auto!important;transform:none!important;}

/* Dans le cahier, la colonne de texte occupe toute la page : c'est la page
   qui est etroite maintenant, plus le texte a l'interieur d'une page large. */
.mrd-grim.mrd-livre .mrd-g-corps{display:block!important;}
.mrd-grim.mrd-livre .mrd-g-texte{max-width:none!important;}

/* ---------- LA DOUBLE PAGE, des qu'il y a la place ---------- */
@media (min-width:56rem){
  .mrd-grim.mrd-livre{--mrd-page-l:clamp(17rem,44vw,37rem);}

  /* Au-dela de 74rem, la page ne grandit plus. Sinon le nombre de pages
     d'un article changerait a chaque largeur d'ecran, et les folios avec
     lui : ce serait un livre dont la pagination bouge quand on redimensionne
     la fenetre. A partir d'ici, tous les grands ecrans paginent pareil.  */
  @media (min-width:74rem){
    .mrd-grim.mrd-livre{--mrd-page-l:37rem;}
  }

  /* ---------- LES ONGLETS SE MESURENT SUR LE LIVRE ----------
     Ils sont pinces sur la tranche : leur hauteur ne peut donc pas etre
     decidee sans regarder celle du livre. Six onglets de 11,7rem font
     1 226 px : ils depassaient une page de 930 px par le bas. Maintenant
     la hauteur d'un onglet est CE QUI RESTE quand on a enleve les deux
     retraits et les ecarts, divise par le nombre d'onglets. Ajoutez une
     section, ils rapetissent tous ensemble et rien ne depasse.        */
  .mrd-grim.mrd-livre{
    --mrd-onglet-h:calc(
      (var(--mrd-page-h) - var(--mrd-onglet-haut) * 2
       - var(--mrd-onglet-ec) * (var(--mrd-onglets-nb) - 1))
      / var(--mrd-onglets-nb));
    --mrd-onglet-l:calc(var(--mrd-onglet-h) / var(--mrd-onglet-ratio));}
  /* ---------- LES ONGLETS SORTENT DU VOLUME ----------
     Ils mordaient sur les deux tiers du papier : du texte se retrouvait
     entre deux onglets. Un onglet pince sur une tranche depasse surtout
     vers l'EXTERIEUR — il n'en reste qu'un tiers sur la page. Et ce tiers
     est ajoute a la marge droite, pour que le texte ne puisse plus jamais
     passer dessous.                                                    */
  .mrd-grim.mrd-livre .mrd-g-onglets{width:var(--mrd-onglet-l)!important;
    right:calc(-1 * var(--mrd-onglet-l) * var(--mrd-onglet-dehors))!important;}
  .mrd-grim.mrd-livre .mrd-g-page{min-height:0!important;
    padding-right:calc(var(--mrd-onglet-l) * (1 - var(--mrd-onglet-dehors))
                       + var(--mrd-marge-onglets))!important;}
  /* Le volume se decale d'autant vers la gauche pour rester centre a l'oeil. */
  .mrd-grim.mrd-livre{padding-right:calc(var(--mrd-onglet-l) * var(--mrd-onglet-dehors))!important;}
  .mrd-grim.mrd-livre .mrd-g-tome{
    width:calc(var(--mrd-page-l) * 2 + var(--mrd-gouttiere))!important;}
  /* Une colonne = le bloc de texte d'une page. On IMPOSE deux colonnes :
     column-width n'est qu'une suggestion, et dans un cahier de 982 px une
     colonne de 544 px en donne une seule, elargie a 982 — le texte courait
     alors par-dessus la reliure. column-count, lui, ne se discute pas.   */
  .mrd-grim.mrd-livre .mrd-g-flux{column-count:2!important;column-width:auto!important;}
  /* la reliure passe au milieu, entre les deux pages */
  /* ---------- LA RELIURE : UNE VALLEE, PAS UNE BARRE ----------
     La barre verte etait un aplat pose sur le papier — ca ne ressemblait a
     rien. Ce qu'on voit dans un vrai livre ouvert, ce n'est pas un objet :
     c'est de l'OMBRE, parce que les deux pages se courbent vers le fond du
     pli. Donc pas de couleur : une vallee, large, qui s'assombrit vers le
     centre et se dissipe sur les deux pages, avec un pli clair de chaque
     cote la ou le papier remonte et attrape la lumiere.               */
  /* Le centre du PLI n'est pas le centre de la page : la marge droite est plus
     large que la gauche, pour loger les onglets. Le pli tombe donc au milieu de
     la zone de texte, ce qui se calcule — la moitie de l'ecart entre les deux
     marges. Et il va de HAUT EN BAS de la feuille : il etait enferme dans le
     cahier, donc il s'arretait sous le titre courant et au-dessus du folio,
     alors qu'un pli traverse la feuille entiere. */
  .mrd-grim.mrd-livre .mrd-g-reliure{
    top:0!important;bottom:0!important;
    left:calc(50% + (var(--mrd-marge)
              - (var(--mrd-onglet-l) * (1 - var(--mrd-onglet-dehors))
                 + var(--mrd-marge-onglets))) / 2)!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:calc(var(--mrd-gouttiere) * 2.6)!important;
    z-index:0!important;opacity:1!important;border-radius:0!important;
    background-image:linear-gradient(90deg,
      rgba(122,101,74,0)    0%,
      rgba(122,101,74,.05)  16%,
      rgba(101,82,58,.14)   30%,
      rgba(74,58,40,.30)    41%,
      rgba(58,44,30,.46)    47.5%,
      rgba(46,34,22,.54)    50%,
      rgba(58,44,30,.46)    52.5%,
      rgba(74,58,40,.30)    59%,
      rgba(101,82,58,.14)   70%,
      rgba(122,101,74,.05)  84%,
      rgba(122,101,74,0)    100%),
      linear-gradient(90deg,
      transparent 33%,
      rgba(255,252,246,.34) 38%,
      transparent 43%,
      transparent 57%,
      rgba(255,252,246,.30) 62%,
      transparent 67%)!important;
    mix-blend-mode:multiply!important;}
  /* Le pli clair est une lumiere, pas une ombre : il ne doit pas etre
     multiplie avec le reste, sinon il s'assombrit lui aussi. */
  .mrd-grim.mrd-livre .mrd-g-reliure::after{content:""!important;
    position:absolute!important;inset:0!important;
    background-image:linear-gradient(90deg,
      transparent 30%,rgba(255,253,249,.5) 37%,transparent 44%,
      transparent 56%,rgba(255,253,249,.44) 63%,transparent 70%)!important;
    mix-blend-mode:screen!important;opacity:.55!important;}
  .mrd-grim.mrd-livre .mrd-g-cahier{z-index:1!important;}
  .mrd-grim.mrd-livre .mrd-g-flux{position:relative!important;z-index:2!important;}
}

/* Sous 56rem : une seule page, et on defile. La pagination se tait.
   C'etait la demande : les pages qui se tournent sur ordinateur et
   tablette, la version qui defile sur telephone.                     */
@media (max-width:55.999rem){
  .mrd-grim.mrd-livre .mrd-g-cahier{height:auto!important;overflow:visible!important;}
  .mrd-grim.mrd-livre .mrd-g-flux{height:auto!important;
    column-width:auto!important;column-count:auto!important;
    transform:none!important;transition:none!important;}
  .mrd-grim.mrd-livre .mrd-g-page{min-height:var(--mrd-page-h)!important;}
  .mrd-grim.mrd-livre .mrd-g-tourne{display:none!important;}
}

/* ---------- les folios : un par page ---------- */
.mrd-grim.mrd-livre .mrd-g-folio{position:absolute!important;
  bottom:clamp(.7rem,2vw,1.2rem)!important;
  font-family:var(--mrd-police-titres)!important;
  font-size:var(--mrd-t-petit)!important;
  line-height:1!important;letter-spacing:.3em!important;color:var(--mrd-encre)!important;
  margin:0!important;text-indent:0!important;}
.mrd-grim.mrd-livre .mrd-g-folio-g{left:0!important;right:auto!important;
  width:auto!important;text-align:left!important;
  padding-left:clamp(1.1rem,3.4vw,2.2rem)!important;}
.mrd-grim.mrd-livre .mrd-g-folio-d{right:0!important;left:auto!important;
  width:auto!important;text-align:right!important;
  padding-right:clamp(1.1rem,3.4vw,2.2rem)!important;}
@media (max-width:55.999rem){
  .mrd-grim.mrd-livre .mrd-g-folio-g{padding-left:clamp(1.1rem,4vw,2rem)!important;}
  .mrd-grim.mrd-livre .mrd-g-folio-d{display:none!important;}
}

/* ---------- tourner la page ---------- */
.mrd-grim .mrd-g-tourne{display:none!important;}
.mrd-grim.mrd-g-tourne-actif .mrd-g-tourne{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:clamp(.5rem,2vw,1rem)!important;
  margin:clamp(.6rem,2vw,1rem) 0 0!important;padding:0!important;}
/* ---------- TOURNER LA PAGE : DES PLAQUES DE LAITON ----------
   Les boutons etaient de l'encre var(--mrd-encre) sur fond transparent. Posee sur le
   cuir, cela donne un contraste de 1,24 contre 1 : ils disparaissaient
   purement et simplement. Ce n'etait pas un gout a regler, c'etait un defaut.

   Ils prennent donc la meme matiere que les onglets — du laiton — qui a
   l'avantage de tenir sur n'importe quel fond, clair ou sombre, puisqu'il
   apporte le sien. Encre var(--mrd-encre-forte) dessus : de 6,96 a 9,8 contre 1.        */
.mrd-grim .mrd-g-tourne button{
  font-family:var(--mrd-police-titres)!important;
  font-size:var(--mrd-t-menu)!important;letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:var(--mrd-encre-forte)!important;
  background-color:var(--mrd-plaque)!important;
  background-image:var(--mrd-laiton-h)!important;
  background-size:100% 100%!important;
  border:1px solid rgba(110,74,34,.55)!important;border-radius:2px!important;
  padding:clamp(.42rem,1.3vw,.6rem) clamp(.8rem,2.6vw,1.2rem)!important;
  cursor:pointer!important;line-height:1!important;
  box-shadow:inset 0 1px 0 rgba(255,252,246,.5),
             0 1px 3px rgba(28,20,10,.35)!important;
  transition:filter .2s,box-shadow .2s!important;}
.mrd-grim .mrd-g-tourne button:hover:not(:disabled),
.mrd-grim .mrd-g-tourne button:focus:not(:disabled){
  filter:brightness(1.07)!important;
  box-shadow:inset 0 1px 0 rgba(255,252,246,.65),
             0 2px 6px rgba(28,20,10,.42)!important;}
.mrd-grim .mrd-g-tourne button:active:not(:disabled){
  box-shadow:inset 0 2px 4px rgba(46,30,12,.45)!important;}
.mrd-grim .mrd-g-tourne button:focus-visible{
  outline:2px solid var(--mrd-laiton-vif)!important;outline-offset:2px!important;}

/* Desactive : du laiton terni, pas un bouton efface. On doit voir qu'il est la
   et qu'il ne sert pas — 4,21 contre 1 pour son texte, et la plaque elle-meme
   ressort a 5,06 contre 1 sur le cuir. */
.mrd-grim .mrd-g-tourne button:disabled{
  cursor:default!important;opacity:1!important;
  color:var(--mrd-encre-terne,#4A4034)!important;
  background-color:color-mix(in srgb,var(--mrd-plaque) 55%,#8A8070)!important;
  background-image:linear-gradient(176deg,
    color-mix(in srgb,var(--mrd-plaque) 45%,#B8B0A0),
    color-mix(in srgb,var(--mrd-plaque) 55%,#8A8070) 55%,
    color-mix(in srgb,var(--mrd-plaque) 55%,#77705F))!important;
  border-color:rgba(90,70,45,.4)!important;
  box-shadow:inset 0 1px 0 rgba(255,252,246,.28)!important;}

.mrd-grim .mrd-g-compte{font-family:var(--mrd-police-titres)!important;
  font-size:var(--mrd-t-menu)!important;letter-spacing:.12em!important;
  text-transform:uppercase!important;color:var(--mrd-encre)!important;
  margin:0!important;text-indent:0!important;}
/* Le compteur n'a pas de plaque : il change d'encre selon le fond. Sur le cuir,
   l'encre claire donne 7,46 contre 1 ; sans le cuir, l'encre du livre reste la
   bonne. */
.mrd-cuir-pose .mrd-grim .mrd-g-compte{color:var(--mrd-laiton)!important;
  text-shadow:0 1px 2px rgba(20,12,4,.55)!important;}

/* Le coin corne n'a plus de sens quand la page se tourne : il menait a
   l'article suivant, or on n'a pas fini celui-ci. Il revient a la
   derniere page. */
.mrd-grim.mrd-g-tourne-actif .mrd-g-coin{display:none!important;}


/* =====================================================================
   LES LIENS QUI MENENT AILLEURS
   Un lien souligne se perd dans une page de texte. Deux formes, donc,
   et elles ne se ressemblent pas : le renvoi mene ailleurs DANS le
   livre, la vitrine mene a la boutique. On doit savoir ou l'on va
   avant de cliquer.
   ===================================================================== */

.mrd-grim .mrd-g-renvoi-lien,
.mrd-grim .mrd-g-vitrine{
  display:inline-flex!important;align-items:center!important;
  gap:.45em!important;
  font-family:var(--mrd-police-titres)!important;
  font-size:var(--mrd-t-menu)!important;
  letter-spacing:.1em!important;text-transform:uppercase!important;
  line-height:1.2!important;text-decoration:none!important;
  padding:.42em .8em!important;border-radius:2px!important;
  background-color:transparent!important;
  transition:border-color .2s,color .2s,background-color .2s!important;}

/* le renvoi : un filet d'encre, sobre, comme une note du livre */
.mrd-grim .mrd-g-renvoi-lien{
  color:var(--mrd-encre)!important;border:1px solid var(--mrd-filet)!important;}
.mrd-grim .mrd-g-renvoi-lien::before{content:"\00A7"!important;
  font-size:1.1em!important;line-height:1!important;color:var(--mrd-laiton)!important;}
.mrd-grim .mrd-g-renvoi-lien:hover,.mrd-grim .mrd-g-renvoi-lien:focus{
  color:var(--mrd-encre-forte)!important;border-color:var(--mrd-laiton)!important;
  background-color:rgba(240,194,153,.10)!important;}

/* la vitrine : du laiton plein, parce qu'on sort du livre */
.mrd-grim .mrd-g-vitrine{
  color:var(--mrd-encre-forte)!important;border:1px solid var(--mrd-laiton)!important;
  background-color:rgba(240,194,153,.22)!important;}
.mrd-grim .mrd-g-vitrine::after{content:"\2192"!important;
  font-family:'Cormorant Garamond',serif!important;font-size:1.15em!important;line-height:1!important;}
.mrd-grim .mrd-g-vitrine:hover,.mrd-grim .mrd-g-vitrine:focus{
  background-color:rgba(240,194,153,.38)!important;border-color:var(--mrd-plaque-ombre)!important;}

.mrd-grim .mrd-g-renvoi-lien:focus,.mrd-grim .mrd-g-vitrine:focus{
  outline:2px solid var(--mrd-encre)!important;outline-offset:2px!important;}

/* Un lien seul dans son paragraphe devient un vrai bouton, centre. */
.mrd-grim .mrd-g-texte p > .mrd-g-vitrine:only-child,
.mrd-grim .mrd-g-texte p > .mrd-g-renvoi-lien:only-child{
  display:flex!important;justify-content:center!important;
  margin:clamp(.6rem,2vw,1rem) auto!important;
  padding:.62em 1.1em!important;width:fit-content!important;}


/* =====================================================================
   LES ONGLETS SUR LA PAGE DE GARDE
   Ils manquaient : on les avait sur les pages et les chapitres, mais pas
   a l'endroit d'ou l'on part. Le frontispice emprunte donc la meme
   mecanique — et comme lui aussi est un volume, ses onglets se mesurent
   sur sa hauteur.
   ===================================================================== */

.mrd-grim.mrd-front-relie{position:relative!important;}
.mrd-grim.mrd-front-relie .mrd-gf-tome{position:relative!important;isolation:isolate!important;}

/* ---------------------------------------------------------------------
   LA PAGE DE GARDE EST UNE PAGE, ELLE AUSSI.
   Elle etait restee en dehors : toutes les regles de largeur et de
   hauteur d'onglets etaient accrochees a .mrd-livre, et le frontispice
   ne porte pas cette classe. Resultat, il prenait toute la largeur du
   theme et ses onglets, calcules sur l'ancienne formule, descendaient
   jusqu'en bas.
   Il reprend donc exactement la meme geometrie que les autres pages :
   une largeur de page, un format de livre, et des onglets qui se
   mesurent sur cette hauteur.
   --------------------------------------------------------------------- */
@media (min-width:56rem){
  .mrd-grim.mrd-front-relie{
    --mrd-onglet-h:calc(
      (var(--mrd-page-h) - var(--mrd-onglet-haut) * 2
       - var(--mrd-onglet-ec) * (var(--mrd-onglets-nb) - 1))
      / var(--mrd-onglets-nb));
    --mrd-onglet-l:calc(var(--mrd-onglet-h) / var(--mrd-onglet-ratio));
    max-width:100%!important;margin-inline:auto!important;
    padding-right:calc(var(--mrd-onglet-l) * var(--mrd-onglet-dehors))!important;}

  /* La page de titre a EXACTEMENT le format des autres : la largeur d'une
     double page, la hauteur d'une page. C'est la premiere ouverture du
     livre — elle ne doit pas avoir une forme a elle, sinon on voit le
     raccord en passant de l'une a l'autre. */
  .mrd-grim.mrd-front-relie .mrd-gf-tome{
    width:calc(var(--mrd-page-l) * 2 + var(--mrd-gouttiere))!important;
    max-width:100%!important;margin-inline:auto!important;
    min-height:var(--mrd-page-h)!important;
    padding-right:calc(var(--mrd-onglet-l) * (1 - var(--mrd-onglet-dehors))
                       + var(--mrd-marge-onglets))!important;}

  .mrd-grim.mrd-front-relie .mrd-g-onglets{
    top:var(--mrd-onglet-haut)!important;
    width:var(--mrd-onglet-l)!important;
    right:calc(-1 * var(--mrd-onglet-l) * var(--mrd-onglet-dehors))!important;}

  /* Et sa reliure au milieu, la meme vallee que sur les pages : sans elle,
     une double page sans pli ne ressemble pas a un livre ouvert. */
  .mrd-grim.mrd-front-relie .mrd-gf-reliure{
    top:0!important;bottom:0!important;
    left:calc(50% - var(--mrd-onglet-l) * (1 - var(--mrd-onglet-dehors)) / 2
              - var(--mrd-marge-onglets) / 2)!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:calc(var(--mrd-gouttiere) * 2.6)!important;
    border-radius:0!important;
    background-image:linear-gradient(90deg,
      rgba(122,101,74,0) 0%,rgba(101,82,58,.14) 30%,
      rgba(74,58,40,.30) 41%,rgba(46,34,22,.52) 50%,
      rgba(74,58,40,.30) 59%,rgba(101,82,58,.14) 70%,
      rgba(122,101,74,0) 100%)!important;
    mix-blend-mode:multiply!important;}
  /* ---------- LA PAGE DE TITRE EST A DROITE ----------
     Elle s'etalait sur les deux pages : ca n'arrive dans aucun livre. Le titre
     est toujours a droite, et la page de gauche — le contreplat — reste nue ou
     porte l'illustration de frontispice.
     Le volume garde donc sa largeur de double page, mais le contenu tient
     entierement dans la moitie droite.                                     */
  .mrd-grim.mrd-front-relie .mrd-gf-tome{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    column-gap:var(--mrd-gouttiere)!important;
    align-items:start!important;}
  .mrd-grim.mrd-front-relie .mrd-gf-verso{
    grid-column:1!important;grid-row:1!important;
    min-height:var(--mrd-page-h)!important;
    background-size:cover!important;background-position:center!important;
    background-repeat:no-repeat!important;border-radius:1px!important;
    /* Une legere ombre interieure, pour que l'illustration ait l'air imprimee
       sur la page et non collee dessus. */
    box-shadow:inset 0 0 clamp(1rem,3vw,2rem) rgba(28,20,10,.16)!important;}
  .mrd-grim.mrd-front-relie .mrd-gf-recto{
    grid-column:2!important;grid-row:1!important;min-width:0!important;}
  /* LES ONGLETS ET LA RELIURE NE PRENNENT AUCUNE PLACE DANS LA GRILLE.
     Et surtout : on ne leur donne PAS de grid-column. Un element absolu qui
     recoit une position de grille voit son cadre de reference devenir sa
     CASE, et non plus la boite du volume — les onglets se decalaient alors
     de 66 px vers l'interieur et couvraient la fin des lignes. Sans
     grid-column, ils retrouvent le volume entier comme reference. */
  .mrd-grim.mrd-front-relie .mrd-g-onglets,
  .mrd-grim.mrd-front-relie .mrd-gf-reliure{position:absolute!important;}
  /* une seule page : le sommaire ne se met plus sur deux colonnes */
  .mrd-grim.mrd-front-relie .mrd-gf-notices{columns:auto!important;}
}
/* Sous 56rem il n'y a qu'une page : la page de gauche disparait. */
@media (max-width:55.999rem){
  .mrd-grim.mrd-front-relie .mrd-gf-verso{display:none!important;}
}


/* =====================================================================
   L'INTERIEUR DE LA COUVERTURE
   ---------------------------------------------------------------------
   Le cuir est DERRIERE LE LIVRE, et a peine plus grand que lui. Il ne
   remplit pas la largeur de l'ecran : il deborde des pages, et c'est tout.
   J'avais fait le contraire — un plan fixe sur toute la fenetre, qui
   passait derriere le menu et noyait le reste.

   Etant accroche au livre, il en prend automatiquement la taille : l'image
   s'adapte aux pages telles qu'elles sont a l'ecran, sans repetition et
   sans calcul. Et par construction il ne peut plus aller se mettre derriere
   autre chose que le livre.

   Une seule valeur a regler : de combien il deborde.
   ===================================================================== */

/* Accroche au VOLUME, pas a .mrd-grim : ce dernier occupe toute la largeur du
   conteneur, et le cuir reprenait donc toute la largeur — le defaut meme qu'on
   corrige. Le volume, lui, fait exactement la largeur des deux pages.
   Le frontispice a son papier sur ::before, donc son cuir passe sur ::after. */
.mrd-cuir-pose .mrd-grim .mrd-g-tome::before,
.mrd-cuir-pose .mrd-grim-front .mrd-gf-tome::after{
  content:""!important;position:absolute!important;z-index:-2!important;
  top:calc(-1 * var(--mrd-cuir-debord,4rem))!important;
  bottom:calc(-1 * var(--mrd-cuir-debord,4rem))!important;
  left:calc(-1 * var(--mrd-cuir-debord,4rem))!important;
  right:calc(-1 * var(--mrd-cuir-debord,4rem))!important;
  background-color:var(--mrd-cuir-teinte,#3A2A1C)!important;
  /* Deux couches : le voile devant, l'image derriere. Le voile assombrit
     l'image et referme les bords, pour que le papier ressorte. */
  background-image:
    radial-gradient(ellipse 115% 100% at 50% 45%,
      rgba(0,0,0,0) 42%,
      rgba(0,0,0,calc(var(--mrd-cuir-ombre,.06) * 1.1)) 78%,
      rgba(0,0,0,calc(var(--mrd-cuir-ombre,.06) * 2.2)) 100%),
    var(--mrd-cuir-image,none)!important;
  background-size:100% 100%,cover!important;
  background-position:center,center!important;
  background-repeat:no-repeat,no-repeat!important;
  border-radius:2px!important;
  box-shadow:0 2px 6px rgba(20,12,4,.35),0 14px 40px rgba(20,12,4,.4)!important;}

/* Un article qui garde sa propre mise en page n'a pas de volume a qui
   accrocher le cuir. Il en a droit quand meme : il est dans le Sanctuaire.
   Le cuir se pose alors derriere la zone de contenu du theme. */
.mrd-cuir-large .site-main,
.mrd-cuir-large main#content,
.mrd-cuir-large main{position:relative!important;}
.mrd-cuir-large .site-main::before,
.mrd-cuir-large main#content::before,
.mrd-cuir-large main::before{
  content:""!important;position:absolute!important;z-index:-1!important;
  top:0!important;bottom:0!important;
  left:calc(-1 * var(--mrd-cuir-debord,4rem))!important;
  right:calc(-1 * var(--mrd-cuir-debord,4rem))!important;
  background-color:var(--mrd-cuir-teinte,#3A2A1C)!important;
  background-image:
    radial-gradient(ellipse 115% 100% at 50% 45%,
      rgba(0,0,0,0) 42%,
      rgba(0,0,0,calc(var(--mrd-cuir-ombre,.06) * 1.1)) 78%,
      rgba(0,0,0,calc(var(--mrd-cuir-ombre,.06) * 2.2)) 100%),
    var(--mrd-cuir-image,none)!important;
  background-size:100% 100%,cover!important;
  background-position:center,center!important;
  background-repeat:no-repeat,no-repeat!important;}

/* Le volume prend une ombre portee : c'est ce qui le decolle du cuir et fait
   qu'on croit a un objet pose, et non a une image collee dessus. */
.mrd-cuir-pose .mrd-grim.mrd-livre .mrd-g-page::before,
.mrd-cuir-pose .mrd-grim-front .mrd-gf-tome::before{
  filter:drop-shadow(0 2px 0 rgba(216,213,205,.7))
         drop-shadow(0 14px 26px rgba(0,0,0,.4))
         drop-shadow(0 32px 60px rgba(0,0,0,.28))!important;}