/* =====================================================================
   LA POSE DES IMAGES
   ---------------------------------------------------------------------
   « Je veux que pour les images que j'insère j'aie entièrement le choix
   pour leur mise en page, pour chaque article : ajout ou pas du scotch
   dans les coins, masque déchiré, masque autre, forme des bordures,
   effet d'ombre, de boîte, etc. »

   Sept familles, indépendantes les unes des autres, qui se combinent
   librement : le scotch, le masque, la bordure, les coins, l'ombre,
   l'inclinaison, la boîte. Une image peut porter une valeur de chaque —
   du scotch aux quatre coins SUR un masque déchiré AVEC une ombre
   franche et une légère inclinaison — et aucune combinaison n'en annule
   une autre : chaque famille écrit ses propres propriétés, jamais celles
   d'une voisine. C'est la seule façon de rendre le choix ENTIER.

   RIEN N'EST ÉCRIT EN DUR ICI NON PLUS. Les couleurs viennent de la
   palette (--mrd-papier, --mrd-filet, --mrd-laiton, --mrd-encre-forte),
   les distances de l'échelle (--mrd-echelle) : changez la palette, les
   poses suivent ; réduisez l'échelle, elles rapetissent avec le livre.

   Ce fichier est chargé DEUX FOIS : sur le site, et dans l'éditeur de
   blocs. Ce qu'on voit en écrivant est donc ce que la lectrice verra —
   sans quoi il faudrait publier pour savoir.

   Les classes vivent dans l'attribut « className » du bloc image, celui
   que WordPress enregistre déjà lui-même. Aucune donnée nouvelle, aucune
   migration : une image posée reste posée même si cette extension
   disparaît.
   ===================================================================== */

/* Les valeurs de secours : hors du livre — dans l'éditeur, par exemple —
   les variables de la palette n'existent pas. Chaque var() porte donc son
   repli, sinon la déclaration serait invalide et la pose invisible. */
.mrd-i-scotch-2,.mrd-i-scotch-4,.mrd-i-scotch-haut,
.mrd-i-m-dechire,.mrd-i-m-brule,.mrd-i-m-ovale,.mrd-i-m-arche,.mrd-i-m-cercle,
.mrd-i-b-filet,.mrd-i-b-double,.mrd-i-b-pointille,.mrd-i-b-laiton,.mrd-i-b-passe,
.mrd-i-c-doux,.mrd-i-c-rond,
.mrd-i-o-douce,.mrd-i-o-franche,.mrd-i-o-posee,.mrd-i-o-relief,
.mrd-i-t-gauche,.mrd-i-t-droite,
.mrd-i-f-plaque,.mrd-i-f-cadre,.mrd-i-f-polaroid{
  --mrd-i-papier:var(--mrd-papier,#FBF6F1);
  --mrd-i-filet:var(--mrd-filet,#D8D5CD);
  --mrd-i-encre:var(--mrd-encre-forte,#1C331C);
  --mrd-i-laiton:var(--mrd-laiton,#F0C299);
  --mrd-i-e:var(--mrd-echelle,1);
  position:relative;}

/* ---------------------------------------------------------------------
   1. LE SCOTCH — CELUI DE VOS FICHES PRODUITS, PAS UN AUTRE

   « Le scotch ressemble à rien. Et en plus en bas à droite il est dans le
   mauvais sens. Je veux le même que sur mes fiches produits. »

   Elle avait raison deux fois. Mon premier scotch était fait de dégradés
   en biais posés en couches de fond : quatre traits pâles, sans matière,
   sans bord déchiré — et un dégradé de fond ne peut pas être tourné
   couche par couche, d'où le ruban à l'envers en bas à droite. Une
   contrainte technique s'était transformée en défaut visible : c'est
   toujours le signe qu'il faut changer de technique, pas de réglage.

   Le vrai ruban existe déjà sur merydar.com, sur les fiches produits.
   Relevé sur la page « Esprit Marin » et repris tel quel, à la virgule
   près : la même trame de fibres (trois dégradés répétés), le même
   dégradé de laiton, la même ombre portée, le même bord dentelé en
   « clip-path », les mêmes quatre angles de rotation — -46°, 43°, 44°,
   -42°. Ce sont ses valeurs, pas les miennes.

   Et comme là-bas, ce sont de VRAIS éléments — un par coin — posés dans
   la figure au moment de l'affichage. C'est la seule façon de tourner
   chaque ruban dans son sens.
   --------------------------------------------------------------------- */
.mrd-i-scotch-2,.mrd-i-scotch-4,.mrd-i-scotch-haut{
  /* LA MESURE DU RUBAN : celle du livre, et une part pour cette image-ci.
     « Allonge encore un peu le scotch / donne-moi la possibilité de régler sa
     taille par image. » Le pupitre écrit la longueur et la largeur en pixels ;
     « --sc-part » est la part que cette image en prend — 1 par défaut, moins si
     elle est réglée « court », plus si elle est réglée « long ». Une proportion
     et non des pixels : si vous changez la mesure du livre, une image « longue »
     reste longue. */
  --sc-part:1;
  --sc-l:calc(var(--mrd-scotch-l,calc(112px * var(--mrd-i-e))) * var(--sc-part));
  --sc-h:calc(var(--mrd-scotch-h,calc(30px * var(--mrd-i-e))) * var(--sc-part));}

/* LA TAILLE DU RUBAN, IMAGE PAR IMAGE. Quatre crans, choisis dans l'éditeur.
   La largeur suit la longueur : un ruban deux fois plus long deux fois plus
   large reste le même ruban — c'est ce qui garde sa matière crédible. */
.mrd-i-sc-tc{--sc-part:.62!important;}
.mrd-i-sc-c{--sc-part:.8!important;}
.mrd-i-sc-l{--sc-part:1.25!important;}
.mrd-i-sc-tl{--sc-part:1.55!important;}

/* LA BOÎTE DE LA PHOTO : L'IMAGE SEULE, SANS SA LÉGENDE.
   « Le coin en bas à droite n'est pas du tout sur la photo. » Une figure
   contient l'image ET la légende : un ruban placé au coin bas de la figure
   tombait donc sous la légende. Les deux coins hauts, eux, sont communs aux
   deux boîtes — c'est pour cela que le défaut ne se voyait que d'un côté.
   Les rubans vivent maintenant dans cette boîte-ci, qui n'entoure que
   l'image, exactement comme sur les fiches produits. */
.mrd-i-photo{position:relative!important;display:block!important;
  width:-moz-fit-content!important;width:fit-content!important;
  max-width:100%!important;margin-inline:auto!important;
  /* « font-size:0 » et pas seulement « line-height:0 » : un simple retour a la
     ligne dans le balisage est un espace, et un espace a une LARGEUR. La boite
     de la photo mesurait cinq pixels de plus que la photo, ce qui suffisait a
     decentrer la legende sous elle. Mesure faite. */
  line-height:0!important;font-size:0!important;}
.mrd-i-photo>img,.mrd-i-photo>a>img{display:block!important;}
.mrd-i-photo>a{display:block!important;line-height:0!important;}

/* LA LÉGENDE : SOUS LA PHOTO, CENTRÉE SUR ELLE, ET DÉGAGÉE DU RUBAN.
   « Faut ignorer la légende et recentrer son texte et augmenter les marges pour
   qu'il soit pas caché par le scotch. »

   Trois choses, et elles tiennent ensemble. Les rubans ne regardent plus la
   légende du tout — ils sont dans la boîte de la photo. La figure prend alors la
   largeur de la photo, ce qui recentre la légende SUR l'image et non sur la
   colonne. Et l'espace au-dessus d'elle compte la hauteur du ruban : les deux
   coins bas débordent sous la photo, et sans cet écart ils tombaient sur le
   premier mot. */
.mrd-i-scotch-2,.mrd-i-scotch-4,.mrd-i-scotch-haut,
.mrd-grim .mrd-g-texte figure.mrd-i-scotch-2,
.mrd-grim .mrd-g-texte figure.mrd-i-scotch-4,
.mrd-grim .mrd-g-texte figure.mrd-i-scotch-haut,
.mrd-grim .mrd-g-flux figure.mrd-i-scotch-2,
.mrd-grim .mrd-g-flux figure.mrd-i-scotch-4,
.mrd-grim .mrd-g-flux figure.mrd-i-scotch-haut{
  width:-moz-fit-content!important;width:fit-content!important;
  max-width:100%!important;margin-inline:auto!important;}

/* L'écart au-dessus de la légende : la hauteur du ruban, et un peu plus. Les
   deux coins du bas n'existent pas dans « un ruban en haut » — sa légende garde
   donc l'écart ordinaire. */
.mrd-i-scotch-2 figcaption,
.mrd-i-scotch-4 figcaption,
.mrd-grim .mrd-g-texte figure.mrd-i-scotch-2 figcaption,
.mrd-grim .mrd-g-texte figure.mrd-i-scotch-4 figcaption{
  margin-top:calc(var(--sc-h) * 1.15 + .5em)!important;
  text-align:center!important;}
/* Et la légende occupe TOUTE la largeur de la photo, sans retrait d'un côté :
   un retrait de six pixels à gauche seulement décale le texte de trois pixels,
   ce qui suffit à ce qu'un texte « centré » ne le soit plus. Mesuré. */
.mrd-i-scotch-2 figcaption,
.mrd-i-scotch-4 figcaption,
.mrd-i-scotch-haut figcaption,
.mrd-grim .mrd-g-texte figure.mrd-i-scotch-2 figcaption,
.mrd-grim .mrd-g-texte figure.mrd-i-scotch-4 figcaption,
.mrd-grim .mrd-g-texte figure.mrd-i-scotch-haut figcaption{
  margin-inline:0!important;padding-inline:0!important;width:auto!important;}
.mrd-i-scotch-haut figcaption,
.mrd-grim .mrd-g-texte figure.mrd-i-scotch-haut figcaption{text-align:center!important;}

.mrd-scotch{
  position:absolute!important;z-index:3!important;
  width:var(--sc-l)!important;height:var(--sc-h)!important;
  display:block!important;pointer-events:none!important;
  /* La trame : trois dégradés répétés très fins, qui font les fibres du
     papier collant. C'est ce qui manquait le plus — sans elles, un ruban
     n'est qu'un rectangle translucide. */
  background:
    repeating-linear-gradient(88deg,rgba(255,255,255,.2) 0px,rgba(255,255,255,.2) 1px,rgba(255,255,255,0) 1px,rgba(255,255,255,0) 5px),
    repeating-linear-gradient(2deg,rgba(130,105,83,.15) 0px,rgba(130,105,83,.15) 1px,rgba(0,0,0,0) 1px,rgba(0,0,0,0) 4px),
    repeating-linear-gradient(178deg,rgba(130,105,83,.1) 0px,rgba(130,105,83,.1) 1px,rgba(0,0,0,0) 1px,rgba(0,0,0,0) 7px),
    linear-gradient(118deg,var(--mrd-scotch-a,#F0C299) 0%,var(--mrd-scotch-b,#F3E7D2) 52%,var(--mrd-scotch-c,#EBB98C) 100%)!important;
  box-shadow:0 1px 3px rgba(42,74,61,.18)!important;
  /* Le bord dentelé : le ruban n'a pas été coupé aux ciseaux. */
  clip-path:polygon(3% 0%,0% 20%,4% 42%,0% 64%,3% 86%,1% 100%,99% 100%,97% 84%,100% 62%,96% 40%,100% 18%,97% 0%)!important;
  border:0!important;margin:0!important;padding:0!important;}

/* Les quatre angles, dans le sens de chaque coin. C'est ici que le ruban
   du bas à droite était retourné. */
/* COMBIEN LE RUBAN RENTRE VERS L'INTÉRIEUR.
   « Je veux que les coins soient plus vers l'intérieur, je veux voir le coin de
   l'image dépasser du scotch comme dans un vieil album. »

   Le ruban était centré EXACTEMENT sur le coin : la moitié dehors, la moitié
   dedans, et la pointe de la photo entièrement recouverte. On décale donc son
   centre vers l'intérieur, sur les deux axes à la fois — le coin de la photo
   ressort alors en petit triangle sous le ruban, comme un cliché glissé dans
   des coins de papier.

   C'est un réglage : « --mrd-scotch-dedans », que le pupitre écrit. Ce que je
   choisis ici n'est qu'un point de départ, jamais une décision définitive. */
.mrd-scotch-hg,.mrd-scotch-hd,.mrd-scotch-bg,.mrd-scotch-bd{
  --sc-dedans:var(--mrd-scotch-dedans,calc(22px * var(--mrd-i-e)));}
.mrd-scotch-hg{top:calc(var(--sc-dedans) - var(--sc-h) / 2)!important;
  left:calc(var(--sc-dedans) - var(--sc-l) / 2)!important;
  transform:rotate(-46deg)!important;}
.mrd-scotch-hd{top:calc(var(--sc-dedans) - var(--sc-h) / 2)!important;
  right:calc(var(--sc-dedans) - var(--sc-l) / 2)!important;
  transform:rotate(43deg)!important;}
.mrd-scotch-bg{bottom:calc(var(--sc-dedans) - var(--sc-h) / 2)!important;
  left:calc(var(--sc-dedans) - var(--sc-l) / 2)!important;
  transform:rotate(44deg)!important;}
.mrd-scotch-bd{bottom:calc(var(--sc-dedans) - var(--sc-h) / 2)!important;
  right:calc(var(--sc-dedans) - var(--sc-l) / 2)!important;
  transform:rotate(-42deg)!important;}
/* Un seul ruban, au milieu du bord haut : la photo épinglée sur la page.
   À peine de travers — un ruban parfaitement droit n'a pas été posé à la
   main. */
.mrd-scotch-h{top:calc(var(--sc-h) / -2)!important;left:50%!important;
  width:calc(var(--sc-l) * 1.25)!important;
  transform:translateX(-50%) rotate(-1.6deg)!important;}

/* DANS L'ÉDITEUR, LE RUBAN EST DESSINÉ AUTREMENT — et il faut le dire.
   Les quatre éléments sont posés à l'affichage, côté serveur : l'éditeur,
   lui, ne les a pas. On y montre donc le même ruban sur deux coins, avec
   les deux pseudo-éléments de la figure — un élément n'en a que deux, et
   c'est précisément la limite qui avait produit le mauvais scotch. Le
   rendu exact est celui du site. */
.block-editor-block-list__block.mrd-i-scotch-2::before,
.block-editor-block-list__block.mrd-i-scotch-2::after,
.block-editor-block-list__block.mrd-i-scotch-4::before,
.block-editor-block-list__block.mrd-i-scotch-4::after,
.block-editor-block-list__block.mrd-i-scotch-haut::before{
  content:""!important;position:absolute!important;z-index:3!important;
  width:var(--sc-l)!important;height:var(--sc-h)!important;
  background:
    repeating-linear-gradient(88deg,rgba(255,255,255,.2) 0px,rgba(255,255,255,.2) 1px,rgba(255,255,255,0) 1px,rgba(255,255,255,0) 5px),
    repeating-linear-gradient(2deg,rgba(130,105,83,.15) 0px,rgba(130,105,83,.15) 1px,rgba(0,0,0,0) 1px,rgba(0,0,0,0) 4px),
    repeating-linear-gradient(178deg,rgba(130,105,83,.1) 0px,rgba(130,105,83,.1) 1px,rgba(0,0,0,0) 1px,rgba(0,0,0,0) 7px),
    linear-gradient(118deg,var(--mrd-scotch-a,#F0C299) 0%,var(--mrd-scotch-b,#F3E7D2) 52%,var(--mrd-scotch-c,#EBB98C) 100%)!important;
  box-shadow:0 1px 3px rgba(42,74,61,.18)!important;
  clip-path:polygon(3% 0%,0% 20%,4% 42%,0% 64%,3% 86%,1% 100%,99% 100%,97% 84%,100% 62%,96% 40%,100% 18%,97% 0%)!important;}
.block-editor-block-list__block.mrd-i-scotch-2::before,
.block-editor-block-list__block.mrd-i-scotch-4::before{
  top:calc(var(--mrd-scotch-dedans,calc(22px * var(--mrd-i-e))) - var(--sc-h) / 2)!important;
  left:calc(var(--mrd-scotch-dedans,calc(22px * var(--mrd-i-e))) - var(--sc-l) / 2)!important;
  transform:rotate(-46deg)!important;}
.block-editor-block-list__block.mrd-i-scotch-2::after,
.block-editor-block-list__block.mrd-i-scotch-4::after{
  bottom:calc(var(--mrd-scotch-dedans,calc(22px * var(--mrd-i-e))) - var(--sc-h) / 2)!important;
  right:calc(var(--mrd-scotch-dedans,calc(22px * var(--mrd-i-e))) - var(--sc-l) / 2)!important;
  transform:rotate(-42deg)!important;}
.block-editor-block-list__block.mrd-i-scotch-haut::before{
  top:calc(var(--sc-h) / -2)!important;left:50%!important;
  width:calc(var(--sc-l) * 1.25)!important;
  transform:translateX(-50%) rotate(-1.6deg)!important;}

/* ---------------------------------------------------------------------
   2. LES MASQUES
   La forme de l'image elle-même. Le bord déchiré est le même dessin que
   celui du papier des pages — c'est voulu : une image déchirée dans un
   livre déchiré, ce sont les mêmes ciseaux.
   --------------------------------------------------------------------- */
.mrd-i-m-dechire img,
.mrd-i-m-brule img,
.mrd-i-m-ovale img,
.mrd-i-m-arche img,
.mrd-i-m-cercle img{
  -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;
  -webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;
  border-radius:0!important;}

/* Déchiré : un rectangle passé au bruit et déplacé. Léger — on doit lire
   un bord de papier arraché, pas une tache. */
.mrd-i-m-dechire img{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-6%25' y='-6%25' width='112%25' height='112%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' seed='11' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='16' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='14' y='12' width='772' height='576' fill='%23fff' 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='600' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-6%25' y='-6%25' width='112%25' height='112%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' seed='11' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='16' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='14' y='12' width='772' height='576' fill='%23fff' filter='url(%23d)'/%3E%3C/svg%3E")!important;}

/* Brûlé : le même principe, un bruit plus gros et un déplacement plus
   fort, avec les angles rongés. */
.mrd-i-m-brule img{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-12%25' y='-12%25' width='124%25' height='124%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.032' numOctaves='4' seed='7' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='34' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='30' y='26' width='740' height='548' rx='26' fill='%23fff' filter='url(%23b)'/%3E%3C/svg%3E")!important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-12%25' y='-12%25' width='124%25' height='124%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.032' numOctaves='4' seed='7' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='34' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='30' y='26' width='740' height='548' rx='26' fill='%23fff' filter='url(%23b)'/%3E%3C/svg%3E")!important;
  /* Le liseré roussi : une ombre intérieure ne traverse pas un masque, on
     le pose donc en filtre sur la forme découpée. */
  filter:drop-shadow(0 0 calc(.12rem * var(--mrd-i-e)) rgba(86,48,16,.55))!important;}

/* Ovale, arche, cercle : des formes franches. Un masque et non un
   « border-radius » — la feuille du livre impose déjà un rayon aux
   images, et deux déclarations de la même propriété sont une de trop. */
.mrd-i-m-ovale img{
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 99.4%,transparent 100%)!important;
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 99.4%,transparent 100%)!important;}
.mrd-i-m-cercle img{
  aspect-ratio:1!important;object-fit:cover!important;
  /* « circle 50% » n'existe pas : un rayon en pourcentage n'est permis que pour
     une ellipse. La declaration etait invalide — donc aucun masque, et un
     cercle parfaitement carre. Trouve par le controle a l'ecran. */
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,#000 99.4%,transparent 100%)!important;
  mask-image:radial-gradient(circle closest-side at 50% 50%,#000 99.4%,transparent 100%)!important;}
.mrd-i-m-arche img{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='260' preserveAspectRatio='none'%3E%3Cpath d='M0 260V100C0 44.8 44.8 0 100 0s100 44.8 100 100v160z' fill='%23fff'/%3E%3C/svg%3E")!important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='260' preserveAspectRatio='none'%3E%3Cpath d='M0 260V100C0 44.8 44.8 0 100 0s100 44.8 100 100v160z' fill='%23fff'/%3E%3C/svg%3E")!important;}

/* ---------------------------------------------------------------------
   3. LES BORDURES
   Elles se posent sur l'IMAGE, pas sur la figure : une légende ne doit
   pas se retrouver enfermée dans le cadre.
   --------------------------------------------------------------------- */
.mrd-i-b-filet img{border:1px solid var(--mrd-i-filet)!important;}
.mrd-i-b-double img{
  border:1px solid var(--mrd-i-filet)!important;
  outline:1px solid var(--mrd-i-filet)!important;
  outline-offset:calc(.28rem * var(--mrd-i-e))!important;}
.mrd-i-b-pointille img{border:1px dashed var(--mrd-i-filet)!important;}
/* Le laiton : le même dégradé que les onglets et les boutons, en bordure.
   « border-image » plutôt qu'une couleur, sinon ce serait un trait plat
   qui ne ressemblerait à rien. */
.mrd-i-b-laiton img{
  border:calc(.22rem * var(--mrd-i-e)) solid transparent!important;
  border-image:var(--mrd-laiton-h,linear-gradient(176deg,#F6DCC4,#D9B382)) 1!important;}
/* Le passe-partout : la marge blanche d'un encadreur, plus large en bas. */
.mrd-i-b-passe img{
  background-color:var(--mrd-i-papier)!important;
  padding:calc(.9rem * var(--mrd-i-e))!important;
  padding-bottom:calc(1.5rem * var(--mrd-i-e))!important;
  border:1px solid var(--mrd-i-filet)!important;
  box-sizing:border-box!important;}

/* ---------------------------------------------------------------------
   4. LES COINS
   --------------------------------------------------------------------- */
.mrd-i-c-doux img{border-radius:calc(.45rem * var(--mrd-i-e))!important;}
.mrd-i-c-rond img{border-radius:calc(1.4rem * var(--mrd-i-e))!important;}

/* ---------------------------------------------------------------------
   5. LES OMBRES
   En « drop-shadow » et non en « box-shadow » : une ombre de boîte est
   rectangulaire, elle passerait donc à côté d'un bord déchiré ou d'un
   ovale. Le filtre, lui, épouse la forme découpée — c'est ce qui permet
   de combiner n'importe quel masque avec n'importe quelle ombre.
   --------------------------------------------------------------------- */
.mrd-i-o-douce img{
  filter:drop-shadow(0 calc(.5rem * var(--mrd-i-e)) calc(1.1rem * var(--mrd-i-e)) rgba(28,22,10,.26))!important;}
.mrd-i-o-franche img{
  filter:drop-shadow(calc(.4rem * var(--mrd-i-e)) calc(.45rem * var(--mrd-i-e)) 0 var(--mrd-i-filet))
         drop-shadow(0 calc(.3rem * var(--mrd-i-e)) calc(.7rem * var(--mrd-i-e)) rgba(28,22,10,.2))!important;}
/* Posée : l'ombre est courte et sous le bord bas — l'image a l'air
   simplement déposée sur la page, pas suspendue au-dessus. */
.mrd-i-o-posee img{
  filter:drop-shadow(0 calc(.16rem * var(--mrd-i-e)) calc(.24rem * var(--mrd-i-e)) rgba(28,22,10,.34))!important;}
/* Relief : deux ombres opposées, une claire en haut à gauche, une sombre
   en bas à droite. L'image paraît enfoncée dans le papier. */
.mrd-i-o-relief img{
  filter:drop-shadow(calc(-.16rem * var(--mrd-i-e)) calc(-.16rem * var(--mrd-i-e)) 0 rgba(255,255,255,.85))
         drop-shadow(calc(.2rem * var(--mrd-i-e)) calc(.2rem * var(--mrd-i-e)) calc(.3rem * var(--mrd-i-e)) rgba(28,22,10,.3))!important;}

/* Un masque brûlé porte déjà un filtre pour son liseré : sans cette
   règle, l'ombre choisie remplacerait le liseré au lieu de s'y ajouter.
   Deux déclarations de la même propriété sont une de trop — ici on les
   fond en une seule. */
.mrd-i-m-brule.mrd-i-o-douce img{
  filter:drop-shadow(0 0 calc(.12rem * var(--mrd-i-e)) rgba(86,48,16,.55))
         drop-shadow(0 calc(.5rem * var(--mrd-i-e)) calc(1.1rem * var(--mrd-i-e)) rgba(28,22,10,.26))!important;}
.mrd-i-m-brule.mrd-i-o-posee img{
  filter:drop-shadow(0 0 calc(.12rem * var(--mrd-i-e)) rgba(86,48,16,.55))
         drop-shadow(0 calc(.16rem * var(--mrd-i-e)) calc(.24rem * var(--mrd-i-e)) rgba(28,22,10,.34))!important;}
.mrd-i-m-brule.mrd-i-o-franche img{
  filter:drop-shadow(0 0 calc(.12rem * var(--mrd-i-e)) rgba(86,48,16,.55))
         drop-shadow(calc(.4rem * var(--mrd-i-e)) calc(.45rem * var(--mrd-i-e)) 0 var(--mrd-i-filet))!important;}
.mrd-i-m-brule.mrd-i-o-relief img{
  filter:drop-shadow(0 0 calc(.12rem * var(--mrd-i-e)) rgba(86,48,16,.55))
         drop-shadow(calc(.2rem * var(--mrd-i-e)) calc(.2rem * var(--mrd-i-e)) calc(.3rem * var(--mrd-i-e)) rgba(28,22,10,.3))!important;}

/* ---------------------------------------------------------------------
   6. L'INCLINAISON
   Une photo posée à la main n'est jamais parfaitement droite. Elle
   s'applique à la FIGURE — image et légende tournent ensemble, sinon la
   légende resterait droite sous une image penchée.
   --------------------------------------------------------------------- */
.mrd-i-t-gauche{transform:rotate(-1.4deg)!important;}
.mrd-i-t-droite{transform:rotate(1.6deg)!important;}
/* Une figure inclinée déborde de sa place : on lui en laisse un peu plus,
   sinon elle mordrait sur le texte de la colonne voisine. */
.mrd-i-t-gauche,.mrd-i-t-droite{
  margin-inline:calc(.6rem * var(--mrd-i-e))!important;}

/* ---------------------------------------------------------------------
   7. LES BOÎTES
   Ce qui est SOUS l'image : un carton de montage, un cadre, un polaroid.
   Elles habillent la figure entière, légende comprise — c'est la
   différence avec une bordure.
   --------------------------------------------------------------------- */
.mrd-i-f-plaque{
  background-color:var(--mrd-i-papier)!important;
  padding:calc(.8rem * var(--mrd-i-e))!important;
  border:1px solid var(--mrd-i-filet)!important;
  box-shadow:0 calc(.4rem * var(--mrd-i-e)) calc(1rem * var(--mrd-i-e)) rgba(28,22,10,.18)!important;}
.mrd-i-f-cadre{
  padding:calc(.7rem * var(--mrd-i-e))!important;
  border:calc(.5rem * var(--mrd-i-e)) solid transparent!important;
  border-image:var(--mrd-laiton-h,linear-gradient(176deg,#F6DCC4,#D9B382)) 1!important;
  background-color:var(--mrd-i-papier)!important;}
/* Le polaroid : une marge égale sur trois côtés, large en bas, et la
   légende écrite dans cette marge — donc pas de fond sous la légende, le
   fond de la boîte lui suffit. */
.mrd-i-f-polaroid{
  background-color:#FCFBF7!important;
  padding:calc(.7rem * var(--mrd-i-e)) calc(.7rem * var(--mrd-i-e)) calc(.5rem * var(--mrd-i-e))!important;
  box-shadow:0 calc(.35rem * var(--mrd-i-e)) calc(.9rem * var(--mrd-i-e)) rgba(28,22,10,.24)!important;
  border:1px solid rgba(28,22,10,.08)!important;}
.mrd-i-f-polaroid figcaption{
  padding-block:calc(.5rem * var(--mrd-i-e)) calc(.9rem * var(--mrd-i-e))!important;
  margin:0!important;}

/* La figure doit pouvoir porter un fond et un cadre : sans largeur
   propre, un bloc image occupe toute la colonne et le carton s'étirerait
   d'un bord à l'autre autour d'une petite image. */
.mrd-i-f-plaque,.mrd-i-f-cadre,.mrd-i-f-polaroid{
  width:-moz-fit-content!important;width:fit-content!important;
  max-width:100%!important;
  margin-inline:auto!important;}

/* =====================================================================
   DANS LE LIVRE, IL FAUT ETRE AUSSI FORT QUE LE LIVRE

   Sixieme fois que cette regle se rappelle a moi, et elle vaut aussi pour les
   poses : la feuille du grimoire ecrit « transform:none », « border-radius:2px »
   et « width:auto » sur les figures et les images du cahier, en « !important »
   et avec deux ou trois classes de specificite. Une pose ecrite sur une seule
   classe perdait donc en silence — l'inclinaison ne tournait rien, les coins
   restaient vifs, et un carton de montage s'etirait d'un bord a l'autre de la
   colonne autour d'une petite image. Mesure faite dans le navigateur : c'est
   exactement ce qui arrivait, et rien dans la feuille des poses ne le laissait
   deviner.

   On rejoue donc ces trois proprietes-la, une fois, avec la meme force. Les
   selecteurs courts restent au-dessus : ils servent a l'editeur, ou « .mrd-grim »
   n'existe pas.
   ===================================================================== */
.mrd-grim .mrd-g-texte figure.mrd-i-t-gauche,
.mrd-grim .mrd-g-flux figure.mrd-i-t-gauche{transform:rotate(-1.4deg)!important;}
.mrd-grim .mrd-g-texte figure.mrd-i-t-droite,
.mrd-grim .mrd-g-flux figure.mrd-i-t-droite{transform:rotate(1.6deg)!important;}

.mrd-grim .mrd-g-texte .mrd-i-c-doux img{border-radius:calc(.45rem * var(--mrd-i-e))!important;}
.mrd-grim .mrd-g-texte .mrd-i-c-rond img{border-radius:calc(1.4rem * var(--mrd-i-e))!important;}
/* Un masque decoupe la forme : un rayon de coin par-dessus n'aurait aucun sens,
   et la feuille du livre en pose un a toutes les images. */
.mrd-grim .mrd-g-texte .mrd-i-m-dechire img,
.mrd-grim .mrd-g-texte .mrd-i-m-brule img,
.mrd-grim .mrd-g-texte .mrd-i-m-ovale img,
.mrd-grim .mrd-g-texte .mrd-i-m-arche img,
.mrd-grim .mrd-g-texte .mrd-i-m-cercle img{border-radius:0!important;}

.mrd-grim .mrd-g-texte figure.mrd-i-f-plaque,
.mrd-grim .mrd-g-texte figure.mrd-i-f-cadre,
.mrd-grim .mrd-g-texte figure.mrd-i-f-polaroid,
.mrd-grim .mrd-g-flux figure.mrd-i-f-plaque,
.mrd-grim .mrd-g-flux figure.mrd-i-f-cadre,
.mrd-grim .mrd-g-flux figure.mrd-i-f-polaroid{
  width:-moz-fit-content!important;width:fit-content!important;
  max-width:100%!important;margin-inline:auto!important;}

/* =====================================================================
   LE RUBAN PASSE PAR-DESSUS ABSOLUMENT TOUT LE RESTE
   « Il doit toujours être par-dessus absolument tout le reste. »
   Trois choses le lui garantissent, et il en fallait bien trois :
     · un rang d'empilement plus haut que tout ce qui vit dans la page ;
     · aucun ancêtre qui le rogne — ni masque, ni « overflow », même quand
       l'image porte une pose déchirée ou une bordure arrondie ;
     · et la réserve du cahier, qui lui donne la place de dépasser (voir
       « --mrd-scotch-marge » dans la feuille du livre).
   ===================================================================== */
.mrd-grim .mrd-g-texte .mrd-scotch,
.mrd-scotch{z-index:9!important;}
/* L'enveloppe de la photo ne rogne jamais son ruban : une pose à masque
   déchiré ou à coins arrondis coupe l'image, pas ce qui est collé dessus. */
.mrd-grim .mrd-g-texte .mrd-i-photo,
.mrd-i-photo{overflow:visible!important;clip-path:none!important;}
.mrd-grim .mrd-g-texte figure:has(.mrd-scotch),
figure:has(.mrd-scotch){overflow:visible!important;}

/* =====================================================================
   LE FOND DE L'IMAGE : DÉTOURÉE OU PLEINE
   « Pourquoi une image en fond transparent se retrouve avec un encadré
   et une ombre ? » Parce que le cadre et l'ombre étaient écrits en dur
   pour toutes les images, et qu'une ombre de BOÎTE dessine le rectangle
   du fichier, pas le dessin : sur une image détourée, elle trace donc un
   cadre autour du sujet. Une image détourée remet les deux à zéro.
   Elle peut toujours recevoir une ombre — mais une des ombres de la
   famille « L'ombre », qui sont des « drop-shadow » et épousent la
   découpe. C'est tout l'intérêt de les avoir faites ainsi.
   ===================================================================== */
.mrd-i-detoure,
.mrd-grim .mrd-g-texte .mrd-i-detoure{--mrd-i-ombre-base:none;--mrd-i-rayon:0px;}
.mrd-i-detoure img,
.mrd-grim .mrd-g-texte .mrd-i-detoure img{
  background:transparent!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;}
/* Un carton de montage ou un passe-partout garde son sens sous une image
   détourée : c'est la FIGURE qui le porte, pas l'image. On ne touche donc
   qu'à ce qui habille l'image elle-même. */