/* ============================================================================
   Booky — LES SEPT MODÈLES DE LA CARTE D'ACCUEIL
   Fichier RÉÉCRIT le 14/08/2026 au soir. Les dessins précédents sont
   abandonnés (sa dictée : « je n'en aimais aucun »). Ceux-ci sont les siens,
   dessinés dans Canva d'après ses vrais livrets ; ce fichier ne fait que les
   retranscrire, un modèle à la fois.

   LA RÈGLE QUI COMMANDE TOUT LE FICHIER : aucun hexadécimal en dehors des
   blocs de défauts `.cartem.mN`. Toute forme, tout filet, toute déco tire sa
   couleur d'une variable — sans quoi l'hôte ne pourrait rien personnaliser.
   Deux exceptions assumées, et deux seulement : la plaque du QR et ses
   modules, qui restent clairs et sombres quoi qu'il choisisse (un QR non
   scannable est un produit cassé).

   LA CONVERSION DEPUIS CANVA (sa règle) : les images font 1240 × 1772 px
   (10,5 × 15 cm à 300 dpi) ; la carte mesure 225 × 321 en vignette. Les
   FORMES sont en pourcentage (x ÷ 1240, y ÷ 1772).

   LES TEXTES : sa règle disait le rem, au ratio 0,1815, avec un plancher de
   0,44 rem. Le rem étant ABSOLU, il n'est juste qu'à 225 px de large — dans
   la scène 3D, où la carte est deux fois plus grande, tout le texte tombait
   à la moitié de sa taille. On garde donc EXACTEMENT ses valeurs, exprimées
   en `cqw` (pourcentage de la largeur de la carte) : à 225 px le rendu est
   identique au sien, et il le reste à n'importe quelle taille.
     conversion : cqw = px Canva ÷ 12,40   (soit le même pourcentage que les formes)
     ses planchers : 0,44 rem = 3,13 cqw · 0,12 rem = 0,85 cqw

   COINS DROITS : la carte se coupe au massicot. Les seuls arrondis sont ceux
   des panneaux intérieurs de m2 et m3.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   LES DEUX GARDE-FOUS DE CASCADE — NE PAS TOUCHER, NE PAS DÉPLACER.
   cartes.css est chargée APRÈS style.css : à spécificité égale, c'est elle
   qui gagne. Ces deux sélecteurs à TROIS classes recalent la carte quoi
   qu'écrive un modèle. Les retirer fait revenir la carte blanche du 14/08.
   Aucun modèle ne redéclare position, inset, display ou une taille sur
   `.cartem.mN` sans une classe de plus.
   --------------------------------------------------------------------------- */
.c3-face .ff.cartem { position: absolute; inset: 0; width: auto; height: auto; }
.cm-vignette .ff.cartem { position: absolute; inset: auto; top: 0; left: 0; width: 225px; height: 321px; }

/* ===========================================================================
   LE SOCLE
   Il porte les cinq variables générales, les variables par zone qui
   retombent dessus, et un dessin nu mais correct : un modèle pas encore
   habillé reste une carte utilisable, jamais une page blanche.
   =========================================================================== */

.cartem {
  --fond: #fbf6ec;
  --encre: #2f3a2c;
  --accent: #7a8a5e;
  --police-titre: 'Fraunces', Georgia, serif;
  --police-texte: 'Baloo 2', system-ui, sans-serif;

  /* LE GARDE-FOU DU QR : ces deux-là ne suivent ni le fond ni l'accent. */
  --qr-plaque: #ffffff;
  --qr-encre: #2f3a2c;

  position: relative;          /* 1 classe : les garde-fous ci-dessus gagnent */
  container-type: inline-size; /* c'est lui qui rend les `cqw` possibles */
  overflow: hidden;            /* un aplat qui saigne s'arrête au bord */
  border-radius: 0;            /* massicot */
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police-texte);
  line-height: 1.35;
}

/* les quatre décos sont NEUTRES : invisibles tant qu'un modèle ne les
   habille pas. atelier.js les pose toujours, dans cet ordre. */
.cartem .cm-deco {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* ------------------------------------------------- les zones de texte
   Chacune a sa couleur et sa police, qui RETOMBENT sur la générale.
   L'hôte peut ne rien changer, changer une ligne, ou tout changer. */

.cartem .cm-sur     { color: var(--c-sur, var(--encre));     font-family: var(--f-sur, var(--police-texte)); }
.cartem .cm-nom     { color: var(--c-nom, var(--encre));     font-family: var(--f-nom, var(--police-titre)); }
.cartem .cm-sous    { color: var(--c-sous, var(--encre));    font-family: var(--f-sous, var(--police-texte)); }
.cartem .cm-mot     { color: var(--c-mot, var(--encre));     font-family: var(--f-mot, var(--police-texte)); }
.cartem .cm-qrtexte { color: var(--c-qrtexte, var(--encre)); font-family: var(--f-qrtexte, var(--police-texte)); }
.cartem .cm-fin     { color: var(--c-fin, var(--encre));     font-family: var(--f-fin, var(--police-texte)); }
.cartem .cm-marque  { color: var(--c-marque, var(--encre));  font-family: var(--f-marque, var(--police-texte)); }

.cartem .cm-corps { position: absolute; inset: 0; padding: 9% 8%; }

/* le dessin nu : un modèle pas encore retranscrit reste lisible */
.cartem .cm-corps > * { margin: 0; text-align: center; }
.cartem .cm-sur     { font-size: 4.4cqw; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.cartem .cm-nom     { font-size: 6.1cqw; font-weight: 600; line-height: 1.15; margin-top: 2.5cqw; }
.cartem .cm-sous    { font-size: 3.3cqw; margin-top: 1.4cqw; }
.cartem .cm-mot     { font-size: 3.3cqw; margin-top: 3.5cqw; }
.cartem .cm-qrtexte { font-size: 3.4cqw; font-weight: 600; }
.cartem .cm-fin     { font-size: 3.13cqw; font-style: italic; }
.cartem .cm-marque  { position: absolute; left: 0; right: 0; bottom: 3.2%; text-align: center; font-size: 1.77cqw; margin: 0; }

/* ---------------------------------------------------------- la photo
   Obligatoire dans chaque modèle. Vide, elle montre son emplacement :
   le dessin doit tenir dans les deux cas. */
.cartem .cm-photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
  /* le ton du cadre vide : chaque modèle donne le sien, sans quoi une
     carte à fond sombre montrerait un trou noir à la place de la photo */
  background: var(--photo-vide, var(--accent));
}
.cartem .cm-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartem .cm-photo-vide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.13cqw; font-weight: 600;
  color: var(--photo-vide-encre, var(--encre));
  background: transparent;      /* le ton du cadre se voit à travers */
  border: 0.85cqw dashed currentColor;
  /* le pointillé épouse la forme de l'emplacement : sans ça, une photo
     découpée en arche montrait un rectangle en pointillé dedans (leçon
     tirée de m6, depuis supprimé — elle vaut pour tout modèle à forme) */
  border-radius: inherit;
  opacity: 0.72;
}

/* ------------------------------------------------------- la plaque du QR
   Elle reçoit le VRAI SVG (qrObjetHTML) : on ne redessine jamais les
   repères. Sa clarté est un garde-fou, pas un choix de design. */
.cartem .cm-qr {
  position: absolute;
  background: var(--qr-plaque);
  padding: 4%;                 /* la zone de silence, sans quoi rien ne scanne */
  box-sizing: border-box;
}
.cartem .cm-qr svg { width: 100%; height: 100%; display: block; }
.cartem .cm-qr svg rect,
.cartem .cm-qr svg path { fill: var(--qr-encre); }

/* le dessin nu place le QR au centre bas */
.cartem .cm-corps .cm-qr { left: 22%; right: 22%; top: 34%; aspect-ratio: 1; }

/* ------------------------------------------------------------ la vignette
   Le choix de modèle montre la VRAIE carte réduite, jamais un dessin
   approché : 150 × 214, soit 225 × 321 à 66,67 %. Coins droits comme la
   carte elle-même — elle se coupe au massicot. */
.cm-vignette {
  position: relative;
  display: block;
  width: 150px;
  height: 214px;
  overflow: hidden;
  border-radius: 0;
}
.cm-vignette .cartem {
  transform: scale(0.6667);
  transform-origin: top left;
}

/* ===========================================================================
   m1 — LE BANDEAU
   Recto : trois rectangles empilés en escalier, tous à franc bord en haut.
   L'olive n'est pas une bande décorative — c'est la photo décalée de −32 px
   en x et +32 px en y, une ombre portée dure. Le crème est la même chose,
   décalée deux fois plus loin. Ce qui reste visible, ce sont les deux L.
   Le mot du haut se dresse dans la colonne de gauche, tourné à −90°.
   Verso : deux bandes claires, la plaque du QR centrée, le mot de fin.

   Aucun médaillon : la pastille à l'initiale qui avait remplacé la clé
   gravée est retirée le 14/08 au soir, sur sa dictée « aucun emplacement
   logo, nulle part ».
   =========================================================================== */

.cartem.m1 {
  --fond: #2f3a2c;
  --encre: #f5ead8;
  --accent: #7a8a5e;
  /* le verso pose deux textes sur les bandes claires : ils s'écrivent
     dans le fond, pas dans l'encre générale */
  --c-qrtexte: #2f3a2c;
  --c-marque: #2f3a2c;
  --m1-clair: #f5ead8;
  /* le cadre photo vide, relevé sur son dessin */
  --photo-vide: #d9d2be;
  --photo-vide-encre: #2f3a2c;
}

/* ------------------------------------------------------------ m1 · recto */

/* le crème, la couche la plus large — 24,19 % → bord, 0 → 75,06 % */
.cartem.m1.avant .cm-deco.a {
  left: 24.19%; right: 0; top: 0; bottom: 24.94%;
  background: var(--m1-clair);
}

/* l'olive, l'ombre portée de la photo — décalée de −2,58 % / +1,81 % */
.cartem.m1.avant .cm-deco.b {
  left: 27.10%; right: 2.58%; top: 1.81%; bottom: 26.07%;
  background: var(--accent);
}

/* la photo, à franc bord en haut et à droite */
.cartem.m1.avant .cm-photo {
  left: 29.68%; right: 0; top: 0; bottom: 27.94%;
  background: var(--m1-clair);
}

/* -- LA PASTILLE À L'INITIALE A ÉTÉ RETIRÉE le 14/08 au soir, dicté :
   « aucun emplacement logo, nulle part. Ni emplacement logo, ni
   médaillon, ni clé gravée — sur la double page comme sur la carte
   d'accueil, où le médaillon de m1 est à retirer s'il y est encore. »
   Sa raison : les propriétaires de logements n'ont pour ainsi dire
   jamais de logo. La déco `c` de m1 redevient donc neutre. -- */

/* les trois lignes du bas, centrées sur l'axe du bloc photo. Le mot du
   haut n'est plus dedans (squelette du 14/08 au soir), le corps peut donc
   se placer librement. */
.cartem.m1.avant .cm-corps {
  left: 29.68%; right: 0; top: auto; bottom: 2.5%;
  padding: 0 4%;
  display: flex; flex-direction: column; align-items: center;
}

/* le mot du haut, dressé dans la colonne de gauche */
.cartem.m1.avant .cm-sur {
  position: absolute;
  left: 0; width: 24.19%;
  top: 10.9%; height: 53.1%;
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12.1cqw;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
}

.cartem.m1.avant .cm-nom  { font-size: 4.84cqw; font-weight: 700; letter-spacing: -0.01em; padding: 0 4%; }
.cartem.m1.avant .cm-sous { font-size: 3.13cqw; margin-top: 1.3cqw; }
.cartem.m1.avant .cm-mot  { font-size: 3.13cqw; font-style: italic; margin-top: 1.9cqw; }

/* ------------------------------------------------------------ m1 · verso */

.cartem.m1.arriere-face .cm-deco.a {
  left: 0; right: 0; top: 0; height: 12.98%;
  background: var(--m1-clair);
}
.cartem.m1.arriere-face .cm-deco.b {
  left: 0; right: 0; bottom: 0; height: 8.01%;
  background: var(--m1-clair);
}
.cartem.m1.arriere-face .cm-deco.c {
  left: 42.02%; top: 12.98%; transform: translateY(-50%);
  width: 15.97%;
  font-size: 5.4cqw;
}

.cartem.m1.arriere-face .cm-corps { inset: 0; padding: 0; }

.cartem.m1.arriere-face .cm-qrtexte {
  position: absolute;
  left: 8%; right: 8%; top: 3.1%;
  margin: 0;
  text-align: center;
  font-size: 3.39cqw;
  font-weight: 700;
}

.cartem.m1.arriere-face .cm-qr {
  left: 21.77%; right: 21.77%; top: 33.86%;
  aspect-ratio: 1;
}

.cartem.m1.arriere-face .cm-fin {
  position: absolute;
  left: 10%; right: 10%; top: 78.5%;
  margin: 0;
  text-align: center;
  font-size: 3.13cqw;
  font-style: italic;
}

/* laissé minuscule sur sa décision du 14/08 : plutôt une mention discrète
   qu'une ligne qui pèse autant que le lieu */
.cartem.m1.arriere-face .cm-marque { bottom: 3.3%; font-size: 1.77cqw; }

/* ===========================================================================
   m2 — LE CHAMP
   Recto : la photo prend TOUTE la carte. Une pastille à bouts ronds porte le
   mot du haut, en haut à gauche ; un grand panneau clair flotte au pied,
   doublé d'un filet à l'intérieur, avec un tiret entre le lieu et le mot.
   Verso : un seul panneau, très arrondi, qui tient la plaque du QR.

   Les arrondis sont en cqw et non en px : un rayon fixe ne suivrait pas la
   carte, qui change de taille entre la vignette et la scène 3D. Le rapport
   à l'élément — ce que sa règle voulait éviter avec les % — est préservé,
   puisque cqw se mesure sur la largeur de la carte, jamais sur la boîte.
   =========================================================================== */

.cartem.m2 {
  --fond: #f5ead8;
  --encre: #2f3a2c;
  --accent: #7a8a5e;
  --photo-vide: #d9d2be;
  --photo-vide-encre: #2f3a2c;
  --m2-panneau: #f5ead8;
  --m2-plein: #2f3a2c;
  /* le voile qui protège le mot du haut sur une photo claire : la teinte
     du modèle, diluée — jamais du noir (règle de la marque) */
  --m2-voile: rgba(47, 58, 44, 0.55);
  --c-sur: #f5ead8;
  --c-sous: var(--accent);
  --c-qrtexte: #f5ead8;
  --c-fin: #f5ead8;
}

/* ------------------------------------------------------------ m2 · recto */

.cartem.m2.avant .cm-photo { inset: 0; }

/* LE MOT DU HAUT (sa correction du 14/08 au soir : « on dirait un bouton :
   ça doit être un beau texte »). La pastille a vécu — c'est de la
   typographie, posée en tête, au-dessus de la photo : grandes capitales
   largement espacées, dans la police des titres. Un voile monte du haut
   pour que le mot tienne sur n'importe quelle photo — dans la teinte du
   modèle, jamais du noir. */
.cartem.m2.avant .cm-deco.d {
  left: 0; right: 0; top: 0; height: 26%;
  background: linear-gradient(to bottom, var(--m2-voile), transparent);
  z-index: 2;
}

.cartem.m2.avant .cm-sur {
  position: absolute;
  left: 8%; right: 8%; top: 6.6%;
  margin: 0;
  z-index: 3;
  text-align: center;
  font-family: var(--f-sur, var(--police-titre));
  font-size: 5.4cqw;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;        /* la dernière lettre garde sa place */
  text-transform: uppercase;
  line-height: 1.2;
}

/* LE PANNEAU se règle sur son texte (sa correction) : c'est le corps
   lui-même qui le dessine, ancré au pied, sa hauteur suivant ce qu'on y
   écrit. Un nom court donne un panneau court, un mot d'accueil de trois
   lignes l'agrandit d'autant. */
.cartem.m2.avant .cm-corps {
  left: 6.45%; right: 6.45%; top: auto; bottom: 15.35%;
  padding: 5.6cqw 7.3cqw 6cqw;
  background: var(--m2-panneau);
  border-radius: 7.3cqw;
  display: flex; flex-direction: column; align-items: center;
  z-index: 3;
}
/* son filet intérieur suit la même respiration */
.cartem.m2.avant .cm-corps::before {
  content: '';
  position: absolute;
  inset: 1.94cqw;
  border: 0.85cqw solid var(--accent);
  border-radius: 5.6cqw;
  pointer-events: none;
}

.cartem.m2.avant .cm-nom  { font-size: 5.97cqw; font-weight: 700; line-height: 1.1; }
.cartem.m2.avant .cm-sous { font-size: 3.4cqw; margin-top: 1.4cqw; }
/* le tiret : il sépare le lieu du mot d'accueil, comme sur son dessin */
.cartem.m2.avant .cm-mot {
  position: relative;
  font-size: 3.13cqw;
  font-style: italic;
  margin-top: 6.4cqw;
}
.cartem.m2.avant .cm-mot::before {
  content: '';
  position: absolute;
  left: 50%; top: -3.4cqw;
  width: 12.1cqw;
  margin-left: -6.05cqw;
  border-top: 0.85cqw solid var(--accent);
}

/* ------------------------------------------------------------ m2 · verso */

.cartem.m2.arriere-face .cm-deco.a {
  left: 6.45%; right: 6.45%; top: 11.29%; bottom: 13.09%;
  background: var(--m2-plein);
  border-radius: 8.9cqw;
}

.cartem.m2.arriere-face .cm-corps { inset: 0; padding: 0; }

.cartem.m2.arriere-face .cm-qrtexte {
  position: absolute;
  left: 12%; right: 12%; top: 17.4%;
  margin: 0;
  text-align: center;
  font-size: 3.39cqw;
  font-weight: 700;
}
/* le même tiret qu'au recto, en clair cette fois */
.cartem.m2.arriere-face .cm-qrtexte::after {
  content: '';
  position: absolute;
  left: 50%; top: 5.6cqw;
  width: 12.1cqw;
  margin-left: -6.05cqw;
  border-top: 0.85cqw solid var(--c-qrtexte, var(--encre));
}

.cartem.m2.arriere-face .cm-qr {
  left: 24.19%; right: 24.19%; top: 31.60%;
  aspect-ratio: 1;
  border-radius: 3.2cqw;
}

.cartem.m2.arriere-face .cm-fin {
  position: absolute;
  left: 12%; right: 12%; top: 74.4%;
  margin: 0;
  text-align: center;
  font-size: 3.13cqw;
  font-style: italic;
}

.cartem.m2.arriere-face .cm-marque { bottom: 4.4%; font-size: 1.77cqw; }


/* ============================================================
   m3 « L'Écusson »
   Fond vert profond sur les deux faces. Au recto, la photo est
   sertie dans un cartouche crème, et un aplat crème à bord
   courbe monte du pied de la carte pour porter les textes.
   Au verso, un unique panneau crème arrondi porte tout le bloc
   QR, la signature restant sur le fond.
   ============================================================ */

.cartem.m3 {
  /* Le vert profond du dessin sert de fond aux deux faces, le crème
     sert à la fois d'encre sur le fond et de matière aux aplats. */
  --fond: #2f3a2c;
  --encre: #f5ead8;
  --accent: #7a8a5e;
  /* Une seule matière claire, relevée à l'identique sur le cartouche
     photo, sur l'aplat de pied et sur le panneau du verso. */
  --m3-clair: #f5ead8;
  /* Dès qu'un texte se pose sur le crème, il repasse en vert profond ;
     seul le lieu garde le vert d'accent, comme sur le dessin. */
  --c-nom: #2f3a2c;
  --c-sous: var(--accent);
  --c-mot: #2f3a2c;
  --c-qrtexte: #2f3a2c;
  --c-fin: #2f3a2c;
  /* Fond de l'emplacement photo vide, relevé au pixel dans le dessin. */
  --photo-vide: #d9d2be;
  --photo-vide-encre: #2f3a2c;
}

/* ------------------------------ RECTO ------------------------------ */

/* Le mot du haut est la seule ligne posée directement sur le fond :
   il garde l'encre crème générale, donc aucun --c-sur à déclarer.
   Il vit HORS du corps dans le squelette : rien ne le place et rien
   n'annule la marge du <p>, il faut donc tout écrire ici. Le dessin
   le montre en minuscules et sans interlettrage — les capitales
   espacées du socle sont explicitement rendues. */
.cartem.m3.avant .cm-sur {
  position: absolute;
  left: 0; right: 0; top: 5.18%;
  margin: 0;
  text-align: center;
  font-size: 3.13cqw;      /* mesuré 38 px Canva, remonté au plancher */
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.15;
}
/* Le filet du dessin ne fait que 3 px : le plancher de 0,85cqw
   l'épaissit, sa longueur et son écart restent ceux mesurés. */
.cartem.m3.avant .cm-sur::after {
  content: '';
  display: block;
  width: 12.10cqw;
  height: 0.85cqw;
  margin: 3.36cqw auto 0;
  background: var(--accent);
}

/* Déco b : le cartouche crème. Il est posé AVANT la photo dans le
   squelette, donc la photo vient se caler dessus et ne laisse
   dépasser que le liseré de 24 px mesuré sur les quatre côtés. */
.cartem.m3.avant .cm-deco.b {
  left: 15.32%; right: 15.32%; top: 13.54%; bottom: 30.02%;
  background: var(--m3-clair);
  border-radius: 1.94cqw;
}
.cartem.m3.avant .cm-photo {
  left: 17.26%; right: 17.26%; top: 14.90%; bottom: 31.38%;
  border-radius: 0.97cqw;  /* l'arrondi intérieur est deux fois plus serré */
}

/* Déco a : l'aplat de pied. Le profil relevé tous les 10 px donne un
   plat à y=1330 entre x=120 et x=1119, puis une descente à 1366 aux
   deux bords de carte : c'est un arc de CERCLE de 223 px dont le
   centre tombe à x=120. L'aplat déborde donc de 103 px de chaque côté,
   et la carte, qui coupe son débord, ne montre que la pente douce du
   dessin — un arrondi calé sur les bords donnerait au contraire une
   tangente verticale au massicot. */
.cartem.m3.avant .cm-deco.a {
  left: -8.31%; right: -8.31%; top: 75.06%; bottom: 0;
  background: var(--m3-clair);
  border-radius: 17.98cqw 17.98cqw 0 0;
}

/* Le corps se cale sur le PLAT de l'aplat : ses textes restent donc
   toujours sur le crème, jamais sur la pente. */
.cartem.m3.avant .cm-corps {
  left: 0; right: 0; top: 75.06%; bottom: 0;
  padding: 6.58cqw 8% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Le socle donne au nom une marge haute de 2,5cqw qui survit à son
   propre `margin: 0` : sans cette remise à zéro, tout le bloc de
   textes descendrait de 31 px sous la position relevée. */
.cartem.m3.avant .cm-nom {
  margin-top: 0;
  font-size: 5.24cqw;      /* 65 px mesurés sur les hampes et l'œil */
  font-weight: 700;
  line-height: 1.15;
}
.cartem.m3.avant .cm-sous {
  margin-top: 1.24cqw;
  font-size: 3.13cqw;      /* 27 px au dessin, remontés au plancher */
  line-height: 1.15;
}
.cartem.m3.avant .cm-mot {
  margin-top: 3.58cqw;
  font-size: 3.13cqw;      /* 30 px au dessin, remontés au plancher */
  font-style: italic;
  line-height: 1.15;
}

/* Le dessin n'emploie que deux aplats au recto : on neutralise
   les deux décos restantes pour qu'aucune marque ne subsiste. */
.cartem.m3.avant .cm-deco.c,
.cartem.m3.avant .cm-deco.d { display: none; }

/* ------------------------------ VERSO ------------------------------ */

/* Déco a : le panneau crème unique, au même arrondi que le cartouche
   du recto — c'est le même geste répété d'une face à l'autre. */
.cartem.m3.arriere-face .cm-deco.a {
  left: 12.10%; right: 12.10%; top: 16.93%; bottom: 20.99%;
  background: var(--m3-clair);
  border-radius: 1.94cqw;
}

/* Le corps couvre toute la face : les repères en pourcentage de ses
   enfants restent donc ceux de la carte, comme relevés sur l'image. */
.cartem.m3.arriere-face .cm-corps {
  left: 0; right: 0; top: 0; bottom: 0;
  padding: 0;
}
.cartem.m3.arriere-face .cm-qrtexte {
  position: absolute;
  left: 12.10%; right: 12.10%; top: 21.49%;
  margin: 0;
  text-align: center;
  font-size: 3.13cqw;      /* même corps que le mot du haut du recto */
  font-weight: 700;
  line-height: 1.15;
}
/* Filet identique à celui du recto : même longueur, même plancher. */
.cartem.m3.arriere-face .cm-qrtexte::after {
  content: '';
  display: block;
  width: 12.10cqw;
  height: 0.85cqw;
  margin: 3.60cqw auto 0;
  background: var(--accent);
}
/* Plaque parfaitement carrée, à coins vifs sur le dessin, cernée
   d'un filet d'accent. box-sizing pour que le filet n'agrandisse
   pas le carré mesuré, et aucun réglage des couleurs du QR. */
.cartem.m3.arriere-face .cm-qr {
  left: 25.81%; right: 25.81%; top: 31.60%;
  aspect-ratio: 1;
  box-sizing: border-box;
  border: 0.85cqw solid var(--accent);
  border-radius: 0;
}
.cartem.m3.arriere-face .cm-fin {
  position: absolute;
  left: 12.10%; right: 12.10%; top: 69.60%;
  margin: 0;
  text-align: center;
  font-size: 3.13cqw;      /* 30 px au dessin, remontés au plancher */
  font-style: italic;
  line-height: 1.15;
}
/* La signature sort du panneau et retombe sur le fond vert :
   elle reprend donc l'encre crème générale. */
.cartem.m3.arriere-face .cm-marque {
  bottom: 12.92%;
  font-size: 1.77cqw;
  line-height: 1.2;
}

/* Le verso ne montre qu'un seul aplat : les trois autres décos
   sont neutralisées. */
.cartem.m3.arriere-face .cm-deco.b,
.cartem.m3.arriere-face .cm-deco.c,
.cartem.m3.arriere-face .cm-deco.d { display: none; }


/* ═══ m4 « La Réglure » ═══
   Aucun aplat de fond : tout tient aux filets doubles et au tirage photo. */

.cartem.m4 {
  /* la plaque du QR prend le ton du papier, mais ne suit jamais --fond */
  --qr-plaque: #fbf6ec;
  --qr-encre: #2f3a2c;
  --fond: #fbf6ec;
  --encre: #2f3a2c;
  --accent: #7a8a5e;
  /* le mot du haut, le lieu et la signature sont tracés en vert, pas en encre */
  --c-sur: var(--accent);
  --c-sous: var(--accent);
  --c-marque: var(--accent);
  --photo-vide: #d9d2be;
  --photo-vide-encre: #6e6a5a;
  /* Le dessin trace des filets de 2 à 5 px Canva, tous sous le plancher
     d'impression : ils sont donc tous ramenés à la même épaisseur mini. */
  --m4-filet: 0.85cqw;
}

/* ─────────── RECTO ─────────── */

/* Filet double du haut, marge latérale de 8,87 % de chaque côté.
   Un seul élément porte les deux traits en bordures : sa hauteur propre
   n'est que l'espace qui les sépare, d'où le content-box. */
.cartem.m4.avant .cm-deco.a,
.cartem.m4.arriere-face .cm-deco.a {
  left: 8.87%; right: 8.87%; top: 8.47%;
  height: 1.05cqw;
  box-sizing: content-box;
  border-top: var(--m4-filet) solid var(--accent);
  border-bottom: var(--m4-filet) solid var(--accent);
}

/* Second filet double : il ferme le bloc de titre au recto, il ferme
   le QR au verso. Même dessin, seule la hauteur change. */
.cartem.m4.avant .cm-deco.b,
.cartem.m4.arriere-face .cm-deco.b {
  left: 8.87%; right: 8.87%;
  height: 0.81cqw;
  box-sizing: content-box;
  border-top: var(--m4-filet) solid var(--accent);
  border-bottom: var(--m4-filet) solid var(--accent);
}
.cartem.m4.avant .cm-deco.b { top: 31.94%; }
.cartem.m4.arriere-face .cm-deco.b { top: 66.59%; }

/* Décos inemployées. La c est masquée plutôt que vidée : son attribut
   data-initiale ne doit rien imprimer sur ce modèle. */
.cartem.m4.avant .cm-deco.c,
.cartem.m4.arriere-face .cm-deco.c,
.cartem.m4.arriere-face .cm-deco.d { display: none; }

/* Court filet de clôture sous le mot d'accueil, centré. */
.cartem.m4.avant .cm-deco.d {
  left: 43.95%; width: 12.10%; top: 92.55%;
  height: var(--m4-filet);
  background: var(--accent);
}

/* Photo montée en tirage : ombre dure, sans flou, décalée de 20 px Canva
   vers la droite et vers le bas, dans le vert du modèle — jamais de noir.
   L'ombre appartient à la photo, elle la suit donc si le cadrage bouge. */
.cartem.m4.avant .cm-photo {
  left: 19.35%; right: 19.35%; top: 38.37%; bottom: 22.12%;
  background: var(--photo-vide);
  border-radius: 0;
  box-shadow: 1.61cqw 1.61cqw 0 var(--accent);
}

/* Le corps couvre toute la carte : au recto la photo s'intercale entre le
   lieu et le mot d'accueil, aucun flux vertical continu n'est possible.
   Chaque ligne est donc calée à la hauteur relevée sur le dessin. */
.cartem.m4.avant .cm-corps { left: 0; right: 0; top: 0; bottom: 0; padding: 0; }

.cartem.m4.avant .cm-sur,
.cartem.m4.avant .cm-nom,
.cartem.m4.avant .cm-sous,
.cartem.m4.avant .cm-mot {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}

.cartem.m4.avant .cm-sur  { top: 10.51%; height: 5%; font-size: 3.13cqw; font-weight: 700; line-height: 1.2; }
/* Le grand titre : seule taille du modèle nettement au-dessus du plancher. */
.cartem.m4.avant .cm-nom  { top: 15.87%; height: 9%; font-size: 7.26cqw; font-weight: 700; line-height: 1.1; }
.cartem.m4.avant .cm-sous { top: 24.50%; height: 5%; font-size: 3.13cqw; line-height: 1.2; }
.cartem.m4.avant .cm-mot  { top: 83.34%; height: 5%; font-size: 3.13cqw; font-style: italic; line-height: 1.2; }

/* ─────────── VERSO ─────────── */

.cartem.m4.arriere-face .cm-corps { left: 0; right: 0; top: 0; bottom: 0; padding: 0; }

.cartem.m4.arriere-face .cm-qrtexte,
.cartem.m4.arriere-face .cm-fin,
.cartem.m4.arriere-face .cm-marque {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}

.cartem.m4.arriere-face .cm-qrtexte { top: 12.58%; height: 6%; font-size: 3.23cqw; font-weight: 700; line-height: 1.2; }
.cartem.m4.arriere-face .cm-fin     { top: 71.48%; height: 5%; font-size: 3.13cqw; font-style: italic; line-height: 1.2; }
.cartem.m4.arriere-face .cm-marque  { top: 90.10%; height: 4%; font-size: 1.77cqw; line-height: 1.2; }

/* Le QR n'est pas posé sur une plaque : il garde le ton du papier et se
   contente d'un filet d'encre. Le contraste modules/fond reste entier,
   la lecture au téléphone n'est pas touchée. Le retrait intérieur est la
   zone de silence relevée sur le dessin. */
.cartem.m4.arriere-face .cm-qr {
  left: 25.81%; right: 25.81%; top: 27.09%;
  aspect-ratio: 1;
  box-sizing: border-box;
  /* Le dessin ne met pas de plaque blanche : le QR se pose sur le papier.
     On le fait donc par --qr-plaque, dont la valeur par défaut est le papier
     de m4 — surtout PAS par var(--fond), qui suivrait l'hôte et rendrait le
     code illisible le jour où il assombrit la carte. */
  background: var(--qr-plaque);
  border: var(--m4-filet) solid var(--qr-encre);
  border-radius: 0;
  padding: 3.87cqw;
}


/* ============================================================
   m5 « Le Diptyque »
   Une seule coupe horizontale à 52,26 % partage la carte en deux
   moitiés, soulignée par une barre olive de 14 px identique sur les
   deux faces. Le recto met la photo en haut et l'aplat vert en bas ;
   le verso intervertit exactement les deux.
   ============================================================ */

.cartem.m5 {
  --fond: #2f3a2c;             /* le vert Booky : moitié basse au recto, moitié haute au verso */
  --encre: #f5ead8;            /* crème : tous les textes posés sur le vert, et les deux filets */
  --accent: #7a8a5e;           /* l'olive de la barre de partage, qui reparaît sur la mention */
  --c-sur: #ffb59e;            /* seul écart chromatique du modèle : le mot du haut */
  --c-marque: var(--accent);         /* au verso la mention tombe sur le crème : crème sur crème serait perdu */
  --m5-clair: #f5ead8;         /* l'aplat bas du verso, qui porte la plaque du QR */
  --photo-vide: #d9d2be;       /* relevé sur le cadre photo vide du dessin */
  --photo-vide-encre: #6e6a5a; /* son étiquette, plus sourde que l'olive */
}

/* ---------- la barre de partage, commune aux deux faces ----------
   C'est un aplat à fond perdu, pas un filet : ses deux bords sont donc
   pris en pourcentage de hauteur, comme les aplats qu'elle sépare. Son
   bord bas et le bord haut de l'aplat suivant sont la même ligne du
   dessin, il faut qu'ils s'écrivent dans le même système.
   z-index 2 : la photo est posée après les décos dans le squelette, et
   un arrondi de rendu suffirait à lui faire mordre la barre. */
.cartem.m5.avant .cm-deco.a,
.cartem.m5.arriere-face .cm-deco.a {
  left: 0; right: 0; top: 52.26%; bottom: 46.95%;
  background: var(--accent);
  z-index: 2;
}

/* Le dessin ne comporte que deux aplats : plutôt que de détourner les
   décos restantes, on les éteint pour que rien ne sorte au massicot. */
.cartem.m5.avant .cm-deco.b,
.cartem.m5.avant .cm-deco.c,
.cartem.m5.avant .cm-deco.d,
.cartem.m5.arriere-face .cm-deco.c,
.cartem.m5.arriere-face .cm-deco.d { display: none; }

/* ================= RECTO ================= */

/* Photo à fond perdu sur trois bords, arrêtée net sur la barre. */
.cartem.m5.avant .cm-photo {
  left: 0; right: 0; top: 0; bottom: 47.74%;
}

/* Le mot du haut vit hors de .cm-corps dans le squelette : il est calé
   seul, dans le vert, à distance mesurée sous la barre. On lui donne la
   même réserve latérale qu'au corps, sinon un mot long courrait au bord. */
.cartem.m5.avant .cm-sur {
  /* sans position, les décalages ci-dessous sont ignorés et le mot part
     en haut de la carte, sous la photo — corrigé à la relecture du rendu */
  position: absolute;
  left: 0; right: 0; top: 64.26%;
  z-index: 3;
  margin: 0;
  padding: 0 6%;
  text-align: center;
  font-size: 3.13cqw;   /* mesuré 33 px Canva, remonté au plancher texte */
  font-weight: 700;
  line-height: 1.15;
}

/* Le bloc part d'un haut mesuré et descend au fil du texte : le dessin
   laisse volontairement 12 % de vert vide en dessous, on ne l'étire pas. */
.cartem.m5.avant .cm-corps {
  left: 0; right: 0; top: 68.98%; bottom: auto;
  z-index: 3;
  padding: 0 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cartem.m5.avant .cm-nom {
  margin: 0;
  font-size: 6.69cqw;   /* 83 px Canva : la seule grande taille du modèle */
  font-weight: 700;
  line-height: 1.15;
}

.cartem.m5.avant .cm-sous {
  margin: 2.41cqw 0 0;
  font-size: 3.13cqw;   /* mesuré 29 px, remonté au plancher texte */
  font-weight: 400;
  line-height: 1.15;
}

/* Le mot d'accueil porte son filet. En colonne flex les marges ne se
   replient pas, l'écart filet / texte reste celui du dessin. Le filet
   rendu est plus épais que les 3 px dessinés, plancher oblige : on le
   centre donc sur la ligne mesurée au lieu d'en aligner le bord haut,
   sans quoi il descendrait de la moitié de son épaisseur. */
.cartem.m5.avant .cm-mot {
  margin: 4.35cqw 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 3.13cqw;   /* mesuré 31 px, remonté au plancher texte */
  font-style: italic;
  line-height: 1.15;
}
.cartem.m5.avant .cm-mot::before {
  content: "";
  width: 12.10cqw;      /* 150 px Canva */
  height: 0.85cqw;      /* mesuré 3 px, remonté au plancher filet */
  margin-bottom: 5.07cqw;
  background: var(--encre);
}

/* ================= VERSO ================= */

/* L'aplat crème occupe en bas la place que la photo tient en haut au recto. */
.cartem.m5.arriere-face .cm-deco.b {
  left: 0; right: 0; top: 53.05%; bottom: 0;
  background: var(--m5-clair);
}

/* .cm-corps couvre toute la face, et c'est voulu : la plaque du QR est un
   enfant absolu de ce bloc, seul un bloc à fond perdu lui rend les
   pourcentages de la carte comme repère. Le prix à payer est le retrait
   du premier paragraphe, porté par sa marge plutôt que par un top. */
.cartem.m5.arriere-face .cm-corps {
  left: 0; right: 0; top: 0; bottom: 0;
  padding: 0 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cartem.m5.arriere-face .cm-qrtexte {
  margin: 25.10cqw 0 0;
  font-size: 3.31cqw;   /* 41 px Canva : le seul texte du modèle au-dessus du plancher */
  font-weight: 700;
  line-height: 1.15;
}

/* Même filet qu'au recto, même largeur : c'est la signature du diptyque.
   Seule la respiration en dessous change, bien plus longue ici. */
.cartem.m5.arriere-face .cm-fin {
  margin: 4.66cqw 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 3.13cqw;   /* mesuré 33 px, remonté au plancher texte */
  font-style: italic;
  line-height: 1.15;
}
.cartem.m5.arriere-face .cm-fin::before {
  content: "";
  width: 12.10cqw;
  height: 0.85cqw;
  margin-bottom: 13.86cqw;
  background: var(--encre);
}

/* Plaque de 600 × 600 px, centrée au pixel dans l'aplat crème.
   Coins vifs : le pixel d'angle est déjà blanc sur le dessin, et rien
   ne doit rogner la zone de lecture. */
.cartem.m5.arriere-face .cm-qr {
  left: 25.81%; right: 25.81%; top: 57.56%;
  aspect-ratio: 1;
}

.cartem.m5.arriere-face .cm-marque {
  left: 0; right: 0; bottom: 3.27%;
  margin: 0;
  text-align: center;
  font-size: 1.77cqw;
  line-height: 1.15;
}


/* ===========================================================================
   m6 — LE HUBLOT : SUPPRIMÉ le 14/08 au soir, dicté.
   « Le modèle m6 est supprimé, sur la double page ET sur la carte
   d'accueil. » Son dessin est retiré d'ici en entier. SA CLÉ NE SE
   RÉUTILISE JAMAIS — même règle que les formats 'mini', 'carre' et
   'grand' rayés le 13/08 : un objet enregistré qui porte 'm6' retombe
   sur m1, et on ne renumérote pas (m7 reste m7, m8 reste m8).
   =========================================================================== */

/* ============================================================
   m7 « La Fenêtre »
   Le fond de carte vert fait office de cadre épais : il déborde
   de tous les côtés. Un panneau crème est posé dedans (retrait
   110 px Canva partout), et un filet fin le redouble 40 px plus
   à l'intérieur. Recto et verso partagent exactement ce cadrage.
   ============================================================ */

.cartem.m7 {
  --fond: #2f3a2c;            /* le cadre : c'est le fond de carte lui-même, il porte le fond perdu */
  --encre: #2f3a2c;           /* tous les textes tombent sur le crème, donc en vert foncé */
  --accent: #7a8a5e;          /* filet intérieur, liseré du QR, mentions secondaires */
  --m7-creme: #f5ead8;        /* le panneau est une forme, pas une encre : il lui faut sa variable */
  --c-sur: var(--accent);           /* le mot du haut est en vert clair sur le dessin */
  --c-sous: var(--accent);          /* le lieu aussi */
  --c-marque: var(--accent);        /* la mention © Booky également */
  --photo-vide: #d9d2be;
  --photo-vide-encre: #6e6a5a;
}

/* --- le panneau crème, identique sur les deux faces ---------- */
/* 110 px de retrait mesurés : 8.87 % en largeur, 6.21 % en hauteur. */
.cartem.m7.avant .cm-deco.a,
.cartem.m7.arriere-face .cm-deco.a {
  left: 8.87%; right: 8.87%; top: 6.21%; bottom: 6.21%;
  background: var(--m7-creme);
  border-radius: 0;           /* le dessin montre des angles vifs, comme le massicot */
}

/* --- le filet qui double le panneau ------------------------- */
/* 150 px de retrait mesurés. Le trait fait 3 px sur le rendu,
   soit 0.24cqw : sous le plancher d'impression, on remonte à 0.85cqw. */
.cartem.m7.avant .cm-deco.b,
.cartem.m7.arriere-face .cm-deco.b {
  left: 12.10%; right: 12.10%; top: 8.47%; bottom: 8.47%;
  box-sizing: border-box;
  border: 0.85cqw solid var(--accent);
  background: none;
  border-radius: 0;
}

/* Le modèle ne montre que deux aplats : c et d n'ont rien à porter. */
.cartem.m7.avant .cm-deco.c,
.cartem.m7.avant .cm-deco.d,
.cartem.m7.arriere-face .cm-deco.c,
.cartem.m7.arriere-face .cm-deco.d { display: none; }


/* ===================== RECTO ================================ */

/* La photo occupe toute la largeur intérieure du filet moins une
   marge de respiration : 190 px de bord, haut compris. */
.cartem.m7.avant .cm-photo {
  left: 15.32%; right: 15.32%; top: 10.72%; bottom: 38.49%;
  border-radius: 0;
}

/* Le mot du haut est seul entre la photo et le bloc de titre. */
.cartem.m7.avant .cm-sur {
  position: absolute;
  left: 15.32%; right: 15.32%; top: 64.22%;
  text-align: center;
  font-size: 3.13cqw;         /* mesuré 32 px Canva = 2.58cqw, relevé au plancher texte */
  line-height: 1.2;
  font-weight: 700;
}

/* Le bloc de titre s'empile sous le mot du haut ; on l'ancre par
   le haut pour garder les écarts mesurés sur le dessin. */
/* Les quatre lignes sont posées une par une, aux hauteurs relevées sur le
   dessin : empilées en flux elles débordaient du panneau et le mot
   d'accueil se faisait couper par le bord de la carte. */
.cartem.m7.avant .cm-corps {
  position: absolute;
  left: 15.32%; right: 15.32%; top: 0; bottom: 0;
  padding: 0;
}
.cartem.m7.avant .cm-sur,
.cartem.m7.avant .cm-nom,
.cartem.m7.avant .cm-sous,
.cartem.m7.avant .cm-mot {
  position: absolute;
  left: 0; right: 0;
  margin: 0;
  text-align: center;
}
.cartem.m7.avant .cm-sur  { top: 64.90%; font-size: 3.13cqw; font-weight: 700; letter-spacing: 0.16em; }
.cartem.m7.avant .cm-nom  { top: 70.26%; font-size: 5.48cqw; font-weight: 700; line-height: 1.15; }
.cartem.m7.avant .cm-sous { top: 76.24%; font-size: 3.13cqw; line-height: 1.2; }
.cartem.m7.avant .cm-mot  { top: 85.61%; font-size: 3.13cqw; line-height: 1.2; font-style: italic; }


/* ===================== VERSO ================================ */

/* Tout le verso tient dans une seule colonne, du texte du QR au
   mot de fin ; elle épouse l'intérieur du filet. */
.cartem.m7.arriere-face .cm-corps {
  position: absolute;
  left: 12.34%; right: 12.34%; top: 16.80%; bottom: auto;
  display: flex; flex-direction: column;
  text-align: center;
}
.cartem.m7.arriere-face .cm-qrtexte {
  font-size: 3.23cqw;         /* 40 px Canva mesurés */
  line-height: 1.2;
  font-weight: 700;
}

/* La plaque du QR est un carré de 600 px cerné du même vert que le
   filet. Elle reste dans le flux de la colonne, d'où le position
   relative : les positions absolues du corps ne la concernent pas. */
.cartem.m7.arriere-face .cm-qr {
  position: relative; inset: auto;
  align-self: center;
  box-sizing: border-box;
  width: 48.39cqw;            /* 600 px sur 1240, exprimé en cqw pour suivre la carte */
  aspect-ratio: 1;
  margin-top: 10.83cqw;
  border: 0.85cqw solid var(--accent);
  border-radius: 0;
}

.cartem.m7.arriere-face .cm-fin {
  font-size: 3.13cqw;         /* mesuré 32 px Canva, relevé au plancher */
  line-height: 1.2;
  font-style: italic;
}
/* Même filet de séparation qu'au recto, entre la plaque et le mot de fin. */
.cartem.m7.arriere-face .cm-fin::before {
  content: "";
  display: block;
  width: 12.10cqw;
  height: 0.85cqw;
  margin: 9.68cqw auto 5.80cqw;
  background: var(--accent);
}

/* La mention remonte dans le panneau : elle ne descend pas jusqu'au
   bord, elle s'arrête bien au-dessus du filet du bas. */
.cartem.m7.arriere-face .cm-marque {
  bottom: 10.79%;
  text-align: center;
  font-size: 1.77cqw;
  line-height: 1.2;
}


/* ===========================================================================
   m8 — LA TRAME
   Le fond est strictement uni (histogramme du recto : 86,9 % d'une seule
   couleur, aucune texture) — la trame du nom, c'est le calage, pas un motif.
   Recto : un seul objet en haut, un tirage penché de −6° doublé d'une ombre
   pleine décalée de 20 px en x et en y ; puis un grand vide, un bloc de
   texte posé bas, et un long filet en pied. Verso : la ligne du QR, un court
   filet, la plaque, le mot de fin, le même filet de pied.
   Deux décos suffisent : a (l'ombre au recto, le court filet au verso) et
   b (le filet de pied, identique sur les deux faces). c et d ne servent pas.
   =========================================================================== */

.cartem.m8 {
  --fond: #fbf6ec;
  --encre: #2f3a2c;
  --accent: #7a8a5e;
  /* relevés au sondage : le mot du haut, le lieu et la mention sont écrits
     en sauge, tout le reste dans l'encre */
  --c-sur: var(--accent);
  --c-sous: var(--accent);
  --c-marque: var(--accent);
  /* le cadre du tirage vide et son étiquette, relevés sur le dessin */
  --photo-vide: #d9d2be;
  --photo-vide-encre: #6e6a5a;
  /* Le dessin montre l'intérieur de la plaque au ton exact de la carte.
     On ne le branche PAS sur --fond : l'hôte peut assombrir --fond, et une
     plaque sombre rend le QR illisible. C'est donc un clair FIXE, propre au
     modèle — le garde-fou du socle (--qr-plaque, --qr-encre) reste intact. */
  --m8-plaque: #fbf6ec;
}

/* les deux décos inutilisées : rien à montrer sur ce dessin */
.cartem.m8 .cm-deco.c,
.cartem.m8 .cm-deco.d { display: none; }

/* Le filet de pied, au même endroit sur les deux faces : mesuré de x=110 à
   x=1129, donc 8,87 % de marge de part et d'autre, et sur les lignes
   y=1620–1621, donc centré sur 1621. Épais de 2 px au dessin : relevé au
   plancher des filets, d'où le top calculé pour que le CENTRE, lui, tombe
   juste (1621 − 5,27 = 1615,7 → 91,18 %). */
.cartem.m8.avant .cm-deco.b,
.cartem.m8.arriere-face .cm-deco.b {
  left: 8.87%;
  right: 8.87%;
  top: 91.18%;
  height: 0.85cqw;
  background: var(--accent);
}

/* ------------------------------------------------------------ m8 · recto */

/* L'ombre pleine du tirage : le MÊME rectangle que la photo, décalé de
   20 px vers la droite et vers le bas (1,61 % / 1,13 %), penché du même
   angle. Chaque forme tournant autour de son propre centre, l'écart reste
   une translation pure : les 20 px se lisent bien sur les quatre bords.
   Posée avant la photo dans le squelette, elle passe dessous d'elle-même. */
.cartem.m8.avant .cm-deco.a {
  left: 33.50%;
  right: 31.10%;
  top: 14.68%;
  bottom: 53.78%;
  background: var(--accent);
  transform: rotate(-6deg);
}

/* Le tirage : 439 × 559 px au dessin, centré sur 49,59 % / 29,32 %.
   La pente relevée sur les quatre bords vaut 0,1052, soit 6,00°, et le coin
   haut-droit est PLUS HAUT que le coin haut-gauche : rotation négative.
   Le fond et l'overflow viennent déjà du socle. */
.cartem.m8.avant .cm-photo {
  left: 31.89%;
  right: 32.71%;
  top: 13.55%;
  bottom: 54.90%;
  transform: rotate(-6deg);
}

/* Le mot du haut vit HORS du corps dans le squelette : il lui faut son
   propre calage absolu, ses marges à zéro, et surtout l'annulation des
   capitales et de l'interlettrage que le socle met par défaut — le dessin
   l'écrit en bas de casse, sans espacement.
   Mesuré 27,5 px, donc relevé au plancher ; le top est calculé pour que la
   ligne retombe centrée sur y=998, où sont les glyphes. */
.cartem.m8.avant .cm-sur {
  position: absolute;
  left: 0;
  right: 0;
  top: 54.81%;
  margin: 0;
  text-align: center;
  font-size: 3.13cqw;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}

/* Le bloc de texte, posé bas. Le socle donne au corps un padding de 9 % 8 %
   et l'ancre en inset:0 : on remet donc le padding à plat, sinon les 111 px
   du haut décaleraient tout le bloc. Le top est calé sur le nom. */
.cartem.m8.avant .cm-corps {
  left: 0;
  right: 0;
  top: 60.29%;
  bottom: auto;
  padding: 0 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Seul texte du modèle au-dessus du plancher : 71 px mesurés, confirmés par
   la largeur (640 px pour 9,00 cadratins). Sa marge haute est remise à zéro,
   le socle en pose une de 2,5cqw qui décalerait le bloc entier. */
.cartem.m8.avant .cm-nom {
  margin-top: 0;
  font-size: 5.73cqw;
  font-weight: 700;
  line-height: 1.1;
}

/* Le lieu, 24 px au dessin donc au plancher. L'écart est celui qui remet
   ses glyphes sur y=1197, et il est en cqw pour suivre la carte. */
.cartem.m8.avant .cm-sous {
  margin-top: 1.87cqw;
  font-size: 3.13cqw;
  line-height: 1.4;
}

/* Le mot d'accueil, en italique, détaché par le grand blanc du dessin. */
.cartem.m8.avant .cm-mot {
  margin-top: 6.27cqw;
  font-size: 3.13cqw;
  font-style: italic;
  line-height: 1.4;
}

/* ------------------------------------------------------------ m8 · verso */

/* Le corps couvre la face entière, sans padding : il devient le repère des
   trois blocs, dont les pourcentages se lisent alors droit sur la carte. */
.cartem.m8.arriere-face .cm-corps {
  inset: 0;
  padding: 0;
  display: block;
}

/* La ligne du QR : 33 px au dessin, donc au plancher, glyphes sur y=271. */
.cartem.m8.arriere-face .cm-qrtexte {
  position: absolute;
  left: 0;
  right: 0;
  top: 13.76%;
  text-align: center;
  font-size: 3.13cqw;
  font-weight: 700;
  line-height: 1.4;
}

/* Le court filet sous la ligne du QR : 150 px de long, centré, sur les
   lignes y=340–341. C'est une déco à part entière plutôt qu'un pseudo
   accroché au texte : ainsi il ne bouge pas si la ligne passe sur deux
   lignes. Longueur et épaisseur en cqw, comme tout filet. */
.cartem.m8.arriere-face .cm-deco.a {
  left: 43.95%;
  top: 18.95%;
  width: 12.10cqw;
  height: 0.85cqw;
  background: var(--accent);
}

/* La plaque : carré de 400 px, x=420 → 820, haut à y=560. Son filet fait
   3 px au dessin, relevé au plancher ; il est tiré de l'encre du modèle,
   et non de --qr-encre, qui n'appartient qu'aux modules. */
.cartem.m8.arriere-face .cm-qr {
  left: 33.87%;
  right: 33.87%;
  top: 31.60%;
  aspect-ratio: 1;
  background: var(--m8-plaque);
  border: 0.85cqw solid var(--encre);
}

/* Le mot de fin, en italique, isolé sous la plaque, glyphes sur y=1138. */
.cartem.m8.arriere-face .cm-fin {
  position: absolute;
  left: 0;
  right: 0;
  top: 62.71%;
  text-align: center;
  font-size: 3.13cqw;
  font-style: italic;
  line-height: 1.4;
}

/* La mention, en sauge, sous le filet de pied, glyphes sur y=1688.
   Taille laissée minuscule, sur sa décision. */
.cartem.m8.arriere-face .cm-marque {
  bottom: 3.87%;
  font-size: 1.77cqw;
  line-height: 1.4;
}