/* ============================================================================ Booky — LES SEPT MODÈLES DU CARNET PAYSAGE Créé le 14/08/2026 dans la nuit. Même chantier et même méthode que cartes.css et livrets.css : les dessins sont les SIENS, faits dans Canva ; ce fichier ne fait que les retranscrire, un modèle à la fois, HUIT faces chacun — cinquante-six faces en tout. SEPT MODÈLES : m1 m2 m3 m4 m5 m7 m8. m6 « Le Hublot » reste supprimé, sa clé ne se réutilise jamais, et on ne renumérote pas. LA CONSIGNE QUI COMMANDE TOUT CE FICHIER, et qui n'existait pas avant : LE FORMAT COUCHÉ N'EST PAS UNE ROTATION DU PORTRAIT. « Le mot vertical de m1 prend toute la hauteur au lieu d'être serré, la coupe de m5 se réinterprète, le tirage de m8 respire davantage. Ne déduis jamais une face couchée d'une face portrait — lis l'image. » Aucune ligne de livrets.css n'est donc reprise ici : préfixe `.carnetm`, huit classes de face `.cn-f1` … `.cn-f8`, et chaque valeur relevée sur SON image. LE RYTHME DES FACES. Huit faces, c'est long : aucun motif ne se répète à l'identique. La bande de m1 alterne de côté ; le cartouche de m3 change d'échelle selon le rôle ; la ligne de partage de m5 se déplace et s'inverse ; le cadre de m7 s'ouvre puis se referme. C'est la classe de face qui porte ce déplacement — un sélecteur `.carnetm.mN` sans face est un motif figé, et un motif figé sur huit faces tue le format. LA RÈGLE QUI COMMANDE LES COULEURS : aucun hexadécimal en dehors des blocs de défauts `.carnetm.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 : la plaque du QR et ses modules, clairs et sombres quoi qu'il choisisse (un QR non scannable est un produit cassé). LA CONVERSION DEPUIS CANVA. Ses images font 2480 × 1772 px (21 × 15 cm à 300 dpi). Le ratio se RECALCULE — ni celui de la carte (÷ 12,40) ni celui de la double page (÷ 17,48) ne valent ici : formes : pourcentage pur x ÷ 2480, y ÷ 1772 textes : cqw = px Canva ÷ 24,80 (le même pourcentage que les formes) filets : idem arrondis: en cqw, PAS en pourcentage — un arrondi en % sur un rectangle donne un coin ELLIPTIQUE. Le cqw est une longueur, il évite ce piège comme le px et il suit la réduction en vignette. SES DEUX PLANCHERS, écrits en `max()` et non figés : un texte : max(0.44rem, X cqw) un filet : max(0.12rem, X cqw) ET CE QUE LE COUCHÉ CHANGE À CES PLANCHERS. La face est LARGE et BASSE : un cqw y vaut proportionnellement plus qu'en portrait, et les textes tombent à des valeurs de cqw plus basses. À 215 px de face, le plancher de 0,44 rem valait 3,27 cqw — c'est-à-dire 81 px Canva : presque toute la titraille secondaire du carnet s'y serait écrasée et le rendu aurait menti sur le dessin. D'où la face rendue à sa VRAIE largeur relative (voir plus bas `.livre.couche`), où le plancher retombe à 2,31 cqw. LA COLONNE DE TEXTE VARIE PAR MODÈLE — c'est nouveau, et c'est sa consigne explicite : « environ 1780 px sur m1, 1900 sur m2 et m3, 2040 sur m4 qui est bâti sur la pleine largeur entre filets. NE PRENDS PAS UNE VALEUR UNIQUE. » En portrait la colonne se déduisait des marges ; en couché la page est large et rien n'oblige le texte à la remplir : c'est un choix de composition propre à chaque modèle, relevé au pixel sur chaque face. LES QUATRE PIÈGES QU'IL A RELEVÉS EN DESSINANT, traités ici : 1. L'ORDRE D'EMPILEMENT ne suit pas l'ordre du document. Chaque couche porte un `z-index` EXPLICITE : fond 0 · aplats 1 · photo 2 · plaque QR 3 · textes 4. Sans ça le QR de L'Écusson passe sous son cartouche. 2. LE FOND N'EST JAMAIS LA COULEUR DE PAGE : `.carnetm` peint son fond en couche pleine, il n'hérite jamais du papier de `.ff`. 3. LES ÉLÉMENTS PIVOTÉS s'ancrent sur leur boîte APRÈS rotation. Pour le texte vertical on emploie `writing-mode: vertical-rl` + `rotate(180deg)` qui donne une VRAIE boîte verticale : le centrage se fait normalement. `rotate()` seul n'est gardé que pour ce qui n'est pas du texte, et alors on pose le centre avant de tourner. 4. UNE FORME RÉUTILISÉE GARDE SA COULEUR D'ORIGINE — le quatrième, celui du carnet. Dans Canva, dupliquer un aplat le fait arriver avec la teinte de sa source ; en CSS la faute jumelle est l'héritage. CHAQUE COUCHE DÉCLARE SA PROPRE COULEUR, aucune n'hérite de la précédente. Sur huit faces où le fond change plusieurs fois, c'est décisif. ========================================================================= */ /* --------------------------------------------------------------------------- LES DEUX GARDE-FOUS DE CASCADE — NE PAS TOUCHER, NE PAS DÉPLACER. carnets.css est chargée APRÈS style.css : à spécificité égale, c'est elle qui gagne. Ces deux sélecteurs à TROIS classes recalent la face quoi qu'écrive un modèle. Même leçon que cartes.css et livrets.css. --------------------------------------------------------------------------- */ .feuillet .ff.carnetm { position: absolute; inset: 0; width: auto; height: auto; } .cn-vignette .ff.carnetm { position: absolute; inset: auto; top: 0; left: 0; width: 305px; height: 225.93px; } /* --------------------------------------------------------------------------- LA FACE RENDUE À SA VRAIE TAILLE RELATIVE. `.livre` porte 215 px, ce qui vaut pour un A5 large de 14,8 cm. Le carnet fait 21 cm : sa face vaut 305 px. Deux formats côte à côte gardent ainsi leur rapport de taille réel — honnête pour quelqu'un qui choisit entre les deux — et le plancher de 0,44 rem cesse d'écraser la titraille. La valeur arrive en `--lw-plein` depuis TYPES ; la réduction sous 900 px passe par-dessus, pour que la scène ne rogne pas l'objet ouvert. --------------------------------------------------------------------------- */ .livre.couche { --lw: var(--lw-plein, 305px); } @media (max-width: 900px) { .livre.couche { --lw: 236px; } } /* =========================================================================== LE SOCLE Il porte les variables générales, les variables par zone qui retombent dessus, et un dessin nu mais correct : une face pas encore retranscrite reste une page utilisable, jamais une page blanche. =========================================================================== */ .carnetm { --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 pli */ /* PIÈGE 2 : le fond est une couche pleine, jamais le papier hérité de .ff */ background: var(--fond); color: var(--encre); font-family: var(--police-texte); line-height: 1.35; } /* ------------------------------------------------- les couches, explicites PIÈGE 1. On ne compte pas sur l'ordre du DOM : chaque couche dit son rang. */ .carnetm .cn-deco { z-index: 1; } .carnetm .cn-photo, .carnetm .cn-photo2, .carnetm .cn-photo3 { z-index: 2; } .carnetm .cn-qr { z-index: 3; } /* TOUTES les zones de texte, pas seulement celles du corps : un texte posé hors de `.cn-corps` — la signature, le mot du haut, les titres dressés — se retrouverait sinon SOUS l'aplat de sa face et disparaîtrait. C'est très exactement le piège vérifié au rendu sur la double page. */ .carnetm .cn-corps, .carnetm .cn-sur, .carnetm .cn-nom, .carnetm .cn-sous, .carnetm .cn-mot, .carnetm .cn-qrtexte, .carnetm .cn-fin, .carnetm .cn-marque, .carnetm .cn-motprop, .carnetm .cn-proprio, .carnetm .cn-signe, .carnetm .cn-ptitre, .carnetm .cn-ptexte { z-index: 4; position: relative; } /* (les zones que le modèle pose en absolu redéclarent `position` ; celles qui restent en flux ont besoin d'un `relative` pour que le z-index s'applique.) */ /* les quatre décos sont NEUTRES : invisibles tant qu'un modèle ne les habille pas. atelier.js les pose toujours, dans cet ordre, sur les huit faces. */ .carnetm .cn-deco { position: absolute; display: block; pointer-events: none; /* PIÈGE 4 : une déco qui n'hérite de rien. Un modèle qui la fait voir lui donne SA couleur ; aucune ne reprend celle de la couche précédente. */ background: none; border: 0; } /* ------------------------------------------------- les zones de texte Chacune a sa couleur et sa police, qui RETOMBENT sur la générale. Ce sont les mêmes douze que la double page : les trois pages libres du carnet partagent `ptitre` et `ptexte` — un rôle typographique, pas trois. */ .carnetm .cn-sur { color: var(--c-sur, var(--encre)); font-family: var(--f-sur, var(--police-texte)); } .carnetm .cn-nom { color: var(--c-nom, var(--encre)); font-family: var(--f-nom, var(--police-titre)); } .carnetm .cn-sous { color: var(--c-sous, var(--encre)); font-family: var(--f-sous, var(--police-texte)); } .carnetm .cn-mot { color: var(--c-mot, var(--encre)); font-family: var(--f-mot, var(--police-texte)); } .carnetm .cn-qrtexte { color: var(--c-qrtexte, var(--encre)); font-family: var(--f-qrtexte, var(--police-texte)); } .carnetm .cn-fin { color: var(--c-fin, var(--encre)); font-family: var(--f-fin, var(--police-texte)); } .carnetm .cn-marque { color: var(--c-marque, var(--encre)); font-family: var(--f-marque, var(--police-texte)); } .carnetm .cn-motprop { color: var(--c-motprop, var(--encre)); font-family: var(--f-motprop, var(--police-titre)); } .carnetm .cn-proprio { color: var(--c-proprio, var(--encre)); font-family: var(--f-proprio, var(--police-texte)); } .carnetm .cn-signe { color: var(--c-signe, var(--encre)); font-family: var(--f-signe, var(--police-texte)); } .carnetm .cn-ptitre { color: var(--c-ptitre, var(--encre)); font-family: var(--f-ptitre, var(--police-titre)); } .carnetm .cn-ptexte { color: var(--c-ptexte, var(--encre)); font-family: var(--f-ptexte, var(--police-texte)); } .carnetm .cn-corps { position: absolute; inset: 0; padding: 7% 6%; } /* le dessin nu : une face pas encore retranscrite reste lisible */ .carnetm .cn-sur { font-size: 3.1cqw; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .carnetm .cn-nom { font-size: 4.3cqw; font-weight: 600; line-height: 1.15; margin-top: 1.8cqw; } .carnetm .cn-sous { font-size: max(0.44rem, 2.3cqw); margin-top: 1cqw; } .carnetm .cn-mot { font-size: max(0.44rem, 2.3cqw); margin-top: 2.5cqw; } .carnetm .cn-motprop { font-size: 3.1cqw; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .carnetm .cn-proprio { font-size: max(0.44rem, 2.3cqw); } /* la signature suit le texte, à gauche (16/08 au soir, dicté) */ .carnetm .cn-signe { font-size: max(0.44rem, 2.2cqw); font-style: italic; margin-top: 2.4cqw; text-align: left; } .carnetm .cn-ptitre { font-size: 3.8cqw; font-weight: 700; } .carnetm .cn-ptexte { font-size: max(0.44rem, 2.3cqw); } .carnetm .cn-qrtexte { font-size: max(0.44rem, 2.4cqw); font-weight: 600; } .carnetm .cn-fin { font-size: max(0.44rem, 2.2cqw); font-style: italic; } .carnetm .cn-marque { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; font-size: 1.5cqw; margin: 0; } /* LA REMISE À ZÉRO DES MARGES VIENT APRÈS LE DESSIN NU — ET C'EST TOUT LE POINT. La leçon coûteuse de la double page : écrite AVANT, elle perdait contre les `margin-top` du dessin nu, de même poids (0,2,0) mais écrits plus loin, et la marge survivante poussait le pied de couverture de 43,7 px sur TOUS les modèles. `.cn-corps` étant en position absolue, il ouvre un contexte de formatage : la marge du premier enfant ne se replie pas hors de la boîte, elle pousse le contenu. Un modèle qui veut une marge la déclare, il pèse (0,4,0) et gagne. */ .carnetm .cn-corps > * { margin: 0; } /* ---------------------------------------------------------- les photos TROIS statuts, et c'est ce qui distingue le carnet des autres formats. `cn-photo` la couverture — OBLIGATOIRE dans chaque modèle. `cn-photo2` la fin de colonne d'une page libre (3, 5, 6) — FACULTATIVE, toujours APRÈS le texte : absente, la page ne montre qu'un blanc en pied, jamais un trou au milieu. `cn-photo3` les faces 4 et 7 — FACULTATIVE elle aussi, mais TENUE PAR LE DÉCOR : jamais une photo nue en pleine page. Vide, le décor tient la face tout seul, c'est la condition de sa gratuité. */ .carnetm .cn-photo, .carnetm .cn-photo2, .carnetm .cn-photo3 { position: absolute; margin: 0; overflow: hidden; background: var(--photo-vide, var(--accent)); } /* celle des pages libres est en FLUX, à la fin de la colonne */ .carnetm .cn-photo2 { position: relative; } .carnetm .cn-img { width: 100%; height: 100%; object-fit: cover; display: block; } .carnetm .cn-photo-vide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: max(0.44rem, 2.2cqw); font-weight: 600; color: var(--photo-vide-encre, var(--encre)); background: transparent; border: max(0.12rem, 0.63cqw) dashed currentColor; border-radius: inherit; /* le pointillé épouse la forme de l'emplacement */ opacity: 0.72; text-align: center; padding: 0 6%; } /* ------------------------------------------------------- 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. */ .carnetm .cn-qr { position: absolute; background: var(--qr-plaque); padding: 3%; /* la zone de silence, sans quoi rien ne scanne */ box-sizing: border-box; } .carnetm .cn-qr svg { width: 100%; height: 100%; display: block; } /* même bug, même remède que livrets.css (16/08 au soir) : le fond du QR reprend la plaque, seuls les modules portent l'encre */ .carnetm .cn-qr svg rect { fill: var(--qr-plaque); } .carnetm .cn-qr svg path { fill: var(--qr-encre); } /* le dessin nu place le QR au centre */ .carnetm .cn-corps .cn-qr { left: 38%; right: 38%; top: 26%; aspect-ratio: 1; } /* ------------------------------------------------------------ la vignette Le choix de modèle montre la VRAIE couverture réduite, jamais un schéma : 190 × 140,7, soit 305 × 225,93 à 62,30 %. Couchée, comme le produit. */ .cn-vignette { position: relative; display: block; width: 190px; height: 141px; overflow: hidden; border-radius: 3px; } .cn-vignette .carnetm { transform: scale(0.623); transform-origin: top left; } /* =========================================================================== m1 — LE BANDEAU Le geste de sa carte et de sa double page du même nom, réinterprété en couché — et il change vraiment de nature : en portrait la bande était une TRANCHE verticale ; ici c'est un L, un montant plus un seuil, et le mot du haut ne se serre plus, il prend toute la hauteur du montant. F1 la couverture : le fond profond ne se voit qu'en L — un montant à gauche (16,94 % de la largeur) et un seuil en pied (24,94 % de la hauteur). Tout le reste est un champ crème, ouvert à franc bord en haut et à droite. Dedans, la photo à franc bord elle aussi, doublée de son OMBRE DURE olive : ce n'est pas un filet décoratif, c'est la photo décalée de −30 px en x et +32 px en y, sans le moindre flou — seuls son montant gauche et son seuil restent visibles. Le mot du haut se dresse dans le montant vert, centré sur la hauteur du champ. Les trois lignes du pied sont centrées non pas sur la page, mais sur la PHOTO : la colonne de texte s'aligne sur l'image au-dessus d'elle. =========================================================================== */ .carnetm.m1 { --fond: #2f3a2c; --encre: #f5ead8; --accent: #7a8a5e; /* PIÈGE 4, dans sa version CSS : une zone qui n'annonce pas sa couleur prend celle du modèle — ici le crème — et disparaît sur les grands champs clairs des faces intérieures. Six faces sur huit sont crème : ce qui s'y écrit passe en sombre, et seuls les titres dressés dans le montant restent clairs. Attrapé au relevé, pas à l'œil : la sonde ne trouvait aucune encre sombre sur F2 ni sur F3. */ --c-proprio: #2f3a2c; --c-signe: #2f3a2c; --c-ptexte: #2f3a2c; --c-qrtexte: #2f3a2c; --c-marque: #2f3a2c; --m1-clair: #f5ead8; /* l'emplacement photo vide se montre dans un gris chaud, pas dans l'accent : l'olive est prise par l'ombre dure juste à côté. */ --photo-vide: #d9d2be; --photo-vide-encre: #5c5647; } /* ------------------------------------------------------------------- F1 */ /* le champ crème : le fond profond ne reste visible qu'en L autour de lui */ .carnetm.m1.cn-f1 .cn-deco.a { left: 16.94%; top: 0; right: 0; bottom: 24.94%; background: var(--m1-clair); } /* L'OMBRE DURE : la photo décalée, aucune flou, aucune transparence. */ .carnetm.m1.cn-f1 .cn-deco.b { left: 20.40%; top: 1.81%; right: 1.21%; bottom: 25.96%; background: var(--accent); } .carnetm.m1.cn-f1 .cn-photo { left: 21.61%; top: 0; right: 0; bottom: 27.77%; } /* le mot du haut, dressé dans le montant : `writing-mode` donne une VRAIE boîte verticale, le centrage se fait normalement (piège 3). Il est centré sur la hauteur du CHAMP crème (0 → 75,06 %), pas sur celle de la page : c'est ce que son dessin montre au pixel près. */ .carnetm.m1.cn-f1 .cn-sur { position: absolute; left: 0; width: 16.94%; top: 0; height: 75.06%; margin: 0; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); /* 6,44 cqw = 159,7 px sur son image. Le chiffre n'est pas deviné : la double page du même modèle est CALIBRÉE (12,88 cqw pour 196 px d'encre relevés), ce qui donne le rapport encre → corps de cette police ; les 139 px d'encre du carnet le repassent en sens inverse. C'est la leçon du 14/08 tenue à l'endroit : la hauteur d'encre se MESURE, et un calibrage déjà payé ne se repaie pas. */ font-size: 7.1cqw; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1; white-space: nowrap; } /* LA COLONNE DE TEXTE de m1 : elle ne part pas du bord de la page mais du bord GAUCHE DE LA PHOTO — 21,61 % — et court jusqu'au bord droit. Centrée dedans, elle tombe à 60,81 % de la page, exactement où son dessin la pose. C'est le premier exemple de sa consigne « la colonne varie par modèle ». */ .carnetm.m1.cn-f1 .cn-corps { inset: auto 0 0 21.61%; top: 75.06%; padding: 3.06cqw 3.3cqw 0; text-align: center; } /* Les trois corps de texte sont, au pixel, CEUX DE LA DOUBLE PAGE : ses deux images font 2480 px dans leur grand côté et il y a posé la même titraille. Seul le diviseur change (24,80 au lieu de 17,48). */ .carnetm.m1.cn-f1 .cn-nom { font-size: 3.43cqw; font-weight: 700; line-height: 1.12; } .carnetm.m1.cn-f1 .cn-sous { font-size: max(0.44rem, 1.95cqw); margin-top: 1.10cqw; } .carnetm.m1.cn-f1 .cn-mot { font-size: max(0.44rem, 1.88cqw); font-style: italic; margin-top: 0.73cqw; } /* ------------------------------------------------------------------- F2 LE MOT DU PROPRIÉTAIRE. Le L a disparu : il ne reste que le MONTANT, à gauche, pleine hauteur — première étape du déplacement qu'il exige. Le titre fixe s'y dresse, centré sur toute la page cette fois (il n'y a plus de seuil pour raccourcir la colonne). Le mot tombe en tête du champ, la signature en bas à droite, annoncée par un court filet olive posé bas à gauche : les deux extrémités d'une même diagonale. */ .carnetm.m1.cn-f2 .cn-deco.a { left: 16.94%; right: 0; top: 0; bottom: 0; background: var(--m1-clair); } .carnetm.m1.cn-f2 .cn-deco.b { left: 25.00%; top: 81.83%; width: 8.87%; height: max(0.12rem, 0.24cqw); background: var(--accent); } .carnetm.m1.cn-f2 .cn-motprop { position: absolute; left: 0; width: 16.94%; top: 0; bottom: 0; margin: 0; padding: 4% 0; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 3.43cqw; font-weight: 700; letter-spacing: 0.06em; line-height: 1; white-space: nowrap; } /* la colonne de m1 sur ses faces intérieures : 200 px après le montant, 160 px avant le bord opposé — 1700 px de justification. */ .carnetm.m1.cn-f2 .cn-corps { left: 25.00%; right: 6.45%; top: 16.23%; bottom: 14%; padding: 0; } .carnetm.m1.cn-f2 .cn-proprio { font-size: max(0.44rem, 2.10cqw); line-height: 1.5; } .carnetm.m1.cn-f2 .cn-signe { font-size: max(0.44rem, 1.97cqw); font-style: italic; } /* --------------------------------------------------------------- F3 et F6 LES PAGES LIBRES À MONTANT DROIT — le MIROIR de F2 : le montant passe à DROITE, le filet remonte en tête de colonne, et le tirage se pose en pied avec la même ombre dure que la couverture, décalée vers le bas-DROITE puisque la page a basculé. F3 et F6 sont la MÊME composition, et c'est voulu : sa dictée dit « la bande alterne de côté d'une page libre à l'autre ». Trois pages libres, donc droite · gauche · droite — l'alternance EST le rythme. Elles sont groupées ici parce que ce sont les mêmes valeurs, pas parce qu'un motif serait figé : entre elles, F4 et F5 ont chacune leur composition. */ .carnetm.m1.cn-f3 .cn-deco.a, .carnetm.m1.cn-f6 .cn-deco.a { left: 0; right: 16.94%; top: 0; bottom: 0; background: var(--m1-clair); } .carnetm.m1.cn-f3 .cn-deco.b, .carnetm.m1.cn-f6 .cn-deco.b { left: 6.45%; top: 23.70%; width: 8.87%; height: max(0.12rem, 0.24cqw); background: var(--accent); } .carnetm.m1.cn-f3 .cn-ptitre, .carnetm.m1.cn-f6 .cn-ptitre { position: absolute; right: 0; width: 16.94%; top: 0; bottom: 0; margin: 0; padding: 4% 0; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 4.05cqw; font-weight: 700; line-height: 1; white-space: nowrap; } /* la colonne : le texte en tête, le tirage EN FIN DE COLONNE (`margin-top: auto`). Sans photo, la page ne montre qu'un blanc en pied — jamais un trou au milieu, et rien à recomposer. */ .carnetm.m1.cn-f3 .cn-corps, .carnetm.m1.cn-f6 .cn-corps { left: 6.45%; right: 25.00%; top: 29.29%; bottom: 8.63%; padding: 0; display: flex; flex-direction: column; } /* ------------------------------------------------------------------- F4 LA PREMIÈRE FACE PHOTO, tenue par le décor. Le L revient — mais RETOURNÉ : montant à DROITE et seuil en pied, quand la couverture avait le montant à gauche. Le tirage saigne par le haut et par la gauche, son ombre dure ne se voit donc qu'à droite et en bas, et un court filet olive se pose sous lui dans le blanc du seuil. Vide, le décor tient la face tout seul : c'est la condition pour que la photo reste facultative. */ .carnetm.m1.cn-f4 .cn-deco.a { left: 0; top: 0; right: 16.94%; bottom: 16.93%; background: var(--m1-clair); } .carnetm.m1.cn-f4 .cn-deco.b { left: 35.89%; top: 79.01%; width: 8.87%; height: max(0.12rem, 0.24cqw); background: var(--accent); } .carnetm.m1.cn-f4 .cn-photo3 { left: 0; top: 0; right: 23.39%; bottom: 24.94%; box-shadow: 1.21cqw 1.21cqw 0 var(--accent); } /* ------------------------------------------------------------------- F5 LA DEUXIÈME PAGE LIBRE. La bande repasse à GAUCHE — c'est l'alternance qu'il demande, une page libre sur deux — et toute la colonne suit : le filet, le texte et le tirage glissent de 460 px vers la droite. Même grammaire, autre image. */ .carnetm.m1.cn-f5 .cn-deco.a { left: 16.94%; right: 0; top: 0; bottom: 0; background: var(--m1-clair); } .carnetm.m1.cn-f5 .cn-deco.b { left: 25.00%; top: 23.70%; width: 8.87%; height: max(0.12rem, 0.24cqw); background: var(--accent); } .carnetm.m1.cn-f5 .cn-ptitre { position: absolute; left: 0; width: 16.94%; top: 0; bottom: 0; margin: 0; padding: 4% 0; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 4.05cqw; font-weight: 700; line-height: 1; white-space: nowrap; } .carnetm.m1.cn-f5 .cn-corps { left: 25.00%; right: 6.45%; top: 29.29%; bottom: 8.63%; padding: 0; display: flex; flex-direction: column; } /* ce que les pages libres de m1 partagent : la justification du texte et le tirage de fin de colonne, à l'ombre dure. Ce n'est pas un motif figé — c'est la même valeur, écrite une fois. Ce qui BOUGE d'une page à l'autre, c'est la place de la bande et de la colonne, déclarée face par face. */ .carnetm.m1.cn-f3 .cn-ptexte, .carnetm.m1.cn-f5 .cn-ptexte, .carnetm.m1.cn-f6 .cn-ptexte { font-size: max(0.44rem, 2.21cqw); line-height: 1.5; min-height: 0; } .carnetm.m1.cn-f3 .cn-photo2, .carnetm.m1.cn-f5 .cn-photo2, .carnetm.m1.cn-f6 .cn-photo2 { width: 41.18%; aspect-ratio: 1.489; margin-top: auto; flex: none; /* l'ombre dure, sans flou — le geste de la couverture, retourné */ box-shadow: 1.21cqw 1.21cqw 0 var(--accent); } /* ------------------------------------------------------------------- F7 LA SECONDE FACE PHOTO. Le L tourne d'un quart de plus : après le montant gauche + seuil de la couverture et le montant droit + seuil de F4, voici BANDEAU EN TÊTE + MONTANT GAUCHE. Le tirage saigne cette fois par le bas et par la droite, donc son ombre dure ne se voit qu'en haut et à gauche — elle a changé de sens avec lui. Trois orientations pour trois faces : ce n'est pas de la variation gratuite, c'est ce qui fait tourner le carnet. */ .carnetm.m1.cn-f7 .cn-deco.a { left: 16.94%; top: 16.93%; right: 0; bottom: 0; background: var(--m1-clair); } .carnetm.m1.cn-f7 .cn-deco.b { left: 35.89%; top: 20.32%; width: 8.87%; height: max(0.12rem, 0.24cqw); background: var(--accent); } .carnetm.m1.cn-f7 .cn-photo3 { left: 23.39%; top: 24.94%; right: 0; bottom: 0; box-shadow: -1.21cqw -1.21cqw 0 var(--accent); } /* ------------------------------------------------------------------- F8 LE DOS. La page s'inverse une dernière fois : le crème devient le fond et le vert se réduit à une large bande centrale, qui porte la plaque du QR. La ligne du QR s'écrit en sombre au-dessus, dans le crème ; le mot de fin en clair dans la bande ; le © Booky en sombre sous elle. SA RETOUCHE, appliquée : « le (mot de fin) est collé sous la plaque du QR, descends-le d'environ 80 px, il manque d'air. » Descendu de 80 px — et la bande allongée de 80 px par le bas, sans quoi le mot serait tombé hors de son fond (elle s'arrêtait 71 px sous lui). Les deux moitiés se reprennent d'une ligne chacune. Le © Booky garde ses 76 px de dégagement. */ .carnetm.m1.cn-f8 .cn-deco.a { inset: 0; background: var(--m1-clair); } .carnetm.m1.cn-f8 .cn-deco.b { left: 0; right: 0; top: 16.93%; bottom: 19.30%; background: var(--fond); } .carnetm.m1.cn-f8 .cn-corps { inset: 0; padding: 0; } .carnetm.m1.cn-f8 .cn-qrtexte { position: absolute; left: 6%; right: 6%; top: 0; height: 16.93%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: max(0.44rem, 2.62cqw); font-weight: 700; } .carnetm.m1.cn-f8 .cn-qr { left: 33.87%; right: 33.87%; top: 23.14%; aspect-ratio: 1; } .carnetm.m1.cn-f8 .cn-fin { position: absolute; left: 10%; right: 10%; top: 73.67%; margin: 0; text-align: center; font-size: max(0.44rem, 2.13cqw); font-style: italic; } .carnetm.m1.cn-f8 .cn-marque { top: 84.48%; bottom: auto; font-size: 1.47cqw; } /* =========================================================================== m2 — LE CHAMP Un seul objet tenu sur huit faces : UN GRAND PANNEAU TRÈS ARRONDI, cerné d'un filet intérieur, posé sur un champ plein. En couché il gagne ce que le portrait ne lui permettait pas — de la LARGEUR : le panneau des pages intérieures et du dos s'étale presque bord à bord, et la couverture peut poser le sien en bas à GAUCHE seulement, laissant la photo respirer. F1 la couverture : la photo tient toute la page ; le mot du haut s'écrit dessus en haut à gauche ; le panneau ne prend que le tiers bas-gauche. F2 le mot du propriétaire : le champ passe au vert plein, le panneau monte presque pleine page. Titre centré, filet, le mot en drapeau à gauche, la signature en bas à droite. F3 · F5 · F6 les pages libres : le même panneau, et le TIRAGE SE DÉPLACE — à droite en haut (F3), à GAUCHE en haut avec la colonne qui passe à droite (F5), à droite en BAS (F6). Trois pages, trois compositions. F4 · F7 les faces photo : la photo tient toute la page et le décor la TIENT par une PASTILLE en stade, cernée de crème — en pied sur F4, en tête sur F7. SA RETOUCHE : « la pastille de la face 4 est en olive alors que celle de la face 7 est en vert profond ; uniformise en vert profond — l'olive est réservé aux filets dans ce modèle. » Appliquée. F8 le dos : L'INVERSE. Le champ redevient crème et c'est le PANNEAU qui passe au vert ; il perd son filet intérieur, sa courbe est plus généreuse (222 px contre 180), et le © Booky sort du panneau. =========================================================================== */ .carnetm.m2 { --fond: #f5ead8; --encre: #2f3a2c; --accent: #7a8a5e; /* le lieu est la seule ligne à l'accent ; le dos écrit en clair sur son panneau profond */ --c-sous: #7a8a5e; --c-qrtexte: #f5ead8; --c-fin: #f5ead8; --photo-vide: #d9d2be; --photo-vide-encre: #2f3a2c; /* le panneau et son filet, relevés sur ses huit dessins */ --m2-courbe: 7.26cqw; /* 180 px */ --m2-liseret: 1.21cqw; /* 30 px */ --m2-courbe-int: 6.05cqw; /* 150 px */ } /* LE CHAMP DES QUATRE FACES INTÉRIEURES passe au ton profond : sans lui, le panneau crème se poserait sur du crème et disparaîtrait — seul son filet resterait visible (le défaut que seul le navigateur voit, attrapé sur la double page). C'est la dualité du dessin : le champ est de la couleur de l'encre, le panneau de celle du papier. Le dos inverse les deux ; les faces 1, 4 et 7 mettent la photo à la place du champ. */ .carnetm.m2.cn-f2, .carnetm.m2.cn-f3, .carnetm.m2.cn-f5, .carnetm.m2.cn-f6 { background: var(--encre); } /* le panneau des quatre faces à texte */ .carnetm.m2.cn-f2 .cn-deco.a, .carnetm.m2.cn-f3 .cn-deco.a, .carnetm.m2.cn-f5 .cn-deco.a, .carnetm.m2.cn-f6 .cn-deco.a { left: 6.05%; right: 6.05%; top: 9.03%; bottom: 9.14%; border-radius: var(--m2-courbe); background: var(--fond); } /* son filet intérieur, à 30 px du bord — un `::after` de la déco, pas une cinquième déco : le squelette tient à quatre. */ .carnetm.m2.cn-f1 .cn-deco.a::after, .carnetm.m2.cn-f2 .cn-deco.a::after, .carnetm.m2.cn-f3 .cn-deco.a::after, .carnetm.m2.cn-f5 .cn-deco.a::after, .carnetm.m2.cn-f6 .cn-deco.a::after { content: ''; position: absolute; inset: var(--m2-liseret); border: max(0.12rem, 0.16cqw) solid var(--accent); border-radius: var(--m2-courbe-int); } /* le court filet centré, BORNÉ aux faces qui le portent : une déco sans `top` retomberait collée au bord haut des autres — la famille de défauts des décos fantômes, attrapée sur la double page. */ .carnetm.m2.cn-f2 .cn-deco.b, .carnetm.m2.cn-f3 .cn-deco.b, .carnetm.m2.cn-f5 .cn-deco.b, .carnetm.m2.cn-f6 .cn-deco.b, .carnetm.m2.cn-f8 .cn-deco.b { left: 45.97%; width: 8.06%; top: 24.27%; height: max(0.12rem, 0.24cqw); background: var(--accent); } /* les titres et les textes que les trois pages libres partagent */ .carnetm.m2.cn-f3 .cn-ptitre, .carnetm.m2.cn-f5 .cn-ptitre, .carnetm.m2.cn-f6 .cn-ptitre { position: absolute; left: 12%; right: 12%; top: 16.70%; margin: 0; text-align: center; font-size: 2.7cqw; font-weight: 700; } .carnetm.m2.cn-f3 .cn-ptexte, .carnetm.m2.cn-f5 .cn-ptexte, .carnetm.m2.cn-f6 .cn-ptexte { font-size: max(0.44rem, 2.28cqw); line-height: 1.5; min-height: 0; } /* le tirage des pages libres : coins arrondis, la grammaire du modèle, et posé en ABSOLU — sur ce format il vit À CÔTÉ de la colonne, pas dessous. Absent, il ne laisse qu'un blanc à sa place ; le texte ne bouge pas. */ .carnetm.m2.cn-f3 .cn-photo2, .carnetm.m2.cn-f5 .cn-photo2, .carnetm.m2.cn-f6 .cn-photo2 { position: absolute; border-radius: 2.42cqw; } /* ------------------------------------------------------------------- F1 */ .carnetm.m2.cn-f1 .cn-photo { inset: 0; } /* la photo tenant TOUTE la page, son etiquette de vide tomberait au centre — c est-a-dire pile sur le bord haut du panneau. Elle remonte dans la partie libre, la ou son dessin pose le mot (photo). */ .carnetm.m2.cn-f1 .cn-photo-vide { align-items: flex-start; padding-top: 21%; } .carnetm.m2.cn-f1 .cn-deco.a { left: 5.65%; right: 33.87%; top: 49.66%; bottom: 9.71%; border-radius: var(--m2-courbe); background: var(--fond); z-index: 3; /* le panneau se pose SUR la photo */ } .carnetm.m2.cn-f1 .cn-deco.b { left: 31.85%; width: 8.06%; top: 69.41%; height: max(0.12rem, 0.24cqw); background: var(--accent); z-index: 4; /* et le filet, SUR le panneau */ } /* LE VOILE DU MOT DU HAUT. Il n'est pas sur son dessin — je l'ajoute, et je le dis : c'est sa correction du 14/08 sur la carte du même nom, où un mot posé nu sur une photo devenait illisible dès que la photo était claire. Une montée très douce dans la teinte du modèle, jamais du noir. */ .carnetm.m2.cn-f1 .cn-deco.c { left: 0; right: 0; top: 0; height: 26%; z-index: 3; background: linear-gradient(to bottom, var(--fond), transparent); opacity: 0.55; } .carnetm.m2.cn-f1 .cn-sur { position: absolute; left: 16.21%; right: 10%; top: 12.60%; margin: 0; font-size: max(0.44rem, 1.78cqw); font-weight: 700; letter-spacing: 0; text-transform: none; } /* la colonne de m2 en couverture : elle ne suit pas la page, elle suit LE PANNEAU — centrée sur lui, à 890 px, et non sur l'axe de la face. */ .carnetm.m2.cn-f1 .cn-corps { left: 8.88%; right: 37.10%; top: 55.63%; bottom: 9.71%; padding: 0; text-align: center; } .carnetm.m2.cn-f1 .cn-nom { font-size: 3.83cqw; font-weight: 700; line-height: 1.12; } .carnetm.m2.cn-f1 .cn-sous { font-size: max(0.44rem, 1.94cqw); margin-top: 1.73cqw; } /* le mot d'accueil vit SOUS le filet : la marge du haut lui fait sa place */ .carnetm.m2.cn-f1 .cn-mot { font-size: max(0.44rem, 1.99cqw); font-style: italic; margin-top: 4.26cqw; } /* ------------------------------------------------------------------- F2 */ .carnetm.m2.cn-f2 .cn-motprop { position: absolute; left: 12%; right: 12%; top: 16.55%; margin: 0; text-align: center; font-size: 2.9cqw; font-weight: 700; letter-spacing: 0; } .carnetm.m2.cn-f2 .cn-corps { left: 11.81%; right: 11.81%; top: 29.88%; bottom: 14%; padding: 0; } .carnetm.m2.cn-f2 .cn-proprio { font-size: max(0.44rem, 2.1cqw); line-height: 1.5; } .carnetm.m2.cn-f2 .cn-signe { font-size: max(0.44rem, 1.97cqw); font-style: italic; } /* ------------------------------------------ F3 · F5 · F6 les pages libres Le tirage se déplace de l'une à l'autre, et la colonne change de côté avec lui. C'est le rythme que sa dictée exige, tenu en six lignes. */ /* LE CORPS PREND TOUTE LA FACE sur ces trois-là, et le texte s'y pose en absolu. Raison : `.cn-photo2` vit DANS `.cn-corps`, et un corps positionné devient son repère — les pourcentages du tirage se seraient comptés sur la colonne au lieu de la page, et il serait tombé au milieu du texte. Le même piège que le mot du haut de m2 sur la carte, qui avait fait sortir `.cm-sur` du corps le 14/08. Sur m1 la question ne se pose pas : son tirage est en FLUX, en fin de colonne, et c'est justement ce qu'on veut là-bas. */ .carnetm.m2.cn-f3 .cn-corps, .carnetm.m2.cn-f5 .cn-corps, .carnetm.m2.cn-f6 .cn-corps { inset: 0; padding: 0; } .carnetm.m2.cn-f3 .cn-ptexte, .carnetm.m2.cn-f5 .cn-ptexte, .carnetm.m2.cn-f6 .cn-ptexte { position: absolute; margin: 0; } .carnetm.m2.cn-f3 .cn-ptexte { left: 11.81%; right: 49.60%; top: 33.23%; } .carnetm.m2.cn-f3 .cn-photo2 { left: 54.44%; right: 14.11%; top: 33.86%; bottom: 36.79%; } .carnetm.m2.cn-f5 .cn-ptexte { left: 48.51%; right: 11.81%; top: 33.29%; } .carnetm.m2.cn-f5 .cn-photo2 { left: 11.69%; right: 56.85%; top: 33.86%; bottom: 36.79%; } .carnetm.m2.cn-f6 .cn-ptexte { left: 11.81%; right: 49.60%; top: 31.03%; } .carnetm.m2.cn-f6 .cn-photo2 { left: 54.44%; right: 14.11%; top: 57.56%; bottom: 16.48%; } /* -------------------------------------------------- F4 · F7 les faces photo La photo tient toute la page ; la PASTILLE la tient, elle. Elle descend en pied sur F4 et remonte en tête sur F7 — le même objet, jamais au même endroit. Les deux en VERT PROFOND : sa retouche. */ .carnetm.m2.cn-f4 .cn-photo3, .carnetm.m2.cn-f7 .cn-photo3 { inset: 0; } .carnetm.m2.cn-f4 .cn-deco.a, .carnetm.m2.cn-f7 .cn-deco.a { z-index: 3; /* la pastille se pose SUR la photo */ background: var(--encre); border-radius: 999px; } .carnetm.m2.cn-f4 .cn-deco.a { left: 30.73%; right: 30.77%; top: 80.14%; bottom: 9.71%; box-shadow: 0 0 0 0.81cqw var(--fond); } .carnetm.m2.cn-f7 .cn-deco.a { left: 30.05%; right: 30.05%; top: 9.31%; bottom: 79.97%; box-shadow: 0 0 0 1.01cqw var(--fond); } /* ------------------------------------------------------------------- F8 */ .carnetm.m2.cn-f8 .cn-deco.a { left: 6.05%; right: 6.05%; top: 9.03%; bottom: 9.14%; border-radius: 8.95cqw; /* 222 px : la courbe généreuse du dos */ background: var(--encre); } .carnetm.m2.cn-f8 .cn-deco.b { background: var(--fond); } .carnetm.m2.cn-f8 .cn-corps { inset: 0; padding: 0; } .carnetm.m2.cn-f8 .cn-qrtexte { position: absolute; left: 12%; right: 12%; top: 16.71%; margin: 0; text-align: center; font-size: max(0.44rem, 2.62cqw); font-weight: 700; } .carnetm.m2.cn-f8 .cn-qr { left: 33.87%; right: 33.87%; top: 30.47%; aspect-ratio: 1; border-radius: 2.82cqw; } .carnetm.m2.cn-f8 .cn-fin { position: absolute; left: 10%; right: 10%; top: 79.88%; margin: 0; text-align: center; font-size: max(0.44rem, 2.13cqw); font-style: italic; } .carnetm.m2.cn-f8 .cn-marque { top: 93.51%; bottom: auto; font-size: 1.47cqw; } /* =========================================================================== m3 — L'ÉCUSSON Un fond vert profond, et UN CARTOUCHE CRÈME posé dessus. Sur la double page il gardait presque la même taille d'une face à l'autre ; en couché sa dictée est explicite — LE CARTOUCHE CHANGE D'ÉCHELLE SELON SON RÔLE : F1 réduit, à gauche, il tient la photo — la titraille vit à côté, à droite, sur le vert nu ; le mot du haut et son filet coiffent la page. F2 grand, presque bord à bord : c'est une page de texte. F3 · F5 · F6 le même grand cartouche, et le tirage se DÉPLACE dedans — à droite en haut, à gauche en haut, à droite en bas. F4 PLEIN FORMAT : le cartouche n'est plus qu'une marge de 30 px autour de la photo. C'est l'échelle maximale du modèle. F7 DÉCALÉ À DROITE, et un second bloc crème saigne par la gauche — le cartouche s'est déplacé sur la page au lieu de changer de taille. F8 RESSERRÉ autour du QR : le cartouche redevient un écusson. Le tirage des pages libres est CERNÉ d'un filet olive à 21 px — c'est la grammaire photo du modèle, celle qui le distingue de l'ombre dure de m1. =========================================================================== */ .carnetm.m3 { --fond: #2f3a2c; --encre: #f5ead8; --accent: #7a8a5e; /* six faces sur huit posent leur texte DANS le cartouche crème : il y passe en sombre. Seuls le mot du haut, la titraille de couverture et le © Booky restent clairs, sur le vert nu. */ --c-motprop: #2f3a2c; --c-proprio: #2f3a2c; --c-signe: #2f3a2c; --c-ptitre: #2f3a2c; --c-ptexte: #2f3a2c; --c-qrtexte: #2f3a2c; --c-fin: #2f3a2c; --m3-clair: #f5ead8; --m3-courbe: 1.25cqw; /* 31 px, relevés sur l'arc du coin */ --photo-vide: #d9d2be; --photo-vide-encre: #5c5647; } /* le cartouche, commun aux huit faces — seule sa boîte change */ .carnetm.m3 .cn-deco.a { background: var(--m3-clair); border-radius: var(--m3-courbe); } /* le court filet olive, BORNÉ aux cinq faces qui le portent */ .carnetm.m3.cn-f1 .cn-deco.b, .carnetm.m3.cn-f2 .cn-deco.b, .carnetm.m3.cn-f3 .cn-deco.b, .carnetm.m3.cn-f5 .cn-deco.b, .carnetm.m3.cn-f6 .cn-deco.b { left: 45.97%; width: 8.06%; height: max(0.12rem, 0.24cqw); background: var(--accent); } /* ------------------------------------------------------------------- F1 */ .carnetm.m3.cn-f1 .cn-deco.a { left: 6.45%; right: 47.22%; top: 16.37%; bottom: 15.95%; } .carnetm.m3.cn-f1 .cn-deco.b { top: 12.08%; } .carnetm.m3.cn-f1 .cn-photo { left: 7.66%; right: 48.43%; top: 18.06%; bottom: 17.66%; } .carnetm.m3.cn-f1 .cn-sur { position: absolute; left: 12%; right: 12%; top: 5.98%; margin: 0; text-align: center; font-size: max(0.44rem, 2.65cqw); font-weight: 700; letter-spacing: 0; text-transform: none; } /* LA COLONNE DE m3 EN COUVERTURE : elle ne tient pas sous la photo, elle se pose À CÔTÉ — c'est ce que le couché permet et que le portrait interdisait. Centrée à 1840, pas sur l'axe de la page. */ .carnetm.m3.cn-f1 .cn-corps { left: 54.84%; right: 6.45%; top: 24.19%; bottom: 0; padding: 0; text-align: center; } .carnetm.m3.cn-f1 .cn-nom { font-size: 2.69cqw; font-weight: 700; line-height: 1.12; } .carnetm.m3.cn-f1 .cn-sous { font-size: max(0.44rem, 1.56cqw); margin-top: 3.59cqw; } .carnetm.m3.cn-f1 .cn-mot { font-size: max(0.44rem, 1.4cqw); font-style: italic; margin-top: 2.81cqw; } /* --------------------------------------------- F2 · F3 · F5 · F6 le grand Le même cartouche pour les quatre pages de texte ; c'est ce qu'il y a DEDANS qui se déplace. */ .carnetm.m3.cn-f2 .cn-deco.a, .carnetm.m3.cn-f3 .cn-deco.a, .carnetm.m3.cn-f5 .cn-deco.a, .carnetm.m3.cn-f6 .cn-deco.a { left: 6.05%; right: 6.05%; top: 9.03%; bottom: 9.14%; } .carnetm.m3.cn-f2 .cn-deco.b, .carnetm.m3.cn-f3 .cn-deco.b, .carnetm.m3.cn-f5 .cn-deco.b, .carnetm.m3.cn-f6 .cn-deco.b { top: 24.27%; } .carnetm.m3.cn-f2 .cn-motprop { position: absolute; left: 12%; right: 12%; top: 16.66%; margin: 0; text-align: center; font-size: 2.62cqw; font-weight: 700; letter-spacing: 0; } .carnetm.m3.cn-f2 .cn-corps { left: 11.81%; right: 11.81%; top: 31.05%; bottom: 14%; padding: 0; } .carnetm.m3.cn-f2 .cn-proprio { font-size: max(0.44rem, 2.1cqw); line-height: 1.5; } .carnetm.m3.cn-f2 .cn-signe { font-size: max(0.44rem, 1.97cqw); font-style: italic; } .carnetm.m3.cn-f3 .cn-ptitre, .carnetm.m3.cn-f5 .cn-ptitre, .carnetm.m3.cn-f6 .cn-ptitre { position: absolute; left: 12%; right: 12%; top: 16.75%; margin: 0; text-align: center; font-size: 2.5cqw; font-weight: 700; } /* le corps prend toute la face : le tirage vit À CÔTÉ de la colonne, pas dessous, et son repère doit être la page (le piège relevé sur m2). */ .carnetm.m3.cn-f3 .cn-corps, .carnetm.m3.cn-f5 .cn-corps, .carnetm.m3.cn-f6 .cn-corps { inset: 0; padding: 0; } .carnetm.m3.cn-f3 .cn-ptexte, .carnetm.m3.cn-f5 .cn-ptexte, .carnetm.m3.cn-f6 .cn-ptexte { position: absolute; margin: 0; font-size: max(0.44rem, 2.25cqw); line-height: 1.5; min-height: 0; } /* LE TIRAGE CERNÉ : un filet olive à 21 px du bord, la grammaire photo du modèle. `outline` ne prend pas de place dans la boîte — la mesure du dessin reste celle de l'image, le filet vient par-dessus. */ .carnetm.m3.cn-f3 .cn-photo2, .carnetm.m3.cn-f5 .cn-photo2, .carnetm.m3.cn-f6 .cn-photo2 { position: absolute; outline: max(0.12rem, 0.16cqw) solid var(--accent); outline-offset: 0.85cqw; } .carnetm.m3.cn-f3 .cn-ptexte { left: 11.81%; right: 49.60%; top: 33.25%; } .carnetm.m3.cn-f3 .cn-photo2 { left: 54.44%; right: 14.15%; top: 33.86%; bottom: 36.79%; } .carnetm.m3.cn-f5 .cn-ptexte { left: 50.52%; right: 11.81%; top: 33.31%; } .carnetm.m3.cn-f5 .cn-photo2 { left: 11.69%; right: 56.85%; top: 33.86%; bottom: 36.79%; } .carnetm.m3.cn-f6 .cn-ptexte { left: 11.81%; right: 49.60%; top: 31.05%; } .carnetm.m3.cn-f6 .cn-photo2 { left: 54.44%; right: 14.15%; top: 57.56%; bottom: 16.48%; } /* ------------------------------------------------------- F4 le plein format Le cartouche n'est plus qu'une marge de 30 px autour de la photo : c'est l'échelle maximale du modèle, et elle ne se retrouve nulle part ailleurs. */ .carnetm.m3.cn-f4 .cn-deco.a { left: 6.05%; right: 6.05%; top: 9.03%; bottom: 9.14%; } .carnetm.m3.cn-f4 .cn-photo3 { left: 7.26%; right: 7.26%; top: 10.72%; bottom: 10.89%; } /* ------------------------------------------------------------- F7 le décalé Le cartouche s'est DÉPLACÉ vers la droite au lieu de changer de taille, et un second bloc crème saigne par la gauche — deux masses séparées par une tranche de vert. C'est la quatrième échelle de la série. */ .carnetm.m3.cn-f7 .cn-deco.a { left: 30.65%; right: 6.45%; top: 13.54%; bottom: 13.09%; } .carnetm.m3.cn-f7 .cn-deco.c { left: 0; right: 73.39%; top: 13.54%; bottom: 13.09%; background: var(--m3-clair); border-radius: 0 var(--m3-courbe) var(--m3-courbe) 0; } .carnetm.m3.cn-f7 .cn-photo3 { left: 31.85%; right: 7.66%; top: 15.24%; bottom: 14.79%; } /* ------------------------------------------------------------- F8 le dos Le cartouche se RESSERRE autour du QR : il redevient un écusson, et le © Booky sort sur le vert nu — donc en clair. */ .carnetm.m3.cn-f8 .cn-deco.a { left: 17.74%; right: 17.78%; top: 13.54%; bottom: 13.09%; } .carnetm.m3.cn-f8 .cn-corps { inset: 0; padding: 0; } .carnetm.m3.cn-f8 .cn-qrtexte { position: absolute; left: 20%; right: 20%; top: 20.28%; margin: 0; text-align: center; font-size: max(0.44rem, 2.39cqw); font-weight: 700; } .carnetm.m3.cn-f8 .cn-qr { left: 34.27%; right: 34.31%; top: 32.17%; aspect-ratio: 1; } .carnetm.m3.cn-f8 .cn-fin { position: absolute; left: 15%; right: 15%; top: 78.65%; margin: 0; text-align: center; font-size: max(0.44rem, 2.13cqw); font-style: italic; } .carnetm.m3.cn-f8 .cn-marque { top: 92.40%; bottom: auto; font-size: 1.47cqw; } /* =========================================================================== m4 — LA RÉGLURE AUCUN APLAT. Rien qu'un papier crème, des PAIRES DE FILETS et de la typographie : c'est le seul modèle du carnet où la page n'est pas partagée en champs de couleur, et c'est ce qui l'oblige à être juste au pixel — un titre trop petit de trois points s'y voit tout de suite, il n'a aucun aplat derrière quoi se rattraper. LA PAIRE, sa figure : un filet GRAS de 7 px et un filet MINCE de 3 px, séparés par un peu d'air, tous deux sur la pleine largeur — 2040 px, de 220 à 2260. La paire de TÊTE porte le gras dessus et le mince dessous ; la paire de PIED est RETOURNÉE, mince dessus et gras dessous. Elles se regardent, et c'est entre elles que vit le titre. CE QUI SE DÉPLACE D'UNE FACE À L'AUTRE, ce sont les paires elles-mêmes : F1 une seule paire de pied, très bas (760), le titre a toute la place ; F2 · F3 · F5 · F6 trois paires — tête, taille, pied — le cadre complet ; F4 deux paires seulement, écartées au maximum (200 et 1560), pour que le grand tirage tienne entre elles ; F7 UNE SEULE, celle de tête : la face s'ouvre, le tirage sort du cadre par la droite et par le bas ; F8 tête et pied resserrés autour du QR, le mot de fin tombant SOUS le pied. Huit faces, cinq réglures différentes : c'est la réglure qui fait le rythme, puisqu'il n'y a rien d'autre. LES TIRAGES à OMBRE DURE, sans le moindre flou : le tirage décalé de 30 px. Et le décalage tourne avec la composition — bas-droite sur F1 · F3 · F4 · F5 · F6, HAUT-GAUCHE sur F7 dont l'image saigne par le bas et par la droite. LA COLONNE DE TEXTE — sa consigne, relevée face par face : 2040 px sur F2, la page de texte pleine, qui est bâtie sur la pleine largeur entre filets ; 1000 px sur les trois pages libres, où le tirage prend l'autre moitié. =========================================================================== */ .carnetm.m4 { --fond: #fbf6ec; --encre: #2f3a2c; --accent: #7a8a5e; /* les huit faces sont sur le même papier clair et l'encre est sombre : aucune zone ne disparaît, seules celles qu'il a dessinées EN OLIVE doivent le dire. Elles tirent l'accent au lieu de le recopier, pour que l'hôte qui change d'accent les emmène avec lui. */ --c-sur: var(--accent); --c-sous: var(--accent); --c-marque: var(--accent); /* LE QR EST DESSINÉ SANS PLAQUE : un cadre sombre, et le papier dedans. Le garde-fou tient quand même — cette valeur est fixe, elle ne suit ni --fond ni --accent, et reste claire quoi qu'il choisisse. */ --qr-plaque: #fbf6ec; /* les deux épaisseurs de la réglure, relevées sur ses huit dessins. Les cqw sont légèrement au-dessus du calcul (7 px valent 0,2823 cqw, 3 px 0,1210) : le navigateur TRONQUE la largeur d'une bordure à l'entier inférieur, et le calcul juste rendait 6 px et 2 px. Vérifié au rendu — c'est la seule façon d'avoir un gras et un mince exacts. */ --m4-gras: max(0.12rem, 0.29cqw); /* 7 px */ --m4-mince: max(0.12rem, 0.125cqw); /* 3 px */ --photo-vide: #d9d2be; --photo-vide-encre: #6e6a5a; } /* ------------------------------------------------------- LES DEUX PAIRES PIÈGE C — celui que ce modèle-ci pose, et lui seul. Ses filets sont des BORDURES, pas des aplats : une paire, c'est une boîte vide bordée en haut et en bas. Or Tailwind met tout en `border-box` : la hauteur déclarée avalerait alors les deux bordures et la paire s'effondrerait en une seule barre. `content-box` rend à la hauteur son sens — l'AIR entre les filets. */ /* la paire de TÊTE : gras dessus, mince dessous. Elle est sur les HUIT faces, au même y, et c'est la seule constante du modèle : elle peut donc se déclarer une fois, `top` compris — le défaut de la déco fantôme collée au bord haut ne la guette pas, elle a le sien. */ .carnetm.m4 .cn-deco.a { left: 8.87%; right: 8.87%; top: 11.29%; height: 0.73cqw; /* les 18 px d'air entre les deux filets */ box-sizing: content-box; border-top: var(--m4-gras) solid var(--accent); border-bottom: var(--m4-mince) solid var(--accent); } /* la paire de PIED, RETOURNÉE : mince dessus, gras dessous. Elle n'est pas sur toutes les faces et son y change à chacune — donc BORNÉE aux faces qui la portent, jamais posée sur `.carnetm.m4` en général. */ .carnetm.m4.cn-f1 .cn-deco.b, .carnetm.m4.cn-f2 .cn-deco.b, .carnetm.m4.cn-f2 .cn-deco.c, .carnetm.m4.cn-f3 .cn-deco.b, .carnetm.m4.cn-f3 .cn-deco.c, .carnetm.m4.cn-f4 .cn-deco.b, .carnetm.m4.cn-f5 .cn-deco.b, .carnetm.m4.cn-f5 .cn-deco.c, .carnetm.m4.cn-f6 .cn-deco.b, .carnetm.m4.cn-f6 .cn-deco.c, .carnetm.m4.cn-f8 .cn-deco.b { left: 8.87%; right: 8.87%; height: 0.56cqw; /* 14 px d'air : la paire de pied est plus serrée */ box-sizing: content-box; border-top: var(--m4-mince) solid var(--accent); border-bottom: var(--m4-gras) solid var(--accent); } /* ------------------------------------------------- LES TIRAGES À OMBRE DURE La photo décalée de 30 px, sans flou et sans transparence — la grammaire photo du modèle. Chaque face déclare SON sens de décalage (piège 4 : rien n'hérite), et F7 le prend à l'envers. */ .carnetm.m4.cn-f1 .cn-photo, .carnetm.m4.cn-f3 .cn-photo2, .carnetm.m4.cn-f4 .cn-photo3, .carnetm.m4.cn-f5 .cn-photo2, .carnetm.m4.cn-f6 .cn-photo2 { box-shadow: 1.21cqw 1.21cqw 0 var(--accent); } /* ------------------------------------------------------------------- F1 LA COUVERTURE. Une seule paire de pied, et elle tombe très bas (760) : entre elle et la paire de tête, il reste 533 px de haut rien que pour la titraille — c'est là que le très grand nom peut vivre. Sous la réglure, le tirage centré à son ombre dure ; sous lui le mot d'accueil, et un court filet de 200 px qui ferme la page comme une signature. */ .carnetm.m4.cn-f1 .cn-deco.b { top: 42.89%; } /* le court filet de pied : le seul trait du modèle qui ne soit pas une paire */ .carnetm.m4.cn-f1 .cn-deco.d { left: 45.97%; width: 8.06%; top: 95.37%; height: max(0.12rem, 0.16cqw); /* 4 px */ background: var(--accent); } .carnetm.m4.cn-f1 .cn-photo { left: 25.81%; right: 25.81%; top: 47.97%; bottom: 17.04%; } /* le corps prend toute la face. Le mot du haut et le mot d'accueil s'y posent en ABSOLU : ils vivent de part et d'autre du tirage, à 900 px l'un de l'autre, et un flux commun n'aurait rien à faire là. Le nom et le lieu, eux, ne sont distants que de 69 px et restent EN FLUX — sur ces 2040 px de justification un nom de logement un peu long passe à deux lignes, et le lieu doit être POUSSÉ dessous, pas recouvert. La justification est la même pour les quatre : la PLEINE LARGEUR entre filets, 2040 px. */ .carnetm.m4.cn-f1 .cn-corps { inset: 0; padding: 0; text-align: center; } .carnetm.m4.cn-f1 .cn-sur, .carnetm.m4.cn-f1 .cn-mot { position: absolute; left: 8.87%; right: 8.87%; margin: 0; text-align: center; } .carnetm.m4.cn-f1 .cn-sur { top: 16.05%; font-size: max(0.44rem, 2.02cqw); font-weight: 700; letter-spacing: 0; text-transform: none; } /* LE TRÈS GRAND TITRE — 124 px de corps, 122 px de haut d'encre : c'est le geste du modèle. Sans aplat, c'est le titre qui tient la page, et il occupe à lui seul le tiers de la hauteur entre les deux réglures. Sa marge du haut, 16,41 cqw, vaut les 407 px où son dessin pose la boîte ; celle du lieu, 2,78 cqw, les 69 px d'air qui l'en séparent. */ .carnetm.m4.cn-f1 .cn-nom { margin: 16.41cqw 8.87% 0; font-size: 5.00cqw; font-weight: 700; line-height: 1.12; } .carnetm.m4.cn-f1 .cn-sous { margin: 2.78cqw 8.87% 0; font-size: max(0.44rem, 2.02cqw); } .carnetm.m4.cn-f1 .cn-mot { top: 87.63%; font-size: max(0.44rem, 2.18cqw); font-style: italic; } /* ------------------------------------------------------------------- F2 LE MOT DU PROPRIÉTAIRE. Le cadre complet : trois paires — tête (200), taille (430), pied (1600). Le titre fixe est pris en sandwich entre les deux premières ; le mot part en drapeau à gauche sur la pleine largeur entre filets, et la signature se range à droite juste au-dessus du pied. */ .carnetm.m4.cn-f2 .cn-deco.b { top: 24.27%; } .carnetm.m4.cn-f2 .cn-deco.c { top: 90.29%; } .carnetm.m4.cn-f2 .cn-motprop { position: absolute; left: 8.87%; right: 8.87%; top: 16.60%; margin: 0; text-align: center; font-size: 2.60cqw; font-weight: 700; letter-spacing: 0; } /* LA COLONNE DE F2 : 2040 px, la pleine largeur entre filets — c'est la face qui donne son chiffre à la consigne du modèle. */ .carnetm.m4.cn-f2 .cn-corps { left: 8.87%; right: 8.87%; top: 30.93%; bottom: 14%; padding: 0; } .carnetm.m4.cn-f2 .cn-proprio { font-size: max(0.44rem, 2.05cqw); line-height: 1.5; } .carnetm.m4.cn-f2 .cn-signe { font-size: max(0.44rem, 1.97cqw); font-style: italic; } /* ------------------------------------------- F3 · F5 · F6 LES PAGES LIBRES Le même cadre à trois paires que F2, le même titre entre tête et taille — et dessous, LE TIRAGE SE DÉPLACE : à droite en haut (F3), à GAUCHE en haut avec la colonne qui passe de l'autre côté (F5), à droite EN BAS (F6). Trois pages, trois compositions ; ce qu'elles partagent est écrit une fois. */ .carnetm.m4.cn-f3 .cn-deco.b, .carnetm.m4.cn-f5 .cn-deco.b, .carnetm.m4.cn-f6 .cn-deco.b { top: 24.27%; } .carnetm.m4.cn-f3 .cn-deco.c, .carnetm.m4.cn-f5 .cn-deco.c, .carnetm.m4.cn-f6 .cn-deco.c { top: 90.29%; } .carnetm.m4.cn-f3 .cn-ptitre, .carnetm.m4.cn-f5 .cn-ptitre, .carnetm.m4.cn-f6 .cn-ptitre { position: absolute; left: 8.87%; right: 8.87%; top: 16.75%; margin: 0; text-align: center; font-size: 2.56cqw; font-weight: 700; } /* PIÈGE B : `.cn-photo2` vit DANS `.cn-corps`, et un corps positionné devient son repère. Le tirage se place ici par rapport à la PAGE — le corps prend donc toute la face, et le texte s'y pose en absolu. */ .carnetm.m4.cn-f3 .cn-corps, .carnetm.m4.cn-f5 .cn-corps, .carnetm.m4.cn-f6 .cn-corps { inset: 0; padding: 0; } /* LA COLONNE DES PAGES LIBRES : 1000 px, à peine la moitié de celle de F2 — le tirage prend l'autre moitié. Le chiffre se lit sur F5, la seule des trois où la colonne est bornée des DEUX côtés par le dessin : le tirage s'arrête à 1120, le texte part à 1260, et il court jusqu'au filet, 2260. 140 px de gouttière et 1000 px de justification. F3 et F6, où seul le bord gauche est donné, prennent cette mesure en miroir. Le tirage absent ne laisse qu'un blanc : la colonne ne bouge pas. */ .carnetm.m4.cn-f3 .cn-ptexte, .carnetm.m4.cn-f5 .cn-ptexte, .carnetm.m4.cn-f6 .cn-ptexte { position: absolute; margin: 0; font-size: max(0.44rem, 2.24cqw); line-height: 1.5; min-height: 0; } .carnetm.m4.cn-f3 .cn-photo2, .carnetm.m4.cn-f5 .cn-photo2, .carnetm.m4.cn-f6 .cn-photo2 { position: absolute; } .carnetm.m4.cn-f3 .cn-ptexte { left: 8.87%; right: 50.81%; top: 32.66%; } .carnetm.m4.cn-f3 .cn-photo2 { left: 54.84%; right: 8.87%; top: 33.30%; bottom: 35.10%; } .carnetm.m4.cn-f5 .cn-ptexte { left: 50.81%; right: 8.87%; top: 32.71%; } .carnetm.m4.cn-f5 .cn-photo2 { left: 8.87%; right: 54.84%; top: 33.30%; bottom: 35.10%; } /* F6 : le tirage descend en pied, et le texte remonte de 30 px — il n'a plus rien au-dessus de lui pour le retenir. */ .carnetm.m4.cn-f6 .cn-ptexte { left: 8.87%; right: 50.81%; top: 31.02%; } .carnetm.m4.cn-f6 .cn-photo2 { left: 54.84%; right: 8.87%; top: 56.43%; bottom: 16.48%; } /* ------------------------------------------------------------------- F4 LA PREMIÈRE FACE PHOTO, tenue par la réglure. Deux paires seulement, et écartées au maximum : 200 en tête, 1560 en pied. Entre elles, un tirage de 1900 × 1100 centré, à l'ombre dure. Vide, les deux paires tiennent la face toutes seules — c'est la condition de la gratuité de la photo. */ .carnetm.m4.cn-f4 .cn-deco.b { top: 88.04%; } .carnetm.m4.cn-f4 .cn-photo3 { left: 11.69%; right: 11.69%; top: 18.06%; bottom: 19.86%; } /* ------------------------------------------------------------------- F7 LA SECONDE FACE PHOTO — et la seule face du carnet qui n'a qu'UNE paire. Le cadre s'ouvre : le tirage sort par la droite à franc bord, il n'a plus de pied sous lui, et son ombre dure a changé de sens avec lui — elle ne se voit plus qu'en HAUT et à GAUCHE. Après F4 qui écarte ses deux paires au maximum, c'est l'étape suivante du même mouvement : la réglure lâche. */ .carnetm.m4.cn-f7 .cn-photo3 { left: 23.39%; right: 0; top: 19.75%; bottom: 15.35%; box-shadow: -1.21cqw -1.21cqw 0 var(--accent); } /* ------------------------------------------------------------------- F8 LE DOS. Tête et pied se resserrent autour du QR (200 et 1290) : la réglure redevient un encadrement. Le QR n'a pas de plaque — un cadre sombre de 5 px et le papier dedans, exactement comme il l'a dessiné. Le mot de fin tombe SOUS le pied, hors du cadre, et le © Booky plus bas encore, en olive. */ .carnetm.m4.cn-f8 .cn-deco.b { top: 72.80%; } .carnetm.m4.cn-f8 .cn-corps { inset: 0; padding: 0; } .carnetm.m4.cn-f8 .cn-qrtexte { position: absolute; left: 8.87%; right: 8.87%; top: 16.81%; margin: 0; text-align: center; font-size: max(0.44rem, 2.34cqw); font-weight: 700; } .carnetm.m4.cn-f8 .cn-qr { left: 35.89%; right: 35.89%; top: 27.09%; aspect-ratio: 1; /* 5 px, et 0,205 cqw plutôt que 0,2016 pour la même raison que la réglure : la bordure se tronque à l'entier inférieur. */ border: max(0.12rem, 0.205cqw) solid var(--encre); } .carnetm.m4.cn-f8 .cn-fin { position: absolute; left: 8.87%; right: 8.87%; top: 78.61%; margin: 0; text-align: center; font-size: max(0.44rem, 2.18cqw); font-style: italic; } .carnetm.m4.cn-f8 .cn-marque { top: 92.93%; bottom: auto; font-size: 1.38cqw; } /* =========================================================================== m5 — LE DIPTYQUE Une seule idée tenue sur huit faces : LA PAGE EST COUPÉE NET EN DEUX, et une barre olive de 20 px se pose sur la ligne de partage. Rien d'autre — pas de cadre, pas de cartouche, pas d'ombre. Tout le rythme du modèle tient dans la HAUTEUR de la coupe et dans le SENS de l'inversion. CE QUE SES HUIT DESSINS DISENT, RELEVÉ AU PIXEL — et qui ne se déduit pas de sa dictée. Elle annonçait « en couché la coupe peut devenir verticale » : sur AUCUNE des huit images elle ne l'est. La coupe reste horizontale, et c'est sa HAUTEUR qui se déplace, face après face : F1 58,69 % le clair EN HAUT (la photo), le profond en pied F2 27,09 % un bandeau de titre, le champ clair prend le reste F3 22,57 % le bandeau se resserre encore F4 58,69 % la coupe de la couverture, sans texte : la photo seule F5 22,57 % F6 22,57 % F7 40,18 % le tirage passe EN PIED, le profond tient la tête F8 49,66 % la coupe au milieu, le dos LE SENS DU DIPTYQUE, compté aux colonnes x = 40 et x = 2440 des huit images : SIX faces sur huit posent le profond en tête et le clair en pied — F2, F3, F5, F6, F7, F8. F1 et F4 seules font l'inverse, et F7 les retourne à son tour. F7 est donc la seule face PHOTO dont le tirage tienne le pied, et c'est ce qui la distingue de F4, qui partage pourtant la coupe de la couverture. LES TROIS PAGES LIBRES partagent la coupe à 22,57 % — c'est le même bandeau de titre trois fois, et il n'y a rien à en tirer d'autre. Ce qui bouge chez elles est SOUS la coupe : le tirage passe à droite en haut (F3), à gauche en haut avec la colonne qui traverse (F5), à droite en bas (F6). LA COLONNE DE m5 : 2040 px, de 220 à 2260. Elle n'est pas déduite d'une marge choisie — c'est le bord gauche du tirage de F5 (x = 220) et le bord droit de celui de F6 (x = 2260) qui la donnent, et toutes les lignes de texte du modèle s'y calent. Sur les pages où le tirage occupe un flanc, la colonne s'arrête 140 px avant lui : le même dégagement des deux côtés. LA LIGNE EN PÊCHE. m5 est le seul modèle du carnet à porter une quatrième teinte, et il n'en porte qu'UNE LIGNE : le mot du haut de la couverture. Tout le reste vit sur trois couleurs. Elle est déclarée en `--c-sur` dans le bloc de défauts, comme n'importe quelle autre zone. ATTENTION AU MOT DU HAUT : il est FRÈRE de `.cn-corps`, pas son enfant. Il lui faut sa propre position absolue, sans quoi il retomberait en tête de face au lieu de coiffer la titraille — le même piège que sur la carte du 14/08. =========================================================================== */ .carnetm.m5 { --fond: #2f3a2c; --encre: #f5ead8; --accent: #7a8a5e; /* PIÈGE 4 : cinq faces sur huit posent leur texte sur le champ CLAIR. Une zone qui n'annonce pas sa couleur y prendrait le crème de `--encre` et disparaîtrait. Relevé à la sonde, pas à l'œil. Les zones qui restent dans le profond — le titre du mot, les titres de page, la ligne du QR, le mot de fin, la titraille de couverture — gardent l'encre claire. */ --c-proprio: #2f3a2c; --c-signe: #2f3a2c; --c-ptexte: #2f3a2c; --c-marque: #2f3a2c; /* la seule ligne en pêche du carnet entier */ --c-sur: #ffb59e; /* le champ clair est un APLAT, pas de l'encre : il a sa propre variable, sinon un hôte qui change la couleur de son texte repeindrait la moitié de chaque page. */ --m5-clair: #f5ead8; --photo-vide: #d9d2be; --photo-vide-encre: #5c5647; } /* ------------------------------------------------------- LA BARRE OLIVE Le seul objet commun aux huit faces : 20 px, bord à bord, posée SUR la ligne de partage. Sa hauteur passe en cqw (un filet), sa position en pourcentage (une forme). CHAQUE FACE DÉCLARE SON `top` — une déco sans `top` retombe collée au bord haut, et huit barres en tête de page seraient huit faces fausses. */ .carnetm.m5 .cn-deco.b { left: 0; right: 0; height: max(0.12rem, 0.81cqw); background: var(--accent); } /* ------------------------------------------------------- LE CHAMP CLAIR Il ne vit que sur les cinq faces à texte : sur F1, F4 et F7 c'est LA PHOTO qui tient la moitié claire, et la déco reste invisible. Il descend toujours jusqu'au pied, il ne lui manque que son `top`. */ .carnetm.m5.cn-f2 .cn-deco.a, .carnetm.m5.cn-f3 .cn-deco.a, .carnetm.m5.cn-f5 .cn-deco.a, .carnetm.m5.cn-f6 .cn-deco.a, .carnetm.m5.cn-f8 .cn-deco.a { left: 0; right: 0; bottom: 0; background: var(--m5-clair); } /* -------------------------------------------------------- LE COURT FILET 200 px sur 5, centré. Deux faces seulement le portent — la couverture et le dos, les deux qui annoncent quelque chose. Borné à ces deux-là. */ .carnetm.m5.cn-f1 .cn-deco.c, .carnetm.m5.cn-f8 .cn-deco.c { left: 45.97%; width: 8.06%; height: max(0.12rem, 0.20cqw); background: var(--m5-clair); } /* ------------------------------------------------------------------- F1 LA COUVERTURE. Le clair est EN HAUT et c'est la photo elle-même, à franc bord sur les trois côtés ; le profond tient le pied et porte toute la titraille, centrée sur l'axe de la page. Le mot du haut ouvre en pêche, le court filet sépare le lieu du mot d'accueil. */ .carnetm.m5.cn-f1 .cn-photo { left: 0; right: 0; top: 0; bottom: 41.31%; } .carnetm.m5.cn-f1 .cn-deco.b { top: 58.69%; } .carnetm.m5.cn-f1 .cn-deco.c { top: 84.65%; } /* frère de `.cn-corps` : il se pose lui-même, au-dessus de la colonne */ .carnetm.m5.cn-f1 .cn-sur { position: absolute; left: 8.87%; right: 8.87%; top: 64.58%; margin: 0; text-align: center; font-size: max(0.44rem, 2.24cqw); font-weight: 700; letter-spacing: 0; text-transform: none; } /* la colonne de m5 : 220 → 2260, la même sur toutes les faces pleines */ .carnetm.m5.cn-f1 .cn-corps { left: 8.87%; right: 8.87%; top: 70.29%; bottom: 0; padding: 0; text-align: center; } /* LES TROIS CORPS DE LA COLONNE, remesurés au rendu et non calculés — la leçon la plus chère du chantier. Hauteurs d'encre visées sur son dessin : 103 · 36 · 38 px. Deux passes ont suffi, la seconde a rendu 102 · 36 · 39. */ .carnetm.m5.cn-f1 .cn-nom { font-size: 4.17cqw; font-weight: 700; line-height: 1.12; } .carnetm.m5.cn-f1 .cn-sous { font-size: max(0.44rem, 1.91cqw); margin-top: 1.38cqw; } /* le mot d'accueil vit SOUS le filet : la marge lui fait sa place */ .carnetm.m5.cn-f1 .cn-mot { font-size: max(0.44rem, 2.05cqw); font-style: italic; margin-top: 4.64cqw; } /* ------------------------------------------------------------------- F2 LE MOT DU PROPRIÉTAIRE. La coupe remonte à 27,09 % : le profond n'est plus qu'un bandeau de titre, le champ clair prend tout le reste et porte le mot en drapeau à gauche, la signature en bas à droite — les deux extrémités de la même diagonale, sur la pleine largeur de la colonne. */ .carnetm.m5.cn-f2 .cn-deco.b { top: 27.09%; } .carnetm.m5.cn-f2 .cn-deco.a { top: 28.22%; } .carnetm.m5.cn-f2 .cn-motprop { position: absolute; left: 8.87%; right: 8.87%; top: 10.56%; margin: 0; text-align: center; font-size: 2.54cqw; font-weight: 700; letter-spacing: 0; } .carnetm.m5.cn-f2 .cn-corps { left: 8.87%; right: 8.87%; top: 36.13%; bottom: 12%; padding: 0; } .carnetm.m5.cn-f2 .cn-proprio { font-size: max(0.44rem, 2.07cqw); line-height: 1.5; } .carnetm.m5.cn-f2 .cn-signe { font-size: max(0.44rem, 1.98cqw); font-style: italic; } /* --------------------------------------------- F3 · F5 · F6 les pages libres La même coupe à 22,57 % : le bandeau de titre est le plus mince du carnet, juste de quoi tenir le titre. Ce qui se déplace est SOUS la coupe. */ .carnetm.m5.cn-f3 .cn-deco.b, .carnetm.m5.cn-f5 .cn-deco.b, .carnetm.m5.cn-f6 .cn-deco.b { top: 22.57%; } .carnetm.m5.cn-f3 .cn-deco.a, .carnetm.m5.cn-f5 .cn-deco.a, .carnetm.m5.cn-f6 .cn-deco.a { top: 23.70%; } /* le titre est frère de `.cn-corps` lui aussi : il vit dans le bandeau */ .carnetm.m5.cn-f3 .cn-ptitre, .carnetm.m5.cn-f5 .cn-ptitre, .carnetm.m5.cn-f6 .cn-ptitre { position: absolute; left: 8.87%; right: 8.87%; top: 8.39%; margin: 0; text-align: center; font-size: 2.48cqw; font-weight: 700; } /* LE CORPS PREND TOUTE LA FACE. Raison : `.cn-photo2` vit DANS `.cn-corps`, et un corps positionné devient son repère — les pourcentages du tirage se compteraient sur la colonne au lieu de la page, et il tomberait au milieu du texte. Le tirage de m5 se place par rapport à la PAGE : le corps s'efface, le texte se pose en absolu dedans. */ .carnetm.m5.cn-f3 .cn-corps, .carnetm.m5.cn-f5 .cn-corps, .carnetm.m5.cn-f6 .cn-corps { inset: 0; padding: 0; } .carnetm.m5.cn-f3 .cn-ptexte, .carnetm.m5.cn-f5 .cn-ptexte, .carnetm.m5.cn-f6 .cn-ptexte { position: absolute; margin: 0; font-size: max(0.44rem, 2.24cqw); line-height: 1.5; min-height: 0; } .carnetm.m5.cn-f3 .cn-photo2, .carnetm.m5.cn-f5 .cn-photo2, .carnetm.m5.cn-f6 .cn-photo2 { position: absolute; } /* F3 le tirage à droite, la colonne s'arrête 140 px avant lui */ .carnetm.m5.cn-f3 .cn-ptexte { left: 8.87%; right: 49.19%; top: 33.27%; } .carnetm.m5.cn-f3 .cn-photo2 { left: 56.45%; right: 7.26%; top: 33.86%; bottom: 34.54%; } /* F5 le tirage passe à GAUCHE et la colonne traverse avec lui */ .carnetm.m5.cn-f5 .cn-ptexte { left: 50.81%; right: 8.87%; top: 33.33%; } .carnetm.m5.cn-f5 .cn-photo2 { left: 8.87%; right: 54.84%; top: 33.86%; bottom: 34.54%; } /* F6 le tirage descend EN PIED — relevé x 1360 → 2259, y 1080 → 1559. À la hauteur de la ligne de texte (y 611 → 652) plus rien ne borne la colonne à droite : elle reprend la pleine largeur du modèle, 2040 px, celle que F2 emploie déjà. Ce sont F3 et F5, où le tirage occupe un flanc À HAUTEUR DE TEXTE, qui sont les exceptions — pas F6. */ .carnetm.m5.cn-f6 .cn-ptexte { left: 8.87%; right: 8.87%; top: 33.33%; } .carnetm.m5.cn-f6 .cn-photo2 { left: 54.84%; right: 8.87%; top: 60.95%; bottom: 11.96%; } /* ------------------------------------------------------------------- F4 LA PREMIÈRE FACE PHOTO. Elle reprend EXACTEMENT la coupe de la couverture — 58,69 % — et c'est voulu : la page de garde photo répond à la couverture sans rien y ajouter. Le décor la tient tout seul, le profond du pied reste nu. Vide, elle reste une face juste : c'est la condition de la gratuité de la photo. */ .carnetm.m5.cn-f4 .cn-photo3 { left: 0; right: 0; top: 0; bottom: 41.31%; } .carnetm.m5.cn-f4 .cn-deco.b { top: 58.69%; } /* ------------------------------------------------------------------- F7 LA SECONDE FACE PHOTO — LE TIRAGE PASSE EN PIED. Le profond tient la tête, la barre olive descend avec lui à 40,18 %. C'est la seule face PHOTO dont le tirage tienne le pied : F1 et F4 posent le leur en tête. Six faces sur huit ont déjà le profond en tête — F7 ne renverse pas le carnet, elle renverse les deux faces photo qui l'ont précédée, et sans reprendre leur coupe : 712 px contre 1040. */ .carnetm.m5.cn-f7 .cn-deco.b { top: 40.18%; } .carnetm.m5.cn-f7 .cn-photo3 { left: 0; right: 0; top: 41.31%; bottom: 0; } /* ------------------------------------------------------------------- F8 LE DOS. La coupe revient au milieu — 49,66 %, le diptyque le plus égal des huit. Le profond du haut porte la ligne du QR, son court filet et le mot de fin ; le champ clair du bas porte la plaque et le © Booky, qui repasse donc en sombre. */ .carnetm.m5.cn-f8 .cn-deco.b { top: 49.66%; } .carnetm.m5.cn-f8 .cn-deco.a { top: 50.79%; } .carnetm.m5.cn-f8 .cn-deco.c { top: 23.70%; } .carnetm.m5.cn-f8 .cn-corps { inset: 0; padding: 0; } .carnetm.m5.cn-f8 .cn-qrtexte { position: absolute; left: 8.87%; right: 8.87%; top: 16.73%; margin: 0; text-align: center; font-size: max(0.44rem, 2.58cqw); font-weight: 700; } .carnetm.m5.cn-f8 .cn-fin { position: absolute; left: 8.87%; right: 8.87%; top: 31.33%; margin: 0; text-align: center; font-size: max(0.44rem, 2.10cqw); font-style: italic; } .carnetm.m5.cn-f8 .cn-qr { left: 36.69%; right: 36.69%; top: 54.18%; aspect-ratio: 1; } .carnetm.m5.cn-f8 .cn-marque { top: 94.58%; bottom: auto; font-size: 1.47cqw; } /* =========================================================================== m7 — LA FENÊTRE Vert sur crème, et UN SEUL objet tenu sur huit faces : LE CADRE. Il est dessiné EN BORDURES sur `.cn-deco.a` posée `inset: 0` — pas en aplats — parce que c'est exactement ce qu'il fait : il n'occupe pas une place sur la page, il en MORD les quatre côtés, et chaque face décide de combien. Une seule déclaration de forme, huit largeurs de bordure : le déplacement que sa dictée exige est écrit dans un seul chiffre par côté. SES CINQ ÉTATS, dans l'ordre des faces : F1 · F4 FERMÉ 160 px en tête, 150 aux montants, 162 au pied. F2 · F5 BANDEAUX 260 px en tête et au pied, les montants tombent : la page saigne à gauche et à droite. F3 · F6 MONTANTS 240 px à gauche et à droite, la tête et le pied tombent : la page saigne en haut et en bas. F7 RESSERRÉ 440 px aux montants, 340 en tête, 332 au pied — la fenêtre s'est réduite à une vue au milieu du vert. F8 LUCARNE 740 px aux montants, 460 en tête, 412 au pied : il ne reste qu'un carreau, juste assez pour le QR. Cinq états, jamais deux faces voisines dans le même : F1 fermé, F2 bandeaux, F3 montants, F4 fermé, F5 bandeaux, F6 montants, F7 resserré, F8 lucarne. LE FILET OLIVE DOUBLE LE CADRE, et c'est le second geste du modèle. Sur la couverture il court à 30 px à l'intérieur du crème, sur les quatre côtés : un `::after` de la déco du cadre, donc calé sur sa boîte de rembourrage — pas une cinquième déco, le squelette tient à quatre. Sur F4 et F7 c'est LE TIRAGE qui vient occuper cette ligne : il se pose à ces mêmes 30 px et le filet disparaît sous lui — la marge crème reste, elle devient passe-partout. Sur F8 c'est la plaque du QR qui prend la place, mais à deux valeurs : 150 px aux montants, 100 en tête et au pied — la lucarne n'est pas carrée, le retrait suit sa forme au lieu de la contredire. BOX-SIZING EXPLICITE sur ce cadre. Un modèle qui dessine ses bordures a besoin que la boîte déclarée soit la boîte EXTÉRIEURE : en `content-box`, `inset: 0` collerait le contenu aux bords et les bordures déborderaient hors de la face, où `overflow: hidden` les couperait. La leçon de m4 prise à l'endroit inverse — on ne suppose pas la remise à zéro de l'hôte. LA COLONNE DE TEXTE, relevée face par face — elle ne vaut jamais deux fois la même chose ici, parce que c'est le cadre qui la borne : F1 940 px (à droite du tirage, centrée sur 1810) F2 2040 px (pleine largeur : plus de montants pour la retenir) F3 900 px (le montant la pousse à 340, le tirage l'arrête à 1240) F5 1020 px (pas de montant à gauche : elle repart de 220) F6 900 px (le tirage descend en pied ET recule à 1240 : la colonne bute sur son bord gauche, exactement comme celle de F3) =========================================================================== */ .carnetm.m7 { /* LE MEME PARTI QUE SA CARTE ET SA DOUBLE PAGE, et c'est une CORRECTION : la retranscription avait d'abord fait de `--fond` le CRÈME, parce qu'en couché le cadre est dessiné en bordures et que le crème est le papier qu'elles laissent voir. Le rendu était juste, la sémantique fausse — sur les deux autres produits, `--fond` de m7 est LE VERT (objets.js le dit aussi, et c'est lui qui sert au calcul de contraste). Un hôte qui change « le fond » aurait donc repeint le cadre sur sa carte et la fenêtre sur son carnet : le même réglage, deux effets contraires. Même famille de défaut que l'incohérence m5 du 14/08. `--fond` peint le CADRE, `--m7-clair` la fenêtre, `--encre` vaut le vert comme ailleurs. */ --fond: #2f3a2c; --encre: #2f3a2c; --accent: #7a8a5e; --m7-clair: #f5ead8; /* CE QUI TOMBE SUR LE VERT PASSE EN CRÈME. Ces quatre zones-là ne vivent que sur une face chacune, et cette face les pose sur le cadre : le titre du mot du propriétaire dans le bandeau de F2, et les trois lignes du dos dans le plein vert de F8. */ --c-motprop: var(--m7-clair); --c-qrtexte: var(--m7-clair); --c-fin: var(--m7-clair); --c-marque: var(--m7-clair); /* les deux lignes secondaires de la couverture sont à l'accent, relevé au pixel : #7a8a5e sur son dessin, pas une nuance plus claire */ --c-sur: var(--accent); --c-sous: var(--accent); --photo-vide: #d9d2be; --photo-vide-encre: #5c5647; /* le retrait du filet olive dans le carreau : 30 px, la même valeur que le passe-partout des tirages de F4 et F7 — c'est le module du modèle */ --m7-marge: 1.21cqw; } /* ------------------------------------------------------------- LE CADRE La même déco sur les huit faces, la même forme, et RIEN d'autre en commun qu'elle : c'est la largeur des quatre bordures qui porte tout le rythme du modèle. `border-width: 0` par défaut — une face qui oublierait de parler ne montre pas un cadre fantôme, elle ne montre rien. */ .carnetm.m7 .cn-deco.a { inset: 0; /* PIÈGE 4 : la déco déclare sa couleur, elle n'hérite pas. C'est la FENÊTRE qui est peinte ici, et le cadre n'est que le vert du fond qui reste visible autour d'elle — même parti que sa carte et sa double page. Les quatre retraits ci-dessous portent donc tout le rythme du modèle. */ background: var(--m7-clair); } /* le court filet olive du modèle, BORNÉ aux quatre faces qui le portent — une déco sans `top` retomberait collée au bord haut des autres */ .carnetm.m7.cn-f1 .cn-deco.b, .carnetm.m7.cn-f2 .cn-deco.b, .carnetm.m7.cn-f3 .cn-deco.b, .carnetm.m7.cn-f6 .cn-deco.b { width: 8.06%; /* 200 px */ height: max(0.12rem, 0.20cqw); /* 5 px */ background: var(--accent); } /* ------------------------------------------------------------------- F1 LA COUVERTURE, cadre FERMÉ. Le filet olive double le cadre sur les quatre côtés, à 30 px dans le crème : posé en `::after` de la déco du cadre, il se cale sur sa boîte de rembourrage, c'est-à-dire sur le carreau. Le tirage tient la moitié gauche, la titraille la moitié droite, centrée sur 1810 — pas sur l'axe de la page, qui est pris par le bord de la photo. */ /* LES CENTIÈMES DE cqw SE PAIENT ICI, et c'est la seule raison d'écrire 6,46 plutôt que 6,45 : le navigateur TRONQUE la largeur d'une bordure au pixel inférieur. 6,45 cqw valent 159,96 px et se posaient à 159 — un pixel de vert perdu sur chaque côté, visible au relevé sinon à l'œil. Chaque largeur de ce bloc est donc celle qui retombe JUSTE au-dessus de sa valeur Canva, vérifiée au rendu, côté par côté. */ .carnetm.m7.cn-f1 .cn-deco.a, .carnetm.m7.cn-f4 .cn-deco.a { inset: 6.46cqw 6.05cqw 6.54cqw; /* 160 · 150 · 162 px */ } .carnetm.m7.cn-f1 .cn-deco.a::after { content: ''; position: absolute; inset: var(--m7-marge); border: max(0.12rem, 0.17cqw) solid var(--accent); /* 4 px */ } .carnetm.m7.cn-f1 .cn-photo { left: 10.48%; right: 49.19%; top: 19.19%; bottom: 18.74%; } .carnetm.m7.cn-f1 .cn-sur { position: absolute; left: 54.03%; right: 8.06%; top: 23.41%; margin: 0; text-align: center; font-size: max(0.44rem, 2.15cqw); font-weight: 700; letter-spacing: 0; text-transform: none; } .carnetm.m7.cn-f1 .cn-corps { left: 54.03%; right: 8.06%; top: 30.22%; bottom: 0; padding: 0; text-align: center; } .carnetm.m7.cn-f1 .cn-nom { font-size: 3.43cqw; font-weight: 700; line-height: 1.12; } .carnetm.m7.cn-f1 .cn-sous { font-size: max(0.44rem, 1.96cqw); margin-top: 3.72cqw; } /* le mot d'accueil vit SOUS le filet : la marge lui fait sa place */ .carnetm.m7.cn-f1 .cn-mot { font-size: max(0.44rem, 1.89cqw); font-style: italic; margin-top: 4.71cqw; } .carnetm.m7.cn-f1 .cn-deco.b { left: 68.95%; top: 46.28%; } /* ------------------------------------------------------------------- F2 LE MOT DU PROPRIÉTAIRE, cadre ouvert en BANDEAUX. Les montants sont tombés : la page saigne à gauche et à droite, et la colonne en profite — 2040 px, la plus large du modèle, parce que plus rien ne la retient. Le titre fixe s'écrit en crème DANS le bandeau de tête. */ .carnetm.m7.cn-f2 .cn-deco.a, .carnetm.m7.cn-f5 .cn-deco.a { inset: 10.49cqw 0; /* 260 px en tête et au pied */ } .carnetm.m7.cn-f2 .cn-deco.b { left: 45.97%; top: 22.57%; } .carnetm.m7.cn-f2 .cn-motprop { position: absolute; left: 12%; right: 12%; top: 4.86%; margin: 0; text-align: center; font-size: 2.49cqw; font-weight: 700; letter-spacing: 0; } .carnetm.m7.cn-f2 .cn-corps { left: 8.87%; right: 8.87%; top: 28.79%; bottom: 16%; padding: 0; } .carnetm.m7.cn-f2 .cn-proprio { font-size: max(0.44rem, 2.07cqw); line-height: 1.5; } .carnetm.m7.cn-f2 .cn-signe { font-size: max(0.44rem, 1.98cqw); font-style: italic; } /* --------------------------------------------------------------- F3 et F6 LES PAGES LIBRES À MONTANTS. Le cadre ne garde que ses deux jambages : 240 px à gauche et à droite, la page saigne en haut et en bas. Le titre se centre sur l'axe, le filet dessous, le texte à gauche, le tirage à droite — et c'est LUI SEUL qui distingue les deux faces : à mi-hauteur et calé sur 1360 pour F3, descendu en pied et reculé à 1240 pour F6 — tous deux larges de 800 px. LA COLONNE, ELLE, NE BOUGE PAS : elle s'arrête au bord GAUCHE du tirage dans les deux cas, donc à 1240, donc 900 px. L'ouvrir jusqu'au bord droit du tirage de F6 — 2040 — serait une faute : la colonne descend plus bas que lui, sa septième ligne commence à 1021 et le tirage à 1020, et le texte s'imprimerait EN PLEIN dessus. Ce n'est pas la largeur qui protège une colonne d'un tirage, c'est la butée. */ .carnetm.m7.cn-f3 .cn-deco.a, .carnetm.m7.cn-f6 .cn-deco.a { inset: 0 9.68cqw; /* 240 px aux deux montants */ } .carnetm.m7.cn-f3 .cn-deco.b, .carnetm.m7.cn-f6 .cn-deco.b { left: 45.97%; top: 22.57%; } .carnetm.m7.cn-f3 .cn-ptitre, .carnetm.m7.cn-f6 .cn-ptitre { position: absolute; left: 9.68%; right: 9.68%; margin: 0; text-align: center; font-size: 2.35cqw; font-weight: 700; } .carnetm.m7.cn-f3 .cn-ptitre { top: 13.39%; } .carnetm.m7.cn-f6 .cn-ptitre { top: 13.27%; } /* LE CORPS PREND TOUTE LA FACE sur les trois pages libres, et le texte s'y pose en absolu. Raison : `.cn-photo2` vit DANS `.cn-corps`, et un corps positionné devient son repère — les pourcentages du tirage se compteraient alors sur la colonne au lieu de la page, et il tomberait au milieu du texte. Ici le tirage se place par rapport à la PAGE : c'est le cadre qui le tient, pas la colonne. */ .carnetm.m7.cn-f3 .cn-corps, .carnetm.m7.cn-f5 .cn-corps, .carnetm.m7.cn-f6 .cn-corps { inset: 0; padding: 0; } .carnetm.m7.cn-f3 .cn-ptexte, .carnetm.m7.cn-f5 .cn-ptexte, .carnetm.m7.cn-f6 .cn-ptexte { position: absolute; margin: 0; font-size: max(0.44rem, 2.29cqw); line-height: 1.5; min-height: 0; } .carnetm.m7.cn-f3 .cn-photo2, .carnetm.m7.cn-f5 .cn-photo2, .carnetm.m7.cn-f6 .cn-photo2 { position: absolute; } .carnetm.m7.cn-f3 .cn-ptexte { left: 13.71%; right: 50.00%; top: 28.74%; } .carnetm.m7.cn-f3 .cn-photo2 { left: 54.84%; right: 12.90%; top: 29.35%; bottom: 41.31%; } .carnetm.m7.cn-f6 .cn-ptexte { left: 13.71%; right: 50.00%; top: 28.79%; } .carnetm.m7.cn-f6 .cn-photo2 { left: 50.00%; right: 17.74%; top: 57.56%; bottom: 15.35%; } /* --------------------------------------------------------- F4 le plein cadre LA PREMIÈRE FACE PHOTO. Le cadre se referme comme en couverture, et le TIRAGE VIENT PRENDRE LA PLACE DU FILET OLIVE : il se pose aux mêmes 30 px du carreau, sur les quatre côtés. Ce qui restait ligne devient marge ; vide, le passe-partout crème tient la face tout seul — c'est la condition pour que la photo reste facultative. */ .carnetm.m7.cn-f4 .cn-photo3 { left: 7.26%; right: 7.26%; top: 10.72%; bottom: 10.84%; } /* ------------------------------------------------------------------- F5 LA DEUXIÈME PAGE LIBRE, en BANDEAUX comme F2 — et c'est le seul endroit du modèle où un titre de page monte DANS le bandeau, donc en crème. Le filet ne suit pas : le bandeau tient l'annonce à lui seul. La colonne repart de 220 px, il n'y a plus de montant pour la pousser. */ .carnetm.m7.cn-f5 .cn-ptitre { position: absolute; left: 9.68%; right: 9.68%; top: 4.99%; margin: 0; text-align: center; /* posé sur le vert du bandeau : il prend la couleur du papier, pas celle de l'encre — sans quoi il disparaîtrait dans son propre fond */ color: var(--m7-clair); font-size: 2.32cqw; font-weight: 700; } .carnetm.m7.cn-f5 .cn-ptexte { left: 8.87%; right: 50.00%; top: 26.53%; } .carnetm.m7.cn-f5 .cn-photo2 { left: 54.84%; right: 12.90%; top: 27.09%; bottom: 43.57%; } /* ---------------------------------------------------------- F7 le resserré LA SECONDE FACE PHOTO. Le cadre se RESSERRE : 440 px aux montants, 340 en tête, 332 au pied — la fenêtre n'est plus qu'une vue au milieu du vert, et c'est la PREMIÈRE face du carnet où le cadre pèse plus lourd que le carreau : 2 634 560 px² contre 1 760 000. F8 poussera le resserrement plus loin encore, jusqu'à 3 494 560 contre 900 000. Le tirage garde ses 30 px de passe-partout, hérités de F4 : le geste ne change pas, c'est l'échelle qui change. */ .carnetm.m7.cn-f7 .cn-deco.a { inset: 13.71cqw 17.75cqw 13.39cqw; /* 340 · 440 · 332 px */ } .carnetm.m7.cn-f7 .cn-photo3 { left: 18.95%; right: 18.95%; top: 20.88%; bottom: 20.43%; } /* ------------------------------------------------------------ F8 la lucarne LE DOS. Dernier resserrement : 740 px aux montants, il ne reste qu'un carreau de 1000 × 900 autour du QR. Les trois lignes tombent dans le plein vert, donc en crème — la ligne du QR au-dessus de la lucarne, le mot de fin en dessous, le © Booky en pied. La plaque du QR reprend le geste du passe-partout de F4 et F7, mais à deux valeurs : 150 px aux montants, 100 en tête et au pied — 700 × 700 de plaque dans 1000 × 900 de lucarne. Un retrait égal des quatre côtés la décentrerait : c'est le carreau qui n'est pas carré, le retrait ne fait que le suivre. */ .carnetm.m7.cn-f8 .cn-deco.a { inset: 18.55cqw 29.84cqw 16.62cqw; /* 460 · 740 · 412 px */ } .carnetm.m7.cn-f8 .cn-corps { inset: 0; padding: 0; } .carnetm.m7.cn-f8 .cn-qrtexte { position: absolute; left: 10%; right: 10%; top: 13.98%; margin: 0; text-align: center; font-size: max(0.44rem, 2.34cqw); font-weight: 700; } .carnetm.m7.cn-f8 .cn-qr { left: 35.89%; right: 35.89%; top: 31.60%; aspect-ratio: 1; } .carnetm.m7.cn-f8 .cn-fin { position: absolute; left: 10%; right: 10%; top: 81.60%; margin: 0; text-align: center; font-size: max(0.44rem, 2.15cqw); font-style: italic; } .carnetm.m7.cn-f8 .cn-marque { top: 92.95%; bottom: auto; font-size: 1.47cqw; } /* =========================================================================== m8 — LA TRAME Le modèle le plus dépouillé des sept : un fond pâle, BEAUCOUP DE VIDE, et un seul objet — LE TIRAGE INCLINÉ à −6°, doublé de son ombre dure olive. Un long filet court en pied de page, un second se pose sous les titres. Rien d'autre : pas d'aplat, pas de cartouche, pas de panneau. CE QUE LE COUCHÉ CHANGE, et c'est sa dictée mot pour mot : « en couché le tirage RESPIRE DAVANTAGE ». En portrait il tenait la largeur et laissait le vide au-dessus ; ici il ne remplit plus jamais la page — même sur les deux faces photo, où il s'arrête à 1 600 px sur 2 480 (F4) puis à 1 300 (F7). Le vide n'est pas ce qui reste, c'est le sujet. LE RYTHME DES HUIT FACES tient tout entier dans le DÉPLACEMENT DU TIRAGE, puisqu'il n'y a que lui à déplacer. Relevé face par face : F1 800 × 560, centré sur l'axe de la page, en tête (couverture) F3 699 × 469, poussé à DROITE, à mi-hauteur (page libre) F4 1 600 × 999, centré, presque pleine page — l'échelle max (photo) F5 699 × 470, poussé à GAUCHE — le miroir de F3, mais pas (page libre) son symétrique exact : son centre est à 620 px quand celui de F3 est à 1 780, et non à 700. C'est relevé, pas déduit. F6 680 × 439, redescendu EN PIED et légèrement réduit (page libre) F7 1 300 × 900, décalé vers la droite et le bas (photo) La colonne de texte suit le tirage et change de côté avec lui : à gauche sur F3 et F6, à DROITE sur F5. L'ANGLE EST LE MÊME PARTOUT — −6°, vérifié sur les six tirages en projetant leurs pixels dans le repère tourné : à −5,8° comme à −6,2° la boîte reprend plusieurs pixels, à −6° elle tombe pile. Et l'ombre dure est TOUJOURS le même décalage, 21 px sur 25, mesuré DANS LE REPÈRE DE L'OBJET (donc une `box-shadow`, qui tourne avec lui) et non dans celui de la page. LA COLONNE DE m8 : 2 040 px — exactement la portée du filet, de 8,87 % à 91,13 %. C'est le chiffre de m4, et ce n'est pas un hasard : ici aussi la page est bâtie sur la pleine largeur entre filets. Mais elle se RÉTRÉCIT là où le tirage vient occuper un côté (1 020 px sur F3, 1 100 sur F5). =========================================================================== */ .carnetm.m8 { --fond: #fbf6ec; --encre: #2f3a2c; --accent: #7a8a5e; /* le fond est clair et l'encre sombre sur les huit faces : rien ne disparaît, et seules les trois zones que son dessin met à l'olive se déclarent — le mot du haut, le lieu et le © Booky. */ --c-sur: #7a8a5e; --c-sous: #7a8a5e; --c-marque: #7a8a5e; /* l'emplacement photo vide, relevé sur ses six tirages */ --photo-vide: #d9d2be; --photo-vide-encre: #6e6a5a; /* les deux constantes du tirage, écrites une fois : l'angle n'existe pas en variable CSS utilisable dans `rotate()` sans `calc`, l'ombre si. */ --m8-ombre-x: 0.85cqw; /* 21 px, dans le repère de l'objet */ --m8-ombre-y: 1.02cqw; /* 25 px */ } /* ------------------------------------------------------- LE TIRAGE INCLINÉ PIÈGE 3, dans sa version « pas du texte ». On pose la boîte DROITE par ses quatre côtés — donc son centre — et on tourne ensuite : `transform-origin` vaut `center` par défaut, le centre ne bouge pas d'un pixel et les valeurs relevées restent lisibles. L'inverse (tourner puis caler sur la boîte d'après rotation) obligerait à écrire les diagonales, qui ne veulent rien dire. Les trois classes de photo partagent le geste ; c'est leur BOÎTE, déclarée face par face, qui porte le déplacement. L'ombre est une `box-shadow` sans flou : elle tourne AVEC l'objet, ce qui est exactement ce que montre le dessin — le décalage y est constant dans le repère du tirage, pas dans celui de la page. */ .carnetm.m8 .cn-photo, .carnetm.m8 .cn-photo2, .carnetm.m8 .cn-photo3 { transform: rotate(-6deg); box-shadow: var(--m8-ombre-x) var(--m8-ombre-y) 0 var(--accent); } /* ------------------------------------------------------------- LES FILETS Deux seulement, et BORNÉS aux faces qui les portent : une déco sans `top` retomberait collée au bord haut des autres. Ils ont la même portée sur les huit faces — 2 040 px, de 8,87 % à 91,13 % — et c'est cette portée qui donne sa justification à toute la titraille du modèle. */ /* (a) le filet de titre : 5 px sur les quatre pages de texte… */ .carnetm.m8.cn-f2 .cn-deco.a, .carnetm.m8.cn-f3 .cn-deco.a, .carnetm.m8.cn-f5 .cn-deco.a, .carnetm.m8.cn-f6 .cn-deco.a, .carnetm.m8.cn-f8 .cn-deco.a { left: 8.87%; width: 82.26%; top: 22.57%; height: max(0.12rem, 0.20cqw); background: var(--accent); } /* …et 3 px sur le dos, où il n'a plus qu'à souligner une ligne courte */ .carnetm.m8.cn-f8 .cn-deco.a { height: max(0.12rem, 0.12cqw); } /* (b) le long filet en pied — la signature du modèle, sur sept faces */ .carnetm.m8.cn-f1 .cn-deco.b, .carnetm.m8.cn-f2 .cn-deco.b, .carnetm.m8.cn-f3 .cn-deco.b, .carnetm.m8.cn-f4 .cn-deco.b, .carnetm.m8.cn-f5 .cn-deco.b, .carnetm.m8.cn-f6 .cn-deco.b, .carnetm.m8.cn-f7 .cn-deco.b { left: 8.87%; width: 82.26%; top: 93.12%; height: max(0.12rem, 0.12cqw); background: var(--accent); } /* sur le dos il REMONTE sous le QR : le pied est pris par le mot de fin et la marque, et le filet redevient un séparateur. */ .carnetm.m8.cn-f8 .cn-deco.b { left: 8.87%; width: 82.26%; top: 75.06%; height: max(0.12rem, 0.12cqw); background: var(--accent); } /* ------------------------------------------------------------------- F1 LA COUVERTURE. Le tirage en tête, centré sur l'axe de la page à 1 240 px — le seul des six à l'être exactement — et toute la titraille dessous, centrée elle aussi, sur la pleine largeur entre filets. Le mot du haut et le lieu passent à l'olive ; le nom et le mot d'accueil restent à l'encre. */ .carnetm.m8.cn-f1 .cn-photo { left: 33.87%; right: 33.87%; top: 13.53%; bottom: 54.87%; /* 800 × 560 */ } /* LES CORPS DE TEXTE SONT MESURÉS, PAS CALCULÉS. Les quatre valeurs ci-dessous viennent d'une première passe rendue puis resondée : bande d'encre du rendu contre bande d'encre du dessin, et le rapport appliqué au cqw. Le mot du haut est ressorti à 36 px pour 38 attendus, le nom à 114 pour 112. */ .carnetm.m8.cn-f1 .cn-sur { position: absolute; left: 8.87%; right: 8.87%; top: 55.06%; margin: 0; text-align: center; font-size: max(0.44rem, 1.93cqw); font-weight: 700; letter-spacing: 0; text-transform: none; } .carnetm.m8.cn-f1 .cn-corps { left: 8.87%; right: 8.87%; top: 61.28%; bottom: 0; padding: 0; text-align: center; } .carnetm.m8.cn-f1 .cn-nom { font-size: 4.55cqw; font-weight: 700; line-height: 1.12; } .carnetm.m8.cn-f1 .cn-sous { font-size: max(0.44rem, 1.91cqw); margin-top: 2.96cqw; } .carnetm.m8.cn-f1 .cn-mot { font-size: max(0.44rem, 2.05cqw); font-style: italic; margin-top: 2.63cqw; } /* ------------------------------------------------------------------- F2 LE MOT DU PROPRIÉTAIRE. Aucun tirage : la face est nue, et c'est le seul endroit du carnet où les deux filets encadrent une page entière de texte. Le titre centré au-dessus du filet, le mot en drapeau à gauche sur les 2 040 px, la signature en bas à droite. */ /* le titre fixe est le seul texte tout en CAPITALES du carnet : son haut d'encre est la hauteur de capitale, plus basse que le haut des parenthèses qui borne toutes les autres lignes. D'où un `top` plus haut ici que celui du titre des pages libres, pour une encre au même endroit. */ .carnetm.m8.cn-f2 .cn-motprop { position: absolute; left: 8.87%; right: 8.87%; top: 14.72%; margin: 0; text-align: center; /* PLANCHÉ comme le mot et la signature qu'il commande : sans `max()`, à la largeur réduite que le socle impose sous 900 px (`--lw: 236px`), ses 2,46 cqw tombent à 5,81 px quand `.cn-proprio` et `.cn-signe` restent tenues à 7,04 px par le leur. Le titre passerait SOUS son propre texte — hiérarchie inversée. Au-dessus de 286 px de face le plancher ne mord pas : le dessin rendu à sa vraie taille ne bouge pas d'un pixel. */ font-size: max(0.44rem, 2.46cqw); font-weight: 700; letter-spacing: 0; line-height: 1.12; } .carnetm.m8.cn-f2 .cn-corps { left: 8.87%; right: 8.87%; top: 29.90%; bottom: 14%; padding: 0; } .carnetm.m8.cn-f2 .cn-proprio { font-size: max(0.44rem, 2.07cqw); line-height: 1.5; } .carnetm.m8.cn-f2 .cn-signe { font-size: max(0.44rem, 1.98cqw); font-style: italic; } /* --------------------------------------------- F3 · F5 · F6 les pages libres Même titre, même filet, et LE TIRAGE SE DÉPLACE : à droite à mi-hauteur, à gauche, puis en pied. La colonne change de côté avec lui, et sa largeur avec elle — c'est là que la consigne « ne prends pas une valeur unique » se paie : 1 020 px sur F3, 1 100 sur F5, les 2 040 pleins sur F6. */ .carnetm.m8.cn-f3 .cn-ptitre, .carnetm.m8.cn-f5 .cn-ptitre, .carnetm.m8.cn-f6 .cn-ptitre { position: absolute; left: 8.87%; right: 8.87%; top: 14.85%; margin: 0; text-align: center; /* MÊME PLANCHER que le corps qu'il annonce. Le dessin donne 58 px d'encre au titre contre 43 au texte — un tiers de plus ; sans `max()` le rapport s'inverse dès que la face descend sous 300 px, le titre tombant à 5,55 px quand `.cn-ptexte` tient à 7,04. */ font-size: max(0.44rem, 2.35cqw); font-weight: 700; line-height: 1.12; } /* DÉFAUT B. `.cn-photo2` vit DANS `.cn-corps` : un corps positionné devient son repère, et les pourcentages du tirage se compteraient sur la colonne au lieu de la page. Ici le tirage se place par rapport à la PAGE — c'est même tout le sujet du modèle. Le corps prend donc la face entière et le texte se pose en absolu dedans. */ .carnetm.m8.cn-f3 .cn-corps, .carnetm.m8.cn-f5 .cn-corps, .carnetm.m8.cn-f6 .cn-corps { inset: 0; padding: 0; } .carnetm.m8.cn-f3 .cn-ptexte, .carnetm.m8.cn-f5 .cn-ptexte, .carnetm.m8.cn-f6 .cn-ptexte { position: absolute; margin: 0; font-size: max(0.44rem, 2.24cqw); line-height: 1.5; min-height: 0; } .carnetm.m8.cn-f3 .cn-photo2, .carnetm.m8.cn-f5 .cn-photo2, .carnetm.m8.cn-f6 .cn-photo2 { position: absolute; } /* F3 — le tirage à droite, la colonne à gauche */ .carnetm.m8.cn-f3 .cn-ptexte { left: 8.87%; right: 50.00%; top: 31.06%; } .carnetm.m8.cn-f3 .cn-photo2 { left: 57.67%; right: 14.14%; top: 36.98%; bottom: 36.55%; } /* F5 — tout passe de l'autre côté */ .carnetm.m8.cn-f5 .cn-ptexte { left: 46.77%; right: 8.87%; top: 31.06%; } .carnetm.m8.cn-f5 .cn-photo2 { left: 10.92%; right: 60.89%; top: 36.94%; bottom: 36.54%; } /* F6 — le tirage descend en pied et se réduit ; la colonne retrouve alors la pleine largeur entre filets, la seule des trois à l'avoir. */ .carnetm.m8.cn-f6 .cn-ptexte { left: 8.87%; right: 8.87%; top: 31.06%; } .carnetm.m8.cn-f6 .cn-photo2 { left: 37.32%; right: 35.26%; top: 60.06%; bottom: 15.17%; } /* -------------------------------------------------- F4 · F7 les faces photo Le tirage à sa plus grande échelle, tenu par le seul filet de pied. Il ne saigne jamais : c'est la différence avec m1, et c'est ce que veut dire « il respire davantage ». Vide, le filet et le vide tiennent la face à eux deux — condition pour que la photo reste facultative. */ .carnetm.m8.cn-f4 .cn-photo3 { left: 17.71%; right: 17.77%; top: 21.49%; bottom: 22.13%; /* 1 600 × 999 */ } /* F7 : plus petit que F4, et décalé vers la droite et le bas. Deux faces photo, deux cadrages — jamais le même objet deux fois. */ .carnetm.m8.cn-f7 .cn-photo3 { left: 27.14%; right: 20.44%; top: 23.42%; bottom: 25.79%; /* 1 300 × 900 */ } /* ------------------------------------------------------------------- F8 LE DOS. La seule face à porter ses deux filets HAUT ET BAS DU QR : le premier sous la ligne du QR, le second sous la plaque. Le mot de fin et le © Booky vivent dessous, dans le vide du pied — là où les sept autres faces posaient leur long filet. */ .carnetm.m8.cn-f8 .cn-corps { inset: 0; padding: 0; } .carnetm.m8.cn-f8 .cn-qrtexte { position: absolute; left: 8.87%; right: 8.87%; top: 14.46%; margin: 0; text-align: center; font-size: max(0.44rem, 2.57cqw); font-weight: 700; } /* la plaque : carrée, centrée, cernée du filet fin que montre son dessin. Le socle la peint en blanc et ce garde-fou ne se discute pas — sur un fond crème la différence ne se voit pas, mais un QR se scanne. */ .carnetm.m8.cn-f8 .cn-qr { left: 36.69%; right: 36.69%; top: 31.60%; aspect-ratio: 1; border: max(0.12rem, 0.20cqw) solid var(--encre); } .carnetm.m8.cn-f8 .cn-fin { position: absolute; left: 8.87%; right: 8.87%; top: 79.86%; margin: 0; text-align: center; font-size: max(0.44rem, 2.10cqw); font-style: italic; } .carnetm.m8.cn-f8 .cn-marque { top: 94.58%; bottom: auto; font-size: 1.47cqw; }